@charset "utf-8";
/* ============================================================
   VSG 法人コーポレートページ用スタイル
   themes/vs-group/assets/corp.css

   ・page-corptop.php / page-corpsub.php のときだけ読み込む
     （functions.php の wp_enqueue_scripts を参照）
   ・セレクタは全て .corp-site 配下。既存 vs-group の CSS と隔離する
   ・トークンは CLAUDE.md / vsg-tokens.css 準拠。承認パレット外の色は作らない
   ・#2DBECD は禁止値。グループ共通ヘッダー・フッターだけが実サイトの値を
     保持しているが、そちらは get_header() / get_footer() の管轄で対象外

   ・rem を使わないこと。テーマが html{font-size:62.5%}（＝10px）を敷いているため、
     rem で書くと全て 0.625 倍になる。単位は px とトークンだけにする
   ・グループ共通ヘッダーは position:fixed で不透明（#2DBECD 単色）。
     高さは PC 90px / 768px以下 70px（トークン --vsg-hdr）。
     不透明で動画が透けないため、ページ全体をヘッダーの真下から始める。
     .corp-site の padding-top がその1箇所。**ここを消すとヒーローの上端と
     下層のパンくずがヘッダーに隠れる。**各セクション側では余白を足さないこと

   装飾予算の使用数（1ページあたりの上限）
     gradient 0/4 ・ clip-path 0/2 ・ box-shadow 0/2 ・ 疑似要素 0/6
     ※ヒーローの暗幕で1つ使っていたが、2026-09-24 に均一1枚にして0になった
     backdrop-filter 0/0 ・ border-radius 0
   階層はタイポグラフィと余白だけで作っている。影・グラデを足さないこと。
   ============================================================ */

:root{
  /* ---- ブランド（ティール）----------------------------------
     面と文字で値が違う。文字に使えるのは --vsg-br-text 以下だけ */
  --vsg-br-fill: #2BB9C7;  /* 面・グラフ・アイコンの地のみ。文字に使わない（白地 2.37:1）*/
  --vsg-br-large:#26A3B0;  /* 18px以上の見出しなら文字可（3.02:1）*/
  --vsg-br-text: #1E828C;  /* 文字・リンク・強調の主力（白地 4.54:1）*/
  --vsg-br-deep: #17626A;  /* 濃い見出し（7.02:1）*/
  --vsg-br-l:    #4FD0D8;  /* 濃色地の装飾ラベル・細罫（ink上 8.46:1）*/
  --vsg-br-200:  #C0EDF1;  /* 濃色地の副次テキスト（ink上 12.39:1）*/
  --vsg-br-100:  #E2F7F9;  /* 薄い面（中）*/
  --vsg-br-050:  #F2FBFC;  /* 薄い面（薄）*/

  /* ---- アクセント（ゴールド）「要ご提供」マーカー ---- */
  --vsg-gd-fill: #F0B429;
  --vsg-gd-large:#D9930F;
  --vsg-gd-text: #9A6F0B;  /* 14px太字で --vsg-gd-050 上 4.19:1（太字14px以上は3.0:1）*/
  --vsg-gd-deep: #745308;
  --vsg-gd-300:  #F7E8C8;  /* 濃色地のマーカー文字（ink上 12.92:1）*/
  --vsg-gd-050:  #FDF6E6;  /* マーカーの地 */

  /* ---- 無彩色 ---- */
  --vsg-ink:  #16233D;  /* 見出し・最も濃い文字／ダーク地（白文字 15.65:1）*/
  --vsg-body: #3D4A5F;  /* 本文（白地 8.96:1）*/
  --vsg-sub:  #5A6A7E;  /* 補足・注釈（白地 5.53／tint地 5.01／br-050地 5.26）*/
  --vsg-weak: #69788C;  /* 濃色地の罫線（ink上 3.48:1）*/
  --vsg-weak-2:#8696AD;
  --vsg-w:    #FFFFFF;
  --vsg-rule: #E3E9EC;  /* 淡色地の罫線 */
  --vsg-tint: #F1F4F6;  /* 薄い面・セクション地 */

  /* ---- 書体：2書体のみ ---- */
  --vsg-font-display:"Noto Serif JP","Yu Mincho",YuMincho,serif;
  --vsg-font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

  /* ---- タイプスケール：この8段階以外を作らない。14px未満は作らない ---- */
  --vsg-fs-1:14px; --vsg-fs-2:16px; --vsg-fs-3:18px; --vsg-fs-4:21px;
  --vsg-fs-5:26px; --vsg-fs-6:32px; --vsg-fs-7:44px; --vsg-fs-8:56px;

  /* ---- 余白：4pxグリッド。この10段階以外を作らない ---- */
  --vsg-sp-1:4px;  --vsg-sp-2:8px;  --vsg-sp-3:12px; --vsg-sp-4:16px;
  --vsg-sp-5:24px; --vsg-sp-6:32px; --vsg-sp-7:48px; --vsg-sp-8:64px;
  --vsg-sp-9:96px; --vsg-sp-10:128px;

  /* グループ共通ヘッダーの実高（position:fixed・不透明 #2DBECD）。
     4pxグリッド外だが、こちらで決めた値ではなく実サイトの実測値。
     .corp-site の上余白に使い、ページ全体をヘッダーの真下から始める */
  --vsg-hdr:90px;
}

/* ============================================================
   1. 土台・リセット（.corp-site の中だけに効かせる）
   ============================================================ */
.corp-site{
  width:100%; margin:0 auto;
  background:var(--vsg-w); color:var(--vsg-body);
  font-family:var(--vsg-font-body);
  font-size:var(--vsg-fs-2); line-height:1.9; font-feature-settings:"palt" 1;
  padding-top:var(--vsg-hdr);   /* 固定ヘッダーの真下からページを始める */
}
/* 1440px の上限は 2026-09-24 に .corp-site から**直下の子**へ移した。§35
   ヒーローだけを画面幅いっぱいに出すため。セクションの帯の幅は今までどおり1440px。
   100vw で外に出す手もあるが、縦スクロールバーのぶん（約15px）だけ広くなって
   横スクロールが出るので採らなかった。
   直下の子を足したときは、この上限が自動でかかる（ヒーローだけが例外）*/
