@charset "UTF-8";

/* 右上のボタン枠 */
.menu_sp{
	width:50px;
	height:50px;
	position:fixed;
	top:20px;
	right:0;
	z-index:9000;
	background-color:#fff000;
	}

/* ハンバーガーボタン（button想定） */
.menu{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	cursor:pointer;
	position:relative;
	z-index:9100;
	background:transparent;
	border:0;
	padding:0;
	margin:0;
	transition:transform 250ms ease;
	-webkit-tap-highlight-color:transparent;
	}

/* 3本線 */
.menu span{
	display:block;
	width:50%;
	height:2px;
	background-color:#000;
	transform-origin:center center;
	transition:transform 250ms ease, opacity 250ms ease, background-color 250ms ease;
	}
.menu span:nth-of-type(1){ 
	transform:translateY(-6px); 
	}
.menu span:nth-of-type(3){ 
	transform:translateY(6px); 
	}

/* 開いた状態：回転＋× */
.menu.is-open{
	transform:rotate(360deg);
	}

.menu.is-open span{
	background-color:#fff;
	}

.menu.is-open span:nth-of-type(1){
	transform:translateY(1px) rotate(45deg);
	}
.menu.is-open span:nth-of-type(2){
	opacity:0; /* display:noneよりアニメ綺麗 */
	}
.menu.is-open span:nth-of-type(3){
	transform:translateY(-1px) rotate(-45deg);
	}

/* ナビ本体（右からスライド） */
.nav{
	position:fixed;
	top:0;
	right:-350px;
	width:350px;
	height:100vh;
	margin:0;
	padding:0;
	background-color:#333;
	transition:right 500ms ease;
	z-index:9050;
	}

.nav.is-open{
	right:-20px;
	}

/* リスト */
.nav ul{
	list-style:none;
	margin:100px 0 0;
	padding:0;
	}

.nav li{
	display:block;
	}

.nav a{
	display:block;
	padding:15px 20px;
	color:#ffffff;
	text-decoration:none;
	text-transform:uppercase;
	border-bottom:1px solid #fff;
	font-size:90%;
	position:relative;
	}

/* hover演出 */
.nav a::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:100%;
	background-color:#fff;
	transition:width 250ms ease;
	z-index:-1;
	}

.nav a:hover{
	color:#444444;
	}

.nav a:hover::before{
	width:100%;
	}

/* 400pxナビが画面より広い端末向け保険 */
@media screen and (max-width:420px){
.nav{
	width:85vw;
	right:-85vw;
	}
	}



/* ===== Overlay（背景クリックで閉じる） ===== */
.nav_overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity 250ms ease;
  z-index:9040; /* .nav(9050)より下、背景より上 */
}

/* 開いた時に表示 */
.nav_overlay.is-open{
  opacity:1;
  pointer-events:auto;
}