@charset "utf-8";
/* --------------------------------
PCとスマホのヘッダー（ナビゲーションをのぞく） css 


※テンプレートはここに使い方がある
　ない場合は、毎回書き直し
-------------------------------- */



.hdr-box {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 99;
}
.bg-w .hdr-box {background-color: #FFFFFF;border-bottom:1px solid #D1D1D1;}
.bg-b .hdr-box {background-color: #000000;border-bottom:1px solid #3F3F3F;}
.bg-w .hd-inbox::after,
.bg-b .hd-inbox::after{
content: "";
display: block;
height: 10px;
width: 100%;
position: absolute;
bottom:-10px;
left:0px;
}
.bg-w .hd-inbox::after {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.bg-b .hd-inbox::after {
background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
.hd-inbox{display: table;width: 100%;}
.hd-h1{
    display: table-cell;
    width: 43%;
}
.hd-h1 a{
    display: block;
    height: 52px;
}
.logo-smp-w,
.logo-smp-b{
    width: 128px;/*122+padding*/
    height: 52px;/*42+padding*/
    padding:10px 0 0 6px; 
}
.bg-w .logo-smp-w{display: block;}
.bg-w .logo-smp-b{display: none;}
.bg-b .logo-smp-w{display: none;}
.bg-b .logo-smp-b{display: block;}


.hdr-phone,
.hdr-mail,
.hbg-space{
  display: table-cell;
    width: 19%;
    height: 60px;
}
.hdr-phone{
  background:#339933;  
    padding-top:15px;
}
.hdr-mail{
  background:#2D5A2C;
    padding-top:15px;
}

.phone-smp,
.mail-smp{
    display: block;
    width: 30px;
    height: 30px;
    margin:0 auto;
}
#cts-wrap{
    padding-top:60px;
}
@media (min-width: 350px) {
.logo-smp-w,
.logo-smp-b{
    width: 134px;/*122+padding*/
    padding:10px 0 0 12px; 
}
}/*end min-width: 350px*/
@media (min-width: 380px) {
.hd-h1{
    width: auto;
}
.hdr-phone,
.hdr-mail,
.hbg-space{
    width: 72px;
}
}/*end min-width: 380px*/

@media (min-width: 420px) {
.logo-smp-w,
.logo-smp-b{
    width: 142px;/*122+padding*/
    padding:10px 0 0 20px; 
}

}/*end min-width: 380px*/
@media (min-width: 640px) {
.phone-smp,
.mail-smp{
    display: none;
}
.hdr-phone,
.hdr-mail{
    width: 110px;
    position: relative;
}
.hdr-phone::after,
.hdr-mail::after{
    content:"";
    display: inline-block;/* ieでpointer-eventsが効かないため、代わりに指定 */
    width: 110px;
    height: 60px;
    position: absolute;
    top:0px;
    left:0px;
    pointer-events: none;/* クリック・タッチ除外 */
}

}/*end min-width: 640px*/

@media (min-width: 640px) and (max-width: 959px){
/* ★max注意↓ */
/* 背景を縮小する範囲を限定 */
.hdr-phone::after{
    background: transparent url(../img/common/phone-pc.png) 10px 6px / 136px 255px no-repeat;/*160px 300px の85%*/
}
.hdr-mail::after{
    background: transparent url(../img/common/mail-pc.png) 40px 11px / 59px 255px no-repeat;/*70px 300px の85%*/
}
}/* ★max注意↑ */ /*end width 640px-959px */

@media (min-width: 960px) {
.logo-smp-w,
.logo-smp-b,
.hbg-space{
display: none !important;
}
.hdr-box {
    height: 82px;
}
.hd-inbox{
display: block;
    }
.hd-h1,
.hd-h1 a{
display: block;
height: 82px;
width: 177px;
}
.bg-b .hd-h1{
    background: transparent url(../img/common/mnavi-pc-b.png) 12px 16px no-repeat; 
}
.bg-w .hd-h1{
    background: transparent url(../img/common/mnavi-pc-w.png) 12px 16px no-repeat; 
}
#nav,
#nav-inner,
#gl-menu,
#gl-menu li.pc-nav,
#gl-menu li.pc-nav a{
height: 82px;
}
li.pc-nav{
width: 13.3vw;
position: relative;
}
.bg-w li.pc-nav{
    border-left:1px solid #D1D1D1;
}
.bg-b li.pc-nav{
    border-left:1px solid #3F3F3F;
}
li.pnav1::after,
li.pnav2::after,
li.pnav3::after,
li.pnav4::after{
    content:"";
    display: block;
    position:absolute;
    top:24px;
    left:0px;
    height: 42px;
    pointer-events: none;/* クリック・タッチ除外 */
    z-index: -1;/* ieでpointer-eventsが効かないため、代わりに指定 */
    }
li.pnav1::after{
    width: 104px;
    margin-left:calc( 6.65vw - 52px );
}
li.pnav2::after{
    width: 74px;
    margin-left:calc( 6.65vw - 37px );
}
li.pnav3::after{
    width: 104px;
    margin-left:calc( 6.65vw - 52px );
}
li.pnav4::after{
    width: 86px;
    margin-left:calc( 6.65vw - 43px );
}
.bg-w li.pnav1::after{
    background: transparent url(../img/common/mnavi-pc-w.png) -200px 0px no-repeat;
}
.bg-w li.pnav2::after{
    background: transparent url(../img/common/mnavi-pc-w.png) -400px 0px no-repeat;
}
.bg-w li.pnav3::after{
    background: transparent url(../img/common/mnavi-pc-w.png) -600px 0px no-repeat;
}
.bg-w li.pnav4::after{
    background: transparent url(../img/common/mnavi-pc-w.png) -800px 0px no-repeat;
}
.bg-b li.pnav1::after{
    background: transparent url(../img/common/mnavi-pc-b.png) -200px 0px no-repeat;
}
.bg-b li.pnav2::after{
    background: transparent url(../img/common/mnavi-pc-b.png) -400px 0px no-repeat;
}
.bg-b li.pnav3::after{
    background: transparent url(../img/common/mnavi-pc-b.png) -600px 0px no-repeat;
}
.bg-b li.pnav4::after{
    background: transparent url(../img/common/mnavi-pc-b.png) -800px 0px no-repeat;
}
#nav{
left:18.4vw;/*ロゴの右*/
}
.hdr-phone,
.hdr-mail{
  display: block;
    width: 13.3vw;
    height: 82px;
    position: absolute;
    top:0px;
}
.hdr-phone{
    right: 13.3vw;
}
.hdr-mail{
    right:0px;
}
.hdr-phone::after{
    width: 104px;
    height: 82px;
    left:calc( 6.65vw - 52px );
    background: transparent url(../img/common/phone-pc.png) 0px 12px no-repeat;
}
.hdr-mail::after{
    width: 42px;
    height: 82px;
    left:calc( 6.65vw - 21px );
    background: transparent url(../img/common/mail-pc.png) 0px 18px no-repeat;
}

#cts-wrap{
    padding-top:82px;
}
}/*end min-width: 960px*/
@media (min-width: 1000px) {
.hd-h1, .hd-h1 a {
    width: 182px;
}
.bg-b .hd-h1, .bg-w .hd-h1 {
    background-position: 20px 16px;
    
}
}/*end min-width: 960px*/
@media (min-width: 1200px) {
#nav {
    left: auto;
    right: 320px;
    width: 640px;
}
li.pc-nav,
.hdr-phone,
.hdr-mail {
    width: 160px;
}

