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

ul {list-style: none;}
a img:hover{opacity: 0.7;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
a,span,p,dt,dd,h3,h2,h4,button,li{
	font-family: source-han-sans-japanese, 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;}



.mainbnr{position: relative;}
.mainbnr p{
	display: inline-block;
	font-size: 24px;
	font-weight: 200;
	letter-spacing: 2px;
	color: #fff;
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: solid 1px #fff;}


#prologue{margin: 60px 0 100px 0;}
#prologue .inner{
	width: 1000px;
	text-align: center;
	margin: 0 auto;
	position: relative;}
#prologue .inner:before{
	content: "";
	background: url("../img/prologue_red.webp")no-repeat;
	width: 391px;
	height: 440px;
	position: absolute;
	left: -235px;
	top: 0;}
#prologue .inner:after{
	content: "";
	background: url("../img/prologue_yellow.webp")no-repeat;
	width: 481px;
	height: 450px;
	position: absolute;
	right: -340px;
	top: 0;}
#prologue h2{font-size: 30px; letter-spacing: 2px; margin-bottom: 30px;}
#prologue .inner figure{margin-bottom: 80px;}
#prologue .leed{font-size: 18px; line-height: 2; margin-bottom: 100px; font-weight: 500;}
#prologue .anker{display: flex; flex-wrap: wrap; justify-content: space-between;}
#prologue .anker a{width: 49%; padding: 5px 0; color: #fff; font-size: 25px; font-weight: bold;position: relative;}
#prologue .anker .anker1{background-color: #c6021a;}
#prologue .anker .anker1:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 30px 30px;
	border-color: transparent transparent #000000 transparent;
	position: absolute;
	bottom: 0;
	right: 0;}
#prologue .anker .anker2{background-color: #006236;}
#prologue .anker .anker2:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 30px 30px;
	border-color: transparent transparent #fced00 transparent;
	position: absolute;
	bottom: 0;
	right: 0;}



#product1 .redwrap{
	--mask:
	radial-gradient(67.08px at 50% 90px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
	radial-gradient(67.08px at 50% -60px,#0000 99%,#000 101%) 50% 30px/120px 100% repeat-x;
	-webkit-mask: var(--mask);
	  mask: var(--mask);
	background: #AA0018;
	background: linear-gradient(180deg, rgba(170, 0, 24, 1) 0%, rgba(96, 0, 24, 1) 100%);}
#product1 .redwrap-inner{background-image: url("../img/product01-pattern.webp"); padding-bottom: 145px;}

#product1 .inner{padding: 80px 0 0 0;}
#product1 .inner .main{margin-bottom: 100px;}

#product1 .inner .main .p-image{text-align: right; position: relative;}
#product1 .inner .main .p-image:before{
	content: "";
	background: url("../img/product01-img-back.webp")no-repeat;
	width: 409px;
	height: 350px;
	position: absolute;
	left: 0;
	bottom: -10px;}

#product1 .inner .main .price {display: flex; align-items: baseline; margin-bottom: 50px; position: relative;}
#product1 .inner .main .price li,
#product2 .yellowwrap .inner .price li{
	text-shadow:
	3px 3px 0px #fff, -3px -3px 0px #fff,
	-3px 3px 0px #fff,  3px -3px 0px #fff,
	3px 0px 0px #fff, -3px -0px 0px #fff,
	0px 3px 0px #fff,  0px -3px 0px #fff;
	font-weight: bold;}
#product1 .inner .main .price .old{font-size: 54px; color: #000; text-decoration:line-through;}
#product1 .inner .main .price .new{font-size: 86px; color: #9f0014; padding-left: 50px;}
#product1 .inner .main .price .new span{color: #9f0014;}

#product1 .inner .main .link{text-align: center; position: relative; margin-top: 80px;}
#product1 .inner .main .link:after{
	content: "";
	background: url("../img/product01-pig.webp")no-repeat;
	width: 137px;
	height: 167px;
	position: absolute;
	top: -100px;
	right: 0;}
#product1 .inner .main .link a{display: inline-block; width: 480px; color: #fff; text-align: center; padding: 5px 0; font-size: 30px; font-weight: bold;}
#product1 .inner .main .link .buy a{background-color: #e2c217; color: #000; font-weight: 900;}
#product1 .inner .main .link .recipe a{background-color: #000; margin-top:30px; }
#product1 .inner .himitsu{position: relative;}
#product1 .inner .himitsu:before{
	content: "";
	background: url("../img/product01-kumo.webp")no-repeat;
	width: 193px;
	height: 104px;
	position: absolute;
	right: 0;
	top: -80px;}

