:root{
	font-size:1.5vw;
}
*,*:after,*:before{
	box-sizing:border-box;
}

@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?d9b4wh);src:url('../fonts/icomoon.eot?d9b4wh#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?d9b4wh') format('truetype'),url('../fonts/icomoon.woff?d9b4wh') format('woff'),url('../fonts/icomoon.svg?d9b4wh#icomoon') format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.icon-home3:before {content: "\e902";}
.icon-coin-yen:before {content: "\e93e";}
.icon-phone:before {content: "\e942";}
.icon-envelop:before {content: "\e945";}
.icon-mobile:before {content: "\e958";}
.icon-lock:before {content: "\e98f";}
.icon-clipboard:before {content: "\e9b8";}
.icon-link:before {content: "\e9cb";}
.icon-tongue:before {content: "\e9e3";}
.icon-grin:before {content: "\e9e9";}
.icon-baffled:before {content: "\e9f3";}
.icon-wondering2:before {content: "\e9fc";}
.icon-sleepy:before {content: "\e9fd";}
.icon-checkmark:before {content: "\ea10";}
.icon-checkmark2:before {content: "\ea11";}
.icon-play3:before {content: "\ea1c";}
.icon-arrow-up:before {content: "\ea32";}
.icon-arrow-up-right:before {content: "\ea33";}
.icon-arrow-right:before {content: "\ea34";}
.icon-arrow-down:before {content: "\ea36";}
.icon-arrow-left:before {content: "\ea38";}
.icon-circle-up:before {content: "\ea41";}
.icon-circle-right:before {content: "\ea42";}
.icon-circle-down:before {content: "\ea43";}
.icon-circle-left:before {content: "\ea44";}
.icon-checkbox-checked:before {content: "\ea52";}
.icon-new-tab:before {content: "\ea7e";}

body{
	font-size:1em;
	margin:0;
	padding:0;
	background-color:#fff;
	
}
ul{
	padding:0;
	margin:0;
	list-style:none;
}

img{
	width:100%;
	height:auto;
}
a{
	text-decoration:none;	
}

@media screen and (max-device-width: 767px)  {

	:root{
		font-size:5vw;
	}

}

/*******************
	全体共通クラス
*********************/
.yohaku{
	padding:2rem 5rem;
}
.content{
	margin:1rem 1rem;
}
h1,h2,h4,#foot{
	font-family: ＤＦ行書体,HG行書体,cursive;
	font-weight:normal;
}

.logo{
	
	width:80%;
	margin:0 auto;
	padding:0.8rem 0;
	position:relative;
	text-align:center;
}

.logo img{
	height:0.8rem;
	width:auto;
	
}
.logo h2{
	font-size:0.8rem;
	font-weight:bold;
}	

.logo > *{
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:middle;
	
}

#waku{
	width:90%;
	
	margin:0 auto;
	position:relative;

}

@media screen and (max-device-width: 767px)  {

	#waku{
		width:100%;

	}

	.yohaku{
		padding:2rem 0.2rem;
	}

}

/***************
	header
****************/
#header{
	background-color:rgba(17,22,8,1);
	color:#fff;
	position:relative;
}
#header:after{
	background:radial-gradient(
		farthest-side at center top,
		rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 100%
	);
	content:"";
	display:block;
	width:40%;
	height:6rem;
	position:absolute;
	left:5%;
	top:0;
}


#header .logo:after{
	background:linear-gradient(
		to right,
		rgba(17,22,8,0), 
		rgba(255,200,0,0.9) 25%, 
		rgba(255,225,255,0.9) 75%, 
		rgba(17,22,8,0)
	);
	content:"";
	display:block;
	width:100%;
	height:1px;
	position:absolute;
	left:0;
	bottom:0;
}

#header ul.navi{
	display:flex;
	justify-content:center;
	
}
#header .navi li{
	padding:3rem 1.2rem 1rem 1.2rem;
}
#header .navi a{
	color:#fff;
}
#header .navi .toji{
	display:none;
	
	}
