@charset "UTF-8";
.min { font-family: "Sawarabi Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;}

/* PAGE of TOPICS */
#topics { width: 100%; max-width: 1280px; margin: 0 auto;}
#topics .bg { position: relative; padding-bottom: 120px; background: url('../img/topics/bg.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20231203 { background: url('../img/topics/20231203/bg.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20240118 { background: url('../img/topics/20240118/bg.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20240321a{ background: url('../img/topics/20240321/bg-s.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20240321b{ background: url('../img/topics/20240321/bg-f.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20241010 { background: url('../img/topics/bg-pk.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20241120 { background: url('../img/topics/bg-or.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20241218 { background: url('../img/topics/bg-pk.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250319 { background: url('../img/topics/bg-or.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250401 { background: url('../img/topics/bg-ye.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250521 { background: url('../img/topics/20250521/bg.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250526 { background: url('../img/topics/bg-pk.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250618a{ background: url('../img/topics/bg-bl.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250618b{ background: url('../img/topics/bg-pk.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250707 { background: url('../img/topics/20250707/bg.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250821 { background: url('../img/topics/bg-ye.jpg') repeat-y 50% 0% / 100% auto;}
#topics .bg.update20250924 { background: url('../img/topics/20250924/bg.jpg') no-repeat 50% 0% / cover;}
#topics .bg.update20251119 { background: linear-gradient(90deg, #ffccf0 50%, #e2b4ec 50%);}
#topics .bg.update20260114 { background: #f8dbe1;}
#topics .bg.update20260121 { background: #fae6c8;}


@media (max-width: 481px) {
	#topics .bg { padding-bottom: 80px;}
}


#topics .defhd { position: absolute; left: 0; top: 0; width: 100%; z-index: 10;}
#topics .defhd .inner { width: 100%; max-width: 1280px; height: 240px; margin: 0 auto; padding: 25px 50px;
 background: url('/img/bg-hd.png') no-repeat 50% 0;
}
#topics .defhd h1 { line-height: 1;}
#topics .defhd h1 svg { width: 36%; max-width: 210px; height: 50px; fill: #6a3906;}
@media (max-width: 641px) {
	#topics .defhd .inner { height: 36.5vw; padding: 4.5vw 25px 0;}
	#topics .defhd .inner { background: url('/img/bg-hd-sp.png') no-repeat 50% 0 / 100% auto;}
}
@media (max-width: 481px) {
}

#topics .archive-ttl { padding: 220px 0 40px;}
#topics .archive-ttl h2 { color: #6a3906; font-size: 40px; font-weight: 700; text-align: center;}
@media (max-width: 481px) {
	#topics .archive-ttl h2 { font-size: 24px;}
}

#topics .ctn-list { width: 92%; max-width: 800px; margin: 0 auto; font-size: 0px;}
#topics .ctn-list .list { display: inline-block; width: 33.333334%; padding: 20px 15px; vertical-align: top;}
#topics .ctn-list .list a { display: block; width: 100%; text-decoration: none;}
#topics .ctn-list .list a:hover { opacity: 0.8;}
#topics .ctn-list .list a dl dt { width: 100%; margin: 0 auto 20px;}
#topics .ctn-list .list a dl dt img { width: 100%; border-radius: 15px; }
#topics .ctn-list .list a dl dd { color: #6a6a6a; font-size: 16px;}
#topics .ctn-list .list a dl dd time.update { display: block; color: #916130;}
#topics .ctn-list .list ul { padding-top: 15px;}
#topics .ctn-list .list ul li { color: #6a6a6a; font-size: 10px;}
@media (max-width: 641px) {
	#topics .archive-ttl { padding: 30vw 0 20px;}
	#topics .ctn-list .list { width: 50%;}
	#topics .ctn-list .list ul { padding-top: 10px;}
}
@media (max-width: 481px) {
	#topics .ctn-list .list { padding: 12px 8px;}
	#topics .ctn-list .list a dl dt { margin-bottom: 8px;}
	#topics .ctn-list .list a dl dt img { border-radius: 10px;}
	#topics .ctn-list .list a dl dd { font-size: 12px;}
	#topics .ctn-list .list a dl dd time { font-size: 13px;}
	#topics .ctn-list .list ul { padding-top: 8px;}
}


