@charset "utf-8";

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

	Nav

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

nav {
	position: relative;
	box-sizing: border-box;
}

nav div#trigger {
	display: none;
}

nav #menu {
	float: right;
	width: calc(100% - 300px);
//	width: calc(100% - 45px);
//	max-width: 255px;
	text-align: right;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 780px) {
		nav #menu {
			width: calc(100% - 50px);
			max-width: 280px;
			text-align: right;
			box-sizing: border-box;
		}
	}

nav ul li {
	margin-left: 15px;
	display: inline-block;
	line-height: 65px;
	position: relative;
}

nav ul li.sp_only{
	display: none;
}

nav ul li.contact::after {
	display: block;
	content: '';
	position: absolute;
	top: 38%;
	left: -18px;
	width: 1px;
	height: 16px;
	border-left: 2px solid #CCC;
}

nav ul li a,
nav ul li a:link,
nav ul li a:visited {
//	display:block;
//	width:calc(100% - 30px);
//	height:calc(100% - 30px);
	font-size: 1.6rem;
	text-decoration: none;
	line-height: 100%;
	letter-spacing: 0.15em;
	color: #444;
	box-sizing: border-box;
}

nav ul li a:hover {
	text-decoration: underline;
	color: #5C8BB3;
}

nav ul li.contact {
	margin-left: 28px;
}

nav ul li.language {
	margin-left: 20px;
	line-height: 100%;
	letter-spacing: 0;
	vertical-align: middle;
}

nav ul li.language select {
	padding: 5px 0;
}

nav ul li.language > div {
	margin-top: -5px;
	padding: 5px 0;
}

nav ul li.language .goog-te-gadget-simple{
	padding: 5px;
}

nav ul li.language a,
nav ul li.language a:link,
nav ul li.language a:visited {
	font-size: 1.4rem;
	text-decoration: none;
	line-height: 100%;
	letter-spacing: 0.1em;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 780px) {
		nav div#trigger {
			display: block;
			position: fixed;
			width: 100px;
			height: 65px;
			right: 0;
			top: 5px;
			z-index: 850;
			transition: 0.4s;
			box-sizing: border-box;
		}

		nav div#menu {
			float: none;
		}

		nav > ul#menu {
			position: fixed;
			z-index: 800;
			top: 0;
			right: -300px;
			width: 100%;
			max-width: 300px;
			height: 100vh;
			padding: 80px 20px 10px 20px;
			letter-spacing: -.4em;
			background-color: #5C8BB3;
			transition: 0.5s;
			box-sizing: border-box;
			overflow:auto;
		}

		nav ul li {
			width: 100%;
			margin-left: 0;
			margin-bottom: 15px;
			display: inline-block;
			text-align: left;
			border-bottom: 1px #fff solid;
			box-sizing: border-box;
		}
		
		nav ul li.contact {
			margin-left: 0;
			margin-bottom: 20px;
		}
		
		nav ul li.contact::after {
			display: none;
		}
		
		nav ul li.language {
			margin-left: 0;
			padding: 10px;
			background-color: #FFF;
			border-bottom: none;
		}
		
		nav ul li.language > div {
			min-width: 140px;
			margin-top: 0;
			padding: 5px 0;
		}	
			
		nav ul li.language .goog-te-gadget-simple{
			min-width: 140px;
			padding: 5px;
			box-sizing: border-box;
		}
		nav ul li.sp_only{
			display: inline-block;
		}
		
		nav ul li.reserve,
		nav ul li.sub_box,
		nav ul li.en {
			width: 100%;
			display: block;
		}

		nav ul li.reserve {
			margin-bottom: 15px;
			background-color: #ffffff;
			border: 1px #fff solid;
			border-radius: 0.3em;
		}

		nav ul li.en {
			border: 1px #fff solid;
			border-radius: 0.3em;
		}

		nav ul li.sub_box {
			margin-bottom: 20px;
			margin-bottom: 15px;
			padding-bottom: 0;
			border: 0;
		}

		nav ul li.sub {
			background-color: #FFF;
			border-radius: 0.3em;
			border: 0;
		}

		nav ul li a,
		nav ul li a:link,
		nav ul li a:visited {
			display: block;
			width: 100%;
			height: 100%;
			padding: 16px 5px;
			font-size: 1.3rem;
			text-decoration: none;
			line-height: 100%;
			letter-spacing: 0.15em;
			color: #ffffff;
			position: relative;
			box-sizing: border-box;
		}
		
		nav ul li.language a,
		nav ul li.language a:link,
		nav ul li.language a:visited {
			display: inline-block;
		}
		
		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);
		}

		nav ul li.reserve a {
			text-align: center;
			padding: 20px 5px;
			color: #5C8BB3;
		}

		nav ul li.en a {
			padding: 20px 5px;
			text-align: center;
		}

		nav ul li.sub a {
			font-size: 1.3rem;
			letter-spacing: 0.08em;
			text-align: center;
			color: #5C8BB3;
		}

		nav ul li.reserve a::after,
		nav ul li.sub a::after,
		nav ul li.en a::after,
		nav ul li.language a::after {
			display: none;
		}


		/* menu_open */
		p#menu-trigger {
			position: absolute;
			right: 15px;
			top: 20px;
			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: 30px;
			height: 25px;
		}
		#menu-trigger span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: #5C8BB3;
			border-radius: 1px;
		}
		#menu-trigger span:nth-of-type(1) {
			top: 1px;
		}
		#menu-trigger span:nth-of-type(2) {
			top: 11px;
		}
		#menu-trigger span:nth-of-type(3) {
			bottom: 1px;
		}

		#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:#ffffff;
		}
		#menu-trigger.active span{
		    background-color: #ffffff;
		}

		#menu-trigger.active span:nth-of-type(1) {
			-webkit-transform: translateY(10px) rotate(-45deg);
			transform: translateY(10px) rotate(-45deg);
		}
		#menu-trigger.active span:nth-of-type(2) {
			opacity: 0;
		}
		#menu-trigger.active span:nth-of-type(3) {
			-webkit-transform: translateY(-10px) rotate(45deg);
			transform: translateY(-10px) rotate(45deg);
		}
	}