@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%);}

/*----fonttype----*/
.F-base *{
font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 400;
font-style: normal;}

/*--M--*/
#prologue h2,#reason h2,#reason h2 span,#prologue h2 span,#prologue h3 span,#prologue dt,#prologue dd,#product h2
{font-family: "zen-maru-gothic", sans-serif;
font-weight: 500;
font-style: normal;}
/*--B--*/
#reason .reason-box .reason dt
{font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;}

/*--M--*/
#reason .reason-box .reason dd,#product h3,#product .size{font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 500;
font-style: normal;}

/*--B--*/
#product .price{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;}

h2{font-size: 28px; text-align: center; position: relative; margin-bottom: 40px;}
h2:before{
	content: "";
	background: url("../img/silhouette.webp");
	width: 44px;
	height: 64px;
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);}
h2 span{color: #ce2740;}


.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;
	margin-bottom: 130px;}
.mainbnr img{max-width: 70%;margin: 0 auto;}


.inner{max-width: 1080px;margin: 0 auto;}



#prologue{margin-bottom: 100px;}
#prologue h3{font-size: 28px; margin-bottom: 20px;}
#prologue h3 span{color: #fff; background-color: #ce2740; margin-bottom: 40px;}
#prologue p{font-size: 17px; line-height: 2.0; margin-bottom: 10px;}
#prologue dt{font-size: 17px; color: #ce2740; position: relative;}
#prologue dt:after{content: ""; width: 50%; height: 1px; background-color: #ce2740; position: absolute; top: 50%; transform: translateY(-50%);}
#prologue dd{font-size: 19px; color: #ce2740;}
#prologue .prologue-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
#prologue .prologue-box div{width: 48%;}
#prologue .prologue-box figure{width: 48%;}
#prologue .prologue-box figure img{width: 100%;}



#reason{background-color: #fff5e3; margin-bottom: 180px;}
#reason .inner{padding: 160px 0 80px; position: relative;}
#reason .inner:before{
	content: "";
	background: url("../img/kinsoudori-right.webp")no-repeat;
	width: 182px;
	height: 171px;
	position: absolute;
	top: -40px;
	right: 0;
opacity: 0;
transform: translate(50px);
transition: opacity 1s, transform 1s; /* 変化を滑らかにする指定 */}
#reason .inner:after{
	content: "";
	background: url("../img/kinsoudori-left.webp")no-repeat;
	width: 171px;
	height: 132px;
	position: absolute;
	left: 0;
	bottom: -100px;
opacity: 0;
transform: translate(-50px);
transition: opacity 1s, transform 3s; /* 変化を滑らかにする指定 */}
/* フェードイン後の状態（.is-active クラスがついた時） */
#reason .inner.is-active-before::before {
	opacity: 1;
	transform: translate(0, 0); /* 元の位置へ移動 */}
#reason .inner.is-active-after::after {
	opacity: 1;
	transform: translate(0, 0); /* 元の位置へ移動 */}



#reason .reason-box{display: flex; flex-wrap: wrap; justify-content: space-around;}
#reason .reason-box .reason{width: 30%; border-radius: 20px; border: solid 2px #ce2740; box-sizing: border-box; padding: 30px; background-color: #fff;}
#reason .reason-box .reason:nth-child(n+4){margin-top: 30px;}
#reason .reason-box .reason figure{text-align: center;}
#reason .reason-box .reason figure img{max-width: 100%; max-height: 114px;}
#reason .reason-box .reason dt{font-size: 20px; text-align: center; margin: 20px 0 15px; line-height: 1;}
#reason .reason-box .reason dd{font-size: 16px;}
#reason .reason-box .reason dd span{color:#ce2740; font-weight: bold;}



#product{margin-bottom: 150px;}
#product .item-box{display: flex; flex-wrap: wrap;}
#product .item-box .item{width: 32%; margin-right: 2%; text-align: center; position: relative;}
#product .item-box .item:nth-child(3n){margin-right: 0;}
#product .item-box .item:nth-child(n+4){margin-top: 90px;}
#product .item-box .item figure img{width: 100%;}
#product h3{font-size: 23px; line-height: 1; margin-top: 20px;}
#product .price{font-size: 20px; color: #e52740; padding: 20px 0; line-height: 1;}
#product .size{font-size: 23px; color: #e52740; border: solid 1px #e52740; border-radius: 50px; display: inline-block; position: absolute; top: 0; right: 0; padding: 10px; background-color: #fff;}
#product a{font-size: 20px; color: #fff; background-color: #e52740; border-radius: 50px; position: relative; padding: 15px 0; display: block; text-align: center; width: 80%; margin: 0 auto;}
#product a:before{
	content: "";
	background: url("../img/arrow.webp")no-repeat;
	width: 21px;
	height: 21px;
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);}



.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; font-size: inherit; font-weight: unset;}



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

	
	h1 img{max-width: 100%;}
	.inner{width: 95% !important;}
	h2{margin-bottom: 20px;}
	
	.mainbnr{margin-bottom: 80px;}
	.mainbnr img{max-width: 100%;}

	#prologue{margin: 0 auto;}
	#prologue .inner{padding: 20px 0;}
	#prologue h3{font-size: 24px;}
	#prologue .inner p{font-size: 16px; margin: 0;}
	#prologue .prologue-box figure{width: 100%;}
	#prologue .prologue-box div{width: 100%;}
	
	#reason .reason-box .reason{width: 100%;}
	#reason .reason-box .reason:nth-child(n+2) {margin-top: 30px;}

	#product .item-box .item{width: 48%;}
	#product a{font-size: 16px; font-weight: bold;}
	#product a:before{content: none;}
	#product .size{font-size: 20px; font-weight: bold; padding: 5px;}
	#product .item-box .item{margin-right: 4%;}
	#product .item-box .item:nth-child(even){margin-right: 0;}
	#product .item-box .item:nth-child(n+3){margin-top: 40px;}
	
}