@charset "utf-8";

body{background-color: #96ddf5;}


/* 共通 */
#point01, #point02, #point03{
	position: relative;
	margin: 0 auto 12% auto;
}

#point01 h2, #point02 h2, #point03 h2{
	position: relative;
	margin: 3% auto;
	font-size: .18rem;
	font-weight: 900;
	color: #92000d;
	height: auto;
}
#point01 h2 span, #point02 h2 span, #point03 h2 span {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#point01 h2 span::before, #point02 h2 span::before, #point03 h2 span::before,
#point01 h2 span::after, #point02 h2 span::after, #point03 h2 span::after{
	content: '';
	display: block;
	width: 1.2em;
	height: 1.2em;
	background-image: url("../img/icon01.png");
	background-size: contain;
	background-repeat: no-repeat;
	flex-grow: 1;
}
#point01 h2 span::before, #point02 h2 span::before, #point03 h2 span::before{margin-right:1em;background-position: 100% 0;}
#point01 h2 span::after, #point02 h2 span::after, #point03 h2 span::after{margin-left:1em;background-position: 0 0;}

/* タイトル */
.ttl {
	position: relative;
	margin: -30% auto 0 auto; 
	padding: 0;
}
.ttl h2{
	background-image: url("../img/bg_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
}
.ttl h2 img{padding-bottom: 40px;}


.spot{
	position: relative;
	margin: 0 auto;
	width: 88%;
	text-align: left;
	border: solid 3px #005175;
}
.noborder{border:none;}

#point03 {padding: 0 0 40% 0;}

#point01 p, #point02 p, #point03 p{
	position: relative;
	margin: 3% auto 0 auto;
	width: 80%;
}

/* SPOT MAP */
#spotmap {margin: -40% auto 0 auto;padding: 0 0 10% 0;}
#spotmap .bg{
	position: relative;
	margin: 0;
	padding: 4% 0 40% 0;
	background: -webkit-linear-gradient(bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1));
	background: -o-linear-gradient(bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1)) ;
	background: linear-gradient(to bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1)) ;
}
#spotmap h2{
	background-image: url("../img/bg_game_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
	padding-top: 15px;
}
#spotmap div.mapImage img{ width: 90%;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* タイトル */
	.ttl {margin: -130px auto 0 auto;  }
	.ttl h2{background-size: 100% 120px;padding-bottom: 40px;}
	.ttl h2 img{padding-top: 40px;}

	/* 共通 */
	#point01, #point02, #point03{margin: 0 auto 70px auto;}
	#point01 h2, #point02 h2, #point03 h2{
		margin: 0 auto;
		padding: 20px 0;
		font-size: .24rem;
	}
	.spot{width: 680px;}
	#point03 .spot{width: 960px;}
	
	#point03 {padding: 0 0 180px 0;}

	#point01 p, #point02 p, #point03 p{	
		margin: 20px auto 0 auto;
		width: 600px;
	}
	
	/* SPOT MAP */
	#spotmap {margin: -100px auto 0 auto;padding: 30px 0 50px 0;}
	#spotmap .bg{padding: 30px 0 200px 0;}
	#spotmap h2{background-size: 100% 120px;}
	#spotmap h2 img{padding-top: 30px;}
	#spotmap div.mapImage img{ width: 600px;}

}