@charset "utf-8";

a:hover {
  opacity: 0.8; }

/* CSS Document */
body{
	background: #fff;
	letter-spacing: 0.1em;
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro","游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	background: none !important;
}
#mainArea{
	/*padding-top: 70px;*/
	width: 100%;
	background: url(../images/town.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	padding: 50px 0;

}
#contentArea{
	width: 100%;
	background: url(../images/bg02.jpg) repeat;
	color: #fff;
	padding: 100px 0 0;
}

div.wid1060{
	max-width: 1060px;
	width: 95%;
	margin: auto;
}
p.collabo{
	width: 50%;
	margin: 0 auto 50px;
	padding-top: 50px;
}
#mainArea h1{
	width: 400px;
	height: auto;
	margin: auto;
}

#ryuk{
	width: 480px;
	height: auto;
	position: relative;
	margin-top: -180px;
	top: -200px;
	left: -45px;
	-webkit-animation: ryuk 4s ease -0.5s 1 forwards;
	animation: ryuk 4s ease -0.5s 1 forwards;
	display:inline-block;
}
#ryuk img{
	-webkit-animation: note 1.8s linear -2s infinite alternate;;
	animation: note 1.8s linear -2s infinite alternate;
	position: relative;
}
#mainArea p.explain{
	color: #fff;
	text-align: center;
	margin-top: -60px;
	font-size: 18px;
}
#howTo{
	text-align: center;
	background: url(../images/waku_top.png) no-repeat top,
				url(../images/waku_center.png) no-repeat center,
				url(../images/waku_bottom.png) no-repeat bottom; 
	background-size: 100%,100% 450px,100%;
	max-width: 794px;
	width: 100%;
	padding: 50px 0;
	margin: auto;
}
#howTo h3{
	font-size: 30px;
	margin-bottom: 40px;

}
#howTo p{
	font-size: 24px;
	margin-bottom: 40px;
}

#howTo ul li{
	margin-bottom: 25px;
	font-size: 18px;
	
}
#howTo ul li span.border{
	font-size: 26px;
	box-sizing: border-box;
	
	border: 2px solid #d70c18;
	border-left: none;
	border-right: none;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: bold;
}
div#howTo div{
	font-size: 24px;
}


p.attention{
	color: #feff01;
	margin: 30px auto 0;
	text-align: center;
}
p.attention span{
	border-bottom: double 3px #feff01;
	color: #feff01;
}
span.red{
	 color:#d70c18;
	 border-bottom: solid 1px #d70c18;
}
div.note{
	width: 100%;
	
	box-sizing: border-box;
	padding: 0 5px;
	opacity:0;
	
}

div.note img{
	position: relative;
	-webkit-animation: note 1.8s linear -2s infinite alternate;;
	animation: note 1.8s linear -2s infinite alternate;
	display: block;
	width: 300px;
	height: auto;
	margin: auto;
	text-decoration: none;
	color: #fff;
	font-size: 22px;
}
div#start{
	
	width: 100%;
	margin: 50px auto;
	border-radius: 5px;
	text-align: center;
	font-size: 24px;
	color: #fff;	
}
div#start a{
	text-decoration: none;
	color: #fff;
	text-align: center;
	margin: auto;
	display: block;
	padding: 10px;
	font-weight: bold;
	font-size: 22px;
}
div.stop{
	max-width: 380px;
	width: 75%;
	margin: 50px auto;
	border-radius: 5px;
	background: #ccc;
	text-align: center;
	color: #000;
	padding: 10px;
	font-weight: bold;
}

div.stop a{
	text-decoration: none;
	text-align: center;
	color: #000;
	padding: 10px;
	font-weight: bold;
	
	margin: auto;
	display: block;
	
}
.none{
	display: none;
}
/*.spNone{
	display: block;
}
.pcNone{
	display: none;
}*/
div#foot{
	color: #fff;
	font-size: 10px;
	text-align: right;
	padding: 10px 25px;
}

@media(max-width:400px){
	
	#mainArea{
		padding-top: 50px;
		padding-bottom: 50px;
		height: auto;
		background-position: center;
	}
	
	#mainArea h1{
	width: 80%;
	height: auto;
	margin: auto;
}

#ryuk{
	width: 300px;
	height: auto;
	position: relative;
	top: -155px;
	left: 50%;
	margin-left: -150px;
	text-align: center;
	-webkit-animation: ryuksp 4s ease -0.5s 1 forwards;
	animation: ryuksp 4s ease -0.5s 1 forwards;
	display:inline-block;
}


	#mainArea p.explain{
		font-size: 14px;
		padding:0 5px 10px;
		margin-top: -60px;
	}
	p.attention{
	color: #feff01;
	margin: 30px auto 0;
	text-align: center;
}
	p.attention span{
	border-bottom: double 3px #feff01;
	color: #feff01;
}
	p.collabo{
		width: 90%;
		margin: 0 auto 30px;
		padding-top: 30px;
	}
	#contentArea{
		padding: 50px 0 0;
	}
	div#foot{
		text-align: center;
	}
	#howTo{
	background-size: 100%,100% 90%,100%;
	box-sizing: border-box;
	padding: 20px 10px 0; 
	}
	#howTo h3{
	font-size: 24px;
	margin-bottom: 20px;
	}
	#howTo p{
	font-size: 16px;
	margin-bottom: 20px;
	}
	div#howTo div{
	font-size: 18px;
	padding-bottom: 15px;
	border-bottom: double 3px ;
	}
	#howTo ul li span.border{
	font-size: 16px;
	box-sizing: border-box;
	
	border: 2px solid #d70c18;
	border-left: none;
	border-right: none;
	margin-bottom: 10px;
	display: inline-block;
}
	#howTo ul li{
	font-size: 14px;
	}
	div.note{
	width: 100%;
	padding: 20px 0;
	}
	div.note a{
	width: 180px;
	font-size: 18px;
	}
	div#start{
	margin: 25px auto 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 5px;
	font-size: 18px;
	}
	
	/*.spNone{
	display: none;
	}
	.pcNone{
	display: block;
	}
	img.pcNone{
		width: 180px;
		margin: auto;
	}
	p.pcNone img{
		width: 100%;
		margin: 0 auto 25px;
		text-align: center;
	}*/
	div.stop{
	margin: 25px auto;
	}
} 
@-webkit-keyframes ryuk {
0% {width: 0px;}
100% {width: 480px;}
}
@keyframes ryuk {
0% {width: 0px;}
100% {width: 480px;}
}
@-webkit-keyframes ryuksp {
0% {width: 0px;}
100% {width: 300px;}
}
@keyframes ryuksp {
0% {width: 0px;}
100% {width: 300px;}
}
@-webkit-keyframes note {
0% {top: -10px;}
100% {top: 5px;}
}
@keyframes note {
0% {top: -10px;}
100% {top: 5px;}
}
@-webkit-keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes fade02 {
0% {opacity: 1;}
100% {opacity: 0.2;}
}
@keyframes fade02 {
0% {opacity: 1;}
100% {opacity: 0.2;}
}