#header #menubtn{
	display:none;
}
@media screen and (max-device-width: 767px)  {

	#header ul.navi{
		display:block;
		padding:0.5rem 0;
		position:fixed;
		background-color:rgba(0,0,0,0.8);
		border-left:1px solid #aaa;
		border-bottom:1px solid #aaa;
		z-index:1000;
		top:-25rem;
		right:0;
		width:50%;
		transition-duration:0.5s;
	
	
	}
	
	#header ul.navi.on{
		top:0rem;
	}
	#header .navi .toji{
	display:block;
	border:1px solid #fff;
	margin:0.3rem 0.8rem;
	padding:0.2rem 1rem;
	text-align:center;
	}
	
	#header .navi li{
		padding: 0.5rem 1.2rem;
	}
	#header #menubtn{
		display:block;
		width:1.5rem;
		height:1.2rem;
		background:linear-gradient(
			to bottom,
			#fff 0%,#fff 17.9%,
			#000 18%,#000 41.0%,
			#fff 41.1%,#fff 57.9%,
			#000 58.0%,#000 81.0%,
			#fff 81.1%,#fff 100% 
		);
		position:absolute;
		top:0.8rem;
		right:0.5rem;	
	}

}



/***************
	footer
****************/

#modoru img{
	
	width:2rem;
	height:2rem;
	right:6rem;
	bottom:0.5rem;
	display:block;
	position:fixed;
	opacity:0.8;
}


#footer{
	
	margin:1rem auto 0 auto;
	position:relative;

}

#foot1:before{
	background:linear-gradient(
		to right,
		rgba(17,22,8,0), 
		rgba(17,22,8,1) 10%, 
		rgba(17,22,8,1) 90%, 
		rgba(17,22,8,0)
	);
	content:"";
	display:block;
	width:100%;
	height:1px;
	position:absolute;
	left:0;
	top:0;

}
#foot1 ul.rink{
	display:flex;
	justify-content:space-between;
	padding:4rem 0 0 0;
	border-bottom:1px solid #000;
}
.rink li{
	width:32%;
	padding:0.5rem 0.5rem 0 1.2rem;
}
#foot1 ul.navi{

	padding:3rem 1rem 0.5rem 1rem;

}
#foot1 ul.navi h4{
	display:inline-block;
	font-size:1.5rem;
	margin:0.75rem 0;
	padding-right:0.5rem;
	background:#fff;
	width:auto;
}

#foot1 ul.navi > li{
	position:relative;
}
#foot1 ul.navi > li:before{
	border-top:1px dashed #888;
	content:"";
	display:block;
	width:90%;
	height:1px;
	position:absolute;
	left:5%;
	top:1.5rem;
	z-index:-1;
}



.nakami li{
	line-height:1.8em;
	font-size:0.9rem;
	padding-left:0.5rem;
	color:#666;
}
.nakami a{
	color:#666;
}
.navi2{
	width:66%;
}


#foot2{
	background-color:rgba(17,22,8,1);
	color:#fff;
}
#foot2 ul.jouhou{
	display:flex;
	justify-content:center;
	
	
}
.jouhou li{
	padding:1rem;
}
.jouhou a{
	color:#fff;
}

@media screen and (min-device-width: 768px)  {

	#footer{
		
		width:98%;
		padding-left:1rem;

	}
	#foot1 ul.navi{
		display:flex;
		justify-content:space-between;

	}

	#foot1 .navi1{
		width:33%;
	}
	
	.navi2 > div{
		display:flex;
		justify-content:space-between;
	}
	
	.navi2 ul{
		width:50%;
	}
}


@media screen and (max-device-width: 767px)  {

	#foot2 ul.jouhou{
	display:block;
	padding:0.5rem 1rem;

	}
	.jouhou li{
		padding: 0.25rem;
	}
	.navi2{
		width:100%;
	}
	#foot1 ul.navi{
		display:block;
		
		padding:3rem 1rem 0.5rem 1rem;

	}

	#modoru img{
		
		width:3rem;
		height:3rem;
		right:0.5rem;
		bottom:1.5rem;

	}
	#foot2 .logo{
		padding-bottom:0.2rem;
		
	}
	#foot2 .logo h2{
		font-size:0.7rem;
	}

}