@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mb30{margin-bottom: 30px;}

.pc_v{display: block;}
.sp_v{display: none;}

ul {list-style: none;}
dl figure{display: flex;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
.swiper a:hover img{
	transform: scale(1.1); /* 拡大 */}

a{text-decoration: none;}

#select .catch,.product .txt .leed,.product .txt a,#takeout_item h3,#takeout_item h3 span,#takeout_item a,#cook div dl dt,#cook div dl p,#cook div dd,#cook div dl p span{
font-family: "zen-kaku-gothic-antique", sans-serif;
font-weight: 700;
font-style: normal;}
.product .txt .price,.product .txt .price span,.product .range .arrange ul li,.product .range .arrange ul li span{font-family: "zen-kaku-gothic-antique", sans-serif;
font-weight: 900;
font-style: normal;}
#select .select-btn a .txt p{
font-family: "sictake-kizami", sans-serif;
font-weight: 400;
font-style: normal;}
#select .select-btn a .txt h2,.product .txt h2,.product .range  h3,.product .range  h3 span{
font-family: "vdl-logojrblack", sans-serif;
font-weight: 900;
font-style: normal;}



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

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


#select .catch{font-size: 30px; text-align: center; padding: 80px 0 40px;}
#select .select-btn a{color: #fff; text-align: center; box-sizing: border-box; height: 200px; position: relative; overflow-x: hidden;}
#select .select-btn a .txt{text-align: left; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 30%; line-height: 1.3;}
#select .select-btn a .txt p{font-size: 25px; color: #fff;}
#select .select-btn a .txt h2{font-size: 40px; color: #fff;}
#select .select-btn .green{
	display: block;
	background: url("../img/select-green-back.webp")no-repeat;}
#select .select-btn .green:after{
	content: "";
	background: url("../img/select-green-cut.webp")no-repeat;
	width: 197px;
	height: 186px;
	position: absolute;
	right: 0;
	top: 0;}
#select .select-btn .green:before{
	content: "";
	background: url("../img/select-green.webp")no-repeat;
	width: 407px;
	height: 155px;
	position: absolute;
	left: -20%;
	top: 50%;
	transform: translateY(-50%);}
#select .select-btn .green:hover:before{
	left: -10%;
	transition: 0.3s;}
#select .select-btn .red{
	display: block;
	border-top: solid 2px #fff;
	background: url("../img/select-red-back.webp")no-repeat;}
#select .select-btn .red:after{
	content: "";
	background: url("../img/select-red-cut.webp")no-repeat;
	width: 197px;
	height: 186px;
	position: absolute;
	right: 0;
	top: 0;}
#select .select-btn .red:before{
	content: "";
	background: url("../img/select-red.webp")no-repeat;
	width: 408px;
	height: 155px;
	position: absolute;
	left: -20%;
	top: 50%;
	transform: translateY(-50%);} 
#select .select-btn .red:hover:before{
	left: -10%;
	transition: 0.3s;}
#select .select-btn .blue{
	display: block;
	background: url("../img/select-black-back.webp")no-repeat;
	border-top: solid 2px #fff;}
#select .select-btn .blue:after{
	content: "";
	background: url("../img/select-black-cut.webp")no-repeat;
	width: 197px;
	height: 186px;
	position: absolute;
	right: 0;
	top: 0;}
#select .select-btn .blue:before{
	content: "";
	background: url("../img/select-black.webp")no-repeat;
	width: 408px;
	height: 167px;
	position: absolute;
	left: -20%;
	top: 50%;
	transform: translateY(-50%);}
#select .select-btn .blue:hover:before{
	left: -10%;
	transition: 0.3s;}


