/*
Theme Name: VSG Corporate v4
Theme URI: https://vsg-corporate.jp
Author: VSG
Description: VSGコーポレート税理士法人 公式サイト（v4: HOME / 事務所の強み / 事務所概要 / お問い合わせ を追加）
Version: 1.2
Text Domain: vsg-corporate
*/

/*
セクション番号に欠番があるのは意図的です。
FAQ（旧12）・旧フォーム（旧13）・HOMEの代表メッセージ（旧16-7）と
HOMEのCTA（旧16-12。セクション17へ移動）を削除した際に、
残したセクションの番号は振り直さず、そのまま維持しています。
（各テンプレートのコメントが番号で参照しているため）
*/

/* ==========================================================
   1. DESIGN TOKENS（design-tokens.json と 1:1 対応）
   ここの値を変えるだけでサイト全体の色・フォントが変わる
   ========================================================== */
:root {
  /* カラー */
  --bg:           #ffffff;   /* ページ標準背景 */
  --bg-soft:      #f4fbfc;   /* 薄いシアン背景（交互セクション） */
  --ink:          #0b2228;   /* 本文・見出し基本色（濃紺） */
  --ink-soft:     #3a525a;   /* 補助テキスト */
  --muted:        #7e8d92;   /* キャプション・英字サブラベル */
  --line:         #dceef1;   /* 細い区切り罫線 */
  --line-strong:  #bfdde2;   /* 強めの罫線・カード枠線 */
  --cyan:         #2dbecd;   /* ブランドメインカラー（ヘッダー・ボタン） */
  --cyan-deep:    #1d9aa8;   /* シアン濃色（リンク・hover） */
  --cyan-tint:    #e6f6f8;   /* シアン極薄（バッジ・hover背景） */
  --blue:         #005b91;   /* VSGグループ共通の青。HEROの白帯見出しに使用 */

  /* --cyan をベタで広く敷くセクション面の色（2026-08-12）。
     色相(185.6°)と彩度(64%)は --cyan と同じで、明度だけ 49%→40% に落としてある。
     --cyan(#2dbecd) そのままより締まって見え、かつ暗くなり過ぎない点。

     ★文字色との関係（この色相・彩度で実測）
       明度 37.9%以上 … 濃紺文字のみ成立（白は 3.6:1 以下）
       明度 33.6〜37.9% … 白も濃紺もAAを満たさない帯
       明度 33.6%以下 … 白文字のみ成立（濃紺が 3.7:1 以下）
     40% は上側の帯なので、文字は濃紺（--on-brand）で 4.97:1。
     明るさを保ったまま白文字にすることはできない。

     --cyan 自体を変えないのは、グループ共通色（相続サイトと同値）であり、
     濃紺カード上の英字ラベル(.adv-en)が 7.35:1 で成立しているため */
  --brand-surface: #259ba7;

  /* シアン地（--brand-surface のベタ塗りセクション）の上に乗せる文字・罫線。
     文字は白（2026-08-12 の指示。地の色は #259ba7 で確定のうえ白を選択）。
     #259ba7 に白は 3.32:1。大きい文字の基準 3:1 は満たすが AA(4.5:1) には届かない。
     該当するのは 16〜18px の .section-jp / .section-lead / .axis-stops span /
     .group-footnote。大見出し(.section-en 36〜96px)は基準内。
     透過は一切掛けない — 白80%まで落とすと 2.7:1 まで下がり大きい文字の基準も割る。
     --muted / --cyan-deep は地に沈むためこの配下では使わない */
  --on-brand:      #ffffff;                /* シアン地の文字。3.32:1 */
  --on-brand-line: rgba(255,255,255,0.55); /* 罫線・軸線（装飾） */
  --paper:        #ffffff;   /* カード面色 */

  /* レイアウト
     ヘッダー高はここ1箇所で持つ。.page-body のオフセットと
     html の scroll-padding-top（アンカー着地点）が連動して追従する。
     ヘッダー高を変えるときはこの2つだけ直せばよい。 */
  --header-h:     100px;     /* PC・タブレット */
  --header-h-sp:  64px;      /* 〜768px。スマホで100pxは画面の1割を常時占有するため低くする */

  /* 濃色セクション（STRENGTHS等） */
  --dark-bg:      linear-gradient(135deg, #0b2228 0%, #103842 50%, #0b2228 100%);
  --dark-text:    #ffffff;
  --dark-muted:   rgba(255, 255, 255, 0.85);

  /* フォントファミリー */
  --font-serif-jp: 'Noto Serif JP', serif;
  --font-sans-jp:  'Noto Sans JP', sans-serif;
  --font-latin:    'Cormorant Garamond', serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* レイアウト */
  --max-width:        1280px;
  --section-pad-v:    120px;
  --section-pad-h:    40px;
  --section-pad-mob:  80px 24px;
  --breakpoint:       980px;
  --gap-large:        80px;
}

/* ==========================================================
   2. RESET / BASE
   ========================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* 固定ヘッダーの分だけアンカー着地点を下げる（ヘッダー高＋20pxの余白）。
     個々の要素に scroll-margin-top を撒くとヘッダー高を変えるたび全部直すことになるので、
     ここ1箇所で持たせて --header-h に追従させる。 */
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--font-sans-jp);
  font-feature-settings: "palt" 1;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--cyan-deep);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--cyan);
}

/* ==========================================================
   3. TYPOGRAPHY（design-tokens.json typeScale より）
   ========================================================== */

/* セクション英字大見出し */
.section-en {
  font-family: var(--font-latin);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* 下層ページの英字H1 */
.page-title-en {
  font-family: var(--font-latin);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* セクション日本語サブ */
.section-jp {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--muted);
}

/* イントロタイトル */
.intro-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 600;
  line-height: 1.3;
}

/* イントロサブ */
.intro-sub {
  font-family: var(--font-serif-jp);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.7;
}

/* セクションリード文 */
.section-lead {
  font-size: 18px;
  font-family: var(--font-serif-jp);
  line-height: 2;
  color: var(--ink-soft);
  max-width: 640px;
}

/* サービスタイトル */
.svc-title {
  font-family: var(--font-serif-jp);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
}

/* eyebrow（— ABOUT US 等） */
.eyebrow {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* 日本語タイトル（下層ページ見出し直下） */
.jp-title {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--muted);
}

/* ==========================================================
   4. LAYOUT
   ========================================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-pad-h);
}

.section {
  padding: var(--section-pad-v) var(--section-pad-h);
}

.section--soft {
  background: var(--bg-soft);
}

.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* シアンをベタで敷くセクション。白文字を乗せるので --cyan そのものではなく
   明度を落とした --brand-surface を使う（白文字 4.91:1）。
   文字色の差し替えは 16章の .home .section--brand 以下にまとめてある */
.section--brand {
  background: var(--brand-surface);
}

@media (max-width: 980px) {
  .section {
    padding: var(--section-pad-mob);
  }
  .container {
    padding: 0 24px;
  }
}

/* ==========================================================
   5. HEADER（固定・シアン背景）
   ========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
}

/* --- ロゴ ---
   assets/logo-vsg-full.svg は viewBox="0 0 1461.6 140"、
   つまり約 10.44 : 1 のかなり横長なロゴ。高さ基準で指定し、幅は auto に任せる。
   （高さ34px = 幅約355px）
   塗りは fill:currentColor にしてあるので、色は color で指定する。
   シアン背景の上では「VSG」の箱が白・文字が地色（シアン）の抜きになる。 */
.site-header .logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.site-header .logo {
  height: 34px;
  width: auto;
  display: block;
  color: #fff;
}

/* SVGが読めなかった場合の文字ロゴ */
.site-header .logo-fallback {
  color: #fff;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.1em;
}

/* 横長ロゴなので、ナビとぶつからないよう画面幅に応じて縮める */
@media (max-width: 1200px) {
  .site-header .logo { height: 28px; }
}

@media (max-width: 980px) {
  .site-header { padding: 0 24px; }
  /* SPは高さ基準をやめて幅基準にする（2026-08-12 指示：70vw程度）。
     10.44:1 の横長なので 70vw のとき高さは約 6.7vw
     （375px幅 → 幅263px・高さ25px / 320px幅 → 幅224px・高さ21px）。
     460px で止めているのは、タブレット幅で 70vw が伸びすぎると
     ヘッダー（768px以下は64px）に収まらなくなるため。460px時の高さは約44px。 */
  .site-header .logo { width: min(70vw, 460px); height: auto; }
}

@media (max-width: 480px) {
  /* 70vwのロゴとハンバーガー（44px角）を収めるため左右を詰める。
     320px幅で 224+28+44=296px、残り24pxが両者の間隔になる。 */
  .site-header { padding: 0 14px; }
}

/* ナビは日本語表記（フッターと同じラベル）。
   欧文セリフ（--font-latin）だと和文が別フォントに落ちるので和文サンセリフを指定。 */
/* nav 自体をflexにして天地中央に揃える。
   ブロックのままだと中の <a> がインラインになり、.header-cta の縦padding が
   行ボックスの高さに反映されない。結果ボタンの箱だけが行から食み出し、
   リンク文字とボタンで天地が揃わなくなる。 */
.site-header .nav-desktop {
  display: flex;
  align-items: center;
}

/* 字間と項目間隔は、13px時代より詰めてある。
   16px化でナビの実幅が約629px→726pxに膨らみ、ロゴ(28pxで幅292px)と合わせると
   ヘッダーに約1100px必要になってしまうため。0.04em / 14px まで詰めると
   ナビ幅が623pxに戻り、必要幅は約996px。これで1024pxまでフルナビを保てる。 */
