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

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

.red{color: #f43313;}
.green{color: #007c42;}
.yellow{color: #ffa010;}

#prologue h2,#prologue p,#prologue span,
#idea .arrangerecipe .recipe-list .flex h4,
#idea .arrangerecipe .recipe-list .flex h4 span{
font-family: "ab-kirigirisu", sans-serif;
font-weight: 400;
font-style: normal;}
h3,dt,dd,p,span,a{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 500;
font-style: normal;}



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

.inner{width: 1080px;margin: 0 auto;}
.title{text-align: center; margin-top: 100px;}


.mainbnr{position: relative;}


#prologue{margin-top: 30px;}
#prologue .inner{
	width: 950px;
	text-align: center;
	margin: 0 auto;}
#prologue h2{font-size: 35px; margin-bottom: 65px;}
#prologue p{font-size: 21px; margin-bottom: 100px;}
#prologue .index{width: 800px; margin: 0 auto 100px auto; box-sizing: border-box;padding: 40px; box-shadow: 0px 0px 15px -5px #777777;}
#prologue .index h3{font-size: 23px; text-align: left;}
#prologue .index ul{}
#prologue .index ul li{
	font-size: 18px;
	line-height: 3.0;
	text-align: left;
	border-bottom: dashed 1px;}
#prologue .index ul li a{font-weight: bold;}


#select{position: relative;}
#select:before{
	content: "";
	height: 290px;
	width: 100%;
	background: url("../img/howto-select-back.webp")no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;}
#select:after{
	content: "";
	height: 256px;
	width: 252px;
	background: url("../img/howto-select-title.webp")no-repeat;
	background-size: contain;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);}
#select h3{text-align: center; padding-bottom: 40px;}
#select .p_list{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;}
#select .p_list a{width: 32%;}
#select .p_list a .product img{width: 100%;}
#select .p_list a .product dt{font-size: 18px;}
#select .p_list a .product dd{font-size: 16px;}
#select .p_list a .product p{font-size: 25px; color: #af1e24; text-align: right;}
#select .p_list a .product p span{font-size: 16px; color: #000;}


#idea{position: relative;}
#idea:before{
	content: "";
	height: 290px;
	width: 100%;
	background: url("../img/idea-back.webp")no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;}
#idea:after{
	content: "";
	height: 256px;
	width: 252px;
	background: url("../img/idea-title.webp")no-repeat;
	background-size: contain;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);}
#idea h3{font-size: 28px; text-align: center; margin-bottom: 60px;}
#idea h3 span{border-bottom: solid 4px #ffa010; font-weight: bold; color: #ffa010;}
#idea .newitem {display: flex; justify-content: center; margin-bottom: 60px;}
#idea .newitem .item1{border: solid 1px #c6257a; margin-right: 50px; color: #c6257a;}
#idea .newitem .item1 dd{color: #c6257a; font-size: 23px;}
#idea .newitem .item2{border: solid 1px #ed4b00; color: #ed4b00;}
#idea .newitem .item2 dd{color: #ed4b00; font-size: 23px;}
#idea .newitem .item2 figure{position: relative;}
#idea .newitem .item1,
#idea .newitem .item2{
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
	padding: 20px 40px 20px 40px;
	border-radius: 5px;
	position: relative;}
#idea .newitem .item1:before,
#idea .newitem .item2:before{
	content: "";
	background: url("../img/new-icon.webp")no-repeat;
	width: 65px;
	height: 65px;
	position: absolute;
	top: -32px;
	right: -32px;}
#idea .newitem .item1:after,
#idea .newitem .item2:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 37px 37px;
	position: absolute;
	bottom: 0;
	right: 0px;}