.corp-site > *{max-width:1440px; margin-left:auto; margin-right:auto}
.corp-site > .c-hero{max-width:none}
.corp-site *{box-sizing:border-box}
/* ★ここに font-size / font-weight / line-height の inherit を書かないこと（2026-09-20）。
   `.corp-site h2` は詳細度 (0,1,1)、`.c-h2` は (0,1,0)。後ろに書いても
   クラス側が負けるため、**全ての見出しが本文と同じ16pxで出ていた**。
   実装当初（§10）から入っていた不具合で、テンプレートの h1〜h4 は全て c-h* 付きなので
   全滅していた。`<div class="c-h3">` のようにクラスだけの箇所は効いていたので、
   同じクラスでもサイズが違うという分かりにくい出方をしていた。
   テーマ側の素の h1{} は (0,0,1) で `.c-h1` (0,1,0) に負けるため、margin だけで足りる。
   本番テーマの h1〜h4 指定は全て別コンテナ配下（.counsel / .article__wrapper など）で
   .corp-site の祖先にならないことを確認済み */
.corp-site h1,.corp-site h2,.corp-site h3,.corp-site h4{margin:0}
.corp-site p,.corp-site figure{margin:0}
.corp-site ul,.corp-site ol{margin:0; padding:0; list-style:none}
.corp-site img,.corp-site video{max-width:100%}
.corp-site a{color:var(--vsg-br-text); text-decoration:none}
.corp-site a:hover{color:var(--vsg-br-deep); text-decoration:underline}
.corp-site [hidden]{display:none !important}   /* class の display に負けないよう明示 */

/* ============================================================
   2. レイアウト
   ============================================================ */
.c-in{max-width:1120px; margin:0 auto; padding:0 var(--vsg-sp-7)}
.c-sec{padding:var(--vsg-sp-9) 0}     /* セクション間96 ÷ 要素間24 = 4倍 */
.c-sec--white{background:var(--vsg-w)}
.c-sec--tint {background:var(--vsg-tint)}
.c-sec--pale {background:var(--vsg-br-050)}
.c-sec--pale2{background:var(--vsg-br-100)}
.c-sec--ink  {background:var(--vsg-ink)}

/* ============================================================
   3. タイポグラフィ
   日本語が主役。英字は14pxの装飾ラベルに降格する
   ============================================================ */
.c-mn{font-family:var(--vsg-font-display)}
.c-lbl{font-size:var(--vsg-fs-1); letter-spacing:.24em; color:var(--vsg-sub);
       font-weight:500; margin:0 0 var(--vsg-sp-4)}
.c-lbl--dark{color:var(--vsg-br-l)}
.c-lbl--flush{margin:0}
.c-lbl--under{margin:var(--vsg-sp-2) 0 0}

.c-h1{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-8);
      line-height:1.35; letter-spacing:.04em; color:var(--vsg-ink)}
.c-h1--sub{font-size:var(--vsg-fs-7)}   /* 下層ページの見出し。トップの56pxは主見出し専用 */
.c-h2{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-6);
      line-height:1.5; letter-spacing:.04em; color:var(--vsg-ink)}
.c-h3{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-4);
      line-height:1.6; letter-spacing:.04em; color:var(--vsg-ink)}
.c-h4{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-3);
      line-height:1.6; letter-spacing:.04em; color:var(--vsg-ink)}

/* ダーク地（--vsg-ink）では見出しと本文を白に反転する */
.c-on-dark{color:var(--vsg-w)}
.c-on-dark .c-h1,.c-on-dark .c-h2,.c-on-dark .c-h3,.c-on-dark .c-h4{color:var(--vsg-w)}

.c-lead{margin:var(--vsg-sp-6) 0 0; font-size:var(--vsg-fs-3); line-height:1.85;
        max-width:760px; color:var(--vsg-body)}
.c-on-dark .c-lead{color:var(--vsg-w)}
.c-txt{font-size:var(--vsg-fs-2); line-height:1.9}

/* ABOUT US だけの上書き（2026-09-20）。見出しを2段階（32→56px）大きくして中央へ、
   本文は1カラムにして1段階（16→18px）大きく。
   ・56px は型スケールの最上段。ヒーローの .c-h1 と同値になる
   ・本文は中央寄せにしない（長文は左揃えのまま）。幅は .c-lead と同じ760pxに合わせ、
     18pxで1行が長くなりすぎないようにしている */
/* ABOUT US の大見出し。2026-09-24：56px → 44px（§43）。
   見出しが「税務署に指摘されない、相続専門の税理士法人」21字になり、
   56pxではPCで2行に折り返していた。44pxなら .c-in の内側1024pxに収まる
   （21字 ≒ 939px。palt が効いているので読点はさらに詰まる）。
   **これで h1 と同値ではなくなった。**下げるなら次は32px（fs-6）で、
   タイプスケールの8段階以外は作らないこと */
.c-h2--lg{font-size:var(--vsg-fs-7)}
.c-lbl--center,
.c-h2--center{text-align:center}
.c-about-body{max-width:760px; margin-left:auto; margin-right:auto}
.c-about-body .c-txt{font-size:var(--vsg-fs-3)}
.c-txt--narrow{max-width:640px}
.c-txt--mt{margin-top:var(--vsg-sp-5)}
.c-mt-4{margin-top:var(--vsg-sp-4)}
.c-sm{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub)}
.c-on-dark .c-sm{color:var(--vsg-br-200)}
.c-sm--mt{margin-top:var(--vsg-sp-2)}

/* 注釈。tint(5.01:1) / br-050(5.26:1) / 白(5.53:1) のいずれでも 4.5:1 を満たす
   ※デザイン原案は --vsg-weak だったが、淡色地で 4.07:1 と下回るため一段濃くした */
.c-note{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub);
        margin:var(--vsg-sp-6) 0 0; max-width:880px}
