@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 10px 3px #6e748385;}
.float-nav nav.gnav {margin: 0 auto; display: flex; align-items: center;}
.float-nav nav.gnav .box {width: 1200px; margin: 0 auto; display: flex; align-items: center;}
.float-nav nav.gnav .box #logo img {width: 100px; height: 100px; display: block;}
.float-nav nav.gnav .box ul.nav {display: flex; margin: 0 30px 0 auto; padding: 0; align-items: center; justify-content: space-around;}
.float-nav nav.gnav .box ul.nav li a {font-size: 1.4em; text-align: center; display: flex; justify-content: center; align-items: center; color: #000; padding: calc((100px - 1.4em) / 2) 2em; height: 120px;}
.float-nav nav.gnav .box ul.nav li.current a, nav.gnav ul.nav li:hover a {border-bottom: 2px solid var(--primary-color); box-sizing: border-box; padding: calc((100px - 1.4em) / 2) 2em calc((100px - 1.4em) / 2 - 2px);}

/* 【PC scroll】 */
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 8px 0 #eee; padding: 0;}
nav.gnav.fixed-menu.active #logo {display: none;}
nav.gnav.fixed-menu.active ul {margin: 0 130px 0 auto;}
nav.gnav.fixed-menu.active ul li {height: 50px; display: flex; align-items: center;}
nav.gnav.fixed-menu.active ul li a {font-size: 1em; padding: 0 10px; height: 50px;}
nav.gnav.fixed-menu.active ul li:hover a, nav.gnav.fixed-menu.active ul li.current a {border-bottom: 2px solid var(--primary-color); padding: calc((50px - 1em) / 2) 10px calc((50px - 1em) / 2 - 2px);}

/* ●●●●●●●●●●●●●●●●●●●● translate ●●●●●●●●●●●●●●●●●●●● */
/* 【PC load】 */
.translate {background: #000; height: 50px; z-index: 11; padding: 0 5px 0 15px; display: flex; align-items: center;}
.translate:before {content:""; width: 24px; height: 24px; background: url("../img/popup.png"); top: calc(50% - 10px); left: 0; transform: translate(0, -50%); position: relative; z-index: 1; background-size: 100%; background-repeat: no-repeat;}
.translate button {font-size: 1em; width: 80px; border: none; background: none; color: #fff;}
.translate:hover {cursor: pointer; background: var(--primary-color);}

/* 【PC scroll】 */
.translate.fixed-menu.active {position: fixed; top: 0!important; left: unset; right: 0; border: none; box-shadow: none; height: 50px; border-radius: 0; background: #000; transform: translate(0, 0); z-index: 100; width: 100px;}
.translate.fixed-menu.active:before {top: calc(50% - 15px); left: -2px; width: 15px; height: 15px;}
.translate.fixed-menu.active:hover {}
.translate.fixed-menu.active button {width: auto;}

/* responsive */
/* PC：950px〜1200px　TAB：768(600)px〜834px SP：375(360)px〜414px */
@media screen and (max-width: 1199px) {
nav.gnav .translate {margin-right: 20px;}
}
@media screen and (max-width: 949px) {
nav.gnav .translate {display: none;}
nav.gnav .translate.open {display: flex; position: fixed; bottom: 20px; z-index: 1000; padding: 10px; margin-right: 0;}
nav.gnav .translate.open::before {z-index: 1000; width: 18px; height: 18px; top: calc(50% - 4px); left: 7px;}
nav.gnav .translate.open:hover {background: none;}
}
/* ●●●●●●●●●●●●●●●●●●●● translate ●●●●●●●●●●●●●●●●●●●● */

/* responsive */
/* PC：950px〜1200px　TAB：768(600)px〜834px SP：375(360)px〜414px */
@media screen and (max-width: 1199px) {
nav.gnav {width: 100%;}
nav.gnav #logo {margin-left: 20px;}
nav.gnav ul.nav li a {padding: calc((100px - 1.4em) / 2) 1em;}
nav.gnav ul.nav li.current a, nav.gnav ul.nav li:hover a {padding: calc((100px - 1.4em) / 2) 1em calc((100px - 1.4em) / 2 - 2px);}
}

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

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

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

/* ロゴ */
nav.gnav #logo {display: block; position: relative; top: 100px; width: 80%; padding: 0 40px 0 0;}
nav.gnav #logo img {width: 300px; height: auto;}

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);}
nav.gnav::before {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #00294f9c; z-index: 0;}
nav.gnav ul.nav {margin: 100px auto 40px; flex-direction: column; height: 100%; width: 100%; position: relative; overflow-x: hidden; overflow-y: auto; justify-content: center;}
nav.gnav ul.nav li {display: block; margin: 0 10px; text-align: center; width: 100%; border-bottom: 1px dotted #fff6;}
nav.gnav ul.nav li a {height: 50px; padding: 0; text-decoration: none; color: #fff!important; font-size: 1em; align-items: center;}
nav.gnav ul.nav li.current a,
nav.gnav ul.nav li:hover a {border-bottom: none!important; padding: calc((70px - 1em) / 2) 20px calc((70px - 1em) / 2); color: #fff!important;}

/* PCスクロール時のメニュー可変打ち消し */
nav.gnav.active {position: fixed; z-index: 100; background-color: #163973db; right: unset; border-radius: 0; top: 0; width: 100%; box-shadow: none; padding: 0;}

nav.gnav.active ul.nav li {display: block; height: auto;}
nav.gnav.active ul.nav li a {display: flex; font-size: 18px; width: 100%; height: 70px; border-bottom: none; padding: calc((70px - 1em) / 2) 20px calc((70px - 1em) / 2);}

nav.gnav.active ul.nav li.current a,
nav.gnav.active ul.nav li:hover a {font-size: 18px; width: 100%; border-bottom: none; padding: calc((70px - 1em) / 2) 20px calc((70px - 1em) / 2);}
}