#topics .pager { position: relative; width: 96%; max-width: 500px; margin: 0 auto; padding: 40px 0;}
#topics .pager p { margin-bottom: 40px; text-align: center;}
#topics .pager ul { position: relative; font-size: 0; text-align: center;}
#topics .pager ul li { display: inline-block; padding: 5px; font-size: 26px;}
#topics .pager ul li a { position: relative; display: block; width: 52px; height: 52px; border: solid 2px #6a3906; border-radius: 50%;
 color: #6a3906; font-weight: 700; line-height: 50px; text-decoration: none;
}
#topics .pager ul li span { display: block; width: 52px; height: 52px; border: solid 2px #6a3906; background: #fff; border-radius: 50%;
 color: #6a3906; font-weight: 700; line-height: 50px; text-decoration: none;
}
#topics .pager ul li.prev a,
#topics .pager ul li.next a { text-indent: -9999em;}
#topics .pager ul li.prev a:before,
#topics .pager ul li.next a:before { content: ''; display: block; width: 14px; height: 14px;
 position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#topics .pager ul li.prev a:before { left: 38%; border-bottom: solid 3px #6a3906; border-left: solid 3px #6a3906;}
#topics .pager ul li.next a:before { right: 38%; border-top: solid 3px #6a3906; border-right: solid 3px #6a3906;}
@media (max-width: 481px) {
	#topics .pager { padding: 20px 0;}
	#topics .pager p { margin-bottom: 20px; font-size: 15px;}
	#topics .pager ul li { font-size: 15px;}
	#topics .pager ul li a { width: 40px; height: 40px; line-height: 38px; border-width: 1px;}
	#topics .pager ul li span { width: 40px; height: 40px; line-height: 38px; border-width: 1px;}
	#topics .pager ul li.prev a:before,
	#topics .pager ul li.next a:before { width: 10px; height: 10px; border-width: 2px;}
}



#topics .ttl { width: 100%; margin: 0 auto 80px;}
#topics .ttl div img { width: 100%;}
#topics .ttl div img.sp { display: none;}

#topics .article-tit { width: 92%; max-width: 920px; margin: 0 auto 40px;}
#topics .article-tit h2 { margin-bottom: 30px; color: #6a3906; font-size: 35px;}
#topics .article-tit h2 br.sp { display: none;}
#topics .article-tit p.update { color: #6a3906; font-size: 22px;}
#topics .article-ctn { width: 100%; max-width: 920px; margin: 0 auto;}
#topics .article-ctn .article-kv { width: 100%; margin: 0 auto;}
#topics .article-ctn .article-kv.mb { margin-bottom: 100px;}
#topics .article-ctn .article-kv figure { text-align: center;}
#topics .article-ctn .article-kv figure img { width: 100%;}
#topics .article-ctn .article-kv figure img.mid { max-width: 560px;}
#topics .article-ctn .ctn { width: 90%; max-width: 730px; margin: 0 auto;}
#topics .article-ctn .ctn p { color: #333; font-size: 18px; text-align: center;}
#topics .article-ctn .ctn p.tc { text-align: center !important;}
#topics .article-ctn .ctn p.mb { margin-bottom: 30px;}
#topics .article-ctn .ctn p.mb2{ margin-bottom: 60px;}
#topics .article-ctn .ctn p.read { text-align: left;}
#topics .article-ctn .ctn p.note { color: #5b5b5b; font-size: 10px;}
#topics .article-ctn .ctn p sup { font-size: 12px; vertical-align: super;}
#topics .article-ctn .ctn p sub { font-size: 12px; vertical-align: baseline;}
#topics .article-ctn .ctn p br.sp { display: none;}
#topics .article-ctn .ctn figure.kv { margin-bottom: 0px !important; text-align: center;}
#topics .article-ctn .ctn figure.kv img.wide { width: 100%; margin-bottom: 30px;}
#topics .article-ctn .ctn figure.kv figcaption { color: #333; font-size: 18px; text-align: left;}
#topics .article-ctn .ctn .tit { padding: 25px 0; border-top: solid 2px #af8372; border-bottom: solid 2px #af8372;}
#topics .article-ctn .ctn .tit h3 { color: #6a3906; font-size: 27px; text-align: center;}
#topics .article-ctn .ctn .bloc { padding: 40px 0;}
#topics .article-ctn .ctn .bloc.line { border-bottom: solid 1px #909090;}
#topics .article-ctn .ctn .bloc.line { border-bottom: solid 1px #6a3906;}
#topics .article-ctn .ctn .bloc figure { margin-bottom: 30px; padding-top: 30px; text-align: center;}
#topics .article-ctn .ctn .bloc figure.pt10 { padding-top: 10px;}
#topics .article-ctn .ctn .bloc figure.pt0 { padding-top: 0px;}
#topics .article-ctn .ctn .bloc figure img { width: 72%;}
#topics .article-ctn .ctn .bloc figure img.w660 { width: 80%; max-width: 660px;}
#topics .article-ctn .ctn .bloc figure img.w580 { width: 80%; max-width: 580px;}
#topics .article-ctn .ctn .bloc figure img.w540 { max-width: 540px;}
#topics .article-ctn .ctn .bloc figure img.w500 { max-width: 500px;}
#topics .article-ctn .ctn .bloc figure img.w460 { max-width: 460px;}
#topics .article-ctn .ctn .bloc figure img.w420 { max-width: 420px;}
#topics .article-ctn .ctn .bloc figure img.w400 { max-width: 400px;}
#topics .article-ctn .ctn .bloc figure img.w380 { max-width: 380px;}
#topics .article-ctn .ctn .bloc figure img.w340 { max-width: 340px;}
#topics .article-ctn .ctn .bloc figure img.w320 { width: 60%; max-width: 320px;}
#topics .article-ctn .ctn .bloc figure img.w280 { width: 50%; max-width: 280px;}
#topics .article-ctn .ctn .bloc figure img.w160 { max-width: 160px;}
#topics .article-ctn .ctn .bloc .item { width: 80%; margin: 0 auto;}
#topics .article-ctn .ctn .bloc .item.mb { margin-bottom: 20px;}
#topics .article-ctn .ctn .bloc .item p { color: #5b5b5b; font-size: 14px; text-align: center;}

