@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,.leed,#food h3,#food h3 span,#food .supplement p,#food .swiper-slide h4,#food .swiper-slide ul li,#prologue .txt p,#scene .scene-box .scene-item dd{
/*-M-*/
font-family: "zen-kaku-gothic-antique", sans-serif;
font-weight: 500;
font-style: normal;}
/*-B-*/
h2,
#select .product-area .product ul li,
#select .product-area .product h4,#select .product-area .product .price,
#select .product-area .product .yellow,#select .product-area .product .green,
#sample .sample-box div h3,#sample .sample-box div p,#sample h4,#sample h4 span,
#food .supplement p span,
.spotlist_back a{
font-family: "zen-kaku-gothic-antique", sans-serif;
font-weight: 700;
font-style: normal;}

/*-maruB-*/
#scene .scene-box .scene-item dt{font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;}
/*-maruM-*/
#select li a span,#select h3,#select .select-btn li a p{
font-family: "zen-maru-gothic", 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;}
h2{font-size: 30px; color: #3e1c00; text-align: center; margin-bottom: 25px;}
.leed{font-size: 16px; text-align: center; width: 60%; margin: 0 auto; padding-bottom: 50px; line-height: 1.8; color: #3e1c00;}



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


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



#prologue{margin-bottom: 160px;}
#prologue .inner{max-width: 1030px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#prologue figure{margin: 0;}
#prologue figure img{width: 100%;}
#prologue .txt{width: 50%;}
#prologue .txt h2{font-size: 35px; line-height: 1.7; letter-spacing: 1px; margin: 0 0 20px; color: #000; text-align: left;}
#prologue .txt p{font-size: 18px; line-height: 1.9;}



#scene{background-color: #f1e646; position: relative; margin-bottom: 160px;}
#scene:before{
	content: "";
	background: url("../img/wave-top.svg")no-repeat;
	width: 100%;
	height: 300px;
	position: absolute;
	bottom: 77%;
	z-index: -2;
	background-size: cover;}
#scene:after{
	content: "";
	background: url("../img/wave-bottom.svg")no-repeat;
	width: 100%;
	height: 300px;
	position: absolute;
	bottom: -100px;
	z-index: -2;
	background-size: cover;}
#scene figure{margin: 0 0 30px;}
#scene figure img{width: 100%;}
#scene .scene-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
#scene .scene-box .scene-item{width: 48.5%; background-color: #fff; border-radius: 50px; box-sizing: border-box; padding: 30px;}
#scene .scene-box .scene-item:nth-child(n+3){margin-top: 3%;}
#scene .scene-box .scene-item dt{font-size: 25px; padding-bottom: 10px; color: #3e1c00;}
#scene .scene-box .scene-item dd{font-size: 16px; color: #3e1c00;}



#select{margin-bottom: 160px;}
#select .select-btn{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;}
#select .select-btn li{width: 23%; box-shadow: 0px 0px 29px 5px rgb(17 17 26 / 0.08); border-radius: 10px; text-align: center; transition: background-color .3s ease-out,transform .3s ease-out;}
#select .select-btn li:hover{transform: translateY(-6px);}
#select .select-btn li a{box-sizing: border-box; padding: 20px; display: inline-block;}
#select .select-btn li a p{font-size: 23px; color: #29b363; padding-bottom: 10px;}
#select .select-btn li a span{font-size: 18px; margin-bottom: 25px; display: inline-block;}
#select .select-btn li a figure{position: relative; padding-bottom: 50px;}
#select .select-btn li a figure:after{
	content: "";
	background: url("../img/arrow_down.svg")no-repeat;
	width: 25px;
	height: 25px;
	background-size: contain;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);}
