@charset "utf-8";

/*==========================================================
	共通設定 (Primary style at SP)
==========================================================*/
body{
	max-width: 640px;
	margin: 0px auto !important;
}
/*==========================================================
	コンテンツメイン
==========================================================*/
#main{
	position: relative;
	width: 100%; height: 100%;
	margin: 0px auto;
	overflow: hidden;
}
/*==========================================================
	ヘッダー
==========================================================*/
header{
	position: fixed;
	top: 0px; left: 0px; right: 0px;
	width: 100%; height: 30px;
	max-width: 640px;
	margin: 0px auto;
	background-color: #106516;
	z-index: 130;
}
header h1{
	width: 100%; height: 30px;
	line-height: 30px;
	text-align: center;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Quicksand','游ゴシック',YuGothic,'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ','Meiryo', sans-serif;
}
.header_box{
	position: relative;
	width: 100%; height: 80px;
	margin: 0px auto;
}
.header_box p{
	width: 100%; height: 80px;
	margin: 0px auto;
	line-height: 80px;
	text-align: center;
	color: #FFFFFF;
	font-size: 46px;
	font-family: 'Frijole', cursive;
}
/*==========================================================
	メニュー 
==========================================================*/
.menu-trigger{
	position: fixed;
	bottom: 60px; left: 0px; right: 0px;
	width: 100px; height: 100px;
	margin: 0px auto;
	line-height: 165px;
	text-align: center;
	letter-spacing: 0.05em;
	font-size: 22px;
	font-family: 'Quicksand', sans-serif;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #000000;
	background-color: #106516;
	z-index: 999;
}
.menu-trigger,
.menu-trigger span{
	display: inline-block;
	box-sizing: border-box;
	transition: all 0.4s;
}
.menu-trigger span{
	position: absolute;
	left: 8px;
	width: 75%; height: 4px;
	border-radius: 4px;
	background-color: #FFFFFF;
	z-index: 9999;
}
.menu-trigger span:nth-of-type(1){
	top: 15px; left: 0px; right: 0px;
	margin: 0px auto;
}
.menu-trigger span:nth-of-type(2){
	top: 0px; bottom: 25px; left: 0px; right: 0px;
	margin: auto;
}
.menu-trigger span:nth-of-type(3){
	bottom: 40px; left: 0px; right: 0px;
	margin: 0px auto;
}
.menu-trigger.active span:nth-of-type(1){
	top: 20px;
	-webkit-transform: translateY(14px) rotate(-45deg);
	transform: translateY(14px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
	bottom: 35px;
	-webkit-transform: translateY(-26px) rotate(45deg);
	transform: translateY(-26px) rotate(45deg);
}
#overlay{
	display: none;
	position: fixed;
	top: 30px; left: 0px; right: 0px;
	width: 100%; height:100%;
	max-width: 640px;
	margin: 0px auto;
	padding: 100px 0px 0px 0px;
	text-align: center;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.6);
	z-index: 120;
}
#overlay ul{
	width: 100%;
	margin: 0px auto;
}
#overlay ul li{
	display: inline-block;
	width: 180px; height: 180px;
	margin: 0px 10px 40px 10px;
	text-align: center;
	border-radius: 10px;
	background-color: #106516;
}
#overlay ul li.full{
	display: block;
	width: 400px; height: 180px;
	margin: 0px auto 40px auto;
	text-align: center;
	border-radius: 10px;
	background-color: #106516;
}
#overlay ul li a{
	display: block;
	width: 100%; height: auto;
	padding: 10px 0px;
}
#overlay ul li i{
	width: 100%; height: 80px;
	margin: 0px auto;
	line-height: 80px;
	text-align: center;
	font-size: 60px;
}
#overlay ul li h2{
	width: 100%; height: 30px;
	margin: 5px auto;
	line-height: 30px;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 200;
	font-family: 'Quicksand', sans-serif;
}
#overlay ul li p{
	width: 100%; height: 30px;
	margin: 0px auto;
	line-height: 30px;
	font-size: 20px;
	font-weight: 600;
}
#overlay ul li p span{
	display: inline-block;
	margin: 0px 0px 0px 5px;
	font-size: 16px;
}
/*==========================================================
	ページタイトル
==========================================================*/
.page_title{
	width: 100%; height: auto;
	text-align: center;
}
.page_title h1{
	width: 100%; height: auto;
	margin: 20px auto 0px auto;
	line-height: 40px;
	color: #106516;
	font-size: 40px;
	font-family: 'Quicksand','游ゴシック',YuGothic,'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ','Meiryo', sans-serif;
}
.page_title h1 span{
	display:  inline-block;
	width: auto; height: 30px;
	margin: 0px 5px;
	line-height: 30px;
	font-size:  28px;
	font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ','Meiryo', sans-serif;
}
.page_title h1 br + span{
	display:  inline-block;
	position:  relative;
	width: auto; height: 30px;
	margin: 10px auto 0px auto;
	padding: 0px 10px;
	line-height: 30px;
	font-size:  20px;
	font-weight: 400;
	font-family: 'Quicksand', sans-serif;
}
.page_title h1 br + span:before {
	content: '';
	position:  absolute;
	top: 0px; bottom: 0px; left: -60px;
	width: 50px; height:  1px;
	margin:  auto;
	background-color: #106516;
	z-index: -1;
}
.page_title h1 br + span:after {
	content: '';
	position:  absolute;
	top: 0px; bottom: 0px; right: -60px;
	width: 50px; height:  1px;
	margin:  auto;
	background-color: #106516;
	z-index: -1;
}
/*登録完了メッセージ*/
.set_success{
	width: 100%; height: auto;
	margin: 20px auto;
	padding: 10px;
	line-height: 1.4em;
	color: #FF0000;
	font-size: 26px;
	font-weight: 600;
}
/*登録失敗メッセージ*/
.set_failed{
	width: 100%; height: auto;
	margin: 20px auto;
	padding: 10px;
	line-height: 1.4em;
	color: #0000FF;
	font-size: 26px;
	font-weight: 600;
}
.page_title p{
	width: 100%; height: auto;
	margin: 20px auto;
	padding: 10px;
	line-height: 1.4em;
	font-size: 20px;
	font-weight: 600;
	border-radius: 10px;
	background-color: #FFF59D;
}
.page_title p span{
	display: inline-block;
	width: auto;
	margin: 0px 2px;
	color: #EE0000;
}
.page_title p span > span{
	color: #101010;
	font-size: 18px;
}
/*==========================================================
	フッター
==========================================================*/
footer{
	position: fixed;
	bottom: 0px; left: 0px; right: 0px;
	width: 100%; height: 50px;
	max-width: 640px;
	margin: 0px auto;
	text-align: center;
	background-color: #106516;
}
.footer_box{
	position: relative;
	width: 100%; height: 50px;
	margin: 0px auto;
}
/*==========================================================
	コピーライト
==========================================================*/
.copyright{
	width: 100%; height: 50px;
	margin: 0px auto;
	line-height: 50px;
	text-align: center;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
}