@charset "UTF-8";

header {
	padding-top: 72px;
}

/* logo
--------------------------------------------------------- */
.logo_area_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background: rgba(255,255,255,0.9);
}
.logo_area {
}
	.logo_area a {
		display: block;
	}
	.logo_area a:hover {
		opacity: 0.7;
	}
	.logo_area .logo {
		/* float: left; */
		margin: 0;
		padding: 8px 0;
	}
	.logo_area .subtitle {
		float: left;
		font-size: 0.9em;
		margin: 24px 0 24px 16px;
	}

/* header menu
--------------------------------------------------------- */
.header_menu {
	float: right;
	list-style-type: none;
	text-align: right;
	margin: 16px 0;
	font-size: 0.9em;
}
	.header_menu li {
		float: left;
		margin: 0 0 0 24px;
		padding: 0;
	}
		.header_menu li a {
			color: #535362;
		}
			.header_menu li a i {
				font-size: 22px;
				vertical-align: middle;
			}
			.header_menu li a img {
				margin: 0 8px 0 0;
				padding: 0;
				vertical-align: middle;
			}

/* global nav
--------------------------------------------------------- */
.nav_area {
	clear: both;
	border-top: 1px solid #F1F1F1;
	border-bottom: 1px solid #F1F1F1;
}
	.nav_area .gnav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
		.nav_area  .gnav ul li a {
			margin: 0;
			display: block;
			padding: 16px 12px;
			text-align: center;
			font-size: 1em;
			line-height: 1.1em;
			vertical-align: middle;
		}
		.nav_area  .gnav ul li .nav_icon {
			width: 24px;
			height: 24px;
			position: relative;
			top: -2px;
		}
		.nav_area  .gnav ul li a:hover {
			text-decoration: none;
			opacity: 0.6;
		}
		.nav_area  .gnav ul li a.nav_home {
			color: #000;
		}
		.nav_area  .gnav ul li a.nav_present {
			color: #ed0345;
		}
		.nav_area  .gnav ul li a.nav_shop {
			color: #ef6a32;
		}
		.nav_area  .gnav ul li a.nav_maker {
			color: #fbbf45;
		}
		.nav_area  .gnav ul li a.nav_shuttle {
			color: #aad962;
		}
		.nav_area  .gnav ul li a.nav_question {
			color: #03c383;
		}
			.nav_area  .gnav ul li a img {
				margin: 0 8px 0 0;
			}


/* ハンバーガーメニューナビ
----------------------------------------------- */
#nav-drawer {
	margin: 0;
	padding: 0;
}

#nav-input ,
#nav-open ,
#nav-close ,
#nav-input:checked ~ #nav-close {
	display: none;
}

/* レスポンシブ
----------------------------------------------- */
/* モバイル（xs） iPhone6 Plus 縦 */
@media (max-width: 576px) {
	.logo {
		text-align: center;
	}
		.logo img {
			width: 120px;
		}
	.logo_area .subtitle {
		margin: 0;
		padding: 0;
	}
	.header_menu {
		float: none;
		margin: 0;
		padding: 0;
	}
		.header_menu li {
			display: block;
			float: none;
			text-align: left;
			padding: 0;
			margin: 0;
		}
			.header_menu li a {
				display: block;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
			}
	.nav_area .gnav {
		padding: 0;
		margin: 0;
	}
		.nav_area .gnav ul li {
			padding: 0;
			margin: 0;
		}
			.nav_area .gnav ul li a {
				text-align: left;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
				font-size: 1em;
			}



	header {
		z-index: 5;
		background: rgba(255,255,255,0.9);
		padding-top: 64px;
	}
	.logo_area_wrapper {
		height: 64px;
	}
	#nav-drawer {
		display: inline-block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 20;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 74px;
		height: 64px;
		margin: 0;
		padding: 24px;
		vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #555;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 330px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #fff;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

}
/* モバイル（sm） iPhone6 Plus 横 */
@media (min-width: 576px) and (max-width: 768px) {
	.logo {
		text-align: center;
	}
		.logo img {
			width: 120px;
		}
	.logo_area .subtitle {
		margin: 0;
		padding: 0;
	}
	.header_menu {
		float: none;
		margin: 0;
		padding: 0;
	}
		.header_menu li {
			display: block;
			float: none;
			text-align: left;
			padding: 0;
			margin: 0;
		}
			.header_menu li a {
				display: block;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
			}
	.nav_area .gnav {
		padding: 0;
		margin: 0;
	}
		.nav_area .gnav ul li {
			padding: 0;
			margin: 0;
		}
			.nav_area .gnav ul li a {
				text-align: left;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
				font-size: 1em;
			}



	header {
		z-index: 5;
		background: rgba(255,255,255,0.9);
		padding-top: 64px;
	}
	#nav-drawer {
		display: inline-block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 20;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 74px;
		height: 64px;
		margin: 0;
		padding: 24px;
		vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #555;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 330px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #fff;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
}
/* モバイル（md）iPad mini 縦 */
@media (min-width: 768px) and (max-width: 991px) {
	.logo {
		text-align: center;
	}
		.logo img {
			width: 120px;
		}
	.logo_area .subtitle {
		margin: 0;
		padding: 0;
	}
	.header_menu {
		float: none;
		margin: 0;
		padding: 0;
	}
		.header_menu li {
			display: block;
			float: none;
			text-align: left;
			padding: 0;
			margin: 0;
		}
			.header_menu li a {
				display: block;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
			}
	.nav_area .gnav {
		padding: 0;
		margin: 0;
	}
		.nav_area .gnav ul li {
			padding: 0;
			margin: 0;
		}
			.nav_area .gnav ul li a {
				text-align: left;
				padding: 16px 24px;
				margin: 0;
				border-bottom: 1px solid #eee;
				font-size: 1em;
			}



	header {
		z-index: 5;
		background: rgba(255,255,255,0.9);
		padding-top: 64px;
	}
	.logo_area_wrapper {
		height: 64px;
	}
	#nav-drawer {
		display: inline-block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 20;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 74px;
		height: 64px;
		margin: 0;
		padding: 24px;
		vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #555;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 330px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #fff;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

}
/* タブレット（lg） iPad mini 横 */
@media (min-width: 992px) and (max-width: 1199px) {
	.nav_area  .gnav ul li a {
		font-size: 0.8em;
		line-height: 0.8em;
	}
}
/* PC（xl） */
@media (min-width: 1200px) {
}