#select .select-btn li a figure img{width: 100%;}
#select h3{font-size: 23px; color: #29b363; position: relative;overflow-x: hidden; margin-bottom: 30px;}
#select h3:after{content: ""; width: 100%; height: 1px; background-color: #29b363; position: absolute; top: 50%;transform: translateY(50%);}
#select .product-area{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;}
#select .product-area:last-child{margin-bottom: 0;}
#select .product-area .product{width: 32%; display: flex; flex-direction: column;}
#select .product-area .product figure{margin-bottom: 10px; position: relative;}
#select .product-area .product figure img{width: 100%;}
#select .product-area .product figure .ura{position: absolute; top: 0; left: 0; opacity: 0;}
#select .product-area .product:hover .ura{opacity: 1;}
#select .product-area .product:hover .omote{opacity: 0; transition: opacity .4s;}
#select .product-area .product ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
#select .product-area .product ul li{width: 49%; color: #fff; font-size: 18px; text-align: center;}
#select .product-area .product ul li:first-child{background-color: #ff7233;}
#select .product-area .product ul li:nth-child(2){background-color: #29b363;}
#select .product-area .product .gray li:first-child{background-color: #ced8d8; color: #3a6363;}
#select .product-area .product h4{font-size: 18px; margin-bottom: 10px; color: #3e1c00; flex-grow: 1;}
#select .product-area .product .price{font-size: 20px; margin-bottom: 20px; color: #3e1c00;}
#select .product-area .product a{font-size: 20px; text-align: center; display: block; border-radius: 5px; padding: 5px 0; position: relative;}
#select .product-area .product .yellow{background-color: #f1e646; color: #3e1c00; margin-bottom: 10px;}
#select .product-area .product .green{border: solid 1px #29b363; color: #29b363; font-size: 18px;}
#select .product-area .product .green:hover{background-color:#29b363; color: #fff;}
#select .product-area .product .yellow::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 20px;
  background-color: #3e1c00;}
#select .product-area .product .yellow::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #f1e646;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;}
#select .product-area .product .green::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 20px;
  background-color: #29b363;}
#select .product-area .product .green::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;}
#select .product-area .product .green:hover:before {background-color: #fff;}
#select .product-area .product .green:hover:after {border-left: 9px solid #29b363;}



#sample{background-color: #f1e646; position: relative; margin-bottom: 160px;}
#sample:before{
	content: "";
	background: url("../img/wave-top.svg")no-repeat;
	width: 100%;
	height: 130px;
	position: absolute;
	bottom: 90%;
	z-index: -2;
	background-size: cover;}
#sample:after{
	content: "";
	background: url("../img/wave-bottom.svg")no-repeat;
	width: 100%;
	height: 300px;
	position: absolute;
	bottom: -100px;
	z-index: -2;
	background-size: cover;}
#sample .sample-box{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px;}
#sample .sample-box div{width: 49%; background-color: #fff; border-radius: 5px; box-sizing: border-box; padding: 30px; text-align: center;}
#sample .sample-box div h3{font-size: 20px; color: #3e1c00; border-bottom: solid 1px #ecdf3f; margin-bottom: 20px; text-align: left;}
#sample .sample-box div figure{margin-bottom: 30px;}
#sample .sample-box div figure img{width: 100%;}
#sample .sample-box div p{font-size: 30px; color: #3e1c00; background: linear-gradient(transparent 70%, #fff000 70%); display: inline-block;}
#sample h4{text-align:center; font-size: 32px;}
#sample h4 span{background-color: #14a138; color: #fff; padding: 0 10px;}



