7,707個 /
648個）。両方に同じ組版を当てないと
本文が地の文のまま詰まって表示される。 */
.article__body p,
.article__body div:not([class]){
font-size:1rem;line-height:2.05;margin:0 0 1.35em
}
/* 旧テーマ由来のclass付き本文div（いずれも旧テーマにCSS定義は無く、
素の段落として書かれていたもの） */
.article__body .textblog,
.article__body .box-Center,
.article__body .ep-box{
font-size:1rem;line-height:2.05;margin:0 0 1.35em
}
/* div を入れ子にしている箇所が1,079あるため、
「中に div を持つ div」は入れ物とみなして余白を持たせない。
:has() 非対応の環境では無視されるだけなので、
上の基本ルールとは別ブロックにしている。 */
.article__body div:has(> div){margin-bottom:0}
.article__body a{color:var(--ai);text-decoration:underline;text-underline-offset:3px}
.article__body img{border-radius:8px;margin:1.2rem auto}
.article__body ul,.article__body ol{font-size:.93rem;line-height:2;padding-left:1.4rem;margin:0 0 1.35em}
.article__body table{width:100%;border-collapse:collapse;font-size:.85rem;margin:0 0 1.4em}
.article__body th,.article__body td{border:1px solid var(--keisen);padding:.5rem .7rem;text-align:left}
.article__body th{background:var(--ground)}
.article__body blockquote{
margin:0 0 1.4em;padding:.9rem 1.1rem;background:var(--ground);
border-left:3px solid var(--ai);border-radius:0 var(--r) var(--r) 0
}
/* .bBox001 は装飾ボックスではなく「本文全体のラッパー」
288記事で が最外側を囲んでいる。
箱として装飾すると、記事本文の枠の中にもう一枚枠が出る。 */
.article__body .bBox001{
background:none;border:0;border-radius:0;padding:0;margin:0
}
/* 本文中の は見出しのまとまり。余白だけ整える */
.article__body section{margin:0 0 .4rem}
.article__body section:last-child{margin-bottom:0}
.article__body .marker-thickYellow{background:linear-gradient(transparent 35%,#ffffbc 35%)}
.article__body .marker-halfYellow{background:linear-gradient(transparent 60%,#ffffbc 60%)}
.article__body .marker-thickPink{background:linear-gradient(transparent 35%,#FFDFEF 35%)}
/* 目次 */
.toc{background:var(--ground);border:1px solid var(--keisen);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:2rem}
.toc__title{font-size:.76rem;font-weight:700;letter-spacing:.09em;color:var(--kasumi);margin:0 0 .5rem}
.toc__toggle{display:none}
.toc__list{margin:0;padding-left:1.3rem;font-size:.86rem;line-height:1.95}
.toc__list ol{padding-left:1rem;font-size:.81rem;color:var(--kasumi)}
.toc__list a:hover{color:var(--ai);text-decoration:underline}
/* 記事下CTA */
.cta-group{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:2.2rem 0}
.cta-group .cta-card{margin:0}
.cta-card{
display:flex;gap:1rem;align-items:center;margin:2.2rem 0;padding:1rem;
background:var(--washi);border:2px solid var(--ai);border-radius:var(--r);
transition:transform .2s ease,box-shadow .2s ease
}
.cta-card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.cta-card__pattern{flex:0 0 auto;width:82px;height:82px;border-radius:6px}
.cta-card__body{display:flex;flex-direction:column;min-width:0}
.cta-card__shop{
align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.06em;color:#fff;
background:var(--ai);border-radius:3px;padding:.1rem .5rem;margin-bottom:.35rem
}
.cta-card__label{font-size:.95rem;font-weight:700;line-height:1.5}
.cta-card__note{font-size:.72rem;color:var(--kasumi);margin-top:.15rem}
/* タグ */
.article__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
.article__tags a,.tagcloud a{
font-size:.75rem;background:var(--washi);border:1px solid var(--keisen);
border-radius:99px;padding:.2rem .75rem;color:var(--kasumi)
}
.article__tags a:hover,.tagcloud a:hover{border-color:var(--ai);color:var(--ai)}
.tagcloud{display:flex;flex-wrap:wrap;gap:.45rem}
.tagcloud a span{color:var(--usu);margin-left:.3rem;font-size:.68rem}
/* ハブへ戻る */
.back-hub{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
background:var(--ai-soft);border-radius:var(--r);padding:1rem 1.2rem;margin-top:1.8rem
}
.back-hub__title{display:block;font-size:.92rem;font-weight:700}
.back-hub__sub{display:block;font-size:.72rem;color:var(--kasumi);margin-top:.1rem}
.back-hub__go{font-size:.8rem;font-weight:700;color:var(--ai);white-space:nowrap}
/* サイドバー */
.article-side{display:flex;flex-direction:column;gap:1.3rem;position:sticky;top:1.2rem}
.widget{background:var(--washi);border:1px solid var(--keisen);border-radius:var(--r);
padding:1rem 1.1rem;box-shadow:var(--shadow)}
.widget__title{
font-family:var(--mincho);font-size:.92rem;font-weight:600;margin:0 0 .7rem;
padding-bottom:.45rem;border-bottom:2px solid var(--ai);letter-spacing:.05em
}
.widget ul{list-style:none;margin:0;padding:0;font-size:.82rem;line-height:1.8}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rank-list__item{display:flex;gap:.55rem;align-items:flex-start;font-size:.8rem;line-height:1.6}
.rank-list__no{
flex:0 0 auto;width:1.3rem;height:1.3rem;border-radius:4px;background:var(--ai-soft);
color:var(--ai);display:grid;place-items:center;font-size:.68rem;font-weight:700
}
.rank-list__item:first-child .rank-list__no{background:var(--ai);color:var(--washi)}
.related-section{background:var(--washi);border-top:1px solid var(--keisen);padding:1rem 0 2rem;margin-top:2rem}
.search-again{max-width:420px;margin:0 0 1.6rem}
/* ページャ
paginate_links() はラッパーを返さないため、
.page-numbers 単体でも崩れない書き方にしている（inline-flex） */
.pagination,.nav-links{
display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
margin:2.6rem 0 .5rem
}
.navigation.pagination{margin-top:2.6rem}
.page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:2.4rem;height:2.4rem;padding:0 .7rem;
background:var(--washi);border:1px solid var(--keisen);border-radius:8px;
font-size:.82rem;font-weight:600;color:var(--kasumi);
font-variant-numeric:tabular-nums;line-height:1;
transition:border-color .18s ease,background .18s ease,color .18s ease
}
.page-numbers:hover{border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}
.page-numbers.current{
background:var(--ai);border-color:var(--ai);color:var(--washi);cursor:default
}
.page-numbers.dots{border-color:transparent;background:transparent;padding:0 .2rem;min-width:1.4rem}
.page-numbers.prev,.page-numbers.next{padding:0 .95rem;color:var(--ai)}
/* -------------------------------------------------------------
フッター
------------------------------------------------------------- */
.site-footer{background:var(--washi);border-top:1px solid var(--keisen);margin-top:2rem}
.site-footer__inner{max-width:var(--wrap);margin:0 auto;padding:2.2rem 1.1rem 2.4rem}
.footer-hubs__title{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--kasumi);margin:0 0 .7rem}
.footer-hubs ul{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:.6rem}
.footer-hubs a{display:block;font-size:.84rem;font-weight:700;padding:.5rem .7rem;
background:var(--ground);border:1px solid var(--keisen);border-radius:8px}
.footer-hubs a:hover{border-color:var(--ai)}
.footer-hubs a span{display:block;font-size:.66rem;font-weight:400;color:var(--kasumi)}
.footer-nav__list{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem;font-size:.78rem}
.site-footer__copy{font-size:.7rem;color:var(--usu);margin:1.6rem 0 0;text-align:center}
/* -------------------------------------------------------------
和文様（アイキャッチ未設定時の代替）
------------------------------------------------------------- */
.card__pattern--seigaiha,.hub-tile--seigaiha,.hub-hero__vis--seigaiha,.cta-card__pattern--seigaiha{
background-color:#22506F;background-image:
radial-gradient(circle at 50% 100%,transparent 32%,rgba(255,255,255,.34) 33%,rgba(255,255,255,.34) 36%,transparent 37%),
radial-gradient(circle at 50% 100%,transparent 20%,rgba(255,255,255,.3) 21%,rgba(255,255,255,.3) 24%,transparent 25%),
radial-gradient(circle at 50% 100%,transparent 8%,rgba(255,255,255,.26) 9%,rgba(255,255,255,.26) 12%,transparent 13%);
background-size:46px 23px}
.card__pattern--asanoha,.hub-tile--asanoha,.hub-hero__vis--asanoha,.cta-card__pattern--asanoha{
background-color:#2E5B44;background-image:
linear-gradient(30deg,transparent 47%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.3) 52%,transparent 53%),
linear-gradient(-30deg,transparent 47%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.3) 52%,transparent 53%),
linear-gradient(90deg,transparent 47%,rgba(255,255,255,.24) 48%,rgba(255,255,255,.24) 52%,transparent 53%);
background-size:38px 44px}
.card__pattern--ichimatsu,.hub-tile--ichimatsu,.hub-hero__vis--ichimatsu,.cta-card__pattern--ichimatsu{
background-color:#6E8749;background-image:
conic-gradient(rgba(255,255,255,.18) 0 25%,transparent 0 50%,rgba(255,255,255,.18) 0 75%,transparent 0);
background-size:34px 34px}
.card__pattern--tatami,.hub-tile--tatami,.hub-hero__vis--tatami,.cta-card__pattern--tatami{
background-color:#9A9251;background-image:
repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 7px),
repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,transparent 3px 6px)}
.card__pattern--shippo,.hub-tile--shippo,.hub-hero__vis--shippo,.cta-card__pattern--shippo{
background-color:#7C4B52;background-image:
radial-gradient(circle at 0% 50%,transparent 27%,rgba(255,255,255,.3) 28%,rgba(255,255,255,.3) 30%,transparent 31%),
radial-gradient(circle at 100% 50%,transparent 27%,rgba(255,255,255,.3) 28%,rgba(255,255,255,.3) 30%,transparent 31%),
radial-gradient(circle at 50% 0%,transparent 27%,rgba(255,255,255,.3) 28%,rgba(255,255,255,.3) 30%,transparent 31%),
radial-gradient(circle at 50% 100%,transparent 27%,rgba(255,255,255,.3) 28%,rgba(255,255,255,.3) 30%,transparent 31%);
background-size:40px 40px}
.card__pattern--kikko,.hub-tile--kikko,.hub-hero__vis--kikko,.cta-card__pattern--kikko{
background-color:#3F5A6B;background-image:
linear-gradient(60deg,rgba(255,255,255,.22) 25%,transparent 25.5%,transparent 74.5%,rgba(255,255,255,.22) 75%),
linear-gradient(-60deg,rgba(255,255,255,.22) 25%,transparent 25.5%,transparent 74.5%,rgba(255,255,255,.22) 75%);
background-size:32px 56px}
/* -------------------------------------------------------------
レスポンシブ
------------------------------------------------------------- */
@media (max-width:960px){
.container--article{grid-template-columns:1fr}
.article-side{position:static;flex-direction:row;flex-wrap:wrap}
.article-side .widget{flex:1 1 260px}
.hub-hero__inner{grid-template-columns:1fr}
.hub-hero__vis{display:none}
.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-tiles{grid-template-columns:repeat(2,1fr)}
.purpose-nav{grid-template-columns:repeat(2,1fr)}
.fp-popular{grid-template-columns:1fr}
.hub-links{grid-template-columns:1fr}
.footer-hubs ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
body{font-size:15px}
.nav-toggle{
display:grid;place-items:center;width:2.4rem;height:2.4rem;background:transparent;
border:1px solid var(--keisen);border-radius:8px;cursor:pointer;color:var(--sumi)
}
.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{
display:block;width:17px;height:2px;background:currentColor;border-radius:2px;position:relative
}
.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:0}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}
.global-nav{
display:none;position:absolute;left:0;right:0;top:100%;background:var(--washi);
border-bottom:1px solid var(--keisen);flex-direction:column;align-items:stretch;
gap:.8rem;padding:1rem 1.1rem 1.2rem;box-shadow:var(--shadow)
}
.global-nav.is-open{display:flex}
.global-nav__list{flex-direction:column;gap:.1rem}
.global-nav__list a{display:block;padding:.5rem 0;border-bottom:1px solid var(--keisen)}
.searchform__input{width:100%}
.card-grid{grid-template-columns:1fr}
.card{flex-direction:row}
.card__link{flex-direction:row}
.card__thumb{width:130px;flex:0 0 130px;aspect-ratio:1/1}
.card__excerpt{display:none}
.card--lead .card__link{flex-direction:column}
.card--lead .card__thumb{width:100%;flex:auto;aspect-ratio:16/9}
.hub-tiles{grid-template-columns:1fr 1fr}
.purpose-nav{grid-template-columns:1fr 1fr}
.article__body{padding:1.4rem 1.1rem}
.article__title{font-size:1.35rem}
.hub-hero__title{font-size:1.5rem}
.cta-group{grid-template-columns:1fr}
.cta-card{flex-direction:column;align-items:flex-start}
.cta-card__pattern{width:100%;height:110px}
/* 目次はスマホでは折りたたむ */
.toc__toggle{
display:inline-block;position:absolute;top:.85rem;right:1rem;font-size:.72rem;
background:var(--washi);border:1px solid var(--keisen);border-radius:99px;
padding:.15rem .7rem;color:var(--kasumi);cursor:pointer
}
.toc{position:relative}
.toc__list{display:none}
.toc.is-open .toc__list{display:block}
}