/* ============================================================================
   コラム衛星の追加スタイル
   ----------------------------------------------------------------------------
   本体（hotel-tenpyo-naramachi.jp）の実CSS = /assets/css/honban.css が先に読まれている前提。
   ここは「本体に無いもの＝長文記事のために足りないもの」だけを足す。本体の値は上書きしない。

   骨格（KV / パンくず / カード / 目次 / 戻るボタン）は本体のクラスをそのまま使うので
   ここには出てこない。honban.css が当たっている。

   本体の実測値（1440px時）:
     :root       letter-spacing 4.32px（0.24em）★全体に効いている
     p, a, li    16〜18px / lh 1.7 / fw 100
     .fs-md      18〜22px / lh 1.6 / fw 500
     h2(.ttl等)  clamp(1.75rem, 1.375rem + 1.17vw, 2.5rem) / fw 500

   ============================================================================
   ■ A案「余白と静けさ」（2026-08-26）
   ----------------------------------------------------------------------------
   記事ページは「読ませる」ことに全振りする。装飾を足さず、余白・行間・字送り・
   罫線の引き方だけで格を作る。旅館の設えのように、静かで密度の低い紙面にする。

   【この案の背骨＝2本の幅】
     --col-frame   器の79%(1440px時 1024px) … 紙面の骨格。**罫線と構造要素**だけがここまで届く
     --col-measure 46rem(736px)   … 文字の器。**読む文字は全部この幅**に揃える
   2本とも器の中央に置くので、左右の余白は必ず対称になる。

   直前の版は「段落 832px を左寄せ、h2 の罫だけ 1024px」だったため、
   罫が本文の**右側にだけ 192px はみ出す**状態だった（実測: 段落 x=208 / h2 罫 右端 x=1232）。
   さらに h1 は器いっぱい（x=72）、リード文は x=208 と、
   **文字の左端が2つ**あった。静けさは「揃っていること」からしか出ないので、
   まず全部の文字を1本の左端（1440px時 x=352）に揃えるところから始めた。

   【引き算したもの】
     - h2 の金茶の縦バー ＋ 下罫  → 見出しの**上**に骨格幅の細罫1本だけ（章の切れ目を作る）
     - 目次の囲み枠            → 上下の細罫だけ（箱を減らす）
     - 著者ブロックの塗り・太い金茶の左罫 → 上の細罫だけ
     - 本文 strong の金茶下線（22箇所） → 字面のウェイト差だけで示す
     - 「一覧へ戻る」の墨ベタボタン → 線だけのボタン（色の点は予約CTAに1つだけ残す）

   【足したもの】余白と行間のみ。要素は1つも増やしていない。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. A案の設計トークン
   ---------------------------------------------------------------------------
   --col-frame は「器（.post_area .container）に対する割合」で持つ。
     実測: 器は 1440px 時 1296px / 1920px 時 1600px（本体 --max-width: 1600px で頭打ち）。
     ここを 64rem 固定にすると 1920px で 1024/1600 = **64%** まで痩せ、
     「骨格は器の 70% 以上」という取り決めを広い画面でだけ割る（2026-08-26 実測で踏んだ）。
     79% にすると 1440px でちょうど 1024px になり、1920px でも 72%（1152px）で残る。
     下限 60rem は 1024〜1280px で骨格が文字の器に近づきすぎないため、
     上限 72rem は 4K で罫が伸びきらないための頭打ち。

   --col-gutter は「骨格幅の要素の中で、文字を器の幅まで押し込む内側余白」。
   100% はその要素の**包含ブロック**（= .col-main / .col-body = 骨格幅）で解決されるので、
   骨格が何 px になっても「中央に置いた 46rem」と必ず同じ左端になる。
   骨格 < 文字の器 になれば負になるので max(0px, …) で 0 に落とす
   ＝ SP のはみ出し（守ること7）はここで構造的に塞いでいる。
--------------------------------------------------------------------------- */
.single-content,
.category-news {
  /* 罫線・目次・著者・CTA・関連記事が届く幅（960〜1152px / 器の 79%） */
  --col-frame: clamp(60rem, 79%, 72rem);
  /* 読む文字はすべてこの幅（736px。守ること2: 640〜840px の内側） */
  --col-measure: 46rem;
  --col-gutter: max(0px, calc((100% - var(--col-measure)) / 2));
}

