@charset "UTF-8";
/*
Theme Name: Arkhe Child
Template: arkhe
*/
/* ============================================================
   style.css — ネクストライン法律事務所 TOPページ
   BEM命名 / レスポンシブ（モバイルファースト）
   ブレークポイント: 768px（タブレット）/ 1024px（デスクトップ）
   ============================================================ */

/* ============================================================
   0. デザイントークン（CSS カスタムプロパティ）
   ============================================================ */
:root {
  /* カラー */
  --color-red:        #dc4032;
  --color-red-light:  #EF9A9A;
  --color-blue:       #5ea4d4;
  --color-blue-dark:  #145488;
  --color-blue-light: #EAF4FB;
  --color-blue-mid:   #B3D9F2;
  --color-gold:       #e5d763;       /* ご相談ステップアイコン */
  --color-text:       #35445a;
  --color-text-sub:   #646364;
  --color-white:      #FFFFFF;
  --color-bg:         #FFFFFF;
  --color-bg-gray:    #F5F7FA;
  --color-bg-footer:  #5ea4d4;
  --color-border:     #D0DCE8;

  /* タイポグラフィ
     本番: モリサワフォント / ローカル(Mac): ヒラギノ角ゴ → Noto Sans JP の順でフォールバック */
  --font-serif: 'Midashi Go MB31', '見出しゴMB31 B', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; /* 太字・見出し用 */
  --font-sans:  'Shin Go R', 'Medium Gothic', '中ゴシック BBB', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; /* 細字・本文用 */

  /* フォントサイズ */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */

  /* フォントサイズ（デザイナー指定のDTP Q数は「横幅192mm紙面」基準のため、
     そのままpx換算せず、Webのメイン幅に引き伸ばした「ジャンプ率」で再設計。
     比率の強弱（ニュアンス）を保ちつつ、上位ほど大胆に・下位ほど可読性重視で調整 */
  /* 図形類はvw比例のclamp()で縮小するのに対し、以前は固定48px(--fs-3xl)で
     ウィンドウを縮めても文字だけ縮まず窮屈になっていたため、同じ考え方で
     clamp化。w1920で48px(従来通り)、w1280で最小32pxに下げ止まる */
  --fs-section-title: clamp(32px, 2.5vw, 48px);  /* 21Q → 48px: 圧倒的な主役になる大見出し */
  /* aboutページの「理念」「ロゴに込めた想い」見出し専用。他の--fs-section-title
     使用箇所とは独立して1920px時53pxに変更する要望のため、共有変数を
     直接変えず専用変数にする。下限は他の比例サイズと同じ「上限の60%」の
     慣例(53*0.6≒32px、偶然にも--fs-section-titleの下限と同じ値になる) */
  --fs-about-heading: clamp(26px, calc(48 / 1920 * 100vw), 48px);
  /* --fs-section-titleと同じ理由でclamp化。w1920で36px(従来通り)、
     w1280で最小24pxに下げ止まる */
  --fs-lead-copy:      clamp(24px, 1.875vw, 36px);  /* 17.5Q → 36px: 見出しに次いで目を引くサイズ */

  /* デザインカンプ実測値(--fs-lgなど共有スケールとは無関係に、直接測った値を基準にする) */
  --fv-copy-sub-size:  35px; /* .fv__copy-subの実測値 */
  /* 固定28pxのままだと、縮小時に--fs-lead-copy(.mission__text等)より
     大きくなってしまい見出しの主従関係が崩れるため、こちらも軽くclamp化。
     ただし.feature-card__headingは大きく縮む必要はないため、下げ幅は控えめにし
     (28→22px、--fs-lead-copyの36→24pxより緩やか)、どのウィンドウ幅でも
     --fs-lead-copyを下回る(≒2px以上小さい)ままになるよう調整済み */
  --fs-feature-lg:     clamp(22px, 1.4583vw, calc(var(--fv-copy-sub-size) * 0.8)); /* .fv__copy-subより一回り小さいサイズ(28px) */
  --fs-feature-text:   calc(var(--fs-feature-lg) * 0.79); /* .feature-card__headingの78〜80%程度 */
  --fs-practice-item:  var(--fs-feature-text); /* .feature-card__textとサイズを統一 */
  --fs-access-text:    0.9375rem;      /* 12.5Q → 15px */
  --fs-caption:        0.9375rem;      /* 9.5Q → 13pxから15pxに変更。デザインカンプ比較で小さすぎたため引き上げ */

  /* スペーシング */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* コンテナ幅。1920px時1600pxに収め、画面幅に比例して縮小、1024pxを下限にする */
  --container-max: clamp(1024px, 83.333vw, 1600px); /* 1600/1920 = 83.333% */
  --container-pad: 1.25rem;
  /* .features__inner(や他の__inner)の実際の左端(=コンテナの標準テキスト安全域)の
     ビューポート基準X座標。.features__leadを左へずらす際、これを下回らないよう
     max()で歯止めをかけるのに使う(狭い画面でコンテナがビューポート幅と
     一致している間は0px、コンテナがmax-widthで頭打ちになるとその分だけ増える) */
  --container-content-left: calc(max(0px, calc((100vw - var(--container-max)) / 2)) + var(--container-pad));
  /* 事務所の特徴セクション左カラム(シンボル+見出し)の幅。上バーとの重なり判定にも使う。
     旧cap(464px)はsvg自体の上限(max-width:412px)より52px広く、その分が
     lead内の未使用の余白になっていた(w1920で片側82pxの centering 余白)。
     svg実寸+適度な余白として440pxに詰め、浮いた24px(旧cap比)を
     .features__grid側(margin-leftの再計算)とバー(--features-bar-width)に還元する */
  --features-lead-width: clamp(200px, 22.9167vw, 440px);
  /* leadとcard(.features__grid)は間隔ではなく160px(w1920基準)重なる。それ未満は比率で縮小する
     (901px時点で約75px。900px以下はSPレイアウトに切り替わるため対象外)。
     .features__gridにmargin-leftとして負の値で適用し、lead側へ食い込ませる */
  --features-lead-overlap: min(160px, calc(160 / 1920 * 100vw));
  /* .feature-card--top-rightが斜め位置合わせのtranslateXで右へはみ出す量。
     .features__gridのpadding-rightとして確保し、はみ出し先をグリッド自身の
     ボックス内に収める(このためboxとしてのlead/gridは左右対称でも、見た目上の
     文字はleadの左端よりcard側の右端の方が奥まって見える非対称が生まれていた)。
     .features__innerをこの半分だけ右にずらすことで、見た目の左右対称を保つ */
  --features-right-bleed-reserve: max(0px, calc(var(--feature-diagonal-offset, clamp(72.4px, calc(181 / 1920 * 100vw), 181px)) + clamp(-93px, calc(-93 / 1920 * 100vw), -37.2px)));

  /* トランジション */
  --transition-base: 0.25s ease;

  /* ボーダー半径 */
  --radius-sm: 4px;
  --radius-md: 8px;

/* ヘッダー */
  --header-height: clamp(90px, 7.8125vw, 150px);
  --header-bg: rgba(255,255,255,.7);
  /* ロゴ高さ = 90px(w1920基準)、ウィンドウ幅比例 */
  --logo-height: clamp(54px, calc(90 / 1920 * 100vw), 90px);
  --nav-font-size: clamp(16px, 0.9vw + 8px, 18px);
  --nav-gap: clamp(20px, 2vw, 40px);
  --header-inner-padding: clamp(24px, 3vw, 60px);

/* FVシンボル(PC)。1920pxで元の100%(695px/733px、上限・vw係数とも変更なし)。
   下限だけ元の値(320px/340px)の80%(256px/272px)に縮める。
   (一度、上限の80%を下限にしてしまい、900px付近で556px/586pxという
   本来の下限より遥かに大きい値のまま張り付いて文字と重なる不具合を
   出してしまったため修正。位置は変更せず、left/right固定・top固定のまま=
   左下シンボルは左上基準、右上シンボルは右上基準で縮む) */
  --fv-symbol-left-width: clamp(256px, 36.2vw, 695px);
  --fv-symbol-right-width: clamp(272px, 38.2vw, 733px);

  --fv-symbol-left-top: 53.43%;
  --fv-symbol-right-top: 38.43%;

/* FVニュース */
  --news-bar-height: clamp(42px, 2.865vw, 55px);
  --news-bar-padding-x: clamp(16px, 1.04vw, 20px);
  --news-bar-gap: clamp(12px, 1.04vw, 20px);
  --news-icon-size: clamp(22px, 1.56vw, 30px);

/* 事務所の特徴: 中央の横線・斜め線から各カードの文字までの余白 */
  --features-divider-gap-v: clamp(14px, calc(54 / 1920 * 100vw), 54px); /* 横線から文字まで(垂直方向) */
  --features-divider-gap-h: clamp(16px, calc(60 / 1920 * 100vw), 60px); /* 斜め線から文字まで(水平方向) */

  /* 取扱業務: title/readmoreのSVG端から文字端までの余白(w1920基準、ウィンドウ幅比例) */
  --practice-panel-title-gap: clamp(19px, calc(74 / 1920 * 100vw), 74px);
  --practice-panel-readmore-gap: clamp(18px, calc(72 / 1920 * 100vw), 72px);

  /* READ MOREバナー・弁護士紹介見出しバナー共通の斜め角度。
     各SVGアセットの斜辺から実測(features/consultation readmore≒35.51°、
     lawyer-intro readmore≒35.50°、lawyer-intro title≒35.51°、
     practice-panel--personal-readmore≒35.51°、
     practice-panel--corp-readmoreのみ35.14°だが他5点と揃えるため書き出し誤差とみなす)。
     箱の幅・高さが変わっても角度が変化しないtransform:skewX()での再現に使う。
     ボックスが伸縮しても常にこの角度を保つには、tan()を使い高さに比例した
     オフセットを算出する(下記各要素の::beforeを参照)。 */
  --panel-skew-angle: 35.5deg;

  /* 弁護士紹介: title/readmoreのSVG左端から文字左端までの余白、READ MOREの高さ(w1920基準、ウィンドウ幅比例) */
  --lawyer-intro-title-gap: clamp(44px, calc(176 / 1920 * 100vw), 176px);
  --lawyer-intro-readmore-gap: clamp(20px, calc(81 / 1920 * 100vw), 81px);
  --lawyer-intro-readmore-fs: clamp(6px, calc(21 / 1920 * 100vw), 21px);

  /* ご相談について: readmoreのSVG左端から文字左端までの余白、見出し下線から円上端までの距離(w1920基準、ウィンドウ幅比例) */
  --consultation-readmore-gap: clamp(20px, calc(81 / 1920 * 100vw), 81px);
  --consultation-heading-gap: clamp(24px, calc(97 / 1920 * 100vw), 97px);

  /* アクセス: 前セクション末尾→見出し上、見出し下線→地図上、地図サイズ、住所/駅情報の文字サイズ(w1920基準、ウィンドウ幅比例) */
  --consultation-to-access-gap: clamp(64px, calc(257 / 1920 * 100vw), 257px);
  --access-heading-map-gap: clamp(50px, calc(120 / 1920 * 100vw), 120px);
  --access-map-width: clamp(207px, calc(826 / 1920 * 100vw), 826px); /* w1920で826×570 */
  --access-grid-gap: clamp(45px, calc(102 / 1920 * 100vw), 102px); /* w1920でmapとaccess__infoの間102px */
  --access-address-fs: clamp(15px, calc(28 / 1920 * 100vw), 28px);
  --access-transit-fs: clamp(15px, calc(26 / 1920 * 100vw), 26px);
  /* コンテナ幅: w1920で1485px、以降はウィンドウ幅比例で縮小(--container-maxと同じフロア) */
  --access-inner-max: clamp(1024px, calc(1485 / 1920 * 100vw), 1485px);

  /* お問い合わせ: 各種距離(w1920基準、ウィンドウ幅比例) */
  --access-to-contact-gap: clamp(73px, calc(291 / 1920 * 100vw), 291px);
  --contact-heading-gap: clamp(50px, calc(150 / 1920 * 100vw), 150px);
  --contact-phone-time-gap: clamp(9px, calc(37 / 1920 * 100vw), 37px);
  --contact-time-footer-gap: clamp(75px, calc(120 / 1920 * 100vw), 120px);

  /* 事務所の特徴: 上バー(bar-right.png)の実寸比率(62/1312)から高さを逆算するための幅。
     以前はclamp()の中央値に独立した66.1458vwを使っており、それがleadを避けるための
     calc()(右端の引数)より大きい範囲(実測1100〜1200px付近)では66.1458vwの方が
     採用されてしまい、本来保つべきlead右端からの間隔が守られず、狭い画面でバーが
     leadから大きく離れて見えていた。中央値を廃止し、leadを避けるcalc()を常に
     採用する。間隔は20pxを維持する。また下限を320px→0pxにする(320pxの
     下限がleadを避けるcalc()より優先されてしまう幅(約905px以下)で、バーが
     逆にleadへ重なっていたため。leadを避けるcalc()自体が常に優先されるので、
     0pxはただの負値ガードとしてのみ働く)。
     以前は50vw + container-max/2 - container-padという式でlead左端(=
     --container-content-left)を自前で再現していたが、これは
     --container-content-left側にある「コンテナがビューポートを超える時は
     0で頭打ちにする」max(0px, …)のガードを含んでおらず、container-maxが
     フロア(1024px)でビューポート自体より大きくなる約1024px以下で値が
     大きくマイナスに乖離し(実測でバーがleadに40px近く重なる原因になって
     いた)。--container-content-leftを直接使うことでこのガード込みの
     正確な値を常に使う。さらに.features__innerに追加した右シフト
     (--features-right-bleed-reserve/2 - 14px、左右対称化のための調整)の分だけ
     leadの実際の右端も右へ動くため、その分もここで差し引く */
  --features-bar-width: max(0px, min(1270px, calc(100vw - var(--container-content-left) - var(--features-lead-width) - var(--features-right-bleed-reserve) / 2 + 14px - 20px)));
  --features-bar-height: calc(var(--features-bar-width) * 62 / 1312);

  /* 事務所の特徴: バー→グレーの斜め線の頂点(=.features__grid自体の上端/下端)の目標値 */
  --features-grid-top-target: clamp(25px, calc(100 / 1920 * 100vw), 100px);
  --features-grid-bottom-target: clamp(31px, calc(124 / 1920 * 100vw), 124px);
  /* .featuresのpadding-bottom専用(下バー上端までの実際の見た目の余白)。
     斜め線の実際の位置はfeature-card-align.jsがカードの中身を実測して
     動かすため、--features-grid-bottom-targetの数式通りにはならない
     (実測ベースで別途調整するための専用変数。--features-grid-bottom-target
     は下段カード内部の余白計算にも使われているため、ここを直接変えると
     カード内部の余白まで変わってしまうので分離した)。
     1470px:62px、1090px:45px、901px:40px(手動での実測目標、±3px許容)を
     見た目のゴールとしたが、JSの補正(--feature-diagonal-offset等)により
     padding-bottomの値と実際の見た目のギャップには+15〜21px程度の差が
     生じる(実測で確認済み)。この差分を逆算して引いた上で、原点を通る
     単純な比例式(calc(53/1920*100vw))で近似した。下限は901px時点の値 */
  --features-section-bottom-gap: clamp(25px, calc(53 / 1920 * 100vw), 53px);
  /* 事務所の特徴: バー→カードの文字(上段/下段、それぞれ2枚とも共通)の目標値 */
  --features-card-top-text-target: clamp(31px, calc(125 / 1920 * 100vw), 125px);
  --features-card-bottom-text-target: clamp(50px, calc(198 / 1920 * 100vw), 198px);
}


/* ============================================================
   1. リセット & ベース
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* 下層ページ等でコンテンツが画面高より短い場合でも、フッターが画面下に
     余白を作らず必ず続けて表示されるようにする(いわゆるsticky footer)。
     fixed配置の要素(SP追従CTA・メニューオーバーレイ)はflexレイアウトの対象外になるため影響しない */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* フォーカス表示（アクセシビリティ） */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* reduced motion 対応 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   2. ユーティリティ
   ============================================================ */

/* コンテナ（各セクション共通の幅制限） */
.features__inner,
.attorneys__inner,
.consultation__inner,
.contact__inner,
.header__inner,
.footer__inner,
.page-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* セクション共通 上下余白 */
.features,
.practice-areas,
.attorneys,
.consultation,
.access,
.contact {
  padding-block: var(--space-xl);
}

/* セクション見出し共通スタイル */
.features__lead-heading,
.practice-panels__heading,
.attorneys__heading,
.consultation__heading,
.access__heading,
.contact__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.15em;
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-lg);
}

/* 中央揃えの見出し */
.practice-panels__heading,
.consultation__heading,
.access__heading,
.contact__heading {
  display: block;
  text-align: center;
  padding-bottom: var(--space-sm);
}

/* 見出し下線（中央配置・PC実測 625×1px、縮小時は90%幅でフォールバック） */
.practice-panels__heading::after,
.consultation__heading::after,
.access__heading::after,
.contact__heading::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 625px;
  max-width: 90%;
  height: 2px;
  background-color: var(--color-gold);
}


/* ==========================================================================
   Header
   BEM:.header（レイアウト）/ c-nav, c-btn-contact, c-hamburger（コンポーネント）
   ========================================================================== */

/* ---------- ヘッダー本体 ---------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background-color: var(--header-bg);
  box-shadow: none;
	z-index: 1000;
}

.header__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
	max-width: 1600px;
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--header-inner-padding);
}

/* ---------- ロゴ ---------- */
.header__logo {
  flex-shrink: 0;
  align-self: flex-start;
  /* 上余白はヘッダー高さ・ロゴ高さ・下余白(固定14px)から逆算(w1920基準で46px相当)。
     top56px+height90px+bottom14pxの指定合計(160px)がヘッダー最大高さ(150px)を超えるため、
     bottom(固定14px)とheightを優先しtopを可変にして常にヘッダー内に収まるようにしている */
  margin-top: calc(var(--header-height) - var(--logo-height) - 14px);
  /* ロゴ下端の余白は固定14px */
  margin-bottom: 14px;
}

.header__logo img,
.header__logo .custom-logo {
	width: auto;
	height: var(--logo-height);
	display: block;
}

/* SPメニュー展開時専用の横長ロゴ。PC・SP(メニュー閉時)はどちらも非表示が既定 */
.header__logo-link--sp {
	display: none;
}

/* ---------- ナビゲーション（PC） ---------- */
.header__nav {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: var(--nav-gap);
  /* ヘッダー下端→文字下端(aのpadding-bottom:6pxを除いた実テキスト下端) = 35px(w1920基準)、ウィンドウ幅比例。
     padding-bottom分の6pxを差し引いた分だけ余白を持たせて、テキスト下端側で35pxになるよう調整 */
  margin-bottom: calc(clamp(21px, calc(35 / 1920 * 100vw), 35px) - 6px);
}

.header__list {
	display: flex;
	align-items: center;
	gap: var(--nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap; /* 項目が増えても崩れないよう横スクロールで受ける想定★あとで見直す */
}

.header__list li {
	position: relative;
}

.header__list a {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
	font-family: var(--font-serif);
	font-size: var(--nav-font-size);
	font-weight: 800;
	line-height: 1;
	color: #646364;
	text-decoration: none;
	white-space: nowrap;
}

/* hover下線（アニメーション） */
.header__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--color-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

/* 現在ページ以外にのみ hover 下線を適用（現在ページとの競合回避）
   "> li"でトップレベルの項目だけを対象にする(サブメニュー内の子リンクは
   別途専用の hover下線ルールを持つため、ここで二重に対象にする必要がない)。
   ">a"で直下のリンクのみを対象にし、さらに:not(:has(.sub-menu :hover))で
   メガメニュー内の子リンクをホバー中は親の下線を消す（親子の下線が同時に出ないようにする）
   :not(:has(> a[href="#"]))で、遷移先を持たないメガメニュー・トリガー（例：取扱業務）には
   下線を出さない（下線が出るとリンクのように見えるが、クリックしても遷移しないため） */
.header__list > li:not(.current-menu-item):not(.current-menu-ancestor):not(:has(> a[href="#"])):hover:not(:has(.sub-menu :hover)) > a::after {
	transform: scaleX(1);
}

/* 遷移先を持たないメガメニュー・トリガー（href="#"、例：取扱業務）は、
   スマホでタップした際にブラウザ標準のタップハイライト(グレーの背景)が
   付き、リンクへ遷移しそうな見た目になってしまう。クリックしても
   遷移しないため、このハイライトを消す */
.header__item--mega > a[href="#"] {
	-webkit-tap-highlight-color: transparent;
}

/* 現在ページ：赤下線を常時固定表示。"> li"でトップレベルの項目だけを対象にする
   (メガメニュー内の同一ページ内アンカーへのサブリンク(例：/about/#philosophy)は、
   現在地判定がURLのパス部分だけで一致するため現在ページ扱いになってしまうが、
   これはトップレベルの見出し(事務所について自体)にだけ出したい表示のため) */
.header__list > li.current-menu-item > a,
.header__list > li.current-menu-ancestor > a,
.header__list > li.current-menu-parent > a {
	position: relative;
}

.header__list > li.current-menu-item > a::before,
.header__list > li.current-menu-ancestor > a::before,
.header__list > li.current-menu-parent > a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--color-red);
}

/* ---------- ハンバーガー（PC非表示） ----------
   中身はassets/images/hamburger-menu.svgをインライン出力(header.php)。
   線2本(rect)とMENU文字(g)をCSSから直接操作し、開閉アニメーションを付ける */
.header__hamburger {
	display: none;
	position: absolute;
	top: 50%;
	right: var(--header-inner-padding);
	transform: translateY(-50%);
	width: 33px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1100;
}

.header__hamburger svg {
	display: block;
	width: 100%;
	height: 100%;
}

.header__hamburger__line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.3s ease;
}

.header__hamburger__label {
	transition: opacity 0.2s ease;
}

/* ハンバーガー→バツ印アニメーション。線2本(中心y=0.92/7.91)を
   ボタン全体の縦中央(viewBox高さ21.6の半分=10.8)まで動かして交差させる。
   (線同士の中間点ではなく、ボタン全体の中心に合わせることで、
   MENU文字が消えた後の余白も含めて上下左右対称のXに見えるようにする) */
.header__hamburger.is-active .header__hamburger__line--top {
	transform: translateY(9.88px) rotate(45deg);
}
.header__hamburger.is-active .header__hamburger__line--bottom {
	transform: translateY(2.89px) rotate(-45deg);
}
.header__hamburger.is-active .header__hamburger__label {
	opacity: 0;
}

/* ---------- SP用オーバーレイ ---------- */
.header__nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 999;
}

.header__nav-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   レスポンシブ（PCファースト）
   ========================================================================== */

/* ---------- 1200px以下：余白・gapを縮小 ---------- */
/* font-size/gapとも900px(SPへの切替点)〜1200pxの間で線形補間(clamp)する。
   900px以下はハンバーガーメニュー側の固定値(下記900pxブロック)が
   別途上書きするため、ここでの下限はPC横並びナビが実際に存在する
   900px直上までの範囲でのみ意味を持つ。
   font-size: 1200px時16px(旧固定値と同じ) → 900px時15px(可読性の下限として死守)
   gap     : 1200px時24px(旧clamp(16,2vw,32)の1200px時実測値と同じ) → 900px時14px(8pxだと詰まりすぎて読みづらいため引き上げ) */
@media (max-width: 1200px) {
	:root {
		--nav-font-size: clamp(15px, calc(15px + (100vw - 900px) / 300), 16px);
		--nav-gap: clamp(14px, calc(14px + (100vw - 900px) / 30), 24px);
		--header-inner-padding: 32px;
	}
}

/* ---------- 900px以下：ハンバーガーメニューへ切替 ---------- */
@media (max-width: 900px) {
	:root {
		--header-height: 51px;
		--header-inner-padding: 20px;
	}

	.header__logo {
		top: 50%;
		left: var(--header-inner-padding);
		/* デスクトップ用の上下オフセットは51px固定ヘッダーに合わないため無効化し、中央寄せに戻す */
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* SPでは常に横長ロゴを使う(縦積みのPC用ロゴは縦が大きすぎてスマホでは見づらいため) */
	.header__logo .custom-logo-link {
		display: none;
	}

	.header__logo-link--sp {
		display: block;
	}

	.header__logo .header__logo-sp {
		width: 216px;
		height: auto;
	}

	/* ハンバーガー表示 */
	.header__hamburger {
		display: block;
	}

	/* ナビゲーションをスライドメニュー化 */
	.header__nav {
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		width: min(80vw, 320px);
		height: 100vh;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		padding: 100px 32px 40px;
		background-color: #fff;
		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
		transition: transform 0.35s ease;
		overflow-y: auto;
	}

	.header__nav.is-active {
		transform: translateX(0);
	}

	.header__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
	}

	.header__list a {
		font-size: 16px;
		padding-bottom: 4px;
	}

	.header__nav-overlay {
		display: block;
	}

	/* SPではbody scroll固定用 */
	body.is-nav-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   Mega Menu（事務所について／取扱業務）※PCのみ対象。デザイン未確定のため最小限のCSS
   BEM: .header__item--mega（トリガー） / .sub-menu（WordPress標準クラスを流用）
   ========================================================================== */
@media (min-width: 901px) {

	/* position指定は無し。.header__list li { position: relative; } が
	   (セレクタの詳細度差で).header__item--mega自身にもそのまま適用されるため、
	   これがパネルの配置基準（containing block）になる */

	.header__item--mega > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0; /* 親メニューの文字の開始位置に左揃え */
		margin-top: 12px;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 32px 40px;
		list-style: none;
		min-width: 240px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		z-index: 1200;
	}

	.header__item--mega:hover > .sub-menu,
	.header__item--mega:focus-within > .sub-menu,
	.header__item--mega.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.header__item--mega > .sub-menu > li + li {
		margin-top: 24px;
	}

	.header__item--mega > .sub-menu > li > a {
		display: block;
		white-space: nowrap;
		color: #646364;
		text-decoration: none;
	}

	/* 子メニュー個別のhover下線：ホバーしたリンクだけに表示する
	   （親の下線制御とは独立。親側は:not(:has(.sub-menu :hover))で自動的に消える） */
	.header__item--mega > .sub-menu > li:hover > a::after {
		transform: scaleX(1);
	}
}

/* SP（900px以下）：ハンバーガーメニュー内にも子項目を常時展開表示する。
   項目数が2〜3件と少ないため、PC版のようなホバー開閉(is-open等)は使わず、
   親リンクの直下に常に表示したままにする（アコーディオン化はしない） */
@media (max-width: 900px) {
	.header__item--mega > .sub-menu {
		display: block;
		list-style: none;
		margin: 12px 0 0;
		padding-left: 1rem;
		border-left: 2px solid var(--color-border);
	}

	.header__item--mega > .sub-menu > li + li {
		margin-top: 12px;
	}

	.header__item--mega > .sub-menu > li > a {
		display: block;
		font-size: 14px;
		font-weight: 700;
		color: #646364;
	}
}
/* ============================================================
   4. FV（ファーストビュー）
   ============================================================ */

/* FVを画面全体（ヘッダー裏まで）に広げる */
.fv {
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* 背景画像 */
.fv__bg {
  display:block;
  width:100%;
  height:auto;
}

.fv__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;

      clip-path:polygon(
        0 0,
        0 0,
        0 100%,
        0 100%
    );
}

/* SVG共通 */
.fv__symbol{
  position: absolute;
  height: auto;
  opacity: .5;
}

/* PC/SPでSVGを差し替える(通常は--pcを表示、SPは--sp側に切り替える) */
.fv__symbol--sp {
  display: none;
}

/* 左下 */
.fv__symbol--bottom-left{
  width: var(--fv-symbol-left-width);
  top: var(--fv-symbol-left-top);
  left: 0;
}

/* 右上 */
.fv__symbol--top-right{
  width: var(--fv-symbol-right-width);
  top: var(--fv-symbol-right-top);
  right: 0;
}

/* キャッチコピー */