.c-on-dark .c-note{color:var(--vsg-br-200)}

/* 「要ご提供」マーカー */
.c-tbd{color:var(--vsg-gd-text); background:var(--vsg-gd-050);
       font-size:var(--vsg-fs-1); font-weight:700; padding:0 var(--vsg-sp-2)}
.c-on-dark .c-tbd{color:var(--vsg-gd-300); background:transparent; padding:0}

.c-name{font-family:var(--vsg-font-display); font-weight:600;
        font-size:var(--vsg-fs-3); color:var(--vsg-ink)}
/* 附番。2026-09-20 に BUSINESS と PUBLICATION の両方から外したので現在は未使用。
   戻すとき用に残置している */
.c-idx{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub); letter-spacing:.16em}
.c-key{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub); letter-spacing:.16em}
.c-date{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub); letter-spacing:.12em}

/* 数値。桁が動いても幅が揺れないよう等幅数字にする */
.c-cnt{display:inline-block; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.c-num{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-7);
       line-height:1.2; color:var(--vsg-ink)}
.c-on-dark .c-num{color:var(--vsg-w)}
.c-num-unit{font-family:var(--vsg-font-body); font-weight:500;
            font-size:var(--vsg-fs-3); margin-left:var(--vsg-sp-2)}
.c-num-sm{font-family:var(--vsg-font-display); font-weight:600;
          font-size:var(--vsg-fs-6); line-height:1.2}

/* ============================================================
   4. ボタン
   ブランド面に白文字を作らない。主要ボタンは無彩色の濃
   ============================================================ */
/* ボタンは <a> に当てる。上の .corp-site a より詳細度を上げないと色で負ける */
.corp-site .c-btn{display:inline-block; background:var(--vsg-ink); border:2px solid var(--vsg-ink);
       color:var(--vsg-w); font-weight:700; font-size:var(--vsg-fs-2);
       letter-spacing:.12em; padding:var(--vsg-sp-4) var(--vsg-sp-6); border-radius:0}
.corp-site .c-btn:hover{color:var(--vsg-w); text-decoration:none}
.corp-site .c-btn--outline{background:transparent; border-color:var(--vsg-br-text); color:var(--vsg-br-text)}
.corp-site .c-btn--outline:hover{color:var(--vsg-br-deep); text-decoration:none}
.corp-site .c-btn--ghost{background:transparent; border-color:var(--vsg-w); color:var(--vsg-w)}
.corp-site .c-btn--ghost:hover{color:var(--vsg-w); text-decoration:none}
.corp-site .c-btn--block{display:block; text-align:center}
.c-btn-row{display:flex; gap:var(--vsg-sp-4); margin-top:var(--vsg-sp-7)}

/* ============================================================
   5. グリッド
   ★ インライン style に戻さないこと。
     インラインだとメディアクエリで上書きできず、レスポンシブが死ぬ
   ============================================================ */
.g-1   {display:grid; grid-template-columns:1fr; gap:var(--vsg-sp-6)}        /* CONTACT が1窓口のとき（2026-09-24）*/
.g-2   {display:grid; grid-template-columns:1fr 1fr; gap:var(--vsg-sp-8)}
.g-3   {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--vsg-sp-6)}
.g-4   {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--vsg-sp-6)}
.g-area{display:grid; grid-template-columns:200px 1fr; gap:var(--vsg-sp-6)}   /* GROUP 領域／中身 */
.g-area > div:first-child{padding-top:var(--vsg-sp-4)}   /* 領域ラベルを1行目の文字に揃える */
/* GROUP 法人行。★ハイライト行にだけ余白を足す作りにしないこと。
   10法人展開が前提なので、1法人しかない領域（労務）で必ず行がずれて露呈する。
   全行に同じ余白を与え、ハイライトは背景色が変わるだけにする。
   margin-left で24px外に出してから padding で戻すので、法人名の左端は全行そろい、
   帯だけが左に張り出す。負のマージンを左右に付けるとコンテナからはみ出すので左だけ。 */
.g-firm{display:grid; grid-template-columns:400px 1fr; gap:var(--vsg-sp-5);
        align-items:baseline; margin-left:calc(-1 * var(--vsg-sp-5));
        padding:var(--vsg-sp-4) var(--vsg-sp-5)}
.g-biz {display:grid; grid-template-columns:1fr 1fr; gap:var(--vsg-sp-5)}    /* BUSINESS 名称／説明。2026-09-20 に附番の64pxを外した */
/* PUBLICATION 著書のタイル（2026-09-24）。3列。4冊なので3＋1で並ぶ。
   罫線の行組みから外れるが、行のままだと書影のぶん縦に伸びすぎる。
   CONTACT の .c-card のような上の色帯は付けない（あちらは窓口、こちらは一覧）。
   .g-num（書名の行）は未使用になったので削除した */
.c-books{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--vsg-sp-5);
         margin-top:var(--vsg-sp-5)}
.c-book{background:var(--vsg-w); padding:var(--vsg-sp-5)}
/* 書影。原寸は幅240pxのPNG（縦横比は4冊とも約0.7）。150px幅で高さ約212px。
   タイルの中で左右中央に置く（margin auto）。書名は左揃えのまま */
.c-book-cover{display:block; width:150px; height:auto; margin-left:auto; margin-right:auto;
              border:1px solid var(--vsg-rule)}
/* タイルの中の書名は 18→16px。3列だと18pxでは折り返しが増えすぎる */
.c-book .c-h4{font-size:var(--vsg-fs-2); margin-top:var(--vsg-sp-4)}
/* 書名のうしろの [Amazon]（2026-09-24）。NETWORK の [地図] と同じ作り。
   書名が折り返しても [Amazon] だけが千切れないよう nowrap */
