@charset "utf-8";

/*
@font-face {
	font-family: ‚Í‚ñ‚È‚è–¾’©;
	src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2') format("woff2");
}
*/

/* ====================================

	Nav

==================================== */

#sp_sub_menu {
	display: none;
}

nav {
	position: absolute;
	left: 9.6%;
	width: 200px;
	height: 548px;
	margin: 0 auto;
	padding: 60px 25px;
	text-align: center;
	background-color: #BC944B;
	box-sizing: border-box;
	z-index: 5;
}

nav::before {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	width: 72px;
	height: 72px;
	margin: auto;
	content: "";
	background-size: 72px auto;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url('../img/logo.svg');
}

nav div#trigger {
	display: none;
}

nav #menu {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
	clear: both;
	box-sizing: border-box;
}

	/* === �¤ ƒXƒ}�[ƒgƒtƒHƒ“ �¤ === */
	@media (max-width: 642px) {
		nav #menu {
			width: calc(100% - 50px);
			height: 74px;
			max-width: 280px;
			text-align: right;
			box-sizing: border-box;
		}
	}


nav ul#menu li {
	margin-bottom: 36px;
	padding-bottom: 10px;
	display: block;
	font-family: "Ÿà–¾’©‘Ì", "YuMincho", "Ÿà–¾’©", "Yu Mincho", "ƒqƒ‰ƒMƒm–¾’© ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ƒqƒ‰ƒMƒm–¾’© ProN", "Hiragino Mincho ProN", "ƒqƒ‰ƒMƒm–¾’© Pro", "Hiragino Mincho Pro", "HGS–¾’©E", "‚l‚r ‚o–¾’©", "MS PMincho", serif;
	font-size: 1.7rem;
	font-weight: 400;
	vertical-align: top;
	letter-spacing: 0.2em;
	box-sizing: border-box;
	position: relative;
	transition: 0.3s;
}

nav ul#menu li::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #FFF;
	transition: 0.3s;
}

nav ul#menu li:hover:after {
	width: 60%;
}

nav ul#menu li.sp_login,
nav ul#menu li.sp_member {
	display: none;
}

nav ul#menu li:last-child {
	margin-left: 0;
}