.fv__copy {
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.fv__copy-sub {
  font-family: var(--font-serif);
  /* PC(767px超)で1920px時32px→767px時26pxへなだらかに推移する一次式
     (1920/767の2点を通る)。--fv-copy-sub-sizeは--fs-feature-lgが参照している
     ため、ここでは触らずfont-sizeを直接指定する */
  font-size: calc(0.5204vw + 22.01px);
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

/* 「や。は全角の文字枠の中でインクが偏って描かれる(「は右寄り、。は左下寄り)ため、
   text-align:centerで数学的には中央揃えでも、目には行の重心がズレて見える。
   該当の文字だけをinline-blockにしてtranslateXで見た目を微調整する
   (transformなのでレイアウト自体には影響しない) */
.fv__copy-punct {
  display: inline-block;
}

.fv__copy-sub .fv__copy-punct {
  transform: translateX(-0.15em);
}

.fv__copy-main .fv__copy-punct {
  transform: translateX(0.15em);
}

.fv__copy-main {
  font-family: var(--font-serif);
  /* PC(767px超)で1920px時40px→767px時32pxへなだらかに推移する一次式
     (1920/767の2点を通る) */
  font-size: calc(0.6939vw + 26.68px);
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.fv__copy-sub,
.fv__copy-main {
  text-shadow: 0 0 8px rgba(87, 159, 212, 1);
}

/* SP：420*540基準の固定比率、コピー色/シャドウ/サイズを変更、装飾SVGをSP版に差し替え */
@media (max-width: 767px) {
  .fv {
    /* 高さ560px固定。幅は引き続き100vw(画面幅なり)で、767pxまでは
       幅だけが伸びる(高さに連動して伸びない) */
    height: 560px;
  }

  .fv__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .fv__symbol--pc {
    display: none;
  }

  .fv__symbol--sp {
    display: block;
    opacity: .65;
  }

  /* .fvの高さは560px固定(ビューポート幅に連動しない)。topをvwベースの式にすると
     幅が変わるたびに位置自体が上下にドリフトしてしまうため、topは420px基準時点
     (=fv実測値そのもの)の固定pxにし、widthだけ引き続きvwで可変にする
     (サイズ感だけ変わり、位置は動かない) */
  .fv__symbol--bottom-left {
    width: calc(150 / 420 * 100vw);
    left: 0;
    top: 77px;
  }

  .fv__symbol--top-right {
    width: calc(150 / 420 * 100vw);
    right: 0;
    top: 160px;
  }

  .fv__copy {
    top: 115px;
    transform: translateX(-50%);
  }

  .fv__copy-sub,
  .fv__copy-main {
    color: #48607a;
    text-shadow: 0 0 8px #fff;
    white-space: nowrap;
  }

  /* SP基準(420*540)のwidthに対する比率。420pxで上限に達し、それより広い
     767pxまでは上限で頭打ちのまま、それより狭い側だけなだらかに下限まで縮む */
  .fv__copy-sub {
    font-size: clamp(16px, calc(22 / 420 * 100vw), 22px);
  }

  .fv__copy-main {
    font-size: clamp(22px, calc(30 / 420 * 100vw), 30px);
  }
}


/* ============================================================
   5. FV内NEWSバー
   ============================================================ */

/* NEWSバーをFV下部に絶対配置で被せる */
.news-bar {
  position: absolute;
  bottom: clamp(18px, 1.56vw, 30px);
  left: 0;
  right: 0;
  z-index: 2;
  /* sectionとしての背景は不要。innerで色を持たせる */
}

.news-bar__inner {
  box-sizing: border-box;
  /* 幅 = 1130px(w1920基準)、ウィンドウ幅比例・最低850px */
  width: min(calc(100% - var(--header-inner-padding)), clamp(850px, calc(1130 / 1920 * 100vw), 1130px));

  margin-left: auto;
  margin-right: 0;

  display: flex;
  align-items: center;
  gap: var(--news-bar-gap);

  height: var(--news-bar-height);
  /* 左端の鋭角頂点(clip-pathの0% 100%)から文字までは固定80px、右側は従来通り可変 */
  padding: 0 var(--news-bar-padding-x) 0 80px;

  background: rgba(96,164,212,.5);
  color: var(--color-text);

  clip-path: polygon(40px 0%,100% 0%,100% 100%,0% 100%);
}

/* 1200px以下：SP切替(768px)へ近づくにつれ比率で縮小する。
   基準のclamp(850px,...)は768〜1200の範囲では常に850pxでフロアに達して
   しまい変化しないため、この区間だけ768px時650px→1200px時850pxで
   線形補間する専用の値に差し替える */
@media (max-width: 1200px) {
  .news-bar__inner {
    width: clamp(650px, calc(650px + (100vw - 768px) * 25 / 54), 850px);
  }
}

.news-bar__label {
  --news-font:clamp(13px,.83vw,16px);
  font-family: var(--font-serif);
  font-size: var(--news-font);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-white);
  padding: 0.15rem 0.6rem 0.15rem 0; /* 左paddingは無し。左端80pxはinner側で確保 */
  flex-shrink: 0;
  /* 長体(縦長)に見せる。.lawyer-intro__readmore-textと同じデザイン意図による圧縮 */
  transform: scaleX(0.75);
  transform-origin: left;
}

.news-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.news-bar__date {
  --news-small:clamp(11px,.73vw,14px);
  font-family: var(--font-serif);
  font-size: var(--news-small);
  white-space: nowrap;
  color: var(--color-white);
}

.news-bar__category {
  --news-small:clamp(11px,.73vw,14px);
  font-family: var(--font-serif);
  font-size: var(--news-small);
  line-height: 1.2;
  background: var(--color-white);
  padding: 0.1rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
  color: var(--color-blue);
}

.news-bar__title {
  --news-small:clamp(11px,.73vw,14px);
  font-family: var(--font-serif);
  font-size: var(--news-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-white);
  transition: color var(--transition-base);
}

.news-bar__title:hover {
  color: var(--color-blue);
}

@media (min-width: 768px) {
  /* 1920px時20pxを上限に、画面幅に比例して縮小する(下限18px) */
  .news-bar__label {
    font-size: clamp(18px, calc(20 / 1920 * 100vw), 20px);
  }

  /* 1920px時16pxを上限に、画面幅に比例して縮小する(下限14px) */
  .news-bar__date,
  .news-bar__category,
  .news-bar__title {
    font-size: clamp(14px, calc(16 / 1920 * 100vw), 16px);
  }
}

.news-bar__more {
  --size: var(--news-icon-size); /* ← アイコンサイズ */
  /* w1920で1600pxの共通コンテナ右端に揃える(以降はウィンドウ幅比例)。
     .news-bar__inner自体の右paddingがアイコンの外側に既にあるため、その分を差し引く。
     --container-max自体が1024pxでフロアに達するため、ウィンドウ幅が
     それを下回るとこの値が負になり、アイコンが画面外へ見切れてしまう。
     max(0px, ...)で下限を設け、それ以降はflexの自然な位置(常に可視)に留める */
  margin-right: max(0px, calc((100vw - var(--container-max)) / 2 - var(--news-bar-padding-x)));
  display: block;
  flex-shrink: 0;

  width: var(--size);
  aspect-ratio: 1;

  background-image: url("./assets/images/arrow-circle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.news-bar__more:hover {
  transform: translateX(4px);
  opacity: 0.8;
}

/* モバイル：画像のすぐ下に来る、全幅・斜めなしのシンプルな帯(オーバーレイではなく通常フロー) */
@media (max-width: 767px) {
  .news-bar {
    position: static;
  }

  .news-bar__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 48px;
    clip-path: none;
    padding: 0 20px;
    background: var(--color-blue);
  }

  /* 中央のitemを「日付+カテゴリ」の1段目、「タイトル」の2段目に分ける。
     titleにflex-basis:100%を持たせ、wrapさせることでDOM変更なしに2段組みにする */
  .news-bar__item {
    flex-wrap: wrap;
    row-gap: 3px;
    column-gap: var(--space-sm);
    /* 見た目上少し下がって見えるため、2px上にずらす */
    position: relative;
    top: -2px;
  }

  .news-bar__label {
    font-size: 18px;
  }

  .news-bar__date {
    font-size: 12px;
  }

  .news-bar__title {
    flex-basis: 100%;
    font-size: 14px;
    line-height: 0.9rem;
  }

  .news-bar__category {
    font-size: 11px;
    padding: 1.5px 12px;
  }

  .news-bar__more {
    margin-right: 0;
  }
}

/* ============================================================
   section-divider-bar（画面端で見切れる帯画像・複数セクションで使用）
   ============================================================ */
.section-divider-bar {
  overflow: hidden;
}

.section-divider-bar__symbol {
  /* 事務所の特徴セクションの左カラム(.features__lead)と重ならないよう上限を設ける。
     このバーは.features(ほぼ100vw)基準でright:0配置、.features__leadは中央寄せの
     .features__inner(max-width:--container-max)基準で左寄せのため、両者の座標系の
     差(50vw + --container-max/2)を計算に含めた上で、20pxの安全マージンを確保する */
  width: var(--features-bar-width);
}

/* section-divider-bar__symbol共通の土台。practice-panel__bg--personalと同じ考え方で、
   写真(section-divider-bar--bg.jpg)+薄い青トーンのレイヤーを重ね、
   clip-pathで元のbar-left/right.png相当の鋭角形状に切り抜く。
   高さは元画像の実寸比率(62/1312)で幅から自動算出するため、要素側は幅だけ指定すればよい */
.section-divider-bar__symbol {
  display: block;
  aspect-ratio: 1312 / 62;
  background-image:
    linear-gradient(rgba(210, 230, 243, 0.85), rgba(210, 230, 243, 0.85)),
    url("./assets/images/section-divider-bar--bg.jpg");
  background-position: center;
  background-size: 100% 100%, cover;
}

/* 元bar-right.png相当:左端が鋭角にカット(実測42px/高さ62pxのオフセット、
   高さ:幅比が62:1312で固定なので%指定のまま常に同じ角度になる) */
.section-divider-bar__symbol--cut-left {
  clip-path: polygon(3.372% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* 元bar-left.png相当:右端が鋭角にカット(左右反転) */
.section-divider-bar__symbol--cut-right {
  clip-path: polygon(0% 0%, 100% 0%, 96.628% 100%, 0% 100%);
}

.section-divider-bar--top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}

.section-divider-bar--bottom {
  display: flex;
  align-items: center;
  /* symbol(--features-bar-width)とreadmore(独立したclamp幅)は別々の式で
     幅が決まるため、単純に左詰め(flex-start)にすると合計幅がこのバー自体の
     右端(≒画面右端)に届かず、1150px以上で最大約28px右が空いてしまっていた。
     space-betweenで両端に強制的に揃える(gapは2つの間の最小間隔として残す) */
  justify-content: space-between;
  gap: 0.4rem;
}

@media (max-width: 900px) {
  .section-divider-bar--bottom {
    gap: 3.5rem;
  }
}


/* ============================================================
   7. 事務所の特徴
   ============================================================ */

.features {
  /* 共通ルール(padding-block: var(--space-xl))のpadding-topは、上バーとの距離計算を
     .features__grid側だけで完結させるため0で打ち消す(バー自体はposition:absoluteで
     padding-topの影響を受けないため、ここを0にしても上バーの位置は変わらない) */
  padding-top: 0;
  /* 下バー上端までの実際の見た目の余白(--features-section-bottom-gapのコメント参照) */
  padding-bottom: var(--features-section-bottom-gap);
  overflow-x: hidden;   /* hidden → overflow-x: hidden に変更 */
  position: relative;
  z-index: 1;
  /* .fv__bg下端からの距離をここで確保する(旧.missionの分の余白の名残)。
     .section-divider-bar--topはposition:absoluteでこのセクション自身の
     top:0を基準にしているため、.features__inner側ではなくこちらに
     margin-topを付けることで上バーごと一緒に押し下げる。
     見た目の余白としては80pxを狙う。767px超では.news-barがposition:absolute
     (fvに重なるだけ)なのでmargin-topがそのまま見た目の余白になる。
     w1920で140px、767px付近で80pxになるよう比率で縮小する
     (.features自体のPC/SPレイアウト切り替えは901px=グローバルナビと統一だが、
     .news-barの切り替えは767pxで別。900〜767pxの間はnews-barがまだ
     position:absoluteのままなので、この範囲は「PC側」の計算のまま扱う) */
  margin-top: clamp(80px, calc(140 / 1920 * 100vw), 140px);
}

.features__inner {
  position: relative;
  width: 100%;
}

@media (max-width: 767px) {
  /* 767px以下では.fvがheight:560pxに固定され、.news-bar(position:static、
     高さ60px)はその固定boxの下に付け足される形で、.fvの中身としては
     560pxを超えてはみ出す(.fvにoverflow:hiddenは無いため)。margin-topは
     .fvの固定box(560px)基準で計算されるため、そのまま80pxにすると
     news-barのはみ出し分(60px)を計算に入れられず、見た目の余白が
     80-60=20pxまで潰れてしまう。60px上乗せして140pxにすることで、
     news-bar実際の下端からの見た目の余白を80pxに保つ */
  .features {
    margin-top: 140px;
  }
}

/* 901px以上をPCレイアウトとする(グローバルナビのハンバーガー切り替え
   (900px)と揃える。以前は768pxで切り替えていたが、.features__grid自体の
   下限(旧640px)にビューポートが768〜900px付近で先に到達してしまい、
   ナビだけPC表示・特徴セクションはもう詰まっている、という帯域が
   生まれていたため統一した) */
@media (min-width: 901px) {
  .features__inner {
    display: flex;
    align-items: start;
    /* --features-right-bleed-reserveの半分だけ右にずらし、見た目上の
       lead左端〜card右端の余白を左右対称にする(詳細は変数側のコメント参照)。
       .features__inner自体はmargin-inline:autoで中央寄せされている
       (2.ユーティリティ共通ルール)ため、margin-leftで上書きすると中央寄せが
       壊れる。translateXなら中央寄せ後の位置から純粋に見た目だけずらせる */
    transform: translateX(calc(var(--features-right-bleed-reserve) / 2 - 14px));
  }

  .features__lead {
    flex: 0 0 var(--features-lead-width);
  }

  /* 「事務所の特徴」が.features__lead-width(901px付近では200px床)より
     広がって折り返すのを防ぐ。文字幅は実測で概ね6.9×font-sizeのため、
     余白を見込んで0.139倍(≒1/7.19)をコンテナ幅に掛けた値をfont-sizeとし、
     通常の--fs-section-titleを下回る場合のみそちらを優先する(=収まる時は
     見た目を変えず、収まらない時だけ小さくする) */
  .features__lead-heading {
    font-size: min(var(--fs-section-title), calc(var(--features-lead-width) * 0.139));
  }

  .features__grid {
    /* .features__innerの残り幅(=--container-max - --features-lead-width +
       --features-lead-overlap相当)をそのまま埋める。leadの幅が変わっても
       常に過不足なく追従するため、以前のような独立した式やJSでの
       実測補正(--feature-grid-shift)が不要になる。leadとは80px(w1920基準)
       重なる仕様のため、gapではなく負のmargin-leftで食い込ませる */
    flex: 1 1 auto;
    min-width: 0;
    margin-left: calc(-1 * var(--features-lead-overlap));
    /* 上バー→グレーの斜め線の上頂点(=.features__grid自体の上端)=100px(w1920基準)になるよう調整。
       バー自体の高さ(--features-bar-height)を加算する */
    margin-top: calc(var(--features-grid-top-target) + var(--features-bar-height));
    /* .feature-card--top-right/--bottom-rightは斜め位置合わせのtranslateXで
       右へはみ出す(top-rightは--feature-diagonal-offset分、最大でw1920基準181px)。
       このグリッド自身の右側にその分の余白を確保し、はみ出し先をグリッドの
       ボックス内(=コンテナの余白フロア到達後も安全)に収める。left側の
       カラム幅も同じだけ均等に縮むが、これは.feature-card--top-right自身の
       位置・オフセット量(=承認済みのカード内配置)には一切触れていない */
    padding-right: var(--features-right-bleed-reserve);
  }
}

/* ---------------------------
   左カラム: SVGサンドイッチ
   --------------------------- */

.features__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  /* .featuresのpadding-topを0にした分(64px)を打ち消し、見た目の位置は従来通りに保つ */
  margin-top: calc(clamp(-30px, -2.5521vw, -49px) + 64px);
}

/* .features__leadはalign-items:centerのため、指定がないとこのラッパーは
   shrink-to-fitでサイズが決まる。中のsvgのwidth:100%はその親(このラッパー)を
   基準にするため、ラッパー自身の幅がsvg依存では循環参照になり、ブラウザは
   置換要素のデフォルトサイズ(300px)にフォールバックしてしまう(結果、
   svgがmax-width:412pxまで拡大されず、実質300px固定になっていた)。
   ラッパーに親(--features-lead-width)基準の幅を明示し、循環を断ち切る */
.features__lead-svg {
  width: 100%;
}

.features__lead-svg svg {
  width: 100%;
  max-width: 412px;
  display: block;
}

/* 赤svg・見出し・青svgは元データ(Illustrator)では上から下にかけて少しずつ
   左へずれた段違い配置になっている(w1920でのX中心座標: 赤382 / 見出し345 / 青301)。
   赤svg・青svgはどちらも同じ幅(max-width:412pxで揃える。以前は青だけ76px幅を
   縮めて右端を合わせていたが、これは指示のない縮小だったため撤廃し、赤と
   同じ幅に戻す)。svg自体はwrapper内で左揃え(display:blockの既定)のため、
   中心を382/301に合わせるための移動量を、現在の自然な中心位置(赤386/青386、
   どちらもleadボックス左端に幅の半分を足した位置)からの差分として算出する。
   (901〜1920pxの間、w1920基準値に固定する実験や、w1920基準・比例縮小の
   vwクランプも試したが、どちらも--container-content-left(コンテナがフロアの
   1024pxに達すると約20pxまで一気に縮む)との兼ね合いで、はみ出し防止の
   max()ガードが広い範囲で介入し、3要素の段違い感がほぼ消えてしまっていた。
   「lead内の相対的な位置関係は変えたくない」という要望に合わせ、移動量を
   固定pxではなく--features-lead-width自体に対する比率(w1920で-4px/-55px/-85px
   ÷ 440px)として表現し直す。--features-lead-width自体は901pxまで滑らかに
   比例縮小するため、この比率を保ったまま自然に追従できる) */
/* 「SVGが1600pxからはみ出すのはよし」は、あくまで1600pxの文字安全ゾーンから
   はみ出してよいという意味であり、ビューポートの真の端(0px)を割ってよいという
   意味ではない(本プロジェクト開始時の明確なルール: 左右の余白は0にならない、
   svgもleft:0/right:0を下回らない)。そのため、はみ出し防止のmax()ガードは
   残す。ただし旧来はcontainer-content-leftだけを基準にしており、
   .features__inner自体に後から追加した右シフト(--features-right-bleed-reserve/2 - 14px、
   2点目=左右対称化のための調整)分の余裕を見込めておらず、必要以上に早く
   段違いを潰していた。floorの基準にこのシフト分も加えて、実際に使える
   余白ぴったりで判定する */
.features__lead-svg:not(.features__lead-svg--bottom) {
  transform: translateX(max(
    calc(var(--features-lead-width) * (-4 / 440)),
    calc(-1 * (var(--container-content-left) + var(--features-right-bleed-reserve) / 2 - 14px - 8px))
  ));
}

.features__lead-svg--bottom {
  transform: translateX(max(
    calc(var(--features-lead-width) * (-85 / 440)),
    calc(-1 * (var(--container-content-left) + var(--features-right-bleed-reserve) / 2 - 14px - 10px))
  ));
}

.features__lead-text-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.features__lead-heading {
  /* フォント関連は共通ユーティリティ（--fs-section-title）を継承 */
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  /* 中心座標を345(w1920)に合わせるため、.features__lead-text-wrapの
     center揃え(=lead中心400)からの差分(-55px)を--features-lead-widthに対する
     比率(-55/440)で表現し、lead内の相対位置関係を保ったまま追従させる。
     文字なので装飾(svg)より広めに安全余白(15px)を残す */
  transform: translateX(max(
    calc(var(--features-lead-width) * (-55 / 440)),
    calc(-1 * (var(--container-content-left) - 15px))
  ));
}

/* 万一まだ収まりきらない場合でも、改行位置を「事務所の／特徴」に固定する
   (各要素内では改行させず、2要素の間でのみ改行を許可する) */
.features__lead-heading-part {
  white-space: nowrap;
}

/* ---------------------------
   右カラム: 2×2グリッド＋斜線
   --------------------------- */

.features__grid {
  display: grid;
  /* 1frの暗黙のmin(auto)は「内容が縮められる幅」を無視して列を広げてしまい
     (blowout)、割り当て幅が内容の最小幅を下回る場面(狭いPC幅)でグリッド全体が
     コンテナ幅を超えて描画され、右側カードの文字がビューポート端からはみ出て
     いた。minmax(0, 1fr)にして列自身が0まで縮められるようにし、収まりきらない
     時はfeature-card-align.jsの行数チェック(左カラム)や通常の折り返しに委ねる */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  position: relative;
  /* min-height:280px固定だと、画面が狭まってもΔy(行間の縦距離)が縮まらず、
     35.5度に揃えるための斜めオフセット(feature-card-align.js)がカード幅(640px床)
     に対して相対的に大きくなりすぎ、右側カードが画面外にはみ出ていた。
     固定値をやめ、paddingベースの実コンテンツ高さでΔyも一緒に比例縮小させる */
  text-align: center;
}

.features__divider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.features__divider-inner {
  /* 幅=1125px(w1920基準)、ウィンドウ幅比例 */
  position: relative;
  width: min(1125px, calc(1125 / 1920 * 100vw));
  height: 100%;
}

.features__divider-line {
  position: absolute;
  background-color: #d0dce8;
}

.features__divider-line--h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  /* JSが計算する.features__divider-inner側の位置合わせとは別に、実際の見た目で
     微調整したいという要望(1470px時+33px、1050px時+23px)から、その2点を通る
     一次式で右へ追加でズラす。斜め線側より寛容な調整でよいとのことなので、
     こちらは単純な一次式のみで比例スケールは行わない */
  transform: translateX(calc(2.38095vw - 2px));
}

.features__divider-line--v {
  /* skewXで角度を直接指定するため、コンテナの縦横比に左右されず
     他の斜め要素(--panel-skew-angle)と厳密に同じ角度になる。
     微調整(1470px時-8px、1050px時-5px)はここではなく
     feature-card-align.js側のcorrectionX計算に組み込んである。
     ここでCSSのtranslateXとして足しても、JSが線の実測位置から
     目標位置へ強制的に再計算・上書きするため無効化されてしまう */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: center;
}

.feature-card {
  position: relative;
  z-index: 1;
  padding: var(--space-md);
  background-color: transparent;
}

/* ビジネス理解/迅速な対応は同じ高さ、問題解決力/安心して相談ができるは同じ高さ。
   4枚とも通常のグリッド項目に戻し、行内で位置が揃うようにする */
.feature-card--top-left,
.feature-card--top-right {
  /* 上バー→文字上端=125px。grid上端(=バー→100px)との差分をpadding-topにする */
  padding-top: calc(var(--features-card-top-text-target) - var(--features-grid-top-target));
  padding-bottom: var(--features-divider-gap-v);
}

.feature-card--bottom-left,
.feature-card--bottom-right {
  padding-top: var(--features-divider-gap-v);
  /* 下バー→文字下端=198px。grid下端(=バー→124px)との差分をpadding-bottomにする */
  padding-bottom: calc(var(--features-card-bottom-text-target) - var(--features-grid-bottom-target));
}

/* 斜め線をSVG(preserveAspectRatio=none)からskewXベースに変更した際、線の実際の
   角度が変わった。見出し(feature-card__heading)はtext-align:centerで文字数に
   応じて幅が変わるため、線とのギャップだけを基準に揃えると、写真(帯)の左端から
   見出しまでの余白が不自然に大きくなってしまう(特にleft側)。写真の左端から
   見出しまでの余白を50px前後に揃えることを優先してcalibrationした値
   (w1920基準。right側は前回の見出し-線ギャップ均等化(74px/-79px)のままで
   問題なかったためleft側のみ再修正。旧値: 30px/60px/-50px/-40px →
   65px/55px/-129px/-139px → 84px/74px/-69px/-79px → 今回) */
/* .features__gridの行高さはgrid-template-rows:auto autoと固定min-height(280px)の
   組み合わせで決まり、ビューポート幅に単純比例しない。そのため上段/下段間の
   斜め線用オフセット(w1920基準181px = tan(35.5deg)×実測Δy254.39px)は
   固定clamp()では追従できず、feature-card-align.js が読み込み後・リサイズ時に
   実際のΔyを測ってtan(35.5deg)×Δyを--feature-diagonal-offsetへ書き込む
   (このプロパティ未定義時のフォールバックはw1920基準181pxの比例値)。
   写真の左端から見出しまでの余白(下段の基準値、-67px/-93px)は純粋な水平方向の
   ギャップなのでこの問題を受けず、通常通りclamp()で比例縮小する */
.feature-card--top-left {
  /* --feature-left-extra-shift: 左カラムの本文(feature-card__text)が
     斜め線と重なる場合に、feature-card-align.jsが実測して追加で左へ
     ずらす分(通常時は0)。top/bottomとも同じ量を足すことで斜めの角度は変えない */
  transform: translateX(calc(clamp(-67px, calc(-67 / 1920 * 100vw), -26.8px) + var(--feature-diagonal-offset, clamp(72.4px, calc(181 / 1920 * 100vw), 181px)) + var(--feature-left-extra-shift, 0px)));
  padding-right: var(--features-divider-gap-h);
  /* --feature-left-text-widen: 本文が3行になってしまう場合に、feature-card-align.jsが
     左側の余白を削って本文の折り返し幅を広げる(通常時は0)。右端(padding-right)は
     斜め線とのクリアランスに関わるため変えず、左側だけ詰める */
  padding-left: max(0px, calc(var(--space-md) - var(--feature-left-text-widen, 0px)));
}

.feature-card--top-right {
  transform: translateX(calc(clamp(-93px, calc(-93 / 1920 * 100vw), -37.2px) + var(--feature-diagonal-offset, clamp(72.4px, calc(181 / 1920 * 100vw), 181px))));
  padding-left: var(--features-divider-gap-h);
}

.feature-card--bottom-left {
  transform: translateX(calc(clamp(-67px, calc(-67 / 1920 * 100vw), -26.8px) + var(--feature-left-extra-shift, 0px)));
  padding-right: var(--features-divider-gap-h);
  padding-left: max(0px, calc(var(--space-md) - var(--feature-left-text-widen, 0px)));
}

.feature-card--bottom-right {
  transform: translateX(clamp(-93px, calc(-93 / 1920 * 100vw), -37.2px));
  padding-left: var(--features-divider-gap-h);
}

.feature-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-feature-lg); /* 14Q */
  font-weight: 700;
  color: #48607a;
  position: relative;
  display: inline-block;
}

/* 見出し下の黄色い装飾SVG(front-page.phpの$accent_svg)。widthを指定しないと
   デフォルトの置換要素サイズ計算でカード幅いっぱいに広がってしまう。
   w1920で515pxを上限にし、それ未満の画面幅では比率でそのまま比例縮小する */
.feature-card > svg {
  /* デフォルトはinline相当のため、直前のfeature-card__heading(inline-block)と
     同じ行に横並びになってしまっていた。見出しの下に来るよう改行させ、
     widthを持たない状態でも中央に来るようmargin-inline:autoで揃える */
  display: block;
  /* 100%を上限に追加。これがないとカード幅がこのsvgの想定幅(w1920で515px比例)
     より狭くなった時にsvgの方が広くなり、margin-inline:autoが両側とも0に
     解決されて右側だけにはみ出していた(over-constrainedな auto margin の挙動) */
  width: min(515px, calc(515 / 1920 * 100vw), 100%);
  margin-inline: auto;
  padding-top: 1rem;
  padding-bottom: 0.6rem;
}

.feature-card__text {
  /* PC(901px〜、SPはdisplay:noneのためこの値は使われない)で
     14px〜17pxの間を画面幅に応じて推移させる。基準点は1500px(以前は1200px)。
     本文が最も長い「ビジネス理解」カード(top-right)が、1200px基準では
     1500〜1200px付近でカード幅の縮小に文字サイズが追従できず3〜4行に
     折り返してしまい、行数が増えるたびに行の高さ(≒Δy)が段階的にジャンプ
     して斜めオフセット(feature-card-align.js)や見た目の余白が不連続に
     揺れる原因になっていた。基準点を1500pxに早めることで、901〜1920px
     全域で4カードとも常に2行に収まるようにする */
  font-size: clamp(14px, calc(17 / 1500 * 100vw), 17px);
  color: #646364; /* TOPページのグレー文字統一 */
  line-height: 1.8;
  margin-top: 0.5rem;
  /* 見出し・ポリゴンはカード中央のまま、本文だけそこから少し左へずらして
     カード内にも斜めの配置を作る(Illustratorデータ準拠、w1920で-30px)。
     4カードとも同じ量・同じ向きで揃える */
  transform: translateX(clamp(-30px, calc(-30 / 1920 * 100vw), -12px));
}

/* 事務所の特徴: Read moreボタン
   枠線のみの平行四辺形(中は透明)。左辺が斜め、右辺は直線(縦の縁取りはない。
   上下の枠線がそのまま右端まで伸び、overflow:hiddenで切れているだけ)。
   幅・高さは元のfeatures__readmore.svg実寸をw1920基準のvw比率でそのまま再現する
   (width:clamp(280px,33.9583vw,652px)、height:clamp(26.42px,3.2039vw,61.55px) は
   元のwidth:clamp(...)+aspect-ratio:287.17/27.1から算出した値と厳密に一致)。
   通常のウィンドウ幅変化ではこの値のみで決まり、常に元デザイン通りに比例縮小する。
   OS側で文字サイズが拡大された場合のみ、コンテンツが収まりきらない時の保険として
   min-width/heightをこの値未満にならないようにしつつ、必要なら中身に合わせて広がる
   (通常時は影響しない)。斜辺のオフセットはtan(--panel-skew-angle)×高さで算出するため、
   高さがどちらの理由で変化しても角度は常に一定に保たれる */
.features__readmore {
  --readmore-h: max(clamp(26.42px, 3.2039vw, 61.55px), calc(1lh + 0.4em));
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--readmore-h);
  min-width: clamp(280px, 33.9583vw, 652px);
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity var(--transition-base);
}

.features__readmore:hover {
  opacity: 0.8;
}

.features__readmore::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--readmore-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
  border-top: calc(var(--readmore-h) * 0.0568) solid var(--color-blue); /* 元svgの枠線太さ比率(高さの5.68%) */
  border-bottom: calc(var(--readmore-h) * 0.0568) solid var(--color-blue);
  /* skewXで見た目の(斜辺に垂直な)太さがcos(角度)倍に圧縮されるため、
     top/bottomと同じ見た目の太さになるよう事前に/cos(角度)で太くしておく */
  border-left: calc(var(--readmore-h) * 0.0568 / cos(var(--panel-skew-angle))) solid var(--color-blue);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

.features__readmore-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-blue);
  white-space: nowrap;
  margin-left: 50px; /* 鋭角頂点から文字まで固定50px(以前の指定通り) */
  transform: scaleX(0.75); /* デザイン意図による圧縮。維持する */
  transform-origin: center;
}

/* PCにはないSP専用の要約文。デザイン画像通りの改行はmission同様<br>で対応 */
.features__summary {
  display: none;
}

.features__summary-break {
  display: none;
}

/* ============================================================
   事務所の特徴: SPレイアウト(デザイン画像 _SP_mission_.feature.jpg 準拠、まだ仮)
   ============================================================ */
