/* ---------------------------------------------------
	header - リニューアル
------------------------------------------------------ */
/*------ 共通 ------*/
#header.re{width: 100%;height: calc(100vw*(170 / 1366));box-sizing: border-box;position: relative;z-index: 1;transition:all ease 0.3s;}
#header.re *{box-sizing: border-box;}
#header.re .h-logo{width: calc(100vw*(200 / 1366));display:block;}

/*------ トップページ表示時 ------*/
#header.re.top{background: #FFF;text-align: center;padding: 0; display: none;}
#header.re.top .h-logo{position: absolute;left: 50%;top: calc(100vw*(75 / 1366));transform: translateX(-50%);}
#header.re.top .h-logo h1{}
#header.re.top .h-logo h1 img{width: 100%;}

/*------ 内部ページ表示時 ------*/
#header.re.inpage{background:color-mix(in srgb, #9AB5B9 50%, #FFF);padding: 0;padding: calc(100vw*(76 / 1366)) calc(100vw*(90 / 1366)) calc(100vw*(38 / 1366));display: flex;justify-content: flex-start;align-items: flex-start;margin-bottom: calc(100vw * (60 / 1366));}
#header.re.inpage .h-logo{width: calc(100vw*(200 / 1366));display:block;margin:0 calc(100vw*(30 / 1366)) 0 0;}
#header.re.inpage .h-logo h1{}
#header.re.inpage .h-logo h1 img{width: 100%;}

#header.re.inpage .menu{}
#header.re.inpage .menu .g-navi{margin-top: calc(100vw*(19 / 1366));}
#header.re.inpage .menu .g-navi ul{display: flex;}
#header.re.inpage .menu .g-navi ul > li{list-style: none;position: relative;}
#header.re.inpage .menu .g-navi ul > li a{font-size: calc(100vw*(16 / 1366));font-family: kozuka-gothic-pr6n, sans-serif;font-weight: 700;font-style: normal;padding: 0 calc(100vw*(25 / 1366)) calc(100vw*(15 / 1366));color: #000;position: relative;}
#header.re.inpage .menu .g-navi ul > li a::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: calc(100vw*(2 / 1366));opacity: 0;transition:all ease 0.2s;background: #000;}
#header.re.inpage .menu .g-navi ul > li a:hover::after{opacity: 1;width: 100%;}
#header.re.inpage .menu .g-navi ul > li a.now::after{opacity: 1;width: 100%;}
#header.re.inpage .menu .g-navi ul > li a:has(+ ul):active{pointer-events: none;}

#header.re.inpage .menu .g-navi ul > li > ul{opacity:0;pointer-events: none;transition:all ease 0.2s;background: transparent;position: absolute;display: block;z-index: 2;padding:calc(100vw*(10 / 1366)) 0 0 0;transform: translateX(-50%);left: 50%;width: max-content;min-width:calc(100vw * (98 /1366)); max-width: calc(100vw*(150 / 1366));top:calc(100% + (100vw*(15 / 1366)));}
#header.re.inpage .menu .g-navi ul > li:hover > ul{opacity: 1;pointer-events:auto;}
#header.re.inpage .menu .g-navi ul > li > ul > li{margin-bottom:calc(100vw*(1 / 1366));background: #000;padding:0;}
#header.re.inpage .menu .g-navi ul > li > ul > li:last-of-type{margin-bottom: 0;}
#header.re.inpage .menu .g-navi ul > li > ul > li a{font-size: calc(100vw*(12 / 1366));font-weight: 500;padding:0;display: block;color: #fff;text-align: center;padding: calc(100vw*(5 / 1366));}
#header.re.inpage .menu .g-navi ul > li > ul > li:last-of-type a{border-bottom: none;}
#header.re.inpage .menu .g-navi ul > li > ul > li a::after{display: none;}

