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

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

/*----fonttype----*/
.F-base *{
font-family: "zen-maru-gothic", sans-serif;
font-weight: 500;
font-style: normal;}
h2,#sample .sample_box .sample_box_main .sample_box_main_txtbox dt{
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;}
#sample h3{
font-family: "vdl-logojrblack", sans-serif;
font-weight: 900;
font-style: normal;}
h2 span{
font-family: "ab-kai", sans-serif;
font-weight: 700;
font-style: normal;}



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



h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
h2{font-size: 30px; color: #000; text-align: center; margin-bottom: 30px; position: relative; line-height: 1.2;}
h2 span{font-size: 20px;}
.leed{font-size: 18px; margin-bottom: 50px; text-align: center;}

#select{margin-top: 30px;}
#select ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#select ul li{width: 33.3%;}
#select ul li:nth-child(2){border-left: solid 1px; border-right: solid 1px;}
#select ul li a{display: block; text-align: center; font-size: 20px; position: relative; padding: 10px 0;}
#select ul li a:after{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	border-bottom: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg) translateX(-50%);
	position: absolute;
	bottom: -25px;
	left: 45%;}



#prologue{margin: 0 0 80px;}
#prologue .inner{padding: 80px 0 0; text-align: center;}
#prologue h2{position: relative; display: inline-block;}
#prologue h2:before{
	content: "";
	background: url("../img/prologue_left.webp")no-repeat;
	width: 34px;
	height: 39px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;}
#prologue h2:after{
	content: "";
	background: url("../img/prologue_right.webp")no-repeat;
	width: 29px;
	height: 24px;
	position: absolute;
	right: -11px;
	top: 30px;
	z-index: -1;}
#prologue .p1{text-align: left; font-size: 16px; color: #242424; width: 800px; margin: 0 auto 15px;}
#prologue .p2{text-align: left; font-size: 20px; color: #242424; width: 800px; margin: 0 auto; line-height: 2; text-decoration: underline;}



#howto{background-color: #f7f3ed;}
#howto .inner{padding: 60px 0;}
#howto .stepbox{display:flex; flex-wrap: wrap; justify-content: space-between;}
#howto .stepbox div{width: 26%; text-align: center;}
#howto .stepbox div figure{margin-bottom: 30px;}
#howto .stepbox div p{text-align: left; font-size: 16px;}
#howto .stepbox .stepbox_center{position: relative;}
#howto .stepbox .stepbox_center:before{
	content: "";
	background: url("../img/step_flow.webp")no-repeat;
	width: 68px;
	height: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -80px;}
#howto .stepbox .stepbox_center:after{
	content: "";
	background: url("../img/step_flow.webp")no-repeat;
	width: 68px;
	height: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -90px;}



#variation .inner{padding: 60px 0;}
#variation .variation_box{display: flex; flex-wrap: wrap; justify-content: space-around; text-align: center; margin-bottom: 40px;}
#variation .variation_box div{width: 30%;}
#variation .variation_box div:nth-child(n+4){margin-top: 60px;}
#variation .variation_box dt{font-size: 20px; padding-top: 10px;}
#variation .variation_box dd{font-size: 15px;}
#variation .variation_txtend{font-size: 16px;}
#variation .matcha{color: #296800;}
#variation .cocoa{color: #663300;}
#variation .ichigo{color: #ff5050;}
#variation .houjicha{color: #cc9900;}
#variation .murasakiimo{color: #a800a8;}
#variation .kabocha{color: #ffaa00;}



#sample{background: url("../img/back_pattern.webp");}
#sample .inner{padding: 60px 0;}
#sample h3{font-size: 30px; color: #2bb0cc; text-align: center; margin-bottom: 40px;}
#sample .sample_box{margin-bottom: 80px;}
#sample .sample_box .sample_box_main{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 55px;}
#sample .sample_box .sample_box_main figure{width: 45%; align-content: center;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox{width: 50%;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox dt{font-size: 18px;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox dd{font-size: 16px;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .top{padding: 20px; border: solid 1px #2bb0cc; margin-bottom: 15px;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dt{position: relative; font-weight: bold; margin-bottom: 5px;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dt:after{
	content: "";
	width: 90%;
	height: 1px;
	background-color: #2bb0cc;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dd{display: flex; justify-content: space-between;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dd ul{width: 50%;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .bottom{padding: 20px; border: dashed 1px #000;}