@media (max-width: 900px) {
  .features {
    padding-bottom: 0;
  }

  .features__inner {
    display: block;
  }

  /* 中央寄せの実際の原因はこちら(.features__lead自身のalign-items:center)だった。
     PCでは横幅の狭いflex列内で中央寄せしていたため左寄りに見えていたが、
     SPでは.features__leadが全幅になり、align-items:centerがそのまま画面中央寄せに
     なってしまっていた。flex-startに変更して左揃えにする */
  .features__lead {
    margin-top: 0;
    align-items: flex-start;
  }

  /* デザイン画像では見出し脇の赤/青のシェブロンは無く、右の帯だけが残る */
  .features__lead-svg {
    display: none;
  }

  /* 「事務所の特徴」見出し横のバー。見出しのfont-sizeは--fs-section-titleのclampが
     SP全域(320〜767px)で下限32pxに張り付くため、幅は画面幅に関わらず一定になる。
     そのため見出し右端からの15pxの余白は固定pxで直接指定できる
     (20px:コンテナ左padding、221px:32px時の「事務所の特徴」の実測幅、15px:指定の余白) */
  .section-divider-bar--top {
    left: 256px; /* 20 + 221 + 15 */
    right: 0;
    /* 見出し(48px)とバー(20px)の高さの差の半分(14px)だけ下にずらし、
       見出しテキストと縦中央を揃える */
    top: 14px;
  }

  .section-divider-bar--top .section-divider-bar__symbol {
    width: 100%;
    height: 20px;
    aspect-ratio: auto;
    /* 高さ20px・共通の--panel-skew-angleから斜辺のオフセットを算出(幅に対する
       アスペクト比固定ではなくなったため、%ではなくcalcで直接pxを指定する) */
    clip-path: polygon(
      calc(tan(var(--panel-skew-angle)) * 20px) 0%,
      100% 0%,
      100% 100%,
      0% 100%
    );
  }

  /* 「親ボックス」= 4枚分の座標系そのもの。420px基準の座標を全てvw(420分の1)の
     比率に変換し、画面幅が変わっても配置(比率)は変わらないようにする。
     高さは中身(子ボックス2段+隙間3px)から逆算した固定値 */
  .features__grid {
    /* PC用のgrid/min-height(280px)をリセットし、position:absoluteの
       子ボックスだけで高さが決まるようにする */
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
    min-height: 0;
    container-type: inline-size;
    position: relative;
    height: 19.543cqw; /* (39.54*2 + 3) / 420 * 100 */
    margin-top: var(--space-lg);
    /* 中の4枚の見出し(文字サイズ固定16px・アンカー位置とも全てこの要素の
       cqwベース)は、コンテナ幅が縮み続けるとある地点で文字がボックスから
       はみ出し隣のカードと衝突する。個々の子要素に対処するのではなく、
       このコンテナ自体の幅を「viewport 440px時点の実測値(=400px)」で
       下げ止まらせることで、中のcqw基準の値を全てそこで一括して凍結する。
       画面がそれ以上狭まった場合は、左右の余白(.features__innerのpadding分)
       だけが削れていき、グリッド自体は画面中央に固定サイズのまま留まる。
       ---
       widthがcontaining blockより広い(はみ出す)場合、CSS仕様上
       margin-inline:autoは中央寄せに使えない(auto marginがまず0に確定し、
       残りのはみ出し分は右側だけに一方的に乗る)。position:relativeは
       既にposition:absoluteの子要素の基準として設定済みのため、それを
       利用したleft:50%+transform:translateX(-50%)の手法(要素が
       containing blockより広い場合の定番の中央寄せ)で、確実に左右均等に
       はみ出させる */
    width: max(400px, 100%);
    left: 53%;
    transform: translateX(-50%);
  }

  /* PC用のグレーの十字区切り線は使わず、カードごとの赤い斜め線に置き換える */
  .features__divider {
    display: none;
  }

  .feature-card,
  .feature-card--top-left,
  .feature-card--top-right,
  .feature-card--bottom-left,
  .feature-card--bottom-right {
    position: static;
    padding: 0;
    transform: none;
  }

  /* polygonアクセントSVGと本文(feature-card__text)は非表示、見出しのみ表示 */
  .feature-card > svg,
  .feature-card__text {
    display: none;
  }

  /* 「子ボックス」= feature-card__heading-SP.svg(viewBox 148.77x39.54)実物。
     幅・高さとも420px基準からvwへ変換した比率で、.features__grid(親ボックス)
     に対してposition:absoluteで配置する */
  .feature-card__heading {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    width: 35.421cqw; /* 148.77/420*100 */
    aspect-ratio: 148.77 / 39.54;
    /* 「孫ボックス」(120x38、子ボックスに対して右揃え)ぶんの余白を左に確保。
       子ボックス幅148.77のうち、孫ボックスの右揃えで空く左側の幅(148.77-120=28.77)を
       同じく比率に変換 */
    padding-left: 6.85cqw; /* 28.77/420*100 */
    white-space: nowrap;
    background-image: url("./assets/images/feature-card__heading-SP.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
  }

  .feature-card__heading::after,
  .feature-card__heading::before {
    display: none;
  }

  /* 見た目の象限とPCクラス名が一致するよう、top-right/bottom-leftの
     座標値を入れ替え済み(以前はorderの入れ替え前の名残でズレていた) */
  .feature-card--top-left .feature-card__heading {
    top: 0;
    left: 15.238cqw; /* 64/420*100 */
  }

  .feature-card--top-right .feature-card__heading {
    top: 0;
    right: 12.857cqw; /* 54/420*100 */
  }

  .feature-card--bottom-left .feature-card__heading {
    top: 10.129cqw; /* (39.54+3)/420*100 */
    left: 8.095cqw; /* 34/420*100 */
  }

  .feature-card--bottom-right .feature-card__heading {
    top: 10.129cqw;
    right: 19.762cqw; /* 83/420*100 */
  }

  .features__summary {
    display: block;
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--fs-feature-text);
    color: #646364;
    line-height: 1.8;
  }

  .features__summary-break {
    display: block;
  }

  /* features下バー：READ MOREボタンを上に、その下に斜めカット無しの全幅バーを配置 */
  .section-divider-bar--bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .section-divider-bar--bottom .features__readmore {
    order: 1;
  }

  .section-divider-bar--bottom .section-divider-bar__symbol {
    order: 2;
    display: block;
    width: 100%;
    height: 20px;
    aspect-ratio: auto;
    clip-path: none;
  }

  /* READ MOREボタン：他のREAD MORE等と同じ、枠線+skewXの平行四辺形(左右の斜辺が
     同じ向きに傾く)。角度は共通の--panel-skew-angleを維持。テキストは::beforeとは
     別の兄弟要素なのでskewの影響を受けず、常に水平のまま中央に表示される。
     PC版は左辺が斜め・右辺が直線の非対称な平行四辺形だが、SPはテキスト中央揃えに
     合わせて左右対称(=普通の平行四辺形)にする */
  .features__readmore {
    --readmore-h: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 253px;
    /* .features__readmoreはflexアイテムなので、デフォルトのmin-width:auto
       (中身のテキスト+paddingぶん)がwidth指定より優先されてしまう。
       0にして明示的なwidth:253pxを効かせる */
    min-width: 0;
    margin-inline: auto;
    padding-inline: calc(tan(var(--panel-skew-angle)) * var(--readmore-h) + 16px);
    overflow: visible;
    /* ::beforeはtransform-origin:topでskewXしているため、下辺だけ
       tan(angle)*高さ分左にずれる。文字とボックス自体は中央揃えのままなので、
       平行四辺形の見た目上の中心が左に寄って見える。ボタン全体(文字+枠)を
       その半分だけ右にずらし、全幅に対する視覚上の中心を合わせる */
    transform: translateX(calc(tan(var(--panel-skew-angle)) * var(--readmore-h) / 2));
  }

  /* SP画面はborder+skewXの閉じた平行四辺形(::before)にする(PCとは別デザイン) */
  .features__readmore::before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: calc(var(--readmore-h) * 0.0568) solid var(--color-blue);
    background-color: transparent;
    clip-path: none;
    transform: skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: top;
  }

  .features__readmore::after {
    display: none;
  }

  .features__readmore-text {
    margin-left: 0;
    /* テキストはbox中央(justify-content:center)に来るが、平行四辺形はtransform-origin:top
       のskewXで下辺だけ左にずれているため、テキストの高さ(box中央=中間の高さ)での
       図形の実際の中心はbox中央よりも左にある。その分だけテキストを左にずらして揃える。
       PC版のscaleX(0.75)(デザイン維持)はそのまま残し、translateXを先に書くことで
       移動量がscaleXの影響(0.75倍)を受けないようにする */
    transform: translateX(calc(tan(var(--panel-skew-angle)) * var(--readmore-h) / -2)) scaleX(0.75);
  }
}

/* 上の@media(max-width:767px)より後ろに置き、同じ詳細度でもこちらを
   確実に優先させる(767px以下ではmargin-topをこちらの2remで上書きする) */
@media (max-width: 900px) {
  .features__summary {
    margin-top: 2rem;
    margin-bottom: 2.4rem;
  }
}

/* ============================================================
   8. 取扱業務
   ============================================================ */

/* セクション下端の余白。.consultationのpadding-top+.consultation__innerの
   padding-topと同じ幅にしたいという要望のため、両者と全く同じ式を
   足し合わせる(値を直接コピーするのではなく式を共有することで、
   どちらかの値が変わっても連動してズレない) */
.practice-panels {
  /* このセクション末尾(.consultation__cta)の下端→次セクション(.lawyer-intro)
     上端までの間隔。.practice-panels__heading側のmargin-topと共有し、
     「セクション開始前の間隔」と「セクション終了後の間隔」を常に同じ式で揃える */
  --practice-panels-gap: calc(
    clamp(38.4px, calc(64 / 1920 * 100vw), 64px) +
    clamp(24px, calc(40 / 1920 * 100vw), 40px)
  );
  padding-bottom: var(--practice-panels-gap);
}

/* このセクション固有の余白（見出し自体の見た目は共通ユーティリティ側で定義） */
.practice-panels__heading {
  /* .consultation__heading/.access__heading等は.consultation__inner/.access__inner
     (padding-inline: var(--container-pad))の中にあるため、下線(::after)の
     max-width:90%はセクション幅-40pxを基準に計算される。.practice-panels__heading
     はセクション直下にラッパー無しで置かれているため、同じ基準に揃うよう
     ボックス幅自体を40px狭めて中央寄せする(テキスト自体はtext-align:centerで
     左右対称に狭めるため見た目の位置は変わらない) */
  width: calc(100% - 2 * var(--container-pad));
  margin-inline: auto;
  /* features下バー→見出し上端の間隔を、このセクション終了後の「見た目の」間隔
     (.consultation__cta下端→.lawyer-intro__banner写真上端)と揃える式を基準に、
     その85%にする。.practice-panels__stage自体にも見出し上に若干の余白が
     あり、基準の間隔を100%そのまま適用すると全体としては想定より広く
     見えたため、目安として85%に詰めた(厳密な計算式は不要とのこと) */
  margin-top: calc(0.85 * (
    var(--practice-panels-gap) +
    clamp(99px, calc(165 / 1920 * 100vw), 165px)
  ));
  /* 下線→.practice-panel__title--corp(赤いSVG見出し)上端の間隔 = 66px(w1920基準、
     元33pxの2倍)、最低40px(元20pxの2倍)を確保。title--corpのtop:24.19%由来の
     可変オフセット(w1920で約246px)を打ち消してから、目標ギャップ分だけ重ねる */
  margin-bottom: calc(clamp(40px, calc(66 / 1920 * 100vw), 66px) - min(calc(246 / 1920 * 100vw), 246px));
}

/* /practice/ページ(page.php、.pageクラスの中)では、TOPページ用に計算された
   margin-topがそのまま乗ると、共通FVの直後にさらに余白ができて空きすぎる。
   TOPページ側(.site-main内)はそのままに、.page内でのみ打ち消す */
.page .practice-panels__heading {
  margin-top: 0;
}

/* /access/ページも同じ理由でmargin-topを打ち消す(.access自体は
   .consultationセクションからの距離用にmargin-topを持っているため) */
.page .access {
  margin-top: 0;
}

/* /practice/ページ単体表示時、見出しとの間・セクション直後(お問い合わせCTA/フッター)との
   間、両方に同じだけ余白を確保。w1920基準50pxで、縮小時は比例して小さくなるよう
   clamp()で下限20pxまで許容する */
.page .practice-panels__stage {
  margin-top: clamp(20px, calc(50 / 1920 * 100vw), 50px);
  margin-bottom: clamp(20px, calc(50 / 1920 * 100vw), 50px);
}


/* 画面幅いっぱいにブリードさせつつ中央に固定。
   以前はmax-width:1920pxで頭打ちにしていたが、写真はbackground-size:coverで
   十分な解像度があり、色付きの帯やshapeもCSSのpolygon(clip-path)描画のため、
   1920pxを超える幅でも常に画面端(0)まで伸ばして問題ない */
.practice-panels__breakout {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* ステージ：1920×1017のアスペクト比を固定し、以降は全て%配置 */
.practice-panels__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1017;
}

/* ------------------------------------------------------------
   背景写真 + 薄い青レイヤー（CSSレイヤー方式）
   写真(2400×1200のJPG、斜めカット・青トーンとも焼き込みなし)をbackground-imageで
   敷き、その上に半透明の青(#d2e6f3, 85%)をlinear-gradientの2色ベタ塗りレイヤーとして
   重ねる（background-imageは先に書いた方が上のレイヤーになるため）。
   幅・高さ・上下左右位置は既存の.practice-panels__stageサイズ指定(w1920基準、
   アスペクト比固定でvwに比例)をそのまま踏襲する。
   法人bg: 幅60.57%・高さ52.60% / 個人bg: 幅62.60%・高さ52.70%

   斜めカットの角度について：
   タイトル/READ MOREバナー等の共通--panel-skew-angle(35.5deg)ではなく、
   .practice-panel__shape(白い平行四辺形)の斜辺と厳密に同じ傾きに合わせる。
   bgはshapeより一回り大きく配置されているため(既存のtop/left/width/heightの差分)、
   斜辺の傾きさえshapeと一致させれば、白いshapeの背後から青みがかった写真が
   均一幅の縁(フチ)のように見える。傾きがずれると、上下で縁の幅が不揃いになり
   斜めがずれて見えてしまう。
   ------------------------------------------------------------ */
.practice-panel__bg {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat, no-repeat;
  /* 上のレイヤー(青トーン)はボックス全面、下のレイヤー(写真)はcoverでクロップ */
  background-size: 100% 100%, cover;
}

.practice-panel__bg--corp {
  /* 100vw+transform:translateX(-50%)のセンタリングはサブピクセル誤差が出ることがあり、
     ブラウザの縮小表示（75%以下のズーム等）で左端に隙間が生じる場合がある。
     breakout側のoverflow:hiddenで隠れる分だけ左に大きめにはみ出させて隙間を常にカバーする
     (はみ出し量を増やしても右端の位置はleft/widthの差分で不変。斜辺のクリップ位置に
     数px程度の誤差が出るが、はみ出し量に対して十分小さく見た目に影響しない)。 */
  left: -16px;
  top: 29.79%;    /* ← ここを大きくすると下に下がる */
  width: calc(60.57% + 16px);
  height: 52.60%; /* ← 画像自体の縦幅 */
  /* .practice-panel__shape--corpの右斜辺(隣接するpersonal側)の傾きと厳密に一致させるための係数。
     傾き(shape右辺の実測値: 水平37.1%(=100%-62.9%)×幅949.06px÷高さ504.95px(49.66%×1017)=0.69722)
     × 高さ比率52.60% × stageのheight/width比(1017/1920)。
     widthに+16pxの固定はみ出し(下記コメント参照)があり、自身の%を基準にすると
     ウィンドウ幅によって斜辺の傾きが微妙にずれてしまうため、後述のclip-pathでは
     この係数を100vw(.practice-panels__breakoutの実幅と一致、1920pxで頭打ちに
     しない)に直接掛けて絶対量として斜辺を算出し、常にshapeと同じ傾きになる
     ようにしている。shape側を変更したら、この値も更新すること */
  --practice-bg-diag-corp: 0.194257;
  background-image:
    linear-gradient(rgba(210, 230, 243, 0.85), rgba(210, 230, 243, 0.85)),
    var(--panel-bg-photo-corp);
  /* 通常時：右端を基準点に固定し、幅が変わっても写真は左方向にのみ伸縮する
     (中央の斜めの継ぎ目の見た目が動かない)。トリミング焦点は仮に中央基準。
     後日の位置調整はこの変数の値を変えるだけでよい */
  --panel-bg-position-corp: right center;
  background-position: center, var(--panel-bg-position-corp);
  /* 右辺のみ斜めにカット。傾きは.practice-panel__shape--corpの右斜辺と厳密に一致させる
     (このボックスは高さがコンテンツに左右されないため、傾きが変わる状況は発生しない) */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(100% - var(--practice-bg-diag-corp) * 100vw) 100%,
    0% 100%
  );
}

.practice-panel__bg--personal {
  left: 37.40%;
  top: 47.30%;
  width: 62.60%;
  height: 52.70%;
  /* .practice-panel__shape--personalの左斜辺(隣接するcorp側)の傾きと厳密に一致させるための係数。
     傾き(shape左辺の実測値: 水平31.55%×幅1103.04px÷高さ504.95px(49.66%×1017)=0.68932)
     × 高さ比率52.70% × stageのheight/width比(1017/1920)。
     corp側と同じ理由で100vw(1920pxで頭打ちにしない)に直接掛けて絶対量として
     斜辺を算出する(personal自体には固定px幅のはみ出しはないが、統一のため
     同じ方式にしている)。shape側を変更したら、この値も更新すること */
  --practice-bg-diag-personal: 0.192444;
  background-image:
    linear-gradient(rgba(210, 230, 243, 0.85), rgba(210, 230, 243, 0.85)),
    var(--panel-bg-photo-personal);
  /* 通常時：左端を基準点に固定し、幅が変わっても写真は右方向にのみ伸縮する */
  --panel-bg-position-personal: left center;
  background-position: center, var(--panel-bg-position-personal);
  /* 左辺のみ斜めにカット。傾きは.practice-panel__shape--personalの左斜辺と厳密に一致させる。
     0.57%は隣接パネルとの隙間をcorp側と揃えるための微調整オフセット(以前の指定通り、
     傾き計算とは独立の固定値) */
  clip-path: polygon(
    calc(0.57% + var(--practice-bg-diag-personal) * 100vw) 0%,
    100% 0%,
    100% 100%,
    0.57% 100%
  );
}

/* ------------------------------------------------------------
   白い平行四辺形（コンテンツ枠）
   ------------------------------------------------------------ */
.practice-panel__shape {
  position: absolute;
  z-index: 2;
  background-color: var(--color-white);
}

.practice-panel__shape--corp {
  left: 9.27%;
  /* bg--corp(top:29.79% / height:52.60%)の縦中央(56.09%)に合わせて配置 */
  top: 31.26%;
  width: 49.43%;
  height: 49.66%; /* personalと高さを揃える */
  clip-path: polygon(37.7% 0%, 100% 0%, 62.9% 100%, 0% 100%);
}

.practice-panel__shape--personal {
  left: 39.69%;
  top: 48.77%;
  width: 57.45%;
  height: 49.66%;
  clip-path: polygon(31.55% 0%, 100% 0%, 68.45% 100%, 0% 100%);
}

/* リストは白パネルのうち、タイトル〜READ MOREの間の帯に収める */
.practice-panel__list-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  /* --stagger-step(下の.practice-panel__list)側でも同じ値を参照する。
     ここで一括管理することで、line-heightを変えても斜辺への追従角度が
     ずれないようにする */
  --practice-item-line-height: 1.8;
  line-height: var(--practice-item-line-height);
}

.practice-panel__list-wrap--corp {
  /* 斜辺から.practice-panel__item::beforeまでが1920px基準で74pxになるよう
     実測(994px幅で-9px)から逆算して調整(旧14%) */
  left: 26.03%;
  right: 16%;
  top: 8%;
  bottom: 10%;
}

.practice-panel__list-wrap--personal {
  /* 斜辺から.practice-panel__item::beforeまでが1920px基準で74pxになるよう
     実測(994px幅で15px)から逆算して調整(旧14.27%) */
  left: 19.38%;
  right: 18%;
  top: 6%;
  bottom: 10%;
}

/* PC幅(901px以上)のみ、法人側(5行)を1.4〜1.7の範囲で詰める。
   900px時1.4、1920px時1.7で比例。personal側(4行)はデフォルトの1.8のまま */
@media (min-width: 901px) {
  .practice-panel__list-wrap--corp {
    --practice-item-line-height: clamp(1.4, calc(1.4 + (100vw - 900px) / 1020px * 0.3), 1.7);
  }
}

.practice-panel__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 20%;
  /* 行ごとのずらし幅 = 1行の高さ(line-height + gap:0.5rem) × 斜辺の傾き比率。
     .practice-panel__shapeのclip-path左斜辺(corp:37.7%→0%/height49.66%, personal:31.55%→0%/height49.66%)
     から算出した傾き(corp≒0.71, personal≒0.69)の平均値0.70を採用。
     line-heightは.practice-panel__list-wrap側の--practice-item-line-height
     (無次元の数値)をemに変換して使うことで、line-heightを変えても
     斜辺への追従角度がずれないようにする */
  --stagger-step: calc((var(--practice-item-line-height) * 1em + 0.5rem) * 0.70);
}

.practice-panel__item {
  font-size: var(--fs-practice-item); /* 13Q */
  color: #48607a;
  font-weight: 500;
  padding-left: 1rem;
  position: relative;
  /* 意図しない位置での折り返しを禁止する。文字サイズ自体がclamp()で画面幅に
     比例して縮む(下のmin-width:650px、およびSP側のfont-size指定)ため、
     結果として1行に収まりきる分だけ文字が詰まって見える */
  white-space: nowrap;
  /* モバイルブラウザの「テキスト自動拡大」機能が、狭い列内の文字サイズを
     独自に拡大してしまうのを防ぐ(font-sizeで細かく調整した見た目が
     OS/ブラウザ側の判断で崩れないようにする) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* デスクトップ表示のみ17px〜28pxで可変(SPは--fs-practice-itemの
   従来通りの値を使用)。1.4583vwは--fs-feature-lgと同じ係数を流用
   (1920px時に28pxちょうどになる)。PC配置を650pxまで広げたのに合わせる */
@media (min-width: 650px) {
  :root {
    /* .practice-panel__title(法人/個人のお客様へ)はこの1.1倍のサイズにする
       (Illustrator実測: itemがh30px、titleがh33px → 33/30=1.1倍)。
       .practice-panel__itemと.practice-panel__titleはDOM上兄弟関係にないため、
       :rootに置いてどちらからも参照できるようにする */
    --practice-item-fs: clamp(17px, 1.4583vw, 28px);
  }

  .practice-panel__item {
    font-size: var(--practice-item-fs);
  }
}

/* 767px以下(SP)は1remのまま、768px以上(PC)は1.3remにする */
@media (min-width: 768px) {
  .practice-panel__item {
    padding-left: 1.3rem;
  }
}

@media (min-width: 650px) {
  /* .practice-panel__readmore自体のfont-size(--fs-xs、--readmore-hの
     1lh計算にも使われる)とは切り離し、文字サイズだけ独立して指定する。
     基準点を1200pxにすることで1200px以上は20pxで頭打ちのまま保ち、
     768〜1200pxの間だけなだらかに17pxまで下がるようにする
     (.feature-card__textと同じ考え方) */
  .practice-panel__readmore span {
    font-size: clamp(17px, calc(20 / 1200 * 100vw), 20px);
  }
}

/* .practice-panel__title自体のfont-size(--title-hの1lh計算に使われ、
   バナーの高さ・斜辺の基準になる)とは切り離し、文字サイズだけ独立して指定する。
   1920px時25px、1400px時22pxを通る直線(2点間の傾き)で、20px前後で
   頭打ちにならず1400px以降もなだらかに上がり続けるようにする
   (901px時点で約18.3px。それ未満はclampの下限18pxで止まる)。
   レイアウトの切り替え自体が900px(縦積み⇔横並び)のため、
   このPC専用フォントサイズも同じ900pxに揃える(以前は650pxのままズレていた) */
@media (min-width: 901px) {
  .practice-panel__title span {
    font-size: clamp(18px, calc(0.577 * 1vw + 13.9px), 25px);
  }
}

/* 650px〜767pxは、上のclamp()が1166px付近までずっと17pxの下限に
   張り付くため、この帯だけ列の幅に対して17pxがわずかに大きすぎ、
   nowrapにした文字が列からはみ出していた(最大9px、650px時)。
   768px以降は無関係(上のルールのまま)なので、15pxに下げて収める */
@media (min-width: 650px) and (max-width: 767px) {
  :root {
    --practice-item-fs: 15px;
  }

  .practice-panel__item {
    font-size: var(--practice-item-fs);
  }
}

/* 平行四辺形の左辺は下に行くほど左へ傾くので、行が進むほど左にずらして
   ブロック全体の左端が斜辺に沿うようにする */
.practice-panel__item:nth-child(2) { margin-left: calc(var(--stagger-step) * -1); }
.practice-panel__item:nth-child(3) { margin-left: calc(var(--stagger-step) * -2); }
.practice-panel__item:nth-child(4) { margin-left: calc(var(--stagger-step) * -3); }
.practice-panel__item:nth-child(5) { margin-left: calc(var(--stagger-step) * -4); }

.practice-panel__item::before {
  content: '⚫︎';
  position: absolute;
  left: 0;
  /* 横の文字列(行の高さ=line-height)に対して垂直方向の中央に揃える。
     font-sizeを縮めるとベースライン基準の自然な位置では上寄りに見えるため、
     topを50%にしてtranslateYで自身の高さの半分だけ引き戻す */
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-red);
  font-weight: 900;
  /* var(--practice-item-fs)より小さいサイズにする(SP0.6倍)。
     .practice-panel__title(1.1倍、2106行目付近)と同じく、フォールバック値も
     var(--practice-item-fs)未定義時(650px未満)用に揃える。
     650px以上(PC)は下の@media内で0.7倍に上書きする */
  font-size: calc(var(--practice-item-fs, clamp(17px, 1.4583vw, 28px)) * 0.6);
}

/* PC(650px以上、var(--practice-item-fs)が定義される幅)は0.7倍にする。
   2027行目付近の@media(min-width:650px)より後ろに置く必要があるため
   (詳細度が同じ.practice-panel__item::beforeのため、後勝ちさせる)、
   ここに独立したブロックとして置く */
@media (min-width: 650px) {
  .practice-panel__item::before {
    font-size: calc(var(--practice-item-fs, clamp(17px, 1.4583vw, 28px)) * 0.7);
  }
}

/* ------------------------------------------------------------
   タイトルバナー（赤／青、法人のお客様へ・個人のお客様へ）
   塗りつぶしの平行四辺形。practice-panel__readmoreと同じ手法(::beforeをtan()でskewX)。
   高さは元のheight:9.34%(stageの高さ基準)をwindow幅(vw)に換算して再現する:
   9.34% × (1017/1920) = 4.9473vw。stageの高さは常にstage幅(=100vw)に比例するため、
   この値はウィンドウ幅に対して元の%指定と完全に同じ比率で縮小する。
   ※%を::before側のtan()計算にそのまま使うと、left/rightの基準(幅)と
   height側の基準(高さ)が異なるため角度がずれる。vwはどちらの文脈でも
   同じ絶対量になるため、この変換が必要。
   OS側でフォントサイズが拡大された場合のみ、コンテンツに合わせて広がる保険を追加。
   ------------------------------------------------------------ */
.practice-panel__title {
  --title-h: max(4.9473vw, calc(1lh + 0.4em));
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  /* .practice-panel__itemの1.1倍(Illustrator実測 item h30px : title h33px) */
  font-size: calc(var(--practice-item-fs, clamp(17px, 1.4583vw, 28px)) * 1.1);
  box-sizing: border-box;
  height: var(--title-h);
  overflow: hidden;
}

/* 650px未満は--practice-item-fsが未定義のため、上のfont-sizeはフォールバックの
   clamp(17px, 1.4583vw, 28px)の下限17px(*1.1=18.7px)で頭打ちのまま画面幅に
   関わらず変わらない。400px以下ではこの18.7pxに対して.practice-panel__title--personal
   側の実測幅が不足し、overflow:hiddenで「個人のお客様へ」の右側が見えなくなる
   ことがあるため、400px以下だけさらに比例して縮める(400px時点は18.7pxのまま
   継続、320px時点で16.5pxまで) */
@media (max-width: 400px) {
  .practice-panel__title {
    font-size: clamp(16.5px, calc(2.75 * 1vw + 7.7px), 18.7px);
  }
}

.practice-panel__title span {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 法人向け：右辺が斜め、左辺は直線。left:0%(以前の指定通り)を固定アンカーとし、
   幅は右方向に自然に伸縮する */
.practice-panel__title--corp {
  left: 0%;
  top: 24.19%;
  min-width: 32.66%; /* 元のwidth:32.66%(以前の指定通り)。コンテンツが必要とすれば広がる */
  justify-content: flex-end;
  padding-right: var(--practice-panel-title-gap); /* svg右端から文字右端まで74px(以前の指定通り) */
  padding-left: 1.2em;
}

.practice-panel__title--corp::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* svg実測: 右辺は上端で満幅(627.65)、下端で内側に凹む(560.41)。
     右端を0(常に満幅の位置)にし、skewXを負にして下端だけ内側に傾けることで
     この向き(上が広く・下が狭い)を再現する。以前は符号が逆で天地が反転していた */
  right: 0;
  left: calc(-1 * tan(var(--panel-skew-angle)) * var(--title-h));
  background-color: #df5346;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

/* 個人向け：左辺が斜め、右辺は直線。右辺(直線側)がパネル右端
   (旧left:68.28%+width:31.67%=99.95%)に揃うよう、right基準で固定アンカーし、
   幅は左方向(斜辺側)に自然に伸縮する */
.practice-panel__title--personal {
  right: 0.05%; /* 100% - 99.95%(旧left+width) : 旧右端位置を維持 */
  top: 42.48%;
  min-width: 31.67%; /* 元のwidth:31.67%(以前の指定通り)。コンテンツが必要とすれば広がる */
  padding-left: var(--practice-panel-title-gap); /* svg左端から文字左端まで74px(以前の指定通り) */
  padding-right: 1.2em;
}

.practice-panel__title--personal::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--title-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--title-h));
  background-color: #6eadd8;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

/* ------------------------------------------------------------
   READ MORE SVG
   法人: X(-332,690)-(34,743) / 幅366 高53
   個人: X(1087,879)-(1587,931) / 幅500 高52
   ------------------------------------------------------------ */
/* 高さは元のheight:5.11%(stageの高さ基準)をwindow幅(vw)に換算して再現する:
   5.11% × (1017/1920) = 2.7067vw(理由はtitleバナーのコメントを参照)。
   OS側でフォントサイズが拡大された場合のみ、コンテンツに合わせて広がる保険を追加。 */
.practice-panel__readmore {
  --readmore-h: max(2.7067vw, calc(1lh + 0.4em));
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  box-sizing: border-box;
  height: var(--readmore-h);
  overflow: hidden;
}

.practice-panel__readmore span {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-white);
  white-space: nowrap;
  transform: scaleX(0.75); /* デザイン意図による圧縮。維持する */
}

/* transform-originを整列側の端に合わせ、scaleXで縮小してもpadding側の端が動かないようにする */
.practice-panel__readmore--corp span {
  transform-origin: right;
}

.practice-panel__readmore--personal span {
  transform-origin: left;
}

/* 個人向け：塗りつぶしの平行四辺形。左辺が斜め、右辺は直線。
   右辺(直線側)がパネル右端(旧left:73.96%+width:25.99%=99.95%)に揃うよう、
   right基準で固定アンカーし、幅は左方向(斜辺側)に自然に伸縮する */
.practice-panel__readmore--personal {
  right: 0.05%; /* 100% - 99.95%(旧left+width) : 旧右端位置を維持 */
  /* .practice-panel__bg--personalの下端からこの要素(::beforeの下端=この
     要素自身の下端と一致)までの距離が、w1920でcorp側と揃って48pxになるよう
     実測から逆算(旧91.74%では実測32.04pxしかなく、corp側(旧値で41.91px)とも
     ズレていた)。stageの実測高さ(w1920で1017px)を基準に、必要な上方向への
     シフト量(15.96px)を%に変換して差し引いた値 */
  top: 90.1706%;
  min-width: 25.99%; /* 元のwidth:25.99%(以前の指定通り)。コンテンツが必要とすれば広がる */
  justify-content: flex-start;
  padding-left: var(--practice-panel-readmore-gap); /* svg左端から文字左端まで72px(以前の指定通り) */
  padding-right: 1.2em;
}

.practice-panel__readmore--personal::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--readmore-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
  background-color: #6eadd8;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
  transition: background-color var(--transition-base);
}

/* ホバー時は不透明のまま同系色を薄く(白寄りのパステル調に)する。
   opacityだと背景の写真が透けて見えてしまうため、透過ではなく
   background-colorそのものを明るい不透明色に差し替える */
.practice-panel__readmore--personal:hover::before {
  background-color: color-mix(in srgb, #6eadd8 70%, white);
}

/* 法人向け：左右反転（右辺が斜め、左辺は直線）。
   left:0%(以前の指定通り、パネル左端に揃う固定アンカー)を維持し、
   幅は右方向に自然に伸縮する */
.practice-panel__readmore--corp {
  left: 0%;
  /* personalと同じ理由。旧73.16%では実測41.91pxで、personal側(48px化前の
     旧値で32.04px)とズレていたため、w1920で48pxに揃うよう実測から逆算 */
  top: 72.5612%;
  min-width: 19.11%; /* 元のwidth:19.11%(以前の指定通り)。コンテンツが必要とすれば広がる */
  justify-content: flex-end;
  padding-right: var(--practice-panel-readmore-gap); /* svg右端から文字右端まで72px(以前の指定通り) */
  padding-left: 1.2em;
}

.practice-panel__readmore--corp::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* title--corpと同じ理由(svg実測で上端が満幅・下端が内側)。
     以前は符号が逆で天地が反転していたため修正 */
  right: 0;
  left: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
  background-color: #df5346;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
  transition: background-color var(--transition-base);
}

