@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.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

#prologue h2,#prologue p,
#select .postage{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 400;}
.mainbox .product-area a h3{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 500;}
#prologue h2,
.mainbox .product-area a .price{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 600;}
#select ul li a,
.mainbox h2{font-family: "vdl-v7gothic", sans-serif;
font-weight: 700;
font-style: normal;}
.mainbox .product-area a .catch{font-family: "tk-takumi-okiraku-markertai", sans-serif;
font-weight: 700;
font-style: normal;}


article{
	border-left: solid 5px #0a6ebc;
	border-right: solid 5px #fdd000;}

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


.inner{width: 1000px;margin: 0 auto;}
.mainbnr{position: relative;}


#prologue{margin: 50px 0 80px;}
#prologue .inner{
	width: 950px;
	text-align: center;
	margin: 0 auto;}
#prologue h2{font-size: 20px; margin-bottom: 30px; color: #303030;}
#prologue p{width: 700px; margin: 0 auto; font-size: 15px; color: #303030; text-align: left;}



#select{position: relative; margin-bottom: 80px;}
#select ul{display: flex; justify-content: space-between; padding: 0;}
#select ul li{width: 32%; box-shadow: 0px 0px 20px 16px rgba(17,17,26,0.08); border-radius: 5px; transition: all 0.3s ease 0s;}
#select ul li:hover{transform: translateY(-0.5em);}
#select ul li a{display: block; font-size: 31px; text-decoration: none; padding: 13px 0; text-align: center;}
#select ul li:first-child a{color: #29a683;}
#select ul li:nth-child(2) a{color: #0a6ebc;}
#select ul li:nth-child(3) a{color: #d15d5f;}
#select .postage{display: block; text-align: right; color: #303030; font-size: 16px; padding-top: 20px;}


#P500{background-color: #fcfbf7;}
#P500 h2{color: #29a683;}
#P500 .product-area a .catch{color: #29a683;}
#P500 h2 .max{font-size: 80%; color: #29a683;}
#P500 h2 .unit{font-size: 70%; color: #29a683;}
#P1000 h2{color: #0a6ebc;}
#P1000 .product-area a .catch{color: #0a6ebc;}
#P1000 h2 .max{font-size: 80%; color: #0a6ebc;}
#P1000 h2 .unit{font-size: 70%; color: #0a6ebc;}
#P1500{background-color: #fcfbf7;}
#P1500 h2{color: #d15d5f;}
#P1500 .product-area a .catch{color: #d15d5f;}
#P1500 h2 .max{font-size: 80%; color: #d15d5f;}
#P1500 h2 .unit{font-size: 70%; color: #d15d5f;}

.mainbox a{text-decoration: none;}
.mainbox .inner{padding: 80px 0;}
.mainbox h2{font-size: 65px; text-align: center; margin: 0; margin-bottom: 40px;}
.mainbox .product-area{display: flex; flex-wrap: wrap;}
.mainbox .product-area figure{margin: 0 0; order: -2;}
.mainbox .product-area a{width: 32%; display: flex; flex-direction: column; margin-right: 2%;}
.mainbox .product-area a:nth-child(3n){margin-right: 0;}
.mainbox .product-area a:nth-child(n+4){margin-top: 4%;}
.mainbox .product-area a h3{font-size: 18px; color: #363636; flex-grow: 1; margin: 0;}
.mainbox .product-area a .catch{font-size: 22px; order: -1; margin: 10px 0; letter-spacing: -2px; flex-grow: 1; line-height: 1.4;}
.mainbox .product-area a .price{font-size: 22px; color: #363636; text-align: right; margin: 10px 0 0; line-height: 1.4;}



#precautions{background-color: #fcfbf7;}
#precautions .inner{padding-bottom: 30px;}
#precautions .txt{font-size: 15px;}
#precautions .date{text-align: right;}



.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%;}
	.inner{width: 95% !important;}
	
	#prologue{margin: 40px 0 0;}
	#prologue h2{font-size: 20px; margin-bottom: 16px;}
	#prologue .inner{padding-bottom: 50px;}
	#prologue p{font-size: 16px; width: 100%;}
	
	
	#select{margin-bottom: 60px;}
	#select ul{flex-wrap: wrap;}
	#select ul li{width: 100%;}
	#select ul li:nth-child(2){margin: 20px 0;}
	
	
	.mainbox .inner{padding: 60px 0;}
	.mainbox h2{font-size: 60px;}
	.mainbox .product-area{justify-content: space-between;}
	.mainbox .product-area a{width: 48%; margin-right: 0;}
	.mainbox .product-area a img{width: 100%;}
	.mainbox .product-area a:nth-child(n+4){}
	.mainbox .product-area a:nth-child(n+3){margin-top: 40px;}	
	.mainbox .product-area a .catch{font-size: 20px;}
	.mainbox .product-area a h3{line-height: 1.4; font-size: 16px;}
	
}