#food .supplement{border: solid 2px #14a138; border-radius: 15px; box-sizing: border-box; padding: 30px; font-size: 18px; margin-bottom: 80px;}
#food .supplement .kan{position: inherit; color: #14a138;}
#food .supplement .han{position: inherit; color: #14a138;}
#food .swiper-slide{padding-top: 30px; position: relative;}
#food .swiper-slide h4{font-size: 16px; min-height: 4em;}
#food .swiper-slide .price{font-size: 18px;}
#food .swiper-slide figure{margin-bottom: 15px; overflow: hidden;}
#food .swiper-slide img{width: 100%; transition: transform 0.6s ease;}
#food a:hover img{transform: scale(1.1);}
#food .swiper-slide ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#food .swiper-slide ul li{width: 48%; font-size: 16px; color: #fff; text-align: center;}
#food .swiper-slide ul li:nth-child(n+3){margin-top: 10px;}
#food .swiper-slide ul .boil{background-color:#29b3ce;}
#food .swiper-slide ul .niru{background-color:#a172b0;}
#food .swiper-slide ul .kanetsu{background-color:#e22597;}
#food .swiper-slide ul .oven{background-color:#2c652f;}
#food .swiper-slide ul .reizouko{background-color:#2988ce;}
#food .swiper-slide ul .yaki{background-color:#ff3633;}
#food .swiper-slide ul .age{background-color:#c4591d;}
#food .swiper-slide ul .mushi{background-color:#f9ae3e;}
#food .swiper-slide ul .renji{background-color:#ff7233;}
#food .swiper-slide ul .ryusui{background-color:#29c4ce;}
#food .swiper-slide ul .shizen{background-color: #14a138;}
#food .swiper-slide ul .suchikon{background-color: #a1a1b0;}
#food .swiper{margin-bottom: 50px;} 
.swiper-button-next:after, .swiper-button-prev:after{
	background-color: #14a138;
	width: 50px;
	height: 50px;
	border-radius: 80px;
	text-align: center;
	font-size: 25px !important;
	align-content: center;
	font-weight: bold;}
.swiper-button-next, .swiper-button-prev{
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 20 * 27) !important;
	color: #fff !important;}
.swiper span{position: absolute; top: 0; left: 0;}
#food span img{max-height: 20px;}
#food .ranking-box{text-align: center; position: relative;}
#food .ranking-box:before{
	content: "";
	width: 100%;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;}
#food h3{text-align: center; font-size: 23px; margin-bottom: 45px; display: inline-block; background-color: #fff; padding: 0 20px;}
#food h3 span{color: #fff; background-color: #14a138; padding: 0 5px;}
#food a{display: flex; flex-direction: column;}



.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 (max-width: 768px) {
	.pc-v{display: none;}
	.sp-v{display: block;}

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

	#prologue{margin-bottom: 80px;}
	#prologue .txt{width: 100%;}
	#prologue .txt h2{font-size: 25px;}
	#prologue figure{width: 100%; text-align: center;}
	#prologue figure img{max-width: 100%; width: auto;}
	
	.leed{width: 100%;}
	#scene:before{background-size: contain; top: -50px; height: 150px;}
	#scene:after{background-size: contain; bottom: -150px; height: 150px;}
	#scene .scene-box .scene-item{width: 100%;}
	#scene .scene-box .scene-item:nth-child(n+2){margin-top: 20px;}
	#select .select-btn li{width: 48%;}
	#select .select-btn li:nth-child(n+3){margin-top: 20px;}
	#select .product-area .product{width: 49%;}
	#select .product-area .product:nth-child(n+3){margin-top: 40px;}
	#select .select-btn li a{display: flex; flex-direction: column; height: 100%;}
	#select .select-btn li a span{flex-grow: 1;}
	#select .product-area .product h4{font-size: 20px; line-height: 1.5;}
	#select .product-area .product .price{font-size: 23px;}
	
	#scene .scene-box .scene-item dt{font-size: 21px;}
	
	#sample{margin-bottom: 100px;}
	#sample:before{background-size: contain; top: -50px; height: 150px;}
	#sample:after{background-size: contain; bottom: -150px; height: 170px;}
	#sample .sample-box div{width: 100%;}
	#sample .sample-box div p{font-size: 23px;}
	#sample h4{font-size: 25px;}
	
	#food .swiper-slide h4{min-height: 6em;}
	#food .swiper-slide img{width: 100%;}
	#food .supplement{font-size: 16px;}
	/*-.swiper-slide{width: 50% !important;}-*/
}
@media (max-width: 576px) {
	#select .product-area .product{width: 100%;}
	#select .product-area .product:nth-child(n+2){margin-top: 40px;}
}