.site-header nav a {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-family: var(--font-sans-jp);
  font-weight: 500;
  margin-left: 14px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.site-header nav a:hover {
  opacity: 0.75;
  color: #fff;
}

.site-header .header-cta {
  background: #fff;
  color: var(--cyan-deep);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: 2px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.site-header .header-cta:hover {
  background: var(--ink);
  color: #fff;
}

/* --- ハンバーガーボタン ---
   1024px以下で出る。それ以上では display:none。
   3本線は :root の --header-h とは無関係な固定寸法（44px角）。
   44pxはタップ目標の下限として一般的に使われる寸法。 */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  /* 開いたときに×へ変形する。transform-origin は中心のまま回すだけでよい */
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* 開いた状態：上下の線を回して×、真ん中は消す */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- 全画面オーバーレイメニュー ---
   閉じているときは visibility:hidden。display:none と違って transition が効くうえ、
   アクセシビリティツリーからも外れるのでキーボードフォーカスが迷い込まない。 */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;              /* ヘッダー(1000)より下。ヘッダーの×ボタンは押せたままにする */
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  overflow-y: auto;          /* 小さい端末で項目がはみ出しても読めるように */
  -webkit-overflow-scrolling: touch;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  /* ヘッダーの下から始める。--header-h は画面幅で切り替わるので、
     769〜1024px（ヘッダー100px）でも先頭項目がヘッダーに潜らない。 */
  padding: calc(var(--header-h) + 40px) 24px 60px;
  width: 100%;
}

.nav-overlay__inner a {
  color: #fff;
  font-family: var(--font-sans-jp);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 6px 4px;
}

.nav-overlay__inner a:hover {
  opacity: 0.75;
  color: #fff;
}

.nav-overlay__cta {
  background: #fff;
  color: var(--cyan-deep) !important;   /* 上の a のcolorを上書き */
  font-weight: 700 !important;
  padding: 14px 40px !important;
  border-radius: 2px;
  margin-top: 8px;
}

/* --- 切替 ---
   1024px以下でフルナビを畳んでハンバーガーに寄せる。
   16px化でナビ幅が726pxまで膨らみ、ロゴと合わせて約996px必要になるため、
   1024pxが余裕をもって収まる下限。 */
@media (max-width: 1024px) {
  .site-header .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* 1024pxより上ではオーバーレイを完全に無効化する。
   画面を広げた状態で開きっぱなしになるのを防ぐ（JS側でも閉じるが、CSSでも保険をかける）。 */
@media (min-width: 1025px) {
  .nav-overlay { display: none; }
}

/* メニューを開いている間は背後のページをスクロールさせない */
body.nav-open {
  overflow: hidden;
}

/* ヘッダー分のオフセット。--header-h に追従する */
.page-body {
  padding-top: var(--header-h);
}

/* スマホではヘッダーを低くする。100pxのままだと画面の約1割を常時占有するため。
   --header-h 自体を差し替えることで、ヘッダー高・.page-body のオフセット・
   scroll-padding-top・オーバーレイの上余白がまとめて追従する。
   プロパティを個別に上書きすると、追従漏れが必ずどこかで出る。 */
@media (max-width: 768px) {
  :root { --header-h: var(--header-h-sp); }
}

/* ==========================================================
   6. BREADCRUMB
   ========================================================== */
.breadcrumb-wrap {
  background: var(--bg-soft);
  padding: 12px 0;
  text-align: center;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.breadcrumb-wrap a {
  color: var(--cyan-deep);
}

/* ==========================================================
   7. BUTTONS
   ========================================================== */
.btn {
  display: inline-block;
  padding: 18px 32px;
  font-size: 16px;
  letter-spacing: 0.2em;
  font-family: var(--font-sans-jp);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: 2px solid transparent;
  border-radius: 2px;
  text-align: center;
}

.btn--primary {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
}

.btn--primary:hover {
  background: #fff;
  color: var(--cyan-deep);
  border-color: var(--cyan-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
}

.btn--ghost:hover {
  background: var(--cyan);
  color: #fff;
}

/* ==========================================================
   8. PAGE HERO（下層ページ）
   ========================================================== */
.page-hero {
  padding: 80px 40px 60px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  /* .page-title-en のスタイルを継承 */
  font-family: var(--font-latin);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ==========================================================
   14. FOOTER
   ========================================================== */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 60px 40px 32px;
  font-size: 16px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a:hover {
  color: var(--cyan);
}

.site-footer .footer-name {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}

/* メニュー項目。flex + gap にしてあるのは、インライン要素の並びだと
   項目が地の文として扱われ、SPで語の途中で改行してしまうため。
   nowrap で「1項目は必ず1行」を保証し、折り返しは項目単位で起きる。
   gap なので最後の項目に余白が残らない（旧 margin-right の問題も解消）。 */
.site-footer .footer-nav {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.site-footer .footer-nav a {
  white-space: nowrap;
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}
/* 個人情報保護方針へのリンク。著作権表記と同じ 0.4 では
   法的なリンクとして薄すぎるので濃度を上げ、下線も付ける
   （footer の a は既定で text-decoration:none のため、
   色だけではリンクだと気づけない）。 */
.footer-bottom .footer-legal { margin: 8px 0 0; }
.footer-bottom .footer-legal a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}
.footer-bottom .footer-legal a:hover { color: #fff; }

/* ==========================================================
   15. UTILITY
   ========================================================== */
.text-cyan    { color: var(--cyan); }
.text-muted   { color: var(--muted); }
.text-center  { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-80 { margin-top: 80px; }

/* スクリーンリーダー用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   16. HOME（front-page 専用）
   静的版 dist/index.html のレイアウトを移植したもの。
   下層ページ（services / flow 等）と共通クラス名が衝突するため、
   すべて body.home 配下にスコープしてある。ここを触っても
   下層ページの見た目は変わらない。
   ========================================================== */

/* --- HOMEはヒーローをヘッダー下まで敷き込むのでオフセットを外す --- */
.home .page-body { padding-top: 0; }

/* --- 共通：セクション見出し（2カラムグリッド） --- */
.home .section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 80px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.home .section-num {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--cyan-deep);
}
.home .section--dark .section-head { border-top-color: rgba(255,255,255,0.18); }
.home .section--dark .section-num  { color: var(--cyan); }
.home .section--dark .section-en   { color: #fff; }
.home .section--dark .section-jp   { color: rgba(255,255,255,0.65); }
.home .section--dark .section-lead { color: rgba(255,255,255,0.8); }

/* --- シアン地セクション（GROUP / SERVICES / FLOW）の文字・罫線 ---
   文字は白。--muted(1.53:1) / --cyan-deep(1.50:1) / --line（ほぼ同色）は
   地に溶けるので使わない。

   ★ .section--brand に一括で color:#fff を掛けてはいけない。
     配下の白カード（.service / .group-firm）の中で .service-title は
     色指定を持たず親を継ぐため、白地に白文字になって消える。
     地がシアンに接している要素だけを個別に列挙してある。 */
.home .section--brand .section-head { border-top-color: var(--on-brand-line); }
.home .section--brand .section-num  { color: var(--on-brand); }
.home .section--brand .section-en   { color: var(--on-brand); }
.home .section--brand .section-jp   { color: var(--on-brand); }
.home .section--brand .section-lead { color: var(--on-brand); }

/* GROUP：軸線・両端のドット・カード間の矢印がシアン系で見えなくなる */
.home .section--brand .group-axis .axis-line { background: var(--on-brand-line); }
.home .section--brand .group-axis .axis-line::before,
.home .section--brand .group-axis .axis-line::after { background: #fff; }
.home .section--brand .group-axis .axis-stops span { color: var(--on-brand); }
.home .section--brand .group-firms::before,
.home .section--brand .group-firms::after { color: var(--on-brand); }
.home .section--brand .group-footnote { color: var(--on-brand); }
/* YOU ARE HERE バッジはカード上端(top:-15px)に跨るため地がシアン。
   シアン地＋白文字では箱ごと消えるため、ここだけ濃紺に反転して残す */
.home .section--brand .firm-badge { background: var(--ink); color: #fff; }

/* FLOW：全要素が直接シアン地に乗る。
   h4 は色指定が無く body の --ink を継ぐので明示的に白にする */
.home .section--brand .flow .flow-step::before,
.home .section--brand .flow .flow-step::after { background: #fff; }
.home .section--brand .flow .step-en      { color: var(--on-brand); }
.home .section--brand .flow .flow-step h4 { color: var(--on-brand); }
.home .section--brand .flow .flow-step p  { color: var(--on-brand); }

/* --- 共通：ボタン（矢印アイコンを入れるため inline-flex 化） --- */
.home .btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.home .btn .arrow { transition: transform 0.25s; }
.home .btn:hover .arrow { transform: translateX(6px); }

/* ----------------------------------------------------------
   16-1. HERO
   ---------------------------------------------------------- */
.home .hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 140px 40px 120px;
  overflow: hidden;
  color: #fff;
  text-align: left;
}
.home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(45,190,205,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(29,154,168,0.55) 0%, transparent 55%),
    linear-gradient(135deg, #0b2228 0%, #103842 50%, #0b2228 100%);
}
.home .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 50%, transparent 0%, rgba(11,34,40,0.4) 100%);
}

/* --- 背景動画レイヤー（4本クロスフェード） ---
   hero-bg(z:0) → hero-video(z:1) → hero-overlay(z:2) → hero-content(z:3) の重ね順。
   動画が未配置・未読込のあいだは video が透明のままなので、
   下の hero-bg のグラデーションがそのまま見える。 */
.home .hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.home .hero-video__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
/* 「現在のスライド」かつ「再生準備済み」の両方が揃って初めて表示する。
   読込前にいきなり黒画面が出ることがない。 */
.home .hero-video__item.is-active.is-ready { opacity: 1; }
/* 1本目を出す瞬間だけフェードを切る（JSが1フレームだけ付ける）。
   初回に1.2sかけると、その間グラデーション背景が見え続けて
   「静止画から始まる」ように見えるため。 */
.home .hero-video__item.no-fade { transition: none; }

/* モバイルにも動画を出す。ただし配るのは縦位置(9:16 / 608x1080)に切り出した
   専用ファイル（front-page.php の data-src-sp）。横版をここで cover すると
   横の約7割が画面外に落ち、見えない部分にも通信量を払うことになるため。
   SP4本で計2.49MB、初回に読むのは1本目+2本目の1.42MBだけ。
   データセーバー有効時と 2g/slow-2g では JS 側が読み込みごと見送る。 */

/* 「動きを減らす」設定の利用者には動画を出さない */
@media (prefers-reduced-motion: reduce) {
  .home .hero-video { display: none; }
}

.home .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 見出しを白帯で敷くので、参考サイトや旧版より薄めでよい */
  background: linear-gradient(180deg, rgba(11,34,40,0.10) 0%, rgba(11,34,40,0.22) 60%, rgba(11,34,40,0.42) 100%);
}
/* 中身（白帯・ボタン）の左端は揃えたまま、かたまりごと画面中央に置く。
   そのために箱の幅を固定せず fit-content で「一番幅の広い行」に合わせて縮める。
   親（.home .hero）が align-items:center なので、縮んだ箱はそのまま中央に来る。
   width:1000px のままだと箱だけが中央にあって中身が左端に張り付くため左寄りに見える。
   幅の基準は4スライド通しての最長行。スライドごとに fit-content させると
   切替のたびに左端が横に飛ぶので、ここ（4組の外側）で1回だけ効かせている。 */
.home .hero-content {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 1000px;
  margin: 0 auto;
}

/* --- コピーのローテーション ---
   grid で4枚を同じセルに重ねる。absolute と違いコンテナが自動で
   「一番背の高いスライド」の高さになるため、切替時に下のボタンが動かない。 */
.home .hero-copy { display: grid; }
.home .hero-copy__item {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  /* visibility:hidden は表示を消すだけでなく、支援技術のアクセシビリティ
     ツリーからも外れる。4組すべてが読み上げられるのを防いでいる。 */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.home .hero-copy__item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
/* 見出しは行ごとに白のベタ塗り帯 × ブルー文字。
   動画の上でも文字が確実に読めるので、全面を暗く沈めるオーバーレイに頼らずに済む。
   コントラスト比 約7.5:1（#005b91 on #fff）で WCAG AAA 準拠。 */
.home .hero h1 {
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 58px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 36px;
  color: var(--blue);
}
.home .hero h1 .line {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 4px 16px 7px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(11,34,40,0.18);
}
.home .hero h1 .line + .line { margin-top: 14px; }
/* 2行目は説明文なので一段小さく。
   58pxのままだと最長のコピー（22文字）が幅1000pxを超えてはみ出す。 */
.home .hero h1 .line-sub {
  /* 下限は16px。2026-08-10 の16px化では clamp の第1引数が置換対象から
     漏れており、2vw が小さいSPでは下限に張り付いて15pxで出ていた */
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 16px 8px;
}
/* 社名ブロック。帯は敷かず、影で動画から浮かせる。
   全スライド共通の常時表示なので h1（ローテーション）の外の兄弟要素。
   上の余白は h1 の margin-bottom(36px) と相殺して36pxになるため指定しない
   （ここに 24px と書いても大きい方が勝つので、書くと実値と食い違って紛らわしい）。 */
.home .hero-brand {
  display: block;
  margin: 0 0 36px;
}
.home .hero-brand__text {
  display: block;
  font-family: var(--font-sans-jp);
  font-weight: 500;
  /* 下限は16px。1.5vw はSPで極小になるため、実際はほぼ下限で表示される。
     16px化のときに clamp の下限が漏れて13pxのままだった */
  font-size: clamp(16px, 1.5vw, 18px);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(11,34,40,0.75);
}
/* H1の3行目をロゴに置き換えたもの（assets/logo-vsg-full.svg）。
   VSGグループロゴ＋区切り線＋社名が1枚に連結されたロゴで、比率は約 10.44 : 1。
   fill:currentColor なので color で白抜きにする。
   グループロゴ側が3行組みで小さくなるため、ヘッダーのロゴより気持ち大きめに取る。 */
.home .hero-logo-line {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.home .hero-logo {
  height: clamp(26px, 3.4vw, 52px);
  width: auto;
  max-width: 100%;
  display: block;
  color: #fff;
}

/* ボタンだけは帯の左端に揃えず中央に置く。
   .hero-content が最長行の幅で画面中央にあるので、その中で center を取れば
   ボタンの中心は画面の中心とぴったり一致する。 */
.home .hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ボタンは data-actions="1" のスライド（現在は4枚目）の間だけ出す。
   .is-toggled はJSが付ける。付いていない＝JSが動いていない環境では
   上のルールだけが効いて常時表示のままになる（CTAが出ないまま終わらない）。
   visibility で切っているので、非表示の間はキーボードフォーカスも
   スクリーンリーダーも届かない。かつ場所は取り続けるため、
   出入りでヒーロー内の他の要素が動くことはない。 */
.home .hero-actions.is-toggled {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.home .hero-actions.is-toggled.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
/* 背景動画は明るいカットも暗いカットも流れるため、透明のままだと
   白フチ＋白文字がカットによって沈む。薄い黒を敷いて下地を安定させる。
   濃さは 0.25。上げすぎるとベタ塗りのボタンに見えて、隣の塗りボタン
   （btn--primary）との主従が曖昧になるので、この程度に留めている。 */
.home .hero .btn--ghost { border-color: rgba(255,255,255,0.8); color: #fff; background: rgba(0,0,0,0.25); }
.home .hero .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.home .hero .btn--primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.home .hero .btn--primary:hover { background: #fff; color: var(--cyan-deep); border-color: #fff; }

/* --- スクロール誘導（SP限定）---
   PCではヒーローの下端が見えているので出さない。表示は768px以下のみ。
   1秒待ってから現す処理はJSではなく animation-delay で行う
   （JSを足さずに済むうえ、読み込みの遅速に左右されない）。
   z-index は .hero-overlay(2) より上、.hero-content(3) と同じ層に置く。
   白い線は明るい動画フレームの上で消えるため影を落としてある
   （.btn--ghost に薄い黒を敷いているのと同じ理由）。 */
.home .hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 4vw;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  /* タップ目標を44px角確保する */
  min-width: 44px;
  min-height: 44px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  opacity: 0;
  animation: hero-scroll-in 0.7s ease 1s forwards;
}
.home .hero-scroll svg {
  animation: hero-scroll-bounce 1.9s ease-in-out 1.7s infinite;
}
@keyframes hero-scroll-in {
  to { opacity: 1; }
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
/* 「動きを減らす」設定では待たずに出し、上下の揺れも止める */
@media (prefers-reduced-motion: reduce) {
  .home .hero-scroll { opacity: 1; animation: none; }
  .home .hero-scroll svg { animation: none; }
}

/* ----------------------------------------------------------
   16-2. INTRO / ABOUT US
   ---------------------------------------------------------- */
.home .section.intro { padding: 140px 40px; background: var(--bg-soft); }
.home .intro-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}
.home .intro-left { position: sticky; top: 120px; }
.home .intro-eyebrow {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--cyan-deep);
  margin-bottom: 32px;
}
.home .intro-title { margin: 0; color: var(--ink); letter-spacing: 0.04em; }
.home .intro-sub {
  margin: 0 0 40px;
  color: var(--ink);
  letter-spacing: 0.04em;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-strong);
}
.home .intro-body {
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------
   16-3. GROUP SUPPORT
   ---------------------------------------------------------- */
/* 背景は .section--brand（シアン）。ここで background を持たせると
   詳細度で utility に勝ってしまうので padding のみ */
.home .section.group-section { padding: 140px 40px; }
.home .group-inner { max-width: var(--max-width); margin: 0 auto; }
.home .section-head.group-head {
  grid-template-columns: 1fr;
  border-top: none;
  padding-top: 0;
  margin-bottom: 80px;
  text-align: center;
}
.home .section-head.group-head .section-en { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: 0.06em; line-height: 1.2; }
.home .section-head.group-head .section-jp { margin-top: 24px; font-family: var(--font-serif-jp); letter-spacing: 0.2em; }
.home .section-head.group-head .section-lead { max-width: none; margin: 32px auto 0; }

.home .group-diagram { position: relative; }
.home .group-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.home .group-axis .axis-line {
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  position: relative;
}
.home .group-axis .axis-line::before,
.home .group-axis .axis-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  transform: translateY(-50%);
}
.home .group-axis .axis-line::before { left: 0; }
.home .group-axis .axis-line::after  { right: 0; }
.home .group-axis .axis-stops {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
}
.home .group-axis .axis-stops span {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--muted);
}

.home .group-firms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.home .group-firms::before,
.home .group-firms::after {
  content: '→';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: serif;
  font-size: 24px;
  color: var(--cyan-deep);
  z-index: 1;
  line-height: 1;
}
.home .group-firms::before { left: calc(33.333% - 12px); }
.home .group-firms::after  { left: calc(66.666% - 12px); }

.home .group-firm {
  background: #fff;
  padding: 40px 32px 36px;
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.home .group-firm:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(45,190,205,0.15); }
.home .group-firm.is-current {
  background: linear-gradient(180deg, #fff 0%, var(--cyan-tint) 100%);
  border: 1px solid var(--cyan);
  box-shadow: 0 12px 32px rgba(45,190,205,0.18);
  transform: translateY(-12px);
}
.home .group-firm.is-current:hover { transform: translateY(-16px); }

.home .firm-badge {
  position: absolute;
  top: -15px;
  left: 24px;
  background: var(--cyan);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.3em;
  padding: 7px 16px;
}
.home .firm-stat {
  position: absolute;
  top: -15px;
  left: 24px;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--cyan-deep);
  background: var(--cyan-tint);
  padding: 7px 16px;
  display: inline-block;
  border: 1px solid var(--line-strong);
}
.home .firm-stat strong {
  font-family: var(--font-latin);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: -1px;
}
.home .firm-phase {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--cyan-deep);
  margin-bottom: 12px;
}
.home .firm-stage {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line-strong);
}
.home .firm-name {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 16px;
}
.home .firm-body {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0;
}
.home .group-footnote {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-serif-jp);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  line-height: 1.7;
  justify-content: center;
}

/* ----------------------------------------------------------
   16-4. PRACTICE AREAS
   ---------------------------------------------------------- */
.home .section.practice-areas { background: var(--bg-soft); padding: 140px 40px; }
.home .pa-inner { max-width: var(--max-width); margin: 0 auto; }
.home .section-head.pa-head {
  grid-template-columns: 1fr;
  border-top: none;
  padding-top: 0;
  margin-bottom: 60px;
  text-align: center;
}
.home .section-head.pa-head .section-en { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: 0.04em; }
.home .section-head.pa-head .section-jp { margin-top: 24px; }
.home .section-head.pa-head .section-lead { max-width: none; margin: 32px auto 0; }

.home .pa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.home .pa-card {
  /* セクション地が --bg-soft になったので、カードは白に入れ替え。
     ここを --bg-soft のままにするとカードが地に溶けて消える */
  background: #fff;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  position: relative;
  transition: background 0.25s;
}
.home .pa-card:hover { background: var(--cyan-tint); }
.home .pa-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.home .pa-card:hover::before { transform: scaleX(1); }
.home .pa-card .pa-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.home .pa-visual {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--cyan);
  transition: transform 0.4s ease, color 0.25s;
}
.home .pa-card:hover .pa-visual { color: var(--cyan-deep); transform: rotate(8deg); }
.home .pa-visual svg { width: 100%; height: 100%; }
.home .pa-en {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--cyan-deep);
  margin-bottom: 24px;
}
.home .pa-title {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
  color: var(--ink);
}
.home .pa-body {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------
   16-5. SERVICES（HOMEダイジェスト）
   ---------------------------------------------------------- */
/* 背景は .section--brand（シアン）。group-section と同じ理由で padding のみ */
.home .section.services-section { padding: 140px 40px; }
.home .services-inner { max-width: var(--max-width); margin: 0 auto; }
.home .section-head.services-head {
  grid-template-columns: 1fr;
  border-top: none;
  padding-top: 0;
  margin-bottom: 60px;
}
.home .section-head.services-head .section-en { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: 0.04em; }
.home .section-head.services-head .section-jp { margin-top: 24px; }
.home .section-head.services-head .section-lead { max-width: none; margin-top: 32px; }

.home .service-list { display: flex; flex-direction: column; }
.home .service {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 60px;
  padding: 48px 40px;
  background: #fff;
  border-top: 1px solid var(--line);
  align-items: start;
  transition: background 0.3s;
}
.home .service:last-child { border-bottom: 1px solid var(--line); }
.home .service:hover { background: linear-gradient(90deg, var(--cyan-tint) 0%, #fff 100%); }
.home .service-num {
  font-family: var(--font-latin);
  font-size: 22px;
  color: var(--cyan-deep);
  letter-spacing: 0.2em;
}
.home .service-title {
  font-family: var(--font-serif-jp);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.home .service-en {
  font-family: var(--font-latin);
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.2em;
  margin-top: 10px;
  display: block;
}
.home .service-body { font-size: 16px; line-height: 2; color: var(--ink-soft); }
.home .service-body .more {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-latin);
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--cyan-deep);
  border-bottom: 1px solid var(--cyan-deep);
  padding-bottom: 4px;
  transition: gap 0.25s;
}
.home .service:hover .more { gap: 18px; }

/* ----------------------------------------------------------
   16-6. STRENGTHS（濃色）
   ---------------------------------------------------------- */
/* 地は薄シアン。カード(.adv-card)は濃紺のまま残すので、
   セクション見出しと下部リンクだけが明るい地に乗る */
.home .section.strengths-section { padding: 140px 40px; background: var(--bg-soft); }
.home .strengths-inner { max-width: var(--max-width); margin: 0 auto; }
.home .section-head.strengths-head {
  grid-template-columns: 1fr;
  border-top: none;
  padding-top: 0;
  margin-bottom: 60px;
}
.home .section-head.strengths-head .section-en { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: 0.04em; }
.home .section-head.strengths-head .section-jp {
  margin-top: 24px;
  font-family: var(--font-serif-jp);
  letter-spacing: 0.12em;
  font-size: 18px;
  /* 濃色時代は rgba(255,255,255,0.85) だった。明るい地になったので色指定を外し、
     他の明るいセクションと同じ base の var(--muted) を継がせる */
}
.home .section-head.strengths-head .section-lead { max-width: none; margin-top: 32px; }

.home .advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.18);
}
.home .adv-card {
  background: linear-gradient(135deg, #0b2228 0%, #0f3540 100%);
  padding: 56px 40px;
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home .adv-card .adv-num { display: none; }
.home .adv-card h3 {
  font-family: var(--font-serif-jp);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #fff;
}
.home .adv-card .adv-en {
  font-family: var(--font-latin);
  letter-spacing: 0.16em;
  font-size: 16px;
  color: var(--cyan);
  margin-bottom: 20px;
  display: block;
}
.home .adv-card p {
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 1.95;
  margin: 0;
}

/* 事務所の強みページへのリンク（薄シアン地の上）
   濃色時代は白文字＋白50%の枠。明るい地では両方とも消えるため濃紺の
   アウトラインボタンに反転し、hoverで塗りつぶす */
.home .strengths-more,
.home .news-more {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.home .strengths-more a,
.home .news-more a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.home .strengths-more a:hover,
.home .news-more a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.home .strengths-more .arrow,
.home .news-more .arrow { transition: transform 0.25s; }
.home .strengths-more a:hover .arrow,
.home .news-more a:hover .arrow { transform: translateX(6px); }


/* ----------------------------------------------------------
   16-8. FLOW（HOMEダイジェスト・横5列）
   下層の page-flow.php とはクラス名が別系統（.flow / .dot）
   ---------------------------------------------------------- */
.home .flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.home .flow .flow-step { position: relative; padding: 0 16px; border: none; }
.home .flow .flow-step::before,
.home .flow .flow-step::after {
  content: '';
  position: absolute;
  top: 24px;
  height: 1px;
  background: var(--cyan);
  z-index: 0;
}
.home .flow .flow-step::before { left: 0; right: 50%; }
.home .flow .flow-step::after  { left: 50%; right: 0; }
.home .flow .flow-step:first-child::before { display: none; }
.home .flow .flow-step:last-child::after   { display: none; }
.home .flow .dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-latin);
  font-size: 18px;
  color: var(--cyan-deep);
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
.home .flow .step-en {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--cyan-deep);
  margin: 24px 0 8px;
}
.home .flow .flow-step h4 {
  font-family: var(--font-serif-jp);
  font-size: 17px;
  margin: 4px 0 10px;
  letter-spacing: 0.04em;
}
.home .flow .flow-step p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.85;
  margin: 0;
}

/* ----------------------------------------------------------
   16-11. NEWS
   ---------------------------------------------------------- */
/* NEWS はマークアップに固有クラスが無く、素の .section。
   直前の ADVANTAGE が薄シアンになったため、ここを薄シアンにすると
   2セクション連続して境目が消える。白に戻して交互を維持する。
   （body の --bg と同値だが、意図が読めるよう明示しておく） */
.home #news.section { background: var(--bg); }
.home .news-inner { max-width: var(--max-width); margin: 0 auto; } /* ADVANTAGE の .strengths-inner と同じ */
.home .news-list,
.news-page-wrap .news-list { display: flex; flex-direction: column; }
/* 見出し：2026-09-28 に番号「— 07」を外したので、2カラムをやめて
   SERVICES / STRENGTHS と同じ1カラム・左揃えにした */
.home .section-head.news-head {
  grid-template-columns: 1fr;
  border-top: none;
  padding-top: 0;
  margin-bottom: 60px;
}
.home .section-head.news-head .section-en { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: 0.04em; }
.home .section-head.news-head .section-jp { margin-top: 24px; }
.home .section-head.news-head .section-lead { max-width: none; margin-top: 32px; }

/* 1件：1行目に日付・カテゴリ、2行目にタイトル（2026-09-28 指示）。
   以前は 140px 120px 1fr 24px の横1列 */
.home .news-item,
.news-page-wrap .news-item {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: center;
  transition: padding 0.2s, background 0.2s;
}
.home .news-item:last-child,
.news-page-wrap .news-item:last-child { border-bottom: 1px solid var(--line); }
.home .news-item:hover,
.news-page-wrap .news-item:hover { padding-left: 16px; background: var(--cyan-tint); }
.home .news-date,
.news-page-wrap .news-date {
  font-family: var(--font-latin);
  font-size: 16px;
  color: var(--cyan-deep);
  letter-spacing: 0.1em;
}
.home .news-tag,
.news-page-wrap .news-tag {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--cyan-deep);
  border: 1px solid var(--cyan);
  padding: 5px 12px;
  text-align: center;
  width: fit-content;
}
.home .news-meta,
.news-page-wrap .news-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}
.home .news-title,
.news-page-wrap .news-title {
  font-family: var(--font-serif-jp);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* 16-12. CTA は下層ページでも使うため、セクション17（共通コンポーネント）に移動 */

/* ----------------------------------------------------------
   16-13. HOME レスポンシブ
   ---------------------------------------------------------- */
@media (max-width: 980px) {
  .home .hero { padding: 120px 24px 100px; min-height: 80vh; }
  .home .hero-content { width: 90%; max-width: none; margin: 0 auto; }
  .home .hero h1 { font-size: clamp(22px, 6.2vw, 42px); }
  /* 狭い画面では帯を折り返させる。nowrap のままだと画面外にはみ出す */
  .home .hero h1 .line { padding: 3px 12px 6px; white-space: normal; }
  .home .hero h1 .line + .line { margin-top: 10px; }
  .home .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .home .hero-actions .btn { justify-content: center; width: 100%; }

  .home .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .home .section-en { font-size: clamp(40px, 10vw, 64px); }

  .home .section.intro { padding: 80px 24px; }
  .home .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .home .intro-left { position: static; }
  .home .intro-eyebrow { margin-bottom: 16px; }

  .home .section.group-section { padding: 80px 24px; }
  .home .group-firms { grid-template-columns: 1fr; gap: 32px; }
  .home .group-firms::before,
  .home .group-firms::after { display: none; }
  .home .group-firm.is-current { transform: none; }
  .home .group-firm.is-current:hover { transform: translateY(-4px); }
  .home .group-axis { display: none; }
  .home .group-footnote { text-align: center; }

  .home .section.practice-areas { padding: 80px 24px; }
  .home .pa-grid { grid-template-columns: 1fr 1fr; }
  .home .pa-card { min-height: 280px; padding: 36px 24px; }

  .home .section.services-section { padding: 80px 24px; }
  .home .service { grid-template-columns: 1fr; gap: 16px; padding: 36px 1em; }
  .home .service:hover { padding-left: 1em; }

  .home .section.strengths-section { padding: 80px 24px; }
  .home .advantage-grid { grid-template-columns: 1fr; }
  .home .adv-card { min-height: auto; padding: 40px 28px; }


  .home .flow { grid-template-columns: 1fr; gap: 24px; }
  .home .flow .flow-step { padding: 0; text-align: center; }
  .home .flow .flow-step::before,
  .home .flow .flow-step::after { display: none; }

  /* 2段組にしたのでSPでもカテゴリを出せる幅がある。矢印だけ消す */
  .home .news-item,
  .news-page-wrap .news-item { grid-template-columns: 1fr; gap: 0; padding: 18px 0; }
  .home .news-meta,
  .news-page-wrap .news-meta { gap: 14px; margin-bottom: 6px; }
  .home .news-item .arrow,
  .news-page-wrap .news-item .arrow { display: none; }
  .home .news-title,
  .news-page-wrap .news-title { font-size: 16px; line-height: 1.6; }

  .home .hero-actions .btn { padding: 14px 22px; font-size: 16px; }
}

/* ----------------------------------------------------------
   SP（768px以下）のヒーロー
   2026-08-12 指示：天地100% / 1秒後にスクロールアイコン / テキストやや下目
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .home .hero {
    /* 端末の天地いっぱい。dvh 未対応ブラウザ向けに vh を先に置く
       （後の行を読めないブラウザは前の行を使う）。
       dvh はアドレスバーの出入りに追従するので、読み込み時に
       「実際に見えている高さ」とぴったり一致する。
       980px以下の min-height:80vh をここで上書きしている。 */
    min-height: 100vh;
    min-height: 100dvh;

    /* 中央揃え（親の justify-content:center）は保ったまま、
       上下paddingの差でテキスト群を下へずらす。
         ずれ量 =（上 30vw − 下 18vw）÷ 2 = 6vw
         375px幅 → 約22px下 / 390px幅 → 約23px下
       vw指定なので画面幅に比例して追従する。
       もっと下げたいときは padding-bottom を減らす（上げるなら増やす）。
       ずらす手段に padding を使っているのは、margin や transform だと
       内容が増えたときにヒーローが画面より高くなり、
       下端のスクロールアイコンが画面外に落ちるため。 */
    padding: 30vw 6vw 18vw;
  }

  /* スクロール誘導はSPだけ出す */
  .home .hero-scroll { display: flex; }
}