.c-book-link{font-size:var(--vsg-fs-1); font-weight:500; white-space:nowrap}
.g-def {display:grid; grid-template-columns:240px 1fr; gap:var(--vsg-sp-6)}   /* ORGANIZATION 項目／内容 */
.g-280 {display:grid; grid-template-columns:280px 1fr}                        /* 法人概要の表 */            
.g-net {display:grid; grid-template-columns:200px 1fr; gap:var(--vsg-sp-6)}  /* NETWORK 地域／拠点名。2026-09-20 に拠点数の96pxを外した */
.g-news{display:grid; grid-template-columns:180px 1fr; gap:var(--vsg-sp-6)}   /* NEWS 日付／見出し */
.c-stack{display:grid; gap:var(--vsg-sp-5)}
.c-stack--tight{gap:var(--vsg-sp-4)}
/* 法人概要の「所属税理士」など、1行1件で並べる欄（2026-09-20）*/
.c-names{display:grid; gap:var(--vsg-sp-2)}

/* NETWORK の拠点名（2026-09-20）。拠点名＝詳細ページ、[地図]＝Googleマップ。
   拠点ごとに 16px（.c-txt が16pxなので 1em ちょうど）空けている。
   中黒での区切りはやめた。[ ] で括ったことで拠点の切れ目が読めるようになり、
   16px の間隔と中黒が重なると煩かったため。中黒を戻すなら
   `.c-office + .c-office::before{content:"・"}` を足す（疑似要素の予算を1使う）。
   折り返したときの行間は 8px。 */
.c-offices{display:flex; flex-wrap:wrap; align-items:baseline;
           column-gap:var(--vsg-sp-4); row-gap:var(--vsg-sp-2)}
.c-office{display:inline-flex; align-items:baseline; gap:var(--vsg-sp-1)}
.c-office-map{font-size:var(--vsg-fs-1)}
/* 事業内容の詳しい説明（社労士・§58）。名称列を狭めて説明を広く取る */
.g-biz--wide{grid-template-columns:240px 1fr}
.c-biz-sum{font-weight:700; color:var(--vsg-ink)}
.c-biz-p{margin-top:var(--vsg-sp-3)}
.c-panel{margin-top:var(--vsg-sp-5); background:var(--vsg-w); padding:var(--vsg-sp-6)}
.c-panel .c-txt + .c-txt{margin-top:var(--vsg-sp-3)}
/* 料金表（社労士・§58）。A・B を横に2つ並べる。金額／内容 */
.c-price-grid{align-items:start}
.g-price{display:grid; grid-template-columns:120px 1fr; gap:var(--vsg-sp-4)}
.c-price{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-4);
         color:var(--vsg-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.c-price-desc{font-size:var(--vsg-fs-2)}
/* 拠点名の下に説明を置く形（社労士の対応エリア。§57）。
   2026-10-14（§79）：住所つきの拠点を複数並べると、幅が余ったぶんだけ
   .c-offices の折り返しに乗って2つ横に並んでしまっていた（行政書士の6拠点で露呈）。
   grid にして width:100% を与え、1拠点＝1行に固定した。
   拠点名と [地図] が1行目、説明は次の行で全幅。
   map が無い社労士の対応エリアは、1行目が名前・次行が説明で見た目が変わらない（実機で確認済み）*/
.c-office--note{display:grid; grid-template-columns:auto 1fr; align-items:baseline;
                width:100%; column-gap:var(--vsg-sp-2); row-gap:0}
.c-office--note > .c-sm{grid-column:1 / -1; margin-top:var(--vsg-sp-1)}

/* ============================================================
   6. 罫線の行組み（このサイトの基本レイアウト）
   ============================================================ */
.c-list{margin-top:var(--vsg-sp-5); border-top:1px solid var(--vsg-rule)}
/* BUSINESS の業務行だけ1段階ずつ大きく（2026-09-20）。名称 18→21px、説明 14→16px */
.c-list--biz .c-h4{font-size:var(--vsg-fs-4)}
.c-list--biz .c-sm{font-size:var(--vsg-fs-2)}
.c-list--mt{margin-top:var(--vsg-sp-7)}
.c-list--dark{border-top-color:var(--vsg-weak)}
.c-row{padding:var(--vsg-sp-5) 0; border-bottom:1px solid var(--vsg-rule); align-items:baseline}
/* 白い面に載る行（BUSINESS の業務・PUBLICATION の書名）。
   2026-09-20：文字が面の左端に張り付いていたので左右に16px入れた。
   .c-row の padding は「24px 0」なので、上下はそのまま活かして左右だけ足す */
.c-row--white{background:var(--vsg-w); padding-left:var(--vsg-sp-4); padding-right:var(--vsg-sp-4)}
.c-row--lg{padding:var(--vsg-sp-6) 0; gap:var(--vsg-sp-6); align-items:start}
.c-row--dark{border-bottom-color:var(--vsg-weak)}
.c-block{margin-top:var(--vsg-sp-7)}
.c-block--gap{margin-top:var(--vsg-sp-8)}

/* ============================================================
   7. HERO
   スクリムは rgba() を使わず、トークン色（--vsg-ink）＋ opacity だけで作る。
   トークン外の色を増やさないため。2026-09-24 に linear-gradient も使わなくなった
   ============================================================ */
/* 2026-09-24：ヒーローだけ画面幅いっぱいに出す。§35
   上限を外しているのは `.corp-site > .c-hero{max-width:none}` の1行で、
   ここでは高さと中身の寄せだけを見ている。
   中の .c-in（max 1120px）は画面の中央に寄るので、見出しの位置は変わらない */
.c-hero{position:relative; overflow:hidden; min-height:720px;
        display:flex; align-items:center; padding:var(--vsg-sp-9) 0}
/* poster を背景にも敷く。動画の読み込み前・再生できない環境でも絵が出る */
.c-hero-media{position:absolute; inset:0; background-color:var(--vsg-ink);
              background-position:center; background-size:cover; background-repeat:no-repeat}
/* クロスフェードの長さ。JS はこの値を読んで、裏面を止めるタイミングを合わせる。
   ここを変えれば JS 側も自動で追従する（2026-09-20）。
   1本あたりの表示秒数は inc/corp.php の hero_interval */
.c-hero-v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          display:block; opacity:0;
          --vsg-hero-fade:.8s; transition:opacity var(--vsg-hero-fade) linear}
