@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc_v{display: block;}
.sp_v{display: none;}
ul {list-style: none;}
figure{line-height: 0;}
a img:hover{opacity: 0.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}


/*-M-*/
p,#explanation .tab_detail dd,#explanation .tab_detail dt,#explanation .tab2 dt{
font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 500;
font-style: normal;
}
/*-B-*/
h2,h3,h4,.spotlist_back a{font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 700;
font-style: normal;}


h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
.mainbnr img{max-width: 70%;margin: 0 auto;}
h2{line-height: 1; font-size: 30px; color: #004ea2; margin-bottom: 50px; text-align: center;}

.inner{width: 1000px; margin: 0 auto;}



#prologue{margin-bottom: 80px; background-color: #fdfbf8;}
#prologue .inner{text-align: left; padding: 60px 0; margin: 0 auto;}
#prologue .main{font-size: 18px; margin-bottom: 30px;}
#prologue .sub{font-size: 15px;}



#explanation{margin-bottom: 80px;}
#explanation h3{font-size: 25px; background-color: #f4f7fb; position: relative; margin-bottom: 20px; padding-left: 15px;}
#explanation h3:before{
	content: "";
	width: 5px;
	height: 100%;
	background-color: #004ea2;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);}
#explanation p{font-size: 16px; margin-bottom: 40px;}
#explanation h4{font-size: 20px; margin-bottom: 20px;}
#explanation .tab{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px;}
#explanation .tab figure{width: 31%;}
#explanation .tab2{display: flex; flex-wrap: wrap; justify-content: space-between;}
#explanation .tab2 dl{width: 48%;}
#explanation .tab2 .blue dt{color: #fff; background-color: #004ea2;}
#explanation .tab2 .green dt{color: #fff; background-color: #19a24d;}
#explanation .tab2_leed{font-size: 18px; margin-bottom: 40px;}
#explanation .tab_detail{margin-bottom: 60px; font-size: 18px;}
#explanation .tab_detail dt{color: #004ea2; margin-bottom: 20px; position: relative; overflow-x: hidden;}
#explanation .tab_detail dt:after{
	content: "";
	width: 100%;
	background-color: #004ea2;
	height: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);}
#explanation .tab_detail dd{font-size: 16px;}
#explanation .two figure{margin-bottom: 40px;}

#precautions{background-color: #fdfbf8;}
#precautions .inner{padding: 60px 0;}
#precautions p{font-size: 16px; text-align: left;}



.spotlist_back {
	margin-top: 60px;
	text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}




@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	.pc_v{display: none;}
	.sp_v{display: block;}


	.mainbnr img{max-width: 100%;}
	.inner{width: 90% !important;}
	
	h2{font-size: 25px;}
	
	#prologue{margin: 30px 0 60px;}
	#prologue .inner{padding: 0;}
	#prologue .inner p{width: 100%;}
	#prologue .main{font-size: 16px;}

	#explanation h3{font-size: 22px;}
	#explanation h4{font-size: 18px;}
	#explanation .tab figure{width: 100%;}
	#explanation .tab figure:nth-child(n+2){margin-top: 20px;}
	#explanation .tab figure img{width: 100%;}
	#explanation .tab2 dl{width: 100%;}
	#explanation .tab2 dt{font-size: 20px; margin-bottom: 10px;}
	#explanation .tab2 .blue{margin-bottom: 30px;}
	}