/* 360px以下の端末では、上のpaddingのままだと
   コピー＋社名＋ボタンの合計が画面の高さを超え、
   ヒーローが1画面に収まらずスクロールアイコンが画面外に落ちる。
   320x568 で内容が約345pxあり、dvhが約460pxしかないため。
   ずれ量は 3vw（320px幅で約10px）に減るが、1画面に収めることを優先する。 */
@media (max-width: 360px) {
  .home .hero { padding: 18vw 6vw 12vw; }

  /* 360px以下では 0.12em でもまだ肩書が1行に収まらない。
     キャプションの左右余白を詰め、字間をさらに落として1行を確保する。
     320px幅で使える幅が約242pxに対し必要幅が約229px（概算）。 */
  .about-page-wrap .rep-caption { padding: 16px 14px; }
  .about-page-wrap .rep-caption .role { letter-spacing: 0.03em; }
}

@media (max-width: 600px) {
  .home .pa-grid { grid-template-columns: 1fr; }
  .home .pa-card { min-height: auto; }
}

/* ==========================================================
   17. CTA（共通コンポーネント）
   HOMEと下層ページで共用するため、ページスコープを付けていない。
   .cta は front-page.php / page-advantage.php から使用。
   ========================================================== */
.cta {
  padding: 140px 40px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 10px, rgba(255,255,255,0) 10px 20px);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.cta-eyebrow {
  font-family: var(--font-latin);
  letter-spacing: 0.4em;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
}