.c-hero-v.is-on{opacity:1}
/* 暗幕は全面に1枚だけ（2026-09-24）。§41
   左を不透明まで持ち上げる2枚目（.c-hero-scrim-b・100degのグラデーション）は外した。
   **見出しは動画の上に直接乗る**ので、素材が明るい方向に振れたらここを上げる。
   .5 → .55〜.6 が目安。戻す場合の値は作業ログ §41 に控えてある
   2026-09-25 に .5 → .55。購入版で測り直すと相続のリビングが4.22、社労士の会議室が3.99で
   リード文（18px）がAAに届かなかった。.55 で8本とも4.57以上（§50）*/
.c-hero-scrim-a{position:absolute; inset:0; background:var(--vsg-ink); opacity:.55}
/* flex の子なので width:100% を明示しないと縮んで中央に寄る（.c-in の margin:0 auto が効く）*/
.c-hero-body{position:relative; width:100%}
.c-hero-logo{margin-top:var(--vsg-sp-6)}
/* SVG の中の色を問わず白に潰す。インライン SVG にすると禁止値がテンプレートに入る */
.c-hero-logo img{height:40px; width:auto; display:block; filter:brightness(0) invert(1)}
.c-hero-logo-ph{display:inline-block; border:1px solid var(--vsg-br-l); color:var(--vsg-w);
                font-size:var(--vsg-fs-1); letter-spacing:.12em;
                padding:var(--vsg-sp-2) var(--vsg-sp-4)}
.c-hero-copy{margin:var(--vsg-sp-6) 0 0; font-size:var(--vsg-fs-3); line-height:1.85; max-width:480px}
.c-hero-stats{display:flex; gap:var(--vsg-sp-7); margin:var(--vsg-sp-7) 0 0;
              padding:var(--vsg-sp-6) 0; border-top:1px solid var(--vsg-weak);
              border-bottom:1px solid var(--vsg-weak); max-width:640px}
.c-hero-exit{margin-top:var(--vsg-sp-6); padding:var(--vsg-sp-4) var(--vsg-sp-5);
             border-left:4px solid var(--vsg-br-fill);
             font-size:var(--vsg-fs-2); line-height:1.85; max-width:640px}
.c-hero-exit a{color:var(--vsg-w); font-weight:700; border-bottom:1px solid var(--vsg-br-l);
               padding-bottom:var(--vsg-sp-1); white-space:nowrap}
.c-hero-exit a:hover{color:var(--vsg-br-200); text-decoration:none}
/* 仮素材バッジ。2026-09-24：ヒーローが画面幅いっぱいになったので、
   画面の右端ではなく**本文カラム（.c-in・max 1120px）の右端**に合わせている。
   1120px より狭い画面では 48px の余白に落ちる（max の左側が勝つ）。
   本番データに差し替えたら inc/corp.php の hero_badge を空にする＝この箱ごと消える */
.c-hero-badge{position:absolute; right:max(var(--vsg-sp-7), calc(50% - 512px));
              bottom:var(--vsg-sp-6); z-index:2;
              border:1px solid var(--vsg-br-l); padding:var(--vsg-sp-2) var(--vsg-sp-4);
              font-size:var(--vsg-fs-1); letter-spacing:.12em; color:var(--vsg-w)}

/* 動きに配慮する設定の環境では動画を止めて poster だけ見せる */
@media (prefers-reduced-motion: reduce){ .c-hero-media video{display:none} }

/* ============================================================
   8. セクション個別
   ============================================================ */
/* ABOUT：本文脇の実績ボックス */
.c-callout{background:var(--vsg-br-050); border-left:4px solid var(--vsg-br-fill);
           padding:var(--vsg-sp-5) var(--vsg-sp-6)}

/* GROUP：グループ規模の横並び */
.c-stats-row{display:flex; gap:var(--vsg-sp-7); margin:var(--vsg-sp-7) 0 0; flex-wrap:wrap}
.c-stat-inline{display:flex; align-items:baseline; gap:var(--vsg-sp-2)}
/* GROUP：YOU ARE HERE。余白は .g-firm が持っているので、ここは色と寄せだけ。
   ブランド面には ink 文字を置く（白文字にしない。6.61:1）*/
/* 2026-09-24：この行だけ天地中央にした。§42
   ハイライト行は「YOU ARE HERE」の1行ぶん左カラムが高いのに、
   .g-firm の align-items:baseline のせいで右の説明が最初の行に揃ってしまい、
   上に張り付いて見えていた。**行の高さも余白も変わらない**ので、
   「ハイライト行にだけ余白や要素を足さない」という決め事とは衝突しない。
   .g-firm より後ろに書くこと（同じ詳細度なので後勝ち）*/
.c-here{background:var(--vsg-br-fill); align-items:center}
.c-here .c-h4{color:var(--vsg-ink)}
.c-here .c-sm{color:var(--vsg-ink)}
.c-here-lbl{display:block; margin-bottom:var(--vsg-sp-1);
            font-size:var(--vsg-fs-1); letter-spacing:.24em; font-weight:700}
.c-firm-name{color:var(--vsg-w)}

/* ORGANIZATION：数値カード */
.c-num-card{border-top:4px solid var(--vsg-br-fill); padding-top:var(--vsg-sp-5)}

/* COMPANY PROFILE：法人概要の表 */
.c-tbl{border:1px solid var(--vsg-rule); background:var(--vsg-w); margin-top:var(--vsg-sp-7)}
.c-tbl-row{border-bottom:1px solid var(--vsg-rule)}
.c-tbl-row:last-child{border-bottom:0}
.c-th{background:var(--vsg-br-050); padding:var(--vsg-sp-5) var(--vsg-sp-6);
      font-size:var(--vsg-fs-2); color:var(--vsg-sub)}
.c-td{padding:var(--vsg-sp-5) var(--vsg-sp-6); font-size:var(--vsg-fs-2)}

/* NETWORK：拠点数 */
/* 2026-09-20 に拠点数の列を外したので現在は未使用。戻すとき用に残置 */
.c-net-count{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-br-text); font-weight:700}

