@charset "utf-8";

.fixed { position: fixed; top: 0; }
#nav { height: 100vh; background: #fff; }
#nav #navMenu { display: none; }
#nav li:not(.group) { border-bottom: 1px solid #888; background: #fff; }
#nav li:not(.group) a { display: block; padding: 22px 0 20px 1em; border-bottom: -1px solid #fff; transition: 0.6s; }
#nav .group { width: 100%; padding-top: 1em; background: #fff; }
#nav .group a { display: block; padding: 10px 10px 0; width: 100%; transition: 0.6s; }
#nav li a:hover { color: #f00; }
#nav .group a:hover { background: rgba(255,0,0,0.3); }
#nav .group span { display: block; padding-left: 1em; }

/* レスポンシブ
------------------------------ */
/* 812px */
@media all and (max-width:812px) {

	/* ハンバーガーメニュー */
	div#btn { text-align:left; position:fixed; top:15px; right:14px; z-index:999; }
	.menu-trigger, .menu-trigger span { display:inline-block; transition:all .4s; box-sizing:border-box; }
	.menu-trigger { position:relative; width:36px; height:30px; cursor:pointer; }
	.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#000; border-radius:4px; }
	.menu-trigger span:nth-of-type(1) { top:0; }
	.menu-trigger span:nth-of-type(2) { top:13px; }
	.menu-trigger span:nth-of-type(3) { bottom:0; }
	.menu-trigger.active span:nth-of-type(1) { transform:translateY(13px) rotate(-45deg); }
	.menu-trigger.active span:nth-of-type(2) { opacity:0; }
	.menu-trigger.active span:nth-of-type(3) { transform:translateY(-13px) rotate(45deg); }

	/* オーバーレイ */
	#overlay { position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); height:100%; width:100%; margin-left:-100%; z-index:9999; }

	/*メニュー*/
	nav { position: fixed; top: 0; left: 0; overflow: scroll; width: 300px; height: 100vh; margin-left: -320px; box-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 999; }
	#nav #navMenu { display: block; color: #fff; font-weight: bold; text-align: center; padding: 22px 0 20px; background: #aaf; }
	#nav .group { text-align: center; width: 80%; margin: 0 auto; }
}

/* 667px */
@media all and (max-width:667px) {
	/* ハンバーガーメニュー */
	div#btn { top: 30px; right: 50px; }
}

/* 414px */
@media all and (max-width: 414px) {
	/* ハンバーガーメニュー */
	div#btn { right: 20px; }
}