@charset "utf-8";

#page-ttl { width: 100%; max-width: 1280px; margin: 0 auto; padding: 9px 0; background: #703b1d;}
#page-ttl:before,
#page-ttl:after { content: ''; display: block; width: 100%; height: 1px; background: url('../img/line.svg') no-repeat 50% 50% / 100% auto;}
#page-ttl div { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 8px 0px;}
#page-ttl h2 { line-height: 1; text-align: center;}
#page-ttl h2 img { width: 50%; max-width: 150px;}
@media (max-width: 481px) {
	#page-ttl { padding: 3px 0;}
	#page-ttl div { padding: 8px 0px;}
	#page-ttl h2 img { max-width: 90px;}
}


.notes div{ width: 92%; margin: 0 auto;}
.notes ul { width: 100%;}
.notes ul li { font-size: 11px; line-height: 1.4;}
@media (max-width: 641px) {
	.notes ul li { font-size: 9px;}
}



.btn-back { display: block; width: 72%; max-width: 330px; margin: 0 auto;}
.btn-back a { position: relative; display: block; width: 100%; padding: 14px 0 16px; border: solid 1px #fff; border-radius: 12px; cursor: pointer;
 background: url('../img/btn.jpg') no-repeat 50% 50% / cover; box-shadow: 2px 2px 8px #502612, 2px 2px 8px #502612;
 color: #fff; font-size: clamp(16px,2.8vw,28px); font-weight: 700; line-height: 1.2; text-align: center; text-shadow: 1px 1px 4px #502612, 1px 1px 4px #502612, 0px -1px 4px #502612;
}
.btn-back a::after { content: ''; display: block; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 36"><path d="M22.26,35.49c-.28,0-.55-.11-.76-.32-.42-.42-.42-1.11,0-1.53l14.81-14.82H1.08c-.6,0-1.08-.48-1.08-1.08s.48-1.08,1.08-1.08h35.22L21.49,1.85c-.21-.21-.32-.49-.32-.76s.11-.55.32-.76c.42-.42,1.11-.42,1.53,0l16.66,16.66s0,0,0,0h0s0,0,0,0c0,0,0,0,0,0h0c.19.19.29.44.31.69,0,.06,0,.13,0,.19h0c-.02.21-.11.42-.26.59-.02.02-.04.04-.05.06l-16.66,16.66c-.21.21-.49.32-.77.32Z" fill="%23ffffff"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; 
}
.btn-back a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	.btn-back a { padding: 10px 0 12px; border-radius: 8px; box-shadow: 2px 2px 4px #502612, 2px 2px 4px #502612;}
}


#article-hd { width: 100%; max-width: 1280px; margin: 0 auto; background: url('../img/topic/bg-top.jpg') no-repeat 50% 0;}
#article-hd .inner { width: 90%; max-width: 860px; margin: 0 auto; padding: 60px 0px;}
#article-hd h1 { margin-bottom: 30px; color: #fff; font-size: clamp(16px,3.2vw,28px); font-weight: 700;}
#article-hd h1 sub { font-size: 10px; vertical-align: baseline;}
#article-hd p { color: #fff; font-size: 16px;}
@media (max-width: 801px) {
	#article-hd .inner { padding: 40px 0px;}
	#article-hd h1 { margin-bottom: 20px;}
	#article-hd h1 span { display: block;}
}
@media (max-width: 481px) {
	#article-hd .inner { padding: 30px 0px 24px;}
	#article-hd h1 { margin-bottom: 12px;}
	#article-hd p { font-size: 12px;}
}


#mv .inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#mv picture { position: relative; display: block; width: 100%; margin: 0 auto;}
#mv picture img { width: 100%;}
#mv figure { position: relative; display: block; width: 100%; margin: 0 auto;}
#mv figure img { width: 100%;}
#mv .notes { position: absolute; left: 0; bottom: 20px; width: 100%;}
#mv .notes div { max-width: 850px;}
@media (max-width: 801px) {
}


#article-ctn .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding-bottom: 120px;}
#article-ctn .lead { width: 90%; max-width: 860px; margin: 0 auto; padding: 80px 0px;}
#article-ctn .lead p { font-size: 18px; line-height: 2;}
#article-ctn .lead p.tc { text-align: center;}
#article-ctn .lead p sub { font-size: 10px; vertical-align: baseline;}

#article-ctn .ttl { width: 92%; max-width: 860px; margin: 0 auto; padding: 10px 0; border-top: solid 1px #f9f9f7; border-bottom: solid 1px #f9f9f7;}
#article-ctn .ttl h3 { color: #f9f9f7; font-size: clamp(18px,3.2vw,32px); font-weight: 700; text-align: center;}