.product .inner{display: flex; flex-wrap: wrap; justify-content: space-between;}
.product figure{width: 50%; position: relative;}
.product .txt{width: 45%;}
.product .txt h2{font-size: 40px; color: #fff000; position: relative;}
.product .txt .leed{font-size: 16px; margin: 20px 0 30px;}
.product .txt .price{font-size: 50px; color: #fff; line-height: 1; margin-bottom: 30px; background: linear-gradient(transparent 80%, #fca124 70%); display: inline-block;}
.product .txt .price span{font-size: 50%; color: #fff;}
.product .txt .detail{font-size: 18px; background-color: #e52c20; padding: 15px 0;}
.product .txt .takeout{font-size: 16px; background-color: #2c8822; margin-top: 20px; padding: 10px 0; margin-bottom: 30px;}
.product .txt p,.product .txt a{color: #fff;}
.product .txt a{display: block; border: solid 2px #fff; text-align: center;}

.product .range{width: 1080px; margin: 50px auto; background-color: #fff; padding: 20px; box-sizing: border-box;}
.product .range .range_inner{padding: 20px;}
.product .range  h3{font-size: 31px; text-align: center; margin-bottom: 20px;}
.product .range  h3 span{color: #e52c20;}
.product .range .arrange{display: flex; flex-wrap: wrap; justify-content: space-between;}
.product .range .arrange figure{width: 55%; background: none; text-align: center;}
.product .range .arrange ul{width: 35%;}
.product .range .arrange ul li{font-size: 22px; line-height: 1; margin-bottom: 30px; display: inline-block; position: relative;}
.product .range .arrange ul li .yellow{background: linear-gradient(transparent 70%, #fff000 70%);}
.product .range .arrange ul li .mini{font-size: 70%;}
.product .range .arrange ul li:first-child:after{
	content: "";
	background: url(../img/point1.webp) no-repeat;
	width: 59px;
	height: 59px;
	position: absolute;
	left: -65px;
	top: 50%;
	transform: translateY(-50%);}
.product .range .arrange ul li:nth-child(2):after{
	content: "";
	background: url(../img/point2.webp) no-repeat;
	width: 59px;
	height: 59px;
	position: absolute;
	left: -65px;
	top: 50%;
	transform: translateY(-50%);}
.product .range .arrange ul li:nth-child(3):after{
	content: "";
	background: url(../img/point3.webp) no-repeat;
	width: 59px;
	height: 59px;
	position: absolute;
	left: -65px;
	top: 50%;
	transform: translateY(-50%);}

#green{
	width: 100%;
	margin: 0;
	padding: 80px 0 150px;
	position: relative;
	top: 100px;
	overflow: hidden;}
#green:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #658e26 !important;
	background: url("../img/back.webp")no-repeat;
	background-size: cover;	
	transform: skewY(-3deg) translateY(-90px);
	z-index: -1;}
#green figure{background: url("../img/matcha-before.webp")no-repeat;}
#green .range .range_inner{border: solid 2px #658e26;}
#green .txt h2:after{content: "";background: url(../img/new.webp)no-repeat; width: 115px; height: 115px; position: absolute; left: 105%; bottom: 0px;}

#red{
	width: 100%;
	margin: 0;
	padding: 80px 0;
	position: relative;
	top: 5px;}
#red:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #ff7d7d !important;
	background: url("../img/back.webp")no-repeat;
	background-size: cover;	
	transform: skewY(-3deg);
	z-index: -1;}
#red figure{background: url("../img/apple-before.webp")no-repeat; background-size: contain;}
#red .range .range_inner{border: solid 2px #ee7e76;}
#red .txt h2:after{content: "";background: url(../img/apple-icon.webp)no-repeat; width: 93px; height: 83px; position: absolute; left: 105%; bottom: 0px;}

#blue{
	width: 100%;
	margin: 0;
	padding: 180px 0 80px;
	position: relative;
	top: -90px;
	overflow: hidden;}
#blue:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #00b4bf !important;
	background: url("../img/back.webp")no-repeat;
	background-size: cover;	
	transform: skewY(-3deg) translateY(90px);
	z-index: -1;}
#blue .range .range_inner{border: solid 2px #00b4bf;}
#blue .txt h2:after{content: "";background: url(../img/banana-icon.webp)no-repeat; width: 122px; height: 90px; position: absolute; left: 105%; bottom: 0px;}


#cook div dl{border-bottom: solid 1px #000; display: flex; flex-wrap: wrap; box-sizing: border-box;}
#cook div dl dt{font-size: 20px; color: #fff; width: 150px; align-content: center; text-align: center;}
#cook div dl dd{font-size: 17px; margin-left: 20px; line-height: 1; padding: 15px 0;}
#cook div dl p{font-size: 17px;}
#cook div dl .bold{font-size: 19px; padding-bottom: 5px;}
#cook .age{border-top: solid 1px #000;}
#cook .age dt{background-color: #cf5c00;}
#cook div .age .bold span{
	color: #cf5c00;
	font-weight: 900;
	text-decoration: wavy underline; /* 波線を指定 */
	text-decoration-color: #cf5c00; /* 波線の色を指定 */}
#cook .renji dt{background-color: #e52c20;}
#cook div .renji .bold span{
	color: #e52c20;
	font-weight: 900;
	text-decoration: wavy underline; /* 波線を指定 */
	text-decoration-color: #e52c20; /* 波線の色を指定 */}
#cook .obun dt{background-color: #2c8822;}
#cook div .obun .bold span{color: #2c8822;}



#takeout_item{margin-top: 60px;}
#takeout_item .inner{
	border:solid 8px #2c8822;
	background-color: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 40px;}
#takeout_item .inner .title{position: relative; text-align: center;}
#takeout_item .inner .title:before{
	content: "";
	background: url("../img/takeout_item_icon.webp");
	width: 94px;
	height: 139px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 130px;}
#takeout_item .inner h3{
	font-size: 23px;
	color: #2c8822;
	text-align: left;
	border-bottom: solid 1px #2c8822}
#takeout_item .inner h3 span{font-size: 70%; color: #000;}
#takeout_item .inner .second{margin-top: 40px;}
#takeout_item .inner .bag{display: flex; margin-top: 20px;}
#takeout_item .inner .bag .pro{
	width: 30%;
	border: dashed 2px #2c8822;
	align-content: center;
	box-sizing: border-box;
	padding: 30px;}
#takeout_item .inner .bag .pro figure{text-align: center;}
#takeout_item .inner .bag .pro p{margin: 10px 0 5px 0;}
#takeout_item .inner .bag .pro a{color: #fff; display: block; text-align: center; background-color: #2c8822; padding: 5px 0; border-radius: 5px;}
#takeout_item .inner .bag .pro:nth-child(n+2){margin-left: 20px;}
#takeout_item .inner .bag .pro_fix{
	position: relative;
	padding-left: 90px;}
#takeout_item .inner .bag .pro_fix:before{
	content: "";
	background: url("../img/arrow.webp");
	width: 46px;
	height: 66px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;}