.cta h2 {
  font-family: var(--font-serif-jp);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  margin: 0 0 24px;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.cta p {
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 2;
  font-size: 16px;
}

.cta-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 矢印アイコンを入れるため inline-flex 化 */
.cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cta .btn .arrow { transition: transform 0.25s; }
.cta .btn:hover .arrow { transform: translateX(6px); }

.cta .btn--primary { background: #fff; color: var(--cyan-deep); border-color: #fff; }
.cta .btn--primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.cta .btn--ghost:hover { background: #fff; color: var(--cyan-deep); }

@media (max-width: 980px) {
  .cta { padding: 80px 24px; }
  .cta h2 { font-size: clamp(28px, 6vw, 40px); }
  .cta .btn { padding: 14px 22px; font-size: 16px; }
}

/* ==========================================================
   18. 下層ページ共通：濃色ページヒーロー
   .page-hero に .page-hero--dark を足すと濃色ヒーローになる。
   （素の .page-hero はセクション8の淡色版。現在どのページも使っていない）
   services / advantage / flow / about / contact の5ページすべてが使用。
   クラスは各テンプレートが vsg_page_hero_atts() 経由で出力する。
   ========================================================== */
.page-hero--dark {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 140px 40px 80px;
  color: #fff;
  overflow: hidden;
  text-align: center;
  border-bottom: none;
}

.page-hero--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(45,190,205,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(29,154,168,0.55) 0%, transparent 55%),
    linear-gradient(135deg, #0b2228 0%, #103842 50%, #0b2228 100%);
}

.page-hero--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, rgba(255,255,255,0) 14px 28px);
}

.page-hero--dark > * { position: relative; z-index: 1; }

.page-hero--dark .eyebrow {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.5em;
  color: var(--cyan);
  margin-bottom: 24px;
}

.page-hero--dark h1 {
  font-family: var(--font-latin);
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 20px;
  color: #fff;
}

.page-hero--dark .jp-title {
  font-family: var(--font-serif-jp);
  font-size: 18px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 980px) {
  .page-hero--dark { padding: 120px 24px 60px; min-height: 40vh; }
}

/* ----------------------------------------------------------
   背景写真つきの濃色ヒーロー（2026-08-13）

   .page-hero--photo は PHP 側（vsg_page_hero_atts）が
   assets/page-hero-<slug>.webp を見つけたときだけ付ける。
   画像が無ければクラスも style も付かないので、上のグラデーションのまま。

   写真は 1920×900（2.13:1）で、元画像に
   brightness -0.18 / contrast +1.20 / saturation 0.55 を焼き込んである。
   均一な半透明を重ねるだけでは明るい室内写真が濁るため、
   写真側で調子を作ってから暗幕を薄くする方が締まる（実物を見て決定）。
   ---------------------------------------------------------- */
.page-hero--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 2026-08-13 指示により暗幕を一旦外している（写真の素の見え方を確認するため）。
   content: none にしているのは、単にこの宣言を消すと下敷きの
   .page-hero--dark::before のグラデーションが復活して写真が完全に隠れるため。

   戻すときは下の1行に差し替える（暗幕62%）:
     .page-hero--photo::before { background: rgba(11,34,40,0.62); }
   0.62 は実測値。合成後の最も明るい画素から計算した白文字のコントラスト比が
   5.04〜5.68:1 で、5ページすべて AA(4.5:1) を満たす
   （services 5.35 / advantage 5.04 / flow 5.19 / about 5.51 / contact 5.68）。 */
.page-hero--photo::before { content: none; }

/* 斜めストライプは写真の上ではノイズになるので出さない */
.page-hero--photo::after { content: none; }

/* 写真の上の文字に黒い影を敷いて可読性を稼ぐ（2026-08-13）。

   ⚠️ text-shadow は WCAG のコントラスト比の計算には算入されない。
   測定値は暗幕なしのまま（白文字の最悪値 1.00:1）で、これは
   数値上の達成ではなく体感的な見やすさを稼ぐための処置。
   数値でAAを満たしたい場合は、文字の裏だけ沈めるスクリムを入れる
   （上の ::before のコメント参照）。

   影を2枚重ねているのは、近い影で輪郭を立て、遠い影で
   文字の周囲をぼんやり暗くして地と分離させるため。1枚だと
   輪郭は出ても背景が明るいままで沈まない。

   h1 は 48〜110px と線が太いので、ぼかしを大きめに取れる。
   eyebrow / jp-title は 16〜18px かつ字間が広く線が細いので、
   ぼかしを小さくして濃度を上げないと輪郭が溶ける。 */
.page-hero--photo h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 28px rgba(0,0,0,0.45);
}
.page-hero--photo .eyebrow,
.page-hero--photo .jp-title {
  text-shadow: 0 1px 3px rgba(0,0,0,0.70), 0 2px 10px rgba(0,0,0,0.55);
}