.practice-panel__readmore--corp:hover::before {
  background-color: color-mix(in srgb, #df5346 70%, white);
}

/* ============================================================
   モバイル：絶対配置・clip-pathを解除して縦積みのシンプル構成に
   (暫定対応。並び順・配色はPC版に揃え、法人/個人それぞれ
   見出し帯→背景写真→リスト(白地)→READ MOREの順に積む。
   正式なデザインデータが来たら余白・写真の見せ方等を調整する)。
   検討中の暫定変更: 元は649px以下のみだったが、900px以下に拡大した
   (法人側リストが5行になり、650〜900pxの横並びで窮屈になったため)。
   戻す場合はこの900pxを649pxに戻すだけでよい */
@media (max-width: 900px) {
  /* PC版のmargin-bottomはtitle--corpのtop:24.19%(絶対配置)を打ち消すための
     逆算式なので、SP版(titleが通常フローに戻る)ではそのまま使うと大きな負の
     マージンになり、見出しの上に次のブロックが重なって隠れてしまう。
     通常の余白に戻す */
  .practice-panels__heading {
    margin-bottom: var(--space-lg);
  }

  .practice-panels__breakout {
    width: 100%;
    max-width: none;
    left: 0;
    transform: none;
    overflow: visible;
  }

  /* 見出し帯とリスト(白地)を、背景写真の上に重ねて表示するため、
     grid-rowを共有させて重ね順(z-index)で見せる方式にする。
     (bg--corpは1〜2行目にまたがり、titleが1行目上部・shapeが2行目下部に
     それぞれ重なることで、写真がタイトル/リストの背景として連続して見える) */
  .practice-panels__stage {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .practice-panel__bg,
  .practice-panel__shape,
  .practice-panel__title,
  .practice-panel__readmore {
    position: absolute;
    inset: auto;
    right: auto;
    bottom: auto;
    min-width: 0;
    transform: none;
    clip-path: none;
  }

  /* 法人(corp)パネル実測値(イラストレーター、bg/title/readmoreは左端が
     画面端(0)にそのままつく。bgの左上を基準に他要素をオフセットで配置):
     bg: w398×h205、左端は画面端
     title: w377×h32、bgの上端から19px上に飛び出す、左端は画面端
     shape: w367×h195、bg内側(右端から12px・上下各5px)
     readmore: w247×h50、bgの下端から10px下に飛び出す、左端は画面端 */
  /* 901px幅の時点でbgの縦幅が280px程度になるよう、法人・個人それぞれ
     420px基準の「高さ・上下位置」だけを対象にした拡大率を用意する
     (280/205=1.365854倍、280/202=1.386139倍)。
     「幅」および画面中央からの位置を決めている値(50vw+固定値の式。
     bg/title/readmoreの幅、shapeの中央側の辺の位置)は、法人と個人が
     画面中央に寄り添う関係を作っている部分なので、この拡大率を掛けずに
     元の式のまま維持する。拡大率をかけるのは高さ方向(≒サイズ感)のみ。
     shapeだけは幅も「大きさ」として拡大率をかけるが、中央側の辺
     (法人=右辺、個人=左辺)は元の式のまま固定し、外側の辺だけが
     幅の増加分だけ外に伸びるようにする */
  .practice-panels__stage {
    position: relative;
    --practice-scale-corp: calc(1 + (100vw - 420px) / 480px * 0.365854);
    --practice-scale-personal: calc(1 + (100vw - 420px) / 480px * 0.386139);
    /* corp側の下端(234px相当)+間隔(7px相当)は、corpの拡大率で伸びる。
       personal側はそこからの相対位置なので、personal自身の拡大率で伸びる
       ローカルオフセットを別途足す(下記各personalパーツのtopを参照) */
    --practice-corp-personal-handoff: calc(241px * var(--practice-scale-corp));
    height: calc(var(--practice-corp-personal-handoff) + 228px * var(--practice-scale-personal));
    /* .practice-panel__readmore--corp/--personal自身のwidth計算式(下記)と
       READ MORE白枠(::after)の幅計算式の両方から参照する共通の実幅。
       2箇所に同じ式を重複させず、値を1箇所に集約する */
    --readmore-corp-w: calc(min(398 / 420 * 100vw, 50vw + 219.7285px) - 151px * var(--practice-scale-corp));
    --readmore-personal-w: calc(min(408 / 420 * 100vw, 50vw + 233.3149px) - 28px * var(--practice-scale-personal));
    /* READ MORE白枠(::after)の幅。コンテナ実幅(--readmore-corp-w等)から、
       右(または左)オフセット(corp/personalとも16px)、skewX(-35.5deg)による
       見た目の横方向のはみ出し分(tan(35.5deg)*高さ34px≒24.25px)、
       ビューポート端との間に残したい余白(12px)を差し引く。
       900px付近など余裕がある画面幅では180pxで頭打ちにする。
       (以前は900px→180px/400px→160pxの固定2点clampだったが、
       320px付近ではコンテナ自体が160px程度しかなく既に収まりきらなかった
       ため、コンテナの実幅から逆算する方式に変更) */
    --readmore-outline-w-corp: min(180px, calc(var(--readmore-corp-w) - 16px - 24.25px - 12px));
    --readmore-outline-w-personal: min(180px, calc(var(--readmore-personal-w) - 16px - 24.25px - 12px));
  }

  .practice-panel__bg--corp {
    left: 0;
    top: calc(19px * var(--practice-scale-corp));
    width: min(398 / 420 * 100vw, 50vw + 219.7285px); /* 中央基準の式。拡大率は掛けない */
    height: calc(205px * var(--practice-scale-corp));
    z-index: 1;
    /* 右辺のみ斜めにカット(PC版と同じ向き)。傾きは.practice-panel__shape--corpの
       右斜辺(136px÷195px)と厳密に一致させ、自身の高さ(可変)に換算する */
    clip-path: polygon(0 0, 100% 0, calc(100% - 136 / 195 * (205px * var(--practice-scale-corp))) 100%, 0 100%);
  }
  .practice-panel__title--corp {
    left: 0;
    top: 0; /* bg上端(19px) - 19px */
    /* bgの幅の式(中央基準・変更なし)から、420px基準の余白(398-377=21px)を
       拡大率で大きくした分だけ差し引く。bg自体は動かさず、bgとの余白だけ
       高さと同じ比率で大きくする */
    width: calc(min(398 / 420 * 100vw, 50vw + 219.7285px) - 21px * var(--practice-scale-corp));
    height: calc(34px * var(--practice-scale-corp)); /* 文字上下の余白確保のため32→34px */
    z-index: 3;
  }
  .practice-panel__shape--corp {
    /* .practice-panel__bg--corpの右端(bgはleft:0のため右端=bgの実幅そのもの)
       から常に12px内側になるよう、bgのwidth式をそのまま再利用して逆算する
       (以前は独立した近似式だったため、幅によってこの間隔が微妙にズレていた) */
    right: calc(100vw - min(398 / 420 * 100vw, 50vw + 219.7285px) + 12px);
    top: calc(24px * var(--practice-scale-corp)); /* bg上端(19) + 5px相当 */
    width: calc(367px * var(--practice-scale-corp));
    height: calc(195px * var(--practice-scale-corp));
    z-index: 2;
    /* 平行四辺形(PC版と同じ向き:上辺が右に、下辺が左にずれる)。
       %指定のため、width/heightが比率で変わっても同じ角度を保つ */
    clip-path: polygon(37.0572% 0, 100% 0, 62.9428% 100%, 0 100%);
  }
  .practice-panel__readmore--corp {
    left: 0;
    top: calc(184px * var(--practice-scale-corp)); /* bg下端(19+205=224) + 10px相当 - 高さ */
    width: var(--readmore-corp-w);
    height: calc(50px * var(--practice-scale-corp));
    z-index: 2;
  }

  /* 個人(personal)パネル。corpと左右反転:右端が画面端(0)にそのまま
     つき、斜めカットは左辺のみ(PC版と同じ向き)。
     topはcorpとの受け渡し位置(--practice-corp-personal-handoff)+
     personal自身のローカルオフセット(420px時点の値)×personalの拡大率 */
  .practice-panel__title--personal {
    right: 0;
    /* bgの幅の式(中央基準・変更なし)から、420px基準の余白(408-242=166px)を
       拡大率で大きくした分だけ差し引く */
    width: calc(min(408 / 420 * 100vw, 50vw + 233.3149px) - 166px * var(--practice-scale-personal));
    top: var(--practice-corp-personal-handoff); /* ローカルオフセット0 */
    height: calc(34px * var(--practice-scale-personal)); /* 文字上下の余白確保のため32→34px */
    z-index: 3;
  }
  .practice-panel__bg--personal {
    right: 0;
    width: min(408 / 420 * 100vw, 50vw + 233.3149px); /* 中央基準の式。拡大率は掛けない */
    top: calc(var(--practice-corp-personal-handoff) + 16px * var(--practice-scale-personal)); /* title上端+16px相当 */
    height: calc(202px * var(--practice-scale-personal));
    z-index: 1;
    /* 左辺のみ斜めにカット(PC版と同じ向き)。傾きはshape--personalの実際の
       角度(136÷shape--personalの高さ191px。shape--corpの195pxとは異なる
       ため、共通の--panel-skew-angleでも136/195でもなく136/191で揃える) */
    clip-path: polygon(calc(136 / 191 * (202px * var(--practice-scale-personal))) 0, 100% 0, 100% 100%, 0 100%);
  }
  .practice-panel__shape--personal {
    /* .practice-panel__bg--personalの左端(bgはright:0のため左端=100vw-bgの実幅)
       から常に12px内側になるよう、bgのwidth式をそのまま再利用して逆算する
       (以前は独立した近似式だったため、幅によってこの間隔が微妙にズレていた) */
    right: auto;
    left: calc(100vw - min(408 / 420 * 100vw, 50vw + 233.3149px) + 12px);
    top: calc(var(--practice-corp-personal-handoff) + 21px * var(--practice-scale-personal)); /* bg上端+5px相当 */
    width: calc(367px * var(--practice-scale-personal));
    height: calc(191px * var(--practice-scale-personal));
    z-index: 2;
    /* 平行四辺形(PC版と同じ向き:上辺が右に、下辺が左にずれる)。
       shape--corpと同じ幅367pxのため、同じ角度(%指定で自動追従) */
    clip-path: polygon(37.0572% 0, 100% 0, 62.9428% 100%, 0 100%);
  }
  .practice-panel__readmore--personal {
    right: 0;
    width: var(--readmore-personal-w);
    top: calc(var(--practice-corp-personal-handoff) + 178px * var(--practice-scale-personal)); /* bg下端(16+202=218)+10px相当-高さ50 */
    height: calc(50px * var(--practice-scale-personal));
    z-index: 2;
    margin-bottom: var(--space-xl);
  }

  /* 見出し帯：PC同様「色地＋白文字」。斜め角度は共通の--panel-skew-angleのまま、
     全幅の平行四辺形(左右とも同じ向きに傾く)にする */
  .practice-panel__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 3em;
    padding: 0.8em 1.5em;
    overflow: visible;
  }

  /* corp/personalとも明示した高さを厳守するため、box-sizing:border-boxにして
     paddingで箱がはみ出さないようにし、min-height/paddingを詰める */
  .practice-panel__title--corp,
  .practice-panel__title--personal {
    box-sizing: border-box;
    min-height: 0;
    padding: 0 1em;
  }

  /* skewX+overflow:hiddenの合成技法は、widthが可変になったことで
     角のアンチエイリアス継ぎ目が視認される問題があったため、
     shape--personalの実際の角度(136/191。shape--corp/bg--corpの136/195とは
     高さの基準が違う)に揃えたclip-pathに統一。
     左辺だけ傾け、右辺は0(オフセットなし=垂直)のまま */
  .practice-panel__title--personal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #6eadd8;
    /* PC用ベースルールのtransform: skewX(...)がそのまま継承され、clip-pathの
       角度に二重にskewが掛かってしまっていたため、無効化する */
    transform: none;
    clip-path: polygon(calc(136 / 191 * (34px * var(--practice-scale-personal))) 0, 100% 0, 100% 100%, 0 100%);
  }

  /* corpはPC版(.practice-panel__title--corp::before)と全く同じ技法・数式を
     そのまま流用(right:0を基準に、leftだけ負のinsetでtop基準skewX)。
     コンテナ自体はPCと同じくleft基準で画面端につくため、式の左右を
     入れ替える必要はない。はみ出す分はコンテナ自身のoverflow:hiddenで
     幅377pxちょうどに切り取り、左辺が常に直線に見えるようにする */
  .practice-panel__title--corp {
    overflow: hidden;
  }

  .practice-panel__title--corp::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(-1 * tan(var(--panel-skew-angle)) * 34px * var(--practice-scale-corp));
    background-color: #df5346;
    transform: skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: top;
  }

  .practice-panel__title span {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    transform: none; /* PC用のscaleX(0.75)等は解除し等倍表示 */
  }

  /* 「法人」「個人」の2文字だけ一回り大きく */
  .practice-panel__title-emphasis {
    font-size: 1.4em;
  }

  .practice-panel__title--corp {
    justify-content: flex-end;
    padding-right: 28px;
  }

  /* spanの左端を::before(青帯)の左端(skew起点=calc(tan*32px))から18px右に合わせる */
  .practice-panel__title--personal {
    padding-left: calc(tan(var(--panel-skew-angle)) * 32px + 18px);
  }

  /* 背景写真：斜めカットせず矩形のまま。align-self:startで自身のアスペクト比
     どおりの高さを保ち、見出し帯・リストそれぞれの実高さより少し大きくすることで、
     写真がタイトル下〜リスト上に帯として見え、リスト(白地)がその上に浮いた
     カードのように重なって見えるようにする */
  .practice-panel__bg {
    align-self: start;
    aspect-ratio: 16 / 9;
  }

  /* リスト：白背景の矩形。写真の上に重なるようshapeのgrid-rowをbgの下側に配置し、
     コントラストを持たせる */
  .practice-panel__shape {
    background-color: var(--color-white);
    padding: var(--space-lg) var(--space-md);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 420px時点の実測(left:143px/top:17px)を、shape自身のwidth/height(367×195
     corp・367×191 personal)に対する比率に変換。絶対px値だとshapeが拡大・
     移動しても斜辺からの距離が保てず見た目が崩れるため、shapeの角度・
     サイズに追従する%指定にする */
  .practice-panel__list-wrap--corp {
    left: 38.9646%; /* 143 / 367 */
    right: 0;
    top: 8.7179%; /* 17 / 195 */
    bottom: auto;
  }
  .practice-panel__list-wrap--personal {
    left: 38.9646%; /* 143 / 367 */
    right: 0;
    top: 8.9005%; /* 17 / 191 */
    bottom: auto;
  }

  .practice-panel__list {
    padding-left: 0;
    gap: 0;
    /* gap:0にした分、行間の斜辺追従量(--stagger-step)からも0.5remの項を除く
       (PC版はgapが0.5remのままのため、この上書きはSP限定) */
    --stagger-step: calc(1.8em * 0.70);
  }

  .practice-panel__item {
    font-size: 15px;
  }

  /* READ MORE：見出し帯と同じく「色地＋白文字」の全幅平行四辺形 */
  .practice-panel__readmore {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    padding: 0.8em 1.5em;
    overflow: visible;
  }

  /* corp/personalとも明示した247×50pxを厳守する */
  .practice-panel__readmore--corp,
  .practice-panel__readmore--personal {
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
  }

  /* title--personalと同じ理由・同じ技法でclip-path方式に統一。
     こちらもPC用ベースルールのtransform: skewX(...)を無効化する */
  .practice-panel__readmore--personal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #6eadd8;
    transform: none;
    clip-path: polygon(calc(136 / 191 * (50px * var(--practice-scale-personal))) 0, 100% 0, 100% 100%, 0 100%);
  }

  /* corpはPC版(.practice-panel__readmore--corp::before)と全く同じ技法・数式。
     左辺が直線、右辺が傾く。はみ出す分はコンテナのoverflow:hiddenで
     幅247pxちょうどに切り取る */
  .practice-panel__readmore--corp {
    overflow: hidden;
  }

  .practice-panel__readmore--corp::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(-1 * tan(var(--panel-skew-angle)) * 50px * var(--practice-scale-corp));
    background-color: #df5346;
    transform: skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: top;
  }

  .practice-panel__readmore span {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    transform: none;
    /* 420px以上(このブロックの上限900pxまで含む)は20pxで頭打ちのまま保ち、
       420px未満だけなだらかに17pxまで下がるようにする(PC側と同じ考え方、
       基準点だけこのブレークポイントに合わせて420pxにする) */
    font-size: clamp(17px, calc(20 / 420 * 100vw), 20px);
  }

  /* 赤帯(corp)の上に乗る、白い枠線のみの平行四辺形(w180×h34)。
     lawyer-intro__readmore::afterと同じ技法。赤帯の右端から17px、上下中央。
     ::before(corp)はtransform-origin:topで右上角がコンテナ右端に一致する
     アンカーのため、同じくtransform-origin:topにして「right:17px」が
     上辺(::beforeの右上角と同じ基準面)の位置になるようにする。
     bottom基準だと上辺がright側に飛び出し、コンテナのoverflow:hiddenで
     右上が欠けて左右逆に見えてしまう */
  .practice-panel__readmore--corp::after {
    content: '';
    position: absolute;
    /* ::beforeはtop:0基準(transform-origin:top)でskewXするが、::afterは
       top:50%で中央配置されているため、::after自身のtransform-origin:top
       (=::after自身の上端。コンテナの上端ではない)が::beforeの基準点と
       ズレている。そのズレ(コンテナ上端から::after上端までの距離ぶんの
       skewXドリフト)を右に足して補正し、実際の見た目の距離が常に16pxに
       なるようにする(コンテナ上端からafter上端までの距離 = コンテナ高さ/2 - 17px) */
    right: calc(16px + tan(var(--panel-skew-angle)) * (25px * var(--practice-scale-corp) - 17px));
    top: 50%;
    width: var(--readmore-outline-w-corp);
    height: 34px;
    box-sizing: border-box;
    /* .features__readmore::before等と同じ太さの比率(高さ×0.0568)に統一 */
    /* .features__readmore::beforeと完全に同じ式にする(実際のpx値まで一致させる) */
    box-shadow: inset 0 0 0 calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568) var(--color-white);
    border-radius: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568 / 2);
    transform: translateY(-50%) skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: top;
  }

  /* READ MOREの文字：白枠と同じ右基準・幅で重ね、lawyer-intro同様0.75幅+中央揃え。
     origin:topでは視覚中心が左にd/2ずれるため、逆符号(左方向)で補正する。
     spanはskewXしないため、::afterの補正後のrightと同じ値を使い、
     ::afterの(変形前の)実際の箱の位置に正しく重なるようにする */
  .practice-panel__readmore--corp span {
    position: absolute;
    right: calc(16px + tan(var(--panel-skew-angle)) * (25px * var(--practice-scale-corp) - 17px));
    top: 50%;
    width: var(--readmore-outline-w-corp);
    text-align: center;
    font-weight: 700;
    transform: translateY(-50%) translateX(calc(-1 * tan(var(--panel-skew-angle)) * 34px / 2)) scaleX(0.75);
    transform-origin: center;
  }

  /* 青帯(personal)の上に乗る、白い枠線のみの平行四辺形(w180×h34)。
     practice-panel__readmore--corp::afterの左右反転版。青帯の左端から
     15px、上下中央。::before(personal)はtransform-origin:topで
     左辺が斜辺のため、白枠側はtransform-origin:bottomにして
     「left:15px」を下辺(コンテナ左端に対して欠けない側)の基準にする。
     (corpと逆:corpはtop基準でないと右側が欠けたが、personalは左側の
     はみ出しを避けるためbottom基準が正しい) */
  .practice-panel__readmore--personal::after {
    content: '';
    position: absolute;
    /* ::before(clip-path)の斜辺の傾き(136/191、tan(panel-skew-angle)とほぼ同じ)を
       基準に、::after自身のtransform-origin:bottom(コンテナ下端ではなく
       ::after自身の下端)とのズレを補正する。corp側と同じ考え方
       (コンテナ上端から::afterの実際の基準点までの距離ぶんskewXドリフトを
       打ち消す)で、実際の見た目の距離が常に16pxになるようにする */
    left: calc(16px + tan(var(--panel-skew-angle)) * (25px * var(--practice-scale-personal) - 17px));
    top: 50%;
    width: var(--readmore-outline-w-personal);
    height: 34px;
    box-sizing: border-box;
    /* .features__readmore::before等と同じ太さの比率(高さ×0.0568)に統一 */
    /* .features__readmore::beforeと完全に同じ式にする(実際のpx値まで一致させる) */
    box-shadow: inset 0 0 0 calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568) var(--color-white);
    border-radius: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568 / 2);
    transform: translateY(-50%) skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: bottom;
  }

  /* READ MOREの文字：白枠と同じ左基準・幅で重ね、lawyer-intro同様0.75幅+中央揃え */
  .practice-panel__readmore--personal span {
    position: absolute;
    left: calc(16px + tan(var(--panel-skew-angle)) * (25px * var(--practice-scale-personal) - 17px));
    top: 50%;
    width: var(--readmore-outline-w-personal);
    text-align: center;
    font-weight: 700;
    transform: translateY(-50%) translateX(calc(tan(var(--panel-skew-angle)) * 34px / 2)) scaleX(0.75);
    transform-origin: center;
  }

}

/* 法人/個人パネルの下端(斜めカット部分)→「お問い合わせはこちら」ボタンの間隔を
   15px詰める。.consultation__cta自体は.consultationセクション側とも共用の
   クラスのため、practice-panels内のものだけを子孫セレクタで限定して
   margin-topを上書きする(var(--space-xl)=64pxから15px引いた49px) */
.practice-panels > .consultation__cta {
  margin-top: calc(var(--space-xl) - 15px);
}

/* PC配置(法人/個人が横並び)は650px以上に拡大したが、「お問い合わせはこちら」
   ボタンは従来通り767px以下では非表示のままにしたいため、650-767pxの
   PC配置レンジも含めて別のmax-width:767pxブロックで独立して指定する。
   (consultation__cta自体は.consultationセクション側と共用クラスのため、
   practice-panels内のものだけを構造セレクタで限定して非表示にする) */
@media (max-width: 767px) {
  .practice-panels > .consultation__cta {
    display: none;
  }

  .practice-panels__heading {
    margin-top: 6rem;
  }

  .practice-panels {
    padding-bottom: 5rem;
  }
}

/* /practice/ページ単体表示時(practice-panels--subpage)は、画面幅を問わず
   「お問い合わせはこちら」CTAを非表示にする(TOPページの取扱業務セクションでは
   引き続きPC画面に表示させたいため) */
.practice-panels--subpage > .consultation__cta {
  display: none;
}
/* ============================================================
   9. 弁護士紹介
   ============================================================ */
.lawyer-intro {
  background-color: var(--color-bg);
  overflow: hidden;

  /* bg-color.svgのviewBox実測値（1920×749.74）*/
  --lawyer-intro-ratio: 1920 / 749.74;
  --lawyer-intro-boundary-y: 75.34%; /* 565 / 749.74（写真とオーバーレイ帯の境界の目安）*/
  /* 1920px時165pxを上限に、画面幅に比例して縮小する(下限は上限の60%、
     165*0.6=99px) */
  --lawyer-intro-pad-y: clamp(99px, calc(165 / 1920 * 100vw), 165px);

  padding-block: var(--lawyer-intro-pad-y);
}

.lawyer-intro__banner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--lawyer-intro-ratio);
  overflow: hidden;
}

/* 写真ラッパー。position:absolute;inset:0(以前は.lawyer-intro__photo自身が
   持っていた指定)をこちらへ移し、写真自体はこの箱いっぱいの通常要素にする。
   SPでスケール(transform)を掛けた時にラッパー側のoverflow:hiddenで
   クリップするため(.lawyer-intro__banner自身はSPで.lawyer-intro__titleを
   バナー上端からはみ出させる都合上overflow:visibleのままにする必要があり、
   そちらではクリップできない) */
.lawyer-intro__photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* 写真 */
.lawyer-intro__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lawyer-intro-focal-x, 50%) var(--lawyer-intro-focal-y, 50%);
}

/* 青いシルエットSVG */
.lawyer-intro__bg-color {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* アスペクト比がbannerと一致しているため object-fit は fill でよいが、
  念のため cover にして万一の比率誤差でも欠けないようにする */
  object-fit: cover;
}

/* タイトル */
/* 塗りつぶしの平行四辺形。左辺が斜め、右辺は直線(right:0で固定、幅は左方向に伸縮)。
   幅は元のwidth:clamp(280px,37.9vw,727.59px)をそのまま使用。
   高さは元のaspect-ratio:727.59/94.61をvw換算した値(37.9vw×94.61/727.59=4.9284vw、
   w1920上限で94.61px)と、実際のテキスト行高(1lh、通常時はline-height:1.8×48px=86.4pxで
   こちらが上回るため実質こちらが効く)のどちらか大きい方を採用する。
   これによりw1753.9(aspect-ratio側が86.4pxを超える境目)以降は元のaspect-ratio通りに
   拡大し、それ未満ではテキストの行高で決まるという元の実挙動を再現する */
.lawyer-intro__title {
  --title-h: max(clamp(36.4px, 4.9284vw, 94.61px), 1lh);
  position: absolute;
  z-index: 3;
  right: 0;
  top: 40.94%;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-section-title);
  height: var(--title-h);
  min-width: clamp(280px, 37.9vw, 727.59px);
  box-sizing: border-box;
  padding-left: var(--lawyer-intro-title-gap); /* svg左端から文字左端まで176px(以前の指定通り) */
  padding-right: 1.2em;
  overflow: hidden;
}

.lawyer-intro__title::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--title-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--title-h));
  /* 取扱業務セクション(.practice-panel__title--corp)の赤と揃える */
  background-color: #df5346;
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

.lawyer-intro__title-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-white);
  white-space: nowrap;
}

/* 左下：キャッチコピー */
.lawyer-intro__bottom {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: calc(184 / 1920 * 100vw);
  display: flex;
  align-items: center;

  width: calc(1600 / 1920 * 100vw);
  max-width: 1600px;
  margin-inline: auto;
}

.lawyer-intro__caption {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(18px, calc(28 / 1920 * 100vw), 28px);
  line-height: 1.9;
}

/* 右下：READ MORE。塗りつぶしの平行四辺形(左辺が斜め、右辺は直線)。
   幅は元のwidth:clamp(220px,21.76vw,417.74px)をそのまま使用。
   高さは元のaspect-ratio:417.74/57.78をvw換算した値(21.76vw×57.78/417.74=3.0102vw、
   w1920上限で57.78px)と、実際のテキスト行高(1lh)のどちらか大きい方を採用する
   (titleと同じ理由。このフォントサイズでは通常aspect-ratio側が効く) */
.lawyer-intro__readmore {
  --readmore-h: max(clamp(30.43px, 3.0102vw, 57.78px), 1lh);
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: clamp(16px, 2vw, 32px);
  display: inline-flex;
  align-items: center;
  font-size: var(--lawyer-intro-readmore-fs);
  height: var(--readmore-h);
  min-width: clamp(220px, 21.76vw, 417.74px);
  box-sizing: border-box;
  padding-left: var(--lawyer-intro-readmore-gap); /* svg左端から文字左端まで81px(以前の指定通り) */
  padding-right: 1.2em;
  overflow: hidden;
}

.lawyer-intro__readmore::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--readmore-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
  background-color: var(--color-white);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
  transition: background-color var(--transition-base);
}

/* opacityだと背後の写真が透けて見えてしまうため、不透明のまま
   薄いグレーに差し替える(白はこれ以上明るくできないため) */
.lawyer-intro__readmore:hover::before {
  background-color: color-mix(in srgb, var(--color-white) 90%, black);
}

.lawyer-intro__readmore-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* 取扱業務セクション(.practice-panel__title--personal)の青と揃える */
  color: #6eadd8;
  white-space: nowrap;
  transform: scaleX(0.75); /* デザイン意図による圧縮。維持する */
  transform-origin: left; /* 左揃えのためscaleXで左端がずれないようにする */
}

/* ----------------------------------------
   レスポンシブ
---------------------------------------- */

@media (max-width: 767px) {
  .lawyer-intro {
    /* .lawyer-intro__titleがbannerからtop:-84pxで上に飛び出す設計のため、
       padding-topは84px+前セクション(取扱業務)との間隔75px(20+55)を確保する。
       padding-bottomは従来通り60pxのまま(top/bottomをここで分離するため
       --lawyer-intro-pad-yはbottom用としてそのまま流用する) */
    padding-top: 159px;
    --lawyer-intro-pad-y: 60px;
    padding-bottom: var(--lawyer-intro-pad-y);
  }

  .lawyer-intro__caption {
    max-width: 100%;
    /* 767px時18pxを上限に、画面幅に比例して縮小する(下限14px) */
    font-size: clamp(14px, calc(18 / 767 * 100vw), 18px);
  }

  /* 写真318px(帯と重ならず見える面は217px=318-101)。titleを写真の上(バナー外)に
     出すため、banner自体のoverflowはvisibleにする(はみ出し部分はsection側の
     padding-block内に収まる) */
  .lawyer-intro__banner {
    aspect-ratio: auto;
    height: 318px;
    overflow: visible;
  }

  /* PC用の斜めシルエットSVGは使わず、単色の帯に差し替える */
  .lawyer-intro__bg-color {
    display: none;
  }

  /* 写真の見え方(顔がしっかり見える・バストアップ・頭上に余白・小さくなりすぎない)を
     画面幅ごとに調整する。650〜767pxは等倍のまま中央、500〜650pxはやや拡大、
     500px未満はさらに拡大しつつ下寄せ(頭上の余白を保ちつつ、狭い横幅でも
     人物が小さくなりすぎないようにする。具体的な倍率は下の専用メディアクエリで
     上書きする) */
  .lawyer-intro__photo {
    object-position: center;
  }

  .lawyer-intro__banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 101px;
    /* 取扱業務セクションの青と揃える */
    background-color: #6eadd8;
    z-index: 1;
  }

  /* 見出し「弁護士紹介」：PC用の赤帯タイトルをやめ、他セクション(事務所の特徴等)と
     同じテキスト+下線のシンプルな見出しにして、写真の上(バナーの外側扱い)に配置する。
     下線(.lawyer-intro__title-text::after)下端→写真(.lawyer-intro__photo-wrap)上端が
     常に40pxになるよう、topではなくbottom基準にする(bottom:100%で.lawyer-intro__banner
     の上端=写真の上端にちょうど一致する位置になり、そこからさらに40px上げる。
     見出し自身の高さ(文字サイズで可変)に関わらず常に正確に40pxになる) */
  .lawyer-intro__title {
    position: absolute;
    top: auto;
    bottom: calc(100% + 40px);
    /* 下線(.lawyer-intro__title-text::after)のmax-width:90%は、この
       positionされたボックスの幅が基準になる。.consultation__heading等と
       同じ基準(セクション幅-40px)に揃うよう、left:0/right:0ではなく
       container-pad分だけ内側にする(text-align:centerで左右対称に
       狭めるため見た目の位置は変わらない) */
    left: var(--container-pad);
    right: var(--container-pad);
    z-index: 3;
    display: block;
    height: auto;
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .lawyer-intro__title::before {
    display: none;
  }

  .lawyer-intro__title-text {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--fs-section-title);
    font-weight: 700;
    color: #48607a;
    letter-spacing: 0.15em;
    padding-bottom: var(--space-sm);
    /* PC用ベースルール(2923行目)のposition:relativeを打ち消す。
       relativeのままだと::afterの基準がこの要素自身(文字幅にshrink-wrap)
       になってしまい、下の::afterのコメントで説明したバグが再発する */
    position: static;
  }

  /* 下線を、.practice-panels__heading::after等の767px以下でも共通の他の
     見出し下線(幅625px・90%上限・中央寄せ)と同じ見た目に揃える。
     border-bottom(テキスト幅に合わせて伸縮)だとテキストが短い時に線も
     短くなり他の見出しと不揃いになるため、::afterによる固定幅+中央寄せに
     変更した。共通セレクタに直接追加すると767px超のPC版(赤帯バナー)にも
     適用されてしまうため、ここだけ独立して同じ値を指定する。
     ::afterの位置決めの基準(containing block)は、.lawyer-intro__title-text
     自身ではなく親の.lawyer-intro__title(position:absolute; left:0; right:0;
     でセクション幅いっぱい)にする。text-textはinline-blockで文字幅に
     shrink-wrapされるため、もしここにposition:relativeを付けると
     max-width:90%が「文字幅の90%」になってしまい、他の見出しと違って
     ほぼ何も見えない下線になる(実際に発生したバグ) */
  .lawyer-intro__title-text::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 625px;
    max-width: 90%;
    height: 2px;
    background-color: var(--color-gold);
  }

  /* キャッチコピー：青帯の中、下寄りに配置(暫定位置) */
  .lawyer-intro__bottom {
    inset: auto 0 16px 0;
    height: auto;
    width: auto;
    max-width: none;
    padding-inline: 20px;
    z-index: 2;
  }

  /* READ MORE: 赤帯(w242×h50、左下から右上に斜め、他の斜め要素と同じ角度)。
     縦位置は写真と青帯の境目(bottom:101px)に中心を合わせる(暫定) */
  .lawyer-intro__readmore {
    --readmore-h: 50px;
    top: auto;
    bottom: calc(101px - 25px); /* 境目を中心に上下25pxずつ(高さ50pxの半分) */
    right: 0; /* PC版と同じくページの端(コンテナ右端)につける */
    left: auto;
    width: 242px;
    height: 50px;
    min-width: 0;
    padding: 0;
    z-index: 2;
    justify-content: center;
  }

  /* PC版のlawyer-intro__readmore::beforeと全く同じ手法(左辺だけ斜め、右辺は直線で
     コンテナのright:0=ページ端のまま)。--readmore-hと色だけSP用に変更 */
  .lawyer-intro__readmore::before {
    top: 0;
    bottom: 0;
    left: calc(tan(var(--panel-skew-angle)) * var(--readmore-h));
    right: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
    /* 取扱業務セクションの赤と揃える */
    background-color: #df5346;
    transform: skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: top;
  }

  /* 赤帯の上に乗る、白い枠線のみの平行四辺形(w180×h34)。赤帯左端(bottom-left角)から13px、
     上下中央。transform-origin:bottomにして、left:13pxがそのまま「下辺の左端」の
     位置になるようにする(topを基準にすると下辺が左にずれて見えるため) */
  .lawyer-intro__readmore::after {
    content: '';
    position: absolute;
    left: 13px;
    top: calc(50% - 17px); /* 高さ34pxの半分 */
    width: 180px;
    height: 34px;
    box-sizing: border-box;
    /* border(枠線)はskewXした際に角の部分が不均等に見えることがあるため、
       box-shadowのinsetで均一な太さの枠を描く */
    /* .features__readmore::before等と同じ太さの比率(高さ×0.0568)に統一 */
    /* .features__readmore::beforeと完全に同じ式にする(実際のpx値まで一致させる) */
    box-shadow: inset 0 0 0 calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568) var(--color-white);
    border-radius: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568 / 2);
    transform: skewX(calc(-1 * var(--panel-skew-angle)));
    transform-origin: bottom;
  }

  .lawyer-intro__readmore-text {
    /* ::afterの白枠と同じ左位置・幅を基準にしつつ、skewXの平均的な視覚中心
       (tan(angle)*高さ/2、topとbottomの中間)に合わせて右にずらす。
       縦方向はtop:50%+translateY(-50%)で、実際のテキスト高さに関わらず正確に中央になる */
    position: absolute;
    z-index: 1;
    left: 13px;
    top: 50%;
    width: 180px;
    text-align: center;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    transform: translateY(-50%) translateX(calc(tan(var(--panel-skew-angle)) * 34px / 2)) scaleX(0.75);
    transform-origin: center;
  }

  /* SPはタッチ操作でhoverが残留して見えるため無効化する(基本的にSPにhoverは不要)。
     SP側は::beforeの色がPC版(白)と異なる(赤 #df5346)ため、PC用のグレー変化
     ではなくSP自身の色に戻す */
  .lawyer-intro__readmore:hover::before {
    background-color: #df5346;
  }
}

