@charset "UTF-8";

/* 【PC load japanese】 section.float-nav > nav.gnav.fixed-menu > ul.nav.japanese */
/* 【PC load english】  section.float-nav > nav.gnav.fixed-menu > ul.nav.english */
/* 【PC scroll】        section.float-nav > nav.gnav.fixed-menu.active */
/* 【SP load】          section.float-nav > nav.gnav */
/* 【SP open】          section.float-nav > nav.gnav.open */
/* 【SP close】         section.float-nav > nav.gnav.close */

/* 【PC load】 */
.float-nav {width: 100%; background: #fff; align-items: center; z-index: 10; position: relative; top: 0; box-shadow: 0 0 1rem 0.3rem #6e748385;}
.float-nav nav.gnav {margin: 0 auto; display: flex; align-items: center;}
.float-nav nav.gnav .box {width: var(--page-max-width); margin: 0 auto; display: flex; align-items: center;}
.float-nav nav.gnav .box #logo img {width: 10rem; height: 10rem; display: block;}
.float-nav nav.gnav .box ul.nav {display: flex; margin: 0 3rem 0 auto; padding: 0; align-items: center; justify-content: space-around;}
.float-nav nav.gnav .box ul.nav li a {font-size: 1.8rem; text-align: center; display: flex; justify-content: center; align-items: center; color: #000; padding: calc((10rem - 1.8rem) / 2) 3.6rem; height: 12rem; box-sizing: border-box;}
.float-nav nav.gnav .box ul.nav li.current a, .float-nav nav.gnav .box ul.nav li:hover a {border-bottom: 0.2rem solid var(--primary-color);  padding: calc((12rem - 1.8rem) / 2) 3.6rem calc((12rem - 1.8rem) / 2 - 0.2rem);}

/* 【PC scroll】 */
.float-nav nav.gnav.fixed-menu.active {position: fixed; z-index: 100; background: #fff; right: 0; border-radius: 0; top: 0; width: 100%; box-shadow: 0 0 0.8rem 0 #eee; padding: 0;}
.float-nav nav.gnav.fixed-menu.active .box #logo {display: none;}
.float-nav nav.gnav.fixed-menu.active .box ul.nav {margin: 0 12rem 0 auto;}
.float-nav nav.gnav.fixed-menu.active .box ul.nav li {height: 5rem; display: flex; align-items: center;}
.float-nav nav.gnav.fixed-menu.active .box ul.nav li a {font-size: 1.3rem; padding: 0 1rem; height: 5rem;}
.float-nav nav.gnav.fixed-menu.active .box ul.nav li:hover a, .float-nav nav.gnav.fixed-menu.active .box ul.nav li.current a {border-bottom: 2px solid var(--primary-color); padding: calc((5rem - 1.3rem) / 2) 1rem calc((5rem - 1.3rem) / 2 - 0.2rem);}

/* ●●●●●●●●●●●●●●●●●●●● translate ●●●●●●●●●●●●●●●●●●●● */
/* 【PC load】 */
.float-nav nav.gnav .box .translate {background: #000; height: 5rem; z-index: 11; padding: 0; display: flex; align-items: center; position: relative;}
.float-nav nav.gnav .box .translate:before {content:""; width: 2.4rem; height: 2.4rem; background: url("../img/popup.png"); top: calc(50% + 0.2rem); left: 1.8rem; transform: translate(0, -50%); position: absolute; background-size: 100%; background-repeat: no-repeat;}
.float-nav nav.gnav .box .translate button {cursor: pointer; font-size: 1.3rem; width: 12rem; padding: 0 0 0 2.5rem; border: none; background: none; color: #fff; height: 5rem;}
.float-nav nav.gnav .box .translate:hover button {background: var(--primary-color);}

/* 【PC scroll】 */
.float-nav nav.gnav .box .translate.fixed-menu.active {position: fixed; top: 0!important; left: unset; right: 0; border: none; box-shadow: none; height: 5rem; border-radius: 0; transform: translate(0, 0); z-index: 100; width: 10rem;}
.float-nav nav.gnav .box .translate.fixed-menu.active:before {left: 1.4rem; width: 2rem; height: 2rem;}
.float-nav nav.gnav .box .translate.fixed-menu.active:hover {}
.float-nav nav.gnav .box .translate.fixed-menu.active button {}

/* responsive */
/* PC：950px〜1200px　TAB：768(600)px〜834px SP：375(360)px〜414px */
@media screen and (max-width: 1199px) {
.float-nav nav.gnav .box .translate {margin-right: 2rem;}
.float-nav nav.gnav .box .translate.fixed-menu.active {margin-right: 0;}
}
@media screen and (max-width: 949px) {
.float-nav nav.gnav .box .translate {display: none;}
.float-nav nav.gnav .box .translate.open {display: flex; position: fixed; bottom: 2rem; z-index: 1000; padding: 1rem; margin-right: 0;}
.float-nav nav.gnav .box .translate.open::before {z-index: 1000; width: 2rem; height: 2rem; top: calc(50% + 0.1rem); left: 2rem;}
.float-nav nav.gnav .box .translate.open:hover {background: var(--primary-color);}
}
/* ●●●●●●●●●●●●●●●●●●●● translate ●●●●●●●●●●●●●●●●●●●● */

/* responsive */
/* PC：950px〜1200px　TAB：768(600)px〜834px SP：375(360)px〜414px */
@media screen and (min-width: 1200px) {
.float-nav nav.gnav.fixed-menu.active .box {width: 100%;}
}
@media screen and (max-width: 1199px) {
.float-nav nav.gnav {width: 100%;}
.float-nav nav.gnav .box {width: 100%;}
.float-nav nav.gnav .box #logo {margin-left: 2rem;}
.float-nav nav.gnav .box ul.nav li a {padding: calc((10rem - 1.8rem) / 2) 1.2rem;}
.float-nav nav.gnav .box ul.nav li.current a, .float-nav nav.gnav .box ul.nav li:hover a {padding: calc((10rem - 1.8rem) / 2) 1.2rem calc((10rem - 1.8rem) / 2 - 0.2rem);}
}

/* ●●●●●●●●●●●●●●●●●●●● modal menu ●●●●●●●●●●●●●●●●●●●● */
@media screen and (max-width: 949px) {
/* メニューボタン */
.float-nav {display: flex; width: auto; background: none; padding: 2rem; position: fixed; top: 1.6rem; right: 0.6rem; z-index: 650; box-shadow: none;}
.float-nav .nav-button {display: block; cursor: pointer;}
.float-nav .nav-button span {box-shadow: 0 0 0.4rem #999;}

/* メニューボタンのエフェクト */
.float-nav .nav-button, .float-nav .nav-button span {display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.float-nav .nav-button {z-index: 20; position: relative; width: 4rem; height: 3.6rem; z-index: 650;}
.float-nav .nav-button span {position: absolute; left: 0; width: 100%; height: 0.4rem; background-color: #fff; border-radius: 0.4rem;}
.float-nav .nav-button span:nth-of-type(1) {top: 0;}
.float-nav .nav-button span:nth-of-type(2) {top: 1.6rem;}
.float-nav .nav-button span:nth-of-type(3) {bottom: 0;}
.float-nav .nav-button.active span:nth-of-type(1) {-webkit-transform: translateY(1.6rem) rotate(-45deg); transform: translateY(1.6rem) rotate(-45deg);}
.float-nav .nav-button.active span:nth-of-type(2) {opacity: 0;}
.float-nav .nav-button.active span:nth-of-type(3) {-webkit-transform: translateY(-1.6rem) rotate(45deg); transform: translateY(-1.6rem) rotate(45deg);}

.float-nav nav.gnav.open {display: flex; flex-direction: column; padding: 0;}
.float-nav nav.gnav.close {display: none;}

/* ロゴ */
.float-nav nav.gnav.open .box #logo {display: block; position: relative; top: 10rem; width: 80%; margin: 0 auto; padding: 0; width: fit-content; z-index: 2;}
.float-nav nav.gnav.open .box #logo img {width: 30rem; height: auto;}

.float-nav nav.gnav {display: block; position: fixed; left: 0; top: 0; display: none; z-index: 600; background-color: #163973db; background-image: url("../img/26478295_l.jpg"); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; border-radius: 0; transform: translate(0, 0);}
.float-nav nav.gnav::before {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #00294f9c; z-index: 0;}
.float-nav nav.gnav.open .box {width: 100%; flex-direction: column;}
.float-nav nav.gnav.open .box ul.nav {margin: 0 auto 4rem; flex-direction: column; height: 100%; width: 100%; position: absolute; overflow-x: hidden; overflow-y: auto; justify-content: center; z-index: 1;}
.float-nav nav.gnav.open .box ul.nav li {display: block; margin: 0 10px; text-align: center; width: 100%; border-bottom: 0.1rem dotted #fff6;}
.float-nav nav.gnav.open .box ul.nav li a {height: 7rem; padding: 0; text-decoration: none; color: #fff!important; font-size: 1.4rem; align-items: center;}
.float-nav nav.gnav.open .box ul.nav li.current a, .float-nav nav.gnav .box ul.nav li:hover a {border-bottom: none!important; padding: 0; color: #fff!important;}
}
/* ●●●●●●●●●●●●●●●●●●●● modal menu ●●●●●●●●●●●●●●●●●●●● */