/* eyebrow（ABOUT US 等の16pxラベル）は写真の上では白にする。
   シアン #2dbecd はグラデーション上では 5.62:1 あるが、
   写真の上（暗幕0.62）では 2.3〜2.5:1 まで落ちて AA を満たせない。
   シアンを AA に乗せるには暗幕85%以上が必要で、そこまで暗くすると
   写真がほぼ見えなくなる。白なら 5.0:1 以上を確保できる（指示により白を選択）。 */
.page-hero--photo .eyebrow { color: #fff; }

/* ==========================================================
   19. ADVANTAGE ページ（page-advantage.php 専用）
   テンプレート全体を .advantage-page で包んでスコープしている。
   ========================================================== */

/* --- 本文エリア --- */
.advantage-page .adv-page { padding: 120px 40px; background: #fff; }
.advantage-page .adv-inner { max-width: var(--max-width); margin: 0 auto; }
.advantage-page .adv-lead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 100px;
  font-family: var(--font-serif-jp);
  font-size: 18px;
  line-height: 2;
  color: var(--ink);
}

/* --- 強みセクションの見出しと図版 --- */
.advantage-page .adv-section-head { text-align: center; margin-bottom: 60px; }
.advantage-page .adv-section-head .en {
  font-family: var(--font-latin);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
}
.advantage-page .adv-section-head .jp {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--muted);
  margin-top: 18px;
}

.advantage-page .adv-diagram { max-width: 640px; margin: 0 auto 100px; }
.advantage-page .adv-diagram svg,
.advantage-page .adv-diagram img { width: 100%; height: auto; display: block; }

/* --- 強み一覧（左右交互レイアウト） --- */
.advantage-page .strengths-list { display: flex; flex-direction: column; gap: 100px; }

.advantage-page .strength {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.advantage-page .strength.reverse .strength-media { order: -1; }
.advantage-page .strength-media img { width: 100%; height: auto; display: block; border-radius: 2px; }

.advantage-page .strength .num {
  font-family: var(--font-latin);
  font-size: 28px;
  letter-spacing: 0.14em;
  color: var(--cyan-deep);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.advantage-page .strength .num::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--cyan-deep);
}

.advantage-page .strength h4 {
  font-family: var(--font-serif-jp);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 18px;
}

.advantage-page .strength-sub {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan-deep);
  margin: -6px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}

.advantage-page .strength p {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0;
}

/* 画像なしの項目は中央寄せ1カラム */
.advantage-page .strength.no-media {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.advantage-page .strength.no-media .num { justify-content: center; }

/* 写真ではなくロゴを置く項目 */
.advantage-page .strength-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.advantage-page .strength-logo img { max-width: 340px; width: 100%; }

@media (max-width: 980px) {
  .advantage-page .adv-page { padding: 80px 24px; }
  .advantage-page .adv-lead { margin-bottom: 60px; font-size: 16px; }
  .advantage-page .adv-diagram { margin-bottom: 60px; }
  .advantage-page .strengths-list { gap: 64px; }
  .advantage-page .strength { grid-template-columns: 1fr; gap: 28px; }
  .advantage-page .strength.reverse .strength-media { order: 0; }
  .advantage-page .strength-media { order: -1; }
  .advantage-page .strength .num { font-size: 22px; }
}

/* ==========================================================
   20. ABOUT ページ（page-about.php 専用）
   テンプレート全体を .about-page-wrap で包んでスコープしている。
   .profile-row / .access-map などはHOMEにも同名クラスがあるため、
   スコープを外すとHOMEの事務所概要・アクセスに干渉する。
   ========================================================== */

/* ABOUTのH1だけ一段大きい */
.about-page-wrap .page-hero--dark h1 { font-size: clamp(56px, 8vw, 120px); }

.about-page-wrap .about-page { padding: 120px 40px; background: #fff; }
.about-page-wrap .about-inner { max-width: 1100px; margin: 0 auto; }
.about-page-wrap .about-lead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
  font-family: var(--font-serif-jp);
  font-size: 18px;
  line-height: 2;
  color: var(--ink);
}

/* --- ページ内アンカーナビ --- */
.about-page-wrap .anchor-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 110px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.about-page-wrap .anchor-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 48px;
  position: relative;
  transition: background 0.25s, color 0.25s;
}
.about-page-wrap .anchor-nav a + a { border-left: 1px solid var(--line); }
.about-page-wrap .anchor-nav a:hover { background: var(--cyan-tint); }
.about-page-wrap .anchor-nav .en {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--cyan-deep);
}
.about-page-wrap .anchor-nav .jp {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.about-page-wrap .anchor-nav .mark {
  font-family: var(--font-latin);
  font-size: 16px;
  color: var(--cyan);
  line-height: 1;
}

/* --- セクション見出し --- */
.about-page-wrap .about-head { text-align: center; margin-bottom: 56px; }
.about-page-wrap .about-head .en {
  font-family: var(--font-latin);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
}
.about-page-wrap .about-head .jp {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--muted);
  margin-top: 16px;
}

/* --- 代表挨拶 --- */
.about-page-wrap .rep-block { margin-bottom: 120px; }
.about-page-wrap .rep-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
/* 2人目（役員挨拶）は写真を逆サイドに出す。
   カラム比を 7fr 5fr にして本文を左・写真を右へ。
   DOMは写真→本文のままなので order で入れ替える
   （grid-column での直接指定だと、SPで 1fr になったときに
    存在しない2列目を指すことになるため避けた）。 */
.about-page-wrap .rep-grid--reverse { grid-template-columns: 7fr 5fr; }
.about-page-wrap .rep-grid--reverse .rep-photo { order: 2; }
.about-page-wrap .rep-grid--reverse .rep-body  { order: 1; }
/* 2ブロック目は上に間隔を空ける（1ブロック目とくっつかないように） */
.about-page-wrap .rep-grid--reverse { margin-top: 96px; }