#sample .sample_box .sample_box_main .sample_box_main_txtbox .bottom span{color: #2bb0cc; font-weight: bold;}
#sample .sample_box .sample_box_sub{border: solid 1px; background-color: #fff; padding: 50px 30px 30px 30px; position: relative;}
#sample .sample_box .sample_box_sub h4{font-size: 25px; padding: 0px 25px; border: solid 1px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: -30px;}
#sample .sample_box .sample_box_sub .sample_box_sub_flex{display: flex; flex-wrap: wrap;}
#sample .sample_box .sample_box_sub a{width: 23%; display: flex; flex-direction: column; margin-right: 2.6%;}
#sample .sample_box .sample_box_sub a:nth-child(4n){margin-right: 0;}
#sample .sample_box .sample_box_sub a:nth-child(n+5){margin-top: 30px;}
#sample .sample_box .sample_box_sub a img{width: 100%;}
#sample .sample_box .sample_box_sub a h5{font-size: 16px; flex-grow: 1; padding-top: 10px;}
#sample .sample_box .sample_box_sub a .price{font-size: 20px; font-weight: bold; text-align: right;}
#sample .sample_box .sample_box_sub a .look{font-size: 16px; color: #fff; background-color: #2bb0cc; text-align: center;}



.pagetop-icon{width: 100%;}
.pagetop-icon a{   position: fixed; bottom: 50px; right: 50px;}
.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) {
	.pc{display: none;}
	.sp{display: block;}

	h1 img{max-width: 100%;}
	h2{font-size: 25px;}
	.inner{width: 95% !important;}
	.mainbnr img{max-width: 100%;}
	
	
	#select{margin-bottom: 40px;}
	#select ul li {width: 100%; border-bottom: solid 1px;}
	#select ul li:nth-child(2) {border-left: none; border-right: none;}
	#select ul li a{text-align: left; font-size: 18px;}
	#select ul li a:after{left: inherit; right: 0; bottom: 15px;}
	
	
	#prologue{margin: 0;}
	#prologue .inner{padding: 20px 0 40px;}
	#prologue h2{margin-bottom: 10px; font-size: 20px;}
	#prologue .p1{width: 100%; font-size: 14px;}
	#prologue .p2{width: 100%; font-size: 16px;}
	
	
	#howto .stepbox div{width: 100%;}
	#howto .stepbox .stepbox_center{margin: 80px 0;}
	#howto .stepbox .stepbox_center:before{left: 50%; transform: translateX(-50%) rotate(90deg); top: -60px;}
	#howto .stepbox .stepbox_center:after{left: 50%; transform: translateX(-50%) rotate(90deg); top: inherit; bottom: -50px;}
	
	
	#variation .variation_box div{width: 47%;}
	#variation .variation_box{justify-content: space-between;}
	#variation .variation_box div:nth-child(n+3){margin-top: 40px;}
	
	
	#sample h3{font-size: 25px;}
	#sample .sample_box .sample_box_main figure{width: 100%; margin-bottom: 40px;}
	#sample .sample_box .sample_box_main figure img{width: 100%;}
	#sample .sample_box .sample_box_main .sample_box_main_txtbox{width: 100%;}
	#sample .sample_box .sample_box_sub{padding: 50px 20px 20px 20px;}
	#sample .sample_box .sample_box_sub a{width: 46%; margin-right: 0;}
	#sample .sample_box .sample_box_sub a:nth-child(n+3){margin-top: 40px;}
	#sample .sample_box .sample_box_sub a h5{line-height: 1.4;}
	#sample .sample_box .sample_box_sub .sample_box_sub_flex{justify-content: space-between;}
	#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dt:after{width: 85%;}
	#sample .sample_box .sample_box_main .sample_box_main_txtbox .top dd ul{width: auto;}
	
	
	.pagetop-icon a {bottom: 10px; right: 10px;}
	.pagetop-icon img{width: 80px;}
}