/* ---------------------------------------------------------------------------
   1. 記事の器
   ---------------------------------------------------------------------------
   本体の `.header-contents` は position:fixed。その下に潜らないよう KV 側で逃がす。
   `.post_area` / `.category-page` は本体のクラスなので余白は本体の値のまま。
--------------------------------------------------------------------------- */
/* ★ Tailwind の .container ユーティリティと本体の .container が名前衝突する。
   本体の .container は「画面幅の 90〜95% を中央寄せする外枠」だが、
   Tailwind の .container は `@media (min-width:1280px){ max-width:1280px }` を付けてくるので、
   広い画面で本体より内側に食い込む（2026-08-25 実測: 1324px のはずが 1280px で頭打ち）。
   このサイトでは本体の .container が正なので、Tailwind 側の上限を外すだけにして、
   幅そのものは本体の .container の値（画面幅の 90〜95%）に任せる。自分で決め直さない。 */
.single-content .container,
.category-news .container {
  max-width: none;
}

.single-content,
.category-news {
  color: var(--color01);
  background: var(--color02);
}

/* KV は本体 .category-top / .news-top が 80vh の全面写真。コラムでそこまで取ると
   本文まで遠いので、下層ページの中では低めにする（本体の意匠は保つ）。

   ★ position を fixed → relative に戻している。本体の `.child-top` は
     `position: fixed; z-index: -1; height: 1080px` で、本文が上を流れていく作り。
     衛星は器（.single-content / .category-news）に生成りの背景を敷くので、
     fixed のままだと KV がその背後に回り込んで**何も見えなくなる**（実測で白飛びした）。
     普通に流したうえで高さを決める。見た目（写真＋黒帯＋白抜き文字）は本体と同じ。 */
