/* =========================================================================
   GDOCK 第3層：ストーリー記事（category: story）
   第2層 gdock-article.css の上に載る。.post_content 内スコープ。

   ページ層との違い：
     ストーリーの見出しは「01 ── はじまり」のように番号＋ラベルが付く。
     CSSカウンタでは作れないので、見出しの直前に <p class="num"> を置く方式にした。
     （見出しブロックの中に <span> を入れると Gutenberg が警告を出すため）
   ========================================================================= */

/* ===== SWELL の見出しデザインを .col の中だけ無効化 =====
   宣言していないプロパティは相手のものが残るので、まとめて打ち消す。 */
.post_content .col h2,
.post_content .col h3{
  background:none;
  background-image:none;
  padding:0;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:var(--ink);
  text-align:left;
  overflow:visible;
}
.post_content .col h2::before, .post_content .col h2::after,
.post_content .col h3::before, .post_content .col h3::after{
  content:none;
  display:none;
}
/* .num 段落と対にするので、見出し側の上マージンは詰める */
.post_content .col h2{margin-top:0;margin-bottom:1em}

/* ===== 章ラベル（01 ── はじまり） ===== */
.post_content .col p.num{
  font-size:11.5px;
  letter-spacing:.26em;
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  margin:3.4em 0 16px;
  line-height:1.6;
}
/* 記事の先頭に来た場合は上の余白を詰める */
.post_content .col > p.num:first-child{margin-top:0}

/* ===== 共感フック（ストーリーの入口） ===== */
.post_content .hook{margin-bottom:clamp(24px,4vw,40px)}
.post_content .hook .mk{width:38px;height:3px;background:var(--grad);border-radius:var(--r-chip);margin-bottom:26px}
.post_content .hook p{font-size:clamp(17px,2.1vw,20.5px);line-height:2.1;color:var(--ink-2);font-weight:500;letter-spacing:.01em}
.post_content .hook p + p{margin-top:1.3em}
.post_content .hook .q{color:var(--ink);font-weight:600}
.post_content .hook .turn{color:var(--ink);font-weight:700}
.post_content .hook .turn span{background:linear-gradient(transparent 64%,rgba(255,171,46,.30) 64%)}

/* ===== ドロップキャップは有効のまま =====
   ストーリーの書き出しは長い段落なので、頭文字が次の段落に食い込まない。
   （/about/ は1行と短いため page-about.css で無効化している） */

/* =========================================================================
   ここから追記（2026-08-28）— 記事ヘッダーと目次

   ★このファイルはストーリー記事でしか読み込まれないので、
     .post_content の外を触ってもコラム63件には一切影響しない。
     （functions.php の cat-{slug}.css 読み分けが効いている）
   ========================================================================= */

/* ===== 記事ヘッダー：SWELL の p-articleHead を奪う =====
   SWELL 既定は左寄せ・小さめで、下の h2 より弱く見えてしまう。
   モック（gdock-story-preview.html）の .a-head と同じ見え方に揃える。 */
.p-articleHead.c-postTitle{
  max-width:820px;
  margin:0 auto;
  padding:clamp(20px,4vw,48px) 0 0;
  text-align:center;
  background:none;
  border:none;
  box-shadow:none;
}

/* カテゴリチップ（● STORY ／ ストーリー） */
.p-articleHead.c-postTitle::before{
  content:"● STORY ／ ストーリー";
  display:table;
  margin:0 auto 24px;
  padding:6px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.6;
  color:#fff;
  background:var(--grad);
  border-radius:var(--r-chip,2px);
  text-transform:uppercase;
}

/* タイトル本体 */
.p-articleHead.c-postTitle .c-postTitle__ttl{
  font-size:clamp(27px,4.2vw,48px);
  font-weight:600;
  line-height:1.34;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0;
  padding:0;
  background:none;
  border:none;
  text-align:center;
}
.p-articleHead.c-postTitle .c-postTitle__ttl::before,
.p-articleHead.c-postTitle .c-postTitle__ttl::after{content:none;display:none}

/* メタ行（カテゴリ・日付・著者）を中央に */
.p-articleMetas.-top{
  max-width:820px;
  margin:26px auto 0;
  justify-content:center;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.03em;
}

/* アイキャッチ（SWELL設定で表示にした場合） */
.p-articleThumb{
  max-width:1120px;
  margin:clamp(32px,5vw,64px) auto 0;
}
.p-articleThumb img{
  border-radius:var(--r-card,4px);
  box-shadow:0 30px 70px rgba(20,21,26,.16);
}

/* 本文の始まりが近すぎないように */
.p-articleHead.c-postTitle + .p-articleMetas.-top + .post_content,
.p-articleThumb + .post_content{
  margin-top:clamp(32px,5vw,60px);
}

/* ===== 目次：黒い帯をやめて、記事のトーンに合わせる ===== */
.post_content .p-toc,
.p-toc:not(.-modal){
  max-width:var(--readw,700px);
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card,4px);
  box-shadow:none;
  padding:26px 28px;
}
.p-toc:not(.-modal) .p-toc__ttl{
  display:block;
  background:none;
  color:var(--accent);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-align:left;
  padding:0 0 14px;
  border:none;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.p-toc:not(.-modal) .p-toc__ttl::before,
.p-toc:not(.-modal) .p-toc__ttl::after{content:none;display:none}
.p-toc:not(.-modal) a{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.9;
}
.p-toc:not(.-modal) a:hover{color:var(--accent)}