@charset "UTF-8";
/*----------------------
common
----------------------*/
* { box-sizing: border-box; }
.listEnd { margin: 0px; }
.red { color: #CC0000; }
img, x:-moz-any-link, x:default {box-shadow: #000 0 0 0;}
img { height: auto; }
img.w100 { max-width: 100%; }
p{ line-height:1.8em; letter-spacing: 1px; color: #000000;}
.no-resp { height: auto !important; width: auto !important; }
.br-pc { display: none; }
.pc-no,.br-tab, .br-ssp { display: none; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.contents p.caption { font-size: 85%; line-height: 1.4em; margin-top: 5px; margin-bottom: 5px; }
#pageTop { font-size: 0px; line-height: 0px; }
.bgg { background-color: #F2F2F2; }
.bgb { background-color: #EDF8FA; }
.width-s { max-width: 640px; margin: auto; }
.width-m { max-width: 800px; margin: auto; }

a { color: #0088CE;}
a:hover { color: #06c;}
sup{ font-size: 50%;vertical-align: top;position: relative;top: -0.1em;}

/* header
----------------------*/
#header {margin: 0px auto; width: 100%; background:  url(/files/webux/campaign/open-hybrid-cloud18/images/bg-img.jpg) no-repeat center 40%; background-size: cover; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 20px 20px 80px 20px; min-height: 540px; position: relative; }
.header_m { padding-top: 160px;  text-align:left; }
.header_m h1 { font-size: 60px; font-weight: bold; line-height: 1.4em; color: #FFFFFF; margin-bottom: 30px;}
.header_m h1 strong { font-size: 55px;}
.header_m h2 { font-size: 34px; font-weight: bold; line-height: 1.4em; color: #FFFFFF; margin-bottom: 5px;}
.header_m p { font-size: 32px; font-weight: 600; line-height: 1.6em; color: #FFFFFF;margin-bottom: 30px;}
.ohc-ttl {float: left; padding-top: 10px; display: inline}

.ohc-ttl img { width: 100%; max-width: 280px; height: auto}
.redhat-logo img {margin-top: -7px;}
.btn-header {margin-top: 50px;white-space: nowrap; }
.btn-header a {background-color:#F0AB00; font-size:22px;font-weight:600;color: #FFFFFF; padding: 26px 30px 22px;box-shadow: 4px 4px 0 #957234; }
.btn-header a:hover {background-color:#EC7A08;text-decoration: none;box-shadow: 4px 4px 0 #B46100;}

/* NAVBAR pc
-------------------------------------------------- */
.navbar-wrapper {background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;width: 100%;height: 60px;z-index: 15;overflow: visible;}
.navbar-wrapper.fixed { height:60px; }
.navbar { margin: 0px auto; width: 100%; max-width: 1200px; padding-top: 18px; }
.navbar a { color: #FFF; font-size: 14px; }
.navbar a:hover { color: #F00; text-decoration: none; }
.navbar .active { border-bottom: 3px solid #FFFFFF; }
.navbar .navbar-header { padding: 4px 20px 0; }

.navbar-nav { float: right; margin-top: 0px; }
.navbar-nav li { float: left; margin: 0 15px; }
.navbar-nav li .ardl { background: url(../images/arrow01-2x.png) no-repeat right center; background-size: 18px; padding: 5px 25px 5px 0px; }
.navbar-wrapper.fixed  { background: rgba(0,0,0,0.7);  }

/* NAVBAR mov
-------------------------------------------------- */
 @media screen and (max-width: 980px) {
.navbar-wrapper { height: 55px; }
.navbar-wrapper.fixed { height:55px; }
.navbar-wrapper .navbar a { color: #FFF; display: block; }
.navbar-wrapper .navbar a:hover { color: #F00; text-decoration: none; }
.navbar-wrapper .navbar .active { border-bottom: none !important; }
.navbar-wrapper .navbar .active a {  color: #CC0000; font-weight: bold;}

.navbar #menu { display: block; float: right; margin-right: 20px; color:#FFF; }
.navbar .navbar-nav { float: none; position: absolute; top: 55px; left: 0px; width: 100%; display: none; }
.navbar .navbar-nav li { float: none; margin: 0; padding: 12px 0px 10px; width: auto; text-align: center; background: rgba(0,0,0,0.7); border-top: solid 1px rgba(255,255,255,0.2); }
.fixed .navbar-nav {margin-top:0px; }
#menu:after { content: "MENU"; }
#menu.close:after { content: "CLOSE"; }
}

/* contents
----------------------*/
#wrapper { position: relative; z-index: 0; background-color: #FFF; width: 100%; min-width: 320px; }
.contents { margin: 0 auto; max-width: 960px; padding: 70px 20px; }
.content-r { margin: 0 0 0 auto; max-width:640px;width:70%; }
.content-m { margin: 0 auto; max-width: 960px; margin-bottom: 70px; }

.bg01{background: url(/files/webux/campaign/open-hybrid-cloud18/images/pic01.png) no-repeat 10px 60px;background-size: 240px 1600px;}
.bg02{background: url(/files/webux/campaign/open-hybrid-cloud18/images/pic02.png) no-repeat 85% top ;background-size: 22.5px 150px;margin: 0 auto; max-width: 960px; padding-bottom: 40px;}
.contents h2 { font-size: 38px; font-weight: bold; line-height: 1.5em; color: #000000; margin:0 auto 10px;}
.contents h3 { font-size: 18px; font-weight: bold; line-height: 1.5em; color: #CC0000; margin-bottom: 40px; }
.contents p{ font-size: 18px; margin-bottom: 1em;}
.contents img {max-width: 100%; height: auto;}
.speakers{background-color: #F2F2F2; max-width:960px; margin: auto;}

.prof li {float: left; width: 50%;font-size: 15px;}
.prof li:first-child {padding: 30px 15px 30px 30px}
.prof li:last-child {padding: 30px 30px 30px 15px }
.prof span { font-size:150%;line-height: 1.6em;}
.prof-img {width:120px; height:120px; overflow: hidden;border-radius: 50%;margin-right: 20px; margin-bottom:20px;float: left;}
.prof-img img {width: 100%; height: auto;}

.prof h3 {font-size: 20px; font-weight: bold;line-height: 1.6em; color: #000000; margin-bottom: 10px;}

.pdf-box{ padding: 70px 20px;}
.dl-character {float:left;width:70%; padding-right: 30px}
.dl-img {float: right;width:30%; text-align:right;padding-right: 3%;}
.dl-img img {box-shadow: 0 0 2px rgba(0,0,0,0.2); max-width: 100%; height: auto;}
.fr {float: right;}
.dl-character h2 {font-size: 22px; color: #000000; line-height: 1.6em;margin-bottom: 15px;}
.dl-character h2 span {font-size: 160%; line-height: 1.6em;}
.dl-character p {font-size: 18px;}
.btn-footer {margin-top: 50px; text-align: center;white-space: nowrap}
.btn-footer a {background-color:#F0AB00; font-size:22px;font-weight:600;color: #FFFFFF; padding: 26px 30px 22px; box-shadow: 4px 4px 0 #957234; }
.btn-footer a:hover {background-color:#EC7A08;text-decoration: none;box-shadow: 4px 4px 0 #B46100;}

#link-area{ }
.link-collection {max-width: 1000px; margin: auto;padding: 80px 20px;border-top: solid 1px #CCCCCC;}
.link-collection h2{font-size: 30px; font-weight: bold; line-height: 1.5em; color: #000000; margin:0 auto 5px; text-align: center;}
.link-collection .subttl{font-size: 18px; font-weight: bold; line-height: 1.5em; color: #0088CE; margin:0 auto 40px; text-align: center;}
.link-collection h3{font-size: 18px; font-weight:600; line-height: 1.5em; color: #FFFFFF; text-align: center;margin-top: 10px;}
.link-collection .case{ margin: 20px -1.4% 0;}
.link-collection .case li{ float: left; width: 22.2%; margin:0 1.4%;}
.link-collection .case li img{ width: 100%; height: auto; margin-bottom: 20px;}
.link-collection .case li h4{ font-size: 18px; font-weight: bold; line-height: 1.5em; color: #000000; margin-bottom: 15px; padding: 0 5px;}
.link-collection .case li p{ font-size: 15px; line-height: 1.6em; color: #000000; margin-bottom: 15px; padding: 0 5px;}
.link-collection .col-row{ margin: 20px -1.4% 0;}
.link-collection .col-6{ float: left;width:47.2%;  margin: 15px 1.4%; }
.link-collection .col-6 h4{ font-size: 18px; font-weight: bold; line-height: 1.5em; color: #000000;margin-top:20px; margin-bottom:5px;}
.link-collection .col-6 p{ font-size: 15px; line-height: 1.6em; color: #000000; margin-bottom:10px;}
.st0 {background : linear-gradient(120deg, rgba(0, 185, 228, 1) 0%, rgba(0, 136, 206, 1) 100%); padding: 7px 0 3px 0;}
.st1 {background : linear-gradient(120deg, rgba(204, 0, 0, 1) 0%, rgba(163, 0, 0, 1) 100%); padding: 7px 0 3px 0;}

/* PC & Tablet */
@media only screen and (max-width:980px) {
/* 980px以下 */
body, #wrapper { max-width: 980px; }
#header .header-inner { width: auto; }
.tab-no { display: none;}


}


 @media screen and (max-width: 768px) {
/* 768px以下 */
body { font-size: 15px; }
body, #wrapper { width: auto; }
#wrapper { width: 100%; min-width: 100%; }
#header .header-inner { width: auto;min-height:auto; padding-bottom: 100px; }
.header_m { padding-top: 130px; }
.header_m h1 { font-size: 36px; }
.header_m h2 { font-size: 20px;}
.header_m p { font-size: 22px; }
.ohc-ttl { width: 70%;}
.redhat-logo img { width: 80px; height: auto}
.btn-header a,.btn-footer a {font-size:17px; padding: 24px 25px 20px; }
.br-pc,.br-tab { display: block; }
.br-sp { display: none; }
.sp-no { display: none;}



/*----------------------
contents
----------------------*/
.contents { margin: 0 auto; padding: 50px 20px; }
.content-r { margin: 0 0 0 auto; width:70%; }
.bg01{background-position: -20px 60px;background-size: 200px 1333px;}
.bg02{background-position: 85% top ;background-size: 19px 150px;}
.partner-logo img { margin: 0px auto; }
.detail-btn a { margin: auto; margin-top: 8px; }
#link-area ul li span {display:block; width:auto; }
.contents h2 {font-size: 24px; }
.contents h3 { font-size: 18px; }
.prof li {float: none; width: 100%; }  
.prof li:first-child {padding:30px 20px}
.prof li:last-child {padding:0 20px 30px}
.prof p {font-size: 14px; line-height: 1.5em;}
   
.contents h4 { font-size: 18px; }
.contents h5 { font-size:16px; }
.contents p { font-size:15px; }
.dl-character h2 {font-size: 18px;}
.dl-character p {font-size: 16px;}
   
}
 @media screen and (max-width: 580px) {
#header .header-inner {padding-bottom:80px; }
.header_m { padding-top: 110px; }
.header_m h1 { font-size: 30px; }
.header_m h2 { font-size: 18px;}
.content-r { margin: 0 0 0 auto; width:85%; }
.bg01{background-position: -75px 60px;background-size: 180px 1300px;}
.bg02{background-position: 50% top ;background-size: 17px 150px;}
.prof h3 {font-size: 18px; line-height: 1.5em; }
.prof-img {width:120px; height:120px;margin:auto; margin-bottom:20px;float:none;}
.br-ssp{display: block;}
.ssp-no { display: none;}
.dl-character {float:none;width:100%;padding-left: 0px; padding-right: 0px}
.dl-img {float: nonet;width:100%; text-align:center;padding-right: 0; margin-bottom: 30px;}
.dl-img img { width: 150px; height: auto;}
.fr {float:none;}
.link-collection .case li{ width: 47.2%; margin:0 1.4%; min-height: 24em;}
.link-collection .col-6{ float: none;width:100%;  margin:0px 0 10px; }
.link-collection .col-row{ margin: 0;}
.mgb60 {margin-bottom: 60px !important;}
}