@media screen and (max-width: 767px) {
    /*------ 共通 ------*/
    #header.re{height: calc(100vw*(170 / 375));z-index: 2;}
    #header.re .h-logo{width: calc(100vw*(200 / 375));display:block;}
    .is-locked #header.re {background: transparent;pointer-events: none;}
    .is-locked #header.re .h-logo{opacity: 0;pointer-events: none;}

    /*------ SP共通 ------*/
    #header .site-header {border: none; background: #222; max-height: calc(100vw*(50 / 375));padding: 0 calc(100vw*(5 / 375));display: flex;justify-content: space-between;pointer-events: auto;}
    #header .site-header a {color: #FFF;}
    #header .nav-menu-btn {height: calc(100vw*(50 / 375)); padding: calc(100vw*(10 / 375)) calc(100vw*(5 / 375));font-size: calc(100vw*(20 / 375));}
    #header .nav-menu-btn-text {color: #FFF; font-size: calc(100vw*(18 / 375));}
    #header .icon-toggle-menu {background-color: #FFF;width: calc(100vw*(18 / 375));height: calc(100vw*(2 / 375));margin: calc(100vw*(6 / 375)) 0;}
    #header .icon-toggle-menu:before {background-color: #FFF;width: calc(100vw*(18 / 375));height: calc(100vw*(2 / 375));top: calc(100vw*(-6 / 375));}
    #header .icon-toggle-menu:after {background-color: #FFF;width: calc(100vw*(18 / 375));height: calc(100vw*(2 / 375));bottom: calc(100vw*(-6 / 375));}
    #header [aria-expanded=true] .icon-toggle-menu {background: transparent;}
    #header [aria-expanded=true] .icon-toggle-menu::before { transform: translate(calc(100vw*(-2 / 375)), calc(100vw*(6 / 375))) rotate(45deg);}
    #header [aria-expanded=true] .icon-toggle-menu::after {transform:translate(calc(100vw*(-2 / 375)), calc(100vw*(-6 / 375))) rotate(-45deg);}
    #header .nav-menu-action {padding:calc(100vw*(10 / 375)) calc(100vw*(5 / 375));display: flex;column-gap: calc(100vw*(10 / 375));}
    #header .nav-menu-action-item {width: calc(100vw*(30 / 375)); height: calc(100vw*(30 / 375));display: block;}
    #header .nav-menu-action-item a img{width: 100%;}

    .mobile-nav {padding-top: calc(100vw*(48 / 375));background-color: #fff;opacity: 0;z-index: 1;width: 50%;}
    .mobile-nav-inner {padding: calc(100vw*(30 / 375)) 0;}
    .mobile-navbar-list {font-size:calc(100vw*(14 / 375));}
    .mobile-nav-side {margin: calc(100vw*(20 / 375)) 0;}
    .mobile-nav-side-item {margin: 0 0 calc(100vw*(10 / 375));}
    .mobile-navbar {width: 100%;}
    .mobile-navbar > div > ul {padding: 0 calc(100vw*(10 / 375));}
    .mobile-navbar-list > li {font-weight: bold; background: #9AB5B9; border-bottom: calc(100vw*(5 / 375)) solid #FFF;}
    .mobile-navbar-list > li a {display: block;}
    .mobile-navbar-list > li .mobile-navbar-list {display: block;}
    .mobile-navbar-list > li .mobile-navbar-list > li {font-weight: normal; background: #FFF; border: none;}

    .mobile-navbar-list > li a:has(+ ul):active{pointer-events: none;}

    .mobile-navbar-footer {margin: calc(100vw*(15 / 375)) 0 0;}
    .mobile-navbar-footer .sns{padding: 0 calc(100vw*(10 / 375));display: flex;column-gap: calc(100vw*(15 / 375));justify-content: center;}
    .mobile-navbar-footer .sns .item{display: block;width: calc(100vw*(30 / 375));height: calc(100vw*(30 / 375));}
    .mobile-navbar-footer .sns .item img{width: 100%;}

    /*------ トップページ表示時 ------*/
    #header.re.top{padding: 0;display: block; height: calc(100vw*(50 / 375));}
    #header.re.top .h-logo{width: calc(100vw*(200 / 375));margin:0;position: absolute;left: 50%;top:50%;transform: translateX(-50%); display: none;}

    /*------ 内部ページ表示時 ------*/
    #header.re.inpage{padding: 0;display: block;margin-bottom: calc(100vw * (30 / 375));}
    #header.re.inpage .h-logo{width: calc(100vw*(200 / 375));margin:0;position: absolute;left: 50%;top:50%;transform: translateX(-50%);}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  #header.re {height: calc(100vw*(170 / 667));}
  #header.re.inpage {margin-bottom: calc(100vw * (30 / 677));}
  #header.re.inpage .h-logo {width: calc(100vw*(200 / 677));}
  
  #header .site-header {max-height: calc(100vw*(50 / 667)); padding: 0 calc(100vw*(5 / 667))}
  #header .nav-menu-btn {height: calc(100vw*(50 / 667)); padding: calc(100vw*(10 / 667)) calc(100vw*(5 / 667)); font-size: calc(100vw*(20 / 667));}
  #header .icon-toggle-menu {width: calc(100vw*(18 / 667)); height: calc(100vw*(2 / 667)); margin: calc(100vw*(6 / 667)) 0;}
  #header .icon-toggle-menu:before {width: calc(100vw*(18 / 667)); height: calc(100vw*(2 / 667)); top: calc(100vw*(-6 / 667));}
  #header [aria-expanded=true] .icon-toggle-menu::before {transform: translate(calc(100vw*(-2 / 667)), calc(100vw*(6 / 667))) rotate(45deg)}
  #header .icon-toggle-menu:after {width: calc(100vw*(18 / 667)); height: calc(100vw*(2 / 667)); bottom: calc(100vw*(-6 / 667));}
  #header [aria-expanded=true] .icon-toggle-menu::after {transform: translate(calc(100vw*(-2 / 667)), calc(100vw*(-6 / 667))) rotate(-45deg)}
  #header .nav-menu-btn-text {font-size: calc(100vw*(18 / 667));}
  #header .nav-menu-action {padding: calc(100vw*(10 / 667)) calc(100vw*(5 / 667)); column-gap: calc(100vw*(10 / 667));}
  #header .nav-menu-action-item {width: calc(100vw*(30 / 667)); height: calc(100vw*(30 / 667));}
  
  .mobile-nav {padding-top: calc(100vw*(48 / 667));}
  .mobile-nav-inner {padding: calc(100vw*(30 / 667)) 0;}
  .mobile-navbar-list {font-size: calc(100vw*(18 / 667));}
  .mobile-navbar > div > ul {padding: 0 calc(100vw*(10 / 667));}
  .mobile-navbar-list > li {border-bottom-width: calc(100vw*(5 / 667));}
  
  .mobile-navbar-footer .sns {padding: 0 calc(100vw*(10 / 667)); column-gap: calc(100vw*(15 / 667));}
  .mobile-navbar-footer .sns .item {width: calc(100vw*(40 / 667)); height: calc(100vw*(40 / 667));}
  
  /*------ トップページ表示時 ------*/
    #header.re.top{height: calc(100vw*(50 / 667));}
}