#takeout_item .inner .bag p,#takeout_item .inner .bag a{font-weight: bold; font-size: 18px;}
	

.spotlist_back{
	margin: 100px 0 80px;
	text-align: center;}
.spotlist_back a{
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;
	background-color: #fff;}

footer{margin: 0 !important;}

@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	.pc_v{display: none;}
	.sp_v{display: block;}

	h1 img{max-width: 100%;}
	.inner{
		width: 90%;
		margin: 0 auto;}
	.inner img{max-width: 100%;}
	
	
	#select .catch{font-size: 25px;}
	#select .select-btn a .txt{width: 95%; transform: unset; top: inherit; left: 10px; bottom: 10px;}
	#select .select-btn a .txt h2{font-size: 35px;}
	#select .select-btn a .txt p{font-size: 18px;}
	#select .select-btn a{height: 360px;}
	#select .select-btn .green,
	#select .select-btn .red,
	#select .select-btn .blue{background-size: cover;}
	
	.product figure{width: 100%;}
	.product .txt{width: 100%;}
	.product .txt h2{font-size: 38px;}
	.product .range{width: 95%; padding: 10px;}
	.product .range h3{font-size: 22px;}
	.product .range .arrange figure{width: 100%;}
	.product .range .arrange figure img{width: 100%;}
	.product .range .arrange ul{width: 100%; text-align: right;}
	.product .range .arrange ul li{font-size: 17px; width: 80%; text-align: left; margin-bottom: 20px;}
	.product .range .arrange ul li:first-child:after{width: 50px; height: 50px; background-size: contain;}
	.product .range .arrange ul li:nth-child(2):after{width: 50px; height: 50px; background-size: contain;}
	.product .range .arrange ul li:nth-child(3):after{width: 50px; height: 50px; background-size: contain;}
	.product .range .arrange ul li:nth-child(3){margin: 0;}
	
	#cook{margin-bottom: 80px;}
	#cook div dl dt{width: 100%;}
	#cook div dl{border-bottom: unset; border-left: solid 1px #000; border-right: solid 1px #000;}
	#cook div dl p{font-size: 16px; line-height: 1.4;}
	#cook div dl dd{margin: 0; padding: 10px;}
	#cook .age{border-top: unset;}
	#cook .obun{border-bottom: solid 1px #000;}
	
	#takeout_item{margin-top: 0;}
	#takeout_item .inner .title{margin-bottom: 20px;}
	#takeout_item .inner{padding: 25px;}
	#takeout_item .inner .title:before{content: none;}
	#takeout_item .inner .bag{display: block;}
	#takeout_item .inner .bag .pro{width: 100%; box-sizing: border-box; padding: 20px;}
	#takeout_item .inner .bag .pro:nth-child(n+2){margin: 20px 0 0 0;}
	#takeout_item .inner .bag .pro_fix{padding: 80px 0 0 0; text-align: center;}
	#takeout_item .inner .bag .pro_fix:before {
    content: "";
    background: url(../img/arrow_down.webp) no-repeat;
    width: 66px;
    height: 46px;
    position: absolute;
	top: 20px;
    left: 50%;
    transform: translateX(-50%);}
}