@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,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: 1080px;margin: 0 auto;}

.blue{color: #0068b7;}
.yellow{color: #ba7f31;}
.red{color: #c63636;}
.pink{color: #ee86b4;}


.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: 30px 0 100px 0;}
#prologue .inner{
	width: 750px;
	text-align: center;
	margin: 0 auto;}
#prologue h2{font-size: 30px; letter-spacing: 2px; margin-bottom: 30px;}
#prologue h2 span{color: #c63636;}
#prologue .leed{font-size: 18px; line-height: 2; margin-bottom: 50px; font-weight: 500;}
#prologue .start{font-size: 30px; font-weight: bold; position: relative;}
#prologue .start:after{
	content: "";
	background: url("../img/prologue-arrow.webp")no-repeat;
	width: 26px;
	height: 20px;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);}


#redwrap{background-color: #c63636; box-sizing: border-box; padding: 70px 0; margin-bottom: 100px;}


.select{width: 1000px;margin: 0 auto;}
.select h2{
	font-size: 30px;
	color: #fff;
	text-align: center;
	margin-bottom: 55px;}
.select .select-box{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 100px;}
.select .select-box a{
	width: 23.5%;
	background-color: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 20px;
	position: relative;}
.select .select-box a:after{
	content: "";
	background: url("../img/anker-arrow.webp")no-repeat;
	width: 34px;
	height: 14px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;}
.select .select-box a figure{text-align: center;}
.select .select-box a .copy{font-size: 19px; text-align: center; font-weight: 800;}
.select .select-box a .copy span{font-weight: 800;}
.select .select-box a .copy-txt{font-size: 16px; letter-spacing: 1px; font-weight: 500; line-height: 1.5; padding: 7px 0;}
.select .select-box a dd{font-size: 15px; font-weight: 500; text-align: center;}
.select .select-box a dt{font-size: 16px; color: #c63636; position: relative; text-align: center; font-weight: bold;}
.select .select-box a dt:before{
	content: "";
	width: 40px;
	height: 1px;
	background-color: #c63636;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;}
.select .select-box a dt:after{
	content: "";
	width: 40px;
	height: 1px;
	background-color: #c63636;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;}


.contentbox{width: 1000px; margin: 0 auto; background-color: #fff; border-radius: 10px; box-sizing: border-box; padding: 40px;}

#anker-1 h2,#anker-2 h2,#anker-3 h2,#anker-4 h2{padding: 120px 0 30px 0; position: relative; font-size: 25px; text-align: center;}
#anker-1,#anker-2,#anker-3{margin-bottom: 100px;}


#anker-1 h2:before{
	content: "";
	background: url("../img/answer-1-icon.webp")no-repeat;
	width: 96px;
	height: 150px;;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -60px;}


#anker-2 h2:before{
	content: "";
	background: url("../img/answer-2-icon.webp")no-repeat;
	width: 96px;
	height: 150px;;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -60px;}
#anker-2 .select-list{justify-content: center;}


#anker-3 h2:before{
	content: "";
	background: url("../img/answer-3-icon.webp")no-repeat;
	width: 96px;
	height: 150px;;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -60px;}
#anker-3 .select-list{justify-content: center;}


#anker-4 h2:before{
	content: "";
	background: url("../img/answer-4-icon.webp")no-repeat;
	width: 96px;
	height: 150px;;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -60px;}
#anker-4 .select-list{justify-content: center;}


