@charset "UTF-8";

/*ハンバーガーメニュー*/

:root {
	--fsz-56: clamp(5.0rem, calc(100vw / (375 / 56)), 5.6rem);
    --fsz-50: clamp(4.6rem, calc(100vw / (375 / 50)), 5.0rem);
    --fsz-40: clamp(3.6rem, calc(100vw / (375 / 40)), 4.0rem);
    --fsz-32: clamp(2.8rem, calc(100vw / (375 / 32)), 3.2rem);
    --fsz-26: clamp(2.4rem, calc(100vw / (375 / 26)), 2.6rem);
    --fsz-24: clamp(2.2rem, calc(100vw / (375 / 24)), 2.4rem);
    --fsz-22: clamp(1.8rem, calc(100vw / (375 / 22)), 2.2rem);
    --fsz-18: clamp(1.6rem, calc(100vw / (375 / 18)), 1.8rem);
    --fsz-16: clamp(1.4rem, calc(100vw / (375 / 16)), 1.6rem);
    --fsz-15: clamp(1.3rem, calc(100vw / (375 / 15)), 1.5rem);
    --fsz-14: clamp(1.2rem, calc(100vw / (375 / 14)), 1.4rem);
    --fsz-12: clamp(1.0rem, calc(100vw / (375 / 12)), 1.2rem);
    --fsz-10: clamp(0.8rem, calc(100vw / (375 / 10)), 1.0rem);


	--hamburger-menu-size: 57px;
	/* メニューの大きさ */
	--hamburger-menu-padding: 18px;
	--hamburger-menu-border-px: 2px;
	/* 線の太さ */
	--hamburger-menu-border-color: #000;
	/* 線の色 */
	--hamburger-menu-transition: 0.2s;
	/* アニメーション秒数 */
}


.hamburger-menu {
	margin-left: auto;
	cursor: pointer;
	position: relative;
	width: 60px;
	height: 58px;
	background-color: #fbb03b;
	/* 背景色 */
	z-index: 1000;
}


.hamburger-menu-line {
	position: absolute;
	transition: var(--hamburger-menu-transition);
	width: calc(100% - var(--hamburger-menu-padding) * 2);
	height: var(--hamburger-menu-border-px);
	background-color: var(--hamburger-menu-border-color);
}


.line-top {
	top: var(--hamburger-menu-padding);
	left: var(--hamburger-menu-padding);
}

.line-middle {
	top: calc(50% - var(--hamburger-menu-border-px)/2);
	left: var(--hamburger-menu-padding);
}

.line-bottom {
	bottom: var(--hamburger-menu-padding);
	left: var(--hamburger-menu-padding);
}


.hamburger-menu.active > .line-top {
	top: calc(50% - var(--hamburger-menu-border-px)/2);
	transform: rotate(45deg);
}

.hamburger-menu.active > .line-middle {
	width: 0;
	height: 0;
	left: var(--hamburger-menu-padding);
}

.hamburger-menu.active > .line-bottom {
	top: calc(50% - var(--hamburger-menu-border-px)/2);
	transform: rotate(-45deg);
}

 .header-nav {
	display: block;
	position: fixed;
	right: -100vw;
	
}

.header-nav a {
	display: none;
}

.header-nav.active a {
	display: block;
}

 .header-nav.active {
	display: block;
	z-index: 3;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	background: rgba(0,  138, 208, 1);
	overflow: scroll;
	transition: all 1s;
}

.nav-menu .inner {
	max-width: 375px;
}

.nav-menu .ftr_link {
	margin-bottom: 20px;
}

.nav-menu .ftr_en {
	/* font-size: var(--fsz-26); */
	margin-top: .5em;
	font-size: var(--fsz-14);
}

.nav-menu .ftr_btn {
	margin: 30px auto;
}