/*---------------------------------------------------------------------------- セカンドヘッダー 17/09 ----------------------------------------------------------------------------*/ /* 階層調整 */ body header nav.drawer2-nav {z-index: 7;} /* 2 */ body header.drawer2-navbar {z-index: 8;} /* 3 */ body header .drawer2-navbar-header {z-index: 8;} /* 3 */ body header .drawer2-hamburger {z-index:9;} header.drawer2-navbar .drawer2-navbar-header {height:56px;border-bottom:none;background-color: transparent;} header nav.drawer2-nav {background-color: transparent;} header .drawer2-brand {padding-left:0;padding-right:0;} header.drawer2-navbar .drawer2-menu-item:hover {text-decoration:none;} /* ハンバーガーボタン */ header .drawer2-hamburger {position:absolute;top:0;display:block;box-sizing:content-box;width:18px;margin:5px;padding:9px 11px 28px;border:0;outline:0;background-color:transparent;-webkit-transition:all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);transition:all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} header .drawer2-hamburger:hover {cursor:pointer;background-color:transparent;} header .drawer2-hamburger .sr-only {display:block;position:absolute;right:45px;top:0;width:4em;height:40px;} header .drawer2-hamburger .sr-only {text-align:right;color:#FFF;line-height:40px} header .drawer2-hamburger .sr-only {clip:initial;margin:0;padding:0;border:0;overflow:hidden;} header .drawer2-hamburger .sr-only::before {display:inline;content:'製品情報';} header .drawer2-hamburger-icon {position:relative;display:block;margin-top:3px;width:100%;} header .drawer2-hamburger-icon_Top, header .drawer2-hamburger-icon_Middle, header .drawer2-hamburger-icon_Bottom {display:block;position:absolute;left:0;width:18px;height:2px;-webkit-transition:all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);transition:all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);} header .drawer2-hamburger-icon_Top:before, header .drawer2-hamburger-icon_Middle:before, header .drawer2-hamburger-icon_Bottom:before {content:'';position:absolute;top:0;left:0;width:2px;height:2px;background-color:#C8CCCC;-webkit-transition:width .1s, opacity .1s;transition:width .1s, opacity .1s;} header .drawer2-hamburger-icon_Top:after, header .drawer2-hamburger-icon_Middle:after, header .drawer2-hamburger-icon_Bottom:after {content:'';position:absolute;top:0;right:0;width:13px;height:2px;background-color:#C8CCCC;-webkit-transition:width .2s, opacity .2s;transition:width .2s, opacity .2s;} header .drawer2-hamburger-icon_Top {top:0;} header .drawer2-hamburger-icon_Middle {top:6px;} header .drawer2-hamburger-icon_Bottom {top:12px;} .drawer2-open header .drawer2-hamburger-icon {background-color:transparent;} .drawer2-open header .drawer2-hamburger-icon_Top {top:6px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .drawer2-open header .drawer2-hamburger-icon_Bottom {top:6px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);} .drawer2-open header .drawer2-hamburger-icon_Middle:before, .drawer2-open header .drawer2-hamburger-icon_Middle:after {width:0;opacity:0;} .drawer2-open header .drawer2-hamburger-icon_Top:after, .drawer2-open header .drawer2-hamburger-icon_Bottom:after {width:18px;} /* 製品帯ロゴ */ header.drawer2-navbar div.HeadTitle, header.drawer2-navbar h2 {float:left;width:136px;height:56px;} header#warp_navi div.HeadTitle a, header#warp_navi h2 a {width:100%;height:100%;display:block;background:url(img/link_navigation_warp_logo_icon.png?ver=201906) no-repeat left 50%;text-indent:-10000em;} /* Warp20thマーク：2022/06/24_07/23まで header#warp_navi div.HeadTitle a, header#warp_navi h2 a {width:100%;height:100%;display:block;background:url(img/warp20th_mark_202206_w63.png?ver=202206) no-repeat left 50%;text-indent:-10000em;} */ header#mdm_navi div.HeadTitle a, header#mdm_navi h2 a {width:100%;height:100%;display:block;background:url(img/link_navigation_mdm_logo.png) no-repeat left 50%;text-indent:-10000em;} /* 問い合わせボタン */ header.drawer2-navbar nav.secondMenuBox ul li.btn {float:left;} header.drawer2-navbar nav.secondMenuBox ul li.btn a {display:block;width:auto;height:100%;box-sizing:border-box;overflow:hidden;} header.drawer2-navbar nav.secondMenuBox ul li.btn a {font-size:77%;border-radius:13px;line-height:inherit;} header.drawer2-navbar nav.secondMenuBox ul li.btn.white a {color:#313131;border:1px solid #C8CCCC;background:#E5E5E5;background:linear-gradient(top bottom,#FEFEFE,#E5E5E5);background:-ms-linear-gradient(top, #FEFEFE, #E5E5E5);background:-moz-linear-gradient(center top, #FEFEFE 0%,#E5E5E5 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #E5E5E5));} header.drawer2-navbar nav.secondMenuBox ul li.btn.green a {color:#fff;background:#00A785;background:linear-gradient(top bottom,#59C5AE,#00A785);background:-ms-linear-gradient(top, #59C5AE, #00A785);background:-moz-linear-gradient(center top, #59C5AE 0%,#00A785 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #59C5AE),color-stop(1, #00A785));} header.drawer2-navbar nav.secondMenuBox ul li.btn.white a:hover {background:#F0F0F0;} header.drawer2-navbar nav.secondMenuBox ul li.btn.green a:hover {background:#59C5AE;} /* ブレークポイント（1260px以下なら）*/ @media (max-width:1260px){ header .drawer2-container {margin-left: 30px;margin-right: 30px;} } /* ブレークポイント（1024px=64em以上なら）*/ @media (min-width:64em){ header.drawer2-navbar {height:56px;border-bottom:none;background-color: transparent;} header.drawer2-navbar .drawer2-nav {height:56px;} header .drawer2-container {max-width:96%;} /* 1200pxから変更 2021/08 */ header.drawer2-navbar .drawer2-menu-item {padding:0;line-height:inherit;} /*---------------------------------------------------------------------------- WARP/MDMナビ（上）17/09 ※ハンバーガーボタン併用、PC/SP ----------------------------------------------------------------------------*/ header.drawer2-navbar {margin:0 auto;} /* セカンドメニューボックス */ header.drawer2-navbar nav.secondMenuBox {float:right;width:100%;height:56px;margin-left:-136px;padding-left:136px;box-sizing:border-box;overflow:hidden;} header.drawer2-navbar nav.secondMenuBox ul li {float:left;display:block;box-sizing:border-box;overflow:hidden;} header.drawer2-navbar nav.secondMenuBox ul li a {display:block;box-sizing:border-box;overflow:hidden;} /* サブメニュー */ header.drawer2-navbar nav.secondMenuBox ul li.nav {height:16px;line-height:16px;margin:20px 0;padding:0;border-left:1px solid #777;} /* WARPナビ */ header#warp_navi nav.secondMenuBox ul li.nav:nth-child(1) {width:7%;margin-left:1.99%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(2) {width:9.5%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(3) {width:19.5%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(4) {width:8%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(5) {width:7%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(6) {width:9.5%;} header#warp_navi nav.secondMenuBox ul li.nav:nth-child(7) {width:12.5%;} /* MDMナビ */ header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(1) {width:10%;margin-left:1.99%;} header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(2) {width:12%;} header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(3) {width:17%;} header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(4) {width:13%;} header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(5) {width:9%;} header#mdm_navi nav.secondMenuBox ul li.nav:nth-child(6) {width:12%;} /* ここまで */ header.drawer2-navbar nav.secondMenuBox ul li.nav a {display:block;width:100%;height:100%;overflow:hidden;} header.drawer2-navbar nav.secondMenuBox ul li.nav a {font-size:93%;color:#fff;} header.drawer2-navbar nav.secondMenuBox ul li.nav a:hover {color:#CCC;} /* 問い合わせボタン */ header.drawer2-navbar nav.secondMenuBox ul li.btn {width:12%;height:26px;line-height:26px;margin:15px 0;} header.drawer2-navbar nav.secondMenuBox ul li.btn.white {margin-left:0;} header.drawer2-navbar nav.secondMenuBox ul li.btn.white.second, header.drawer2-navbar nav.secondMenuBox ul li.btn.green {margin-left:1%;} /*スクロール固定時*/ header.drawer2-navbar--fixed {height:46px;padding:3.75rem 0 0;margin:0;background-color:#313131;border-bottom:1px solid #FFF;} header.drawer2-navbar--fixed .drawer2-nav, header.drawer2-navbar--fixed div.HeadTitle, header.drawer2-navbar--fixed h2, header.drawer2-navbar--fixed nav.secondMenuBox, header.drawer2-navbar--fixed .drawer2-navbar-header {height:46px;} header.drawer2-navbar--fixed nav.secondMenuBox ul li.nav {margin:15px 0;} header.drawer2-navbar--fixed nav.secondMenuBox ul li.btn {margin:10px 0;} /* 製品帯ロゴ：小 */ header#warp_navi.drawer2-navbar--fixed div.HeadTitle a, header#warp_navi.drawer2-navbar--fixed h2 a {background:url(img/link_navigation_warp_logo_icon_mini.png?ver=201906) no-repeat left 50%;} header#mdm_navi.drawer2-navbar--fixed div.HeadTitle a, header#mdm_navi.drawer2-navbar--fixed h2 a {background:url(img/link_navigation_mdm_logo.png) no-repeat left 50%;} } /* ブレークポイント（1200px = 75em以上なら）*/ /* メモ：1120px = 70rem */ @media (min-width:75em){ header .drawer2-container {max-width:96%;} /* 1200pxから変更 2021/08 */ } /* ブレークポイント（1023.84px = 63.99em以下なら）*/ @media (max-width:63.99em){ /* 帯の縦幅を調整 */ body.bodyContBlack div#bodyCont, body#warp_blog div#bodyCont, body#warp_jirei div#bodyCont, body.warp_top div#bodyCont {background:none;} header.drawer2-navbar--fixed {top:50px;} header.drawer2-navbar div.HeadTitle, header.drawer2-navbar h2 {height:50px;} header.drawer2-navbar .drawer2-navbar-header {height:50px;background-color:#313131;} header .drawer2-container {margin-left: 0;margin-right: 0;} header .drawer2-navbar-header {height:50px;} header.drawer2-navbar .drawer2-nav {padding-top:100px;} header.drawer2-navbar nav.secondMenuBox ul li {height:0;margin:0;padding:0;} /* スクロール */ .drawer2-open header.drawer2-navbar .drawer2-nav {overflow:scroll;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;} .drawer2-open header.drawer2-navbar .drawer2-nav {transform: translate3d(0, 0, 0);} .drawer2-open header.drawer2-navbar .drawer2-nav ul.drawer2-menu {overflow-y:auto;} /* ハンバーガー表示の時は表示 */ header nav.drawer2-nav ul.drawer2-menu {border-bottom:1px solid #C8CCCC;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close {display:initial;} /* 各調整 */ .drawer2-open header .drawer2-hamburger .sr-only::before {content:'閉じる';} .drawer2-open header nav.drawer-nav ul.drawer2-menu {width:auto;margin:0;box-sizing:border-box;overflow:hidden;} .drawer2-open header nav.drawer-nav ul.drawer2-menu {border-bottom:1px solid #C8CCCC;} .drawer2-open header nav.drawer-nav ul.drawer2-menu li a {font-size:1rem;line-height:1.25rem;padding: 0.75rem 0;} /* セカンドメニューボックス */ .drawer2-open header.drawer2-navbar nav.secondMenuBox ul {background:#FFF;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li {height:auto;margin:initial;padding:initial;} /* サブメニュー */ .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.nav {text-align:left;border-bottom:1px solid #C8CCCC;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.nav:hover {background-color:#F0F0F0;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.nav a {display:block;width:90%;height:100%;margin:0 5%;padding-left:15px;overflow:hidden;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.nav a{background:url(img/header_warp_green_arrow.png?ver=20210930) no-repeat left 50%;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.nav a {font-size:1rem;color:#313131;} /* 問い合わせボタン */ .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn {width:50%;*width:49.99%;height:3.75rem;line-height:3.75rem;margin:0;border-bottom:1px solid #C8CCCC;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn {text-align:center;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn.white {margin-left:0;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn.green {margin-left:0;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn a {font-size:1rem;line-height: 2.375rem;font-weight:bold;border-radius:0;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn.white a {border:none;} .drawer2-open header.drawer2-navbar nav.secondMenuBox ul li.btn.white.second a {border-left:1px solid #C8CCCC;} /* 閉じるボタン */ .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close {display:block;clear:left;float:none;width:100%;min-height:5rem;padding-bottom:5rem;overflow:hidden;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button {position:relative;top: initial;right:initial;-webkit-transition:initial;transition:initial;-webkit-transform:initial;transform:initial;background-color:initial;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button {display:block;width:130px;height:40px;margin:1.25rem auto;box-sizing:border-box;overflow:hidden;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button {font-size:0.8125rem;padding:0 15px 0 10px;line-height:40px;border-radius:20px;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button {color:#313131;border:1px solid #C8CCCC;background:#FFF;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button:hover {background:#F0F0F0;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button:active {text-decoration:none;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button span:before {display:inline;padding:0 6px;color:#00A785;} .drawer2-open header nav.drawer2-nav ul.drawer2-menu li#close button span:before {content:'×'} }