@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.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

/*----fonttype----*/
.F-base *{
	font-family: zen-maru-gothic, sans-serif;
	font-style: normal;
	font-weight: 600;}

*{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 500;
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: 30px; color: #7c3100; text-align: center; margin-bottom: 30px;}



nav{background-color: #f5ece5; margin-bottom: 80px;}
nav .inner{padding: 60px 0; text-align: center;}
nav h2{display: inline-block;text-align: center; font-size: 32px; color: #000; margin-bottom: 30px; background:linear-gradient(transparent 60%, #ffff3d 60%);}
nav h2 span{-webkit-text-emphasis: filled; text-emphasis: filled;}
nav ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
nav ul li{width: 50%;}
nav ul li:nth-child(n+3){margin-top: 10px;}
nav ul li a{width: 100%;}
nav ul li a img{width: 100%; position: relative; top: 0;}
nav ul li a img:hover{top:-10px; transition: 0.3s;}



.common{margin-bottom: 120px;}
.common h2{text-align: center; margin-bottom: 60px; font-size: 30px;}
.common h2 span{position: relative;}
.common .product-area .product{display: flex; flex-wrap: wrap; justify-content: space-between;}
.common .product-area .product:nth-child(n+2){margin-top: 40px;}
.common .product-area .product figure{width: 48%;}
.common .product-area .product figure img{width: 100%;}
.common .product-area .product .txt{width: 50%;}
.common .product-area .product .txt .maker{font-size: 16px; margin-bottom: 10px;}
.common .product-area .product .txt h3{font-size: 25px; margin-bottom: 15px; line-height: 1.4;}
.common .product-area .product .txt .detail{font-size: 16px;}
.common .product-area .product .txt .price{font-size: 33px; color: #e22c00; margin-bottom: 10px;}
.common .product-area .product .txt a{font-size: 18px; color: #fff; background-color: #e22c00; width: 100%; display: inline-block; border-radius: 5px; text-align: center; padding: 7px 0;}

#product01 h2 span{color: #d97c00;}
#product01 h2 span:before{
	content: "";
	background: url("../img/agemono-before.webp")no-repeat;
	width: 16px;
	height: 28px;
	position: absolute;
	top: 0;
	left: -27px;}
#product01 h2 span:after{
	content: "";
	background: url("../img/agemono-after.webp")no-repeat;
	width: 16px;
	height: 29px;
	position: absolute;
	top: 0;
	right: -20px;}
#product01 h3 span{color: #d97c00;}
#product01 .product-area .product .txt .h3 span{color: #d97c00;}

#product02 h2 span{color: #e22c00;}
#product02 h2 span:before{
	content: "";
	background: url("../img/hoshi-01.webp")no-repeat;
	width: 40px;
	height: 43px;
	position: absolute;
	top: 0;
	left: -50px;}
#product02 h2 span:after{
	content: "";
	background: url("../img/hoshi-02.webp")no-repeat;
	width: 40px;
	height: 43px;
	position: absolute;
	top: 0;
	right: -50px;}
#product02 h3 span{color: #e22c00;}
#product02 .product-area .product .txt .h3 span{color: #e22c00;}

#product03 h2 span{color: #009c00;}
#product03 h2 span:before{
	content: "";
	background: url("../img/syusai.webp")no-repeat;
	width: 38px;
	height: 57px;
	position: absolute;
	top: 0;
	left: -60px;}
#product03 h2 span:after{
	content: "";
	background: url("../img/fukusai.webp")no-repeat;
	width: 32px;
	height: 62px;
	position: absolute;
	top: 0;
	right: -50px;}
#product03 h3 span{color: #009c00;}
#product03 .product-area .product .txt .h3 span{color: #009c00;}

#product04 h2 span{color: #0079c2;}
#product04 h2 span:before{
	content: "";
	background: url("../img/sakana-01.webp")no-repeat;
	width: 52px;
	height: 53px;
	position: absolute;
	top: 0;
	left: -65px;}