/* PUBLICATION：動画カード */
.c-media-card{margin-top:var(--vsg-sp-5); background:var(--vsg-w);
              border-left:4px solid var(--vsg-br-fill); padding:var(--vsg-sp-6) var(--vsg-sp-7)}

/* RECRUIT：職種タグ */
.c-tags{display:flex; flex-wrap:wrap; gap:var(--vsg-sp-4); margin-top:var(--vsg-sp-6)}
.c-tag{background:var(--vsg-w); border:1px solid var(--vsg-br-text); color:var(--vsg-br-text);
       font-size:var(--vsg-fs-2); font-weight:700; padding:var(--vsg-sp-2) var(--vsg-sp-5)}

/* CONTACT：3カラムの箱組みはこの1セクションだけに絞る */
.c-card{background:var(--vsg-w); border-top:4px solid var(--vsg-br-fill);
        padding:var(--vsg-sp-6); display:flex; flex-direction:column; gap:var(--vsg-sp-4)}
.c-card-body{flex-grow:1}

/* 下層ページ（page-corpsub.php）*/
.c-page-head{padding:var(--vsg-sp-9) 0 var(--vsg-sp-7)}
.c-crumb{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub);
         margin:0 0 var(--vsg-sp-4)}
.c-subnav{border-top:1px solid var(--vsg-rule); border-bottom:1px solid var(--vsg-rule)}
.c-subnav ul{display:flex; flex-wrap:wrap; gap:var(--vsg-sp-5) var(--vsg-sp-6);
             padding:var(--vsg-sp-4) 0; margin:0}
.c-subnav a{font-size:var(--vsg-fs-2); font-weight:500; color:var(--vsg-body)}
.c-subnav a:hover{color:var(--vsg-br-text)}
.c-subnav .current_page_item > a,
.c-subnav .current_page_ancestor > a{color:var(--vsg-br-text); font-weight:700}
.c-entry{margin-top:var(--vsg-sp-7)}
.c-entry > * + *{margin-top:var(--vsg-sp-5)}
.c-entry h2{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-6);
            line-height:1.5; letter-spacing:.04em; color:var(--vsg-ink);
            margin-top:var(--vsg-sp-8)}
.c-entry h3{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-4);
            line-height:1.6; letter-spacing:.04em; color:var(--vsg-ink);
            margin-top:var(--vsg-sp-7)}
.c-entry h4{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-3);
            line-height:1.6; letter-spacing:.04em; color:var(--vsg-ink)}
/* 本文はエディタの内容。上のリセットで消した箇条書きをここだけ戻す */
.c-entry ul{list-style:disc; padding-left:var(--vsg-sp-5)}
.c-entry ol{list-style:decimal; padding-left:var(--vsg-sp-5)}
.c-entry li{font-size:var(--vsg-fs-2); line-height:1.9}
.c-entry table{width:100%; border-collapse:collapse}
.c-entry th,.c-entry td{border:1px solid var(--vsg-rule); padding:var(--vsg-sp-3) var(--vsg-sp-4);
                        font-size:var(--vsg-fs-2); text-align:left}
.c-entry th{background:var(--vsg-br-050); color:var(--vsg-sub); font-weight:500}

/* 下層ページの専用組み（2026-10-02・§70）。inc/corp.php の pages[] があるページだけ。
   見出しの下の余白は .c-page-head が持つので、本文セクションは上を詰める */
.c-sec--flush{padding-top:0}
/* 5つの強み：左に番号と短い名前、右にキャッチと本文。トップの .g-biz--wide と同じ 240px */
.g-strength{display:grid; grid-template-columns:240px 1fr; gap:var(--vsg-sp-6)}
.c-str-no{font-family:var(--vsg-font-display); font-weight:600; font-size:var(--vsg-fs-6);
          line-height:1.2; color:var(--vsg-br-text); font-variant-numeric:tabular-nums}
.corp-site .c-str-name{margin-top:var(--vsg-sp-2)}   /* .corp-site h2 の margin:0 に勝たせる */
.c-str-body{margin-top:var(--vsg-sp-4)}
/* キャッチの行末に1〜2字だけ落ちるのを避ける（対応ブラウザのみ。非対応でも普通に折り返すだけ）*/
.g-strength .c-h3,.c-staff-catch{text-wrap:pretty; word-break:auto-phrase}   /* auto-phrase は文節で折る（lang="ja" のとき・Chrome/Edge）*/
/* スタッフ紹介：左に写真・氏名・プロフィール、右にメッセージ。
   写真は既存の156×156を120pxで出す（原寸より大きくしない）*/
.g-staff{display:grid; grid-template-columns:280px 1fr; gap:var(--vsg-sp-7)}
.c-staff-prof{display:grid; gap:var(--vsg-sp-4); align-content:start}
.c-staff-photo{display:block; width:120px; height:120px; object-fit:cover}
.corp-site .c-staff-info{display:grid; gap:var(--vsg-sp-2); margin:0}
.c-staff-info > div{display:grid; grid-template-columns:96px 1fr; gap:var(--vsg-sp-3)}
.corp-site .c-staff-info dt{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-sub); font-weight:500; margin:0}
.corp-site .c-staff-info dd{font-size:var(--vsg-fs-1); line-height:1.85; color:var(--vsg-body); margin:0}
.corp-site .c-staff-catch{margin-bottom:var(--vsg-sp-5)}   /* .corp-site p の margin:0 に勝たせる */
/* .corp-site ul のリセットより詳細度を上げて箇条書きを戻す */
.corp-site .c-staff-ul{list-style:disc; padding-left:var(--vsg-sp-5)}
.corp-site .c-staff-ul li{list-style:inherit}

/* ============================================================
   9. スマホ・タブレット（900px以下）
   ・文字サイズは8段階のまま。14px未満は作らない
   ・余白も4pxグリッドのまま（96→64、48→24）
   ・主見出しだけ 56px→44px。390px幅では56pxの和文が物理的に収まらない
     （主見出し ÷ 本文 = 3.5倍はPCのみ。ここはマニュアルからの意図的な逸脱）
   ============================================================ */
