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

ul {list-style: none;}
a img:hover{opacity: 0.7;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
a,span,p,dt,dd,h3,h4,button,li{
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;}
h2,h4{
font-family: "ads-yutampo", sans-serif;
font-style: normal;}

.mb40{margin-bottom: 40px;}

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

h2{color: #000;}
.inner{width: 1000px;margin: 0 auto;}


#prologue{margin: 5px 0 100px 0;}
#prologue .inner{
	width: 1000px;
	text-align: center;
	margin: 0 auto;}
#prologue h2{font-size: 30px; letter-spacing: 2px; margin-bottom: 30px;}
#prologue .inner ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 120px;}
#prologue .inner ul li{width: 20%;}
#prologue .inner ul li a{font-size: 18px; font-weight: bold;}
#prologue .inner .catch{margin-bottom: 30px; position: relative;}
#prologue .inner .catch:after{
	content: "";
	background: url("../img/prologue_illust-01.webp")no-repeat;
	width: 230px;
	height: 168px;
	position: absolute;
	right: 0;
	top: 0;}
#prologue .inner .leed{font-size: 18px; line-height: 2; margin-bottom: 50px; font-weight: 500; position: relative;}
#prologue .inner .leed:before{
	content: "";
	background: url("../img/prologue_illust-02.webp")no-repeat;
	width: 192px;
	height: 131px;
	position: absolute;
	left: 0;
	top: 0;}
#prologue .inner .logo{position: relative;}
#prologue .inner .logo:after{
	content: "";
	background: url("../img/prologue_illust-03.webp")no-repeat;
	width: 166px;
	height: 172px;
	position: absolute;
	right: 0;
	bottom: 0;}



.inner h2{font-size: 40px; text-align: center; font-weight: bold; margin-bottom: 60px;}



#select {background-color: #ffdb4c;}
#select .inner{padding: 55px 0;}
#select .inner div{display: flex;}
#select .inner div a{width: 31%;}
#select .inner div a:nth-child(2){margin: 0 3.5%;}
#select .inner div a dt{margin-bottom: 20px;}
#select .inner div a dd{
	font-size: 16px;
	font-weight: 500;
	position: relative;
	box-sizing:border-box;
	padding: 10px;
	text-align: left;
	background-color: #fff;}
#select .inner div a dd:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 calc(20px / 2) 20px calc(20px / 2);
	border-color: transparent transparent #fff transparent;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100%;}



#ankerlist{background: url("../img/recipelist_pattern.webp");}
#ankerlist .inner{padding: 80px 0;}
#ankerlist .inner .flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
#ankerlist .inner .flex a{width: 48%; margin-bottom: 80px; font-weight: 500;}
#ankerlist .inner .flex a dl{position: relative; background-color: #fced00;}
#ankerlist .inner .flex a dd{
	font-size: 30px;
	position: absolute;
	left: 0;
	bottom: -50px;}
#ankerlist .inner .flex a dd span{
	background-color: #357d54;
	padding: 0 10px;
	color: #fff;
	line-height: 1.7;}


#green{
	background-color: #357d54;
	position: relative;
	box-sizing: border-box;
	padding: 100px 0;
	overflow: hidden;}
#green:before{
	content: "";
	background: url("../img/green_backimg-left.webp");
	width: 385px;
	height: 5000px;
	position: absolute;
	top: 0;
	left: -8%;}
#green:after{
	content: "";
	background: url("../img/green_backimg-right.webp");
	width: 429px;
	height: 5000px;
	position: absolute;
	top: 0;
	right: -12%;}
#green .inner .pro-box .main .txt-box a:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent #357d54 transparent;
	position: absolute;
	right: 0;
	bottom: 0;}




#red{
	background:url("../img/red_pattern.webp");
	box-sizing: border-box;
	padding: 100px 0;}
#red .inner .pro-box .main .txt-box a:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent #e5422e transparent;
	position: absolute;
	right: 0;
	bottom: 0;}



#pink{
	background:url("../img/pink_pattern.webp");
	box-sizing: border-box;
	padding: 100px 0;}
#pink .inner .pro-box .main .txt-box a:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent #f190ae transparent;
	position: absolute;
	right: 0;
	bottom: 0;}



#green .inner,#red .inner,#pink .inner{
	background-color: #fff;
	box-sizing: border-box;
	padding: 60px 40px;
	border-radius: 10px;}