.about-page-wrap .rep-photo { position: relative; }
.about-page-wrap .rep-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-strong);
}
.about-page-wrap .rep-caption {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-top: none;
  padding: 18px 22px;
}
.about-page-wrap .rep-caption .role {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--cyan-deep);
  margin-bottom: 6px;
}
.about-page-wrap .rep-caption .name {
  font-family: var(--font-serif-jp);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.about-page-wrap .rep-caption .lic {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-top: 5px;
}
.about-page-wrap .rep-body p {
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.about-page-wrap .rep-body p:last-child { margin-bottom: 0; }
.about-page-wrap .rep-sign {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.about-page-wrap .rep-sign .line { flex: 1; height: 1px; background: var(--line-strong); }
.about-page-wrap .rep-sign .who {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.about-page-wrap .rep-sign .who span { color: var(--cyan-deep); margin-left: 10px; }

/* --- 事務所概要（定義リスト） --- */
.about-page-wrap .profile-block,

.about-page-wrap .profile-list { margin: 0; }
.about-page-wrap .profile-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 24px 4px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.about-page-wrap .profile-row:last-child { border-bottom: 1px solid var(--line); }
.about-page-wrap .profile-row dt {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--cyan-deep);
  margin: 0;
}
.about-page-wrap .profile-row dd {
  margin: 0;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
}
/* 表の中のリンク（グループ名）。基本の a は下線なしなので、
   本文と色が違うだけではリンクだと気づきにくい。下線で明示する。 */
.about-page-wrap .profile-row dd a {
  color: var(--cyan-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-page-wrap .profile-row dd a:hover {
  color: var(--ink);
}

/* --- アクセス --- */
.about-page-wrap .access-block { margin-top: 110px; }
.about-page-wrap .access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.about-page-wrap .access-info dl { margin: 0; }
.about-page-wrap .access-firm {
  font-family: var(--font-serif-jp);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 24px;
}
.about-page-wrap .access-row { padding: 20px 0; border-top: 1px solid var(--line); }
.about-page-wrap .access-row:last-child { border-bottom: 1px solid var(--line); }
.about-page-wrap .access-row dt {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--cyan-deep);
  margin-bottom: 8px;
}
.about-page-wrap .access-row dd {
  margin: 0;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* Googleマップ埋め込み。
   iframeは width/height 属性を持たせず、4:3の枠に絶対配置で敷き込む。
   （枠にしないと、レスポンシブ時に高さが固定されて間延びする） */
.about-page-wrap .access-map {
  aspect-ratio: 4 / 3;
  position: relative;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--cyan-tint);
}
.about-page-wrap .access-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 「大きな地図で見る」は地図の下に配置。
   地図の上に重ねると、その位置でマップの操作を奪ってしまう */
.about-page-wrap .map-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--cyan-deep);
  background: #fff;
  padding: 9px 16px;
  border: 1px solid var(--cyan);
  transition: background 0.2s, color 0.2s;
}
.about-page-wrap .map-link:hover { background: var(--cyan); color: #fff; }
.about-page-wrap .map-link .arrow { transition: transform 0.25s; }
.about-page-wrap .map-link:hover .arrow { transform: translateX(4px); }

@media (max-width: 980px) {
  .about-page-wrap .about-page { padding: 80px 24px; }
  .about-page-wrap .about-lead { margin-bottom: 40px; font-size: 16px; }
  .about-page-wrap .anchor-nav { margin-bottom: 64px; }
  .about-page-wrap .anchor-nav a { padding: 18px 20px; flex: 1; }
  .about-page-wrap .anchor-nav .en { font-size: 16px; letter-spacing: 0.2em; }
  .about-page-wrap .anchor-nav .jp { font-size: 16px; }
  .about-page-wrap .rep-block { margin-bottom: 80px; }
  .about-page-wrap .rep-grid { grid-template-columns: 1fr; gap: 32px; }
  /* 縦積みでは order を戻して「写真→本文」に統一する。
     戻さないと2人目だけ本文が先に来て、1人目と順番が食い違う。
     カラム比の 7fr 5fr も 1fr に上書きされる（上の行が後勝ち）。 */
  .about-page-wrap .rep-grid--reverse .rep-photo,
  .about-page-wrap .rep-grid--reverse .rep-body { order: 0; }
  .about-page-wrap .rep-grid--reverse { margin-top: 64px; }
  /* 「REPRESENTATIVE PARTNER」は 16px・字間0.28em だと約302px必要で、
     375px端末の枠内（約281px）に収まらず PARTNER が次行に落ちていた。
     結果 REPRESENTATIVE / PARTNER / 須賀 智仁 の3行になっていたので、
     字間を詰めて肩書1行＋名前1行にする。
     16px化の方針があるので font-size は下げない。
     nowrap は使わない（字幅の見積りが外れたとき枠から溢れるより、
     折り返す方が事故が小さいため）。 */
  .about-page-wrap .rep-caption .role { letter-spacing: 0.12em; }

  .about-page-wrap .profile-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 4px; }
  .about-page-wrap .profile-row dt { font-size: 16px; }
  .about-page-wrap .access-block { margin-top: 72px; }
  .about-page-wrap .access-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* 署名（須賀・三ツ本の両方）の改行位置を法人名と肩書の間に固定する。
   `.who` は「法人名」と「肩書＋名前」を1要素に入れているため、幅が足りないと
   「代表パートナー　須／賀 智仁」のように語の途中で折り返していた
   （CJKはどこでも改行できるので、放っておくと位置を選べない）。
   span をブロックにすると `.who` の max-content が約476px→約233pxになり、
   375px端末でも各行が1行に収まる（余った幅は .line が伸びて埋める）。

   980pxのブロックに入れないのは、タブレット幅では1行に収まる余裕があり、
   そこで2行にするのは過剰なため。実際に折り返し始めるのは概ね520px以下。
   nowrap は使わない（枠から溢れるより折り返す方が事故が小さい・上の .role と同じ判断）。 */
@media (max-width: 520px) {
  .about-page-wrap .rep-sign .who span { display: block; margin-left: 0; margin-top: 4px; }
}

/* ==========================================================
   21. CONTACT ページ（page-contact.php 専用）
   テンプレート全体を .contact-page-wrap で包んでスコープしている。
   ========================================================== */
.contact-page-wrap .contact-page { padding: 120px 40px; background: #fff; }
.contact-page-wrap .contact-inner { max-width: 820px; margin: 0 auto; }
.contact-page-wrap .contact-lead {
  text-align: center;
  margin-bottom: 60px;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
}

.contact-page-wrap form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-page-wrap .field { display: flex; flex-direction: column; gap: 10px; }

.contact-page-wrap .field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}

/* 必須／任意バッジ */
.contact-page-wrap .badge {
  display: inline-block;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 2px;
}
.contact-page-wrap .badge.required { background: var(--cyan); color: #fff; }
.contact-page-wrap .badge.optional {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
}

.contact-page-wrap .field input[type="text"],
.contact-page-wrap .field input[type="email"],
.contact-page-wrap .field input[type="tel"],
.contact-page-wrap .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-page-wrap .field input:focus,
.contact-page-wrap .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(45,190,205,0.18);
}
.contact-page-wrap .field textarea { min-height: 180px; resize: vertical; line-height: 1.8; }

/* 郵便番号行（〒マーク＋短い入力欄） */
.contact-page-wrap .zip-row { display: flex; align-items: center; gap: 10px; }
.contact-page-wrap .zip-mark {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.contact-page-wrap .zip-row input { max-width: 180px; }
.contact-page-wrap .field-note {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* お問い合わせの種類（チェックボックス2列） */
.contact-page-wrap .checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  padding: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.contact-page-wrap .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
}
.contact-page-wrap .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
  flex-shrink: 0;
}

/* 送信ボタン */
.contact-page-wrap .submit-row { margin-top: 24px; display: flex; justify-content: center; }
.contact-page-wrap .submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 48px;
  background: var(--cyan);
  color: #fff;
  border: 1px solid var(--cyan);
  font-family: var(--font-sans-jp);
  font-size: 16px;
  letter-spacing: 0.3em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.contact-page-wrap .submit-btn:hover { background: var(--cyan-deep); border-color: var(--cyan-deep); }
.contact-page-wrap .submit-btn .arrow { transition: transform 0.25s; }
.contact-page-wrap .submit-btn:hover .arrow { transform: translateX(6px); }

/* スパム対策のハニーポット。
   display:none だとボットに無視されるため、視覚的にのみ隠す。
   人間には見えず、ボットだけが入力してしまう欄。 */
.contact-page-wrap .honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* 送信結果のメッセージ（現状はプレースホルダー用） */
.contact-page-wrap .form-notice {
  display: none;
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--cyan-tint);
  border: 1px solid var(--cyan);
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  text-align: center;
}
.contact-page-wrap .form-notice.is-visible { display: block; }

@media (max-width: 980px) {
  .contact-page-wrap .contact-page { padding: 80px 24px; }
  .contact-page-wrap .checkbox-group { grid-template-columns: 1fr; padding: 20px; }
  .contact-page-wrap .submit-btn { padding: 18px 32px; letter-spacing: 0.2em; }
}

/* ----------------------------------------------------------
   21-2. Contact Form 7 との噛み合わせ（2026-08-13）

   フォームをCF7に移行した。CF7は入力欄を
   <span class="wpcf7-form-control-wrap"> で包み、チェックボックスは
   さらに <span class="wpcf7-checkbox"><span class="wpcf7-list-item"> と
   入れ子にするため、上のレイアウトがそのままでは崩れる。
   ここはその差分を埋めるための追記で、上の section 21 は触っていない
   （＝自前フォームに戻す場合はこのブロックを消すだけでよい）。
   ---------------------------------------------------------- */

/* 入力欄を包む span。既定は inline なので幅指定が効かない。
   block にすることで、上の width:100% がそのまま効く。 */
.contact-page-wrap .wpcf7-form-control-wrap { display: block; }

/* CF7が form を <div class="wpcf7"> で包むが、flexの起点は
   form.contact-form のままなので、この div は素通しにしておく。 */
.contact-page-wrap .wpcf7 { display: block; }

/* 郵便番号行。flexの子が input から包みspanに変わるので、
   幅の制限を span 側にも掛ける（上の .zip-row input の max-width だけでは
   span が伸びて〒マークとの間隔が崩れる）。 */
.contact-page-wrap .zip-row .wpcf7-form-control-wrap { width: 180px; max-width: 180px; }
.contact-page-wrap .zip-row input { max-width: 100%; }

/* お問い合わせの種類。
   2列グリッドは .checkbox-group に掛けていたが、CF7では子が
   包みspan 1つになってしまい2列にならない。グリッドを
   .wpcf7-checkbox 側へ移す。 */
.contact-page-wrap .checkbox-group { display: block; }
.contact-page-wrap .checkbox-group .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
/* CF7の既定 margin: 0 0 0 1em を打ち消す（左に余白が付いて列がずれる） */
.contact-page-wrap .checkbox-group .wpcf7-list-item { margin: 0; }
.contact-page-wrap .checkbox-group .wpcf7-list-item-label { line-height: 1.5; }

/* 送信ボタン。
   CF7の [submit] は <input type="submit"> なので中に要素を置けず、
   元の矢印SVGが入らない。背景画像として描く（::after は input に効かない）。
   hoverの矢印移動は background-position のずらしで再現している。 */
.contact-page-wrap input.submit-btn {
  display: inline-block;
  padding: 20px 74px 20px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 5H15M15 5L11 1M15 5L11 9' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 48px center;
  transition: background 0.25s, border-color 0.25s, background-position 0.25s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.contact-page-wrap input.submit-btn:hover { background-position: right 42px center; }

/* 送信中のスピナー。既定だと絶対配置で位置が崩れるので、ボタンの右に置く。 */
.contact-page-wrap .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; }

/* 送信結果のメッセージ。自前実装の .form-notice と同じ見た目に揃える。
   CF7の既定（margin 2em 0.5em / 2px の枠）を上書きする。 */
.contact-page-wrap form.contact-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--cyan);
  background: var(--cyan-tint);
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  text-align: center;
}
/* 失敗・入力不備のときは赤系にする（成功と同じ色だと気づけない） */
.contact-page-wrap form.contact-form.invalid .wpcf7-response-output,
.contact-page-wrap form.contact-form.failed .wpcf7-response-output,
.contact-page-wrap form.contact-form.aborted .wpcf7-response-output {
  border-color: #c0392b;
  background: #fdf3f2;
  color: #a5281a;
}

/* 各項目のエラー文。入力欄の直下に出る */
.contact-page-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.7;
  color: #c0392b;
}
.contact-page-wrap .wpcf7-not-valid { border-color: #c0392b; }

/* 個人情報保護方針への同意 */
.contact-page-wrap .form-consent {
  margin: 0;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
  text-align: center;
}
.contact-page-wrap .form-consent a { text-decoration: underline; }
.contact-page-wrap .form-consent .wpcf7-form-control-wrap { display: inline-block; margin-top: 8px; }
.contact-page-wrap .form-consent .wpcf7-list-item { margin: 0; }
.contact-page-wrap .form-consent label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.contact-page-wrap .form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
}

@media (max-width: 980px) {
  /* SPでは種類のチェックボックスを1列にする（2列だと項目名が折り返す） */
  .contact-page-wrap .checkbox-group .wpcf7-checkbox { grid-template-columns: 1fr; }
  .contact-page-wrap input.submit-btn { padding: 18px 62px 18px 36px; background-position: right 36px center; }
  .contact-page-wrap input.submit-btn:hover { background-position: right 30px center; }
}

/* ==========================================================
   22. SERVICES ページ（page-services.php 専用）
   テンプレート全体を .services-page-wrap で包んでスコープしている。
   構成: 冒頭のアンカーカード（各サービスへジャンプ）→ サービスごとの
         詳細ブロック（見出し／本文＋写真／具体的サービス内容の箇条書き）
   HOMEのSERVICESダイジェスト（16-5・.service）とは別系統。
   ========================================================== */
.services-page-wrap .services-page { padding: 100px 40px 120px; background: #fff; }
.services-page-wrap .services-page-inner { max-width: 1180px; margin: 0 auto; }

.services-page-wrap .services-intro { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.services-page-wrap .services-intro p {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0;
}

/* --- 冒頭のアンカーカード（ページ内ジャンプ） --- */
.services-page-wrap .svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 120px;
}
.services-page-wrap .svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px 20px 24px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #fff;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}
.services-page-wrap .svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(45,190,205,0.32);
  filter: brightness(1.06);
}
.services-page-wrap .svc-card-icon { width: 56px; height: 50px; color: #fff; }
.services-page-wrap .svc-card-icon svg { width: 100%; height: 100%; }
.services-page-wrap .svc-card-title {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.services-page-wrap .svc-card-arrow { font-size: 16px; opacity: 0.8; line-height: 1; }

/* カードのタイトルをSPで意図した位置で改行させる <br>（2026-08-13）。
   出力するのは page-services.php の $svc_card_breaks に載せたサービスだけ
   （税務顧問・税務申告 / 外資系企業向け経理サービス）。

   カードは980px以下でも2カラムのままなので、375px端末ではタイトルの表示幅が
   約133pxしかない。16px＋字間0.06emだと1行約7.8文字で、
   「税務顧問・税務申／告」「外資系企業向け経／理サービス」のように語の途中で割れていた。
   指定位置（5+4字 / 7+6字）はこの幅に収まる。

   521px以上では1行に収まるので改行しない。<br> は display:none で無効化できる。 */
.sp-br { display: none; }
@media (max-width: 520px) {
  .sp-br { display: inline; }
}

/* --- サービスごとの詳細ブロック --- */
.services-page-wrap .svc-block { margin-bottom: 110px; }
.services-page-wrap .svc-block:last-of-type { margin-bottom: 0; }

.services-page-wrap .svc-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-serif-jp);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  padding-left: 18px;
  border-left: 5px solid var(--cyan);
  line-height: 1.4;
}
.services-page-wrap .svc-heading-num {
  font-family: var(--font-latin);
  font-size: 0.7em;
  color: var(--cyan-deep);
  letter-spacing: 0.14em;
}
.services-page-wrap .svc-en-label {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin: 14px 0 0 23px;
}

.services-page-wrap .svc-body-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 52px;
  align-items: start;
  margin-top: 36px;
}
.services-page-wrap .svc-text p {
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-soft);
  margin: 0;
}
.services-page-wrap .svc-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

/* 写真が無いサービスは本文を1カラムで表示 */
.services-page-wrap .svc-body-grid.no-photo { grid-template-columns: 1fr; }

