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

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

/*----fonttype----*/
.F-base *{font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;}
#prologue p{font-family: monopin-j, sans-serif;
font-style: normal;
font-weight: 400;}
.common .blue{font-family: "source-han-sans-japanese", sans-serif;
font-weight: 400;
font-style: normal;}
.common h3,.common .sozai,.common .blue,.common .price{font-family: "source-han-sans-japanese", 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;}
.inner{width: 1000px;margin: 0 auto;}



#prologue{margin: 0 0 80px;}
#prologue .inner{padding: 60px 0 0;}
#prologue h2{font-size: 25px; color: #0068a3; text-align: center; margin-bottom: 30px; position: relative;}
#prologue h2:before{
	content: "";
	background: url("../img/prologue-icon_01.webp")no-repeat;
	width: 132px;
	height: 178px;
	position: absolute;
	left: 0;
	bottom: 0;}
#prologue h2:after{
	content: "";
	background: url("../img/prologue-icon_02.webp")no-repeat;
	width: 122px;
	height: 103px;
	position: absolute;
	right: 120px;
	bottom: -30px;}
#prologue p{text-align: left; font-size: 16px; color: #242424; width: 650px; margin: 0 auto; position: relative;}
#prologue p:before{
	content: "";
	background: url("../img/prologue-icon_03.webp")no-repeat;
	width: 88px;
	height: 94px;
	position: absolute;
	left: -100px;
	bottom: -30px;}
#prologue p:after{
	content: "";
	background: url("../img/prologue-icon_04.webp")no-repeat;
	width: 159px;
	height: 230px;
	position: absolute;
	right: -150px;
	bottom: -30px;}


#select{background-color: #0068a3;}
#select ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#select li{width: 20%; text-align: center; padding: 10px 0;}
#select li:last-child a{border-right: solid 2px #fff;}
#select li a{display: block; position: relative; color: #ffff59; font-size: 20px; padding: 15px 0; border-left: solid 2px #fff;}
#select li a:after{
	content: "";
	width: 11px;
	height: 11px;
	margin: 0 10px;
	border-bottom: 2.5px solid #fff;
	border-right: 2.5px solid #fff;
	transform: rotate(45deg) translateX(-50%);
	position: absolute;
	bottom: 0px;
	left: 45%;}



.common .inner{padding: 80px 0;}
.common h2{font-size: 25px; margin-bottom: 15px;}
.common .leed{font-size: 16px; margin-bottom: 40px;}
.common h3{font-size: 16px; margin-bottom: 10px; flex-grow: 1; line-height: 1.4;}
.common .item{display: flex; flex-wrap: wrap;}
.common .item a{width: 23%; display: flex; flex-direction: column; margin-right: 2.6%;}
.common .item a:nth-child(4n){margin-right: 0;}
.common .item a:nth-child(n+5){margin-top: 80px;}
.common .item a figure{margin-bottom: 15px;}
.common .size{font-size: 14px; margin-bottom: 15px; line-height: 1;}
.common .label{font-size: 15px; text-align: center; margin-bottom: 15px;}
.common .sozai{margin-bottom: 3px;}
.common .price{font-size: 22px; line-height: 1;}


.b-white h2{color: #0068a3; border-bottom: solid 1px #0068a3;}
.b-white .sozai{color: #0068a3; border: solid 1px #0068a3; border-radius: 2px;}
.b-white .blue{color: #fff; background-color: #32b1dc; border-radius: 2px;}


.b-blue{background-color: #0068a3;}
.b-blue h2{color: #fff; border-bottom: solid 1px #fff;}
.b-blue .leed{color: #fff;}
.b-blue h3{color: #fff;}
.b-blue .size{color: #fff;}
.b-blue .sozai{color: #ffff59; border: solid 1px #ffff59;}
.b-blue .price{color: #fff;}


.lookme{font-size: 16px; border: solid 2px; background-color: #fff; border-radius: 30px; text-align: center; padding: 10px 0; margin-top: 20px;}

.more{text-align: center; margin-top: 80px;}
.more a{font-size: 20px; color: #ffff59; background-color: #0068a3; border-radius: 5px; padding: 15px 80px; display: inline-block;}

.more2{text-align: center; margin-top: 30px;}
.more2 a{font-size: 20px; color: #0068a3; border: solid 1px #0068a3; border-radius: 5px; padding: 15px 60px; display: inline-block;}


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


/*--価格チェック--*/
.rpa-product-name,.rpa-product-price{padding: 0; color: unset; line-height: inherit;}


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

	
	h1 img{max-width: 100%;}
	.inner{width: 95% !important;}
	.mainbnr img{max-width: 100%;}
	
	#prologue{margin: 0;}
	#prologue .inner{padding: 20px 0 40px;}
	#prologue h2{margin-bottom: 10px; font-size: 20px;}
	#prologue p{width: 100%; font-size: 14px;}
	#prologue h2:before,
	#prologue h2:after,
	#prologue p:before,
	#prologue p:after{content: none;}
	
	#select{padding-bottom: 25px;}
	#select li{width: 100%; text-align: left;}
	#select li a{border-left: none; border-bottom: solid 1px #fff; padding: 15px 0 5px;}
	#select li:last-child a{border-right: none;}
	#select li a:after{bottom: 15px; left: auto; right: 0;}
	
	
	.common .item a{width: 48%; margin-right: 4%;}
	.common .item a:nth-child(2n){margin-right: 0;}
	.common .item a:nth-child(n+3){margin-top: 60px;}
	.common .item a figure img{width: 100%;}
	
}