/* ヘッダーはテーマ側が768pxで高さを変える。デザインの900/400とは別系統なので
   この1行だけ768pxで切っている */
@media (max-width:768px){ :root{--vsg-hdr:70px} }

@media (max-width:900px){
  .c-in{padding:0 var(--vsg-sp-5)}
  .c-sec{padding:var(--vsg-sp-8) 0}
  .c-page-head{padding:var(--vsg-sp-8) 0 var(--vsg-sp-5)}

  /* 2カラム以上は全部1カラムに落とす */
  .g-2,.g-3,.g-4,.g-area,.g-firm,.g-biz,.g-def,.g-280,.g-net,.g-news{
    grid-template-columns:1fr}
  .g-2,.g-3{gap:var(--vsg-sp-6)}
  .g-area,.g-firm,.g-biz,.g-def,.g-280,.g-net,.g-news{gap:var(--vsg-sp-2)}
  .c-row--lg{gap:var(--vsg-sp-2)}

  /* GROUP：領域ラベルを上、法人を下に積む。YOU ARE HERE の位置は変わらない */
  .g-firm{margin-left:0; padding:var(--vsg-sp-3) 0}
  .g-firm.c-here{padding:var(--vsg-sp-4) var(--vsg-sp-5)}
  .g-area > div:first-child{padding-top:0}

  /* 数値カードだけは2×2で残す（4つ縦に並べると間延びする）*/
  .g-4{grid-template-columns:1fr 1fr; gap:var(--vsg-sp-6) var(--vsg-sp-5)}

  /* 法人概要の表：ラベルの色帯をやめ、値の上に小さいラベルとして置く */
  .c-th{background:transparent; padding:0; font-size:var(--vsg-fs-1);
        color:var(--vsg-sub); letter-spacing:.12em}
  .c-td{padding:0}
  .c-tbl .c-tbl-row{padding:var(--vsg-sp-4) var(--vsg-sp-5)}
  /* 白地の行も同様に、行そのものに余白を持たせる */
  .g-biz.c-row{padding:var(--vsg-sp-4) var(--vsg-sp-5)}
  /* 著書のタイルは3列→2列。4冊なので2×2にきれいに収まる。
     1列に落とすと書影が4つ縦に並んで間延びする（数値カードと同じ考え方）*/
  .c-books{grid-template-columns:1fr 1fr; gap:var(--vsg-sp-4)}
  .c-book{padding:var(--vsg-sp-4)}
  .c-book-cover{width:120px}

  /* ヒーロー：縦積み。横方向のグラデーション暗幕は効かないので全面に切り替える */
  .c-hero{min-height:0; padding:var(--vsg-sp-8) 0; display:block}
  .c-h1{font-size:var(--vsg-fs-7)}
  /* ABOUT US の大見出し。2026-09-24 にPC側が44pxになったので、
     この指定は同値になった（実質なにもしていない）。
     **消さずに残している。**PC側を56pxに戻したとき、これが無いと
     56pxがスマホまで降りてくる（過去に実際に起きた）*/
  .c-h2--lg{font-size:var(--vsg-fs-7)}
  /* スマホは暗幕を濃くする（2026-09-24）。§41
     以前は .c-hero-scrim-a（.5）の上に .c-hero-scrim-b を全面 .55 で重ねていて、
     合成すると 1-(1-.5)(1-.55) ＝ 約78%の濃さだった。
     2枚目を外したので、1枚で同じ濃さになるようここで上げている。
     スマホは見出しが動画の全面に乗るので、PCより暗幕が要る */
  .c-hero-scrim-a{opacity:.78}
  /* 高さ32pxを上限に、入りきらない幅では縦横比を保って縮める（2026-09-28。社労士の新ロゴは横長で、
     テーマの img{max-width:100%} に横だけ潰されていた）*/
  .c-hero-logo img{height:auto; max-height:32px; max-width:100%}
  .c-hero-badge{right:var(--vsg-sp-5); bottom:var(--vsg-sp-5)}
  .c-hero-stats{gap:var(--vsg-sp-6)}

  /* 下層ページの専用組み（§70）。番号と名前は横並び、スタッフは写真の右に氏名 */
  .g-strength,.g-staff{grid-template-columns:1fr; gap:var(--vsg-sp-4)}
  .g-strength > div:first-child{display:flex; align-items:baseline; gap:var(--vsg-sp-3)}
  .corp-site .c-str-name{margin-top:0}
  .c-staff-prof{grid-template-columns:96px 1fr; align-items:center}
  .c-staff-photo{width:96px; height:96px}
  .c-staff-info{grid-column:1 / -1}

  /* ボタンは縦積みで全幅 */
  .corp-site .c-btn{display:block; text-align:center; padding:var(--vsg-sp-4) var(--vsg-sp-5)}
  .c-btn-row{display:grid; grid-template-columns:1fr; gap:var(--vsg-sp-3)}
}

/* ---- スマホ（600px以下）だけの出し分け（2026-09-25・§55） ----
   <br class="c-br-sp"> … スマホだけ改行（主見出し・ABOUT見出し）
   <span class="c-pc-only"> … スマホでは消す（ABOUT見出しの「、」）
   44pxの主見出しが1行12字に収まらなくなるのが約580px。そこで折る */
.c-br-sp{display:none}
@media (max-width:600px){
  .c-br-sp{display:inline}
  .c-pc-only{display:none}
  .c-panel{padding:var(--vsg-sp-5)}
  .g-price{grid-template-columns:100px 1fr; gap:var(--vsg-sp-3)}

  /* ヒーローの実績数値は縦1列に積む。2列だと390px幅で「件」や注記が折れていた。
     1列なら数値44px・注記14pxのまま1行に収まる（360pxでも）。
     一度 vw で縮めて2列に収めたが、注記が12pxになるので縦積みに決定 */
  .c-hero-stats{display:grid; grid-template-columns:1fr; gap:var(--vsg-sp-5)}
  .c-hero-stats .c-num,.c-hero-stats .c-sm{white-space:nowrap}
}