#product1 .inner .link2{text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 70px;}
#product1 .inner .link2 li{width: 48.5%;}
#product1 .inner .link2 a{display: block; color: #fff; text-align: center; padding: 5px 0; font-size: 30px; font-weight: bold;}
#product1 .inner .link2 .buy a{background-color: #e2c217; color: #000; font-weight: 900;}
#product1 .inner .link2 .recipe a{background-color: #000;}

#product1 #link h2{font-size: 30px; position: relative; text-align: center; margin-bottom: 50px;}
#product1 #link h2:before{
	content: "";
	background: url("../img/title-nose.webp")no-repeat;
	width: 41px;
	height: 26px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -30px;}
#product1 #link .flexbox{display: flex; flex-wrap: wrap; justify-content: space-between;}
#product1 #link .flexbox a{}

#product1 .whitewrap{
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	/* update the 85% to control the curvature
	 you can also update the 50% to control the position
	*/
	clip-path: ellipse(140% 100% at 50% 100%);
	background: #fff;}
#product1 .whitewrap .inner{position: relative;}
#product1 .whitewrap .inner:before{
	content: "";
	background: url("../img/product01-kazari01.webp")no-repeat;
	width: 98px;
	height: 170px;
	position: absolute;
	left: 0;
	top: 28px;}
#product1 .whitewrap .inner:after{
	content: "";
	background: url("../img/product01-kazari02.webp")no-repeat;
	width: 98px;
	height: 170px;
	position: absolute;
	right: 0;
	top: 28px;}



#product1 .whitewrap .inner .title,
#product2 .whitewrap-2 .whitewrap-2-inner .inner h2{text-align: center; margin-bottom: 100px;}
#product1 .whitewrap .takeout-item,
#product2 .whitewrap-2 .takeout-item{display: flex; flex-wrap: wrap; justify-content: space-between;}
#product1 .whitewrap .takeout-item .txt-box,
#product2 .whitewrap-2 .takeout-item .txt-box{width: 48%;}
#product1 .whitewrap .takeout-item .txt-box h3,
#product2 .whitewrap-2 .takeout-item .txt-box h3{font-size: 35px; line-height: 1.3; padding-bottom: 20px;}
#product1 .whitewrap .takeout-item .txt-box-2,
#product2 .whitewrap-2 .takeout-item .txt-box-2{display: flex; justify-content: space-between; align-items: center;}
#product1 .whitewrap .takeout-item .txt-box-2 figure,
#product2 .whitewrap-2 .takeout-item .txt-box-2 figure{width: 27%;}
#product1 .whitewrap .takeout-item .txt-box-2 .txt-box-3,
#product2 .whitewrap-2 .takeout-item .txt-box-2 .txt-box-3{width: 67%;}
#product1 .whitewrap .takeout-item .txt-box-2 dt{font-size: 20px; color: #9f0014; border-bottom: solid 1px #9f0014; padding-bottom: 3px; font-weight: bold;}
#product2 .whitewrap-2 .takeout-item .txt-box-2 dt{font-size: 20px; color: #2c8822; border-bottom: solid 1px #2c8822; padding-bottom: 3px; font-weight: bold;}
#product1 .whitewrap .takeout-item .txt-box-2 dd,
#product2 .whitewrap-2 .takeout-item .txt-box-2 dd{font-size: 18px; font-weight: bold;}
#product1 .whitewrap .takeout-item .txt-box-2 p{font-size: 25px; color: #9f0014; padding: 20px 0 20px 0; font-weight: bold;}
#product2 .whitewrap-2 .takeout-item .txt-box-2 p{font-size: 25px; color: #5d080f; padding: 20px 0 20px 0; font-weight: bold;}
#product1 .whitewrap .takeout-item .txt-box-2 p span{font-size: 70%; color: #9f0014;}
#product2 .whitewrap-2 .takeout-item .txt-box-2 p span{font-size: 70%; color: #5d080f;}
#product1 .whitewrap .takeout-item .txt-box-2 a,
#product2 .whitewrap-2 .takeout-item .txt-box-2 a{font-size: 18px; color: #fff; background-color: #9f0014; display: block; padding: 5px 0; text-align: center;}



#product2{margin-top: 120px}
#product2 .yellowwrap{
	mask: conic-gradient(from 110deg at top,#0000,#000 1deg 139deg,#0000 140deg) 50%/164.85px 100%;
	background-color: #fced00;
	line-height: 1;}
#product2 .yellowwrap .inner{box-sizing: border-box; padding: 200px 0 80px; position: relative;}
#product2 .yellowwrap .inner .p-image{text-align: right; position: relative;}
#product2 .yellowwrap .inner .p-image:before{
	content: "";
	background: url("../img/product02-img-back2.webp")no-repeat;
	width: 424px;
	height: 221px;
	position: absolute;
	left: 0;
	bottom: -10px;}
