/*
 * 下層サブページ標準形（全幅ヘッダー〔H1サービス名＋右脇に英字小ラベル→サブ見出し→リード〕＋固定追従サイドバー＋文書本文）。
 * 出典＝代表モック（2026-06-30 修正）。ヒーローは廃止しつつ、ヘッダーは"左右2カラムにしない"＝全幅。
 *   左右2カラム化（H1左／リード右）は右側に空白が出るため不採用（代表指摘）。版面の縦罫・章ラベルの
 *   編集トーンは維持する。固定するのは左サイドバーだけ。
 * common（tokens/base/common）を前提に、レイアウトと本文（.sub-doc）の整形だけを定義する。
 * /role・/web・各サービスカテゴリ（量産）で共用。enqueue＝該当ページのみ（functions.php）。
 */

/* ページ土台＝グローバル section の全幅padding（トップ用）を無効化し、静かな文書余白に */
.subpage{padding:0 0 clamp(80px,9vw,128px);}
.subpage section{padding:0; position:static;}

/* ===== ヘッダー（全幅・コンパクト帯：小ラベル → 大見出し → リード → 罫） ===== */
/* 固定するのは左サイドバー(.sub-side)だけ。導入ヘッダーは普通にスクロールさせる。
 * 防御：万一 <header class="sub-head"> で書かれても common.css の素の header{position:sticky;top:0;…}
 * を拾わないよう、position/背景/ぼかし/重なりを明示リセットする（要素は <div> 推奨）。 */
/* padding-top は 0：ヘッダー⇔パンくず⇔本文の縦リズムは breadcrumb-wrap の上下padingで一元管理する（main頭で間隔を作らない） */
.sub-head{position:relative; background:none; backdrop-filter:none; z-index:auto; padding:0 0 clamp(28px,3vw,40px); border-bottom:1px solid var(--line);}
/* H1＋英字小ラベルを同じ行に並べる（小ラベルはH1右脇のワンポイント＝独立行の縦取りをやめる）。SPは flex-wrap で英字が下へ落ちる */
.sub-head-head{display:flex; align-items:center; gap:.35em 1em; flex-wrap:wrap;}
/* H1＝サービス名（例「Web戦略・制作」。title一致でSEOプラス＝確定仕様 subpage-standard L13/L44）。原稿の一文は直下の .sub-tagline(<p>) で受ける */
.sub-title{font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1.4; letter-spacing:.01em; margin:0; color:var(--ink);}
/* サブ見出し＝原稿の一文（H1直下・明朝中・朱署名 .sign）。見出しタグにせず<p>＝H1→章H2 の階層を1本に保つ。手動改行は <span class="ln">（common.css の .ln{display:block}） */
.sub-tagline{font-family:var(--serif); font-weight:600; font-size:clamp(1.16rem, 1.0rem + 0.45vw, 1.32rem); line-height:1.55; letter-spacing:.01em; margin:.7em 0 0; color:var(--ink); max-width:var(--measure-lead);}
/* 手動改行は <span class="ln"> ＝common.css の汎用 .ln{display:block} を使う（見出し・リード・CTA等。本文段落には基本使わない） */
/* リードは一段引いて tagline を主役にする（H1＞サブ見出し＞リードの階層） */
.sub-lead{margin:1.25em 0 0; color:var(--ink-sub); font-size:1.0rem; line-height:1.9; max-width:var(--measure-lead);}
/* 右の領域モチーフ（線画・墨＝空白を"意味"で埋める。トップFVの領域アイコンと同じ視覚言語） */
.sub-head-motif{display:none;}
.sub-head-motif svg{width:100%; height:auto; display:block; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible;}
.sub-head-motif .fill{fill:var(--ink); stroke:none;}
.sub-head-motif .dot{fill:var(--red); stroke:none;}        /* ブランドの"赤の一点" */
.sub-head-motif .ring{stroke:var(--red); opacity:.5;}
@media(min-width:780px){
  /* PC＝テキストは右にモチーフ分のスペースを空け、モチーフは右に縦中央で置く */
  .sub-head-text{max-width:calc(100% - 220px);}
  .sub-head-motif{display:block; position:absolute; right:4px; top:50%; transform:translateY(-50%); width:clamp(152px,15vw,196px); pointer-events:none;}
}

/* ===== 本体＝サイドバー｜文書（縦罫で仕切る・全高） ===== */
.sub-body{display:grid; grid-template-columns:minmax(0,216px) minmax(0,1fr); column-gap:0; align-items:start; margin-top:clamp(38px,4vw,54px);}