/* 見出しを32pxに落とす幅。2026-09-25 に 400px → 500px（§55）。
   430px級（iPhone Pro Max 等）で44pxのままだと「税務署に指摘されない」（10字）や
   「大切な想いと財産を」（9字）が1行に入らず、1字だけ次の行に落ちていた */
@media (max-width:500px){
  .c-h1{font-size:var(--vsg-fs-6)}
  .c-h2--lg{font-size:var(--vsg-fs-6)}
  /* 1行が長い主見出し（社労士「ヒト（人事労務）の面から」12字）。inc/corp.php の catch_fit。
     390pxで26.5px・360pxで24.5px。32pxを超えない（§57） */
  .c-h1--fit{font-size:min(var(--vsg-fs-6), 6.8vw)}
}

/* 360px 級の端末 */
@media (max-width:400px){
  /* ABOUT見出し「税務署に指摘されない」（10字）が32pxでは360px幅に入らない。
     400px以下は画面幅で縮める（390pxで31px・360pxで29px）。§55 */
  .c-h2--lg{font-size:min(var(--vsg-fs-6), 8vw)}
  .g-4{grid-template-columns:1fr; gap:var(--vsg-sp-6)}
}

/* ============================================================
   法人用ヘッダー（2026-09-28・§66）
   header.php の出力を vsg_corp_header_swap()（inc/corp.php）が差し替え、
   <header> に .vsg-corp-hdr を付けている。ここはその見た目だけ。
   ・ロゴ … 「VSG」マーク＋縦線（assets/vsg-hdr-mark.svg）の右に法人名の文字
     テーマの .header__logo span（縦線・余白・2.6rem）が法人名に掛かるので打ち消す
   ・ナビ … ページ内リンク3つ。ナビが出る幅（769px以上）ではハンバーガーは隠す
     （中身が同じ3つになったため）。768px以下はテーマどおりハンバーガーだけ
   ============================================================ */
.vsg-corp-hdr .header__logo a{display:flex; align-items:center}
.vsg-corp-hdr .header__logo .vsg-hdr-name{display:flex; flex-direction:column; justify-content:center;
  margin:0 0 0 30px; padding:0; border:0; color:var(--vsg-w);
  font-family:"Noto Sans JP", sans-serif; font-weight:700; font-size:20px; line-height:1.35;
  letter-spacing:.04em; white-space:nowrap}
.vsg-corp-hdr .header__logo .vsg-hdr-name__line{display:block; margin:0; padding:0; border:0; font-size:inherit; line-height:inherit}
.vsg-corp-hdr .header-nav__item ul.globalpagemenu li{white-space:nowrap}
/* 社労士の下層ページへのナビ（2026-10-02・§70）。共通ヘッダーのアイコンと同じ Material の outlined 系・白 */
.vsg-corp-hdr .header-nav__item ul.globalpagemenu a.icon__strength::before{background-image:url("header_icon_strength.svg")}
.vsg-corp-hdr .header-nav__item ul.globalpagemenu a.icon__staff::before{background-image:url("header_icon_staff.svg")}
.vsg-corp-hdr .header-nav__item ul.globalpagemenu a[aria-current]{text-decoration:underline; text-underline-offset:6px}
@media (min-width:769px){
  .vsg-corp-hdr .header-nav__item:has(#hamburger-nav){display:none !important}
}
@media (max-width:1024px){
  .vsg-corp-hdr .header__logo .vsg-hdr-name{margin-left:20px; font-size:17px}
  .vsg-corp-hdr .header-nav__item ul.globalpagemenu li{font-size:1.6rem}
  .vsg-corp-hdr .header-nav__item ul.globalpagemenu li:not(:first-child){margin-left:18px}
}
@media (max-width:414px){
  .vsg-corp-hdr .header__logo .vsg-hdr-name{margin-left:14px; font-size:14px}
}
/* ロゴを画像1枚で出す法人（header_logo。社労士・2026-09-28）。
   法人ロゴ（青）をヒーローと同じフィルターで白くする。白版の画像に替えたら filter を外す。
   スマホは画面幅に合わせて縮める（ハンバーガー44px＋余白を残す） */
.vsg-corp-hdr .header__logo img.vsg-hdr-img{height:40px; width:auto; max-width:none; filter:brightness(0) invert(1)}
@media (max-width:1024px){
  .vsg-corp-hdr .header__logo img.vsg-hdr-img{height:32px}
}
/* ナビが5つの法人（社労士・2026-10-02・§70。inc/corp.php が --wide を付ける）。
   テーマのヘッダーは幅1100pxが上限で、40pxのロゴ（約520px）＋5項目（約640px）が入らない。
   ロゴを32px（1024px以下と同じ）、ナビを16px・間隔24pxにして、1101px以上で約60px空く。
   それでも入らない1100px以下はナビを隠してハンバーガーに（中身は同じ5項目）*/
.vsg-corp-hdr--wide .header__logo img.vsg-hdr-img{height:32px}
.vsg-corp-hdr--wide .header-nav__item ul.globalpagemenu li{font-size:1.6rem}
.vsg-corp-hdr--wide .header-nav__item ul.globalpagemenu li:not(:first-child){margin-left:24px}
@media (max-width:1100px){
  .vsg-corp-hdr--wide .header-nav__item:has(.globalpagemenu){display:none !important}
  .vsg-corp-hdr--wide .header-nav__item:has(#hamburger-nav){display:block !important}
}
@media (max-width:768px){
  .vsg-corp-hdr .header__logo:has(.vsg-hdr-img){width:auto; min-width:0; flex:1; margin-right:12px}
  /* 高さの上限で法人間のマークの大きさを揃え、入りきらない幅（社労士）は幅で縮める */
  .vsg-corp-hdr .header__logo:has(.vsg-hdr-img) a{display:block; width:100%}  /* 幅を決めないと max-width:100% が0に潰れる */
  .vsg-corp-hdr .header__logo img.vsg-hdr-img{display:block; height:auto; width:auto; max-height:28px; max-width:100%}
}