@media (min-width: 500px) and (max-width: 650px) {
  .lawyer-intro__photo {
    transform: scale(1.25);
  }
}

@media (max-width: 499px) {
  .lawyer-intro__photo {
    object-position: center bottom;
    transform: scale(1.4);
  }
}

/* ============================================================
   10. ご相談について
   ============================================================ */

/* ============================================================
   10. ご相談について
   Illustrator実測値:
   - 円 = 直径300px
   - 4円の全体幅 = 1500px(1600pxコンテナ内で中央寄せ)
   - 円の中心間隔 = 400px(円300px + すきま100px)
   - 矢印(三角) = w35 × h42px、色 #5EA4D4
   - 円の塗り実測値 = #E5D763(var(--color-gold)と差異があれば要確認)
   - 見出し/ラベル文字の実測値 = #48607A
   ============================================================ */

.consultation {
  overflow: hidden;
  /* 次のaccessセクション見出しとの距離は.access側のpadding-topで一元管理する */
  padding-bottom: 0;
  /* 共通ルール(.features, .practice-areas, ...{padding-block: var(--space-xl)})
     由来の固定64pxを、このセクションだけ1920px時64pxを上限に画面幅に比例して
     縮小するよう上書きする(下限は上限の60%、64*0.6=38.4px)。--space-xl自体は
     他の多くのセクションと共有のため変更しない */
  padding-top: clamp(38.4px, calc(64 / 1920 * 100vw), 64px);
}

.consultation__inner {
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  /* var(--space-lg)=40px固定から、1920px時40pxを上限に画面幅に比例して
     縮小するよう変更する(下限は上限の60%、40*0.6=24px)。--space-lg自体は
     他の多くの箇所と共有のため変更しない */
  padding-top: clamp(24px, calc(40 / 1920 * 100vw), 40px);
}

/* ----------------------------------------
   タイトル
   ---------------------------------------- */
   
/* このセクション固有の余白（見出し自体の見た目は共通ユーティリティ側で定義） */
.consultation__heading {
  /* 下線〜円上端の距離は.consultation__steps側のmargin-topで一元管理する */
  margin-bottom: 0;
}

/* ----------------------------------------
   4ステップ: 円形ピクトグラム
   ---------------------------------------- */

.consultation__steps {
  --circle-size: min(calc(300 / 1920 * 100vw), 300px);
  --connector-width: calc(var(--circle-size) * (35 / 300));
  --connector-height: calc(var(--circle-size) * (42 / 300));

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);

  width: min(calc(1500 / 1920 * 100vw), 1500px);
  /* 見出し下線→円上端=97px(w1920基準) */
  margin: var(--consultation-heading-gap) auto 0;
}

@media (min-width: 768px) {
  .consultation__steps {
    grid-template-columns: repeat(4, var(--circle-size));
    justify-content: space-between;
    align-items: center;
  }
}

.consultation-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consultation-step__circle {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: #f1d23f;
  flex-shrink: 0;
}

.consultation-step__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* SP専用アイコン(consultation_SP_0N.svg)はPC(≥768px)では非表示にし、
   767px以下でPC用アイコンと入れ替える(下のmax-width:767pxブロック参照) */
.consultation-step__icon--sp {
  display: none;
}

.consultation-step__label {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(16px, calc(var(--circle-size) * 0.093), 1.75rem); /* 円サイズに比例。下限16px */
  font-weight: 700;
  color: #48607a;
  text-align: center;
  white-space: nowrap;
}

.consultation-step__connector {
  display: none;
}

/* ②→③の行またぎ矢印画像。SP専用(2列レイアウト時のみ表示) */
.consultation-step__wrap-arrow {
  display: none;
}

/* 番号バッジ。SP専用(PC版では数字を表示しない) */
.consultation-step__number {
  display: none;
}

@media (min-width: 768px) {
  .consultation-step__connector {
    display: flex;
    position: absolute;

    top: 50%;
    left: calc(100% + ((100 / 300 * var(--circle-size)) / 2));

    width: var(--connector-width);
    height: var(--connector-height);

    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;

    z-index: 5;
  }

  .consultation-step__connector svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Read more(事務所の特徴セクションと共通デザイン。
   アセットは複製し consultation__readmore.svg を使用) */
.consultation__readmore {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-lg);
  /* 右端(viewport端)まで枠を伸ばす: コンテナのpadding/中央寄せ分を打ち消す */
  margin-right: calc((100% - 100vw) / 2);
}

/* 枠線のみの平行四辺形(中は透明)。featuresセクションと同一仕様
   (左辺が斜め、右辺は直線。縦の縁取りはなく、上下の枠線が右端まで伸びてoverflow:hiddenで切れる)。
   幅・高さは元のconsultation__readmore.svg実寸(featuresと同一のwidth:clamp(280px,33.9583vw,652px)+
   aspect-ratio:287.17/27.1)をそのままvw基準で再現する。
   OS側でフォントサイズが拡大された場合のみ、コンテンツに合わせて広がる保険を追加。 */
.consultation__readmore-link {
  --readmore-h: max(clamp(26.42px, 3.2039vw, 61.55px), calc(1lh + 0.4em));
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  height: var(--readmore-h);
  min-width: clamp(280px, 33.9583vw, 652px);
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity var(--transition-base);
}

.consultation__readmore-link:hover {
  opacity: 0.8;
}

.consultation__readmore-link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--readmore-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--readmore-h));
  border-top: calc(var(--readmore-h) * 0.0568) solid var(--color-blue);
  border-bottom: calc(var(--readmore-h) * 0.0568) solid var(--color-blue);
  /* skewXで見た目の(斜辺に垂直な)太さがcos(角度)倍に圧縮されるため、
     top/bottomと同じ見た目の太さになるよう事前に/cos(角度)で太くしておく */
  border-left: calc(var(--readmore-h) * 0.0568 / cos(var(--panel-skew-angle))) solid var(--color-blue);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

.consultation__readmore-link span {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5EA4D4;
  white-space: nowrap;
  margin-left: var(--consultation-readmore-gap); /* svg左端から文字左端まで81px(以前の指定通り) */
  transform: scaleX(0.75); /* デザイン意図による圧縮。維持する */
  transform-origin: left;
}

/* ::beforeの左端(--readmore-hのclampが800px付近で下限に達し、実質固定される)に対し、
   spanのmargin-left(--consultation-readmore-gap)は1920px基準の別のclampのため
   800px以下でも縮み続け、before/spanの位置関係がどんどん詰まって(狭い幅では
   逆転して)しまっていた。800px時点の--consultation-readmore-gapの値
   (81/1920*800=33.75px)で固定し、それ以下の幅では位置関係を保つ */
@media (max-width: 800px) {
  .consultation__readmore-link span {
    margin-left: 33.75px;
  }
}

/* CTA ボタン */
.consultation__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.cta-btn {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 0.3rem 3rem;
  border-radius: 50px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color var(--transition-base), transform var(--transition-base);
  letter-spacing: 0.5rem;
}

/* 赤 */
.cta-btn--red {
  background-color: var(--color-red);
  color: var(--color-white);
}

.cta-btn--red:hover {
  background-color: #A81F1F;
}

/*  黄色 */
.cta-btn--yellow {
  background-color: var(--color-gold);
  color: var(--color-text);
}

/* 赤・黄共通。.cta-btn(基底、--fs-md=18px固定)から独立させ、
   1920px時46pxを上限に比例縮小する。下限は上限の60%(46*0.6=27.6→26px) */
.cta-btn--red,
.cta-btn--yellow {
  font-size: clamp(26px, calc(46 / 1920 * 100vw), 46px);
}

.cta-btn--yellow:hover {
  background-color: #c9bc4f;
}

/* ----------------------------------------
   レスポンシブ: モバイルではタイトルのはみ出し・斜めを抑制
   ---------------------------------------- */

@media (max-width: 767px) {
  .consultation__heading {
    margin-right: 0;
    padding: 0.6rem 1.5rem;
    clip-path: none;
  }

  /* .consultation__ctaは.consultation__inner配下にあるため子孫セレクタで指定
     (直接の子ではない)。SP全域(767px以下)で「お問い合わせはこちら」を非表示にする */
  .consultation .consultation__cta {
    display: none;
  }

  /* 2列×2行のジグザグレイアウト。上段は画面左端から、下段は画面右端から
     オフセットする(左右で位置がずれる)ため、gridではなくstepごとの
     絶対配置にする。circle-sizeは420px基準で105px(画面幅に応じて比例、
     PC版のmin()による上限キャップは持たない)。
     row-offsetは420px基準で38px、幅が狭まるほど比例して縮み、
     15pxを下回らない(max()でフロアを設ける) */
  .consultation__steps {
    /* <ol>のデフォルトpadding-left(ブラウザ/親テーマ由来)を解除 */
    padding-left: 0;
    --circle-size: calc(105 / 420 * 100vw);
    --step-gap: calc(var(--circle-size) * (36 / 105)); /* 円同士の間隔=36px(420px基準) */
    --row-gap: calc(var(--circle-size) * 0.46); /* _SP_consultation.png実測から算出 */
    --row-offset: max(15px, calc(38 / 420 * 100vw));
    position: relative;
    display: block;
    /* 親.consultation__innerのpadding-inline(--container-pad)を打ち消し、
       画面の真の左右端を基準にrow-offsetを配置できるようにする */
    margin-inline: calc(-1 * var(--container-pad));
    height: calc(2 * var(--circle-size) + var(--row-gap) + 3em);
    width: auto;
    /* SP画面のみ、見出し下線下端→円上端を55pxにする(PC/--consultation-heading-gapは
       別の基準のため、ここだけ固定値で上書きする) */
    margin-top: 55px;
  }

  .consultation-step {
    position: absolute;
    top: 0;
    display: block;
  }

  /* 上段(①②)：画面左端からrow-offset。下段(③④)：画面右端からrow-offset
     (下段は上段より内側に入り込む形になり、②→③のwrap-arrow分の余白ができる) */
  .consultation-step:nth-child(1) {
    left: var(--row-offset);
  }

  .consultation-step:nth-child(2) {
    left: calc(var(--row-offset) + var(--circle-size) + var(--step-gap));
  }

  .consultation-step:nth-child(3) {
    right: calc(var(--row-offset) + var(--circle-size) + var(--step-gap));
    top: calc(var(--circle-size) + var(--row-gap));
  }

  .consultation-step:nth-child(4) {
    right: var(--row-offset);
    top: calc(var(--circle-size) + var(--row-gap));
  }

  .consultation-step__circle {
    position: relative;
    z-index: 0;
    aspect-ratio: 1 / 1;
  }

  /* 番号バッジ：円の左上に乗る小さな円。サイズはiconと同じ基準(circleと同サイズ)の30%。
     アイコンに被らないよう、黄色い大きな円から左に4px・上に2px、固定値でずらす */
  .consultation-step__number {
    position: absolute;
    top: -2px;
    left: -4px;
    z-index: 1;
    width: calc(var(--circle-size) * 0.3);
    height: calc(var(--circle-size) * 0.3);
    border-radius: 50%;
    background-color: #48607a;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: calc(var(--circle-size) * 0.16);
  }

  .consultation-step__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
  }

  /* 767px以下はSP専用アイコンに入れ替える。circle(正方形)にinset:0で
     ぴったり合わせるのはPC用アイコンと同じ(元々正方形のSVGのため
     object-fit等は不要) */
  .consultation-step__icon--pc {
    display: none;
  }

  .consultation-step__icon--sp {
    display: block;
  }

  .consultation-step__label {
    position: absolute;
    /* 円の下端からの距離(13px、420px基準・--circle-size=105pxの時)を、
       固定値だと円が縮んだ時に相対的に離れて見えるため、円のサイズに
       比例させる(13/105の比率) */
    top: calc(100% + var(--circle-size) * 13 / 105);
    left: 50%;
    bottom: auto;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
  }

  /* ①→②、③→④はPC版と同じ矢印。②→③はwrap-arrowに差し替えるため非表示 */
  .consultation-step__connector {
    display: flex;
    position: absolute;
    top: 50%;
    left: calc(100% + var(--step-gap) / 2);
    width: calc(var(--circle-size) * (15 / 105));
    height: calc(var(--circle-size) * (16 / 105));
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  .consultation-step__connector svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .consultation-step__connector--wrap {
    display: none;
  }

  /* ②→③の行またぎ矢印。位置・サイズは_SP_consultation.pngの実測値から算出
     (circleと高さを揃え、円の右/左端から一定の隙間を空けて配置) */
  .consultation-step__wrap-arrow {
    display: block;
    position: absolute;
    top: 0;
    height: var(--circle-size);
    width: auto;
    z-index: 5;
  }

  .consultation-step__wrap-arrow--top {
    left: calc(100% + var(--circle-size) * 0.139);
  }

  .consultation-step__wrap-arrow--bottom {
    right: calc(100% + var(--circle-size) * 0.153);
  }
}

/* 650px〜767pxはジグザグ2×2ではなく、768px以上と同じ4列横並びにする
   (以前は620pxが境目だったが、2列(ジグザグ)への切り替えを早めるため
   650pxに変更)。PC用ルール(@media min-width:768px)と同じgrid/connector
   配置を踏襲し、上のmax-width:767pxブロックが付けたSP専用の絶対配置
   (ジグザグ)を解除する。両端の余白はPC版の比例式(min()で自動計算される
   大きな余白)だと間延びして見えるため、45px固定に変更。
   お問い合わせボタンは非表示にする */
@media (min-width: 650px) and (max-width: 767px) {
  .consultation__steps {
    /* SP用ブロック(max-width:767px)の105px基準の式を、PC用の300px基準の式に
       戻す(この式に依存するconnector-width/heightも連動して直る)。
       ただしこの範囲(650〜767px)では計算結果が767pxで約119.8px、650pxで
       約101.6pxまで下がってしまい小さすぎるため、120pxの下限を追加する
       (結果としてこの範囲ではほぼ120px固定になる) */
    --circle-size: max(120px, min(calc(300 / 1920 * 100vw), 300px));
    /* 円のサイズに120pxの下限を追加したことで、円と実際の列間隔(gap)の
       比例関係が崩れた(下記.consultation-step__connectorのコメント参照)。
       justify-content:space-betweenによる自動計算のgapを
       column-gapとして明示的に計算し直し、connector側でも同じ値を
       参照できるようにする(3列の間隔=(全体幅-円4個ぶん)/3)。
       ここで「%」を使うと、この変数を後で.consultation-step__connector
       (別要素、containing blockが違う)側でも参照した時にそちらの
       containing block基準で再解決されてしまい値が壊れるため、
       .consultation__stepsの実際の幅の式(100vw-40px(.consultation__inner
       のpadding-inline)-2*(45px-container-pad))をそのままvw単位で
       展開しておく(どの要素で参照しても同じ値になる) */
    --step-gap-4col: calc((100vw - 40px - 2 * (45px - var(--container-pad)) - 4 * var(--circle-size)) / 3);
    display: grid;
    grid-template-columns: repeat(4, var(--circle-size));
    column-gap: var(--step-gap-4col);
    justify-content: normal;
    align-items: center;
    position: static;
    height: auto;
    /* 親.consultation__innerは20px(var(--container-pad))のpadding-inlineを
       持つため、画面端からの実際の余白を45pxにするには、その分を差し引いた
       25px(=45-20)をmargin-inlineに指定する */
    width: calc(100% - 2 * (45px - var(--container-pad)));
    margin-inline: calc(45px - var(--container-pad));
  }

  /* max-width:767pxブロックの:nth-child(1〜4)個別指定(ジグザグ2×2配置)は
     疑似クラスの分だけ詳細度が高く、.consultation-stepの指定だけでは
     打ち消せないため、同じ詳細度で明示的に上書きする */
  .consultation-step,
  .consultation-step:nth-child(1),
  .consultation-step:nth-child(2),
  .consultation-step:nth-child(3),
  .consultation-step:nth-child(4) {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .consultation-step__label {
    top: 74%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    white-space: nowrap;
    letter-spacing: -0.05rem;
  }

  .consultation-step__number,
  .consultation-step__wrap-arrow {
    display: none;
  }

  /* SP専用の正方形アイコンは円いっぱいに絵柄が入っており、PC用アイコンの
     ような下部の余白が無いため、ここ(ジグザグ配置ではない620-767px)では
     PC用アイコンに戻す(74%位置のlabelと重ならないようにするため) */
  .consultation-step__icon--pc {
    display: block;
  }

  .consultation-step__icon--sp {
    display: none;
  }

  /* 元の「100/300*circle-size/2」は、円のサイズと列間隔(gap)が
     どちらも同じ比率で画面幅に比例するという前提の式(768px以上のPC版では
     今も成立する)。しかしこの範囲(650〜767px)では円に120pxの下限を
     追加したため、円のサイズと実際のgapの比例関係が崩れ、矢印が
     列間隔(gap)の中央からずれてしまっていた。上の.consultation__stepsで
     計算した実際のgap(--step-gap-4col)の半分を使うことで、
     画面幅によらず常にgapの中央に来るようにする */
  .consultation-step__connector {
    display: flex;
    position: absolute;
    top: 50%;
    left: calc(100% + var(--step-gap-4col) / 2);
    width: var(--connector-width);
    height: var(--connector-height);
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    z-index: 5;
  }
}


/* ============================================================
   11. アクセス
   ============================================================ */

/* ヘッダーのメガメニュー（取扱業務）・ナビ（アクセス）からのアンカーリンク着地時に、
   固定ヘッダーの下に見出しが隠れないようスクロール位置をヘッダー分オフセットする
   （about.phpの#philosophy等と同じ手法） */
#practice-areas,
#access {
  scroll-margin-top: var(--header-height);
}

.access {
  background-color: var(--color-bg);
  /* ご相談についてのreadmore下端→見出し上端=257px(w1920基準)。
     paddingではなくmarginにする理由：#accessへ直接アンカー遷移した際、
     paddingだと余白がボックス内側に含まれるため見出しの上に大きな空白が
     表示されてしまう。marginなら遷移先の先頭が見出し自体になり、通常の
     スクロール時の間隔はそのまま保たれる */
  margin-top: var(--consultation-to-access-gap);
  /* 共通ルール(.features, .practice-areas, ...{padding-block: var(--space-xl);})の
     padding-topが残ったままだと、上のmarginと合わせて二重に空くため0で打ち消す */
  padding-top: 0;
  /* 次のcontactセクション見出しとの距離は.contact側のpadding-topで一元管理する */
  padding-bottom: 0;
}

.access__inner {
  max-width: var(--access-inner-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.access__heading {
  /* 下線→地図上端の距離は.access__grid側のmargin-topで一元管理する */
  margin-bottom: 0;
}

/* /practice/・/access/ページ単体表示時：共通FVに既にタイトル(h1)が
   表示されているため、ここの見出し(h2)は見た目上重複してしまう。
   SEO/スクリーンリーダー用にDOM上には残しつつ、視覚的にのみ隠す
   (display:noneではなくvisually-hiddenにする) */
.practice-panels--subpage .practice-panels__heading,
.access--subpage .access__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--access-grid-gap);
  /* 見出し下線→地図上端=97px(w1920基準) */
  margin-top: var(--access-heading-map-gap);
}

.access__map {
  width: var(--access-map-width); /* 826px(w1920基準) */
  aspect-ratio: 826 / 570;
  overflow: hidden;
}

.access__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 住所ブロック・駅情報を1列のCSS Gridにし、grid-template-columns:max-contentで
   列幅を「一番長いテキスト」に自動的に揃える。.access__transitは
   display:contentsで自身の箱を消し、中のliを直接このグリッドのアイテムとして
   参加させる(display:contentsを使うと、.access__transit自身のflex/gap指定は
   効かなくなるため、行間は全てここのgapで一元管理する。
   住所→駅情報間だけ広い間隔(--space-md)にしたい分は、
   .access__transit-item:first-childのmargin-topで補う)。
   justify-content:centerは、SP(画面幅いっぱいに広がる1カラムレイアウト時)に
   このグリッド自身の列(=最長テキスト幅)を画面中央に揃えるため。
   PC(access__infoがmax-content幅に絞られている)では余白が無く実質無効 */
.access__info {
  font-style: normal;
  font-family: var(--font-serif);
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  gap: var(--space-sm);
}

.access__address {
  position: relative;
  padding-bottom: var(--space-md);
  /* グリッドアイテムのデフォルト(justify-items:normal=stretch)のまま、
     列幅(=最長テキスト幅)いっぱいに揃える */
}

/* 下線は固定幅ではなく、テキスト幅(要素自身の実測幅)を基準に左右へ
   はみ出す形にする。文字サイズ(--access-address-fs)に比例させることで、
   文字サイズ・画面幅が変わっても「文字より短くならない」ことを保証する。
   1920px基準で左35px・右37.5px相当。
   mapとの間隔(--access-grid-gap、102px)の方が張り出し量より十分大きいため
   通常はmapに届かないが、念のためmapの手前に最低12px残すmax()の上限は
   残しておく(値が2つとも負数なので、より0に近い方を採用) */
.access__address::after {
  content: '';
  position: absolute;
  left: max(calc(-1 * var(--access-address-fs) * 1.25), calc(-1 * var(--access-grid-gap) + 12px));
  right: calc(-1 * var(--access-address-fs) * 1.3393);
  bottom: 0;
  height: 2px;
  background-color: var(--color-gold);
}

/* 郵便番号・住所は文字サイズ・色・weightを統一(h28px程度、w1920基準) */
.access__postcode,
.access__street {
  font-size: var(--access-address-fs);
  color: #646364; /* TOPページのグレー文字統一 */
  font-weight: 700;
}

.access__postcode {
  margin-bottom: 0.25rem;
}

.access__street {
  line-height: 1.7;
}

.access__transit {
  /* display:contentsで自身の箱を消し、liを.access__info直下のgridアイテムと
     して直接参加させる(.access__addressと同じ列幅に揃えるため)。
     このため、以前ここにあった--ark-list-padding/flex/gapの指定は
     もう効かない(gapは.access__info側に統合済み) */
  display: contents;
}

.access__transit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: var(--space-sm);
}

/* .access__infoのgapは--space-smに統一したため、住所ブロックの直後だけ
   従来通り広い間隔(--space-md)にするための差分を補う */
.access__transit-item:first-child {
  margin-top: calc(var(--space-md) - var(--space-sm));
}

/* .access__address::afterと同じ考え方。--access-transit-fs基準で
   1920px時に左35px・右37.5px相当はみ出す。mapとの間隔を守るmax()も同様 */
.access__transit-item::after {
  content: '';
  position: absolute;
  left: max(calc(-1 * var(--access-transit-fs) * 1.3462), calc(-1 * var(--access-grid-gap) + 12px));
  right: calc(-1 * var(--access-transit-fs) * 1.4423);
  bottom: 0;
  height: 2px;
  background-color: var(--color-gold);
}

/* 駅名・徒歩分数は文字サイズ・色・weightを統一(h26px程度、w1920基準) */
.access__transit-line,
.access__transit-walk {
  font-size: var(--access-transit-fs);
  color: #646364; /* TOPページのグレー文字統一 */
  font-weight: 700;
}

@media (min-width: 768px) {
  .access__grid {
    /* 3fr 2fr(比率指定)だと、.access__map自身の実幅(--access-map-widthで
       個別にclamp済み)とグリッドトラック幅が一致せず、トラック内に
       余った分だけ.access__infoとの間隔が余計に開いてしまう(画面が
       狭まるほど顕著)。1列目をmapの実幅そのものにすることでズレをなくす */
    /* 2列目を1frにすると余白分だけ伸びて右へ広がってしまうため、
       中身の幅(max-content)に合わせ、グリッド全体をjustify-contentで
       画面幅に対して中央揃えにする */
    grid-template-columns: var(--access-map-width) max-content;
    justify-content: center;
    align-items: center; /* 住所を地図に対して垂直中央揃え */
  }

  /* 1000px前後より狭い画面では.access__mapのaspect-ratio由来の高さが
     .access__info(住所+アクセス情報)の実際の高さを下回ってしまう
     (--access-map-widthは.access__infoと独立に縮むため)。align-self:stretchで
     行の高さ(=info側が高い場合はinfo基準)いっぱいまで伸ばし、mapがinfoより
     低くならないようにする(縦横比が変わることは許容)。info側が高いケースが
     ほぼ全て768〜1200px程度の範囲のため、mapが元々infoより高い広い画面では
     行の高さ自体がmapの実測値のままなので、この指定による見た目の変化はない */
  .access__map {
    align-self: stretch;
  }

}

@media (max-width: 767px) {
  .access__map {
    /* 以前はcalc(376/420*100vw)で生のvwを基準にしていたが、実際に幅として
       使えるのは.access__inner側のpadding-inline(--container-pad、左右計40px)
       を差し引いた.access__gridの列幅であり、そことズレる分だけ右に空白が
       できていた(767px付近で最大約40px)。.access__gridは1列(1fr)しかないため、
       列幅=100%にしてぴったり合わせる。aspect-ratio(376/182)は維持する */
    width: 100%;
    aspect-ratio: 376 / 182;
  }

  /* ご相談について→アクセスの間隔を、SP画面のみ5.5rem追加する(PC画面は
     --consultation-to-access-gapのまま変更しない) */
  .access {
    margin-top: calc(var(--consultation-to-access-gap) + 2.5rem);
  }

  /* /access/ページ単体表示時のみ：TOPページでは直後に本物の.contactセクションが
     来て、その側のpadding-topで下との間隔を確保しているが(コメント参照)、
     /access/ページ単体では直後が.page-contact-cta(SPでは非表示)のため
     何も余白を生まず、下線からfooterまでが0pxになっていた。
     TOPページ側(.access単体)には影響させないよう--subpageに限定する */
  .access--subpage {
    padding-bottom: 70px;
  }

  /* TOPページのアクセス→お問い合わせの間隔を、access__grid/contact__gridが
     ともに1カラムに縦積みになるこの幅だけ広げる。.contact側のpadding-top
     (--access-to-contact-gapと同じ変数)に加えて、その半分をここで追加する。
     .page--has-access-cta(下層ページ)は対象外にし、TOPページ(.home)だけに絞る */
  .home .access {
    margin-bottom: calc(var(--access-to-contact-gap) / 2);
  }
}


/* ============================================================
   12. お問い合わせ
   ============================================================ */

.contact {
  background-color: var(--color-white);
  /* padding-topは通常のセクション共通値(--space-xl、他の.attorneys等と同じ)を使う。
     TOPページ/.accessページ直後だけ、下のルールで広い値に差し替える */
  /* timeの下端→footerまで=105px(w1920基準) */
  padding-bottom: var(--contact-time-footer-gap);
}

/* .accessセクションの地図下端→.contact見出し上端=291px(w1920基準)。
   TOPページと/access/ページ(直前に.accessが来る)だけ、この広い余白に差し替える。
   他の下層ページ(page.php経由)は.contactも他セクションと同じ--space-xlのまま */
.home .contact,
.page--has-access-cta .contact {
  padding-top: var(--access-to-contact-gap);
}

.contact__heading {
  /* 下線→電話番号/メールボタン上端の距離は.contact__grid側のmargin-topで一元管理する */
  margin-bottom: 0;
}

.contact__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-lg);
  /* 見出し下線→電話番号/メールボタン上端=73px(w1920基準) */
  margin-top: var(--contact-heading-gap);
}

/* 左: 電話 */
.contact__phone {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  /* 電話番号下端→time上端=37px(w1920基準) */
  gap: var(--contact-phone-time-gap);
}

.contact__phone-hours {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700; /* access__postcode/streetと同ウェイト */
  line-height: 1; /* 行間の余白(ハーフリーディング)をなくし、gapの数値がそのまま隙間になるようにする */
  color: var(--color-blue);
}

/* 右: メール */
.contact__mail {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

/* 電話番号・メールボタン共通（親要素幅いっぱいに伸縮、PCではデザイン値755pxを上限） */
.contact__phone-number,
.contact__mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 500px;
  height: 3.5rem;

  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-section-title); /* .contact__headingと同サイズ */
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 9999px;

  transition: background-color var(--transition-base), transform var(--transition-base);
}

/* ハイフンだけ数字の中央に見えるよう、少し上に動かす。line-heightは
   baseline揃えの都合上ほぼ効果がなかったため、position:relative+topで
   直接ずらす方式に変更した(暫定値、見た目を確認して調整) */
.contact__phone-number-dash {
  position: relative;
  top: -0.08em;
  padding: 0.1rem;
}

.contact__phone-number:hover,
.contact__mail-btn:hover {
  background-color: #A81F1F;
  transform: translateY(-2px);
}

/* SPデザイン画像(_SP_access_contact_footer.jpg)準拠：電話・メールを縦並びにし、
   メールボタンは赤ではなく青にする */
@media (max-width: 767px) {
  .contact__grid {
    flex-direction: column;
    align-items: stretch;
  }

  /* 縦積みでは高さを競り合わせる必要がないため、横並び用のflex:1を解除する */
  .contact__phone,
  .contact__mail {
    flex: none;
  }

  .contact__mail-btn {
    background-color: var(--color-blue);
  }

  .contact__mail-btn:hover {
    background-color: var(--color-blue-dark);
  }
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.footer {
  --footer-nav-h: clamp(72px, calc(136 / 1920 * 100vw), 136px);
  --footer-bottom-h: clamp(160px, calc(380 / 1920 * 100vw), 380px);
  background-color: var(--color-white);
}

/* ---------- 白帯: ナビゲーション ---------- */
.footer__bar {
  min-height: var(--footer-nav-h);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  .footer__bar {
    display: none;
  }
}

.footer__bar .footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-nav-h);
}