#green .inner h2,#red .inner h2,#pink .inner h2{margin-bottom: 10px;}
#green .inner p,#red .inner p,#pink .inner p{width: 80%; margin: 0 auto 80px; font-size: 16px;}
#green .inner .pro-box .main,#red .inner .pro-box .main,#pink .inner .pro-box .main{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#green .inner .pro-box .main .txt-box,#red .inner .pro-box .main .txt-box,#pink .inner .pro-box .main .txt-box{width: 46%; align-content: center;}
#green .inner .pro-box .main .txt-box dl,#red .inner .pro-box .main .txt-box dl,#pink .inner .pro-box .main .txt-box dl{margin-bottom: 30px;}
#green .inner .pro-box .main .txt-box dt,#red .inner .pro-box .main .txt-box dt,#pink .inner .pro-box .main .txt-box dt{margin-bottom: 40px;}
#green .inner .pro-box .main .txt-box dd,#red .inner .pro-box .main .txt-box dd,#pink .inner .pro-box .main .txt-box dd{font-size: 16px;}
#green .inner .pro-box .main .txt-box .name,#red .inner .pro-box .main .txt-box .name,#pink .inner .pro-box .main .txt-box .name{font-weight: bold; font-size: 18px;}
#green .inner .pro-box .main .txt-box a,#red .inner .pro-box .main .txt-box a,#pink .inner .pro-box .main .txt-box a{
	font-size: 18px;
	font-weight: bold;
	background-color: #fced00;
	border-radius: 10px;
	display: block;
	text-align: center;
	padding: 5px 0;
	position: relative;}
#green .inner .pro-box h4,#red .inner .pro-box h4,#pink .inner .pro-box h4{
	font-size: 25px;
	text-align: center;
	margin-bottom: 30px;}
#green .inner .pro-box .sub,#red .inner .pro-box .sub,#pink .inner .pro-box .sub{
	display: flex;
	justify-content: center;}
#green .inner .pro-box .sub a,#red .inner .pro-box .sub a,#pink .inner .pro-box .sub a{width: 228px;}
#green .inner .pro-box .sub a:nth-child(2),#red .inner .pro-box .sub a:nth-child(2),#pink .inner .pro-box .sub a:nth-child(2){margin-left: 20px;}
#green .inner .pro-box .sub a dd,#red .inner .pro-box .sub a dd,#pink .inner .pro-box .sub a dd{font-weight: bold;}
#green .inner .pro-box .sub a .name,#red .inner .pro-box .sub a .name,#pink .inner .pro-box .sub a .name{font-size: 18px; line-height: 1.4;}
#green .inner .pro-box .sub a .price,#red .inner .pro-box .sub a .price,#pink .inner .pro-box .sub a .price{font-size: 22px; text-align: right; color: #e5422e;}
#green .inner .pro-box,#red .inner .pro-box,#pink .inner .pro-box{margin-bottom: 40px;}



#product-all .inner{padding: 100px 0;}
#product-all .inner div{display: flex; flex-wrap: wrap; justify-content: space-between;}
#product-all .inner div a{width: 31%; margin-bottom: 40px;}
#product-all .inner div a figure{margin-bottom: 10px;}
#product-all .inner div a figure img{width: 100%;}
#product-all .inner div a dt{font-size: 20px; text-align: center; line-height: 1; font-weight: bold;}
#product-all .inner div a .detail{padding: 15px 0; font-size: 16px;}
#product-all .inner div a .price{text-align: right; font-size: 20px; color: #e5422e; font-weight: 500;}



#maker{background-color: #69cee8;}
#maker .inner{padding: 100px 0;}
#maker .inner h2{color: #fff;}
#maker .inner div{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px;}
#maker .inner div:nth-child(2n){margin: 50px 0;}
#maker .inner div figure{text-align: left; align-content: center;}
#maker .inner div dl{width: 48%;}
#maker .inner div dt{font-size: 18px; color: #e5422e; margin-bottom: 20px; font-weight: 500;}
#maker .inner div dd{font-size: 16px;}



#link .inner{padding: 100px 0;} 
#link h2{font-size: 30px; position: relative; text-align: center; margin-bottom: 50px;}
#link .flexbox{display: flex; flex-wrap: wrap; justify-content: space-between;}



#coupon{background-color: #ffdb4c; box-sizing: border-box; padding: 100px 0;}
#coupon .inner {
    background-color: #fff;
	background-image: url("../img/recipelist_pattern.webp");
    border-radius: 10px;
    box-sizing: border-box;
    padding: 70px 100px;
    text-align: center;}
#coupon .inner .title {
	font-size: 30px;
	font-weight: bold;
	border-bottom: dashed 1px #fff;
	display: inline-block;
	letter-spacing: 2px;
	margin-bottom: 40px;
	line-height: 2;}