#topics .article-ctn .ctn .bloc .item p.price { padding-top: 5px; font-size: 12px;}
#topics .article-ctn .ctn .bloc .item p.price img { width: 90%; }
#topics .article-ctn .ctn .bloc .item p.price img.w420 { max-width: 420px;}
#topics .article-ctn .ctn div.note p { color: #5b5b5b; font-size: 10px; text-align: center;}
#topics .article-ctn .spacer { width: 100%; height: 80px;}
#topics .article-ctn .btn-back { width: 60%; max-width: 370px; margin: 0 auto; padding: 60px 0;}
#topics .article-ctn .btn-back a { display: block; width: 100%;}
#topics .article-ctn .btn-back a img { width: 100%;}
@media (max-width: 801px) {
	#topics .ttl { margin: 0 auto 60px;}
	#topics .article-tit { margin: 0 auto 20px;}
	#topics .article-tit h2 { margin-bottom: 20px; font-size: 3.8vw;}
	#topics .article-ctn .article-kv.mb { margin-bottom: 50px;}
	#topics .article-ctn .ctn .tit { padding: 20px 0;}
}
@media (max-width: 641px) {
	#topics .article-ctn .ctn .bloc .item p { text-align: left;}
}
@media (max-width: 481px) {
	#topics .ttl { margin: 0 auto 30px;}
	#topics .ttl div img.pc { display: none;}
	#topics .ttl div img.sp { display: block;}

	#topics .article-tit h2 { margin-bottom: 12px; font-size: 21px;}
	#topics .article-tit h2 br.sp { display: block;}
	#topics .article-tit p.update { font-size: 13px;}
	#topics .article-ctn .article-kv.mb { margin-bottom: 30px;}
	#topics .article-ctn .ctn figure.kv img.wide { margin-bottom: 20px;}
	#topics .article-ctn .ctn figure.kv figcaption { font-size: 13px;}
	#topics .article-ctn .ctn p { font-size: 14px; letter-spacing: 0rem; text-align: left;}
	#topics .article-ctn .ctn p.read { font-size: 14px;}
	#topics .article-ctn .ctn p.note { font-size: 10px;}
	#topics .article-ctn .ctn p sub { font-size: 10px;}
	#topics .article-ctn .ctn p br.sp { display: block;}
	#topics .article-ctn .ctn .tit { padding: 12px 0;}
	#topics .article-ctn .ctn .tit h3 { font-size: 21px;}
	#topics .article-ctn .ctn .bloc { padding: 40px 0;}
	#topics .article-ctn .ctn .bloc figure { margin-bottom: 20px;}
	#topics .article-ctn .ctn .bloc .item { width: 100%;}
	#topics .article-ctn .ctn .bloc .item.mb { margin-bottom: 12px;}
	#topics .article-ctn .ctn .bloc .item p { font-size: 13px;}
	#topics .article-ctn .ctn .bloc .item p.price { font-size: 11px; text-align: center;}
	#topics .article-ctn .ctn .bloc .item p span { display: block;}
	#topics .article-ctn .ctn .bloc .item p sub { font-size: 10px;}
	#topics .article-ctn .ctn div.note { width: 85%; margin: 0 auto;}
	#topics .article-ctn .ctn div.note.wide { width: 100%;}
	#topics .article-ctn .ctn div.note p {}
	#topics .article-ctn .ctn div.note p span { display: block; }
}