.footer__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  width: 100%;
}

/* 「アクセス」の直前に挿入した、見た目の大きさを持たない改行専用のli。
   通常は何の効果もない(=1行に収まる幅では従来通り8項目が横一列)。
   .footer__menuのgap(列方向2.5rem)はこのspacerの前後にも通常通り
   適用されてしまい、何もしないと「ご相談の流れ」→「アクセス」間だけ
   2.5rem分余計に開いてしまう(spacerを挟むことで2.5rem×2になる)ため、
   spacer自身にその半分ずつの負のmarginを与えて相殺し、常に(強制改行が
   効いていない時はもちろん、効いている時の行送り後も)前後の見た目の
   間隔が他の項目同士と同じ2.5remのままになるようにする。
   実測で自然に2段へ折り返り始めるのが901〜1009px(この範囲より広いと
   1行に収まり、901px未満は.footer__bar自体がSPナビに切り替わり非表示に
   なる)のため、その範囲でだけflex-basis:100%にして「このアイテムは今の
   行に収まらない」という状態を作り、強制的にここで改行させる。
   spacer自体は幅0で改行の起点になるだけなので、後に続く「アクセス」
   「お問い合わせ」は通常のアイテムとして新しい行を一緒に共有できる
   (「アクセス」自身にflex-basis:100%を付けると、そのアイテム自身が
   行を独占してしまい「お問い合わせ」がさらに別行へ追い出されてしまうため、
   専用のspacerで改行だけを切り出す必要がある) */
.footer__menu-break {
  flex-basis: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin-block: 0;
  margin-inline: -1.25rem; /* gap(2.5rem)の半分ずつを前後から相殺 */
  overflow: hidden;
}

@media (min-width: 901px) and (max-width: 1009px) {
  .footer__menu-break {
    flex-basis: 100%;
  }
}

.footer__menu a {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
  transition: color var(--transition-base);
}

.footer__menu a:hover {
  color: var(--color-blue);
}

/* ---------- 青帯: プライバシーポリシー・コピーライト ---------- */
.footer__bottom {
  min-height: var(--footer-bottom-h);
  background-color: var(--color-bg-footer);
}

.footer__bottom .footer__inner {
  display: flex;
  align-items: flex-end;
  min-height: var(--footer-bottom-h);
  padding-block: var(--space-md);
}

.footer__meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.footer__policy-link {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-base);
}

/* .header__list aの下線ホバーと同じ考え方(opacityは背景の青帯が
   透けて見えるだけで分かりづらいため、はっきり見える下線に統一) */
.footer__policy-link:hover {
  text-decoration-color: var(--color-white);
}

.footer__copyright small {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

/* ============================================================
   13. 下層ページ 共通レイアウト
   ============================================================ */

/* ----------------------------------------
   共通FV
   ---------------------------------------- */

/* w1920基準617px、比率を保って可変(1920:617のアスペクト比) */
.page-fv {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: var(--header-height); /* 固定ヘッダーの下から開始 */
  aspect-ratio: 1920 / 617;
  overflow: hidden;
}

.page-fv__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #5b6978;
}

/* 下層ページFV共通：写真の上に薄い水色のオーバーレイをかける */
.page-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d2e6f3;
  opacity: 0.6;
}

/* 下層ページFV共通：タイトル文字に白いシャドウを入れ、写真の上でも読みやすくする */
.page-fv__title,
.page-fv__lead {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* FV上端からタイトルまでは178px(w1920基準・617pxに対する28.8492%)で絶対配置。
   タイトル→下線の間隔(45px)は、下線をタイトル直下の通常フロー配置にすることで
   フォントサイズが下限に達した場合(SP等)でも文字と重ならないようにする。
   左右中央揃えは.page-fv__headingでまとめて行う */
.page-fv__heading {
  position: absolute;
  top: 28.8492%; /* 178 / 617 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
}

.page-fv__title {
  margin: 0;
  font-family: var(--font-serif);
  /* ウィンドウ幅を狭めても改行させたくないため、通常の--fs-section-titleと
     「.page-fv__heading(max-width:90%)に収まるであろう幅」の小さい方を採用する。
     文字幅は実測でおよそ7×font-size(letter-spacing込み)のため、90vwを
     8で割って安全マージンを見込む(最長想定「個人のお客様へ」7文字に対応) */
  font-size: min(var(--fs-section-title), calc(90vw / 8));
  font-weight: 700;
  color: #48607a;
  text-align: center;
  letter-spacing: 0.15em;
  white-space: nowrap;
}


.page-fv__underline {
  margin-top: clamp(16px, calc(45 / 1920 * 100vw), 45px);
  /* 幅はw1920基準625pxで可変、太さは縮小すると見えなくなるため1.5px固定 */
  width: clamp(156px, calc(625 / 1920 * 100vw), 625px);
  height: 1.5px;
  background-color: var(--color-white);
}


/* ----------------------------------------
   共通セクション
   ---------------------------------------- */

.page-section {
  padding-block: var(--space-2xl);
}

/* .page-fvを表示しないページ(プライバシーポリシー等)は、.page-fv自身が
   持っていた固定ヘッダー分のmargin-topをこちらで肩代わりする */
.page-section--no-fv {
  margin-top: var(--header-height);
}

.page-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 下層ページ末尾のお問い合わせ(TOPページと共通パーツ)：PCのみ表示。
   SP表示するかは判断待ちのため、今回は明示的に非表示にしておく */
@media (max-width: 767px) {
  .page-contact-cta {
    display: none;
  }
}


/* ----------------------------------------
   本文幅
   ---------------------------------------- */

/* 以前は固定1000pxだったが、対応業務例など下層ページの各コンテンツが
   1920px時1600pxまで伸びる他セクション(--container-max利用箇所)と幅の
   見え方が揃わず、特に取扱業務ページの右カラムで折り返しが多発していたため、
   サイト全体の基準である--container-max(1920pxで1600px、以降1024pxまで比例縮小)
   に統一する */
.page-content {
  max-width: var(--container-max);
  margin-inline: auto;
}

.page-content>*+* {
  margin-top: 1.5rem;
}


/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 767px) {

  /* .page-fvはaspect-ratio(1920/617)通りだと狭い画面でかなり低くなる
     (375px幅で120.5px)ため、下層ページ全体で高さを統一するためここで
     min-heightを設ける。タイトルの縦位置はPCと同じ%指定(.page-fv__heading
     のtop:28.8492%)を基準にしつつ、150pxになった分だけ少し上に詰める */
  .page-fv {
    min-height: 150px;
  }

  .page-fv__heading {
    top: calc(28.8492% - 10px);
  }

  .page-fv__title {
    font-size: 25px;
  }

  .page-fv__lead {
    font-size: 25px;
    /* 文字幅を少し詰める(PC用の0.15emのままだと横に広がりすぎるため) */
    letter-spacing: 0.05em;
  }

  .page-fv__underline {
    /* 1920px基準の比率(156px)のままだと詰まって見えないため、SPでは固定値で少し狭める */
    width: 120px;
    /* 上(タイトル/lead)との間隔を詰める */
    margin-top: 8px;
  }

  .page-section {
    padding-block: var(--space-xl);
  }

}

/* ============================================================
   15. 下層ページ レスポンシブ・hover・微調整
   ============================================================ */

/* ----------------------------------------
   Hover
   ---------------------------------------- */

.page-fv__title,
.breadcrumb a {
  transition: all var(--transition-base);
}

.breadcrumb a:hover {
  color: var(--color-blue);
}

.page-content a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity var(--transition-base);
}

/* .cta-btnはボタンとして独自に色・下線なしのスタイルを持つため、
   .page-content a(下線あり・青文字)の指定より優先させる */
.page-content .cta-btn {
  text-decoration: none;
}

.page-content .cta-btn--red {
  color: var(--color-white);
}

.page-content .cta-btn--yellow {
  color: var(--color-text);
}

.page-content a:hover {
  opacity: .7;
}


/* ----------------------------------------
   本文
   ---------------------------------------- */

.page-content p {
  color: var(--color-text-sub);
  line-height: 1.5;
}

/* 見出し(h1〜h4)。.header__list a/.cta-btn/.access__postcode等と同じ
   「--font-sans(既定)+bold」の控えめな太字見出しに揃える(ブロックエディタの
   既定見た目のまま出てしまうのを防ぐ) */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  color: #48607a;
  font-weight: 700;
  line-height: 1.5;
}

/* ページ名(本文中いちばん最初の見出し。プライバシーポリシー等、
   本文が全てh2で書かれページと見出しの区別がタグ上にないため
   :first-of-typeで判定する)だけは、サイトの大見出しと同じ
   --font-serif(Midashi Go)にする */
.page-content h1:first-of-type,
.page-content h2:first-of-type {
  font-family: var(--font-serif);
}

@media (max-width: 767px) {
  .page-content h1:first-of-type,
  .page-content h2:first-of-type {
    padding-top: 16px;
  }
}

.page-content h1,
.page-content h2 {
  font-size: var(--fs-xl);
}

/* ページ名(本文中いちばん最初の見出し)以外のh2(プライバシーポリシーの
   「1.名称・住所等」等、各項目の見出し)は、ページ名より一段小さくする */
.page-content h2:not(:first-of-type) {
  font-size: var(--fs-lg);
}

.page-content h3 {
  font-size: var(--fs-lg);
}

.page-content h4 {
  font-size: var(--fs-md);
}

.page-content h1 + *,
.page-content h2 + *,
.page-content h3 + *,
.page-content h4 + * {
  margin-top: 0.75rem;
}

.page-content ul,
.page-content ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.page-content ul {
  list-style: disc;
}

.page-content ol {
  list-style: decimal;
}

.page-content li+li {
  margin-top: .5rem;
}

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}

.page-content th,
.page-content td {
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
}

.page-content th {
  width: 30%;
  background: var(--color-blue-light);
  font-weight: 700;
}


/* ----------------------------------------
   Tablet
   ---------------------------------------- */

@media (min-width:768px) {

  .page-section {
    padding-block: 5rem;
  }

  .page-content {
    font-size: var(--fs-base);
  }

}


/* ----------------------------------------
   Desktop
   ---------------------------------------- */

@media (min-width:1024px) {

  .page-section {
    padding-block: var(--space-2xl);
  }

}


/* ----------------------------------------
   Mobile
   ---------------------------------------- */

@media (max-width:767px) {

  .breadcrumb__inner {
    padding-block: .75rem;
  }

  .breadcrumb__list {
    font-size: .7rem;
  }

  .page-section {
    padding-block: var(--space-xl);
  }

  .page-content {
    max-width: 100%;
  }

  .page-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

}

/* ============================================================
   SP用追従CTAバー（画面下部固定・電話/LINE）
   ・高さ55pxで固定、幅213px(電話)/233px(LINE)は420px基準で比例スケール
   ・中央の斜めは、幅の重なり分(213+233-420=26px、420基準で比例)がそのまま
     切り替わり角度になる。サイトの他の斜め要素と同じ「上に向かって右へ」の向き
   ・PCでは非表示、767px以下でのみ表示
   ============================================================ */
.sp-fixed-cta {
  display: none;
}

@media (max-width: 767px) {
  .sp-fixed-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    height: 55px;
  }

  .sp-fixed-cta__phone,
  .sp-fixed-cta__line {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    color: var(--color-white);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    text-align: center;
  }

  .sp-fixed-cta__icon {
    height: 24px;
    width: auto;
  }

  .sp-fixed-cta__label-sub {
    font-weight: 400;
    font-size: 0.85em;
  }

  .sp-fixed-cta__phone {
    left: 0;
    width: calc(213 / 420 * 100vw);
    background-color: var(--color-red);
    clip-path: polygon(0 0, 100% 0, calc(100% - (26 / 420 * 100vw)) 100%, 0 100%);
  }

  .sp-fixed-cta__line {
    right: 0;
    width: calc(233 / 420 * 100vw);
    background-color: var(--color-blue);
    clip-path: polygon(calc(26 / 420 * 100vw) 0, 100% 0, 100% 100%, 0 100%);
  }

  /* 要件: 追従バーの高さ分、ページ最下部にpadding-bottomを確保し本文と重ならないようにする
     （お問い合わせページはバー自体を表示しないため対象外） */
  body:not(.no-sp-fixed-cta) {
    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   15.5 お問い合わせページ：フォーム上部(案内文＋お電話／LINE案内)
   参考: スクリーンショット 2026-08-27 21.56.12
   ============================================================ */

/* 固定breakpointではなく、.contact-methods自身の幅を基準に2カラム/1カラムを
   切り替える(container query)。閾値は下の@containerルール側にまとめてある */
.contact-methods-container {
  container-type: inline-size;
  container-name: contact-methods;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* ビューポート基準(100vw)ではなく.contact-methods-containerのコンテナ幅
     (100cqw)を基準にする。2カラム時の実際に使える幅は画面幅そのものではなく
     その半分程度しかないため、100vw基準のままだと(特に768〜1150px幅あたりで)
     グリッドが自分のコンテナより横に広がってしまう(実測で最大180pxはみ出し)。
     基準となる1920pxビューポート時、.contact-methods-containerの実測幅は
     1560pxなので、そこを100cqwの基準にして「1920px幅の時80px」という
     見た目のサイズ感を保ったまま、コンテナ実幅に追従させる */
  gap: clamp(48px, calc(80 / 1560 * 100cqw), 80px);
  margin-bottom: 3rem;
}

/* 左: 案内文(上下を金の罫線で挟む)。罫線2本の間(文字も含む)が1920px幅時
   420pxになるようにしたいが、文字の行数はコンテナ幅次第で変わりうるため、
   gapを手計算するのではなく、コンテナ自体の高さを420pxに固定した上で
   justify-content:space-betweenで「上端に罫線・下端に罫線・その間に文字」を
   自動で割り振る(行数が変わっても常に420pxちょうどに収まる) */
.contact-methods__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: clamp(190px, calc(450 / 1920 * 100vw), 450px);
}

.contact-methods__rule {
  display: block;
  /* コンテナ幅(100cqw、理由は.contact-methodsのgapコメント参照)基準で、
     1920pxビューポート相当(コンテナ実幅1560px)時712pxを上限に縮小する
     (下限は上限の60%=427px)。ただしその427px固定下限のままだと極端に
     狭い画面で画面幅を超えてはみ出すため、コンテナ幅の80%も下回る場合は
     そちらを優先する */
  width: min(80cqw, clamp(427px, calc(712 / 1560 * 100cqw), 712px));
  height: 2px;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

/* .page-content p{line-height:1.5}(詳細度0,1,1)より優先させるため
   要素セレクタ付きにする(p.contact-methods__lead) */
p.contact-methods__lead {
  text-align: center;
  color: var(--color-text-sub);
  line-height: 1.8;
  font-family: var(--font-serif);
  /* 1920px幅時35pxを上限に、画面幅に比例して縮小する(下限は16px) */
  font-size: clamp(16px, calc(35 / 1920 * 100vw), 35px);
}

/* フォーム利用案内文(.contact-methods__leadの下に追加、フォーム本体への導入)。
   本文用の--font-sans(--font-serifより1段細い)を使う */
.contact-methods__form-notice {
  text-align: center;
  color: var(--color-text-sub);
  font-family: var(--font-sans);
  line-height: 1.8;
  font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px);
}

/* 右: お電話／LINEの案内パネル */
.contact-methods__panel {
  /* お電話／LINE共通のタブ高さの基準(1920px幅時74pxを上限、下限は60%の44.4px)。
     .contact-methods__tabだけでなく.contact-methods__row--line-detail側からも
     参照する(QRの上辺をタブの上辺に揃えるため)ため、両方の親であるここで定義する */
  /* 1920px時の上限を元の74pxの80%(59.2px)に縮小(下限44.4pxは変更なし)。
     ただし下限44.4px(=タブ幅234px)は固定pxのため、.contact-methods-container
     自体が狭いSP幅では、80cqw基準で縮む.contact-methods__panel(下記参照)より
     タブの方が広くなってしまい、パネルからはみ出て横スクロールが必要になる
     不具合があった。タブの見た目幅が常にコンテナ幅の65%以内に収まるよう
     (パネル自体の下限80cqwより余裕を持たせ、skewXによる左右のはみ出し分の
     余白を残す)、コンテナ幅基準の上限も追加する */
  --contact-tab-h: min(clamp(44.4px, calc(59.2 / 1920 * 100vw), 59.2px), calc(65cqw * 74 / 390));
  /* .contact-methods__divider/.contact-methods__ruleと同じ基準幅にする。
     グリッドカラム幅にstretchさせると罫線の712pxを超えてタブ/QR/リンクが
     はみ出るため、パネル自体を罫線と同じ幅に固定する(cqw基準・min(80cqw, ...)
     の理由は.contact-methods__ruleのコメント参照) */
  width: min(80cqw, clamp(427px, calc(712 / 1560 * 100cqw), 712px));
  display: flex;
  flex-direction: column;
}

.contact-methods__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contact-methods__row + .contact-methods__row {
  margin-top: var(--space-sm);
}

/* LINEタブ(.contact-methods__row)の直後にくる.contact-methods__row--line-detailは、
   QR(このブロック内で最も背が高い要素)の上辺がLINEタブの上辺と揃って見えるように、
   タブの高さぶん引き上げる。ブロック内はalign-items:centerのままなので、
   QRより低いcontact-methods__line-linkは引き上げてもタブと重ならない(タブより下に来る) */
.contact-methods__row + .contact-methods__row--line-detail {
  margin-top: calc(-1 * var(--contact-tab-h));
}

/* お電話／LINEタブ(色違いの塗りつぶし平行四辺形)。.features__readmore::before
   (1524行目付近)と同じ「左右をtan()で逆方向にオフセットした矩形をskewXする」
   手法(左右の辺が同じ角度で平行に傾く、真の平行四辺形)。
   塗りは::before側が持ち、中のアイコン・文字は歪ませたくないので
   それぞれz-index:1で::beforeの上に重ねる */
.contact-methods__tab {
  /* --contact-tab-h(.contact-methods__panelで定義)だけを比率のもとにし、
     幅・文字サイズ・アイコンの高さは全てこの1つの値から比率(390/74、25/74、57/74)で
     導出する。別々にclamp()を書くと、後から片方だけ値を変えた時に
     ズレる(以前起きた不具合)ため、常に連動するようにする */
  position: relative;
  display: inline-flex;
  width: calc(var(--contact-tab-h) * 390 / 74);
  height: var(--contact-tab-h);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(var(--contact-tab-h) * 25 / 74);
  white-space: nowrap;
}

/* 傾き量(tan(angle)*h)を左右にフルで使うと、下辺はタブの箱に揃うが上辺が
   右に飛び出て、平行四辺形全体の重心がタブの箱の中心からズレる。
   左右とも半分(tan(angle)*h / 2)にすることで、上辺は右に半分・下辺は左に
   半分だけ飛び出す形になり、重心(=バウンディングボックスの中心)がタブの
   箱の中心にちょうど一致する */
.contact-methods__tab::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--contact-tab-h) / 2);
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--contact-tab-h) / 2);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

.contact-methods__tab--phone::before {
  background-color: var(--color-red);
}

.contact-methods__tab--line::before {
  background-color: var(--color-blue);
}

/* アイコン・文字をまとめて::beforeの平行四辺形の中央に配置する。
   .contact-methods__tab自体のpadding基準ではなく、::beforeと同じ
   box(inset:0)を使って中央揃えすることで、常に確実に中央にくる */
.contact-methods__tab-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

.contact-methods__tab-icon {
  /* 1920px幅時57pxを上限に、--contact-tab-hと同じ比率(57/74)で連動する */
  height: calc(var(--contact-tab-h) * 57 / 74);
  width: auto;
}

.contact-methods__tab-label {
  font-size: 24px; /* 元30pxの80% */
}

.contact-methods__hours {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-red);
}

.contact-methods__hours-day,
.contact-methods__hours-time {
  color: var(--color-red);
  /* 1920px幅時の上限を元の31pxの80%(24.8px)に縮小(下限19pxは変更なし) */
  font-size: clamp(19px, calc(24.8 / 1920 * 100vw), 24.8px);
  padding-left: 2rem;
}

/* .page-content a(下線あり・青文字)より優先させるため、.page-content込みで指定する */
.page-content .contact-methods__phone-number {
  display: block;
  margin-top: var(--space-sm);
  /* line-height:normalだと行の高さが文字より上下に約15px/15.5pxずつ大きく、
     見た目の余白が実際のmarginより広く見えてしまっていた(線→文字下端が
     実測39.5pxなのに、線→ボックス下端のmarginは24pxしかなかった)。
     font-sizeと同じ式にして行の高さをほぼ文字ぴったりにし、
     見た目の余白=marginになるようにする */
  /* 下限35px固定だと、実測237.66px幅(k=6.7903px/font-size-px)の文字列が
     SPの狭いコンテナ幅(.contact-methods__panelは80cqw基準で縮む)を
     超えてはみ出し、横スクロールが必要になる不具合があった。文字幅が
     常にコンテナ幅の65%以内に収まるよう、コンテナ幅基準の上限を追加する
     (65cqw / 6.7903 ≒ 9.573cqw) */
  line-height: min(clamp(35px, calc(65.6 / 1920 * 100vw), 65.6px), 9.573cqw);
  font-family: var(--font-serif);
  /* 1920px幅時の上限を元の82pxの80%(65.6px)に縮小(下限35pxは変更なし) */
  font-size: min(clamp(35px, calc(65.6 / 1920 * 100vw), 65.6px), 9.573cqw);
  font-weight: 700;
  color: var(--color-red);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.contact-methods__divider {
  display: block;
  /* コンテナ幅(100cqw)基準。理由・詳細は.contact-methods__ruleのコメント参照 */
  width: min(80cqw, clamp(427px, calc(712 / 1560 * 100cqw), 712px));
  height: 2px;
  /* line-height:normalによる見た目の余白ぶん(実測15.5px)を足し、
     線→電話番号の見た目の下端の間隔(実測39.5px、これを理想の余白とする)に
     線→LINEタブの間隔も揃える。line-height修正後は電話番号側もボックス=見た目
     になるため、両側とも同じmargin-blockでちょうど39.5pxになる */
  margin-block: calc(var(--space-md) + 15.5px);
  background-color: var(--color-gold);
}

.contact-methods__row--line-detail {
  justify-content: space-between;
}

.page-content .contact-methods__line-link {
  font-family: var(--font-serif);
  font-weight: 700;
  /* 下限19px固定だと、実測239.93px幅(k=12.628px/font-size-px、文字数が多く
     phone-numberより実は幅がある)の文字列がSPの狭いコンテナ幅を超えて
     はみ出し、横スクロールが必要になる不具合があった。文字幅が常に
     コンテナ幅の65%以内に収まるよう、コンテナ幅基準の上限を追加する
     (65cqw / 12.628 ≒ 5.147cqw) */
  font-size: min(clamp(19px, calc(24.8 / 1920 * 100vw), 24.8px), 5.147cqw);
  color: var(--color-blue);
  text-decoration: none;
  /* .contact-methods__row--line-detailの上端はLINEタブの上端に揃えてある
     (--contact-tab-h分引き上げているため)。align-self:flex-startにして、
     そこからタブ自身の高さ(--contact-tab-h)+30pxだけ下げることで、
     QRの高さ(画面幅で可変)に関係なく「タブ下端→リンク上端」が常に
     固定30pxになるようにする */
  align-self: flex-start;
  margin-top: calc(var(--contact-tab-h) + 30px);
}

/* PCではQRコードを表示、SPでは自分の画面のQRを読み取れないためボタンに切り替える */
.contact-methods__line-qr {
  display: block;
  /* 1920px幅時の上限を元の210pxの80%(168px)に縮小(下限126pxは変更なし) */
  width: clamp(126px, calc(168 / 1920 * 100vw), 168px);
  height: clamp(126px, calc(168 / 1920 * 100vw), 168px);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-md);
}

.contact-methods__line-btn {
  display: none;
}

/* 2カラムの中身(左: 案内文、右: タブ+料金パネル)が実際に収まらなくなる幅で
   1カラムに切り替える。767pxのような固定値ではなく、.contact-methods自身の
   幅(container query)を基準にする。
   閾値920pxの根拠: .contact-methods__rule/.contact-methods__divider/
   .contact-methods__panelはいずれも下限427px固定(スマホでのはみ出し対策として
   80cqwにもなるが、この閾値近辺ではまだ427pxの方が大きい)。2カラム分
   427px+427pxに、gapの下限48pxを足すと902pxが2カラムとして必要な最小幅。
   それを下回るとカラム同士がコンテナ幅を超えてはみ出す(実測で最大180px)ため、
   902pxに達する前(余裕を見て920px)で1カラムに切り替える */
@container contact-methods (max-width: 920px) {
  .contact-methods {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* 縦並びになったら.contact-methods__intro同様、中身を中央揃えにする。
     align-itemsはpanel自身の子要素(タブ+営業時間の行、電話番号、罫線など)を
     各々の内容幅ぶんだけ中央寄せし、justify-selfはpanelの箱自体を
     1カラムぶんの幅の中央に置く */
  .contact-methods__panel {
    align-items: center;
    justify-self: center;
  }

  /* お電話タブ(.contact-methods__tab--phone)と営業時間(.contact-methods__hours)を
     横並びから縦並びに。gapはrowの既存gap(var(--space-md))がそのまま
     縦方向の余白として効く。横並び用に付けていたpadding-leftは不要になるため消す */
  .contact-methods__row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .contact-methods__hours {
    flex-direction: row;
    gap: 0.5em;
  }

  .contact-methods__hours-day,
  .contact-methods__hours-time {
    padding-left: 0;
  }

  .page-content .contact-methods__phone-number {
    margin-top: 0.7rem;
  }

  .contact-methods__divider {
    margin-block: 2rem;
  }

  .contact-methods__line-qr {
    display: none;
  }

  /* QRを非表示にする幅では、QRの上辺をタブに揃えるための引き上げ
     (margin-top: calc(-1 * var(--contact-tab-h)))が不要かつ邪魔になり、
     LINEタブとlinkが重なってしまうため、通常のrow間隔に戻す */
  .contact-methods__row + .contact-methods__row--line-detail {
    margin-top: var(--space-sm);
  }

  /* この幅では.contact-methods__row--line-detail自体が既にタブの下端+
     var(--space-sm)から始まる(直前のルール)ため、通常時のmargin-top
     (calc(var(--contact-tab-h) + 30px)、行の上端=タブの上端という前提)を
     そのまま使うと二重に加算されてしまう。ここだけ「タブ下端→リンク上端0.7rem」
     になる分だけに上書きする(var(--space-sm)が相殺されるよう計算式のまま残す) */
  .page-content .contact-methods__line-link {
    margin-top: calc(0.7rem - var(--space-sm));
  }

  .contact-methods__row--line-detail {
    justify-content: center;
  }

  /* .page-content a(青文字・下線あり)より優先させるため、.page-content込みで指定する */
  .page-content .contact-methods__line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    max-width: 320px;
    height: 55px;
    margin-top: 0.7rem;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-family: var(--font-serif);
    font-weight: 700;
    text-decoration: none;
    border-radius: 9999px;
  }

  .contact-methods__line-btn-icon {
    height: 22px;
    width: auto;
  }
}

/* ============================================================
   16. お問い合わせフォーム（Contact Form 7）
   ============================================================ */

.contact-form {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
}

.contact-form__row {
  width: 100%;
  min-width: 0; /* CF7のinput[size]属性がflexアイテムの内容最小幅を広げ、SPで横スクロールが発生するのを防ぐ */
  margin-bottom: var(--space-md);
}

.contact-form__row--half {
  width: 100%;
}

@media (min-width: 768px) {
  .contact-form__row--half {
    width: calc(50% - var(--space-lg) / 2);
  }
}

.contact-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--color-text-sub);
}

.contact-form__required {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
  line-height: 1.3;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition-base);
}

.contact-form__textarea {
  min-height: 200px;
  resize: vertical;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

.contact-form__input.wpcf7-not-valid,
.contact-form__select.wpcf7-not-valid,
.contact-form__textarea.wpcf7-not-valid {
  border-color: var(--color-red);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-red);
  font-size: var(--fs-sm);
}

.contact-form__row--acceptance {
  display: flex;
  align-items: flex-start;
}

.contact-form__acceptance {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.contact-form__acceptance input[type="checkbox"] {
  margin-top: 0.3em;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.contact-form__consent-text {
  color: var(--color-text);
}

.contact-form__consent-text a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form__consent-text a:hover {
  opacity: 0.7;
}

.contact-form__submit-row {
  position: relative;
  width: 100%;
  margin-top: var(--space-md);
  text-align: center;
}

.contact-form__submit,
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  height: 64px;
  border: none;
  border-radius: 9999px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.contact-form__submit:hover,
.wpcf7-submit:hover {
  background-color: #A81F1F;
  transform: translateY(-2px);
}

.wpcf7-spinner {
  position: absolute;
  margin-left: 0.8rem;
}

/* SPでは送信ボタンが行幅いっぱいになり、絶対配置のスピナーを横に置く余白が
   無くなって画面右にはみ出し、横スクロールが発生してしまう。
   ボタンの下に回り込ませる配置に切り替えて、はみ出しを防ぐ */
@media (max-width: 767px) {
  .wpcf7-spinner {
    position: static;
    display: block;
    margin: 0.8rem auto 0;
  }
}

.wpcf7-form.sent .contact-form__submit,
.wpcf7-form.sent .wpcf7-submit {
  opacity: 0.6;
  pointer-events: none;
}

.wpcf7-response-output {
  margin-top: var(--space-md);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  text-align: center;
  /* CF7の管理画面(メッセージ欄)はプレーンテキストのみでHTMLタグは使えないため、
     <br>の代わりに実際の改行(Enterキー)で改行してもらう想定。
     white-space:pre-lineでその改行をそのまま表示に反映する */
  white-space: pre-line;
}

.wpcf7-form.sent .wpcf7-response-output {
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue-light);
  color: var(--color-blue-dark);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
  border: none;
  color: var(--color-red);
}

/* ============================================================
   17. 事務所についてページ（page.php + 固定コンテンツ／about）
   ============================================================ */

/* .page-content(max-width:1000px)の制約を抜けて、w1920で1600pxのコンテナに合わせるための breakout。
   .page-fvと同じ全幅ブリード手法 */
.about-content-breakout {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* メガメニュー(#philosophy/#features/#logo)からのアンカーリンク着地時に、
   固定ヘッダーの下に隠れないようスクロール位置をヘッダー分オフセットする */
#philosophy,
#features,
#logo {
  scroll-margin-top: var(--header-height);
}

/* ---------- 理念セクション ---------- */
/* コンテナは.about-logo-story__inner(同じ.about-content-breakout内の
   兄弟セクション)と同じvar(--container-max)+var(--container-pad)基準にし、
   左右の外側の端を揃える(以前は100vw基準の独自の1198px幅を使っていたため
   ズレていた)。
   以前はlead:gap:textの比率(370:68:760)を「コンテナの中身の想定幅
   (--philosophy-group-w)」に対する割合として計算していたが、
   --philosophy-group-wの元になるvar(--container-max)自体が1024px未満の
   ビューポートでも1024pxで頭打ちになる一方、.about-philosophy__inner自体は
   width:100%でビューポートに合わせて縮むため、860〜1030px付近で
   「計算上のグループ幅」と「実際に描画できる幅」がズレて中身があふれ、
   svgが左に完全にはみ出す不具合があった。
   .about-logo-story__row(見出し列=flex:0 0 auto、本文列=flex:1;min-width:0)
   と同じ「実際のflexレイアウトに任せて自動で縮む」方式に統一することで、
   この不具合を根本的に解消しつつ、本文(.about-philosophy__text)の開始位置も
   .about-logo-story__content(本文)の開始位置とちょうど揃うようにする
   (lead列の幅・gapを.about-logo-story__heading-col/rowと同じ式にしたため) */
.about-philosophy__inner {
  /* .about-logo-story__innerと同じコンテナ基準(var(--container-max)+
     var(--container-pad))に揃える。これにより.about-logo-story__rowと
     左右の外側の端が一致する */
  max-width: var(--container-max);
  margin-inline: auto;
  /* 左だけ.about-philosophy__lead-svg--bottom側のtranslateX(左シフト、
     最大76px・w1920基準)ぶん余分に確保し、左にはみ出すsvgが
     コンテナ幅の狭い画面でクリップされないようにする
     (右はvar(--container-pad)のみで.about-logo-story__innerと揃える) */
  padding-left: calc(var(--container-pad) + clamp(19px, calc(76 / 1920 * 100vw), 76px));
  padding-right: var(--container-pad);
  width: 100%;
  display: flex;
  align-items: center;
  /* 元のlead:gap:text=370:68:760比率のうち、gapの68px分(w1920基準)。
     --philosophy-group-w(var(--container-max)から算出)経由だと
     860〜1030px付近でコンテナの実際の幅とズレて中身があふれる不具合が
     あったため、直接100vw基準の値にする(そのため厳密な860px以下との
     接続はないが、862pxの縦積み時にすぐ上書きされるため実害はない) */
  gap: calc(68 / 1920 * 100vw);
  /* 次のセクション(ロゴに込めた想い/バー)との間隔はPCのみこの100px。
     860px以下(縦積み)では0にする(下のmedia query) */
  margin-bottom: 100px;
}

/* 見出し(シンボル+テキスト)。TOPページの.features__leadとは独立した
   aboutページ専用クラス(幅比率・gapともにこのページ専用の値)。
   元のlead:gap:text=370:68:760比率のうち、leadの370px分(w1920基準)。
   直接100vw基準の値にする理由はgap側のコメント参照 */
.about-philosophy__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  width: calc(370 / 1920 * 100vw);
}

.about-philosophy__lead-svg svg {
  width: 100%;
  max-width: 412px;
  display: block;
}

/* 下SVG(青)の右端を、上SVG(赤)の右端から左に76px(w1920基準・比率で可変)ずらす */
.about-philosophy__lead-svg--bottom {
  transform: translateX(calc(-1 * clamp(19px, calc(76 / 1920 * 100vw), 76px)));
}

.about-philosophy__lead-text-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  /* 上下の矢印(SVG)とのgap自体は上下均等(0.5rem)だが、見出しのline-height
     (フォントサイズの1.5倍)による余白が文字の実際のインクより下側に
     わずかに多く残るため、視覚的に文字が下寄りに見える。transformなら
     レイアウト(gap計算)に影響を与えずに見た目だけ上に補正できる。
     暫定値(確認して調整) */
  transform: translateY(-6px);
}