#product2 .yellowwrap .inner .p-image:after{
	content: "";
	background: url("../img/product02-img-back.webp")no-repeat;
	width: 874px;
	height: 501px;
	position: absolute;
	right: -330px;
	bottom: 129px;
	z-index: -1;}
#product2 .yellowwrap .inner .price {display: flex;align-items: baseline; margin-bottom: 50px;}
#product2 .yellowwrap .inner .price .old {
	font-size: 54px;
	color: #000;
	text-decoration: line-through;}
#product2 .yellowwrap .inner .price .new {
	font-size: 86px;
	color: #006236;
	padding-left: 50px;}
#product2 .yellowwrap .inner .price .new span{color: #006236;}
#product2 .yellowwrap .inner .link {text-align: center; margin-top: 80px;}
#product2 .yellowwrap .inner .link a {display: inline-block; width: 480px; color: #fff; text-align: center; padding: 5px 0; font-size: 30px; font-weight: bold;}
#product2 .yellowwrap .inner .link .buy a {background-color: #c50117;}
#product2 .yellowwrap .inner .link .recipe a {background-color: #006236; margin-top: 30px;}
#product2 .yellowwrap .whitewrap{background-color: #fff; text-align: center; position: relative;}
#product2 .yellowwrap .whitewrap .inner{padding: 50px 0;}
#product2 .yellowwrap .whitewrap .inner:before{
	content: "";
	background: url("../img/product02-stamp1.webp")no-repeat;
	width: 493px;
	height: 311px;
	position: absolute;
	right: -30%;
	top: -50%;}
#product2 .yellowwrap .whitewrap .inner:after{
	content: "";
	background: url("../img/product02-stamp2.webp")no-repeat;
	width: 241px;
	height: 297px;
	position: absolute;
	left: -18%;
	bottom: -54%;}
#product2 .yellowwrap .whitewrap p{font-size: 16px; font-weight: bold; line-height: 2.5;}
#product2 .yellowwrap .whitewrap p span{font-size: 150%; color: #357d54; background-color: #ffe100; font-weight: 900; padding: 0 5px;}
#product2 .inner .link2 {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 70px;
	position: relative;}
#product2 .inner .link2:after{
	content: "";
	background: url("../img/product02-voice.webp")no-repeat;
	width: 379px;
	height: 52px;
	position: absolute;
	left: 100%;
	top: -100px;
	z-index: -1;}
#product2 .inner .link2 a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	font-size: 30px;
	font-weight: bold;}
#product2 .inner .link2 li {width: 48.5%;}
#product2 .inner .link2 .buy a {background-color: #c50117;}
#product2 .inner .link2 .recipe a {background-color: #006236;}

#product2 .remonmonster{position: relative;}
#product2 .remonmonster:before{
	content: "";
	background: url("../img/product02-remon-illustration.webp")no-repeat;
	width: 504px;
	height: 248px;
	position: absolute;
	top: 98%;
	left: 50%;
	transform: translateX(-50%);}

#product2 .whitewrap-2 {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    clip-path: ellipse(140% 100% at 50% 100%);
    background: #fff;
	padding-bottom: 80px;
	border-bottom: solid 3px #357d54;}
#product2 .whitewrap-2 .whitewrap-2-inner{background-color: #fff;}
#product2 .whitewrap-2 .whitewrap-2-inner .inner{padding: 90px 0 0 0;}
#product2 .whitewrap-2 .whitewrap-2-inner .inner h2{position: relative;}
#product2 .whitewrap-2 .whitewrap-2-inner .inner h2:after{
	content: "";
	background: url("../img/product02-subtitle-back.webp")no-repeat;
	width: 94px;
	height: 139px;
	position: absolute;
	right: 100px;
	bottom: -50px;
}



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