/* --- 具体的サービス内容（チェックマーク付き箇条書き） --- */
.services-page-wrap .svc-detail {
  margin-top: 40px;
  padding: 34px 40px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.services-page-wrap .svc-detail h3 {
  font-family: var(--font-serif-jp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.services-page-wrap .svc-detail ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.services-page-wrap .svc-detail li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}
/* 疑似要素をL字に回転させてチェックマークにしている */
.services-page-wrap .svc-detail li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

.services-page-wrap .svc-note {
  margin-top: 80px;
  padding: 28px 36px;
  background: var(--cyan-tint);
  border-left: 3px solid var(--cyan);
  font-size: 16px;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 980px) {
  .services-page-wrap .services-page { padding: 64px 24px 80px; }
  .services-page-wrap .services-intro { margin-bottom: 44px; }
  .services-page-wrap .svc-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 72px; }
  .services-page-wrap .svc-card { padding: 24px 12px 18px; gap: 10px; }
  .services-page-wrap .svc-card-icon { width: 42px; height: 38px; }
  .services-page-wrap .svc-card-title { font-size: 16px; }
  .services-page-wrap .svc-block { margin-bottom: 72px; }
  .services-page-wrap .svc-heading { font-size: 21px; padding-left: 14px; border-left-width: 4px; gap: 12px; }
  .services-page-wrap .svc-en-label { margin-left: 18px; font-size: 16px; }
  .services-page-wrap .svc-body-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
  .services-page-wrap .svc-detail { padding: 26px 22px; margin-top: 28px; }
  .services-page-wrap .svc-detail li { font-size: 16px; }
  .services-page-wrap .svc-note { padding: 22px; font-size: 16px; margin-top: 56px; }
}
@media (max-width: 520px) {
  .services-page-wrap .svc-cards { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   23. FLOW ページ（page-flow.php 専用）
   テンプレート全体を .flow-page-wrap で包んでスコープしている。
   HOMEのFLOWダイジェスト（16-8・横5列の .flow）とは別レイアウトで、
   こちらは縦積みの .step-row。
   ========================================================== */
.flow-page-wrap .flow-page { padding: 120px 40px; background: #fff; }
.flow-page-wrap .flow-inner { max-width: 1100px; margin: 0 auto; }
.flow-page-wrap .flow-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
  font-family: var(--font-serif-jp);
  font-size: 18px;
  line-height: 2;
  color: var(--ink);
}

.flow-page-wrap .steps-list {
  display: flex;
  flex-direction: column;
  position: relative;
}
.flow-page-wrap .step-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  position: relative;
}
.flow-page-wrap .step-row:last-child { border-bottom: 1px solid var(--line); }

.flow-page-wrap .step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
}
.flow-page-wrap .step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-latin);
  font-size: 24px;
  color: var(--cyan-deep);
  font-weight: 500;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.flow-page-wrap .step-en {
  font-family: var(--font-latin);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--cyan-deep);
}

.flow-page-wrap .step-content h3 {
  font-family: var(--font-serif-jp);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 12px;
}
.flow-page-wrap .step-content p {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0;
}