.single-content .category-top,
.category-news .category-top {
  position: relative;
  z-index: 0;
  height: 46vh;
  min-height: 320px;
  background-position: center 40%;
}
.single-content .category-top .area,
.category-news .category-top .area {
  height: 100%;
}
.category-top .ttl_box {
  width: min(92%, var(--max-width));
  margin: 0 auto;
  padding-top: var(--header-height);
}
.category-top .ttl_box .ttl {
  font-size: clamp(1.75rem, 1.375rem + 1.17vw, 2.5rem);
  font-weight: var(--fw-regular);
  letter-spacing: 0.3em;
  margin: 0;
}
.category-top .ttl_box .lead {
  margin-top: 0.8em;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   2. 記事の扉（カテゴリ・タイトル・日付）
   ---------------------------------------------------------------------------
   本体 single-news.php の .area01 は「左にタイトル / 右端に日付」の
   `justify-content: space-between` な横並び。器が 1296px あるので、
   日付が本文から 1.2m 離れた右端に独りで立ち、扉としてまとまらない
   （2026-08-26 実測: h1 x=72 / 日付 x=1258）。

   A案では扉を**文字の器（46rem）に収めて縦に積む**。
   カテゴリ → タイトル → 日付 の順に静かに落ちていく組みにして、
   下の細罫（.col-main の border-top）で本文と切る。
   これで h1 の左端＝リード文の左端＝本文の左端が1本に揃う。
--------------------------------------------------------------------------- */
.post_area .area01 {
  max-width: var(--col-measure);
  margin: 4.5rem auto 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
.post_area .area01 .box01 {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}
.post_area .area01 .ttl {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  font-weight: var(--fw-medium);
  /* 明朝の大きな見出しは行間を空けるほど落ち着く。1.45 → 1.7 */
  line-height: 1.7;
  letter-spacing: 0.1em;
  margin: 0;
}
.post_area .area01 .date {
  font-size: 0.813rem;
  letter-spacing: 0.22em;
  opacity: 0.5;
  white-space: nowrap;
  margin: 0;
}
/* 一覧カードのタグは本体どおり深紅のベタ。扉の1枚だけは、
   紙面の一番上に色の面を置きたくないので**文字だけの金茶ラベル**にする（引き算）。 */
.post_area .tag {
  background: var(--color04);
  color: #fff;
  font-size: 0.813rem;
  letter-spacing: 0.1em;
}
.post_area .area01 .tag {
  background: none;
  color: var(--color07);
  font-size: 0.688rem;
  letter-spacing: 0.3em;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   3. 記事本文
   ---------------------------------------------------------------------------
   ★ 幅について: 器は 1296px あるが、日本語の1行をそのまま流すと読めない。
     骨格（.col-main）1024px（1440px 時）は残したまま、**文字だけ 46rem(736px)** に収めて中央に置く。
     1行 ≒ 40字。832px（≒44字）から少し詰めて、行の折り返しで目が迷わない長さにした。
   ★ 字送りについて: 本体は :root で 4.32px（0.24em）。短いリード文には効くが、
     長文では読みづらいので記事本文だけ 0.075em に詰める。ここは意図的な逸脱。
   ★ 行間について: 2.0 → 2.15。行が離れるほど紙面は静かになるが、離しすぎると
     段落が崩れて「行の集まり」に見えるので、段落間（2.2em）が行間より確実に広くなる値で止めた。
--------------------------------------------------------------------------- */
/* ★ 本体の `.area` / `.area02` は付けない。
   `.post_area .area02 { align-items: flex-end }`（0,2,0）が
   `.col-layout`（0,1,0）に勝って、サイドバーが記事の最下部へ落ちるため
   （2026-08-25 実測: aside の y が 9446px＝本文の一番下だった）。
   本体クラスを借りるのは「様式が欲しいとき」だけにする。 */
/* ★ 2026-08-26: 2段組み（本文 + サイドバー）をやめて1段組みにした。
   画像を使わない方針が決まったので、文章を主役にした縦の流れに組み直す。 */
/* ★ A案: 罫線を .col-layout（器 1296px）から .col-main（骨格 1024px）へ移した。
   器いっぱいの罫は、その下に来る文字（736px）より 280px も広く、扉と本文を
   切るというより**紙面を横断する線**になっていた。罫は骨格に揃える。 */
.col-layout {
  border-top: none;
  margin-top: 3rem;
  padding: 0 0 1rem;
}
.col-main {
  min-width: 0;
  max-width: var(--col-frame);   /* 紙面の骨格（器の 79%。1440px 時 1024px） */
  margin-inline: auto;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  padding-top: 3.75rem;
}

/* 読む文字は全部この幅・この中央。ここが A案の一番の骨。 */
.col-body > p,
.col-body > ul,
.col-body > ol,
.col-body > blockquote,
.col-body > dl,
.col-body > h3,
.col-body > h4,
.col-lead {
  max-width: var(--col-measure);
  margin-inline: auto;
}
/* 章の切れ目（h2 の罫）・表・区切り線は骨格いっぱいに伸ばす。
   文字より 144px ずつ広いので、章が「一枚の紙」に見える。 */
.col-body > h2,
.col-body > table,
.col-body > hr {
  max-width: none;
}

/* 目次: 本文の直前に置く（守ること3）。読む前に全体像が分かるように。
   ★ A案: 囲み枠をやめて上下の細罫だけにした。囲みは「箱」を1つ増やす装飾で、
     ここは章立てを静かに見せたいだけの場所。中身は --col-gutter で文字の器まで押し込む。 */
.col-toc {
  border: none;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  border-bottom: 1px solid rgba(22, 22, 22, 0.16);
  padding: 2.8rem var(--col-gutter);
  margin: 0 0 4.5rem;
}
.col-toc__ttl {
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  text-align: center;
  color: rgba(22, 22, 22, 0.5);
  margin: 0 0 1.8rem;
  padding-bottom: 0;
  border-bottom: none;   /* 見出しの下罫も削る。上下の罫だけで十分に囲えている */
}
.col-toc .toc-list { list-style: none; margin: 0; padding: 0; }
.col-toc .toc-list li + li { margin-top: 1.05em; }
.col-toc .toc-list a {
  display: flex;
  gap: 1.2em;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.9;
  letter-spacing: 0.09em;
  color: var(--color01);
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.col-toc .toc-list a:hover { opacity: 0.55; }
.col-toc .toc-list .num {
  font-size: 0.688rem;
  letter-spacing: 0.16em;
  color: var(--color07);
  flex-shrink: 0;
}

/* 予約導線: 読み終えた位置に置く。
   ★ A案: 上の細罫＋大きめの余白で「読み終わり」を作る。紙面で唯一の色の面。 */
.col-cta {
  margin-top: 4.5em;
  padding: 3.2rem var(--col-gutter) 0;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  text-align: center;
}
/* ★ 本体は `p { text-align: left }` を直接当てているので、親の text-align:center が
   p にだけ効かない（実測: 導線の文だけ左、ボタンだけ中央という半端な組みになっていた）。 */
.col-cta__lead {
  text-align: center;
  font-size: 0.938rem;
  letter-spacing: 0.18em;
  line-height: 2;
  opacity: 0.6;
  margin: 0 0 1.8em;
}
.col-cta a {
  display: inline-block;
  min-width: 18em;
  background: var(--color04);
  color: #fff;
  text-decoration: none;
  padding: 1.15em 2.6em;
  font-size: 0.813rem;
  letter-spacing: 0.26em;
  transition: opacity 0.25s ease;
}
.col-cta a:hover { opacity: 0.85; }

/* リード文は本文より少し大きく、少し薄く。導入は「声の低い前置き」にする。 */
.col-lead {
  font-size: clamp(0.938rem, 0.89rem + 0.23vw, 1.125rem);
  line-height: 2.3;
  letter-spacing: 0.1em;
  color: rgba(22, 22, 22, 0.62);
  margin-block: 0 4rem;
}

.col-body {
  font-size: clamp(0.938rem, 0.906rem + 0.16vw, 1.063rem);
  font-weight: var(--fw-regular);
  line-height: 2.15;
  letter-spacing: 0.075em;
}

/* 本体の `p, a, li`（0,0,1）が 16〜18px / lh 1.7 を直接当ててくるので、
   .col-body に置いた寸法が p と li にだけ届かない。継承に戻して紙面を1つの調子に揃える。 */
.col-body :is(p, li, dd, dt) {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}
/* ★ margin ショートハンドを使わない。margin-inline: auto（中央寄せ）を消してしまい、
   段落だけが左に寄って罫線と揃わなくなる（直前の版で実際に起きていた）。 */
.col-body p {
  margin-block: 0 2.2em;
}
.col-body > *:first-child { margin-top: 0; }
.col-body > *:last-child  { margin-bottom: 0; }

/* ★ Stem の本文は <h2><p>…</p></h2> を出す（実測: h2 は 7個中7個）。
   これを放置すると p の font-size が h2 に勝ち、見出しが本文と同じ大きさで描画される
   （別案件の稼働サイトで実際に起きた）。
   ColumnDetail 側でアンラップしているが、<h2><div> 等が来ても壊れないよう CSS でも保険。 */
.col-body :is(h2, h3, h4) > :is(p, div, span) {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.col-body li > :is(h2, h3, h4) { margin-top: 0; }

/* h2 = 章の切れ目。
   ★ A案: 金茶の縦バーと下罫をやめ、**見出しの上に骨格幅の細罫を1本**引く。
     縦バーは見出しを飾るが、章が変わったことは伝えない。上の罫＋大きな余白なら、
     スクロールしていて「紙が1枚めくれた」ように見える。
     文字は --col-gutter で器の幅まで押し込むので、罫だけが左右に 144px 伸びる。 */
.col-body h2 {
  position: static;
  margin: 3.6em 0 1.7em;
  padding: 2.4em var(--col-gutter) 0;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  border-bottom: none;
  font-size: clamp(1.125rem, 1.05rem + 0.31vw, 1.375rem);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  letter-spacing: 0.13em;
  color: var(--color01);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.col-body h2::before { content: none; }
/* 最初の h2 は目次のすぐ下。目次の下罫と二重線になるので、罫と余白を落とす。 */
.col-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* h3 = 章の中の小見出し。
   ★ A案: 深紅をやめて墨に統一し、代わりに**短い金茶の罫を上に1本**置く。
     色を減らして線に置き換える、というこの案の基本方針をそのまま適用した。
     罫は要素の内側（left:0）なので、SP でも左にはみ出さない。 */
.col-body h3 {
  position: relative;
  margin-block: 3.2em 1.2em;
  padding-top: 1.1em;
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.188rem);
  font-weight: var(--fw-medium);
  line-height: 1.9;
  /* 本文（0.075em）より明確に開けて「見出しの字面」にする */
  letter-spacing: 0.16em;
  color: var(--color01);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.col-body h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3em;
  height: 1px;
  background: var(--color07);
}

.col-body :is(ul, ol) {
  margin-block: 0 2.2em;
  padding-left: 1.35em;
}
.col-body ul { list-style: disc; }
.col-body ol { list-style: decimal; }
.col-body li { margin-bottom: 0.9em; }
.col-body li::marker { color: var(--color07); font-size: 0.85em; }
.col-body :is(ul, ol) :is(ul, ol) { margin-block: 0.7em 1em; }

/* ★ A案: strong の金茶下線をやめた。この記事だけで 22 箇所あり、
   紙面が下線だらけになる。明朝はウェイト差（100 → 500）が十分に見えるので、
   線を引かなくても強調は伝わる。 */
.col-body strong {
  font-weight: var(--fw-medium);
  border-bottom: none;
}
/* リンクは押せることが分からないと困るので下線を残す。ただし色は薄める。 */
.col-body a {
  color: var(--color04);
  border-bottom: 1px solid rgba(128, 18, 12, 0.3);
}

/* ---------------------------------------------------------------------------
   4. 目次（本体 .toc-block の中身の調整だけ）
--------------------------------------------------------------------------- */
.post_area .area03 { margin: 0; }
.post_area .area03 .toc-block {
  padding: 1.8rem 1.6rem;
}
.post_area .area03 .toc-block .sub_ttl {
  text-align: center;
  letter-spacing: 0.3em;
  padding-bottom: 0;
  margin: 0;
}
.post_area .area03 .toc-block .toc-list {
  width: 100%;
  list-style: none;
  padding: 0;
}
.toc-block .toc-list li a {
  display: flex;
  gap: 0.2em;
  align-items: baseline;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.toc-block .toc-list li a:hover { border-bottom-color: var(--color07); }
.toc-block .toc-list li a .num {
  color: var(--color07);
  font-size: 0.813rem;
  letter-spacing: 0.08em;
  margin-right: 0.8em;
}

/* ---------------------------------------------------------------------------
   5. 一覧（本体 .category-page / .post-card に足りないぶん）
--------------------------------------------------------------------------- */
.category-page .area { gap: 3rem; }

.category-menu li a {
  position: relative;
  text-align: left;
  width: 100%;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.category-menu li a:hover { color: var(--color04); }
.category-menu li a.active {
  color: var(--color04);
  border-bottom-color: var(--color04);
}
.category-menu li a .cnt {
  float: right;
  font-size: 0.75rem;
  opacity: 0.5;
  letter-spacing: 0;
}

.post-list .list-lead {
  margin: 0 0 2rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
}

.post-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* ★ サムネイルは出さない（2026-08-26 ユーザー判断）。
   本体 archive-news.php はアイキャッチを持つ作りだが、Stem の columns API に
   記事ごとの画像項目が無いため、衛星は slug のハッシュで本体の風景写真を
   割り当てていた。記事内容と無関係な絵が付き、記事が増えると同じ絵が繰り返される。
   「そもそも記事に画像を入れない」方針なので、カードは文字だけにする。
   .post-card .thumb の指定はここにあったが、要素ごと無くなったので削除した。 */
.post-card .title {
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.post-card .excerpt {
  margin-top: 0.6em;
  line-height: 1.8;
  letter-spacing: 0.06em;
  opacity: 0.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .meta .date {
  font-size: 0.813rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* 関連記事も骨格に揃える（罫は 1024px、文字は 736px）。
   本体 `.post_area .area` の墨ベタ罫（#161616 / 器いっぱい）は紙面で一番強い線に
   なってしまうので、章の切れ目と同じ細罫に置き換える。 */
.post_area .area05 {
  max-width: var(--col-frame);
  margin-inline: auto;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  padding: 4.5rem 0 0;
}
.post_area .area05 .sub_ttl {
  /* 本体 .fs-md（18〜22px / 500）だと関連記事の見出しが本文の h2 より目立つ。
     ここは案内板なので、目次の見出しと同じ小さなラベルに落とす。 */
  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.34em;
  color: rgba(22, 22, 22, 0.5);
  padding: 0 var(--col-gutter);
  margin: 0 0 1.8rem;
}
.post_area .area05 .grid {
  padding: 0 var(--col-gutter);
}

/* 一覧へ戻る。
   ★ A案: 墨ベタをやめて線だけのボタンにした。読み終わりの深紅CTAが紙面で唯一の
     色の面であってほしいので、その直後に2つ目のベタ面を置かない。 */
.post_area .back {
  /* 戻る導線も骨格の中に置く（中央寄せなので見た目は変わらないが、
     器 1296px のまま放置すると画面幅が変わったとき紙面の中心とズレる）。 */
  max-width: var(--col-frame);
  margin: 4.5rem auto 0;
}
.post_area .back a {
  background: none;
  color: var(--color01);
  border: 1px solid rgba(22, 22, 22, 0.35);
  font-size: clamp(0.813rem, 0.78rem + 0.14vw, 0.938rem);
  letter-spacing: 0.26em;
  padding: 1.1em 3.2em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.post_area .back a:hover {
  background: var(--color01);
  border-color: var(--color01);
  color: var(--color02);
}

/* ---------------------------------------------------------------------------
   6. 本体サイトへの導線
   ★ 2026-08-26: 記事末尾の「公式サイト」ボタン（.tncta）は削除した。
     ヘッダーとフッターに本体への導線が既にあり、重複していたため。
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   7. 著者（E-E-A-T）
   ---------------------------------------------------------------------------
   JSON-LD の Article.author と **同じ値** を可視でも出す（両層原則）。
   器だけ置いて可視要素が無いのは死蔵、という制作正典の一番の禁じ手。

   ★ A案: 塗り（金茶6%）と太い金茶の左罫をやめ、上の細罫だけにした。
     著者は記事の付け足しではなく**署名**なので、囲って目立たせるより、
     本文と同じ静けさのまま名前が置かれている方が信用に見える。
--------------------------------------------------------------------------- */
.tnauthor {
  margin-top: 5.5em;
  padding: 2.6rem var(--col-gutter) 0;
  border: none;
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  background: none;
}
.tnauthor__label {
  font-size: 0.688rem;
  letter-spacing: 0.3em;
  color: rgba(22, 22, 22, 0.45);
  margin: 0 0 1.1em;
}
.tnauthor__name {
  font-size: clamp(0.938rem, 0.9rem + 0.19vw, 1.063rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  line-height: 1.9;
  margin: 0;
}
.tnauthor__role {
  font-size: 0.813rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.16em;
  color: var(--color07);
  margin-right: 1em;
}
.tnauthor__bio {
  margin: 1em 0 0;
  font-size: 0.813rem;
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: rgba(22, 22, 22, 0.6);
}

/* ---------------------------------------------------------------------------
   8. SP
   ---------------------------------------------------------------------------
   狭い画面では --col-gutter が 0 に落ちるので、罫線・目次・著者・CTA は
   自動的に本文と同じ幅になる（構造要素と文字の2本立てが1本に畳まれる）。
   ここで足すのは「畳んだ結果きつくなる余白」の手当てだけ。
--------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .category-page .area,
  .post_area .area02 {
    flex-direction: column;
  }
  .category-menu.w-20,
  .post-list.w-80 {
    width: 100%;
  }
  .category-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-bottom: 2rem;
  }
  .category-menu li a { width: auto; padding: 0.4em 0.2em; }
  .category-menu li a .cnt { float: none; margin-left: 0.4em; }
  .post_area .area01 {
    /* 本体 .area01 の margin-top 65px は SP では空きすぎる */
    margin-top: 2.5rem;
    gap: 1rem;
    /* .col-main と同じ内側余白。付けないと h1 だけ 8px 左にずれる（実測） */
    padding-inline: 0.5rem;
  }
  .post_area .area01 .box01 { gap: 0.9rem; }
  .col-layout {
    margin-top: 1.75rem;
    padding-top: 0;
  }
  /* 本体 .container は画面幅の 95%（実測: 375px で左右 9px ずつ）。
     長文を読ませる面としては端が詰まりすぎるので、骨格に少しだけ内側余白を足す。
     ここも padding なので、横幅が増えることはない＝はみ出しの原因にならない。 */
  .col-main {
    padding-top: 2.25rem;
    padding-inline: 0.5rem;
  }
  .col-body {
    /* 狭い1行では行間を空けすぎると視線が戻れない。2.15 → 1.95 */
    line-height: 1.95;
    letter-spacing: 0.06em;
  }
  .col-lead { line-height: 2.1; margin-bottom: 2.6rem; }
  .col-body p { margin-block: 0 1.9em; }
  .col-body h2 { margin: 2.6em 0 1.3em; padding-top: 1.8em; }
  .col-body h3 { margin-block: 2.4em 1em; }
  .col-toc { padding: 2rem 0; margin-bottom: 2.8rem; }
  .col-toc__ttl { margin-bottom: 1.4rem; }
  .col-toc .toc-list a { font-size: 0.875rem; gap: 1em; }
  .col-cta { padding-top: 2.6rem; }
  .col-cta a { min-width: 0; width: 100%; padding: 1.1em; letter-spacing: 0.2em; }
  .tnauthor { padding-top: 2rem; }
  .post_area .area05 { padding-top: 3rem; }
  .post_area .back { margin-top: 3rem; }
  .post_area .back a { padding: 1.1em 2em; letter-spacing: 0.2em; }
}

/* ------------------------------------------------------------------
   フッターのアコーディオン: 本体と同じ「縦積み」に戻す

   本体（稼働中）は .list が display:block で、項目が縦に並ぶ（実測 212x122 / 各 41px）。
   衛星は開くときに .open を付けるため、honban.css の

       .accordion .open .list { display: flex; }

   が効いてしまい、**項目が横一列に潰れる**。
   実測（ご案内 5項目・1440px）: .list が flex/row/nowrap 290x132 になり、
   各項目が 44〜74px 幅・**4行に折り返す**（「お/知/ら/せ」のような縦書き状態）。
   項目が増えるほど悪化する（衛星は本体の3項目に「よくあるご質問」「なら旅コラム」を足すので5項目）。

   honban.css は本体の実CSSを verbatim 配信しているので触らない。
   satellite.css は honban.css の**後**に読まれるので、ここで打ち消す。
   ------------------------------------------------------------------ */
footer .accordion .open .list {
  display: block;
}

/* ------------------------------------------------------------------
   コラム一覧: 文章だけの見せ方（2026-08-26）

   本体 archive-news.php はアイキャッチ前提のカードで、
   `.post-list .grid` が `repeat(auto-fill, minmax(300px,1fr))` の**3列グリッド**。
   サムネイルをやめた結果、320px の細い列に文字だけが入り、
   記事1本だと**2列分が空白**になって見た目が破綻した（実測: 器 993px に対しカード 320px）。

   絵が無いなら、絵の器に文字を入れるのではなく**文章の見せ方**にする。
   全幅の記事リストにして、日付・カテゴリ → 見出し → 抜粋 の縦の流れで読ませる。
   罫線で区切るのは本体の下層ページ（.child-top 系）と同じ語彙。
   ------------------------------------------------------------------ */
.post-list .grid {
  display: block;
}

.post-list .grid .post-card {
  border-top: 1px solid rgba(22, 22, 22, 0.14);
}
.post-list .grid .post-card:last-child {
  border-bottom: 1px solid rgba(22, 22, 22, 0.14);
}

.post-list .grid .post-card > a {
  display: block;
  padding: 2.4rem 0.2rem;
  transition: opacity 0.3s ease;
  /* ★ 1行を読める幅に収める。器は 993px あるが、そのまま流すと
     日本語の1行が長すぎて読みにくい（この衛星の関所自身が
     「本文の1行幅は 640〜840px」を基準にしている）。 */
  max-width: 78ch;
}
.post-list .grid .post-card > a:hover {
  opacity: 0.62;
}

/* 日付・カテゴリは横に並べる。本体は space-between だが、
   全幅にすると両端に離れすぎるので左寄せで揃える。 */
.post-list .grid .post-card .meta {
  justify-content: flex-start;
  gap: 1.6rem;
  margin-bottom: 0.9rem;
}

.post-list .grid .post-card .title {
  margin-top: 0;
  line-height: 1.7;
}

/* 抜粋は2行で止める。長さが揃わないと一覧のリズムが崩れる。 */
.post-list .grid .post-card .excerpt {
  margin-top: 0.9rem;
  line-height: 2;
  opacity: 0.72;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

@media screen and (max-width: 630px) {
  .post-list .grid .post-card > a { padding: 1.8rem 0; }
  .post-list .grid .post-card .meta { gap: 1rem; margin-bottom: 0.6rem; }
  .post-list .grid .post-card .excerpt { margin-top: 0.6rem; line-height: 1.9; }
}