/* =========================================================================
   GDOCK 第3層：固定ページ「G DOCK とは」(/about/)
   第2層(gdock-article.css)の上に載る。.post_content 内スコープ。
   ※ .rename は第2層へ昇格したのでここには置かない。
   ========================================================================= */

/* 共感フック（ストーリーと共通の入口） */
.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%)}

/* 選定理由リスト（05節） */
.post_content .why{max-width:var(--readw);margin:clamp(28px,4vw,40px) auto;list-style:none;display:grid;gap:0;padding:0}
.post_content .why li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line-2);
  font-size:15.5px;line-height:1.9;color:var(--ink-2);margin:0}
.post_content .why li:last-child{border-bottom:1px solid var(--line-2)}
.post_content .why li b{flex:0 0 auto;width:9em;white-space:nowrap;color:var(--ink);font-weight:700;font-size:16px}
@media(max-width:560px){
  .post_content .why li{flex-direction:column;gap:6px}
  .post_content .why li b{width:auto;white-space:normal}
}

/* 署名（社名のみ） */
.post_content .sig{max-width:var(--readw);margin:clamp(40px,6vw,64px) auto 0;padding-top:26px;
  border-top:1px solid var(--line);text-align:right}
.post_content .sig .nm{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.04em}

/* =========================================================================
   SWELL の見出しデザインを .col の中だけ無効化する（2026-08-21）

   SWELL は「見出しデザイン」設定に応じて、インライン <style> で
     .post_content h2 { background:…; padding:.75em 1em; color:#fff; … }
     .post_content h2::before { content:""; position:absolute; … }
   を後から注入してくる。こちらの .post_content .col h2 は詳細度で勝つが、
   宣言していないプロパティ（背景・余白・枠）は SWELL のものが残る。
   → 明示的に打ち消す。::before は章番号に作り替えて奪い返す。

   ※ .col の外（通常の記事）は SWELL の見出しデザインのまま。
   ========================================================================= */
.post_content .col h2{
  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::after{
  content:none;
  display:none;
}

/* ===== 章番号：CSSカウンタで自動採番 =====
   見出しブロックに <span class="num"> を書かずに済む。SWELLの目次にも正しく拾われる。
   SWELL が ::before に入れている絶対配置・枠線・背景をここで全部打ち消す。 */
.post_content{counter-reset:gsec}
.post_content .col h2::before{
  counter-increment:gsec;
  content:counter(gsec,decimal-leading-zero);
  position:static;
  display:block;
  width:auto;
  height:auto;
  top:auto; left:auto; right:auto; bottom:auto;
  border:none;
  background:none;
  box-sizing:content-box;
  visibility:visible;
  pointer-events:auto;
  font-size:11.5px;
  letter-spacing:.26em;
  color:var(--accent);
  font-weight:700;
  margin-bottom:16px;
  opacity:1;
  transform:none;
}

/* h3 も同様に、SWELL の装飾を .col 内では外す */
.post_content .col h3{
  background:none;
  padding:0;
  border:none;
  border-radius:0;
  color:var(--ink);
}
.post_content .col h3::before,
.post_content .col h3::after{
  content:none;
  display:none;
}

/* ===== ドロップキャップは /about/ では使わない =====
   01冒頭の「題材に選んだのは、FAXでした。」が1行と短く、
   3行分の高さがある頭文字が次の段落に食い込んでしまうため。
   （長い書き出しの記事で使いたくなったら、この2ブロックを消せば復活する） */
.post_content .col .lead-para::first-letter{
  float:none;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  margin:0;
  background:none;
  -webkit-text-fill-color:currentColor;
  color:inherit;
}

/* ヒーロー画像（wp:image に className="a-hero-img" を付けて使う） */
.post_content .a-hero-img img{border-radius:var(--r-card);box-shadow:0 30px 70px rgba(20,21,26,.16)}
.post_content .a-hero-img figcaption{font-size:12px;color:var(--ink-3);text-align:right;margin-top:14px}

/* 本文カラム：.col グループが連続しても上下の間が空きすぎないように */
.post_content .col + .col{margin-top:0}


/* =========================================================================
   ページタイトル（SWELL の h1.c-pageTitle）を読み物レイアウトに合わせる

   このファイルは /about/ でしか読み込まれないので、body クラスで絞る必要はない。
   SWELL は <h1 class="c-pageTitle" data-style="..."> を出力し、
   .c-pageTitle[data-style="..."]（0,2,1）で装飾を当ててくる。
   → タグ名を足して 0,2,2 にすれば勝てる。
   ========================================================================= */
h1.c-pageTitle,
h1.c-pageTitle[data-style]{
  font-size:clamp(29px,4.6vw,52px);
  font-weight:600;
  line-height:1.34;
  letter-spacing:.01em;
  color:var(--ink);
  text-align:center;
  border:none;
  background:none;
  background-image:none;
  box-shadow:none;
  padding:0;
  margin:clamp(40px,7vw,88px) auto clamp(8px,2vw,20px);
  max-width:820px;
}
/* ::after（SWELLのclearfix等）は消す */
h1.c-pageTitle::after,
h1.c-pageTitle[data-style]::after{
  content:none;
  display:none;
}

/* ::before はカテゴリチップとして作り直す（モックの ● ABOUT ／ G DOCK とは）
   SWELL が ::before に入れている絶対配置・枠線を全部打ち消してから組み立てる。 */
h1.c-pageTitle::before,
h1.c-pageTitle[data-style]::before{
  content:"● ABOUT ／ G DOCK とは";
  display:table;
  position:static;
  width:auto;
  height:auto;
  top:auto; left:auto; right:auto; bottom:auto;
  margin:0 auto 26px;
  padding:6px 14px;
  border:none;
  border-radius:var(--r-chip);
  background:var(--grad);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.7;
  text-transform:uppercase;
  white-space:nowrap;
  visibility:visible;
  opacity:1;
  transform:none;
  box-shadow:0 6px 16px rgba(255,90,31,.22);
}
/* SWELL の data-style="b_bottom" は、h1 ではなく内側の <span> に
   border-bottom と float:left を付けてくる。
   .c-pageTitle[data-style=b_bottom] .c-pageTitle__inner は詳細度 (0,3,0)。
   → こちらは属性セレクタを足して (0,3,1) にして上回る。 */
h1.c-pageTitle .c-pageTitle__inner,
h1.c-pageTitle[data-style] .c-pageTitle__inner{
  display:inline;
  float:none;
  border:none;
  border-bottom:none;
  background:none;
  background-image:none;
  padding:0;
  margin:0;
  box-shadow:none;
}
h1.c-pageTitle[data-style] .c-pageTitle__inner::before,
h1.c-pageTitle[data-style] .c-pageTitle__inner::after{
  content:none;
  display:none;
}

/* リード文：タイトル直下なので中央に揃える */
.post_content .a-lead{
  text-align:center;
  max-width:44ch;
  margin-left:auto;
  margin-right:auto;
}

/* ヒーロー画像はリードのすぐ下に */
.post_content .a-hero-img{
  margin-top:clamp(32px,5vw,56px);
  margin-bottom:clamp(40px,6vw,72px);
}