#article-ctn .develop { margin-bottom: 150px;}
#article-ctn .develop .ttl { margin-bottom: 70px;}
#article-ctn .develop .inner { width: 90%; max-width: 860px; margin: 0 auto 60px;}
#article-ctn .develop p { font-size: 18px; line-height: 2;}
#article-ctn .develop p sub { font-size: 10px; vertical-align: baseline;}
#article-ctn .develop .notes div { max-width: 850px;}


#article-ctn .product {}
#article-ctn .product .ttl { margin-bottom: 70px;}
#article-ctn .product figure { text-align: center;}
#article-ctn .product figure.mb50 { margin-bottom: 50px;}
#article-ctn .product figure img { width: 100%; max-width: 820px;}
#article-ctn .product .item { width: 86%; max-width: 860px; margin: 0 auto;}
#article-ctn .product .item h4 { font-size: 16px; font-weight: 700;}
#article-ctn .product .item ul li { font-size: 14px;}
#article-ctn .product .item ul li span { display: inline-block;}
#article-ctn .product .item ul li span.name { margin-right: 20px; font-weight: 700;}
#article-ctn .product .item ul li span.price { margin-right: 6px; font-size: 12px;}
#article-ctn .product .item ul li span.amount{ font-size: 12px;}

#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 0 72px;}
#product .item { padding: 40px 0;}
#product .item.mb { margin-bottom: 60px;}
#product .item p { text-align: center;}
#product .item p.name { font-size: 16px; font-weight: 700;}
#product .item p.name span { display: block;}
#product .item p.price { font-size: 12px;}
#product .item p.amount { font-size: 12px;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#article-ctn .inner-sct { padding-bottom: 80px;}
	#article-ctn .lead { padding: 40px 0px;}
	
	#article-ctn .develop { margin-bottom: 80px;}
	#article-ctn .develop .ttl { margin-bottom: 40px;}
	#article-ctn .develop .inner { margin-bottom: 30px;}

	#article-ctn .product .ttl { margin-bottom: 40px;}
}
@media (max-width: 481px) {
	#article-ctn .inner-sct { padding-bottom: 40px;}

	#article-ctn .lead p { font-size: 12px;}
	#article-ctn .lead p span { display: block;}

	#article-ctn .develop { margin-bottom: 60px;}
	#article-ctn .develop .inner { margin-bottom: 20px;}
	#article-ctn .develop p { font-size: 12px;}

	#article-ctn .product .ttl { margin-bottom: 20px;}
	#article-ctn .product figure.mb50 { margin-bottom: 30px;}
	#article-ctn .product .item h4 { margin-bottom: 8px; font-size: 14px; font-weight: 700;}
	#article-ctn .product .item ul li { padding: 6px 0; font-size: 12px;}
	#article-ctn .product .item ul li span.name { display: block; margin-right: 0px; font-size: 13px; font-weight: 700;}

	#product .item { padding: 30px 0;}
	#product .item.mb { margin-bottom: 40px;}
	#product .item p.name { font-size: 14px;}
	#product .item p.price { font-size: 10px;}
	#product .item p.amount { font-size: 10px;}
}


aside.bottom {}
aside.bottom .inner { width: 90%; max-width: 900px; margin: 0 auto; padding: 60px 0;}
aside.bottom .btn-back { margin-bottom: 140px;}
aside.bottom h4 { margin-bottom: 60px; text-align: center;}
aside.bottom h4 a { display: block; width: 50%; max-width: 330px; margin: 0 auto;}
aside.bottom h4 img { width: 100%;}
aside.bottom ul { font-size: 0; text-align: center;}
aside.bottom ul.nav { margin-bottom: 72px;}
aside.bottom ul.nav li { display: inline-block; padding: 0 20px; font-size: 24px;}
aside.bottom ul.nav li a { color: #fff; font-weight: 700;}
aside.bottom ul.sns li { display: inline-block; width: 100px; vertical-align: middle;}
aside.bottom ul.sns li a { display: block; width: 50px; margin: 0 auto;}
aside.bottom ul.sns li a svg { width: 100%; height: auto; fill: #fff;}
@media (max-width: 801px) {
	aside.bottom h4 { margin-bottom: 40px;}
}
@media (max-width: 481px) {
	aside.bottom .inner { padding: 40px 0;}
	aside.bottom .btn-back { margin-bottom: 60px;}
	aside.bottom h4 { margin-bottom: 20px;}
	aside.bottom ul.nav { margin-bottom: 32px;}
	aside.bottom ul.nav li { display: block; padding: 8px; font-size: 16px;}
	aside.bottom ul.sns li { width: 60px;}
	aside.bottom ul.sns li a { width: 30px;}

}