/* 左サイドバー（PC＝固定追従 sticky） */
.sub-side{position:sticky; top:104px; padding-right:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; font-size:.86rem;}
.side-h{font-size:.66rem; letter-spacing:.14em; font-weight:700; color:var(--ink-sub); text-transform:uppercase; margin:0 0 1em;}
/* この領域（カテゴリのページ＝リスト）。全リンク（現在地含む）の先頭に小さな「›」を左付け＝一覧の項目記号。
 * リンクは常時下線（hoverのみの下線はタッチ・タブレットで機能しない＝doctrine §6）、現在地は太字・下線なし＝you are here
 * （仕様 subpage-standard L23-24 へ実装を統一＝uiux-audit P2-8(2)・2026-07-16 代表採用。旧＝hover下線/現在地下線は真逆だった）。 */
.side-cat{display:flex; flex-direction:column;}
.side-cat a{padding:.5em 0 .5em 1.15em; color:var(--ink-sub); font-weight:600; line-height:1.5; text-indent:-1.15em; text-decoration:underline; text-decoration-color:var(--uline); text-decoration-thickness:1px; text-underline-offset:4px; transition:color .2s var(--ease),text-decoration-color .2s var(--ease);}
.side-cat a[aria-current="page"]{color:var(--ink); font-weight:700; text-decoration:none;}
/* 領域トップ（親）＝子より一段強い太墨。子ページ閲覧中は"親トップへの上りリンク"、現在地なら常時下線＝you are here。
 * 区切り罫は下線混同のため撤去済み（代表指摘 2026-07-14）。親子の明示は太さ・色・子インデントで担保（decisions 2026-07-01 side-cat 階層化の主旨は維持）。 */
.side-cat .cat-top{color:var(--ink); font-weight:700; padding-bottom:.5em; margin-bottom:.35em;}
/* 先頭マーカー「›」＝一覧の項目記号（現在地含む全リンク）。currentColor で現在地・親は墨、子は控えめな ink-sub に自動追従。
 * 左付け＝文字長が違ってもマーカー位置が揃う。inline-block で下線が「›」まで伸びない（代表指摘 2026-07-14）。 */
.side-cat a::before{content:"\203A"; display:inline-block; width:.8em; margin-right:.35em; color:currentColor; font-weight:400;}
/* 子リンク＝親の下にぶら下げ。インデント（マージン）だけで階層を示す。
 * ※以前あった左の細い縦罫（::before）は代表要望で撤去（2026-07-02）。現在地は太字＋墨色＋常時下線で示す。 */
.side-cat a:not(.cat-top){padding-left:calc(14px + 1.15em);}
/* 関連（区切り罫つき）。リンク＝side-cat と同じ「›」マーカー・常時下線（P2-8(2)で side-cat と同基準に統一） */
.side-extra{display:flex; flex-direction:column; margin-top:26px; padding-top:24px; border-top:1px solid var(--line);}
.side-extra a{padding:.45em 0 .45em 1.15em; color:var(--ink-sub); font-weight:600; line-height:1.5; text-indent:-1.15em; text-decoration:underline; text-decoration-color:var(--uline); text-decoration-thickness:1px; text-underline-offset:4px; transition:color .2s var(--ease),text-decoration-color .2s var(--ease);}
.side-extra a::before{content:"\203A"; display:inline-block; width:.8em; margin-right:.35em; color:currentColor; font-weight:400;}
/* 看板(/role)＝子なし＝関連が先頭に来る変形（先頭の区切り罫は出さない） */
.sub-side > .side-extra:first-child{margin-top:0; padding-top:0; border-top:none;}
/* 相談CTA（墨ボタン） */
.side-cta{width:100%; justify-content:center; margin-top:26px;}