.hdr-phone {
    right: 160px;
}
.hd-h1, .hd-h1 a {
    width: 200px;
}
.bg-b .hd-h1,
.bg-w .hd-h1{
    background-position: 24px 16px;
}
.bg-w li.pnav1::after,
.bg-b li.pnav1::after{
    background-position: -200px -100px;
}
.bg-w li.pnav2::after,
.bg-b li.pnav2::after{
    background-position: -400px -100px;
}
.bg-w li.pnav3::after,
.bg-b li.pnav3::after{
    background-position: -600px -100px;
}
.bg-w li.pnav4::after,
.bg-b li.pnav4::after{
    background-position: -800px -100px;
}
li.pnav1::after {
    width: 140px;
    margin-left: 10px;
}
li.pnav2::after {
    width: 74px;
    margin-left: 43px;
}
li.pnav3::after {
    width: 116px;
    margin-left: 22px;
}
li.pnav4::after {
    width: 86px;
    margin-left: 37px;
}
.hdr-phone::after{
    width: 128px;
    left:16px;
    background-position: 0px -88px;/*0px 12px*/
}
.hdr-mail::after{
    width: 42px;
    left:59px;
    background-position: 0px -82px;/*0px 18px*/
}
}/*end min-width: 1200px*/



@media (min-width: 1700px) {
.hdr-box,
.hd-h1,
.hd-h1 a,
#nav,
#nav-inner,
#gl-menu,
#gl-menu li.pc-nav,
#gl-menu li.pc-nav a,
.hdr-phone,
.hdr-mail,
.hdr-phone::after,
.hdr-mail::after{
    height: 90px;
}
#cts-wrap{
    padding-top:90px;
}
#nav {
    right: 412px;
    width: 824px;
}
.bg-b .hd-h1, .bg-w .hd-h1 {
    background-position: 30px 19px;
}
li.pc-nav,
.hdr-phone,
.hdr-mail {
    width: 206px;
}

.hdr-phone {
    right: 206px;
}
.bg-w li.pnav1::after,
.bg-b li.pnav1::after{
    background-position: -200px -200px;
}
.bg-w li.pnav2::after,
.bg-b li.pnav2::after{
    background-position: -400px -200px;
}
.bg-w li.pnav3::after,
.bg-b li.pnav3::after{
    background-position: -600px -200px;
}
.bg-w li.pnav4::after,
.bg-b li.pnav4::after{
    background-position: -800px -200px;
}
li.pnav1::after,
li.pnav2::after,
li.pnav3::after,
li.pnav4::after{
      height: 50px;  
    }
li.pnav1::after {
    width: 168px;
    margin-left: 19px;
}
li.pnav2::after {
    width: 88px;
    margin-left: 59px;
}
li.pnav3::after {
    width: 138px;
    margin-left: 34px;
}
li.pnav4::after {
    width: 102px;
    margin-left: 52px;
}
.hdr-phone::after{
    width: 156px;
    left:25px;
    background-position: 0px -188px;/*0px 12px*/
}
.hdr-mail::after{
    width: 50px;
    left:78px;
    background-position: 0px -182px;/*0px 18px*/
}
}/*end min-width: 1700px*/