.border-d{margin-bottom: 120px; padding-bottom: 60px; border-bottom: dotted 5px #c63636;}

.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;}
	
	h2 img,
	.takeout-item img,
	.himitsu img{width: 100%;}
	.p-image img{
	width: 100%;
	transform-origin: center;
	transform: scale(1.1);}
	.txt-box-2 img{max-width: max-content;}
	
	#prologue {margin: 30px 0 30px 0;}
	#prologue h2{font-size: 20px; margin-bottom: 20px;}
	#prologue .inner{padding-bottom: 50px;}
	#prologue .inner img{width: 100%; margin-bottom: 30px;}
	#prologue .inner figure{margin-bottom: 0;}
	
	#prologue .leed{font-size: 16px; text-align: left; margin-bottom: 20px;}	
	
	#prologue .anker{display: block;}
	#prologue .anker a{display: block; width: 100%; font-size: 20px;}
	#prologue .anker .anker1{margin-bottom: 20px;}
	#prologue .inner:before {
	width: 40%;
	height: 200px;
	background-size: contain;
	left: 0;
	top: 97%;}
	#prologue .inner:after {
	width: 45%;
	height: 200px;
	background-size: contain;
	right: 0;
	top: 97%;}
	
	#product1{margin-top: 95px;}
	#product1 .inner .link2 a,
	#product1 .inner .main .link a{width: 100%; font-size: 22px;}
	#product1 .inner .main .price .old{font-size: 30px;}
	#product1 .inner .main h2{margin-bottom: 80px;}
	#product1 .inner .main .price .new{font-size: 60px; padding-left: 20px;}
	#product1 .inner .link2 li{width: 100%;}
	#product1 .inner .link2 .recipe a{margin-top: 30px;}
	#product1 .whitewrap {clip-path: ellipse(280% 100% at 50% 100%);}
	#product1 .inner .main .p-image:before {
	width: 170px;
	height: 146px;
	background-size: contain;
	bottom: 67%;
	z-index: 10;}
	#product1 .inner .main .link:after {
	width: 86px;
	height: 103px;
	background-size: contain;
	top: -55px;}
	#product1 .whitewrap .inner:before {
	width: 50px;
	height: 87px;
	top: 10px;
	background-size: contain;}
	#product1 .whitewrap .inner:after {
	width: 50px;
	height: 87px;
	top: 10px;
	background-size: contain;}
	#product1 .redwrap-inner{margin-bottom: -60px;}
	
	.receive{flex-wrap: wrap-reverse !important;}
	
	#product1 .whitewrap .takeout-item .txt-box-2 p,
	#product2 .whitewrap-2 .takeout-item .txt-box-2 p{padding: 0;}
	#product1 .whitewrap .takeout-item .txt-box,
	#product2 .whitewrap-2 .takeout-item .txt-box{width: 100%;}
	#product1 .whitewrap .takeout-item .txt-box h3, #product2 .whitewrap-2 .takeout-item .txt-box h3{font-size: 28px;}
	#product1 .whitewrap .takeout-item .txt-box-2, #product2 .whitewrap-2 .takeout-item .txt-box-2{display: block;}
	#product1 .whitewrap .takeout-item .txt-box-2 figure, #product2 .whitewrap-2 .takeout-item .txt-box-2 figure{width: 100%; text-align: center;}
	#product1 .whitewrap .takeout-item .txt-box-2 .txt-box-3, #product2 .whitewrap-2 .takeout-item .txt-box-2 .txt-box-3{width: 100%;}
	#product1 .whitewrap .inner .title, #product2 .whitewrap-2 .whitewrap-2-inner .inner h2{margin-bottom: 40px;}
	.yellowwrap .title{margin-bottom: 80px;}
	.yellowwrap .whitewrap .title{margin-bottom: 0;}
	
	#product2 .yellowwrap .inner{padding: 175px 0 80px;}
	#product2 .yellowwrap .inner .p-image:before{
	width: 200px;
	height: 104px;
	left: -21px;
	top: -70px;
	background-size: contain;
	z-index: 10;}
	#product2 .yellowwrap .inner .p-image:after {
	width: 590px;
	height: 330px;
	background-size: contain;
	right: -280px;
	bottom: 196px;}
	#product2 .yellowwrap .inner .price .old {
	font-size: 30px;}
	#product2 .yellowwrap .inner .price .new {
	font-size: 60px;
	padding-left: 20px;}
	#product2 .inner .link2 li {
	width: 100%;}
	#product2 .yellowwrap .inner .link a{
	width: 100%;
	font-size: 22px;}
	#product2 .yellowwrap .whitewrap .inner:before {
	width: 230px;
	height: 145px;
	background-size: contain;
	right: -31%;
	top: -16%;}
	.whitewrap .title img{width: 100%;}
	#product2 .yellowwrap .whitewrap p{text-align: left;}
	#product2 .remonmonster:before {
	width: 322px;
	height: 159px;
	background-size: contain;
	top: 98%;
	left: 50%;}
	#product2 .whitewrap-2 {clip-path: ellipse(275% 100% at 50% 100%);}
	#product2 .inner .link2 a{font-size: 22px;}
	#product2 .inner .link2 .recipe{margin-top: 30px;}
	#product2 .inner .link2:after {
	width: 272px;
	height: 52px;
	background-size: contain;
	right: -8%;
	left: inherit;
	top: -68px;}
	#product2 .whitewrap-2 .whitewrap-2-inner .inner h2:after {
	width: 62px;
	height: 96px;
	background-size: contain;
	right: 0;
	bottom: -50px;}
	#product2 .remonmonster {padding: 50px 0 !important;}
	#product2 .yellowwrap .inner .price{margin-bottom: 15px;}
	
	.mb200{margin-bottom: 110px !important;}
	#link h2{font-size: 25px;}
	#link .flexbox a{width: 100%;}
	#link .flexbox a img{width: 100%;}
	
}