#coupon .inner .title .border-b {border-bottom: dashed 1px;}
#coupon .inner .title .blue {color: #69cee8;}
#coupon .deadline {
	font-size: 28px;
	border-bottom: solid 1px #3c3c43;
	border-top: solid 1px #3c3c43;
	margin: 40px 0;
	padding: 5px 0;
	font-weight: 600;}
#coupon .code {font-size: 42px; background-color: #ffb500; margin-bottom: 30px;}
#coupon .code span {font-weight: bold;}
#coupon h5 {
	font-size: 25px;
	text-align: center;
	position: relative;
	color: #3c3c43;}
#coupon dl {margin-bottom: 40px; text-align: left;}
#coupon dt {font-size: 18px; color: #3c3c43;}
#coupon dd {
	font-size: 16px;
	color: #3c3c43;
	padding-bottom: 20px;}
#coupon .note {text-align: left; font-size: 17px;}




.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%;}
	.inner{width: 90% !important;}
	.inner h2{font-size: 30px; text-align: center; margin-bottom: 30px;}
	.inner h2 .sp{display: inline-block !important;}
	.inner h2 img{width: 80%;}
	
	#prologue {margin: 10px 0 30px 0;}
	#prologue h2{font-size: 20px; margin-bottom: 20px;}
	#prologue .inner{padding-bottom: 50px;}
	#prologue .inner .leed{font-size: 16px; text-align: left; margin-bottom: 20px;}	
	#prologue .inner ul li {width: 48%;}
	#prologue .inner ul li a{font-size: 16px;}
	#prologue .inner .catch img{width: 100%;}
	#prologue .inner .catch:after {
	width: 170px;
	height: 105px;
	background-size: contain;
	right: -34px;
	top: -105px;}
	#prologue .inner .logo:after{
		width: 132px;
		height: 128px;
		bottom: -126px;
		background-size: contain;}
	#prologue .inner .leed:before{content: none;}
	#prologue .inner ul li:nth-child(n+3){margin-top: 10px;}

	#link h2{font-size: 25px;}
	#link .flexbox a{width: 100%;}
	#link .flexbox a img{width: 100%;}

	#select .inner div{display: block;}
	#select .inner div a{width: 100%;}
	#select .inner div a dt{text-align: center;}
	
	#ankerlist .inner .flex a{width: 100%;}
	#ankerlist .inner .flex a:nth-child(n+2){margin-top: 70px;}
	#ankerlist .inner .flex a img{width: 100%;}
	#ankerlist .inner .flex a dd{font-size: 27px;}
		
	#green{padding: 60px 0; z-index: 1;}
	#green:before{
		left: -57%;
		z-index: -1;}
	#green:after{
		right: -60%;
		z-index: -1;}

	#green .inner, #red .inner, #pink .inner{padding: 30px 20px;}
	#green .inner p, #red .inner p, #pink .inner p{width: 100%;}
	#green .inner .pro-box .main .txt-box, #red .inner .pro-box .main .txt-box, #pink .inner .pro-box .main .txt-box{width: 100%;}
	#green .inner .pro-box .main h3 img, #red .inner .pro-box .main h3 img, #pink .inner .pro-box .main h3 img{width: 100%;}
	#green .inner .pro-box .sub, #red .inner .pro-box .sub, #pink .inner .pro-box .sub{flex-wrap: wrap;}
	#green .inner .pro-box .main .txt-box dt, #red .inner .pro-box .main .txt-box dt, #pink .inner .pro-box .main .txt-box dt{text-align: center;}
	#green .inner .pro-box .main .txt-box dt .sp, #red .inner .pro-box .main .txt-box dt .sp, #pink .inner .pro-box .main .txt-box dt .sp{display: inline-block !important;}
	#green .inner .pro-box .main, #red .inner .pro-box .main, #pink .inner .pro-box .main{margin-bottom: 60px;}
	
	#product-all .inner{padding: 60px 0;}
	#product-all .inner div{flex-wrap: wrap;}
	#product-all .inner div a{width: 47%;}
	
	#maker .inner{padding: 60px 0;}
	#maker .inner div{padding: 30px;}
	#maker .inner div:nth-child(2n){margin: 30px 0;}
	#maker .inner div img{width: 100%;}
	#maker .inner div dl{width: 100%;}
	
	#link .inner{padding: 60px 0;}
	#link h2{margin-bottom: 30px;}
	
	#coupon .inner{padding: 30px 20px;}
	#coupon .inner .title{font-size: 22px;}
	#coupon .inner figure img{width: 100%;}
	#coupon .deadline{font-size: 25px;}
	#coupon .code{font-size: 30px;}
}