/* ふぉんでゅ亭のコラム — 記事一覧・記事ページ（Worker が出す HTML）だけの見た目（A案 スイス・グリッド）
 * 色・書体・ヘッダー・フッター・節の見出し・記事の並び（.feat / .idx-row）は ft-base.css（トップと共通） */

/* 読み進みバー：ヘッダーの下の細い赤い線 */
.read-bar { position: fixed; left: 0; right: 0; top: var(--hh); height: 3px; z-index: 49; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left center; }

/* パンくず */
.crumbs { font-size: .78rem; font-weight: 700; color: var(--mute); margin: 0 0 clamp(28px, 4vw, 48px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.crumbs li { display: inline-flex; gap: .6rem; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--rule); }
.crumbs a { text-decoration: none; color: var(--ink); }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 記事一覧 ===== */
.sec.list { padding-top: clamp(28px, 4vw, 56px); }
.tags-f { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: clamp(40px, 5vw, 72px); }
.tags-k { font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-right: .6rem; }
.tags-f .tag { font-size: .84rem; padding: .25em .8em; }
.tags-f .tag[aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; }
.idx-only { margin-top: 0; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(40px, 5vw, 72px); }
.pager > :last-child { justify-self: end; }
.pager-n { font-weight: 800; font-size: 1rem; letter-spacing: .04em; }

/* ===== 記事 ===== */
.art { padding: clamp(28px, 4vw, 56px) 0 clamp(80px, 9vw, 140px); }
.art-head { padding-top: 22px; align-items: start; }
.art-meta { grid-column: 1 / span 3; }
.art-date { display: block; font-weight: 800; font-size: clamp(56px, 6.4vw, 104px); line-height: .8; letter-spacing: -.06em; color: var(--red); }
.art-date small { display: block; font-size: .8rem; letter-spacing: .06em; font-weight: 700; margin-bottom: 10px; color: var(--mute); }
.art-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 22px; }
.art-ttl { grid-column: 4 / span 9; }
.art-title { font-size: clamp(30px, 3.7vw, 58px); line-height: 1.28; letter-spacing: -.03em; }
.art-title::after { content: ""; display: block; width: 76px; height: 6px; margin-top: 24px; background: var(--red); transform-origin: left center; }
.js:not(.is-static) .art-title::after { transform: scaleX(0); transition: transform .9s var(--ease-io) .4s; }
.js:not(.is-static) .art-head.in .art-title::after { transform: none; }
.art-ph { margin-top: clamp(36px, 4.5vw, 64px); aspect-ratio: 16 / 9; }
.art-g { margin-top: clamp(40px, 5vw, 80px); align-items: start; }
.art-side { grid-column: 1 / span 3; position: sticky; top: calc(var(--hh) + 32px); padding-top: 16px; border-top: 2px solid var(--ink); }
.art-side-k { font-size: .82rem; font-weight: 700; color: var(--mute); margin-bottom: 14px; }
.art-side .tel-big span { font-size: clamp(24px, 2vw, 30px); }
.art-side-n { margin-top: 14px; font-size: .8rem; color: var(--mute); line-height: 1.85; }
.art-body { grid-column: 4 / span 8; min-width: 0; }

/* 本文（blog-core.js の renderBlocks が出す HTML） */
.post-body { font-size: 1.06rem; line-height: 2.05; overflow-wrap: anywhere; max-width: 42em; counter-reset: h; }
.post-body p { margin: 0 0 1.4em; }
.post-body a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.post-body > h2 { counter-increment: h; margin: 2.8em 0 1em; padding-top: 18px; border-top: 2px solid var(--ink); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.5; letter-spacing: -.01em; }
.post-body > h2::before { content: counter(h, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--lat); font-weight: 800; font-size: 2.1em; line-height: .8; letter-spacing: -.06em; color: var(--red); }
.post-body > h2:first-child { margin-top: 0; }
.post-body.plain { white-space: pre-wrap; }
/* よくある質問（dl.faq） */
.faq { margin: 0 0 2em; border-top: 2px solid var(--ink); }
.faq-item { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.faq dt, .faq dd { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; margin: 0; }
.faq dt { font-weight: 900; line-height: 1.7; }
.faq dd { margin-top: .6rem; color: var(--mute); line-height: 1.95; }
.qa { font-family: var(--lat); font-weight: 800; font-size: 1rem; line-height: 1; }
.qa.q { color: var(--red); }
.qa.a { color: var(--ink); }
/* 英語のまとめ */
.en-summary { margin-top: 3em; padding: 26px 28px 10px; background: var(--paper); border-top: 4px solid var(--red); }
.post-body .en-summary h2.en-h { display: flex; align-items: center; gap: .7em; margin: 0 0 14px; font-family: var(--lat); font-weight: 800; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1; }
.post-body .en-summary h2.en-h::before { content: ""; width: .7em; height: .7em; background: var(--red); flex: 0 0 auto; }
.en-summary p[lang=en] { margin: 0 0 1em; font-family: var(--lat); font-weight: 500; font-size: 1rem; line-height: 1.8; }

/* 店の事実（記事・一覧の下） */
.store { padding: clamp(72px, 8vw, 120px) 0; background: var(--paper); }
.store .g { row-gap: 28px; align-items: start; }
.store-head { grid-column: 1 / span 4; padding-top: 22px; }
.store-h { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.2; letter-spacing: -.02em; }
.store-h::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 16px; background: var(--red); }
.store-dl { grid-column: 5 / span 8; }
.store-acts { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 3rem; }

/* ほかのコラム */
.sec.rel { padding-top: 0; }

@media (max-width: 1080px) {
  .art-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.6rem; margin-bottom: 26px; }
  .art-tags { margin-top: 0; }
  .art-ttl { grid-column: 1 / -1; }
  .art-side { grid-column: 1 / -1; position: static; order: 2; margin-top: 48px; }
  .art-body { grid-column: 1 / -1; }
  .store-head, .store-dl, .store-acts { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .art-date { font-size: 56px; }
  .art-title { font-size: clamp(25px, 7vw, 32px); }
  .art-title::after { width: 56px; height: 5px; margin-top: 18px; }
  .art-ph { aspect-ratio: 4 / 3; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }
  .post-body { font-size: 1rem; line-height: 2; }
  .en-summary { padding: 22px 18px 8px; }
  .faq dt, .faq dd { grid-template-columns: 2em 1fr; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-n { display: none; }
  .tags-k { width: 100%; }
}