@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

.slick-slide img{ display:inline-block; vertical-align:top; }
.pic-slick{ margin-bottom:2.0rem; }
.pic-slick .slick-slide{ display:flex; justify-content:center; align-items:center; background:#000000; aspect-ratio:1 / 1; }
.pic-slick-thumbnail{ margin:0 -1.0rem; }
.pic-slick-thumbnail .slick-slide{ padding:0 1.0rem; opacity:0.6; }
.pic-slick-thumbnail .slick-current{ opacity:1.0; }
.pic-slick-thumbnail .slick-slide img{ object-fit:cover; aspect-ratio:1 / 1; }

#price .ttl{
	width:fit-content; margin:0 auto 4.6rem; position:relative;
	font-family:"Noto Serif JP", serif; font-size:5.2rem; line-height:1.0; font-weight:900; letter-spacing:0.1em;
}
#price .ttl>h3{ position:relative; z-index:1; padding:0 0.5em 1.0rem; }
#price .ttl .red{ color:#8D1212; }
#price .ttl strong{ font-size:7.0rem; font-weight:900; }

#price .ttl::after{
	display:block; content:""; background:#F9F293; height:3.1rem;
	position:absolute; left:0; bottom:0; right:0; z-index:0;
}


#price .table{ display:flex; width:100%; margin-bottom:0.7rem; }
#price table{ min-width:100%; }
#price table tr>*{ height:8.0rem; line-height:2.7rem; vertical-align:middle; text-align:left; white-space:nowrap; }
#price table th{ background:#BAA87B; color:#FFFFFF; }
#price table tr:nth-of-type(2n) td{ background:#E1DCD4; }

#price .head{ width:35.0rem; }
#price .head tr>*{ text-align:left; }
#price .head th{ font-size:2.6rem; padding-left:8.6rem; }
#price .head td{ font-size:1.8rem; padding-left:6.0rem; }
#price .body{ width:calc(100% - 35.0rem); overflow-x:scroll; }
#price .body tr>*{ text-align:right; padding-right:4.2rem; }
#price .body th{ font-weight:500; }
#price .body tr:first-child th{ font-size:2.3rem; }
#price .body tr:last-child th{ font-size:2.0rem; }
#price .body td{ font-size:2.0rem; }
#price .note{ font-size:2.0rem; line-height:2.9rem; text-align:right; }
#price .txt{ margin-top:5.3rem; font-size:2.5rem; line-height:3.3rem; text-align:center; font-weight:400; }
#price .txt strong{
	font-size:3.6rem; line-height:1; font-weight:400; position:relative;
	background:linear-gradient(to Top, rgba(249,242,147,1.0) 75%, rgba(249,242,147,0.0) 75%);
}

@media only screen and (min-width: 750px) {
	.elm_sp{ display:none; }
}
@media only screen and (max-width: 749px) {
	.elm_pc{ display:none; }
	#price .ttl{ margin:0 auto calc(100vw / 860 * 40); font-size:calc(100vw / 860 * 52); }
	#price .ttl>h3{ padding:0 0.5em calc(100vw / 860 * 10); }
	#price .ttl strong{ font-size:calc(7.0rem * 0.6); }

	#price .ttl::after{ height:calc(100vw / 860 * 31); }
	
	#price table tr>*{ height:calc(100vw / 860 * 80); line-height:calc(100vw / 860 * 32);  }

	#price .head{ width:calc(100vw / 860 * 280); }
	#price .head th{ font-size:calc(100vw / 860 * 28); padding-left:calc(100vw / 860 * 80); }
	#price .head td{ font-size:calc(100vw / 860 * 26); padding-left:calc(100vw / 860 * 20); }
	#price .body{ width:calc(100% - (100vw / 860 * 280)); }
	#price .body tr>*:first-child{ padding-left:calc(100vw / 860 * 21); }
	#price .body tr>*{ text-align:right; padding-right:calc(100vw / 860 * 21); }
	#price .body tr:first-child th{ font-size:calc(100vw / 860 * 26); }
	#price .body tr:last-child th{ font-size:calc(100vw / 860 * 28); }
	#price .body td{ font-size:calc(100vw / 860 * 26); }
	#price .note{ font-size:calc(100vw / 860 * 26); line-height:calc(100vw / 860 * 29); }
	#price .txt{ margin-top:calc(100vw / 860 * 53); font-size:calc(100vw / 860 * 28); line-height:calc(100vw / 860 * 38); }
	#price .txt strong{ font-size:calc(100vw / 860 * 38); }
}