#product04 h2 span:after{
	content: "";
	background: url("../img/sakana-02.webp")no-repeat;
	width: 52px;
	height: 44px;
	position: absolute;
	top: 0;
	right: -65px;}
#product04 h3 span{color: #0079c2;}
#product04 .product-area .product .txt .h3 span{color: #0079c2;}

#product05 h2 span{color: #e22c00;}
#product05 h2 span:before{
	content: "";
	background: url("../img/fukuro-01.webp")no-repeat;
	width: 53px;
	height: 61px;
	position: absolute;
	top: 0;
	left: -67px;}
#product05 h2 span:after{
	content: "";
	background: url("../img/fukuro-02.webp")no-repeat;
	width: 43px;
	height: 47px;
	position: absolute;
	top: 0;
	right: -60px;}
#product05 h3 span{color: #e22c00;}
#product05 .product-area .product .txt .h3 span{color: #e22c00;}

#product06 h2 span{color: #009c00;}
#product06 h2 span:before{
	content: "";
	background: url("../img/yasai-01.webp")no-repeat;
	width: 40px;
	height: 57px;
	position: absolute;
	top: 0;
	left: -50px;}
#product06 h2 span:after{
	content: "";
	background: url("../img/yasai-02.webp")no-repeat;
	width: 36px;
	height: 47px;
	position: absolute;
	top: 0;
	right: -50px;}
#product06 h3 span{color: #009c00;}
#product06 .product-area .product .txt .h3 span{color: #009c00;}

#product07 h2 span{color: #e56b97;}
#product07 h2 span:before{
	content: "";
	background: url("../img/momo.webp")no-repeat;
	width: 46px;
	height: 44px;
	position: absolute;
	top: 0;
	left: -67px;}
#product07 h2 span:after{
	content: "";
	background: url("../img/banana.webp")no-repeat;
	width: 42px;
	height: 39px;
	position: absolute;
	top: 17px;
	right: -47px;}
#product07 h3 span{color: #e56b97;}
#product07 .product-area .product .txt .h3 span{color: #e56b97;}

#product08 h2 span{color: #a90095;}
#product08 h2 span:before{
	content: "";
	background: url("../img/energy.webp")no-repeat;
	width: 22px;
	height: 35px;
	position: absolute;
	top: 0;
	left: -40px;}
#product08 h2 span:after{
	content: "";
	background: url("../img/energy.webp")no-repeat;
	width: 22px;
	height: 35px;
	position: absolute;
	top: 0;
	right: -40px;}
#product08 h3 span{color: #a90095;}
#product08 .product-area .product .txt .h3 span{color: #a90095;}




.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 auto;}
	#prologue .inner{padding: 30px 0;}
	#prologue .inner h2{margin-bottom: 20px;  font-size: 23px;}
	#prologue .inner img{width: 100%;}
	
	
	nav .inner{padding: 40px 0;}
	nav h2{margin-bottom: 20px; font-size: 25px; display: inline;}
	nav h2 span{text-emphasis:none;}
	nav ul{justify-content: space-between; margin-top: 30px;}
	nav ul li{width: 100%;}
	nav ul li:nth-child(n+2){margin-top: 10px;}
	
	
	.common .product-area .product figure{width: 100%;}
	.common .product-area .product .txt{width: 100%;}
	
	#product04 h2 span:before {content: ""; position: absolute; top: -50px; left: 25%;}
	#product04 h2 span:after {content: ""; position: absolute; top: -42px; right: 37%;}
	#product05 h2 span:before {content: ""; position: absolute; top: -63px; left: 25%;}
	#product05 h2 span:after {content: ""; position: absolute; top: -48px; right: 36%;}
	#product06 h2 span:before {content: ""; position: absolute; top: -71px; left: 35%;}
	#product06 h2 span:after {content: ""; position: absolute; top: -60px; right: 40%;}
	
}