#idea .newitem .item1:after{border-color: transparent transparent #c6257a transparent;}
#idea .newitem .item2:after{border-color: transparent transparent #ed4b00 transparent;}
#idea .explanation .item1,
#idea .explanation .item2{display: flex;justify-content: space-between; margin-bottom: 150px;}
#idea .explanation .item1 .txt,
#idea .explanation .item2 .txt{width: 45%; align-content: center;}
#idea .explanation .item1 .txt h4{font-size: 25px; color: #c6257a;}
#idea .explanation .item2 .txt h4{font-size: 25px; color: #ed4b00;}
#idea .explanation .item1 .txt p{font-size: 17px; margin-bottom: 25px;}
#idea .explanation .item2 .txt p{font-size: 17px; margin-bottom: 25px;}
#idea .explanation .item1 .txt a{font-size: 18px; color: #fff; padding: 5px 15px; background-color: #c6257a; border-radius: 5px; font-weight: 500;}
#idea .explanation .item2 .txt a{font-size: 18px; color: #fff; padding: 5px 15px; background-color: #ed4b00; border-radius: 5px;}
#idea .explanation .item1 .txt a,#idea .explanation .item2 .txt a{display: block; text-align: center;}
#idea .explanation .item1 figure{position: relative;}
#idea .explanation .item1 figure:after{
	content: "";
	height: 300px;
	width: 2500px;
	position: absolute;
	right: -2096px;
	bottom: -18px;
	background-color: #c6257a;
	z-index: -99;}
#idea .explanation .item2 figure{position: relative;}
#idea .explanation .item2 figure:after{
	content: "";
	height: 300px;
	width: 2500px;
	position: absolute;
	left: -2096px;
	bottom: -18px;
	background-color: #ed4b00;
	z-index: -99;}
#idea .arrangerecipe{}
#idea .arrangerecipe .recipe-list{margin-bottom: 140px;}
#idea .arrangerecipe .recipe-list:last-child{margin-bottom: 0;}
#idea .arrangerecipe .recipe-list .flex{display: flex; justify-content: space-between;}
#idea .arrangerecipe .recipe-list .flex .txt{width: 44%; align-content: end;}
#idea .arrangerecipe .recipe-list .flex h4{font-size: 40px; text-align: center; margin-bottom: 20px; position: relative; line-height: 1.3; padding-bottom: 20px;}
#idea .arrangerecipe .recipe-list .flex h4:before{
	content: "";
	border-bottom: dashed 2px #ffa010;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0; left: 0}
#idea .arrangerecipe .recipe-list .flex h4:after{
	content: "";
	border-bottom: dashed 2px #ffa010;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 8px; left: 0}
#idea .arrangerecipe .recipe-list .flex h4 span{position: relative; display: block; letter-spacing: -2px; line-height: 1.2;}
#idea .arrangerecipe .recipe-list .flex h4 span:before{
	content: "";
	background: url("../img/recipe-01-catch.webp")no-repeat;
	position: absolute;
	bottom: 85%;
	right: 0;
	width: 318px;
	height: 105px;}
#idea .arrangerecipe .recipe-list .flex dt{font-size: 18px; position: relative;}
#idea .arrangerecipe .recipe-list .flex dt:after{
	content: "";
	width: 90%;
	height: 1px;
	background-color: #000;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);}
#idea .arrangerecipe .recipe-list .flex dd{font-size: 16px; border-bottom: dashed 1px; line-height: 2.0;}
#idea .arrangerecipe .recipe-list h5{text-align: center; padding: 40px 0;}
#idea .arrangerecipe .recipe-list .list{display: flex; flex-wrap: wrap; justify-content: center; position: relative; padding-bottom: 60px;}
#idea .arrangerecipe .recipe-list .list:after{
	content: "";
	background-color: #ffa010;
	width: 5000px;
	height: -webkit-fill-available;
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -99;}
#idea .arrangerecipe .recipe-list .list .list-item{width: 32%; margin-right: 2%; display: flex; flex-direction: column;}
#idea .arrangerecipe .recipe-list .list .list-item:nth-child(3n){margin-right: 0%;}
#idea .arrangerecipe .recipe-list .list .list-item:nth-child(n+4){margin-top: 60px;}
#idea .arrangerecipe .recipe-list .list .list-item img{width: 100%;}
#idea .arrangerecipe .recipe-list .list .list-item .detail{display: flex; flex-grow: 1; flex-direction: column;}
#idea .arrangerecipe .recipe-list .list .list-item .detail p{text-align: center; color: #fff;}
#idea .arrangerecipe .recipe-list .list .list-item .detail p:first-child{flex-grow: 1; font-size: 18px;}
#idea .arrangerecipe .recipe-list .list .list-item .detail p:last-child{font-size: 25px;}
#idea .arrangerecipe .recipe-list .list .list-item .link{text-align: center; display: block; background-color: #fff; color: #ffa010; padding: 5px 0; margin-top: 10px; border-radius: 5px; font-size: 18px;}