/* ===== 文書本文（章ラベル＋H2＋段落・区切りは細い罫） ===== */
/* メイン左padはサイドの右pad（.sub-side）と同値＝縦罫(border-left)を溝の中央に置きズレを解消（代表指摘 2026-07-14）。 */
.sub-doc{min-width:0; border-left:1px solid var(--line); padding-left:clamp(22px,2.4vw,32px);}
.sub-doc > section{margin-bottom:clamp(40px,4.4vw,56px);}
.sub-doc > section:last-child{margin-bottom:0;}
.sub-doc > section + section{padding-top:clamp(40px,4.4vw,56px); border-top:1px solid var(--line);}
/* 章の小ラベル（日本語・シンプル＝モック準拠） */
.doc-ey{display:block; font-size:.72rem; letter-spacing:.14em; font-weight:700; color:var(--ink-sub); margin:0 0 1.1em;}
/* 折返しは自然折返し（禁則＝base.css の line-break:strict と word-break:auto-phrase〔Chrome系のみ〕に任せる）。
 * text-wrap:balance/pretty は撤去（2026-07-19 代表iPhone実測）＝
 * balance＝auto-phrase非対応のiOS Safariでは文節を無視した行数均等割りになり、
 * 「提案書で終わらせず、現／場が…」のような語中改行＋見出し右の大きな余白を作っていた。
 * pretty＝Safari 18.4+ は段落全体の行末最適化で行を約15%短く詰め、段落右に不定の余白が出ていた
 * （Chromeのprettyは最終行のみ調整＝CDP検収では検出できない。実機Safari固有の症状）。 */
.sub-doc h2{margin-top:0;}
/* 本文はカラム幅いっぱいに（モック準拠）。行長はサイドバーで絞られたカラム幅が担う＝追加の measure 制限はかけない */
.sub-doc p{line-height:1.95;}
.sub-doc h2 + p{margin-top:0;}

/* 本文リスト（▪＝赤マーカー ul／明朝番号 ol）＝ここで定義（グローバルだと chrome を壊すため） */
.sub-doc ul{list-style:none; margin:1.2em 0; padding-left:1.4em;}
.sub-doc ul > li{position:relative; margin:0 0 .6em; line-height:1.85;}
.sub-doc ul > li::before{content:""; position:absolute; left:-1.1em; top:.72em; width:.42em; height:.42em; background:var(--red);}
.sub-doc ol{list-style:none; counter-reset:doc-ol; margin:1.2em 0; padding-left:1.8em;}
.sub-doc ol > li{position:relative; counter-increment:doc-ol; margin:0 0 .6em; line-height:1.85;}
.sub-doc ol > li::before{content:counter(doc-ol)"."; position:absolute; left:-1.8em; top:0; width:1.5em; text-align:right; font-family:var(--serif); font-weight:600; color:var(--ink);}
.sub-doc ol[start="3"]{counter-reset:doc-ol 2;}  /* 自前カウンタは start 属性を見ない＝分割olの連番継続用（/analytics S3の2形態区分） */
.sub-doc li:last-child{margin-bottom:0;}

/* dl（FAQ等の定義リスト）＝本文コンポーネント。全幅流しにせず本文の芯（--measure≒40字）に抑える
 * （全幅ベタ流し禁止＝doctrine §6・tokens.css の行長コメント。2026-07-12 §6-Aレビュー3b-1） */
.sub-doc > section > dl{max-width:var(--measure);}

/* 注記＝淡い帯・左罫の small ／ 文中の小リンク注記（→ …） */
.subnote{margin:1.4em 0 0; color:var(--ink-sub);}
.subnote small{line-height:1.9;}
/* 本文テキストリンクの常時下線＝p だけでなく li・dd・td も対象（テキストリンクは原則常時下線＝doctrine §6。
 * p 限定の列挙だと FAQ の dd・/about の li・経歴表 td の /role で下線が落ちる＝2026-07-12 §6-Aレビュー3b-1で一般化） */
.subnote a,.note a,.sub-doc :is(p,li,dd,td) a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--uline); text-underline-offset:4px; text-decoration-thickness:1px;}

/* 表（base.css の要素スタイルを使用。ラッパ＋行見出し列の幅だけ整える） */
.table-wrap{margin:1.4em 0; max-width:760px;}
.sub-doc tbody th{width:32%; min-width:130px;}
/* 全幅の表＝列が多い表（経歴年表など）用。sec-main（マージンノート2カラム）を使わない
 * 全幅セクションに置き、幅制限を解除・行見出し（時期等）は内容幅に（2026-07-04・/about/profile） */
.sub-doc .table-wide{max-width:none;}
.sub-doc .table-wide tbody th{width:auto; min-width:0; white-space:nowrap; padding-right:1.2em;}