h4{font-size: 23px; text-align: center; color: #c63636; margin-bottom: 30px; line-height: 1;}


.select-list{display: flex; flex-wrap: wrap; margin-bottom: 40px;}
.select-list a{width: 32%; position: relative;}
.select-list a:after{
	content: "";
	background: url("../img/answer-arrow.webp")no-repeat;
	width: 19px;
	height: 9px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -20px;}
.select-list a:nth-child(n+2){margin-left: 2%;}
.select-list a img{width: 100%;}
.select-list a p{font-size: 18px; color: #c63636; font-weight: bold; text-align: center;}
.select-subtxt{font-size: 30px; text-align: center; font-weight: bold; margin-bottom: 80px;}


.flex-box{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px;}
.flex-box figure{align-content: center;}
.flex-box .txt-box{width: 40%; align-content: center;}
.flex-box .txt-box h3{font-size: 28px;}
.flex-box .txt-box p{font-size: 16px; margin: 10px 0;}
.flex-box .txt-box ul{display: flex; flex-wrap: wrap;}
.flex-box .txt-box ul li{font-weight: bold;}
.flex-box .txt-box ul li span{font-size: 70%;}
.flex-box .txt-box .old{font-size: 28px; align-content: center; text-decoration-line:line-through;}
.flex-box .txt-box .new{font-size: 45px; color: #c63636;}
.flex-box .txt-box .new span{color: #c63636;}
.flex-box .txt-box .main{font-size: 18px; display: block; color: #fff; background-color: #c63636; border-radius: 5px; text-align: center; padding: 7px 0; margin-top: 30px;}
.flex-box .txt-box .variation{display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex-box .txt-box .variation .sub{width: 48%; box-sizing: border-box; border: solid 2px #c63636; border-radius: 5px; font-size: 18px; text-align: center; padding: 5px 0; margin-top: 20px; color: #c63636; font-weight: bold;}


.recipe-list{display: flex; flex-wrap: wrap;}
.recipe-list a{width: 32%;}
.recipe-list a:nth-child(n+2){margin-left: 2%;}
.recipe-list a img{width: 100%;}
.recipe-list a p{color: #c63636; text-align: center; border: solid 2px #c63636; padding: 5px 5px; font-weight: bold; font-size: 15px;}


#matrix{margin-bottom: 80px;}
#matrix h2{font-size: 30px; position: relative; text-align: center; margin-bottom: 50px;}
#matrix h2:before{
	content: "";
	background: url("../img/title-nose.webp")no-repeat;
	width: 41px;
	height: 26px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -30px;}
#matrix figure{text-align: center;}


#target-product{margin-bottom: 100px; box-sizing: border-box; padding: 70px 0; background-color: #c63636;}
#target-product .inner{background-color: #fff; box-sizing: border-box; padding: 80px 40px 40px 40px;} 
#target-product h2{font-size: 30px; position: relative; text-align: center; margin-bottom: 50px;}
#target-product h2:before{
	content: "";
	background: url("../img/title-nose.webp")no-repeat;
	width: 41px;
	height: 26px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -30px;}
#target-product .flexbox{display: flex; flex-wrap: wrap;}
#target-product .flexbox a{width: 24%; margin-right: 1.3%;}
#target-product .flexbox a:nth-child(4n){margin-right: 0;}
#target-product .flexbox a img{width: 100%;}
#target-product .flexbox a ul li{font-size: 16px; font-weight: 500;}
#target-product .flexbox a ul .name{color: #c63636;}
#target-product .flexbox a ul .price{}


#link h2{font-size: 30px; position: relative; text-align: center; margin-bottom: 50px;}
#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;}
#link .flexbox{display: flex; flex-wrap: wrap; justify-content: space-between;}
#link .flexbox a{}


.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;}
	h4{font-size: 18px; margin-bottom: 20px;}
	
	#prologue {margin: 30px 0 30px 0;}
	#prologue h2{font-size: 20px; margin-bottom: 20px;}
	#prologue .inner{padding-bottom: 50px;}
	#prologue .inner img{width: 90%; margin-bottom: 30px;}
	#prologue .start{font-size: 20px;}
	#prologue .leed{font-size: 16px; text-align: left; margin-bottom: 20px;}

	.contentbox{width: 90%; padding: 20px;}	
	
	.select{width: 90%;}
	.select h2{font-size: 20px;}
	.select .select-box a{width: 48%; margin-bottom: 60px;}
	.select .select-box a dt:before {
	content: none;}
	.select .select-box a dt:after {
	content: none;}
	
	.select-list a{width: 100%;}
	
	.flex-box img{width: 100%;}
	.flex-box .txt-box{width: 100%;}
	
	.recipe-list a{width: 48%;}
	.recipe-list a:nth-child(3n){margin-left:0%; margin-top: 20px;}
	
	#matrix .swipe img{width: 100%;;}
	#matrix .matrix-img{overflow: scroll;}
	
	#target-product h2{font-size: 25px; margin-bottom: 20px;}
	#target-product .flexbox a{width: 48%;}
	#target-product .inner {padding: 60px 20px 20px 20px;}
	#target-product .flexbox a {width: 48%; margin-right: 0;}
	#target-product .flexbox a:nth-child(4n) {margin-right:inherit;}
	#target-product .flexbox a:nth-child(n+3) {margin-top:20px;}
	#target-product .flexbox a:nth-child(odd) {margin-right: 4%;}
	#target-product .flexbox a ul li{line-height: 1.3;}
	#target-product .flexbox a ul .name{margin-bottom: 10px;}
	
	#link h2{font-size: 25px;}
	#link .flexbox a{width: 100%;}
	#link .flexbox a img{width: 100%;}
	
}