nav ul#menu li a,
nav ul#menu li a:link,
nav ul#menu li a:visited {
	text-decoration: none;
	color: #FFF;
}


	/* === �¤ ƒXƒ}�[ƒgƒtƒHƒ“ �¤ === */
	@media (max-width: 642px) {
		nav ul#menu li {
			margin-left: 25px;
		}
		
		nav ul#menu li a,
		nav ul#menu li a:link,
		nav ul#menu li a:visited {
			letter-spacing: 0.1em;
		}
		
		nav ul#menu li:nth-child(4) a {
			letter-spacing: 0;
		}
		
	}


	/* === �¤ ƒXƒ}�[ƒgƒtƒHƒ“ �¤ === */
	@media (max-width: 642px) {
		nav div#trigger {
			display: block;
			position: fixed;
			width: 100px;
			height: 65px;
			right: 5px;
			top: 0;
			z-index: 850;
			transition: 0.4s;
			box-sizing: border-box;
		}

		nav div#menu {
			float: none;
		}
		
		nav {
			position: static;
			width: auto;
			height: auto;
			margin: 0 auto;
			padding: 0;
			text-align: center;
			background: none;
		}
		
		nav > ul#menu {
			position: fixed;
			z-index: 800;
			top: 0;
			right: -300px;
			width: 100%;
			max-width: 300px;
			height: 100vh;
			padding: 100px 40px 10px 40px;
			text-align: center;
			letter-spacing: -.4em;
		//	background-color: rgba(0,0,0,0.85);
			background-color: rgba(0,81,143,0.9);
			transition: 0.5s;
			box-sizing: border-box;
			overflow:auto;
		}
		
		nav > ul#sub_menu {
			display: none;
		}

		nav ul#menu li {
			width: 100%;
			margin: 0 0 30px 0;
			padding-bottom: 0;
			text-align: left;
			display: inline-block;
			border-left: 2px #fff solid;
			box-sizing: border-box;
		}
		
		nav ul#menu li:hover {
			padding-bottom: 0;
		}

		nav ul#menu li::after {
			display: none;
		}
		
		nav ul#menu li.sp_login,
		nav ul#menu li.sp_member {
			display: inline-block;
			border: 3px #fff double;
		}
		
		nav ul#menu li a,
		nav ul#menu li a:link,
		nav ul#menu li a:visited {
			display: block;
			width: 100%;
			height: 100%;
			padding: 8px 0 10px 20px;
			font-size: 2.4rem;
			text-decoration: none;
			line-height: 100%;
			letter-spacing: 0.15em;
			color: #FFF;
			position: relative;
			box-sizing: border-box;
		}
		
		nav ul#menu li.sp_login {
			margin-top: 15px;
		}
		
		nav ul#menu li.sp_login,
		nav ul#menu li.sp_member {
			display: inline-block;
			text-align: center;
			border: 3px #fff double;
		}
		nav ul#menu li.sp_login a,
		nav ul#menu li.sp_login a:link,
		nav ul#menu li.sp_login a:visited,
		nav ul#menu li.sp_member a,
		nav ul#menu li.sp_member a:link,
		nav ul#menu li.sp_member a:visited {
			padding: 8px 0 14px 0;
			font-size: 2.0rem;
		}
		/*
		nav ul li a::after {
			display: block;
			content: '';
			position: absolute;
			top: 41%;
			right: 10px;
			width: 6px;
			height: 6px;
			border-right: 2px solid #FFF;
			border-bottom: 2px solid #FFF;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		*/
		
		/* menu_open */
		p#menu-trigger {
			position: absolute;
			right: 15px;
			top: 10px;
			z-index: 900;
			cursor: pointer;
		}

		p#menu-trigger-text {
			width: 50px;
			height: 25px;
			line-height: 25px;
			position: absolute;
			top: 22px;
			right: 50px;
			font-weight: bold;
			font-size: 0.9em;
			color: #333;
			z-index: 901;
			transition: 0.4s;
			text-decoration: none;
			cursor: pointer;
			letter-spacing: 0.1em;
		}

		#menu-trigger,
		#menu-trigger span {
			display: inline-block;
			transition: all .4s;
			box-sizing: border-box;
		}
		#menu-trigger {
			position: relative;
			width: 50px;
			height: 42px;
			padding: 10px;
		//	background-color: #BC944B;
		//	background-color: rgba(188,148,75,0.6);
		}
		#menu-trigger span {
			position: absolute;
			right: 0;
			left: 0;
			width: 28px;
			height: 2px;
			margin: auto;
			background-color: #BC944B;
			border-radius: 1px;
		}
		#menu-trigger.page span {
			background-color: rgba(89,69,52,0.8);
		}
		#menu-trigger span:nth-of-type(1) {
			top: 12px;
		}
		#menu-trigger span:nth-of-type(2) {
			top: 20px;
		}
		#menu-trigger span:nth-of-type(3) {
			top: 28px;
		}

		#menu-trigger {
			-webkit-animation: menu-close .6s;
			animation: menu-close .6s;
		}
		#menu-trigger.active {
			-webkit-animation: menu-open .6s;
			animation: menu-open .6s;
		}

		@-webkit-keyframes menu-close {
			30% {
				-webkit-transform: scale(0);
				opacity: 0;
			}
			100% {
				-webkit-transform: scale(1);
				opacity: 1;
			}
		}
		@keyframes menu-close {
			30% {
				transform: scale(0);
				opacity: 0;
			}
			100% {
				transform: scale(1);
				opacity: 1;
			}
		}
		@-webkit-keyframes menu-open {
			30% {
				-webkit-transform: scale(0);
				opacity: 0;
			}
			100% {
				-webkit-transform: scale(1);
				opacity: 1;
			}
		}
		@keyframes menu-open {
			30% {
				transform: scale(0);
				opacity: 0;
			}
			100% {
				transform: scale(1);
				opacity: 1;
			}
		}

		#menu-trigger-text.active{
			color:#BC944B;
		}
		#menu-trigger.active span{
		    background-color: #FFF;
		}

		#menu-trigger.active span:nth-of-type(1) {
			-webkit-transform: translateY(7px) rotate(-45deg);
			transform: translateY(7px) rotate(-45deg);
		}
		#menu-trigger.active span:nth-of-type(2) {
			opacity: 0;
		}
		#menu-trigger.active span:nth-of-type(3) {
			-webkit-transform: translateY(-8px) rotate(45deg);
			transform: translateY(-8px) rotate(45deg);
		}
	}
	@media (max-width: 642px) {
		p#menu-trigger {
			position: absolute;
			right: 10px;
			top: 10px;
			z-index: 900;
			cursor: pointer;
		}
	}
	@media (max-width: 420px) {
		p#menu-trigger {
			position: absolute;
			right: 10px;
			top: 10px;
			z-index: 900;
			cursor: pointer;
		}
	}