#lineup{position: relative;}
#lineup:before{
	content: "";
	height: 290px;
	width: 100%;
	background: url("../img/lineup-back.webp")no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;}
#lineup:after{
	content: "";
	height: 256px;
	width: 252px;
	background: url("../img/lineup-title.webp")no-repeat;
	background-size: contain;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);}
#lineup h3{font-size: 28px; text-align: center; margin-bottom: 60px;}
#lineup h3 span{border-bottom: solid 4px #2eaf5d; font-weight: bold; color: #2eaf5d;}
#lineup .list{display: flex; flex-wrap: wrap; justify-content: left;}
#lineup .list .list-item{width: 32%; margin:0 2% 50px 0;}
#lineup .list .list-item:nth-child(3n){margin-right: 0%;}
#lineup .list .list-item img{width: 100%;}
#lineup .list .list-item .detal {margin-bottom: 10px; text-align: center;}
#lineup .list .list-item .detal .name{font-size: 18px; color: #2eaf5d;}
#lineup .list .list-item .detal .price{font-size: 25px; color: #2eaf5d;}
#lineup .list .list-item .link{font-size: 18px; color: #fff; display: block; background-color: #2eaf5d; border-radius: 5px; padding: 5px 0; text-align: center}


.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) {
	.pt400{padding-top: 350px;}
	
	h1 img{max-width: 100%;}
	.inner{width: 90% !important;}
	
	#prologue h2{font-size: 30px; margin-bottom: 30px;}
	#prologue .inner{padding-bottom: 50px;}
	#prologue p{font-size: 16px;}
	#prologue .index{width: 100%; padding: 25px; margin: 0 auto 50px auto;}
	#prologue .index h3{font-size: 20px;}
	#prologue .index ul li{font-size: 16px; line-height: 1; padding: 10px 0;}
	
	#select .p_list a{width: 100%;}
	#select .p_list a:nth-child(n+2){margin-top: 30px;}
	#select .p_list a .product dl{padding: 5px 0;}
	#select .p_list a .product p{font-size: 23px;}
	
	#idea .newitem{display: block;}
	#idea .newitem a{width: 90%; margin: 0 auto;}
	#idea .newitem .item1{margin: 0 0 30px 0;}
	#idea .newitem .item1:before, #idea .newitem .item2:before{top: 14px; right: -13px;}
	#idea .explanation .item1 .txt, #idea .explanation .item2 .txt{width: 100%; margin-top: 45px;}
	#idea .explanation .item1{flex-wrap: wrap-reverse;}
	#idea .explanation .item2{flex-wrap: wrap;}
	#idea .explanation .item1 figure img,#idea .explanation .item2 figure img{width: 100%;}
	#idea .explanation .item1 figure:after{height: 196px; width: 1000px; right: -750px; bottom: -18px;}
	#idea .explanation .item2 figure:after{height: 196px; width: 1000px; left: -750px; bottom: -18px;}
	#idea .explanation .item1, #idea .explanation .item2{margin-bottom: 100px;}
	#idea .arrangerecipe .recipe-list .flex{flex-wrap: wrap;}
	#idea .arrangerecipe .recipe-list .reverse{flex-wrap: wrap-reverse;}
	#idea .arrangerecipe .recipe-list .flex img{width: 100%;}
	#idea .arrangerecipe .recipe-list .flex .txt{width: 100%; margin-top: 90px;}
	#idea .arrangerecipe .recipe-list .flex h4{font-size: 36px;}
	#idea .arrangerecipe .recipe-list .flex h4 span:before{width: 250px; height: 83px; background-size: contain;}
	#idea .arrangerecipe .recipe-list .list .list-item{width: 48%;}
	#idea .arrangerecipe .recipe-list .list .list-item:nth-child(odd){margin-right: 4%;}
	#idea .arrangerecipe .recipe-list .list .list-item:nth-child(even){margin-right: 0%;}
	#idea .arrangerecipe .recipe-list .list .list-item:last-child{margin-right: 0%;}
	#idea .arrangerecipe .recipe-list .list .list-item:nth-child(n+3){margin-top: 30px;}
	#idea .arrangerecipe .recipe-list{margin-bottom: 80px;}
	#idea .arrangerecipe .recipe-list h5{padding: 40px 0 10px;}
	
	#lineup .list .list-item{width: 100%;}
	
	
}