/* .page-content h1,h2{font-size:var(--fs-xl)}(詳細度0,1,1)より詳細度が低く
   負けてしまうため、h2.about-logo-story__heading(4976行目付近)と同じく
   要素セレクタを付けて優先させる */
h2.about-philosophy__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-about-heading);
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.15em;
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.about-philosophy__text {
  /* .about-logo-story__contentと同じflex:1;min-width:0で、lead列・gapを
     引いた残り幅ぴったりまで自動で伸縮する(コンテナはvar(--container-max)で
     1600px頭打ちのため、本文がむやみに広がりすぎることはない) */
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  line-height: 2;
  text-align: justify; /* .about-logo-story__textと同じ両端揃えに統一 */
}

/* 860px以下は縦積みに切り替える。横並びのまま本文カラムだけがどんどん
   狭まっていくと読みにくくなるため、その手前で縦積みにする。
   .about-philosophy__lead/__text双方の基底ルール(flex:0 0 auto/flex:1)より
   後ろに置くことで、同じ詳細度でも確実にこちらのflex:noneが勝つようにする */
@media (max-width: 860px) {
  .about-philosophy__inner {
    flex-direction: column;
    align-items: center;
    /* 860px(PC用100pxとの接続点)から420pxで70pxへ、その間は比例で縮める */
    margin-bottom: clamp(70px, calc(70px + (100vw - 420px) / 440px * 30px), 100px);
    /* 縦積み時はgapがlead→text間の縦方向の間隔になる。本文0.5行分
       (var(--fs-md) 18px × line-height 2 × 0.5行 = 18px。元は2行(72px)
       だったが、1.5行分(54px)縮めてほしいとの指定で18pxに変更)を
       基準gapに追加する */
    gap: calc(68 / 1920 * 100vw + 18px);
  }

  .about-philosophy__lead,
  .about-philosophy__text {
    flex: none;
    width: 100%;
  }

  .about-philosophy__text {
    max-width: 490px;
  }

  /* 縦積み時のlead幅。SP(390px前後)で200px、600px前後で250pxくらいが
     ちょうど良い見た目という指定から、この2点を通る直線で近似する
     (390px以下は200pxで下限固定、600px以上は250pxで上限固定) */
  .about-philosophy__lead {
    max-width: clamp(200px, calc(200px + (100vw - 390px) / 210px * 50px), 250px);
    /* 縦積み時は上下矢印(SVG)とテキストのgapを詰める */
    gap: 0rem;
  }

  /* 縦積み時、上下矢印(SVG)を80%に縮小する。svg自体はdisplay:blockの
     ままなので、margin-inline:autoで自身のラッパー内で中央寄せする
     (align-items:centerだけではラッパー自身が中央寄せされるだけで、
     ラッパーいっぱいに広がるblock要素のsvgは左寄りのままだった) */
  .about-philosophy__lead-svg svg {
    width: 80%;
    max-width: calc(412px * 0.8);
    margin-inline: auto;
  }
}

/* .page-content p{color:var(--color-text-sub)}より詳細度を上げて上書き */
.about-content-breakout .about-philosophy__text {
  color: #646364;
}

/* 767px以下(スマホ)では、理念のpaddingと本文サイズを
   取扱業務ページ(page-service.php)のSP側の値に揃える。
   ・本文: .service-detail__body相当のvar(--fs-base)(16px。18pxのvar(--fs-md)から変更)
   ・区切り: var(--space-xl)(64px、.page-sectionのSP側padding-blockと同じ値)を
     下側のpaddingとして持たせる(上側は付けない)。
   旧来の.about-philosophy__innerのmargin-bottom(70〜100pxのclamp、860px用)は
   このpaddingと二重に効いてしまうため767px以下では0にする */
@media (max-width: 767px) {
  .about-philosophy {
    padding-bottom: var(--space-xl);
  }

  .about-philosophy__inner {
    margin-bottom: 0;
  }

  .about-philosophy__text {
    font-size: var(--fs-base);
    /* .about-philosophy__inner側のpadding-left(40px)はleadのsvgの
       はみ出し分を見込んだ値で、本文には不要。縦積み時は本文だけ
       左に20px分はみ出させて、.about-logo-story__textと同じ左右20px
       (=var(--container-pad))の対称な余白に揃える */
    margin-left: -20px;
    width: calc(100% + 20px);
  }
  /* .about-logo-story__textのfont-size上書きは、5139行目付近の
     基底ルールより後ろに置く必要があるためこのブロックには含めず、
     そちらの直後に別途書く */
}

/* .page-content h1,h2{font-size:var(--fs-xl)}(詳細度0,0,1,1)より優先させるため
   要素セレクタ付きにする(h2.about-logo-story__heading)。フォントサイズは
   .about-philosophy__headingと同じ--fs-about-heading(1920px時53px)に統一。
   折り返し対策はfont-sizeではなく、狭い画面用の
   .about-logo-story__heading-col側のpadding調整で幅を確保する(下記参照) */
h2.about-logo-story__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-about-heading);
  white-space: nowrap;
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.15em;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.about-logo-story__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: clamp(156px, calc(625 / 1920 * 100vw), 625px);
  height: 2px;
  background-color: var(--color-gold);
  left: 0;
  width: 100%; /* headingの幅(=739pxカラムからpadding分を除いた625px相当)に一致させる */
}


/* 理念、1行目のみ太字に変更 */
.about-philosophy__highlight {
  font-family: var(--font-serif); /* Midashi Go MB31 */
  font-weight: normal; /* Midashi Go自体が太いウェイトのフォントなので、bold指定は不要 */
}

/* 幅は親要素(.about-logo-story__content)側のmax-widthで制御 */
.about-logo-story__text {
  font-size: var(--fs-md); /* 18px */
  line-height: 2;
}

/* .page-content p{color:var(--color-text-sub)}より詳細度を上げて上書き */
.about-content-breakout .about-logo-story__text {
  color: #646364;
}

/* ---------- ロゴに込めた想い ---------- */
.about-logo-story {
  position: relative;
  /* .about-logo-story__bar--bottomの実際の幅(下のwidth指定と同じ式を共有)。
     767px以下でロゴ→バー上端の間隔を4remぶん確保するpadding-bottomの
     計算に使う(バー自身の高さぶんを差し引かないと、バーの分だけ
     余白が余計に空いて見えてしまうため) */
  --about-bar-bottom-w: clamp(540px, calc(1080 / 1920 * 100vw), 1080px);
  /* --space-2xl(6rem=96px)は固定値のため、他の要素(バー幅やコンテナ幅)が
     vwに比例して広がる幅の広い画面では、この余白だけ相対的に狭く感じてしまう。
     800px時点の96px(--space-2xlそのまま)をちょうど良い基準として、
     それ以上の画面幅では比例して広げる(w1920で230px、以降は頭打ち) */
  padding-block: clamp(96px, calc(96 / 800 * 100vw), 230px);
  overflow: hidden;
}

/* 767px以下は理念側と揃えてvar(--space-xl)(64px)に統一する。
   詳細度が上のルールと同じ(0,1,0)のため、後ろに置くことで確実に上書きする。
   下側だけ、ロゴ→バー上端の見た目の間隔が4rem(SP画面のみ)になるよう、
   バー自身の高さ(--about-bar-bottom-w × 62/1312、section-divider-bar__symbol
   共通のaspect-ratio)を足す */
@media (max-width: 767px) {
  .about-logo-story {
    padding-top: var(--space-xl);
    padding-bottom: calc(4rem + var(--about-bar-bottom-w) * 62 / 1312);
    /* バー下端→footerの間隔を5.5remにする。この間隔の大半は.page-section
       (複数ページ共通クラス)側のpadding-bottom(var(--space-xl)=4rem)なので、
       ここではその不足分(5.5rem − 4rem)だけをmargin-bottomで足す。
       .page-section自体は他ページ(取扱業務・ご相談の流れ等)とも共用のため
       直接変更しない */
    margin-bottom: calc(5.5rem - var(--space-xl));
  }
}

@media (max-width: 590px) {
  .about-logo-story {
    /* このブレークポイント以下は.about-logo-story__bar--bottom自身も
       width:100%(≒100vw)に切り替わるため、ここも合わせる */
    --about-bar-bottom-w: 100vw;
  }
}

/* 見た目・形状はsection-divider-bar__symbolと共通(HTML側でそのクラスも併記)。
   ここでは位置とこのセクション固有の幅だけを指定する */
.about-logo-story__bar--top {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(600px, calc(1195 / 1920 * 100vw), 1195px);
}

.about-logo-story__bar--bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--about-bar-bottom-w);
}

/* 右端(このバーの右端からビューポート右端までの余白)が50pxを下回ったら、
   斜めカットをやめて全幅の帯にする。左端は0のまま・幅は下限600pxで
   固定されているため、余白=ビューポート幅-600。これが50になるのは
   ビューポート幅650pxの時(600+50=650) */
@media (max-width: 650px) {
  .about-logo-story__bar--top {
    width: 100%;
    clip-path: none;
  }
}

/* 左端(このバーの左端からビューポート左端までの余白)が50pxを下回ったら、
   斜めカットをやめて全幅の帯にする。右端は0のまま・幅は下限540pxで
   固定されているため、余白=ビューポート幅-540。これが50になるのは
   ビューポート幅590pxの時(540+50=590) */
@media (max-width: 590px) {
  .about-logo-story__bar--bottom {
    width: 100%;
    clip-path: none;
  }
}

.about-logo-story__inner {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 見出し739px(625+57*2) + gap31px + 本文830px = 1600px(w1920基準)。
   gapは固定値ではなくw1920基準で比率変動させる。見出しは本文に対して垂直中央揃え */
.about-logo-story__row {
  display: flex;
  align-items: center;
  gap: min(31px, calc(31 / 1920 * 100vw));
}

/* 739px(w1920基準)の見出しカラム。左右57pxパディング(最低20px)を持ち、
   内側のheading(box-sizing:border-boxのpadding分を除いた625px)が下線幅と一致するため中央揃えになる。
   paddingをheading自体ではなくラッパー側に持たせることで、
   ::after(下線)の位置基準(containing block)をheading自身の幅(=625px)だけにしている */
.about-logo-story__heading-col {
  flex: 0 0 auto;
  width: clamp(196px, calc(739 / 1920 * 100vw), 739px);
  padding-inline: clamp(20px, calc(57 / 1920 * 100vw), 57px);
}

.about-logo-story__heading {
  display: block;
  width: 100%;
  text-align: center;
}

/* 830pxは最大幅。固定幅ではなく、そこからウィンドウ幅(=使える残り幅)に応じて縮小する */
.about-logo-story__content {
  flex: 1;
  max-width: 830px;
  min-width: 0;
}

/* 850px以下は縦積みに切り替える。本文(.about-logo-story__content)は
   flex:1;min-width:0で技術的には縮み続けられるためoverflow自体は起きないが、
   700px程度まで我慢すると見出し列との間のgapがほぼ無くなり窮屈に見えるため、
   数値の厳密さより「横並びのまま詰めすぎない」ことを優先し850pxで切り替える。
   .about-logo-story__heading-col/__content双方の基底ルールより後ろに
   置くことで、同じ詳細度でも確実にこちらが勝つようにする */
@media (max-width: 850px) {
  .about-logo-story__row {
    flex-direction: column;
    align-items: center;
  }

  .about-logo-story__heading-col,
  .about-logo-story__content {
    width: 100%;
    max-width: 490px;
  }

  /* 「ロゴに込めた想い」がnowrapで収まる横幅を確保するため、
     横並び用のpadding(下線幅を625pxに揃える目的)は縦積みでは不要 */
  .about-logo-story__heading-col {
    padding-inline: 0;
  }
}

/* 本文は両端揃え(justify) */
.about-logo-story__text {
  text-align: justify;
}

@media (max-width: 767px) {
  .about-logo-story__text {
    font-size: var(--fs-base);
  }
}

.about-logo-story__logo-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.about-logo-story__logo {
  width: clamp(383px, calc(765 / 1920 * 100vw), 765px);
  height: clamp(124px, calc(247 / 1920 * 100vw), 247px);
}


/* ============================================================
   18. 弁護士紹介ページ（page-attorneys.php）
   ============================================================ */

/* 1920px基準、以降はウィンドウ幅に比例して縮小。
   写真595×920px・氏名バー1100×95pxは、氏名バーだけ1600pxコンテナの外の
   画面端(left:0/right:0)まで伸ばす。写真・本文は従来通り1600pxコンテナ内。
   角度は practice-panel の見出しバーと同じ共通角度(--panel-skew-angle)を流用 */
.attorneys-list {
  --attorney-photo-w: clamp(180px, calc(595 / 1920 * 100vw), 595px);
  --attorney-photo-h: clamp(277px, calc(920 / 1920 * 100vw), 920px);
  --attorney-bar-h: clamp(29px, calc(95 / 1920 * 100vw), 95px);
  --attorney-bar-w: clamp(330px, calc(1100 / 1920 * 100vw), 1100px);
  --attorney-gap: clamp(18px, calc(60 / 1920 * 100vw), 60px); /* 写真と本文グリッドの間、w1920で60px */
  display: flex;
  flex-direction: column;
  gap: clamp(64px, calc(160 / 1920 * 100vw), 160px);
}

/* 氏名バーをこのセクション内で画面端まで伸ばすためのブリード
   (.practice-panels__breakoutと同じ考え方。100vwはネストの深さに関わらず
   常に真のビューポート幅を指すため、この技法は1600pxコンテナの内側に
   ネストしていても正しく画面端に届く) */
.attorney {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

/* 通常配置(写真が左)：バーは画面右端(right:0)に揃え、斜辺は左辺のみ
   (上辺が右へ、下辺が左へずれる=practice-panel personalと同じ向き)。
   氏名はバー自身の左端(斜辺の先端)から230px相当の位置から開始する */
/* .attorney(100vw)いっぱいを覆う透明な配置用ボックスにする。帯自体の
   見た目(色・斜めの形)は::beforeへ移す。h2自身を100%(=真のビューポート幅)
   にすることで、中の.attorney__name-bar-innerがmin(83.333vw,1600px)を
   正しくビューポート基準で解決できるようにする(以前はh2自体が
   --attorney-bar-w(帯の見た目の幅)止まりで、その中に収まる中の要素も
   帯の幅までしか広がれず、.attorney__rowと同じ基準で中央揃えできなかった) */
.attorney__name-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--attorney-bar-h);
  z-index: 1;
}

.attorney__name-bar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--attorney-bar-w);
  background-color: var(--color-blue);
  clip-path: polygon(6.1603% 0, 100% 0, 100% 100%, 0 100%);
}

/* 逆配置(写真が右)：帯は画面左端(left:0)に揃え、斜辺は右辺のみ */
.attorney--reverse .attorney__name-bar::before {
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 93.8397% 0, 100% 100%, 0 100%);
}

/* 氏名を、写真下の本文と同じ「コンテナ(.attorney__row)幅→写真列を除いた
   残りの列」の中で中央揃えにする。.attorney__rowと全く同じmax-width+
   padding(写真幅+gap分)で残り幅を再現し、.attorney__contentと同じ
   max-widthのラベル(.attorney__name-labels)をその中でmargin-inline:autoする
   ことで、本文列(所属・略歴)と横位置・幅が常に一致する */
.attorney__name-bar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: min(83.333vw, 1600px);
  margin-inline: auto;
  box-sizing: border-box;
  padding-left: calc(var(--attorney-photo-w) + var(--attorney-gap));
}

.attorney--reverse .attorney__name-bar-inner {
  padding-left: 0;
  padding-right: calc(var(--attorney-photo-w) + var(--attorney-gap));
}

.attorney__name-labels {
  display: block;
  width: 100%;
  max-width: calc(clamp(494px, calc(823 / 1920 * 100vw), 823px) - 20px);
  margin-inline: auto;
  text-align: center;
}

.attorney__name-prefix,
.attorney__name-text {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
}

.attorney__name-prefix {
  font-size: clamp(18px, calc(32 / 1920 * 100vw), 32px);
}

/* 1920px幅時42pxを上限に、画面幅に比例して縮小する(下限は上限の60%) */
.attorney__name-text {
  font-size: clamp(25px, calc(42 / 1920 * 100vw), 42px);
}

/* .page-content h2 + *(詳細度0,1,1)がh2である.attorney__name-barの直後の
   要素に0.75rem(12px)のmargin-topを付けてしまい、.attorney__photoの上辺が
   .attorney__name-bar(position:absoluteでtop:0)より12px下にずれていた。
   .attorney__name-barは絶対配置で本来のフロー位置には影響しないため、
   その余白は不要。より詳細度の高いセレクタで打ち消す */
.attorney__name-bar + .attorney__row {
  margin-top: 0;
}

/* 写真・本文は1920px時1600px(=83.333%)に収める。--container-maxは
   1024pxの下限を持つため767px〜1024px幅では余白が0になってしまう
   (min()自体に下限を設けず、常に83.333%の比率で両端に余白ができるようにする) */
.attorney__row {
  max-width: min(83.333vw, 1600px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--attorney-photo-w) 1fr;
  column-gap: var(--attorney-gap);
}

.attorney--reverse .attorney__row {
  grid-template-columns: 1fr var(--attorney-photo-w);
}

.attorney__photo-frame {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.attorney--reverse .attorney__photo-frame {
  grid-column: 2;
}

.attorney__photo {
  width: 100%;
  height: var(--attorney-photo-h);
  object-fit: cover;
  display: block;
}

.attorney__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-light);
  border: 1px dashed var(--color-border);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
  text-align: center;
}

.attorney__body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* バーが画面端の絶対配置になった分、その高さ+余白をここで確保する */
  padding-top: calc(var(--attorney-bar-h) + clamp(24px, calc(48 / 1920 * 100vw), 48px));
}

.attorney--reverse .attorney__body {
  grid-column: 1;
}

/* 黄色い下線(.attorney__block-heading::after)は1920px幅時823pxを上限に
   比例して縮小する(下限は上限の60%)。見出し・本文はその下線から左右とも
   10px内側(固定px、比率にはしない)に収まるようにしたいため、
   ここでは「下線の幅 - 20px」を本文側の幅にする。下線側は
   .attorney__block-heading::afterで、この.attorney__contentの幅を
   左右に10pxずつはみ出させることで実現する(そちらのコメントも参照) */
.attorney__content {
  max-width: calc(clamp(494px, calc(823 / 1920 * 100vw), 823px) - 20px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(36 / 1920 * 100vw), 36px);
}

/* .page-content h3{font-size:var(--fs-lg)}(詳細度0,1,1)に負けないよう、
   要素セレクタ付きにする(h3.attorney__block-heading) */
h3.attorney__block-heading {
  font-family: var(--font-serif);
  font-size: clamp(18px, calc(31 / 1920 * 100vw), 28px);
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.1em;
  position: relative;
  display: block;
  padding-bottom: 0.4em;
  margin: 0 0 0.75em;
}

/* 見出し(=.attorney__contentの幅)より左右10pxずつ広げることで、
   見出し・本文がこの線より常に10px内側に収まるようにする
   (.attorney__contentのコメント参照) */
.attorney__block-heading::after {
  content: '';
  position: absolute;
  left: -10px;
  bottom: 0;
  width: calc(100% + 20px);
  height: 2px;
  background-color: var(--color-gold);
}

/* 本文(カスタム投稿で記入する部分)。
   overflow-wrap+line-break:strictで、右端の折り返し時に句読点・閉じ括弧が
   行頭に来ないよう禁則処理を効かせる(左揃えは維持)。
   .page-content p{line-height:2}(class+要素で詳細度(0,1,1))に負けないよう、
   .attorneys-list .attorney__block-text(詳細度(0,2,0))で明確に上書きする */
.attorneys-list .attorney__block-text {
  /* 1920px幅時20pxを上限に、画面幅に比例して縮小する(下限は16px) */
  font-size: clamp(16px, calc(20 / 1920 * 100vw), 20px);
  line-height: 1.7;
  color: #646364;
  text-align: left;
  overflow-wrap: break-word;
  line-break: strict;
}

.attorney__block--bio {
  padding-top: clamp(4px, calc(8 / 1920 * 100vw), 8px);
}

@media (max-width: 767px) {
  .attorney__name-bar,
  .attorney--reverse .attorney__name-bar {
    position: static;
    width: 100%;
    height: auto;
    background-color: var(--color-blue);
    display: flex;
    justify-content: center;
    padding: 14px 20px; /* 斜めなしの全幅帯。厚みは中の文字サイズに合わせて可変(height:auto) */
  }

  /* 帯の色・斜め形状はPC用(::before)のため、SPでは非表示にする
     (SPは上のbackground-colorで直接、斜めなしの全幅帯にする) */
  .attorney__name-bar::before {
    display: none;
  }

  /* PCでは写真列を除いた残り幅の中央に氏名を揃えるための余白だが、
     SPは写真・本文とも1カラムに積むため不要。全幅に戻し、
     上のjustify-content:centerでそのまま中央揃えにする */
  .attorney__name-bar-inner,
  .attorney--reverse .attorney__name-bar-inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .attorney__name-labels {
    max-width: none;
  }

  .attorney__name-text {
    font-size: var(--fs-lg); /* 氏名のみh3程度のサイズに拡大(「弁護士」の接頭辞は元のサイズのまま) */
  }

  .attorney__row,
  .attorney--reverse .attorney__row {
    grid-template-columns: 1fr;
    max-width: none;
    padding-inline: 20px; /* 写真・本文とも両端20px(帯は別途position:staticで画面幅いっぱい) */
  }

  /* 写真の拡大枠。overflow:hiddenとmargin-block(帯・本文との余白)をここに持たせ、
     中のimg(.attorney__photo)だけを拡大する。余白をimg側のpaddingにしてしまうと、
     img自身がtransform:scaleで拡大された時にpaddingごと一緒に拡大されて
     はみ出し分がこの枠のoverflow:hiddenで切られ、結果的に余白が写真に埋もれて
     消えてしまう。marginはこの枠自身の外側にあるためscaleの影響を受けず、
     どれだけ拡大しても必ず見た目の余白として残る */
  .attorney__photo-frame,
  .attorney--reverse .attorney__photo-frame {
    grid-column: 1;
    grid-row: 1;
    width: 60%;
    aspect-ratio: 595 / 750;
    margin-inline: auto;
    margin-block: 16px;
    overflow: hidden;
  }

  .attorney__photo,
  .attorney--reverse .attorney__photo {
    width: 100%;
    height: 100%;
    transform: scale(1.3);
    object-position: center 25%;
  }

  .attorney__body,
  .attorney--reverse .attorney__body {
    grid-column: 1;
    grid-row: 2;
    padding-top: var(--space-md);
  }

  /* 800px上限+中央揃えはPC想定の指定のため、SPでは全幅に戻す
     (中央揃えのまま縮小すると左右に不自然な余白ができてしまうため) */
  .attorney__content {
    max-width: none;
    margin-inline: 0;
  }
}

/* 600px〜767pxだけは両端40px固定にする */
@media (min-width: 600px) and (max-width: 767px) {
  .attorney__row,
  .attorney--reverse .attorney__row {
    padding-inline: 40px;
  }
}

/* ============================================================
   19. お知らせ一覧ページ（category-news.php）
   ============================================================ */

.news-list {
  list-style: none;
  padding-left: 0;
}

.news-list__item {
  border-bottom: 1px solid var(--color-border);
}

.news-list__item:first-child {
  border-top: 1px solid var(--color-border);
}

.news-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: 1.5rem;
  /* 罫線(.news-list__itemのborder-bottom、余白なしで全幅に伸びる)の端より
     日付・タイトルを内側に見せるための余白 */
  padding-inline: 12px;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.news-list__link:hover {
  opacity: .7;
}

