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

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


h2,h3,p,a,span{
font-family: "source-han-sans-japanese", sans-serif;
font-style: normal;}



h1 .mainbnr{text-align: center; background-color: #f7f7f7; line-height: 0;}
h1 img{max-width: 70%;margin: 0 auto;}
h2{font-size: 30px; text-align: center; font-weight: bold;}
h2 span{font-size: 60%;}

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


#prologue{position: relative; background: url("../img/prologue-back.webp")no-repeat; background-size: contain; background-position: center; background-color: #eef3f6;}
#prologue .inner{
	text-align: center;
	margin: 0 auto;
	padding: 110px 0;}
#prologue h2{text-align: left; padding-bottom: 30px; color: #50ba4a;}
#prologue p{text-align: left; font-size: 16px; font-weight: 500; letter-spacing: 0.5px;}


#notes{margin-top: 40px;}
#notes h2{margin-bottom: 10px; font-size: 20px;}
#notes p{font-size: 16px;}


#select{margin: 90px 0;}
#select h2{margin-bottom: 40px;}
#select ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#select li{width: 21%; margin-right: 5%; text-align: center; box-shadow: 0px 0px 20px 16px rgba(17,17,26,0.08); border-radius: 10px;}
#select li:last-child{margin-right: 0;}
#select li a{display: block; padding: 30px 0;}
#select li a figure{height: 100px; padding-bottom: 20px;}
#select li a figure img{height: 100%;}
#select li a span{font-size: 20px; font-weight: 500;}


#block-1 h2{color: #ccc44b; line-height: 1.5; padding-bottom: 50px;}
#block-2 h2{color: #ff4d3f; line-height: 1.5; padding-bottom: 50px;}
#block-3 h2{color: #dc954b; line-height: 1.5; padding-bottom: 50px;}
#block-4 h2{color: #3ec272; line-height: 1.5; padding-bottom: 50px;}
#block-1,#block-2,#block-3{margin-bottom: 100px;}
#block-1 ul,#block-2 ul,#block-3 ul,#block-4 ul{display: flex; flex-wrap: wrap;}
#block-1 ul li,#block-2 ul li,#block-3 ul li,#block-4 ul li{width: 30%; margin-right: 5%;}
#block-1 ul li:nth-child(n+4),#block-2 ul li:nth-child(n+4),#block-3 ul li:nth-child(n+4),#block-4 ul li:nth-child(n+4){margin-top: 40px;}
#block-1 ul li:nth-child(3n),#block-2 ul li:nth-child(3n),#block-3 ul li:nth-child(3n),#block-4 ul li:nth-child(3n){margin-right: 0;}
#block-1 ul li a,#block-2 ul li a,#block-3 ul li a,#block-4 ul li a{display: block;}
#block-1 ul li a img,#block-2 ul li a img,#block-3 ul li a img,#block-4 ul li a img{width: 100%;}
#block-1 ul li a h3,#block-2 ul li a h3,#block-3 ul li a h3,#block-4 ul li a h3{font-size: 16px; font-weight: 500; padding-top: 15px;}


.caution{text-align: right; font-size: 16px; margin: 40px 0;}


.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) {
	
	h1 img{max-width: 100%;}
	h2{font-size: 30px;}
	.inner{width: 90% !important;}
	
	#prologue {
	background: url(../img/prologue-back-sp.webp) no-repeat;
	background-size: contain;
	background-position: bottom;
	background-color: #eef3f6;}
	#prologue .inner{padding: 30px 0 200px 0;}
	#prologue h2{padding-bottom: 15px;}

	#notes p{font-size: 14px;}	
	
	#select li{width: 48%; margin-right: 4%;}
	#select li:nth-child(even){margin-right: 0;}
	#select li:nth-child(n+3){margin-top: 20px;}
	#select li a{padding: 20px 0;}
	#select li a span{font-size: 18px;}
	
	
	#block-1 ul li, #block-2 ul li, #block-3 ul li, #block-4 ul li{width: 100%; margin-right: 0;}
	#block-1 ul li a h3, #block-2 ul li a h3, #block-3 ul li a h3, #block-4 ul li a h3{font-size: 18px;}
	#block-1 ul li:nth-child(n+2), #block-2 ul li:nth-child(n+2), #block-3 ul li:nth-child(n+2), #block-4 ul li:nth-child(n+2){margin-top: 50px;}
	
	
}