/* 締めCTA（文書末。コピーの最終CTAブロック＝静かに閉じる。飾り帯にしない） */
.sub-cta h2{margin-top:0;}
.sub-cta p{color:var(--ink-sub);}
.sub-cta-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.7em;}
/* 枠線ボタン（副CTA）。hover は寒色グレー（--hover-surface）＋墨枠維持＋浮き
   ＝「白いボタンは全て寒色グレーhover」ルール（2026-07-14 代表）。旧＝墨反転（::before 墨迫り上げ）は廃止。
   墨枠(inset box-shadow)は hover の浮き影と box-shadow を重ねて維持する。 */
.btn-secondary{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.btn-secondary::before{display:none;}

/* hover演出はマウス等の精密ポインターだけに限定し、タッチ後の状態残留を防ぐ（uiux-audit P3-4）。 */
@media(hover:hover) and (pointer:fine){
  .side-cat a:hover{color:var(--ink); text-decoration-color:var(--ink);}
  .side-extra a:hover{color:var(--ink); text-decoration-color:var(--ink);}
  .subnote a:hover,.note a:hover,.sub-doc :is(p,li,dd,td) a:hover{text-decoration-color:var(--ink);}
  .btn-secondary:hover{background:var(--hover-surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink), 0 14px 30px -12px rgba(25,23,20,.4);}
}
.btn-secondary:active{transform:translateY(0); box-shadow:inset 0 0 0 1px var(--ink); transition:none;}

/* ===== レスポンシブ ===== */
@media(max-width:920px){
  /* SP＝サイドバーを解体（display:contents）。子をフローに流し、ピル→本文→関連→CTA の順 */
  .sub-body{display:flex; flex-direction:column; gap:0; margin-top:28px;}
  .sub-side{display:contents; position:static; padding-right:0;}
  .sub-doc{order:1; border-left:none; padding-left:0;}
  /* この領域＝見出し帯直下の折り返しピル（横スクロールしない・現在地は塗り）。ラベルはピルで自明なので隠す */
  .side-cat{order:0; flex-flow:row wrap; gap:8px; margin:0 0 30px;}
  .side-cat .side-h{display:none;}
  .side-cat a{padding:.5em 1em; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--ink-sub); text-indent:0; text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}  /* ピルは下線なし（枠で自明）。min-height=タップ域44px（uiux-audit P1-10） */
  .side-cat a[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--on-accent); font-weight:700; text-decoration:none;}
  /* SP＝ピル横並びでは親子の区切りは出さない（cat-top も等しくピル・子のインデントを解除） */
  .side-cat .cat-top{padding:.5em 1em; margin:0;}
  .side-cat a::before{content:none; width:0; margin:0;}  /* SPピルでは「›」を出さない（枠で自明・現在地含め全ピル） */
  .side-cat a:not(.cat-top){padding:.5em 1em;}
  /* 関連・CTAは本文末へ */
  .sub-body .side-extra{order:2; margin-top:42px; padding-top:26px; border-top:2px solid var(--ink);}
  .sub-side > .side-extra:first-child{margin-top:42px; padding-top:26px; border-top:2px solid var(--ink);}
  .side-cta{order:3; margin-top:22px;}
}

/* 表のSP折り返し（各行を「見出し→内容」ブロックに・横スクロールしない） */
@media(max-width:620px){
  .sub-doc table,
  .sub-doc thead,
  .sub-doc tbody,
  .sub-doc tr,
  .sub-doc th,
  .sub-doc td{display:block; width:100%;}
  .sub-doc thead{display:none;}
  .sub-doc tr{border-bottom:1px solid var(--line); padding:6px 0;}
  .sub-doc tr:last-child{border-bottom:none;}
  .sub-doc th,
  .sub-doc td{border-bottom:none; padding:0;}
  /* 行見出し列の幅指定（PC用 width:32%/min-width:130px）は詳細度でこのブロックの width:100% に勝つため明示リセット（uiux-audit P1-4） */
  .sub-doc tbody th{padding:14px 0 5px; width:100%; min-width:0;}
  .sub-doc tbody td{padding:0 0 14px;}
  /* thead 非表示の代替＝各セルの data-label（既存thead文言の転記）を小見出しとして表示する（brand §8.8＝uiux-audit P1-4。
   * これが無いと多列表で「どの値がどの列か」が消え、受託可否表では帰属の逆読みが起きる） */
  .sub-doc td[data-label]::before{content:attr(data-label); display:block; font-size:.72rem; letter-spacing:.14em; font-weight:700; color:var(--ink-sub); margin-bottom:.15em;}
}