.news-list__date {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* 幅を固定し中央揃えにすることで、カテゴリー名の文字数(お知らせ/コラム等)に
   関わらずこの右に続く.news-list__titleの開始位置が全行で揃うようにする */
.news-list__category {
  flex-shrink: 0;
  width: 100px;
  font-size: var(--fs-sm);
  padding: 0.15rem 0;
  border: 1px solid var(--color-blue);
  border-radius: 9999px;
  color: var(--color-blue);
  text-align: center;
}

.news-list__title {
  color: var(--color-text);
  font-weight: 700;
}

.news-list__empty {
  color: var(--color-text-sub);
  text-align: center;
  padding-block: var(--space-xl);
}

/* ページング（paginate_links()が出力する.page-numbers系クラス） */
.news-list__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.news-list__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-width+paddingだと2桁のページ番号で横長の楕円になっていたため、
     width固定にして常に正円になるようにする。親テーマ(Arkhe)側の
     .page-numbersがmin-width:32pxを持っており、widthだけ上書きすると
     flexの自動最小サイズ計算でこのmin-widthが優先され結果的に正円に
     ならない不具合があったため、min-widthも同じ値で明示的に上書きする */
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.news-list__pagination a.page-numbers:hover {
  background-color: var(--color-blue-light);
}

.news-list__pagination .page-numbers.current {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.news-list__pagination .page-numbers.prev,
.news-list__pagination .page-numbers.next {
  border-radius: 9999px;
  width: auto;
  padding-inline: 1.25rem;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}

.news-list__pagination a.prev:hover,
.news-list__pagination a.next:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

@media (max-width: 767px) {
  .news-list__link {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-block: 1.25rem;
  }

  .news-list__title {
    flex-basis: 100%;
  }
}

/* ----------------------------------------
   投稿ページ（single.php）のタイトル・日付表示。カテゴリー名はpage-fv__leadに
   表示するのでFV側にタイトルは出さず、ここ(本文直前)にタイトル→日付の順で表示する。
   タイトルは日付・本文と同じフォント/色のまま、サイズだけ大きくする
   (page-fv__titleのような--font-serifの大見出しにはしない) */
.article-meta {
  margin-bottom: var(--space-md);
}

.article-meta__title {
  font-size: clamp(20px, calc(28 / 1920 * 100vw), 28px);
  color: var(--color-text-sub);
  margin: 0 0 0.5em;
}

.article-meta__date {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* アイキャッチ画像。.page-contentと同じ本文幅・中央揃えにする */
.article-eyecatch {
  max-width: var(--container-max);
  margin: 0 auto var(--space-lg);
}

.article-eyecatch__image {
  display: block;
  width: 100%;
  height: auto;
}

.article-back {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--color-blue);
  text-decoration: none;
}

/* 「一覧へ戻る」「HOMEへ戻る」を縦並びにするラッパー。
   marginは個々のa(.article-back)ではなくこちら側で持つ */
.article-back-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}

.article-back-list .article-back {
  margin-top: 0;
}

.article-back:hover {
  opacity: .7;
}

/* 投稿一覧ページ(page-post-list.php)、一覧の直前に置く「HOMEに戻る」。
   .article-backは記事下(margin-top)用のため、一覧の上で使う場合は
   marginを上下反転する */
.news-list__back {
  margin-top: 0;
  margin-bottom: calc(var(--space-lg) / 2);
}

/* ============================================================
   20. 404ページ（404.php）
   ============================================================ */

/* FVを使わないため、代わりにこのセクション自身に固定ヘッダー分の
   margin-topを持たせる(.page-fvと同じ考え方) */
.not-found {
  margin-top: var(--header-height);
  text-align: center;
}

.not-found__title {
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.not-found__text {
  /* 文字色・line-heightは.page-content pの指定をそのまま継承する */
  margin-top: var(--space-md);
}

/* .page-content a(青文字)より優先させるため、.page-content込みで指定する */
.page-content .not-found__link {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity var(--transition-base);
}

.not-found__link:hover {
  opacity: .7;
}

/* ============================================================
   取扱業務ページ(page-service.php、法人のお客様へ／個人のお客様へ共通)
   ============================================================ */

/* FVメインタイトル(「取扱業務」＝親ページ名)上に来る要素だが、実際には
   .page-fv__titleと全く同じフォント・サイズ・色で、他ページのFVタイトルと
   共通の見た目にする。その下の下層ページタイトル(「法人のお客様へ」等)は
   .page-fv__title自体をそのまま使う(同じフォント・サイズで2行になる) */
.page-fv__lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: min(var(--fs-section-title), calc(90vw / 8));
  font-weight: 700;
  color: #48607a;
  text-align: center;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* .page-fv__lead自体がこのファイル内で.page-fv__title,.page-fv__leadの
     SP用25px指定(15.下層ページレスポンシブ)より後に定義されており、
     詳細度が同じため後勝ちで25px指定が効いていなかった。ここで直接指定する */
  .page-fv__lead {
    font-size: 25px;
  }
}

/* このページだけ.page-fv__underlineの直後に.page-fv__title(下層ページ名)が
   来る(他ページはtitle→underlineの順のため、この隣接セレクタでは影響しない)。
   underline自身のmargin-topは「取扱業務」との間隔用なので、ここでは
   underline→タイトルの間隔を別途確保する */
.page-fv__underline + .page-fv__title {
  margin-top: clamp(16px, calc(45 / 1920 * 100vw), 45px);
}

@media (max-width: 767px) {
  /* 取扱業務ページ(法人／個人)のメインタイトル(「法人のお客様へ」等)だけ
     さらに小さくする。他ページ(事務所についてのFV等)の.page-fv__titleは
     767px以下で25pxのまま変更しない */
  .page-service .page-fv__title {
    font-size: 20px;
  }

  /* underline→タイトルの間隔もSPでは詰める */
  .page-fv__underline + .page-fv__title {
    margin-top: 8px;
  }
}

/* ジャンプナビ(項目一覧)。PC: 3列グリッド(5項目なら3+2で自然に折り返す)。
   レスポンシブは別途指示予定のため、まずはこの固定レイアウトで作成する */
.service-nav {
  display: grid;
  /* 列の最小幅を250pxに固定 */
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: var(--space-lg) var(--space-md);
  max-width: 1325px;
  margin-inline: auto;
  /* 950px以下は1.5remで下限固定(0まで縮めない) */
  padding-left: 1.5rem;
}

/* 950px〜1325pxにかけて1.5rem→8remへ線形に増やす。広い画面ほど左に
   寄って見える(単色マーク+左揃えテキストのため)ので、余白を大きく取る */
@media (min-width: 950px) {
  .service-nav {
    padding-left: clamp(1.5rem, calc(1.5rem + (100vw - 950px) / 375px * 6.5rem), 8rem);
  }
}

/* .service-nav(ジャンプナビ)→.service-detail-list(各項目)間の余白は、
   共通ルール.page-section{padding-block:var(--space-2xl)}(96px、768px以上は
   固定値)が両セクションの下端・上端に効いて、上下合計192pxになっている。
   767px以下は別途--space-xl(64px)に切り替わるが、768px時点でいきなり
   96pxに戻るため、周りのコンテンツ(--container-max等)が比例して縮んでいる
   タブレット幅(768〜1024px)だけ、この余白が相対的に間延びして見える
   不具合があった(デザイナー指摘)。767px側の64pxから1024px(PC側の
   96pxに滑らかに繋がる基準点)にかけて線形に補間し、この区間だけ
   なだらかに大きくする(1024px以上は従来通り96px固定のまま) */
@media (min-width: 768px) {
  .page-section--service-nav {
    padding-bottom: clamp(64px, calc(64px + (100vw - 767px) / 257px * 32px), 96px);
  }

  .page-section--service-nav + .page-section {
    padding-top: clamp(64px, calc(64px + (100vw - 767px) / 257px * 32px), 96px);
  }
}

/* 862px以下は2列。3列×250px下限+列間gap(24px×2)+.service-nav自身の
   padding-left(1.5rem=24px)+ページ左右padding(20px×2)=862pxが、3列が
   250pxを下回らずに収まる最小幅。これより狭いと3列目が画面端に
   はみ出す(食い込む)ため、無理に3列を維持せず2列に切り替える。
   5項目なら2+2+1で自然に折り返し、最後の1項目はグリッドの1列目に
   配置されるため特別な指定なしで左揃えになる */
@media (max-width: 862px) {
  .service-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 430px以下は1列。以前は文字がはみ出す下限(386px)に合わせていたが、
   もう少し早め(430px)に1列へ切り替えたいとのご要望のため引き上げた */
@media (max-width: 430px) {
  .service-nav {
    grid-template-columns: 1fr;
  }
}

/* 赤い斜線(旧houjin.svg相当)はsvg画像をやめ、単色の矩形をskewXで傾けた
   純CSS表現にする。角度はサイト共通の--panel-skew-angle(35.5deg)を使い、
   他の斜め要素(区切り線・読み進むボタン等)と統一する。位置はテキストの左。
   サイズは行数(1〜3行)に関わらず全項目共通の固定値にし、
   align-items:centerでテキストをその高さの中央に揃える */
.service-nav__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  color: #48607a;
  transition: opacity var(--transition-base);
}

.service-nav__item-mark {
  flex: 0 0 auto;
  width: 10px;
  height: 56px;
  background-color: var(--color-red);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
}

/* 顧問/法務アウトソーシング（LPO）だけ3行になるため、マークとの間の
   余白(gap)だけこの項目用に広げる。マーク自体のサイズは他の項目と揃え、
   変えない */
.service-nav__item--tall {
  gap: 1.5rem;
}

/* テキスト自体は傾けない(.practice-panel__list-wrap--corpと同じ考え方)。
   文字は水平のまま、行ごとに横方向の段差(--stagger-step)をつけることで、
   斜めのマークに沿っているように見せる。1行の高さ(line-height)分
   下がるごとに、マークの傾き(tan(35.5deg))ぶんだけ左にずらす */
.service-nav__item-label {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3rem;
  font-weight: 700;
  --stagger-step: calc(1.3rem * tan(var(--panel-skew-angle)));
}

.service-nav__item-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-nav__item-list li {
  position: relative;
  padding-left: 1.2em;
  white-space: nowrap;
}

.service-nav__item-list li:nth-child(2) { margin-left: calc(var(--stagger-step) * -1); }
.service-nav__item-list li:nth-child(3) { margin-left: calc(var(--stagger-step) * -2); }

.service-nav__item-list li::before {
  content: '・';
  position: absolute;
  left: 0;
}

/* 「（LPO）」「（PPP／PFI等）」など、略称・補足の括弧書き部分。箇条書きの
   ・が付かない独立した注釈行として、リストの下に小さく表示する。
   何行目に相当するかはPHP側で--stagger-indexとして渡し、同じ段差を継続する */
.service-nav__item-small {
  display: block;
  padding-left: 1.2em;
  margin-left: calc(var(--stagger-step) * -1 * var(--stagger-index, 0));
  white-space: nowrap;
}

/* 「法務アウトソーシング」だけ折り返さない */
.service-nav__item-nowrap {
  white-space: nowrap;
}

.service-nav__item:hover {
  opacity: .7;
}

/* 各項目の詳細 */
.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* .service-detail__barと.service-examples__heading、共通の親でここに置く理由:
   両方とも真のビューポート端まで伸びるbreakout(左端/右端)なので、
   幅の合計がビューポート幅を超えたぶんだけ画面中央付近で重なる。
   この重なり量を常に14pxちょうどに保つには、それぞれ別々にclamp()で
   下限を持たせてはいけない(下限に落ちるタイミングが独立にズレると、
   1150px前後など特定の幅で重なりが14pxから大きくズレてしまう)。
   そのため下限なしの比例式のみをここに1つ持ち、.service-examples__heading側は
   「ビューポート幅 - このバー幅 + 14px」として直接算出することで、
   768px以上の全ての幅で重なりが常に14pxになることを保証する */
.service-detail {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
  /* 列間のgap。1920px時64px(元の--space-xl=4rem相当)を上限に、
     画面幅に比例して縮小する(下限は上限の60%)。--service-body-wの計算で
     先に使うため、先に定義する */
  --service-detail-gap: clamp(38px, calc(64 / 1920 * 100vw), 64px);
  /* .service-detail__title/.service-detail__bodyと共通の本文幅。
     .service-detail__barの幅もここから逆算するため、直接の数値ではなく
     ここを基準にする(重複した式を書くと片方だけ変更した時にズレるため)。
     以前は本文だけ「1920px時900px上限」という独立した比例式で、実際の
     グリッド左カラム(1.5fr)の幅とは無関係に縮んでいたため、本文がカラムを
     使い切らず余白として余ってしまっていた(実測: 1920pxで12px、1000pxで
     95px)。実測で「.service-detailの実際の幅 = min(--container-max, 100vw)
     - 左右padding(--container-pad)×2」であることを確認した上で、そこから
     gapを引いた残りを1.5:1(=0.6:0.4)で配分した左カラム分をそのまま
     本文の幅にする。これで本文は常に左カラムいっぱいに広がる */
  --service-body-w: calc((min(var(--container-max), 100vw) - 2 * var(--container-pad) - var(--service-detail-gap)) * 0.6);
  /* バーの左端は常にビューポートの真の左端(0)なので、
     「本文の左端(--container-content-left)+本文の幅+目標の余白(104px、
     画面幅に比例)」を直接バーの幅にすることで、バー右端→本文右端の距離を
     常に104px比例に保つ */
  --service-bar-w: calc(var(--container-content-left) + var(--service-body-w) + clamp(62px, calc(104 / 1920 * 100vw), 104px));
}

/* 2カラム化(PCのみ)。左: 見出し+本文(.service-detail__main)、
   右: 対応業務例(.service-examples)。
   grid-template-columnsに1.5fr 1frを使うことで、コンテナが縮んでも
   (--container-maxが床に落ちても)左:右=1.5:1を厳密に保つ。
   以前は右カラムだけ独立した比例式(440px上限)にしていたため、
   左カラム(1fr、コンテナ全体からgapと右カラムを引いた残り)との比率が
   画面幅によってバラバラになり(1920pxで2.4:1、768px付近では逆転して
   右の方が大きくなる)、レスポンシブ中に比率が不自然に動いて見えていた。
   fr単位はグリッドの実際の残り幅を厳密に按分するため、
   --container-maxの式を手計算で近似する必要がなく確実に比率を保てる */
@media (min-width: 768px) {
  .service-detail {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: var(--service-detail-gap);
    align-items: start;
  }
}

.service-detail__main {
  position: relative;
  min-width: 0;
  /* 上の.service-detail__bar(position:absolute)がめり込む分の余白(暫定値、
     バーの実測アスペクト比62/1312換算+ギャップ) */
  padding-top: clamp(48px, calc(85 / 1920 * 100vw), 85px);
}

/* タイトル上の帯。左端をビューポートの真の左端まで伸ばす(意図的なbreakout)。
   .service-detail__mainは2カラムグリッドの左カラムで画面中央に来ないため
   calc(50%-50vw)は使えず、--container-content-left(真のビューポート端→
   1600pxコンテナ端の距離)分だけ負のleftで押し戻す */
/* 元は.section-divider-bar__symbol共通のaspect-ratio(1312/62)で高さを幅から
   自動算出していたが、ここだけ高さと幅を別々の比率で指定したいため、
   両方を明示指定してaspect-ratioを無効化する(width/heightを両方指定すると
   aspect-ratioは効かなくなる)。斜めカットは元のwidth基準%指定(96.628%)だと
   幅を変えるたびにカット量(斜め部分)も一緒に変わってしまうため、
   高さ基準のtan(角度)×高さのカット量(サイト共通--panel-skew-angleと同じ
   35.5deg、元の1312×62画像の実測カット角度とも一致)に置き換える。
   これで「横幅の水平部分だけ」を伸縮でき、斜め部分(=高さ由来)は変わらない */
.service-detail__bar {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--container-content-left));
  aspect-ratio: unset;
  --service-bar-h: clamp(22px, calc(37 / 1920 * 100vw), 37px);
  height: var(--service-bar-h);
  /* .service-examples__headingとの重なりを常に14pxに保つため、下限は
     持たせず比例式のみにする(.service-detailの--service-bar-wコメント参照) */
  width: var(--service-bar-w);
  clip-path: polygon(0 0, 100% 0, calc(100% - tan(var(--panel-skew-angle)) * var(--service-bar-h)) 100%, 0 100%);
}

/* 767px以下は600pxの下限がビューポート幅を超えてはみ出すため、
   真のビューポート幅いっぱい(100vw)の帯に切り替え、斜めカットも外して
   ただの全幅の帯にする */
@media (max-width: 767px) {
  .service-detail__bar {
    width: 100vw;
    clip-path: none;
  }
}

/* 見出し下の黄色下線。.consultation__heading::afterと同じ「absolute+背景色1px+
   中央揃え」の手法にする。「中央」の基準は.service-detail__body(本文)の幅・
   左端に合わせたいので、タイトル自身にも.service-detail__bodyと全く同じ
   max-width(min(900px, 46.875vw)、768px以上のみ)を持たせ、左端をbodyと
   揃える(=bodyを基準にした中央)。width:fit-content+margin:autoで中央寄せする
   方法だと、箱の幅がタイトル文字数ぶんだけまちまちになり、短いタイトルほど
   下線が左に寄って見える不具合が起きるため使わない */
.service-detail__title {
  position: relative;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 「（PPP／PFI等）」を1つの折り返し不可能な塊にする。全角スラッシュ(／)は
   word-break:keep-allだけでは折り返し候補として残ってしまうブラウザがあるため */
.service-detail__title-nowrap {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .service-detail__title {
    /* .service-detail__bodyのmax-widthと同じ(768px未満は指定なし=全幅) */
    max-width: var(--service-body-w);
  }
}

.service-detail__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* 1920px時809pxを上限に、画面幅に比例して縮小する(下限は330px) */
  width: clamp(330px, calc(809 / 1920 * 100vw), 809px);
  height: 2px;
  background-color: var(--color-gold);
}

.service-detail__body {
  color: var(--color-text-sub);
  line-height: 2;
  /* 禁則処理: 両端揃え+行頭禁則文字を増やす(strict)。break-allにすると
     禁則処理が無視されるためnormalのまま */
  text-align: justify;
  line-break: strict;
  word-break: normal;
}

/* 幅の制限は2カラム化(PC)時のみ。767px以下の1カラム表示では、
   これまで通り全幅(端末幅いっぱい)に文章を表示する */
@media (min-width: 768px) {
  .service-detail__body {
    /* 1920px時900px、以降は比率(900/1920)で縮小 */
    max-width: var(--service-body-w);
  }
}

/* --examples-h等をここに持ち上げるのは、.service-examples__heading(絶対配置に
   なった)自身の高さぶんを、ここのpadding-topで確保する必要があるのと、
   .service-examples__list側でも同じ値を参照して見出しの文字と位置を
   揃えたいため(子や別要素のカスタムプロパティは直接参照できない) */
.service-examples {
  /* 1920px幅時83pxを上限に、画面幅に比例して縮小する(下限は上限の60%)。
     ただし文字1行+余白(1lh+0.4em)を下回らないようにするmaxはそのまま維持 */
  --examples-h: max(clamp(50px, calc(83 / 1920 * 100vw), 83px), calc(1lh + 0.4em));
  /* .service-detail__barとの重なりを常に14pxに保つための.service-examples__heading
     自身の幅(詳しくは.service-detailの--service-bar-wコメント参照) */
  --examples-heading-w: calc(100vw - var(--service-bar-w) + 14px);
  /* .service-examples__heading内の文字の開始位置(見出し左端からの距離) */
  --examples-text-indent: clamp(63px, calc(105 / 1920 * 100vw), 105px);
  position: relative;
  padding-top: calc(var(--examples-h) + var(--space-md));
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .service-examples {
    margin-top: 0;
  }
}


/* 「対応業務例」タブ。.consultation__readmore-link::beforeと同じ「skewXした
   枠線のみの平行四辺形(右辺は開いたまま)」の技法を、色を赤に変えて流用する。
   .service-detail__barと同じ絶対配置+breakoutの手法にし、右端を
   ビューポートの真の右端まで伸ばす(意図的なbreakout)。以前は
   「幅:100%+breakout分」という相対指定で同じ結果を得ていたが、
   幅を.service-detail__barと同じ絶対サイズ基準にしたい(1920px時762px)ため、
   position:absolute+right:-breakout分に切り替える */
.service-examples__heading {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--container-content-left));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--examples-h);
  width: var(--examples-heading-w);
  /* 文字の開始位置は.service-examples__heading::beforeの左端(=このheading自身の
     左端。::beforeは下辺がheadingの左端に一致する平行四辺形のため)から
     1920px幅時105pxを上限に、画面幅に比例して縮小する(下限は上限の60%) */
  padding-left: var(--examples-text-indent);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-red);
  overflow: hidden;
  box-sizing: border-box;
}

/* 「対応業務例」タブの枠線。.features__readmore::beforeと同じ
   border+skewXの平行四辺形(角丸にはしない)。太さは.features__readmore::before
   等と同じ式(--readmore-h × 0.0568)を直接使う(--examples-hを基準にすると、
   比率は同じでも高さが違うため太さがズレてしまう) */
.service-examples__heading-outline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(tan(var(--panel-skew-angle)) * var(--examples-h));
  right: calc(-1 * tan(var(--panel-skew-angle)) * var(--examples-h));
  border-top: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568) solid var(--color-red);
  border-bottom: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568) solid var(--color-red);
  /* skewXで見た目の太さがcos(角度)倍に圧縮されるため、事前に/cos(角度)で
     太くしておく(.features__readmore::before等と同じ補正) */
  border-left: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568 / cos(var(--panel-skew-angle))) solid var(--color-red);
  transform: skewX(calc(-1 * var(--panel-skew-angle)));
  transform-origin: top;
}

/* :not()で.service-examples__heading-outlineを除外する理由: 枠線を
   SVGからCSSのclip-pathに変更した際、枠線側の要素もspanタグにしたため、
   このセレクタが誤って一致するようになった(position:relativeで上書き
   されてしまい、position:absoluteが効かなくなる不具合が発生した) */
.service-examples__heading span:not(.service-examples__heading-outline) {
  position: relative;
  z-index: 1;
  /* 1920px幅時34pxを上限に、画面幅に比例して縮小する(下限は上限の60%) */
  font-size: clamp(20px, calc(34 / 1920 * 100vw), 34px);
}

/* .page-content ul(list-style:disc)より詳細度を上げて打ち消す必要があるため
   要素セレクタ付きにする(ul.service-examples__list) */
/* liの文頭(●の後ろ、1.2emぶん右)を.service-examples__heading spanの文頭と
   同じx位置に揃える。.service-examples(position:relative)自身の左端を基準に、
   「見出し自身の左端(=右カラム幅+breakout分-見出し幅)+見出し内の文字インデント」
   を算出し、そこからli自身が持つ1.2emの文字インデントぶんを差し引いた値を
   このulのmargin-leftにする(見出しの方が左に大きくbreakoutしているため、
   ulも同様に左へはみ出す=負のmargin-leftになる)。旧来のpadding-leftは
   この位置合わせに統合されたため削除(paddingは負の値を取れないため
   margin-leftを使う必要がある) */
ul.service-examples__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  /* .page-content ul{padding-left:1.5rem}(詳細度は同じだがこちらが後勝ち)を
     明示的に打ち消す。位置合わせはpaddingではなくmargin-leftで行う
     (paddingは負の値を取れないため) */
  padding-left: 0;
  /* 100%は.service-examples(このulの containing block)自身の実際の幅。
     grid-template-columnsがfr単位になったため、専用のカスタムプロパティを
     持たずここで直接100%を参照することで、実際のトラック幅と常に一致する */
  margin-left: calc(100% + var(--container-content-left) - var(--examples-heading-w) + var(--examples-text-indent) - 1.2em);
  list-style: none;
  color: var(--color-text-sub);
}

.service-examples__list li {
  padding-left: 1.2em;
  position: relative;
  line-height: normal;
}

/* 先頭の赤丸。.practice-panel__item::beforeと同じ技法を流用。
   top:0だと●自身のフォントサイズ(0.75em)がliの行の高さより低いぶん、
   隣接するテキストの中央より上にずれて見える。
   top:50%(liの箱全体の中央)は1行のときは1行目の中央と一致するが、
   2行に折り返すとliの箱が2行分の高さになり、1行目と2行目の
   ちょうど真ん中に来てしまう(1行目とずれる)。1行目だけの中央に
   揃えるため、1lh(1行の高さ)の半分をtopにする。
   さらに、●のグリフ自体が自分のフォントの行box内で光学的に上寄りに
   描画されるため、translateY(-50%)だけだと文字の中央よりまだ上に見える。
   実測(0.75emの●で約3px=0.25em相当上寄り)に基づき、その分だけ
   下に補正する */
.service-examples__list li::before {
  content: '⚫︎';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(calc(-50% + 0.25em));
  color: var(--color-red);
  font-weight: 900;
  font-size: 0.75em;
}

@supports (top: 1lh) {
  .service-examples__list li::before {
    top: calc(1lh / 2);
  }
}

/* .service-examples__headingの絶対配置+breakout(真のビューポート右端まで
   伸ばす)は2カラムのPCレイアウト前提の仕組みで、1カラムに積み上がる
   767px以下ではそのまま使うと数値が破綻し(実測で幅139px・右に寄って
   表示される)、意図しない見た目になる。767px以下は通常のフローに戻し、
   全幅にする(.service-detail__barが767px以下で100vwの帯に戻るのと同じ考え方)。
   ベースの規則より後ろに置く(詳細度が同じため、順序で上書きする必要がある) */
@media (max-width: 767px) {
  .service-examples {
    padding-top: 0;
  }

  .service-examples__heading {
    /* staticではなくrelativeにする理由: .service-examples__heading-outline
       (position:absolute)のcontaining blockにするため。staticのままだと
       絶対配置要素のcontaining blockにならず、1つ上の.service-examples
       (position:relative、幅は左右paddingぶん狭い)が使われてしまい、
       下のwidth拡張が枠線に反映されない不具合が起きていた。
       relativeはtop/left等を指定しない限りstaticと全く同じ見え方のため、
       通常のフローに戻す(全幅にする)という意図に影響はない。
       ただし768px以上のベース規則が持つtop:0とright:calc(-1*...)は
       position:staticの間は無視されていたが、relativeにした途端に
       効いてしまい要素全体が右にずれる不具合が起きたため、明示的に
       autoへ戻す必要がある */
    position: relative;
    top: auto;
    right: auto;
    /* 左端は変えず(文字の開始位置に影響しないよう)、右端だけ真の
       ビューポート右端まで伸ばす。100%(通常の内側幅)+container-content-left
       (左右の余白ぶん)で、ちょうど画面の真の右端に届く幅になる。
       .service-detail__barが767px以下でwidth:100vwの帯になるのと同じ
       「真の右端まで伸ばす」意図だが、こちらは左端を動かせない(文字位置が
       ずれる)ため、100vwではなくwidthの加算で実現する */
    width: calc(100% + var(--container-content-left));
    margin-bottom: var(--space-md);
  }

  .service-examples__heading-outline {
    /* SP画面だけ、枠(一筆書き)自体を少し右にずらす(暫定値15px、確認して調整) */
    margin-left: 15px;
  }

  /* リストの位置合わせ(margin-left)も見出しのbreakout位置基準の式のため、
     見出しが通常フローに戻るのに合わせて通常の左揃えに戻す */
  ul.service-examples__list {
    margin-left: 0;
    padding-left: 1.5rem;
  }
}

/* ============================================================
   個人のお客様へページ(page-service--individual)専用の上書き
   ============================================================ */

.page-service--individual .service-nav__item-mark {
  background-color: var(--color-blue);
}

.page-service--individual .service-examples__heading-outline {
  border-color: var(--color-blue);
}

/* 項目が4つ。PC: 1行4列。列の最小幅は200px
   (mark10px+gap16px+最長ラベル「離婚・男女問題」134px=160pxに余白を
   持たせた値)。4列×200px+列間gap(24px×3)+.service-nav自身の
   padding-left(1.5rem=24px)+ページ左右padding(20px×2)=936pxが、
   4列がそれぞれ200pxを保ったまま収まる下限 */
.page-service--individual .service-nav {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

/* 936px以下は2列(2+2)で最終形。1列には落とさず、ここが最小レイアウト。
   下限を4列時の200pxで固定すると狭い画面で入りきらなくなるため、
   ここではminmaxを外し(項目自体の内容幅、最長でも「遺言・相続」101px
   +mark10px+gap16px=127px程度)、自然な最小幅に任せる */
@media (max-width: 936px) {
  .page-service--individual .service-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   16. ご相談の流れページ (flow-steps)
   参考: スクリーンショット 2026-08-27 10.56.01。実測値から算出
   (1920px基準): 円152px、バー幅888px(=1040-152、円に隙間なく接する)、
   バー高さ84px、右端の斜めカット量はバー高さ×tan(35.5deg)≒60px
   (サイト共通の--panel-skew-angleと一致)。
   ============================================================ */

/* .page-content ol(list-style:decimal)より詳細度を上げて打ち消す必要があるため
   要素セレクタ付きにする(ol.flow-steps、ul.service-examples__listと同じ理由) */
ol.flow-steps {
  /* 円: 420px以下90px固定、420〜700pxで90→125px、700〜1920pxで125→152px。
     単純な比例(152/1920)だと420px時33px程度にしかならず90pxに届かないため、
     420/700/1920pxの3点を通る折れ線で近似する(下の@mediaで区間ごとに再定義) */
  --flow-circle-size: 90px;
  /* バー高さ: 1920px時83px、40pxで下限固定(緩やかに遷移) */
  --flow-bar-h: clamp(40px, calc(83 / 1920 * 100vw), 83px);
  /* 次のstepとの間隔(margin-top)。本文の行数によって次の円の位置が変わっても、
     コネクタ(点線+矢印)側をtop/bottom指定(高さ固定ではない)にして常に
     ぴったり届かせるため、ここは「最短の本文(1行)でも点線+矢印が
     十分な長さで見える」よう余裕を持った値にする */
  --flow-step-gap: min(90px, calc(90 / 1920 * 100vw));
  /* 円とバーの重なり量。円の半径分まで伸ばし、バー幅を狭めても
     (円のサイズが変わっても)左端の角が円の外にはみ出さないようにする */
  --flow-overlap: calc(var(--flow-circle-size) / 2);
  /* コネクタ先端の矢印: 1920px時26×21px、80%(20.8×16.8px)を下限にする。
     円は152→90(59%)まで縮むが、矢印まで同じ比率で縮めると9×7px程度に
     なって不自然に小さくなるため、円とは連動させず緩やかな下限にする */
  --flow-arrow-w: clamp(calc(26px * 0.8), calc(26 / 1920 * 100vw), 26px);
  --flow-arrow-h: clamp(calc(21px * 0.8), calc(21 / 1920 * 100vw), 21px);
  /* コンテナ幅: 800px時600px・1920px時1040pxを通る直線を基準にしつつ、
     100%(ページ本来の左右余白のみ)を超えないようmin()で頭打ちにする。
     結果として狭い画面ほど自然に全幅寄りになり、767px等の特定幅で
     急に余白が変わることがない(ブレークポイント自体を持たない) */
  max-width: min(1040px, 100%, calc(600px + (100vw - 800px) / 1120px * 440px));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 420px) {
  ol.flow-steps {
    --flow-circle-size: clamp(90px, calc(90px + (100vw - 420px) / 280px * 35px), 125px);
  }
}

@media (min-width: 700px) {
  ol.flow-steps {
    --flow-circle-size: clamp(125px, calc(125px + (100vw - 700px) / 1220px * 27px), 152px);
  }
}

.flow-step {
  position: relative;
}

.flow-step + .flow-step {
  margin-top: var(--flow-step-gap);
}

.flow-step__row {
  display: flex;
  align-items: center;
}

.flow-step__circle {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--flow-circle-size);
  height: var(--flow-circle-size);
  border-radius: 50%;
  /* TOPページの.consultation-step__circleと同じ色に揃える(--color-goldは
     罫線など他の要素と共有しているため、ここでは直接指定する) */
  background-color: #f1d23f;
}

.flow-step__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flow-step__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 幅は円を除く残りいっぱい(コンテナ幅の変化に自動追従させる) */
  flex: 1 1 auto;
  min-width: 0;
  height: var(--flow-bar-h);
}

/* 円(z-index:1)の下に潜り込ませるため、円より低いz-indexにしたうえで
   左端を--flow-overlap分だけ左へ伸ばす(円とバーがくっついて見える) */
.flow-step__bar-outline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(-1 * var(--flow-overlap));
  width: calc(100% + var(--flow-overlap));
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.flow-step__bar-outline polyline {
  fill: none;
  stroke: var(--color-blue);
  /* .features__readmore::beforeの枠線と同じ太さの式に揃える。
     preserveAspectRatio="none"で縦横非均一に伸縮するSVGのため、
     vector-effect:non-scaling-strokeで太さ自体は歪ませず一定に保つ */
  stroke-width: calc(clamp(26.42px, 3.2039vw, 61.55px) * 0.0568);
  vector-effect: non-scaling-stroke;
  /* SVGのpolylineはborder-radiusの対象外のため、角を丸めるにはSVG側の
     stroke-linejoinを使う。roundにすると半径=太さ÷2の丸い角になる
     (ご指定の式と同じ考え方) */
  stroke-linejoin: round;
}

/* バーは左辺が垂直・右辺だけ斜めにカットされた台形(.flow-step__bar-outlineの
   ポリゴン参照)のため、justify-content:centerでバーの箱の中心に置くと、
   右側が斜めに欠けている分だけ見た目には右にズレて見える。
   スラッシュの横幅(バー高さ×tan(角度)、.flow-step__bodyのpadding-rightと
   同じ算出方法)ぶん左にずらす */
.flow-step__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  /* 1920px時22px、767px時18pxを通る直線。767px以下は18pxで頭打ち */
  font-size: clamp(18px, calc(0.34693 * 1vw + 15.339px), 22px);
  font-weight: 700;
  color: #48607a;
  letter-spacing: 0.1em;
  transform: translateX(calc(-1 * tan(var(--panel-skew-angle)) * var(--flow-bar-h)));
}

.flow-step__body {
  /* .flow-step__circle(行)のすぐ下に余白なく密着させる */
  margin-top: 0;
  padding-left: calc(var(--flow-circle-size) + var(--space-md));
  /* バー右端の斜めカット(バー高さ×tan(角度)、.flow-step__bar-outlineの
     ポリゴンと同じ算出方法)ぶんだけ右を空け、本文の折り返しが
     上のタイトルバーの斜め線の手前で収まるようにする */
  padding-right: calc(tan(var(--panel-skew-angle)) * var(--flow-bar-h));
  color: var(--color-text-sub);
}

.flow-step__body p + p {
  margin-top: 0.5em;
}

.flow-step__link {
  display: inline-block;
  margin-top: 0.75em;
  color: var(--color-blue);
  text-decoration: none;
}

.flow-step__link:hover {
  opacity: .7;
}

/* 点線コネクタ(円の真下、最後のstepを除く)。
   円は横方向では中央(left:circle-size/2)にあり本文(padding-leftで右にずれた
   位置から始まる)とは重ならないため、本文末ではなく円の下端(--flow-circle-size)
   を基準に10px空けて開始する。本文の行数(高さ)によって次の円の位置が
   変わっても常にきっちり矢印の付け根まで届くよう、高さ固定(height)ではなく
   top+bottomの両方を指定し、その間を自動で埋めさせる(bottomは次のstepとの
   margin-top(--flow-step-gap)の分だけ自身の外側=負の値へ伸ばし、矢印の高さ分を
   引いて矢印の付け根に接続する) */
/* border-left:dottedは点の直径・間隔をブラウザ任せにしかできず精密な
   間隔指定ができないため、repeating radial-gradientで点を直接描画する。
   1920px幅時、点の直径4px・中心間隔10pxを上限に、画面幅に比例して
   縮小する(下限は上限の60%) */
.flow-step {
  --flow-connector-dot: clamp(2.4px, calc(4 / 1920 * 100vw), 4px);
  --flow-connector-gap: clamp(6px, calc(10 / 1920 * 100vw), 10px);
}

.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--flow-circle-size) + 10px);
  bottom: calc(-1 * var(--flow-step-gap) + 10px + var(--flow-arrow-h));
  left: calc(var(--flow-circle-size) / 2);
  width: var(--flow-connector-dot);
  background-image: radial-gradient(circle, var(--color-blue) calc(var(--flow-connector-dot) / 2), transparent calc(var(--flow-connector-dot) / 2));
  background-size: var(--flow-connector-dot) var(--flow-connector-gap);
  background-repeat: repeat-y;
  transform: translateX(-50%);
}

/* コネクタ先端の矢印。同様にbottom指定で、次の円の10px手前に
   三角の下端(先端)がぴったり揃うようにする */
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--flow-step-gap) + 10px);
  left: calc(var(--flow-circle-size) / 2);
  width: 0;
  height: 0;
  border-left: calc(var(--flow-arrow-w) / 2) solid transparent;
  border-right: calc(var(--flow-arrow-w) / 2) solid transparent;
  border-top: var(--flow-arrow-h) solid var(--color-blue);
  transform: translateX(-50%);
}