/* 「どんなお悩みでも」ブロック */
.flow-page-wrap .concerns {
  margin-top: 100px;
  padding: 48px 40px;
  background: var(--bg-soft);
  border-left: 3px solid var(--cyan);
}
.flow-page-wrap .concerns h3 {
  font-family: var(--font-serif-jp);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 28px;
  letter-spacing: 0.04em;
}
.flow-page-wrap .concerns ul { list-style: none; padding: 0; margin: 0 0 24px; }
.flow-page-wrap .concerns li {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
  padding: 10px 0 10px 24px;
  border-top: 1px dashed var(--line-strong);
  position: relative;
}
.flow-page-wrap .concerns li:first-child { border-top: none; }
.flow-page-wrap .concerns li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 1px;
  background: var(--cyan-deep);
}
.flow-page-wrap .concerns .note {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 980px) {
  .flow-page-wrap .flow-page { padding: 80px 24px; }
  .flow-page-wrap .flow-lead { margin-bottom: 48px; font-size: 16px; }
  .flow-page-wrap .step-row { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
  .flow-page-wrap .step-marker { flex-direction: row; justify-content: flex-start; gap: 18px; }
  .flow-page-wrap .step-circle { width: 64px; height: 64px; font-size: 20px; }
  .flow-page-wrap .step-content h3 { font-size: 20px; }
  .flow-page-wrap .concerns { padding: 32px 24px; margin-top: 64px; }
}

/* ==========================================================
   26. PRIVACY ページ（page-privacy.php 専用）
   テンプレート全体を .privacy-page-wrap で包んでスコープしている。
   本文中心のページなので、既存ページより行間を広く取っている。
   ========================================================== */
.privacy-page-wrap .privacy-page { padding: 100px 40px 120px; background: #fff; }
.privacy-page-wrap .privacy-inner { max-width: 860px; margin: 0 auto; }

.privacy-page-wrap .privacy-lead {
  font-size: 17px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0 0 56px;
}

/* 条項。ol の連番をそのまま「第N条」の代わりに使う（marker で番号を出す）。
   list-style を消して自前のカウンタにしないのは、番号付きリストとしての
   意味をアクセシビリティツリーに残したいため。 */
.privacy-page-wrap .privacy-list {
  list-style: none;
  counter-reset: privacy;
  margin: 0;
  padding: 0;
}
.privacy-page-wrap .privacy-item {
  counter-increment: privacy;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.privacy-page-wrap .privacy-item:last-child { border-bottom: 1px solid var(--line); }

.privacy-page-wrap .privacy-item-title {
  font-family: var(--font-serif-jp);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  display: flex;
  gap: 14px;
}
/* 番号はシアンで、見出しの左に置く */
.privacy-page-wrap .privacy-item-title::before {
  content: counter(privacy);
  font-family: var(--font-latin);
  font-size: 18px;
  color: var(--cyan-deep);
  flex: 0 0 auto;
  line-height: 1.6;
}

.privacy-page-wrap .privacy-item-body {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0;
}

/* 窓口 */
.privacy-page-wrap .privacy-contact {
  margin-top: 56px;
  padding: 36px 32px;
  background: var(--cyan-tint);
}
.privacy-page-wrap .privacy-contact-name {
  font-family: var(--font-serif-jp);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.privacy-page-wrap .privacy-contact dl { margin: 0; }
.privacy-page-wrap .privacy-contact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 10px 0;
}
.privacy-page-wrap .privacy-contact-row dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.privacy-page-wrap .privacy-contact-row dd {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
}
.privacy-page-wrap .privacy-contact-row dd a { text-decoration: underline; }

@media (max-width: 980px) {
  .privacy-page-wrap .privacy-page { padding: 80px 24px 96px; }
  .privacy-page-wrap .privacy-lead { font-size: 16px; margin-bottom: 40px; }
  .privacy-page-wrap .privacy-item { padding: 26px 0; }
  .privacy-page-wrap .privacy-item-title { font-size: 18px; gap: 10px; }
  .privacy-page-wrap .privacy-contact { padding: 28px 22px; margin-top: 40px; }
  /* 窓口の2カラムは375pxだと項目名130pxが重いので縦積みにする */
  .privacy-page-wrap .privacy-contact-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================
   27. 言語切替 ＋ 英語版（/en/）— 2026-09-09
   ========================================================== */

/* ----------------------------------------------------------
   27-1. 言語切替リンク（日英どちらのページにも出る）

   ヘッダーは16px化でナビの実幅が約726pxまで膨らんでおり、
   1025〜1200px帯ではロゴ（高さ28px＝幅約292px）と合わせて
   ヘッダーが窮屈になる。そこで
     ・表示は2文字（EN）に留める（何のリンクかは aria-label で補う）
     ・1025〜1120px ではロゴをもう一段（24px＝幅約250px）縮める
   の2点で場所を作っている。1121px以上と1024px以下は従来のまま。
   ---------------------------------------------------------- */
.site-header .lang-switch {
  margin-left: 18px;
  padding: 5px 9px;
  font-family: var(--font-latin);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.site-header .lang-switch:hover {
  background: #fff;
  color: var(--cyan-deep);
  opacity: 1;   /* .site-header nav a:hover の 0.75 を打ち消す */
}

/* 英語ページでは中身が「日本語」なので和文フォントに戻し、一段小さくする */
body.lang-en .site-header .lang-switch {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* フルナビが出ている帯（1025〜1120px）だけロゴを縮めて切替の場所を作る。
   1024px以下はハンバーガーに切り替わるので対象外。 */
@media (max-width: 1120px) and (min-width: 1025px) {
  .site-header .logo { height: 24px; }
}

/* SPオーバーレイの言語切替。ここは幅に余裕があるので語で見せる */
.nav-overlay__lang {
  margin-top: 12px;
  font-size: 16px !important;   /* .nav-overlay__inner a の20pxを一段落とす */
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ----------------------------------------------------------
   27-2. 英語版の字間・行送り

   日本語向けに広げた字間（.jp-title 0.3〜0.4em / .section-jp 0.32em /
   .about-head .jp 0.32em など）は、英語ではただ間延びして見える。
   .en-sub は「日本語サブ見出しの位置に英語を置いた」印で、
   PHP側でこのクラスを足してある。
   ---------------------------------------------------------- */
.lang-en .en-sub,
.lang-en .page-hero--dark .jp-title.en-sub,
.lang-en .section-head .section-jp.en-sub,
.lang-en .about-page-wrap .about-head .jp.en-sub,
.lang-en .about-page-wrap .anchor-nav .jp.en-sub,
.lang-en .advantage-page .adv-section-head .jp.en-sub {
  font-family: var(--font-latin);
  letter-spacing: 0.06em;
}

/* 本文系は字間を素に戻す。--font-serif-jp / --font-sans-jp のまま使う
   （どちらもラテン字形を持っており、英語でも破綻しない。
     見出し用の Cormorant Garamond を本文に回すと線が細くなりすぎる）。 */
body.lang-en .section-lead,
body.lang-en .intro-body,
body.lang-en .adv-lead,
body.lang-en .about-lead,
body.lang-en .contact-lead,
body.lang-en .flow-lead,
body.lang-en .privacy-lead {
  letter-spacing: 0.01em;
}

/* 行送り2.0は和文向け。英語では空きすぎるので詰める */
body.lang-en .section-lead { line-height: 1.8; }
body.lang-en .about-page-wrap .profile-row dd { line-height: 1.8; }

/* ----------------------------------------------------------
   27-3. 英語版のヒーロー

   行ごとの白帯は「1行に収まっていること」が前提の見た目。
   英語のコピーは日本語より字数が伸びるので、
     ・見出しを 58px → 50px に落とす
     ・サブを 28px → 24px に落とす
     ・それでも溢れたときは折り返させる（帯が2行の箱になるが、
       画面外にはみ出すより良い）
   としてある。現在のコピーは最長でも1行に収まる長さで書いてある。
   ---------------------------------------------------------- */
body.lang-en .hero h1 {
  font-size: clamp(26px, 3.6vw, 50px);
  letter-spacing: 0;
}

body.lang-en .hero h1 .line { white-space: normal; }

body.lang-en .hero h1 .line-sub {
  /* 下限は16px。2026-08-10 の16px化で決めた最小値を英語版でも下回らせない */
  font-size: clamp(16px, 1.7vw, 24px);
  letter-spacing: 0.01em;
}

/* SPの見出しサイズ。
   .home .hero h1 の980px以下の指定（clamp(22px,6.2vw,42px)）は
   このセクションより前にあり、こちらの方が詳細度が高いので上書きしてしまう。
   英語版でもSPで小さくなるよう、同じ帯で明示的に指定し直す。 */
@media (max-width: 980px) {
  body.lang-en .hero h1 { font-size: clamp(22px, 5.4vw, 40px); }
  body.lang-en .hero h1 .line-sub { font-size: clamp(16px, 2.6vw, 20px); }
}

body.lang-en .hero-brand__text { letter-spacing: 0.02em; }

/* ----------------------------------------------------------
   27-4. 英語版で長くなる見出し

   和文が2〜7文字で収まっていた枠に英語が入るので、
   はみ出すものだけ一段落とす。落としていない見出しは
   実測で枠に収まっている。
   ---------------------------------------------------------- */
body.lang-en .service-title  { font-size: 24px; letter-spacing: 0.01em; }
body.lang-en .pa-title       { font-size: 20px; letter-spacing: 0.01em; }
body.lang-en .firm-name      { font-size: 20px; letter-spacing: 0.01em; }
body.lang-en .firm-stage     { letter-spacing: 0.06em; }
body.lang-en .adv-card h3    { font-size: 20px; letter-spacing: 0.01em; }

/* サービスページのアンカーカード。SPでは2カラムで表示幅が約133pxしかなく、
   "Accounting services for foreign-affiliated companies" のような長い
   タイトルが入る。**フォントは16pxから落とさない**（2026-08-10 の16px化の
   最小値を守る）。.svc-card は高さ固定ではないので、行数が増えれば
   カードが伸びるだけで溢れない。字間だけ素に戻す。 */
body.lang-en .services-page-wrap .svc-card-title {
  letter-spacing: 0.01em;
  line-height: 1.5;
}

body.lang-en .advantage-page .strength h4 {
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: 0.01em;
}

/* 概要表の項目名。0.12emは和文2〜4文字向けの字間で、
   "Business hours" のような語だと間延びする */
body.lang-en .about-page-wrap .profile-row dt { letter-spacing: 0.04em; }

/* ----------------------------------------------------------
   27-5. 英語版の個人情報保護方針にだけある「参考訳」の注記

   原文（日本語）が法務未確認・制定日未確定のため、
   英訳を独立した規程として読ませないための断り書き。
   日本語版にこのブロックは無い。
   ---------------------------------------------------------- */
.privacy-page-wrap .privacy-note {
  margin: 0 0 48px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-left: 3px solid var(--cyan);
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.privacy-page-wrap .privacy-note a {
  color: var(--cyan-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 必須／任意のバッジ。0.15emは和文2文字向けの字間で、
   "Required" のような語だと間延びする。
   フォントサイズは16pxのまま（2026-09-09） */
body.lang-en .contact-page-wrap .badge {
  letter-spacing: 0.04em;
}

/* ==========================================================
   28. NEWS 記事（single.php 専用）— 2026-09-28
   テンプレート全体を .news-page-wrap で包んでスコープしている。
   本文はブロックエディタの出力なので、要素セレクタで見た目を当てる。
   行間・文字サイズは PRIVACY（26章）に揃えた本文中心の設定。
   ========================================================== */

/* ヒーローの「NEWS」。h1 は記事タイトルに譲っているので div で、
   見た目は .page-hero--dark h1（18章）と同じにする */
.news-page-wrap .page-hero--dark .hero-title {
  font-family: var(--font-latin);
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 20px;
  color: #fff;
}
.news-page-wrap .page-hero--photo .hero-title {
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 28px rgba(0,0,0,0.45);
}

.news-page-wrap .news-article { padding: 100px 40px 120px; background: #fff; }
.news-page-wrap .news-article-inner { max-width: 860px; margin: 0 auto; }

/* 日付・カテゴリ・タイトル */
.news-page-wrap .news-article-head {
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.news-page-wrap .news-article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
/* 日付・タグはトップの .news-date / .news-tag（16章）と同じ見た目 */
.news-page-wrap .news-article-date {
  font-family: var(--font-latin);
  font-size: 18px;
  color: var(--cyan-deep);
  letter-spacing: 0.1em;
}
.news-page-wrap .news-article-tag {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--cyan-deep);
  border: 1px solid var(--cyan);
  padding: 5px 12px;
}
.news-page-wrap .news-article-title {
  font-family: var(--font-serif-jp);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

/* 本文 */
.news-page-wrap .news-article-body {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
}
.news-page-wrap .news-article-body > * { margin: 0 0 1.5em; }
.news-page-wrap .news-article-body > *:last-child { margin-bottom: 0; }

/* 大見出し（■ 見出し）。左にシアンの縦線 */
.news-page-wrap .news-article-body h2 {
  font-family: var(--font-serif-jp);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 72px 0 24px;
  padding-left: 18px;
  border-left: 3px solid var(--cyan);
}
.news-page-wrap .news-article-body h3 {
  font-family: var(--font-serif-jp);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin: 48px 0 16px;
}
.news-page-wrap .news-article-body > h2:first-child,
.news-page-wrap .news-article-body > h3:first-child { margin-top: 0; }

.news-page-wrap .news-article-body a {
  color: var(--cyan-deep);
  text-decoration: underline;
  word-break: break-all; /* URLをそのまま貼った行がスマホで横にはみ出さないように */
}
.news-page-wrap .news-article-body strong { color: var(--ink); }

.news-page-wrap .news-article-body ul,
.news-page-wrap .news-article-body ol { padding-left: 1.5em; }
.news-page-wrap .news-article-body li + li { margin-top: 0.4em; }

.news-page-wrap .news-article-body img { max-width: 100%; height: auto; }
.news-page-wrap .news-article-body figure { margin-left: 0; margin-right: 0; }
.news-page-wrap .news-article-body figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

.news-page-wrap .news-article-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 56px 0;
}

/* 表（会社概要などを表ブロックで入れた場合） */
.news-page-wrap .news-article-body table {
  width: 100%;
  border-collapse: collapse;
}
.news-page-wrap .news-article-body th,
.news-page-wrap .news-article-body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.news-page-wrap .news-article-body th {
  width: 30%;
  color: var(--ink);
  font-weight: 700;
  background: var(--bg-soft);
}

/* 引用（コメント欄などを引用ブロックで入れた場合） */
.news-page-wrap .news-article-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 24px 28px;
  background: var(--cyan-tint);
  border: none;
}
.news-page-wrap .news-article-body blockquote p:last-child { margin-bottom: 0; }

/* 一覧へ戻る */
.news-page-wrap .news-article-back {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  text-align: center;
}

@media (max-width: 980px) {
  .news-page-wrap .news-article { padding: 64px 24px 96px; }
  .news-page-wrap .news-article-head { padding-bottom: 28px; margin-bottom: 36px; }
  .news-page-wrap .news-article-title { font-size: 21px; }
  .news-page-wrap .news-article-body h2 { font-size: 19px; margin-top: 56px; padding-left: 14px; }
  .news-page-wrap .news-article-body blockquote { padding: 20px; }
  .news-page-wrap .news-article-body th,
  .news-page-wrap .news-article-body td { display: block; width: auto; }
  .news-page-wrap .news-article-body th { border-bottom: none; padding-bottom: 6px; }
  .news-page-wrap .news-article-body td { padding-top: 6px; }
}

/* ----------------------------------------------------------
   28-2. お知らせ一覧（page-news.php）— 2026-09-28
   1件の見た目（.news-item 系）は16章のルールを .news-page-wrap にも効かせて共有している
   ---------------------------------------------------------- */
.news-page-wrap .news-archive { padding: 100px 40px 120px; background: #fff; }
.news-page-wrap .news-archive-inner { max-width: var(--max-width); margin: 0 auto; }
.news-page-wrap .news-empty { font-size: 16px; color: var(--ink-soft); text-align: center; }

/* ページ送り（paginate_links の出力） */
.news-page-wrap .news-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}
.news-page-wrap .news-pager .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-jp); /* Cormorant は数字が小さい字形（1が小文字サイズ）で読みにくい */
  font-size: 16px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.news-page-wrap .news-pager a.page-numbers:hover { background: var(--cyan-tint); border-color: var(--cyan); }
.news-page-wrap .news-pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-page-wrap .news-pager .dots { border: none; }

@media (max-width: 980px) {
  .news-page-wrap .news-archive { padding: 64px 24px 96px; }
}

/* ==========================================================
   29. ABOUT：事務所概要「グローバルネットワーク」（Morison Global）— 2026-09-29
   page-about.php / en/page-about-en.php の表の1行。
   バナーは参考サイト（aap.or.jp/company/#point07）と同じ「角丸の枠＋ロゴ＋外部リンクアイコン」。
   ロゴ画像は問い合わせ中。PHP 側で assets/logo-morison-global.* の有無を見て、
   無ければ .morison-banner-ph（文字）を出している。
   ========================================================== */
.about-page-wrap .profile-row dd .network-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.about-page-wrap .profile-row dd .network-text { display: block; }
.about-page-wrap .profile-row dd .network-text + .network-text { margin-top: 12px; }

/* dd a（20章）の下線・色を打ち消す。
   2026-09-29（午後）寸法・配色を参考サイト（aap.or.jp の .btn_style01.type_gaibu.type_company）の実測値に合わせた:
     最大幅 250px／枠 1px #555／角丸 50px／白地／ロゴ 137×26 を左から 46px（padding 30 ＋ margin 16）／
     外部リンクアイコン 17×17・右 18px・#555／hover で地と枠を #555 に塗り、白文字ロゴとアイコン白に切り替え（0.3s） */
.about-page-wrap .profile-row dd a.morison-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 250px;
  margin: 14px 0 20px;
  padding: 12px 30px 12px 46px;
  border: 1px solid #555;
  border-radius: 50px;
  background: #fff;
  color: #555;
  text-decoration: none;
  line-height: 0;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
/* 外部リンクアイコン（奥の□＋手前の□に↗）。wp_kses_post が <svg> を落とすので mask で描く */
.about-page-wrap .profile-row dd a.morison-banner::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background-color: currentColor;
  transition: background-color 0.3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M3.85.65h12.5v12.5H3.85z'/%3E%3Cpath d='M.65 3.85v12.5h12.5'/%3E%3Cpath d='M8.2 8.8l4.7-4.7M9.4 4.1h3.5v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M3.85.65h12.5v12.5H3.85z'/%3E%3Cpath d='M.65 3.85v12.5h12.5'/%3E%3Cpath d='M8.2 8.8l4.7-4.7M9.4 4.1h3.5v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 白文字ロゴが無い場合（通常ロゴのみ）は、塗らずに枠の色だけ変える */
.about-page-wrap .profile-row dd a.morison-banner:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); }

/* ロゴ。274×52 の画像を 137×26 で表示（高解像度画面向けの2倍画像） */
.about-page-wrap .morison-banner-logo { display: block; width: 137px; height: 26px; }
.about-page-wrap .morison-banner-logo--hover { display: none; }
/* hover 用の白文字ロゴがある場合は、参考サイトと同じく #555 で塗って切り替える */
.about-page-wrap .profile-row dd a.morison-banner--swap:hover { background: #555; border-color: #555; color: #fff; }
.about-page-wrap .morison-banner--swap:hover .morison-banner-logo { display: none; }
.about-page-wrap .morison-banner--swap:hover .morison-banner-logo--hover { display: block; }

/* プレースホルダー（ロゴ未着の間） */
.about-page-wrap .morison-banner-ph {
  font-family: var(--font-latin);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ==========================================================================
   30. ABOUT：英語版の代表署名を3行に（en/page-about-en.php）— 2026-09-29
   修正依頼で「Tomohito SUGA / Representative Partner, … / VSG Corporate Tax Corporation」の
   3行表記になった。.who の直下テキスト＝氏名、span 2つ＝肩書・法人名を各1行にする。
   日本語版の署名（法人名＋span）は .who--stack を付けていないので影響しない。
   ========================================================================== */
.about-page-wrap .rep-sign .who--stack { line-height: 1.6; }
.about-page-wrap .rep-sign .who--stack span {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   31. 英語版ヘッダーの社名ロゴ（assets/logo-vsg-full-en.svg）— 2026-09-29
   英文ロゴは約 14.57 : 1 で日本語版（10.44 : 1）より約1.4倍横長。
   日本語版の段階指定（34px / 1200以下 28px / 1120以下 24px）のままだと、
   フルナビが出る 1025px でロゴとナビの隙間が 0px、1201px でも 24px しかなかった（実測）。
   英語ナビの幅は約595px、ヘッダー左右の余白は各40px なので、
     ロゴ幅 ＝ 画面幅 − 80 − 595 − 隙間40 − スクロールバー分20 ≒ 100vw − 735px
   を高さに直して（÷14.57）連続的に縮める。1245px 以上で 34px、1025px で下限 21px。
   1024px以下（ハンバーガー）は日本語版と同じ幅基準（70vw）のままで対象外。
   ========================================================================== */
@media (min-width: 1025px) {
  body.lang-en .site-header .logo {
    height: clamp(21px, calc((100vw - 735px) / 14.57), 34px);
  }
}