@media(max-width:560px){
  .sub-doc :is(p,li,dd){word-break:normal; overflow-wrap:anywhere;}  /* dd も対象＝p/li と同一挙動に統一（word-break が継承 auto-phrase→normal になり折り返し位置は変わりうる。td は表レイアウト規則側のため含めない） */
  .side-cta{width:100%;}
}

/* =====================================================================
 * 案A＝マージンノート方式（量産サービスページの本文標準）。
 *   本文を読みやすい芯（約37〜40字＝--measure）に抑え、空いた右を章ラベル
 *   ＋注記で埋めるエディトリアル組版。**発火はマークアップ駆動**＝section が
 *   `<div class="sec-main">` を持つときだけ2カラム化する（:has）。
 *   ・量産5ページ＋/web＝.sec-main/.sec-side を使う → 2カラム
 *   ・/role＝.sec-main を使わない（章ラベルは見出し上の単カラム）→ 据え置き
 *   ・締めCTA（.sub-cta）＝.sec-main を持たない → 自動で全幅
 *   （旧 .web-page 限定スコープから共通へ昇格＝decisions 2026-07-01「量産5ページは案Aの本文2カラム」）
 * ===================================================================== */
.sub-doc > section:has(> .sec-main){display:grid; grid-template-columns:minmax(0,1fr) 150px; column-gap:30px; align-items:start;}
.sub-doc .sec-main{min-width:0; max-width:var(--measure);}  /* 本文の芯＝約40字（measure）でも頭打ちに */
.sub-doc .sec-main > :first-child{margin-top:0;}
/* sec-side を持たない section＝章ラベル・注記の余白が要らないケース（列が多い表など）。
 * sec-main を単カラム化＋幅制限を解除し、sub-doc いっぱいに広げる（2026-07-04・/about/profile 経歴年表）。
 * 対象は「sec-main はあるが sec-side が無い」section のみ＝既存の sec-main+sec-side ペアには無影響。 */
.sub-doc > section:has(> .sec-main):not(:has(> .sec-side)){grid-template-columns:1fr;}
.sub-doc > section:has(> .sec-main):not(:has(> .sec-side)) > .sec-main{max-width:none;}
/* 右サイド＝章ラベル＋要点サマリー＋注記のマージンノート。上罫＋sticky追従＝長い章でもラベルが視界に残る
 * （2026-07-06・B案を標準へ昇格＝代表選定。要点サマリー .doc-sum は章の結論を一言で言う明朝の短文） */
.sub-doc .sec-side{min-width:0; display:flex; flex-direction:column; gap:10px; position:sticky; top:104px;}
.sub-doc .sec-side .doc-ey{margin:0; padding-top:.8em; border-top:2px solid var(--ink);}
.sub-doc .sec-side .doc-sum{margin:0; font-family:var(--serif); font-size:.95rem; font-weight:600; letter-spacing:.01em; color:var(--ink); line-height:1.75;}
.sub-doc .sec-side .note{margin:0; padding:0 0 0 13px; background:none; border-left:2px solid var(--line);}
.sub-doc .sec-side .subnote{margin:0;}
.sub-doc .sec-side small{font-size:.8rem; line-height:1.85;}
.subnote.is-link-list > small{display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:.35em; align-items:start;}
.subnote.is-link-list .link-list-body{min-width:0;}

@media(max-width:920px){
  /* SP＝1カラム。右サイドはPCの空白埋め装置なのでスマホでは簡素化＝
     章ラベルは隠し、注記/リンクは本文の"後ろ"へ（前に積んで文字だらけにしない） */
  .sub-doc > section:has(> .sec-main){grid-template-columns:1fr; row-gap:0;}
  .sub-doc .sec-side{padding-top:0; margin-top:1.4em; gap:14px;}  /* order指定なし＝DOM順で本文の後ろ */
  .sub-doc .sec-side:has(> .doc-ey:only-child){display:none;}  /* 章ラベルだけのサイドは丸ごと非表示（空箱を出さない） */
  .sub-doc .sec-side:not(:has(.note)):not(:has(.subnote)){display:none;}  /* 注記を持たないサイド（ラベル＋サマリーのみ）も非表示 */
  .sub-doc .sec-side .doc-ey{display:none;}  /* 注記があるサイドは章ラベルだけ隠す */
  .sub-doc .sec-side .doc-sum{display:none;}  /* 要点サマリーはPCの余白埋め＝SPでは本文と重複するため出さない */
  .sub-doc .sec-side .note{border-left:2px solid var(--line);}
}