@charset "UTF-8";
/* =========================================================
 * usui-souzoku-theme  統合スタイル（自己完結型）
 * 碓井公認会計士事務所 相続税特化サイト
 * 配色：緑（メイン）× オレンジ（アクセント／CTA）× 白 ＋淡グレー
 *   ロゴの緑球マークに合わせた緑を基調に、行動喚起（CTA）にオレンジを用いる
 * ======================================================= */

:root {
	/* ---------------------------------------------------------
	 * 2026-09-07：クライアントのご要望「字体や色をもう少し柔らかく」を受けて全面調整。
	 *   ・緑／オレンジとも彩度を下げ、明度を上げた（士業サイトとしての信頼感は維持する範囲）
	 *   ・本文色を真っ黒寄りの #232a25 から少し明るい #333b35 へ
	 *   ・角丸を大きく、影を軽く
	 *   ※旧値（参考）：green #2f9150 ／ green-d #24713c ／ green-dd #1c5730 ／ green-l #3fa863
	 *                  orange #ec7a1c ／ orange-d #d1670f ／ gray #f2f7f3 ／ line #d8e4dc ／ ink #232a25
	 * ------------------------------------------------------- */
	--green: #4a9e6b;      /* アクセント（アイコン・下線バー等） */
	--green-d: #3a7f55;    /* 濃い緑（ダーク帯・見出し文字・ホバー） */
	--green-dd: #2e6644;   /* 最濃緑（グラデ終端） */
	--green-l: #63b284;    /* 明るい緑 */
	--leaf: #8ecb5f;       /* ロゴの明るい緑（ワンポイント） */
	--orange: #ee9250;     /* CTA・行動喚起 */
	--orange-d: #dd7d38;   /* オレンジ濃 */
	--white: #ffffff;
	--gray: #f6f9f6;
	--gray-2: #eaf1ec;
	--line: #e0eae3;
	--ink: #333b35;
	--ink-2: #55635a;
	--muted: #78857c;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 10px 28px rgba(58,127,85,.10);
	--shadow-sm: 0 4px 14px rgba(58,127,85,.07);
	--wrap: 1120px;
	--wrap-narrow: 800px;
	/* 見出しは丸ゴシック（Zen Maru Gothic）＝柔らかい印象。本文はNoto Sans JPのまま */
	--serif: "Zen Maru Gothic", "Noto Serif JP", serif;
	--sans: "Noto Sans JP", sans-serif;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sans);
	color: var(--ink);
	line-height: 1.9;
	font-size: 16px;
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-d); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--orange); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.6; letter-spacing: .01em; }
p { margin: 0; }
.icon { flex: none; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--wrap-narrow); }

/* ---------- 画像（支給写真） ---------- */
.usu-img { display: block; width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-sm); }
.usu-img-16x9 { aspect-ratio: 16/9; }
.usu-img-4x3 { aspect-ratio: 4/3; }
.usu-img-1x1 { aspect-ratio: 1/1; }
.usu-img-3x4 { aspect-ratio: 3/4; }
.usu-img-wide { aspect-ratio: 21/9; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: 999px; font-weight: 700; font-family: var(--sans);
	font-size: 15px; line-height: 1.4; cursor: pointer; border: 2px solid transparent;
	transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 36px; font-size: 16px; }
.btn-cta { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(236,122,28,.32); }
.btn-cta:hover { background: var(--orange-d); color: #fff; }
.btn-green { background: var(--green-d); color: #fff; }
.btn-green:hover { background: var(--green-dd); color: #fff; }
.btn-outline { background: #fff; color: var(--green-d); border-color: var(--green); }
.btn-outline:hover { background: var(--green-d); color: #fff; border-color: var(--green-d); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: #fff; color: var(--green-d); }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section-gray { background: var(--gray); }
.section-navy { background: var(--green-d); color: #fff; }
.section-head { text-align: center; margin-bottom: 46px; }
.section-en { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.section-en.light { color: #bfe3cb; }
.section-title { font-size: 30px; color: var(--green-d); position: relative; padding-bottom: 18px; }
.section-title.light { color: #fff; }
.section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 48px; height: 3px; background: var(--green); border-radius: 3px; }
/* 左寄せ見出し（当事務所について・代表挨拶）は下線も見出しテキストの真下＝左寄せにする */
.about-body .section-title::after,
.profile-body .section-title::after { left: 0; transform: none; }
/* 「選ばれる理由」「取扱業務」だけ下線をオレンジ（アクセント）に戻す */
.section-features .section-title::after,
.section-services .section-title::after,
.section-philosophy .section-title::after { background: var(--orange); }
.section-desc { margin-top: 18px; color: var(--ink-2); }
.section-action { text-align: center; margin-top: 44px; }
.lead-text { font-size: 17px; color: var(--ink-2); margin-bottom: 20px; }
.note-text { margin-top: 24px; color: var(--muted); font-size: 14px; }

/* ---------- 画像プレースホルダ ---------- */
.img-ph {
	position: relative; width: 100%; background: linear-gradient(135deg, #e6f0e9, #d6e6dc);
	border: 1px dashed #a9c9b5; border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--green-d);
}
.img-ph-16x9 { aspect-ratio: 16/9; }
.img-ph-4x3 { aspect-ratio: 4/3; }
.img-ph-1x1 { aspect-ratio: 1/1; }
.img-ph-3x4 { aspect-ratio: 3/4; }
.img-ph-wide { aspect-ratio: 21/9; }
.img-ph-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(31,87,48,.12); position: relative; }
.img-ph-icon::before, .img-ph-icon::after { content: ""; position: absolute; }
.img-ph-icon::before { width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 11px; left: 11px; }
.img-ph-icon::after { width: 26px; height: 14px; background: #fff; border-radius: 4px; bottom: 9px; left: 10px; clip-path: polygon(0 100%, 35% 30%, 60% 65%, 80% 40%, 100% 100%); }
.img-ph-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 0 12px; text-align: center; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(31,87,48,.08); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { max-width: none; width: 100%; margin: 0 auto; padding: 0 40px; display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; height: 78px; }
.site-brand { margin-right: auto; }
.brand-link { display: flex; align-items: center; gap: 10px; }
/* ロゴマーク（緑の球）
 * ★ 2026-09-28（優馬様のご指示）：CSSで描いていた円から、**生成画像（影付きの緑の球）** へ差し替えた。
 *   画像＝`assets/images/logo-mark.png`（160×160・**背景は透過済み**／原本は `_original/logo-mark.png`）。
 *   画像自体に影が入っているため、**`border-radius: 50%` と `box-shadow` は付けないこと**
 *   （丸く切り抜くと影が欠け、box-shadow を足すと影が二重になる）。
 *   このクラスはヘッダーのロゴと、トップ「取扱業務」タブの業務名の左の丸の**2箇所で共用**している
 *   （＝両方が同じ見た目になる。片方だけ変えたい場合は修飾クラスを足すこと）。
 *   旧指定（CSSの放射グラデーション）は復元用に下へコメントで残置。 */
.brand-mark { width: 46px; height: 46px; flex: none; background: url('../images/logo-mark.png') center / contain no-repeat; }
/* ★ 2026-09-28（優馬様のご指示「丸が事務所名に比べて小さい」）：34px → 46px に拡大した。
 *   画像は影を含めた正方形で、**球そのものは枠の約87%**（46px なら約40px）。
 *   事務所名のテキストブロック（英字11px＋和名19px・行間1.25 ＝ 約37.5px）と釣り合う値。
 *   ヘッダーの高さは78px固定なので余裕はあるが、**これ以上大きくするときは78pxに収まるか確認すること。**
 *   ※この指定が効くのは**ヘッダーだけ**。取扱業務タブの丸は `.s11-logo .brand-mark`（30px）が
 *     上書きしており、見出し25pxと釣り合っているため据え置いている。 */
/* 旧：.brand-mark { border-radius: 50%; background: radial-gradient(circle at 34% 30%, #b6e77f, var(--leaf) 45%, var(--green) 100%); box-shadow: 0 2px 6px rgba(31,87,48,.25); } */
.brand-body { display: flex; flex-direction: column; line-height: 1.25; }
.brand-en { font-size: 11px; letter-spacing: .12em; color: var(--green); font-weight: 700; }
.brand-name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--green-d); white-space: nowrap; }
.global-nav-list { display: flex; gap: 18px; flex-wrap: nowrap; }
.global-nav-list a { color: var(--green-d); font-weight: 500; font-size: 14.5px; position: relative; padding: 6px 0; white-space: nowrap; }
.global-nav-list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--orange); transition: width .25s; }
.global-nav-list a:hover::after { width: 100%; }
.header-tel-link { display: flex; align-items: center; gap: 8px; color: var(--green-d); }
.header-tel-ico { color: var(--green); display: flex; }
.header-tel-body { display: flex; flex-direction: column; line-height: 1.2; }
.header-tel-num { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.header-tel-note { font-size: 11px; color: var(--muted); }
.header-contact-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(236,122,28,.3); }
.header-contact-btn:hover { background: var(--orange-d); color: #fff; transform: translateY(-2px); }
.nav-toggle { display: none; }

/* ---------- SP nav ---------- */
.sp-nav { position: fixed; inset: 0; z-index: 200; background: var(--green-d); color: #fff; padding: 90px 28px 40px; overflow-y: auto; }
.sp-nav-list { display: flex; flex-direction: column; }
.sp-nav-list a { display: block; color: #fff; font-size: 17px; padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.15); }
/* 子項目（相続税申告・生前対策 等）※WPメニューの sub-menu をそのまま字下げして表示する */
.sp-nav-list .sub-menu a {
	font-size: 15px;
	padding: 13px 4px 13px 26px;
	color: rgba(255,255,255,.88);
	position: relative;
}
.sp-nav-list .sub-menu a::before {
	content: "";
	position: absolute; left: 6px; top: 50%;
	width: 10px; height: 1px;
	background: rgba(255,255,255,.55);
}
.sp-nav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

/* ---------- page-hero（内ページMV） ---------- */
.page-hero { position: relative; background: linear-gradient(120deg, var(--green-d), var(--green-l)); color: #fff; overflow: hidden; padding: 62px 0; }
.page-hero-deco { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border: 40px solid rgba(255,255,255,.08); border-radius: 50%; }
.page-hero-inner { position: relative; text-align: center; }
.page-hero-title { font-size: 32px; }
.page-hero-lead { margin-top: 14px; color: #d6ecdd; font-size: 15px; }

/* ---------- MV（デザインパーツ `section_mv-points-cta` を移植） ----------
   原本：デザインパーツ/section/section_mv-points-cta.css（3ポイント訴求＋CTA型）
   ・クラス名はパーツ由来の `.mvp-*` を維持し、配色は下記のCSS変数の上書きだけで管理する
   ・原本は 1rem=10px 前提のremで書かれているが、本テーマはpxベースのため
     同じ値をpxへ換算して移植している（例：4.2rem → 42px）
   ・背景写真の位置・拡大率は --mvp-bg-position / --mvp-bg-size-sp で調整すること
     （人物の顔の見え方はCV率に直結するため、変更時はPC・TB・SPの3サイズで目視確認） */

:root {
	/* レイアウト（高さは固定px。vh指定だと縦長モニタで写真が間延びするため） */
	--mvp-min-height: 640px;
	--mvp-max-width: var(--wrap);
	--mvp-body-width: 800px;
	--mvp-radius: var(--radius);
	/* 背景写真の表示位置・拡大率
	 * ★ 2026-09-28（優馬様のご指摘「頭が切れている」）：縦位置を center(50%) → 22% に変更した。
	 *   背景は `cover` で**横幅ちょうどに拡大**されるため、画面が広いほど上下が大きく切り取られる
	 *   （例：1920px幅では画像が1920×1440pxに拡大され、高さ約727pxの枠に対し上下で約713px余る）。
	 *   縦位置が中央だと頭（画像の上から約17%の位置）が枠の外に出てしまうため、
	 *   **写真全体を下へずらして**頭の上に余白を確保している。**center に戻さないこと。**
	 * ★ 横位置（62%）はPC幅では**効かない**。cover が常に横幅基準で拡大するため左右は切り取られない。
	 *   横にずらしたい場合は background-size の拡大が必要だが、**拡大すると頭が再び切れる**ので注意。
	 *   （※SPは別変数 --mvp-bg-position-sp / --mvp-bg-size-sp で制御しており、この値は無関係） */
	--mvp-bg-position: 62% 22%;
	--mvp-bg-position-sp: right 70%;
	--mvp-bg-size-sp: auto 115%;
	/* SP（上下2段構成）用 */
	--mvp-sp-bg: var(--white);
	--mvp-sp-photo-h: 400px;
	/* 背景ベール */
	--mvp-veil-strong: rgba(255,255,255,.94);
	--mvp-veil-mid: rgba(255,255,255,.72);
	--mvp-veil-weak: rgba(255,255,255,0);
	/* 配色（碓井カラー：緑×オレンジ×白） */
	--mvp-lead-cl: var(--green-d);
	--mvp-lead-line: var(--green-d);
	--mvp-dot-cl: var(--orange);
	--mvp-heading-cl: var(--ink);
	--mvp-heading-name-cl: var(--green-d);
	--mvp-heading-em-cl: var(--orange);   /* キャッチコピーの「相続税申告」＝アクセントカラー（2026-08-07 優馬様のご指示で緑→オレンジ） */
	--mvp-box-bg: var(--white);
	--mvp-box-shadow: var(--shadow);
	--mvp-badge-bg: var(--green-d);
	--mvp-badge-cl: var(--white);
	--mvp-num-cl: var(--green-d);
	--mvp-point-cl: var(--ink);
	--mvp-point-em-cl: var(--green-d);
	--mvp-point-border: var(--line);
	--mvp-note-cl: var(--muted);
	--mvp-btn-bg: var(--orange);
	--mvp-btn-cl: var(--white);
	--mvp-btn-hover: var(--orange-d);
	--mvp-btn-shadow: 0 8px 32px rgba(236,122,28,.28);
	--mvp-btn-outline-bg: var(--white);   /* 写真に重なるため白背景で可読性を確保 */
	--mvp-btn-outline-cl: var(--green-d);
	--mvp-btn-outline-bd: var(--green);
	--mvp-btn-outline-hover: var(--gray);
}

.mvp { position: relative; min-height: var(--mvp-min-height); display: flex; align-items: center; overflow: hidden; }

/* 背景レイヤー */
.mvp-bg { position: absolute; inset: 0; z-index: 0; }
.mvp-bg-img {
	position: absolute; inset: 0;
	background-image: url('../images/mv-consult.jpg');
	background-size: cover;
	background-position: var(--mvp-bg-position);
	background-repeat: no-repeat;
}
/* 左側の文字可読性を確保するベール（左が濃く・右に向かって透明） */
.mvp-bg-veil {
	position: absolute; inset: 0;
	background: linear-gradient(to right, var(--mvp-veil-strong) 0%, var(--mvp-veil-strong) 28%, var(--mvp-veil-mid) 50%, var(--mvp-veil-weak) 72%);
}

.mvp-inner { position: relative; z-index: 1; width: 100%; max-width: var(--mvp-max-width); margin: 0 auto; padding: 80px 64px; }
.mvp-body { width: 100%; max-width: var(--mvp-body-width); }

/* リード文（両脇の斜線は疑似要素で描画） */
.mvp-lead { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 24px; font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; color: var(--mvp-lead-cl); }
.mvp-lead::before, .mvp-lead::after { content: ""; display: block; width: 2px; height: 28px; background-color: var(--mvp-lead-line); flex-shrink: 0; }
.mvp-lead::before { transform: rotate(-20deg); }
.mvp-lead::after { transform: rotate(20deg); }
/* 傍点（強調ドット） */
.mvp-lead-dots { -webkit-text-emphasis: filled dot var(--mvp-dot-cl); text-emphasis: filled dot var(--mvp-dot-cl); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }

/* キャッチコピー（MVのみゴシック太字。他の見出しは明朝のまま） */
.mvp-heading { margin: 0 0 32px; font-family: var(--sans); font-weight: 700; font-size: 42px; line-height: 1.35; letter-spacing: .05em; color: var(--mvp-heading-cl); }
.mvp-heading-line { display: block; }
.mvp-heading-name { font-style: normal; color: var(--mvp-heading-name-cl); }
.mvp-heading-lg { font-size: 56px; line-height: 1.3; }
.mvp-heading-em { font-style: normal; color: var(--mvp-heading-em-cl); }

/* 3ポイント訴求ボックス（左端は他要素と揃える） */
/* SP専用の写真バンド。PC・タブレットでは非表示（写真は背景レイヤー .mvp-bg-img が描く）。
   SPではこの要素が写真を担当し、「キャッチ → 写真 → 3つの強み」の順を通常フローで実現する。 */
.mvp-sp-photo { display: none; }

/* 3ポイント訴求ボックス。
   ★2026-09-07（第4版）：**形式を國田サイト（kunita-theme の `.mv-badges`）と完全に同一**にした。
     padding 20px 16px／border-radius 10px／box-shadow 0 8px 28px（緑の淡い影）は國田の数値そのまま。 */
.mvp-points { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; padding: 20px 16px; background-color: var(--mvp-box-bg); border-radius: 10px; box-shadow: 0 8px 28px rgba(58,127,85,.12); }
.mvp-points-badge { flex-shrink: 0; width: 120px; height: 120px; margin: 0; border-radius: 50%; background-color: var(--mvp-badge-bg); color: var(--mvp-badge-cl); display: flex; align-items: center; justify-content: center; text-align: center; }
.mvp-points-badge-txt { font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .05em; }
.mvp-points-list { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.mvp-point { flex: 1 1 0; min-width: 0; padding: 0 14px; text-align: center; }
.mvp-point + .mvp-point { border-left: 1px solid var(--mvp-point-border); }
/* ※`.mvp-point-num`（01/02/03 の連番）は2026-09-07に円形アイコンへ置き換えたため**未使用**。
   連番へ戻したくなったときのために指定だけ残している。 */
.mvp-point-num { display: block; margin-bottom: 8px; font-family: 'EB Garamond', Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: .05em; line-height: 1; color: var(--mvp-num-cl); }
/* 円形アイコン（インラインSVG）。circle の fill は currentColor のため、色は `color` で制御する。
   サイズ・余白は國田サイトの `.mv-badge-icon`（PC 52px／TB 44px／SP 38px）と同じ。 */
.mvp-point-ico { display: block; width: 52px; height: 52px; margin: 0 auto 10px; color: var(--mvp-num-cl); }
/* ラベルは2行構成（國田サイトの `.mv-badge-label` と同じ考え方）。
   1行目 `.mvp-point-lead` ＝文脈（通常の太さ）／2行目 `.mvp-point-em` ＝要点（太字・緑）。
   **語句は変えず、改行位置だけを「文脈／要点」で分けている。** */
.mvp-point-text { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: var(--ink-2); }
.mvp-point-lead { display: block; }
.mvp-point-em { display: block; font-style: normal; font-size: 19px; font-weight: 700; color: var(--mvp-point-em-cl); }
.mvp-point-sup { font-size: 10px; font-weight: 400; vertical-align: super; line-height: 0; }

/* 注釈 */
.mvp-note { margin: 0 0 32px; font-family: var(--sans); font-size: 12px; line-height: 1.8; letter-spacing: .05em; color: var(--mvp-note-cl); }

/* CTAボタン（2つ並べると自動で横並び） */
.mvp-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.mvp-btn {
	display: flex; align-items: center; justify-content: center; gap: 24px;
	flex: 1 1 0; min-width: 260px; max-width: 480px; min-height: 64px;
	padding: 16px 32px; border-radius: var(--mvp-radius);
	background-color: var(--mvp-btn-bg); color: var(--mvp-btn-cl); text-decoration: none;
	font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .05em; line-height: 1.5;
	box-shadow: var(--mvp-btn-shadow);
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mvp-btn:hover, .mvp-btn:focus-visible { background-color: var(--mvp-btn-hover); color: var(--mvp-btn-cl); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(236,122,28,.36); }
/* 枠線ボタン（電話番号） */
.mvp-btn--outline { background-color: var(--mvp-btn-outline-bg); color: var(--mvp-btn-outline-cl); border: 2px solid var(--mvp-btn-outline-bd); box-shadow: none; gap: 12px; }
.mvp-btn--outline:hover, .mvp-btn--outline:focus-visible { background-color: var(--mvp-btn-outline-hover); color: var(--mvp-btn-outline-cl); box-shadow: none; }
.mvp-btn-arrow { flex-shrink: 0; transition: transform .25s ease; }
.mvp-btn:hover .mvp-btn-arrow { transform: translateX(4px); }

/* ---------- お悩み ---------- */
.problems-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.problems-item { display: flex; align-items: flex-start; gap: 12px; background: var(--gray); border-radius: var(--radius); padding: 18px 20px; }
.problems-check { color: var(--green); display: flex; margin-top: 2px; }
.problems-text { font-weight: 500; }
.problems-lead { text-align: center; margin-top: 34px; font-size: 16px; color: var(--ink-2); }

/* ---------- 選ばれる理由 ---------- */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 32px; position: relative; box-shadow: var(--shadow-sm); }
.feature-no { display: inline-block; font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--gray-2); line-height: 1; margin-bottom: 12px; }
.section-gray .feature-no { color: #d6e6dc; }
.feature-title { font-size: 21px; color: var(--green-d); margin-bottom: 12px; }
.feature-text { color: var(--ink-2); font-size: 15px; }

/* ---------- 経営理念 ---------- */
.philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.philosophy-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.philosophy-mark { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #b6e77f, var(--leaf) 55%, var(--green) 100%); }
.philosophy-title { font-size: 19px; color: var(--green-d); margin-bottom: 10px; }
.philosophy-text { font-size: 14px; color: var(--ink-2); }

/* ---------- 対応業務 ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.service-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.service-card::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card:hover::before { transform: scaleY(1); }
.service-no { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--orange); letter-spacing: .1em; }
.service-card-title { font-size: 22px; color: var(--green-d); margin: 6px 0 12px; }
.service-card-text { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.service-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-d); font-weight: 700; font-size: 14px; }

/* ---------- 当事務所について ---------- */
.section-about .about-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.about-text { margin: 20px 0 28px; color: #dbeee1; font-size: 16px; }
.about-media .usu-img { box-shadow: var(--shadow); }

/* ---------- ご相談の流れ ----------
   デザインパーツ `section_timeline-flow`（横線＋円ノード型）を当テーマ配色へ移植。
   クラス名はパーツ由来の `.s03-*` を維持し、色・サイズのみサイト変数に置き換えている。
   最終ステップに `.s03-step--accent` を付けると、ノードが深緑塗り＋見出しがオレンジになる。
   ※接続ラインの left/right は「100% ÷ ステップ数 ÷ 2」。現在は4ステップのため 12.5%。
     ステップ数を変える場合はここの値も必ず合わせること（3→16.7% / 5→10%）。 */
.flow-lead { text-align: center; font-size: 16px; color: var(--ink-2); margin: -12px 0 52px; }
.flow-lead strong { color: var(--green-d); font-weight: 700; }

.s03-timeline-wrap { position: relative; }
.s03-steps { display: flex; position: relative; align-items: flex-start; }
/* 各ノードの中心を結ぶ横ライン（ノード径56px の半分＝28px の高さに引く） */
.s03-steps::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: var(--green-d); z-index: 0; }
.s03-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
/* 円ノード（中に手順番号を表示） */
.s03-node { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--green-d); background: #fff; color: var(--green-d); font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-bottom: 24px; }
.s03-step--accent .s03-node { background: var(--green-d); color: #fff; }
.s03-step-body { width: 100%; }
.s03-step-title { font-family: var(--serif); font-size: 19px; color: var(--green-d); line-height: 1.5; margin-bottom: 14px; }
.s03-step--accent .s03-step-title { color: var(--orange); }
.s03-step-desc { font-size: 15px; color: var(--ink-2); line-height: 1.9; }

/* TB（〜1024px）：余白と文字サイズのみ調整（横並びは維持） */
@media (max-width: 1024px) {
	.s03-step { padding: 0 10px; }
	.s03-step-title { font-size: 17px; }
	.s03-step-desc { font-size: 14px; }
}

/* SP（〜767px）：縦並びタイムライン（ノード左・本文右）に切り替え */
@media (max-width: 767px) {
	.flow-lead { text-align: left; font-size: 15px; margin: -6px 0 34px; }
	.s03-steps { flex-direction: column; }
	/* 縦ラインはノード中心（SPのノード径48px の半分＝24px）に沿わせる */
	.s03-steps::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 2px; height: auto; }
	.s03-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 0 0 30px; gap: 20px; }
	.s03-step:last-child { padding-bottom: 0; }
	.s03-node { width: 48px; height: 48px; font-size: 18px; margin-bottom: 0; }
	.s03-step-body { padding-top: 4px; }
	.s03-step-title { font-size: 18px; margin-bottom: 8px; }
}

/* ---------- 代表挨拶 / プロフィール ---------- */
.profile-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.profile-media .usu-img, .profile-media .img-ph { box-shadow: var(--shadow); }
.profile-role { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--green-d); margin: 8px 0 16px; }
.profile-role small { display: block; font-size: 13px; font-family: var(--sans); color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.profile-text { color: var(--ink-2); font-size: 16px; margin-bottom: 26px; white-space: pre-line; }

/* ---------- お客様の声 ---------- */
/* ---------- お客様の声（写真＋タグバッジ＋声＋属性のカード） ----------
   トップはカルーセル（PC3枚／TB2枚／SP1枚・自動再生なし）、実績ページは全件グリッド。
   カードの形は両ページで共通にする（同じ役割の要素は同じデザイン）。
   ※写真は事務所の相談風景であり、お客様ご本人ではない（alt で明示） */
.voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.voice-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.voice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* カード上部：写真 */
/* 写真の高さは padding-top で固定（16:10）。画像ごとの実寸に左右されないようにする */
.voice-photo { position: relative; flex: none; width: 100%; padding-top: 62.5%; overflow: hidden; background: var(--gray); }
.voice-photo .usu-img, .voice-photo img, .voice-photo .img-ph {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 0; box-shadow: none; aspect-ratio: auto;
}
/* カード下部 */
.voice-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.voice-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.voice-tag { padding: 4px 12px; border-radius: var(--radius); background: var(--green-d); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; }
.voice-text { flex: 1; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.9; margin: 0; }
.voice-meta { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 400; }

/* ---------- お客様の声カルーセル（トップ） ---------- */
.voice-carousel { position: relative; }
.voice-window { overflow: hidden; }
.voice-track { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; transition: transform .25s ease; }
.voice-item { flex: 0 0 calc((100% - 48px) / 3); }   /* PC：3枚 */
.voice-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }
.voice-arrow {
	width: 48px; height: 48px;              /* タップ領域44px以上 */
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--line); border-radius: 50%;
	color: var(--muted); cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.voice-arrow:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.voice-arrow:disabled { opacity: .4; cursor: not-allowed; }
.voice-dots { display: flex; align-items: center; gap: 8px; }
.voice-dot { position: relative; width: 40px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; }
.voice-dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .25s ease; }
.voice-dot[aria-current="true"]::after { background: var(--orange); }

/* ---------- 実績・解決事例 ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.case-point { background: #fff; border: 2px solid var(--green); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.case-point-title { font-size: 18px; color: var(--green-d); margin-bottom: 8px; }
.case-point-text { font-size: 15px; color: var(--ink-2); }

/* ---------- シミュレーション ---------- */
.sim-box { background: var(--gray); border-radius: var(--radius-lg); padding: 36px 24px; }
.sim-lead { text-align: center; color: var(--ink-2); margin-bottom: 22px; }
/* PCではキャッチフレーズを一列に固定（幅は十分あるため折り返さない） */
@media (min-width: 1025px) { .sim-lead { white-space: nowrap; } }
.sim-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sim-item { background: #fff; border-radius: var(--radius); padding: 30px 30px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.sim-item-title { font-size: 16px; color: var(--green-d); margin-bottom: 8px; }
.sim-item-text { font-size: 14px; color: var(--ink-2); }
/* スマホ：箱を左右へ少しはみ出させ内側余白で相殺し、中身の幅を他セクションと統一 */
@media (max-width: 767px) {
	.sim-box { margin-left: -12px; margin-right: -12px; padding: 24px 12px; }
	.sim-lead { font-size: 14.5px; line-height: 1.8; padding: 0 4px; margin-bottom: 18px; }
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 20px 22px; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--green-d); }
.faq-q-mark, .faq-a-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 15px; }
.faq-q-mark { background: var(--green-d); color: #fff; }
.faq-a-mark { background: var(--orange); color: #fff; }
.faq-q-text { flex: 1; }
.faq-q-toggle { flex: none; width: 16px; height: 16px; position: relative; }
.faq-q-toggle::before, .faq-q-toggle::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; transition: transform .25s; }
.faq-q-toggle::before { width: 16px; height: 2px; top: 7px; }
.faq-q-toggle::after { width: 2px; height: 16px; left: 7px; }
.faq-q[aria-expanded="true"] .faq-q-toggle::after { transform: scaleY(0); }
.faq-a { display: flex; gap: 14px; padding: 0 22px 22px; align-items: flex-start; }
.faq-a[hidden] { display: none; } /* ＋を押すまで回答を隠す（HTMLのhidden属性を有効化） */
.faq-a-text { color: var(--ink-2); font-size: 15px; padding-top: 3px; }

/* ---------- CTA ---------- */
/* ---------- 末尾CTA（相続税の無料相談）----------
   背景は上＝深いフォレストグリーン／下＝やや明るい深緑の2トーン。白カードが境目にまたがる構成。
   ※2026-08-06：参考デザイン（士業CTA）に合わせ、文字サイズ・カード幅を拡大し、
     下段の緑をロゴ由来の鮮やかな緑から落ち着いた深緑（--cta-green-*）へ変更した。
     配色はこの2変数のみで調整すること。 */
:root {
	--cta-green-top: #2b4a34;    /* 上段（濃い側）※やや灰みのある深緑 */
	--cta-green-bottom: #305a41; /* 下段（やや明るい側） */
}
.cta-section {
	position: relative;
	overflow: hidden;
	padding: 92px 0 0;
	color: #fff;
	background: linear-gradient(to bottom, var(--cta-green-top) 0%, var(--cta-green-top) 62%, var(--cta-green-bottom) 62%, var(--cta-green-bottom) 100%);
}
/* カード下の余白（2トーンの下側を見せる） */
.cta-section::after { content: ""; display: block; height: 92px; }
.cta-inner { text-align: center; position: relative; }
.cta-title { font-size: 44px; line-height: 1.45; margin-bottom: 30px; }
/* バッジは白で塗りつぶし＋緑文字（見本デザイン準拠）。枠線は使わず、バッジ同士は少し離す */
.cta-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.cta-badges li { background: #fff; color: var(--green-d); border: none; padding: 6px 26px; font-size: 19px; font-weight: 700; line-height: 1.6; }
.cta-text { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.cta-note { font-size: 14px; color: #cfe6d6; margin-bottom: 46px; }

/* 白カード：参考デザインに合わせ「角丸なし・左右の余白を広く」取る */
.cta-card {
	position: relative;
	background: #fff; color: var(--ink);
	border-radius: 0;
	padding: 44px 92px; max-width: 1040px; margin: 0 auto;
	box-shadow: var(--shadow);
}
/* 右上のオレンジラベル（カード上辺にまたがり、右端はカード内側の余白位置＝92pxに揃える） */
.cta-card-tag {
	position: absolute; right: 92px; top: -6px;
	display: inline-block;
	background: var(--orange); color: #fff;
	padding: 3px 20px;
	border-radius: 0;
	font-weight: 700; font-size: 14px; line-height: 1.3;
}
/* 3ステップ（薄グレーの帯）※参考デザインに合わせ無彩色グレー・角丸なし */
.cta-flow {
	display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
	background: #f3f3f3; border-radius: 0;
	padding: 14px 24px; margin-bottom: 42px;
}
.cta-flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; }
.cta-flow-no { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 22px; color: var(--cta-green-bottom); line-height: 1.2; }
.cta-flow-txt { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.cta-flow-arrow { display: flex; align-items: center; color: var(--muted); }
/* スマホ：3ステップ（01›02›03）を折り返さず横1列に固定 */
@media (max-width: 767px) {
	.cta-flow { flex-wrap: nowrap; gap: 8px; }
}

/* 入力側 */

/* 結果側 */

/* ---------- シミュレーターのタブ切替（/simulation/） ---------- */
.sim-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.sim-tab {
	display: flex; flex-direction: column; gap: 6px;
	padding: 20px 24px; text-align: left; cursor: pointer;
	background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
	font-family: inherit; color: var(--ink-2);
	transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.sim-tab:hover { border-color: var(--green); }
.sim-tab.is-active { background: var(--green-d); border-color: var(--green-d); color: #fff; box-shadow: var(--shadow-sm); }
.sim-tab-title { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--green-d); line-height: 1.5; }
.sim-tab.is-active .sim-tab-title { color: #fff; }
.sim-tab-text { font-size: 13px; line-height: 1.7; }
.sim-tab.is-active .sim-tab-text { color: #dceade; }
.sim-panel[hidden] { display: none; }

/* パネルの中身＝「シミュレーションを行う意味」の説明文（2026-08-07：自作の計算フォームを廃止して差し替え） */
.sim-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 36px 40px; }
.sim-note-title { font-size: 21px; color: var(--green-d); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.sim-note-text { color: var(--ink-2); line-height: 2; }
.sim-note-text + .sim-note-text { margin-top: 16px; }
.sim-note-text strong { color: var(--green-d); font-weight: 700; }
@media (max-width: 767px) {
	.sim-note { padding: 24px 20px; }
	.sim-note-title { font-size: 18px; }
	.sim-note-text { font-size: 15px; line-height: 1.95; }
}

/* 入力フォームの小見出し・区切り（申告／生前対策シミュレーター） */

/* 申告要否の判定（相続税申告シミュレーター） */

/* 無対策 → 対策後の比較（生前対策シミュレーター） */
/* 税負担の差額 */

/* 申告期限の案内 */

/* 関連シミュレーターへの導線 */

/* 免責 */

@media (max-width: 767px) {
	/* 比較（無対策→対策後）はSPでは縦積み＋矢印を下向きに */
	/* タブはSPでは縦積み */
	.sim-tablist { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
	.sim-tab { padding: 16px 18px; }
	.sim-tab-title { font-size: 17px; }
}

/* ---------- 「さらに見る」トグル ----------
 * 【優馬様のご指示・2026-08-07】トップの「こんなお悩みありませんか？」から「さらに見る」を廃止。
 *  ・PC（1025px以上）… お悩み6項目をすべて表示
 *  ・タブレット・スマホ（1024px以下）… 先頭3項目のみ表示（残り3項目は非表示。ボタンも出さない）
 * ボタン（.more-toggle）のスタイルは、実績など他のセクションで使う可能性があるため残置している。
 * ※お悩みの件数は front-page.php の `$i >= 3`（is-extra を付ける位置）と `usu_problems()` が対。
 */
.more-toggle-wrap { display: none; }
.more-toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--orange-d); border: 1px solid var(--orange); border-radius: 999px; padding: 10px 24px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .2s, color .2s; }
.more-toggle::after { content: "▾"; font-size: 11px; }
.more-toggle.is-active::after { content: "▴"; }
.more-toggle:hover { background: var(--orange); color: #fff; }
/* タブレット・スマホ（1024px以下）はお悩みを3項目までにする（4〜6項目目を非表示） */
@media (max-width: 1024px) {
	.problems-list .is-extra { display: none; }
}
@media (max-width: 767px) {
	.cases-grid .is-extra { display: none; }
	.cases-grid.is-open .is-extra { display: block; }
}
/* 電話番号とフォームボタン（参考デザイン準拠）
   ・電話は上段＝アイコン＋番号（明朝・黒・字間広め）、下段＝受付時間を中央揃え
   ・ボタンは角丸なし・影なし。色はusuiのブランドオレンジ（--orange）を維持する */
.cta-actions { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; }
.cta-tel { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.cta-tel-row { display: flex; align-items: center; gap: 12px; }
.cta-tel-ico { display: flex; color: var(--ink); }
.cta-form-btn { flex: 1; min-width: 320px; max-width: 420px; border-radius: 0; padding: 26px 30px; font-size: 20px; box-shadow: none; }
.cta-form-btn:hover { box-shadow: none; }
.cta-form-btn-arrow { margin-left: auto; font-size: 20px; }
.cta-tel-num { font-family: var(--serif); font-size: 46px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; color: var(--ink); }
.cta-tel-note { font-size: 15px; color: var(--ink-2); text-align: center; }

/* ---------- アクセス / テーブル ---------- */
.access-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.access-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.access-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 15px; }
.access-pin { color: var(--green); display: flex; margin-top: 3px; }
.access-text { color: var(--ink-2); }
.access-map .usu-img, .access-map iframe { width: 100%; border: 0; border-radius: var(--radius); }
.info-table, .access-table, .fee-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.info-table th, .info-table td, .access-table th, .access-table td, .fee-table th, .fee-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.info-table tr:last-child th, .info-table tr:last-child td, .access-table tr:last-child th, .access-table tr:last-child td, .fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: none; }
.info-table th, .access-table th { width: 32%; background: var(--gray); color: var(--green-d); font-weight: 700; }
.fee-table thead th { background: var(--green-d); color: #fff; font-weight: 700; text-align: center; }
.fee-table td { text-align: left; }
.fee-price { font-weight: 700; color: var(--green-d); white-space: nowrap; }

/* ---------- 料金：注意ボックス・リスト ---------- */
.notice-box { background: #fff6e9; border: 1px solid #f0d6a8; border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; font-size: 15px; color: #8a5a12; }
.notice-box strong { color: #7a4e0c; }
.note-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.note-list li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.note-list li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---------- 対応業務詳細（取扱業務ページ：タブ切替型） ----------
   デザインパーツ `section_services-tabs` を当テーマ配色へ移植。
   クラス名はパーツ由来の `.s11-*` を維持し、色・サイズのみサイト変数に置き換えている。
   ・PC ：タブを1行に均等配分／パネルは左＝写真・右＝見出し＋本文の2カラム
   ・SP ：タブは3列で折り返し／パネルは 見出し→写真→本文 の縦積み
   ・タブとパネルの紐付けは data-slug ／ aria-controls、切替の動作は main.js が担当
   ・**画面幅いっぱい**に置く前提のため角丸・影は付けない（テンプレート側で .container の外に出している）
   ・業務名の左の丸はヘッダーと同じ `.brand-mark`（全業務で共通・アイコンは使わない） */
.s11 { background: #fff; overflow: hidden; scroll-margin-top: 100px; }
/* トップの取扱業務：白いタブ枠の下に薄緑の余白が残らないよう、セクション下パディングを詰める
   （枠の直下から「選ばれる理由」が始まるようにする） */
#services.section-services { padding-bottom: 0; }

/* タブナビゲーション */
.s11-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
.s11-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; background: var(--muted); color: #fff; border: none; border-right: 1px solid rgba(255,255,255,.3); cursor: pointer; position: relative; transition: background-color .2s; text-align: center; font-family: inherit; }
.s11-tab:last-child { border-right: none; }
.s11-tab:hover:not(.is-active) { background: #5b6a60; }
.s11-tab.is-active { background: var(--green-d); }
/* アクティブタブ下の三角インジケーター */
.s11-tab.is-active::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--green-d); z-index: 2; }
.s11-tab-ja { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; }
.s11-tab-en { font-size: 11px; letter-spacing: .1em; opacity: .85; }

/* パネル（非アクティブは非表示） */
.s11-panels { position: relative; }
.s11-panel { display: none; }
.s11-panel.is-active { display: block; }
/* 全幅表示のため、右カラムの左右余白は画面幅に応じて可変（広い画面でも本文が間延びしない） */
.s11-panel-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; min-height: 520px; }
.s11-panel-hdr { grid-column: 2; grid-row: 1; padding: 56px clamp(32px, 4.5vw, 88px) 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.s11-panel-img { grid-column: 1; grid-row: 1 / 3; overflow: hidden; }
/* パネル内の写真は枠いっぱいに敷くため、共通の .usu-img の角丸・影・比率を打ち消す */
.s11-panel-img .usu-img, .s11-panel-img img, .s11-panel-img .img-ph { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; border-radius: 0; box-shadow: none; padding-top: 0; }
.s11-panel-body { grid-column: 2; grid-row: 2; padding: 0 clamp(32px, 4.5vw, 88px) 56px; display: flex; flex-direction: column; }
.s11-heading-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* 業務名の左の丸（ヘッダーロゴと同じ .brand-mark を使い、全業務で統一） */
.s11-logo { flex: none; display: flex; align-items: center; line-height: 1; }
.s11-logo .brand-mark { width: 30px; height: 30px; }
.s11-heading { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--green-d); letter-spacing: .04em; line-height: 1.35; margin: 0; }
.s11-rule { border: none; border-top: 1px solid var(--line); margin: 0; }
.s11-text { font-size: 15.5px; line-height: 2; color: var(--ink-2); margin: 24px 0 32px; }
/* 「この業務を相談する」（横線＋丸ボタン） */
.s11-more { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.s11-more:hover .s11-more-btn { transform: scale(1.08); }
.s11-more-text { flex: none; font-size: 14px; font-weight: 700; color: var(--orange-d); letter-spacing: .06em; white-space: nowrap; }
.s11-more-line { flex: 1; height: 1px; background: var(--line); }
.s11-more-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .2s; }

@media (max-width: 1024px) {
	.s11-tab { padding: 14px 8px; }
	.s11-tab-ja { font-size: 14px; }
	.s11-tab-en { font-size: 10px; }
	.s11-panel-inner { min-height: 380px; }
	.s11-panel-hdr { padding: 34px 28px 16px; }
	.s11-panel-body { padding: 0 28px 34px; }
	.s11-heading { font-size: 21px; }
	.s11-text { font-size: 15px; margin: 20px 0 26px; }
}

@media (max-width: 767px) {
	/* タブは3列で折り返し（5業務＝3+2行） */
	.s11-tabs { flex-wrap: wrap; }
	.s11-tab { flex: 1 1 calc(100% / 3); padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,.3); }
	.s11-tab-ja { font-size: 13px; letter-spacing: .04em; }
	.s11-tab-en { font-size: 9px; letter-spacing: .06em; }
	.s11-tab.is-active::after { display: none; }
	/* パネルは 見出し→写真→本文 の縦積み */
	.s11-panel-inner { display: flex; flex-direction: column; min-height: auto; }
	.s11-panel-hdr { order: 1; padding: 26px 20px 14px; }
	.s11-panel-img { order: 2; }
	.s11-panel-img .usu-img, .s11-panel-img img, .s11-panel-img .img-ph { height: auto; aspect-ratio: 4 / 3; }
	.s11-panel-body { order: 3; padding: 22px 20px 30px; }
	.s11-heading { font-size: 19px; }
	.s11-logo .brand-mark { width: 24px; height: 24px; }
	.s11-text { font-size: 15px; line-height: 1.9; margin: 18px 0 22px; }
	.s11-more-text { font-size: 13px; }
	.s11-more-btn { width: 40px; height: 40px; }
}
.service-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-sub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; scroll-margin-top: 100px; }
.service-sub-title { font-size: 18px; color: var(--green-d); margin-bottom: 10px; }
.service-sub-text { font-size: 14px; color: var(--ink-2); }

/* ---------- contact ---------- */
.contact-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
.contact-way { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; text-align: center; box-shadow: var(--shadow-sm); }
.contact-way-ico { display: inline-flex; width: 62px; height: 62px; align-items: center; justify-content: center; border-radius: 50%; background: var(--gray); color: var(--orange); margin-bottom: 14px; }
.contact-way-title { font-size: 20px; color: var(--green-d); margin-bottom: 10px; }
.contact-way-text { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.contact-way-tel { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--green-d); }
.contact-way-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- form ---------- */
.contact-form-area { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.form-pending-note { background: var(--gray); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 700; color: var(--green-d); margin-bottom: 8px; font-size: 15px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--sans); font-size: 15px; background: #fdfefd; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(236,122,28,.15); }
.req, .opt { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }
.req { background: #fdeede; color: var(--orange-d); }
.opt { background: var(--gray-2); color: var(--muted); }
.form-consent { background: var(--gray); border-radius: 8px; padding: 16px 18px; font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }
.form-submit { text-align: center; }
.static-form .js-other-row { display: none; }
.static-form .js-other-row.is-show { display: block; }

/* CF7 最低限の整形（プラグイン導入後の本フォーム） */
.wpcf7-form p { margin-bottom: 18px; }
.wpcf7-form label { font-weight: 700; color: var(--green-d); }
.wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; margin-top: 6px; }
.wpcf7-form .wpcf7-submit { width: auto; background: var(--orange); color: #fff; border: none; border-radius: 999px; padding: 15px 40px; font-weight: 700; cursor: pointer; }

/* ---------- 投稿一覧 / 汎用ページ ---------- */
.page-content h2 { font-size: 24px; color: var(--green-d); margin: 30px 0 14px; }
.page-content h3 { font-size: 19px; color: var(--green-d); margin: 24px 0 10px; }
.page-content p { margin-bottom: 16px; color: var(--ink-2); }
.post-item { border-bottom: 1px solid var(--line); }
.post-item-link { display: flex; gap: 18px; align-items: baseline; padding: 18px 4px; }
.post-item-date { color: var(--muted); font-size: 13px; flex: none; }
.post-item-title { font-size: 17px; color: var(--green-d); }
.error-links { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 30px; }
.error-links a { font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: var(--green-d); color: #cfdfd5; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; padding: 60px 24px; }
.footer-name { font-family: var(--serif); font-size: 20px; font-weight: 700; color: #fff; }
.footer-en { font-size: 12px; letter-spacing: .12em; color: #a9d8ba; margin: 4px 0 14px; }
.footer-meta { font-size: 13px; line-height: 1.9; color: #bcd3c2; }
.footer-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 40px; justify-content: end; }
.footer-nav-list { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list a { color: #cfdfd5; font-size: 14px; }
.footer-nav-list a:hover { color: #fff; }
.footer-note { border-top: 1px solid rgba(255,255,255,.12); }
.footer-note .container { padding: 20px 24px; }
.copyright { font-size: 12px; color: #93b19d; text-align: center; }

/* ---------- SP固定CTAバー ---------- */
.sp-fixed-cta { display: none; }

/* ---------- reveal（スクロール出現） ---------- */
.reveal, .section-head, .feature-card, .service-card, .s03-step, .faq-item, .contact-way, .problems-item { opacity: 1; }
.js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.js-reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
 * レスポンシブ
 * ======================================================= */
/* ---- ヘッダーをハンバーガーへ切り替える幅 ----
   ★2026-09-07：ナビが6項目→**7項目**（コラム追加）になり、1100px前後で
     電話番号とCTAボタンがはみ出して崩れていたため、**切替点を 1024px → 1340px** に引き上げた（1200pxでもまだ収まらなかったため実測して決定）。
     ・**ナビ項目を増やしたら、必ず 1341〜1500px の幅で崩れないか実測して確認すること。**
     ・SPナビ（ハンバーガー）の中身は header.php の `$usu_sp_nav` が持つ。
   ※ヘッダー以外のレスポンシブ（セクションの余白等）は従来どおり 1024px のままなので、
     この2つのブレークポイントを混同しないこと。 */
@media (max-width: 1340px) {
	.header-tel { display: none; }
	.global-nav, .header-contact-btn { display: none; }
	.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; }
	.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--green-d); border-radius: 2px; transition: transform .3s, opacity .3s; }
	.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
	.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.section { padding: 60px 0; }
	.section-title { font-size: 25px; }
	.features-grid, .services-grid, .problems-list, .contact-ways, .voices-grid, .cases-grid,
	.philosophy-grid, .sim-items,
	.section-about .about-inner, .profile-inner, .access-inner,
	.service-sub-grid { grid-template-columns: 1fr; }
	.section-about .about-inner { gap: 30px; }
	.service-sub-grid { gap: 14px; }
	.footer-inner { grid-template-columns: 1fr; gap: 28px; }
	.footer-nav { justify-content: start; grid-template-columns: repeat(2, auto); gap: 8px 30px; }

	/* MV（TB）：ベールを左側だけに絞り、人物のいる右側は素通しにして顔をはっきり見せる */
	.mvp { min-height: 520px; }
	.mvp-inner { padding: 64px 40px; }
	.mvp-body { max-width: 560px; }
	.mvp-bg-veil { background: linear-gradient(to right, var(--mvp-veil-strong) 0%, var(--mvp-veil-strong) 42%, var(--mvp-veil-mid) 55%, var(--mvp-veil-weak) 68%); }
	.mvp-lead { font-size: 17px; }
	.mvp-heading { font-size: 34px; }
	.mvp-heading-lg { font-size: 44px; }
	/* 國田サイトのタブレット指定（icon 44px／label 14px／strong 16px）に合わせる */
	.mvp-points { gap: 12px; padding: 16px 10px; }
	.mvp-points-badge { width: 88px; height: 88px; }
	.mvp-points-badge-txt { font-size: 11px; }
	.mvp-point { padding: 0 10px; }
	.mvp-point-ico { width: 44px; height: 44px; margin-bottom: 8px; }
	.mvp-point-text { font-size: 14px; }
	.mvp-point-em { font-size: 16px; }
	/* お客様の声カルーセル（TB：2枚表示） */
	.voice-item { flex: 0 0 calc((100% - 24px) / 2); }

	/* TB：ボタンの余白と矢印を詰める */
	.mvp-btn { font-size: 17px; min-width: 200px; gap: 12px; padding: 16px 20px; }
	.mvp-btn-arrow { width: 32px; }
	/*
	 * 【優馬様のご指示・2026-08-07】タブレット・スマホ（1024px以下）では
	 * オレンジの「無料相談を予約する」ボタンを出さない。
	 *  ・TB … 電話ボタン（.mvp-btn--outline）のみ表示
	 *  ・SP … 電話ボタンも非表示のため、MVにCTAボタンは出ない（下部の固定CTAバーが受け皿）
	 * ボタンを復活させる場合は、SPの `.mvp-note` の margin-bottom（写真エリア分の余白）も
	 * ボタン高さ分だけ差し引いた値に戻すこと。
	 */
	.mvp-cta .mvp-btn:not(.mvp-btn--outline) { display: none; }

	/* SP固定CTA表示（本文が隠れないよう余白確保） */
	body { padding-bottom: 66px; }
	.sp-fixed-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
	.sp-fixed-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; color: #fff; font-weight: 700; font-size: 14px; }
	.sp-fixed-tel { background: var(--green-d); }
	.sp-fixed-mail { background: var(--orange); }
	.sp-fixed-txt { display: flex; flex-direction: column; line-height: 1.2; }
	.sp-fixed-txt small { font-size: 10px; font-weight: 500; opacity: .85; }
}
/* 末尾CTA（TB）：カードの余白と電話番号を1段階縮める
   ※カード左右の余白を変えたら、オレンジラベルの right も必ず同じ値に合わせること */
@media (max-width: 1024px) {
	.cta-title { font-size: 36px; }
	.cta-badges li { font-size: 17px; padding: 3px 20px; }
	.cta-text { font-size: 17px; }
	.cta-card { padding: 40px 44px; }
	.cta-card-tag { right: 44px; }
	.cta-tel-num { font-size: 38px; letter-spacing: .06em; }
	.cta-flow-step { min-width: 120px; }
}

/* 末尾CTA（SP）：見出し・カード・ボタンを画面幅に収める */
@media (max-width: 767px) {
	.cta-section { padding: 56px 0 0; }
	.cta-section::after { height: 56px; }
	.cta-title { font-size: 24px; margin-bottom: 20px; }
	.cta-badges li { padding: 6px 12px; font-size: 13px; }
	.cta-text { font-size: 15px; }
	.cta-note { margin-bottom: 28px; }
	.cta-card { padding: 24px 16px; }
	.cta-tel-num { font-size: 32px; letter-spacing: .04em; }
	.cta-tel-note { font-size: 12px; }
	.cta-form-btn { font-size: 16px; }
	.cta-badges li { line-height: 1.6; }
	/* ラベルはカード上部に全幅で配置（右上に置くと画面からはみ出すため） */
	.cta-card-tag { position: static; display: block; margin: -24px -16px 20px; border-radius: var(--radius) var(--radius) 0 0; font-size: 12px; text-align: center; }
	.cta-flow { gap: 4px; padding: 14px 8px; margin-bottom: 24px; }
	.cta-flow-step { min-width: 0; }
	.cta-flow-no { font-size: 15px; }
	.cta-flow-txt { font-size: 12px; }
	.cta-form-btn { min-width: 0; width: 100%; max-width: none; padding: 18px 20px; }
	/* 電話とボタンは縦積みにする（横並びのままだとボタンが潰れて文字が数行に折り返す） */
	.cta-actions { flex-direction: column; gap: 20px; }
	.cta-tel { justify-content: center; }
}

@media (max-width: 520px) {
	.container { padding: 0 18px; }
	.cta-actions { flex-direction: column; }
	.cta-tel-num { font-size: 26px; }
	.contact-form-area { padding: 24px 18px; }
}

/* =========================================================
 * 追加：ヘッダー全幅ドロップダウン・カードアイコン・MV代表チップ
 * ======================================================= */

/* ---------- ヘッダー ドロップダウン（相談について） ---------- */
.global-nav-list > li { position: relative; }
.global-nav-list > li.menu-item-has-children > a,
.global-nav-list > li.gnav-has-child > a { padding-right: 16px; }
.global-nav-list > li.menu-item-has-children > a::before,
.global-nav-list > li.gnav-has-child > a::before {
	content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
	border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
	transform: translateY(-70%) rotate(45deg);
}
.global-nav-list .sub-menu {
	position: absolute; top: calc(100% + 12px); left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 210px; background: #fff; border-radius: var(--radius);
	border-top: 3px solid var(--orange); box-shadow: var(--shadow);
	padding: 8px 0; display: flex; flex-direction: column;
	opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 130;
}
.global-nav-list .sub-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.global-nav-list > li:hover > .sub-menu,
.global-nav-list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.global-nav-list .sub-menu li { display: block; }
.global-nav-list .sub-menu a { display: block; padding: 11px 22px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--green-d); }
.global-nav-list .sub-menu a::after { display: none; }
.global-nav-list .sub-menu a:hover { background: var(--gray); color: var(--orange-d); }

/* ---------- カードのアイコン（選ばれる理由・取扱業務・理念） ---------- */
.feature-card { position: relative; }
.feature-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gray); color: var(--green); margin-bottom: 16px; }
.feature-ico .icon { width: 28px; height: 28px; }
.feature-card .feature-no { position: absolute; top: 30px; right: 32px; margin: 0; font-size: 34px; color: #e0ede4; }
.section-gray .feature-card .feature-no { color: #d3e6d9; }
.service-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.service-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--gray); color: var(--green); flex: none; }
.service-ico .icon { width: 24px; height: 24px; }
.philosophy-mark { display: flex; align-items: center; justify-content: center; color: #fff; }
.philosophy-mark .icon { width: 24px; height: 24px; }

/* ---------- 選ばれる理由：デザインパーツ section_2col-text-image 移植（番号見出し＋本文＋写真の2カラム） ---------- */
.features-2col { margin-top: 8px; }
.s04 { background: transparent; padding: 52px 0; }
.s04 + .s04 { border-top: 1px solid var(--line); }
.s04-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.s04-inner { display: grid; grid-template-columns: 55fr 45fr; gap: 56px; align-items: center; }
.s04-inner.s04-reverse .s04-img-wrap { order: -1; }
.s04-text { min-width: 0; }
.s04-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; line-height: 1; }
.s04-num-label { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--green); letter-spacing: .05em; }
/* 番号は視認性・訴求力を優先し、見出しと同じ深緑で濃く表示する（旧：#cfe3d5 は薄すぎた） */
.s04-num-value { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 60px; line-height: .85; color: var(--green-d); }
.s04-title { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--green-d); line-height: 1.55; letter-spacing: .02em; margin-bottom: 18px; }
.s04-body-text { font-size: 15.5px; color: var(--ink-2); line-height: 1.95; }
.s04-body-text p + p { margin-top: 14px; }
.s04-img-wrap { width: 100%; min-width: 0; }
.s04-img-wrap .usu-img, .s04-img-wrap img { width: 100%; height: auto; display: block; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); }
@media (max-width: 1024px) {
	.s04 { padding: 40px 0; }
	.s04-inner { grid-template-columns: 1fr; gap: 24px; }
	/* スマホ版は全項目「文章が上・写真が下」に統一（PC版の左右交互は維持） */
	.s04-inner.s04-reverse .s04-img-wrap { order: 0; }
	.s04-num-value { font-size: 50px; }
	.s04-title { font-size: 20px; }
}

/* ---------- 私たちの理念：キャッチコピー（緑太字＋下線）／写真／詳細文 の縦積み ---------- */
.philosophy-3col { margin-top: 8px; }
.philosophy-3col .s01-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.philosophy-3col .s01-item { display: flex; flex-direction: column; }
/* キャッチコピー：マーカー無し・緑の太字・下にアンダーライン（区切り） */
.philosophy-3col .s01-title { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--green-d); line-height: 1.5; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid var(--green); }
/* 写真（キャッチとの間隔をあけて配置） */
.philosophy-3col .s01-img-wrap { overflow: hidden; border-radius: var(--radius); }
.philosophy-3col .s01-img { width: 100%; padding-top: 66%; background: #e3ece5; position: relative; overflow: hidden; border-radius: var(--radius); }
.philosophy-3col .s01-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 詳細文（写真の下に間隔をあけて配置） */
.philosophy-3col .s01-body { font-size: 15px; color: var(--ink-2); line-height: 1.95; margin: 18px 0 0; }
@media (max-width: 767px) {
	.philosophy-3col .s01-grid { grid-template-columns: 1fr; gap: 36px; }
	.philosophy-3col .s01-title { font-size: 17px; margin-bottom: 18px; }
	.philosophy-3col .s01-img { padding-top: 60%; }
	.philosophy-3col .s01-body { font-size: 14px; }
}

/* ---------- アクセス：Googleマップ埋め込み（レスポンシブ） ---------- */
.map-embed { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-top: 14px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #eef2ef; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) {
	.map-embed { aspect-ratio: 3 / 2; margin-top: 12px; }
}

/* ---------- アクセス ----------
 * ★ 2026-09-24（優馬様のご指示・第2版）で**縦3段（すべて全幅）**の構成にした。
 *   1段目 ＝ アクセスの文章（.access-text＋.access-list／トップは .access-table--full の表）
 *   2段目 ＝ .access-photos  … 建物の写真2枚を横並び（左＝三島ビル外観／右＝館銘板）
 *   3段目 ＝ .access-map-full … Googleマップ。1段目と同じ全幅で、21:9の横長の帯にしている
 *            （全幅で4:3のままだと高さ約800pxになり縦長すぎるため）
 *   トップ（front-page.php）と事務所情報（page-office.php）で同じ構成。**片方だけ直さないこと。**
 *   860px以下では写真2枚が縦積みになり、マップは3:2に戻す（横長のままだと細すぎるため）。
 * ※ 旧 `.access-media` / `.access-media-photo` / `.access-media-info`（文章と地図を左右に
 *   並べていた頃のもの）は**未使用**だが、復元用に残置している。
 * ------------------------------------------------------- */
.access-table--full { width: 100%; }
.access-table--full th { width: 200px; }
/* 旧構成（未使用・復元用に残置） */
.access-media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
.access-media-photo .usu-img, .access-media-photo img { width: 100%; border-radius: var(--radius); }
.access-media .map-embed { margin-top: 0; }
.access-media-info { align-self: center; }
.access-media-info .access-text { margin-top: 0; }
.access-media-info .access-list { margin-top: 14px; }
.access-media-info .access-table--full th { width: 30%; }
/* 2段目：写真2枚の横並び */
.access-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
.access-photo { margin: 0; }
.access-photo .usu-img, .access-photo img { width: 100%; border-radius: var(--radius); }
.access-photo-cap { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
/* 3段目：全幅のGoogleマップ（横長の帯） */
.access-map-full { margin-top: 28px; }
.access-map-full .map-embed { margin-top: 0; aspect-ratio: 21 / 9; }
@media (max-width: 860px) {
	.access-table--full th { width: 34%; }
	.access-media { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
	.access-media-info .access-table--full th { width: 34%; }
	.access-photos { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
	.access-map-full { margin-top: 20px; }
	.access-map-full .map-embed { aspect-ratio: 3 / 2; }
}

/* ---------- SP専用改行ユーティリティ（PCでは非表示・スマホのみ改行） ---------- */
.br-sp { display: none; }
@media (max-width: 767px) {
	.br-sp { display: inline; }

	/* お客様の声（SP：カルーセルは1枚表示・カード内の余白を詰める） */
	.voice-item { flex: 0 0 100%; }
	.voice-body { padding: 20px; }
	.voice-text { font-size: 15px; }
	.voice-nav { margin-top: 28px; }

	/* ---- MV（SP）：キャッチ → 写真 → 3つの強み の縦積み（國田サイトと同じ順） ----
	   ★2026-09-07（優馬様のご指示）：従来は「上＝テキスト／下＝背景写真」で、強み3点は写真の**上**にあった。
	     國田サイトと同じ「写真の**下**に強み3点」へ変更するため、
	     **SPでは背景レイヤーを使わず、`.mvp-sp-photo` を通常フローの要素として写真に使う**。
	     これにより「写真の高さを見越した余白の数値合わせ」が不要になり、文字量が変わっても崩れない。
	     **絶対配置（.mvp-bg-img を使う方式）に戻さないこと。**
	   ・並び順は `.mvp-body` を縦フレックスにして `order` で制御する（HTMLの順序はPC優先のまま）。 */
	.mvp { min-height: auto; align-items: flex-start; background-color: var(--mvp-sp-bg); }
	/* SPでは背景レイヤーの写真・ベールを使わない（写真は .mvp-sp-photo が担当） */
	.mvp-bg-img, .mvp-bg-veil { display: none; }
	.mvp-inner { padding: 0; }
	.mvp-body { max-width: none; padding: 32px 16px 32px; text-align: center; display: flex; flex-direction: column; }
	/* 並び順：リード → キャッチ → 写真 → 3つの強み → 注釈（CTAはSPでは非表示） */
	.mvp-lead     { order: 1; }
	.mvp-heading  { order: 2; }
	.mvp-sp-photo { order: 3; }
	.mvp-points   { order: 4; }
	.mvp-note     { order: 5; }
	.mvp-cta      { order: 6; }
	/* 写真バンド：本文の左右パディング分だけ外へ広げて全幅で見せる。
	   高さは既存変数 --mvp-sp-photo-h で調整でき、上端は白へフェードさせて文字側と自然につなぐ。 */
	.mvp-sp-photo {
		display: block; position: relative; height: var(--mvp-sp-photo-h);
		margin: 0 -16px 26px;
		background-image: url('../images/mv-consult.jpg');
		background-size: var(--mvp-bg-size-sp);
		background-position: var(--mvp-bg-position-sp);
		background-repeat: no-repeat;
	}
	.mvp-sp-photo::before {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(to bottom, var(--mvp-sp-bg) 0%, rgba(255,255,255,0) 10%);
	}
	.mvp-lead { gap: 12px; margin-bottom: 14px; font-size: 15px; }
	.mvp-lead::before, .mvp-lead::after { height: 22px; }
	.mvp-heading { margin-bottom: 20px; font-size: 26px; }
	.mvp-heading-lg { font-size: 34px; }
	/* ポイントは横並び3カラムのまま（文字は自動で折り返す） */
	.mvp-points { gap: 12px; margin-bottom: 12px; padding: 16px 12px; }
	.mvp-points-badge { width: 80px; height: 80px; }
	.mvp-points-badge-txt { font-size: 10px; line-height: 1.5; }
	.mvp-point { padding: 0 6px; }
	.mvp-point-num { margin-bottom: 4px; font-size: 18px; }
	/* ラベルは2行（文脈／太字の要点）で見せる。※旧仕様の「br を消して1行にする」指定は撤回した */
	.mvp-point-text { font-size: 12px; }
	.mvp-point-em { font-size: 14px; }
	/*
	 * 注釈。※1 は3つの強みの中で使っているため、強みの**下**に置く（order:5）。
	 * ※2026-09-07：写真を通常フローの `.mvp-sp-photo` に変えたため、
	 *   ここで写真ぶんの余白（旧 margin-bottom: calc(--mvp-sp-photo-h - 32px)）を確保する必要はなくなった。
	 */
	.mvp-note { margin-top: 12px; margin-bottom: 0; text-align: left; }
	.mvp-cta { flex-direction: column; }
	.mvp-btn { max-width: none; min-width: 0; gap: 16px; font-size: 17px; }
	.mvp-btn-arrow { width: 40px; }
	/* SPは電話ボタンを出さない（写真が隠れるため）。電話は画面下部の固定CTAバーから利用できる */
	.mvp-btn--outline { display: none; }
	/* 上部「碓井公認会計事務所」ブランドを大きめの枠に */
	.header-inner { padding: 0 18px; gap: 12px; }
	.brand-mark { width: 50px; height: 50px; } /* 2026-09-28：40px → 50px（SPの事務所名は21px＝ブロック約40px） */
	.brand-name { font-size: 21px; }
}

/* =========================================================
 * 解決事例（ビフォーアフター型カード）
 *   デザインパーツ `section_case-before-after`（.s09-*）を当テーマ配色へ移植し、
 *   中央に「当初 → 精査後」のミニ棒グラフ列（.cchart-*）を追加した3カラム構成。
 *   PC：左（依頼者）｜中（グラフ）｜右（当初→精査後）の横並び
 *   TB：上段に依頼者＋グラフ、下段に当初→精査後
 *   SP：すべて縦積み
 *   ※掲載数値はモデルケース。詳細は functions.php の usu_case_studies() の注記を参照。
 * ======================================================= */
:root {
	--s09-card-bg: #fff;
	--s09-card-border: var(--line);
	--s09-icon-bg: #dcece2;   /* 人物アイコン背景（淡い緑） */
	--s09-icon-fg: var(--green-d);
	--s09-label-before: #93a89b; /* 「ご相談時」ラベル（くすんだ緑グレー） */
	--s09-label-after: var(--green); /* 「ご依頼後」ラベル */
	--s09-arrow: var(--orange);
}

/* セクション見出しの枠付きEN（RESULTS） */
.section-en--boxed {
	display: inline-block;
	border: 1px solid var(--green-d);
	padding: 7px 22px;
	letter-spacing: .22em;
	color: var(--green-d);
	margin-bottom: 18px;
}
/* 見出し内のキーワード強調（オレンジ） */
.section-cases-ba .section-title em { font-style: normal; color: var(--orange); }

.s09-cards { display: flex; flex-direction: column; gap: 26px; }
.s09-card {
	display: grid;
	grid-template-columns: 0.86fr 1.35fr 1.15fr;
	align-items: center;
	gap: 0;
	background: var(--s09-card-bg);
	border: 1px solid var(--s09-card-border);
	border-radius: var(--radius);
	overflow: hidden;
}

/* ---- 左：依頼者情報 ---- */
.s09-person {
	position: relative;
	text-align: center;
	padding: 34px 26px;
	border-right: 1px solid var(--s09-card-border);
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* 左→中央をつなぐ小さな三角（PCのみ） */
.s09-person::after {
	content: "";
	position: absolute;
	right: -9px;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent var(--s09-arrow);
}
.s09-person-icon {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--s09-icon-bg);
	color: var(--s09-icon-fg);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}
.s09-person-icon svg { width: 42px; height: 42px; }
.s09-person-headline {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}
.s09-person-attr { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* ---- 中央：ミニ棒グラフ ---- */
.s09-chart { padding: 30px 22px; border-right: 1px solid var(--s09-card-border); align-self: stretch; display: flex; align-items: center; }
.cchart { width: 100%; background: linear-gradient(180deg, #fbfdfb 0%, #f2f7f3 100%); border-radius: var(--radius); padding: 22px 20px 18px; }
.cchart-plot { display: flex; align-items: center; gap: 10px; }

/* 吹き出しバッジ（「7,900万円 適正化」） */
.cchart-badge {
	position: relative;
	flex: none;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--orange) 0%, var(--orange-d) 100%);
	color: #fff;
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.25;
	box-shadow: 0 6px 16px rgba(236, 122, 28, .28);
}
.cchart-badge::after { /* 吹き出しのしっぽ */
	content: "";
	position: absolute;
	right: -8px;
	top: 62%;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--orange-d);
}
.cchart-badge-main { display: block; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.cchart-badge-sub { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }

.cchart-graph { flex: 1; min-width: 0; }
.cchart-bars {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 168px;
	border-bottom: 2px solid #c4d2c9;
	color: #93a89b; /* 点線コネクタの色（currentColor） */
}
/* height:100% を効かせるため、バー枠にも明示的に高さを持たせる（親が auto だと％が解決されない） */
.cchart-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cchart-col {
	position: relative;
	width: 78%;
	max-width: 92px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px 3px 0 0;
}
.cchart-col--before { background: linear-gradient(180deg, #b9c6bd 0%, #9fb1a5 100%); }
.cchart-col--after { background: linear-gradient(180deg, var(--green-d) 0%, var(--green-dd) 100%); }
.cchart-amount { font-family: var(--serif); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.25; text-align: center; letter-spacing: -.03em; padding: 0 2px; }
/* 単位「万円」は必ず一体で折り返す（「万／円」に割れるのを防ぐ） */
.cchart-amount small { font-size: 11px; font-weight: 700; white-space: nowrap; }
/* バー上端どうしを結ぶ点線（PHP側で位置と高さを算出して指定） */
.cchart-link { position: absolute; left: 25%; width: 50%; min-height: 1px; overflow: visible; }
.cchart-labels { display: flex; margin-top: 9px; }
.cchart-labels span { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.cchart-note {
	margin-top: 14px;
	border: 1px solid #e2cba8;
	border-radius: 4px;
	background: #fffaf3;
	padding: 8px 10px;
	text-align: center;
	font-size: 13px;
	color: #8a5a12;
	font-weight: 500;
}
.cchart-note b { font-family: var(--serif); font-size: 17px; color: var(--orange-d); margin: 0 2px; }

/* ---- 右：当初 → 精査後 ---- */
.s09-detail { padding: 30px 28px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.s09-detail-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.s09-detail-label--before { color: var(--s09-label-before); }
.s09-detail-label--after { color: var(--s09-label-after); }
.s09-detail-text { font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.s09-detail-text strong { font-weight: 700; background: linear-gradient(transparent 62%, #fbe2c6 62%); }
.s09-detail-arrow { text-align: center; color: var(--s09-arrow); font-size: 15px; margin: 12px 0 14px; line-height: 1; }

/* 注記（モデルケースである旨）※削除しないこと */
.cases-disclaimer { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.8; }
.cases-grid--compact { margin-top: 46px; }

/* ---- レスポンシブ ---- */
@media (max-width: 1024px) {
	.s09-card { grid-template-columns: 0.9fr 1.1fr; }
	.s09-person { border-bottom: 1px solid var(--s09-card-border); }
	.s09-chart { border-right: 0; border-bottom: 1px solid var(--s09-card-border); }
	.s09-detail { grid-column: 1 / -1; padding: 26px 28px; }
	.s09-detail-arrow { margin: 10px 0 12px; }
}
@media (max-width: 767px) {
	.s09-card { grid-template-columns: 1fr; }
	.s09-person { padding: 26px 20px 22px; border-right: 0; }
	.s09-person::after { /* SPは下向きの三角に切り替え */
		right: auto;
		left: 50%;
		top: auto;
		bottom: -9px;
		transform: translateX(-50%);
		border-width: 10px 8px 0 8px;
		border-color: var(--s09-arrow) transparent transparent transparent;
	}
	.s09-person-icon { width: 66px; height: 66px; margin-bottom: 14px; }
	.s09-person-icon svg { width: 34px; height: 34px; }
	.s09-person-headline { font-size: 16px; }
	.s09-chart { padding: 22px 16px; }
	.cchart { padding: 18px 14px 14px; }
	.cchart-plot { flex-direction: column; gap: 14px; }
	.cchart-badge { width: 92px; height: 92px; }
	.cchart-badge::after { /* SPは下向きのしっぽ */
		right: auto;
		left: 50%;
		top: auto;
		bottom: -8px;
		transform: translateX(-50%);
		border-width: 12px 8px 0 8px;
		border-color: var(--orange-d) transparent transparent transparent;
	}
	.cchart-badge-main { font-size: 18px; }
	.cchart-graph { width: 100%; }
	.cchart-bars { height: 148px; }
	.cchart-amount { font-size: 15px; }
	.s09-detail { padding: 22px 20px 26px; }
	.s09-detail-text { font-size: 14px; }
}

/* =========================================================
 * 解決事例の詳細ブロック（page-cases.php／事例①）
 *   経緯4項目／基本情報テーブル／財産構成ドーナツ／評価精査の棒グラフ／税額モデル比較
 * ======================================================= */
/* ---- 経緯（ご相談内容・課題・対応・結果） ---- */
.cd-story { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 56px; }
.cd-story-item { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 24px 26px; }
.cd-story-item--goal { border-left-color: var(--orange); }
.cd-story-title { font-size: 17px; color: var(--green-d); margin-bottom: 10px; }
.cd-story-item--goal .cd-story-title { color: var(--orange-d); }
.cd-story-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.cd-story-item strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, #fbe2c6 62%); }

/* ---- 共通ブロック ---- */
.cd-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 36px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.cd-h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; color: var(--green-d); margin-bottom: 22px; }
.cd-h3-no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green-d); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.cd-lead { font-size: 14.5px; color: var(--ink-2); margin-bottom: 18px; }

/* ---- テーブル ---- */
.cd-table-wrap { overflow-x: auto; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.cd-table th, .cd-table td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: middle; }
.cd-table thead th { background: var(--green-d); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 14px; text-align: center; }
.cd-table tbody th { background: var(--gray); color: var(--ink); font-family: var(--sans); font-weight: 500; width: 34%; }
.cd-table td { color: var(--ink-2); }
.cd-table .is-num { text-align: right; font-family: var(--serif); font-weight: 600; color: var(--ink); white-space: nowrap; }
.cd-table tbody tr.is-changed td:last-child { color: var(--orange-d); background: #fff8f0; }
.cd-table tfoot th { background: var(--green-dd); color: #fff; font-family: var(--sans); font-weight: 700; }
.cd-table tfoot td { background: #eef5f0; font-family: var(--serif); font-weight: 700; color: var(--green-d); text-align: right; white-space: nowrap; }
.cd-table--basic tbody th { width: 40%; }
.cd-table--assets { min-width: 380px; }
.cd-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }

/* ---- 財産構成（ドーナツ） ---- */
.cd-donut-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.cd-donut svg { width: 100%; height: auto; }
/* 中央の文字はドーナツの穴（直径約110）に収まるサイズにすること */
.cd-donut-cap { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: "Noto Sans JP", sans-serif; }
.cd-donut-sum { fill: var(--green-d); font-size: 15.5px; font-weight: 700; text-anchor: middle; font-family: "Noto Serif JP", serif; }

/* ---- 評価精査（棒グラフ） ---- */
/* バーの高さ％を効かせるため、グリッドで「金額／バー領域（固定高）／ラベル」の3行に分ける。
   flex縦積みだと height:% がシュリンクで潰れ、両バーが同じ高さになってしまう。 */
.cd-bars { display: flex; align-items: flex-end; justify-content: center; gap: 26px; margin: 8px 0 34px; }
.cd-bar { flex: 0 1 155px; display: grid; grid-template-rows: auto 220px auto; justify-items: center; }
.cd-bar-val { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink-2); margin-bottom: 10px; white-space: nowrap; align-self: end; }
.cd-bar-val.is-accent { color: var(--orange-d); }
.cd-bar-col { width: 100%; align-self: end; border-radius: 4px 4px 0 0; }
.cd-bar-col--before { background: linear-gradient(180deg, #b9c6bd 0%, #9fb1a5 100%); }
.cd-bar-col--after { background: linear-gradient(180deg, var(--green) 0%, var(--green-dd) 100%); }
.cd-bar-label { font-size: 13.5px; color: var(--ink-2); font-weight: 500; margin-top: 10px; }
.cd-bar-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; }
.cd-bar-diff { font-family: var(--serif); font-weight: 700; font-size: 19px; color: #fff; background: var(--orange); border-radius: 999px; padding: 7px 18px; white-space: nowrap; box-shadow: 0 5px 14px rgba(236,122,28,.26); }
.cd-bar-arrow { color: var(--orange); font-size: 20px; margin-top: 8px; line-height: 1; }
.cd-result { margin-top: 18px; font-size: 15.5px; line-height: 1.9; color: var(--ink); background: var(--gray); border-radius: var(--radius); padding: 16px 20px; }
.cd-result strong { font-family: var(--serif); font-size: 19px; color: var(--orange-d); margin: 0 3px; }
.cd-notice { margin-top: 22px; }
.cd-source { margin-top: 10px; font-size: 12.5px; line-height: 1.9; }
.cd-source a { color: #8a5a12; text-decoration: underline; }
.cd-source a:hover { color: var(--orange-d); }
.section-case-detail .cases-disclaimer { text-align: left; margin-top: 14px; }

@media (max-width: 900px) {
	.cd-donut-wrap { grid-template-columns: 1fr; gap: 26px; }
	.cd-donut { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.cd-story { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
	.cd-story-item { padding: 20px 20px; }
	.cd-block { padding: 24px 18px; border-radius: var(--radius); }
	.cd-h3 { font-size: 18px; }
	.cd-table { font-size: 13.5px; min-width: 420px; }
	.cd-table th, .cd-table td { padding: 10px 12px; }
	.cd-bars { gap: 8px; }
	.cd-bar { flex: 1 1 0; grid-template-rows: auto 170px auto; }
	.cd-bar-val { font-size: 15px; }
	.cd-bar-diff { font-size: 14px; padding: 6px 10px; }
	.cd-result { font-size: 14.5px; padding: 14px 16px; }
	.cd-result strong { font-size: 17px; }
}

/* =========================================================
 * 取扱業務ページ：業務詳細（写真＋テキストの2カラム／左右交互）
 * 2026-08-07 優馬様のご指示により、上部タブ切替型（.s11-*）から本形式へ変更。
 * 明石みなと会計事務所サイトの取扱業務ページと同じ構成を、当サイトの緑×オレンジへ移植したもの。
 * ※クラス名はパーツ由来の `.service-detail-*` を維持し、配色はCSS変数のみで調整すること。
 * ※トップページの取扱業務は従来どおりタブ型（.s11-*）のため、こことは別系統。
 * ======================================================= */
.service-detail-list { display: flex; flex-direction: column; gap: 56px; }
.service-detail { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; scroll-margin-top: 100px; }
/* 偶数番目の業務は写真を右side（＝左右交互のジグザグ配置） */
.service-detail:nth-child(even) .service-detail-media { order: 2; }

.service-detail-illust { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--gray); box-shadow: var(--shadow-sm); }
/* 比率・角丸はラッパー側で管理するため、img 側の .usu-img の装飾は打ち消す */
.service-detail-illust img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

.service-detail-title { font-size: 24px; color: var(--green-d); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.service-detail-text { color: var(--ink-2); margin-bottom: 18px; }

/* 料金の目安（※現在は料金未確定のため出力されない。`usu_services()` に 'fee' を足すと表示される） */
.service-detail-fee { margin: 14px 0 4px; padding: 12px 16px; background: var(--gray); border-left: 3px solid var(--green); border-radius: 6px; font-size: 15px; color: var(--ink-2); }
.service-detail-fee-label { display: inline-block; font-weight: 700; color: var(--green-d); margin-right: 10px; }

/* 業務ごとの導線（「〇〇を相談する」＝オレンジ／「〇〇シミュレーションを行う」＝緑で区別する） */
.service-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 16px; }
.service-detail-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--orange-d); }
.service-detail-link:hover { color: var(--orange); }
.service-detail-link--sim { color: var(--green-d); }
.service-detail-link--sim:hover { color: var(--green); }

@media (max-width: 900px) {
	/* タブレット以下は1カラム。写真は常に本文の上へ（交互配置を解除） */
	.service-detail { grid-template-columns: 1fr; gap: 24px; }
	.service-detail:nth-child(even) .service-detail-media { order: 0; }
	.service-detail-list { gap: 44px; }
}
@media (max-width: 767px) {
	.service-detail-title { font-size: 21px; }
	.service-detail-actions { gap: 10px 18px; }
	.service-detail-link { font-size: 15px; }
}


/* =========================================================
 * 2026-09-07 追加分
 *   ① 解決実績カード（記述型 `.rcase-*`）
 *   ② 取扱業務：入口カード一覧（`.service-grid--link`）と個別ページ（`.service-single-*` / `.service-block*`）
 *   ③ そのほかの相続サポート（`.support-*`）
 *   ④ 沿革（`.history-*`）／理念（`.about-text`）／代表挨拶のタイトル（`.profile-catch`）
 *   ⑤ ご相談の流れの補足ブロック（`.s03-step-note`）と、流れの縦タイムライン化
 *   ⑥ SPナビの取扱業務アコーディオン（`.sp-nav-*`）
 *   ⑦ 内ページMV見出しのSP調整・MV「3つの強み」のSP配置
 * ※旧「ビフォーアフター型カード」の `.s09-*` `.cchart-*` と、旧取扱業務ページの
 *   `.service-detail-list` は使用しなくなったが、復元できるよう残している（削除しないこと）。
 * ======================================================= */

/* ---------- ① 解決実績カード（記述型） ---------- */
.rcase-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.rcase {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); padding: 30px 28px;
}
.rcase-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rcase-no {
	flex: none; font-family: Georgia, "Times New Roman", serif; font-style: italic;
	font-size: 15px; letter-spacing: .06em; color: var(--orange);
}
.rcase-title { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--green-d); line-height: 1.55; }
.rcase-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rcase-tag {
	font-size: 12.5px; font-weight: 500; color: var(--green-d);
	background: var(--gray); border: 1px solid var(--line);
	border-radius: 999px; padding: 4px 12px; line-height: 1.6;
}
.rcase-block { background: var(--gray); border-radius: var(--radius); padding: 18px 20px; }
.rcase-block--after { background: #fff; border: 1px solid var(--green-l); }
.rcase-label {
	display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
	color: #fff; background: var(--muted); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;
}
.rcase-block--after .rcase-label { background: var(--green-d); }
.rcase-text { font-size: 14.5px; line-height: 1.95; color: var(--ink-2); }
.rcase-arrow { display: flex; justify-content: center; color: var(--green); margin: 10px 0; }
.cases-disclaimer { margin-top: 22px; font-size: 13px; color: var(--muted); line-height: 1.8; }
@media (max-width: 900px) {
	.rcase-list { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
	.rcase { padding: 22px 18px; border-radius: var(--radius); }
	.rcase-title { font-size: 17px; }
	.rcase-text { font-size: 14px; }
	.rcase-block { padding: 15px 16px; }
}

/* ---------- ② 取扱業務：入口カード一覧 ---------- */
.service-grid { display: grid; gap: 24px; }
.service-grid--link { grid-template-columns: repeat(3, 1fr); }
.service-card-link {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-sm); color: var(--ink);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green-l); color: var(--ink); }
.service-card-thumb { display: block; }
.service-card-thumb img, .service-card-thumb .usu-img { border-radius: 0; box-shadow: none; }
.service-card-en {
	display: block; margin: 20px 22px 0; font-family: Georgia, "Times New Roman", serif;
	font-size: 11.5px; letter-spacing: .12em; color: var(--green-l);
}
.service-card-title {
	display: block; margin: 6px 22px 0; font-family: var(--serif);
	font-size: 19px; font-weight: 700; color: var(--green-d); line-height: 1.55;
}
.service-card-text { display: block; margin: 12px 22px 0; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.service-card-more {
	display: inline-flex; align-items: center; gap: 8px;
	/* margin-top:auto でカードの高さが揃ったときも「詳しく見る」を下端に揃える */
	margin: auto 22px 22px auto; padding-top: 18px;
	font-size: 14px; font-weight: 700; color: var(--orange);
}
@media (max-width: 1024px) {
	.service-grid--link { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
	.service-grid--link { grid-template-columns: 1fr; }
	.service-card-title { font-size: 18px; }
}

/* ---------- ② 取扱業務：個別ページ ---------- */
.service-single { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.service-single-media .service-detail-illust { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.service-single-media img, .service-single-media .usu-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; box-shadow: none; }
.service-single-en { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 12px; letter-spacing: .12em; color: var(--green-l); margin-bottom: 8px; }
.service-detail-title { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--green-d); line-height: 1.5; margin-bottom: 18px; }
.service-detail-text { font-size: 15.5px; line-height: 2; color: var(--ink-2); }
.service-detail-text + .service-detail-text { margin-top: 16px; }

.service-block { margin-top: 44px; background: var(--gray); border-radius: var(--radius-lg); padding: 32px 34px; }
.service-block-head {
	font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--green-d);
	margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--green-l);
}
.service-detail-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.service-detail-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.service-point-ico { flex: none; color: var(--green); margin-top: 3px; }
.service-fee-text { font-size: 16px; font-weight: 700; color: var(--green-d); }
.service-fee-note { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.8; }
.service-block--entry { background: #fff; border: 1px solid var(--line); }
.service-single-actions { margin-top: 40px; text-align: center; }
.service-pending-note { font-size: 15px; color: var(--ink-2); line-height: 1.9; text-align: center; }
@media (max-width: 900px) {
	.service-single { grid-template-columns: 1fr; gap: 24px; }
	.service-detail-points { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 767px) {
	.service-detail-title { font-size: 21px; }
	.service-detail-text { font-size: 14.5px; }
	.service-block { margin-top: 30px; padding: 22px 20px; border-radius: var(--radius); }
	.service-block-head { font-size: 18px; }
}

/* ---------- ③ そのほかの相続サポート ---------- */
.support-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.support-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.support-title { font-family: var(--serif); font-size: 17.5px; font-weight: 700; color: var(--green-d); line-height: 1.55; margin-bottom: 12px; }
.support-text { font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 900px) { .support-list { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- ④ 沿革・理念・代表挨拶のタイトル ---------- */
.history-list { border-top: 1px solid var(--line); }
.history-item {
	display: grid; grid-template-columns: 190px 1fr; gap: 20px;
	padding: 20px 4px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.history-year { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--green-d); }
.history-text { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.about-text { font-size: 15.5px; line-height: 2.1; color: var(--ink-2); }
.profile-catch {
	font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--green-d);
	line-height: 1.7; margin: 14px 0 14px; padding-left: 14px; border-left: 4px solid var(--orange);
}
@media (max-width: 767px) {
	.history-item { grid-template-columns: 1fr; gap: 6px; padding: 16px 2px; }
	.history-text { font-size: 14px; }
	.about-text { font-size: 14.5px; }
	.profile-catch { font-size: 17px; }
}

/* ---------- ⑤ ご相談の流れ：横並びタイムラインへ復帰（5ステップ） ----------
   2026-09-07（同日2度目・優馬様のご指示）：シート原文をそのまま入れた際に本文が長すぎて
   縦積みに変えていたが、**國田サイトと同じ横並びタイムラインへ戻した**（本文は要約して短くした）。
   ここでは「ステップ数の変更に伴う接続線の位置」と「5カラム化に伴う字詰め」だけを上書きしている。
   ★接続線の left/right ＝ 100% ÷ ステップ数 ÷ 2。**5ステップなので 10%**。
     `usu_flow()` のステップ数を変えたら、この値も必ず合わせること（旧4ステップ時は 12.5%）。
   ※横並び／SPで縦積みに切り替わる基本の指定は、このファイル上部の `.s03-*`（330行付近）が担当する。
     **縦積み化（`flex-direction: column` 等）をここに再度書かないこと。**
   ※補足ブロック `.s03-step-note` は、内容をステップ3の本文へ統合したため廃止した。 */
.s03-steps::before { left: 10%; right: 10%; }
/* 5カラムになり1列あたりが狭くなるため、文字サイズと左右余白を少しだけ詰める */
.s03-step { padding: 0 12px; }
/* 見出しが1行の列と2行の列が混在すると説明文の開始位置がずれるため、
   横並び時だけ見出しに2行分の高さを確保して各列の本文を揃える（SPでは解除する） */
.s03-step-title { font-size: 18px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.s03-step-desc { font-size: 14.5px; }
@media (max-width: 1024px) {
	.s03-step { padding: 0 8px; }
	.s03-step-title { font-size: 16px; }
	.s03-step-desc { font-size: 13.5px; }
}
/* SP（767px以下）は上部の既存指定で縦タイムラインに切り替わる。接続線は左端に寄せる */
@media (max-width: 767px) {
	.s03-steps::before { left: 24px; right: auto; }
	.s03-step { padding: 0 0 30px; }
	/* 縦積みでは高さ揃えが不要なので解除し、左寄せに戻す */
	.s03-step-title { font-size: 18px; min-height: 0; display: block; }
	.s03-step-desc { font-size: 14.5px; }
}

/* ---------- ⑥ SPナビ：取扱業務のアコーディオン ---------- */
.sp-nav-item { border-bottom: 1px solid rgba(255,255,255,.15); }
.sp-nav-list a { border-bottom: 0; }
.sp-nav-row { display: flex; align-items: center; }
.sp-nav-row > a { flex: 1 1 auto; }
.sp-nav-sub-toggle {
	flex: none; width: 52px; height: 52px; background: none; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-left: 1px solid rgba(255,255,255,.15);
}
/* ＋／− のアイコン（開くと横棒だけになる） */
.sp-nav-sub-toggle-ico { position: relative; display: block; width: 15px; height: 15px; }
.sp-nav-sub-toggle-ico::before,
.sp-nav-sub-toggle-ico::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 2px;
	background: #fff; border-radius: 2px; transform: translateY(-50%); transition: transform .25s;
}
.sp-nav-sub-toggle-ico::after { transform: translateY(-50%) rotate(90deg); }
.sp-nav-sub-toggle[aria-expanded="true"] .sp-nav-sub-toggle-ico::after { transform: translateY(-50%) rotate(0deg); }
.sp-nav-sub { padding-bottom: 8px; }
.sp-nav-sub-list { display: flex; flex-direction: column; }
.sp-nav-sub-list a {
	display: block; color: rgba(255,255,255,.9); font-size: 15.5px;
	padding: 12px 4px 12px 22px; position: relative;
}
.sp-nav-sub-list a::before {
	content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 1px;
	background: rgba(255,255,255,.6); transform: translateY(-50%);
}

/* ---------- ⑦ 内ページMVの見出し（SPで2行に折り返さないようにする） ----------
   2026-09-07：「お問い合わせ・相談予約」がスマホで2行になっていたため、
   767px以下で文字サイズを下げて1行に収める（優馬様のご指摘）。 */
@media (max-width: 767px) {
	.page-hero { padding: 46px 0; }
	.page-hero-title { font-size: 24px; letter-spacing: -.01em; }
	.page-hero-lead { margin-top: 10px; font-size: 14px; }
}
@media (max-width: 400px) {
	.page-hero-title { font-size: 21px; }
}

/* ---------- ⑦ MV「当事務所の3つの強み」（SP専用の配置） ----------
   2026-09-07：國田サイトと同じく、3項目が白いボックスいっぱいに横3等分で並ぶ形にしたうえで、
   **「当事務所の3つの強み」の緑の帯をボックスの上辺にまたがらせる**（優馬様のご指示）。
   ・丸バッジの文言・3項目の中身・色（`--mvp-badge-bg`＝緑）は一切変更していない。
   ・帯は `position: absolute` ＋ `translate(-50%,-50%)` でボックス上辺の中央に重ねる。
     はみ出す分（帯の高さの半分）を `.mvp-points` の `margin-top` で確保しているため、
     **帯のフォントサイズ・padding を変えたら `margin-top` も合わせて見直すこと。**
   ・PC・タブレットは対象外（従来どおり左に丸バッジ＋右に3項目の横並び）。 */
@media (max-width: 767px) {
	/* 帯を重ねる基準にする。上の余白は帯のはみ出し分。
	   ★國田サイトと同じく、スマホでは**画面の端いっぱいに広げ**（本文の左右padding 16px を打ち消す）、
	     **角丸を外し**、**下辺にブランドカラー（緑）の線**を引いて次のセクションとの境界をはっきりさせる。 */
	.mvp-points {
		position: relative; flex-direction: column; gap: 0;
		margin: 15px -16px 0; padding: 22px 6px 14px;
		border-radius: 0; border-bottom: 3px solid var(--green-d);
	}
	/* 帯：ボックスの上辺の中央にまたがらせる */
	.mvp-points-badge {
		position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2;
		width: auto; height: auto; border-radius: 999px; padding: 6px 18px; white-space: nowrap;
	}
	.mvp-points-badge-txt { font-size: 12px; line-height: 1.4; }
	/* 帯内の改行はSPでは不要（1行に収めるため） */
	.mvp-points-badge-txt br { display: none; }
	.mvp-points-list { width: 100%; }
	/* 國田サイトのスマホ指定（icon 38px／label 12px／strong 14px）に合わせる。
	   ※左右のpaddingだけは國田の 6px より詰めた 4px。碓井は語句が長く（「分かりやすい対応」等）、
	     6px だと3行に折り返してしまうため。**これ以上フォントを大きくすると再び折り返す。** */
	.mvp-point { padding: 0 4px; }
	.mvp-point-ico { width: 38px; height: 38px; margin-bottom: 6px; }
	/* ---- ラベルは必ず「1行目＝文脈／2行目＝要点」の**2行**に収める ----
	   2026-09-07（優馬様のご指示）：碓井は國田より語句が長く（「分かりやすい対応」「ワンストップで対応※1」）、
	   固定の文字サイズだと端末幅によって3行に折り返してしまう。
	   そこで**画面幅に応じて文字サイズが自動で縮む `clamp()`** を使い、どの端末でも2行に収まるようにした。

	   ★仕組み：`clamp(最小, 画面幅に比例, 最大)`
	     ・最大値は國田と同じ 14px（広い端末では國田と同一の見た目）
	     ・幅が狭い端末では 3.05vw まで縮み、9px を下限とする
	     ・`white-space: nowrap` で2行目を必ず1行に保つ
	   ★計算根拠：1カラムの文字幅 ＝ (画面幅 − カード左右6px×2) ÷ 3 − 項目左右4px×2
	     最長は03の「ワンストップで対応」9文字＋注釈。360px端末で 3.05vw＝10.98px なら
	     9文字×10.98 ＋ 注釈 ≒ 104px ＜ 使える幅 108px に収まる。
	   ★**この3つ（vw係数・padding・文言の長さ）はセットで効いている。**
	     文言を長くする／paddingを広げる場合は、必ず360px幅で3行にならないか確認すること。 */
	.mvp-point-text { line-height: 1.45; }
	.mvp-point-lead { font-size: clamp(9px, 2.7vw, 12px); }
	.mvp-point-em { font-size: clamp(9px, 3.05vw, 14px); white-space: nowrap; }
}


/* =========================================================
 * 2026-09-07 追加分（第2弾）：料金表
 *   クライアントから料金表タブを受領したため、料金ページと
 *   取扱業務の個別ページ（相続税申告）に基本報酬表を掲載できるようにした。
 *   ※金額の正本は functions.php の `usu_fee_tables()`。CSSに金額は持たせない。
 * ======================================================= */

/* 5列あるため、狭い画面では表だけを横スクロールさせる（ページ本体は横スクロールさせない） */
.fee-scroll { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fee-scroll .fee-table { min-width: 720px; }
/* スクロールできることの案内。PCでは表が収まりきるので出さない（SPのみ表示） */
.fee-scroll-hint { display: none; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); text-align: right; }
.fee-scroll-hint::after { content: " ▶"; font-size: 10px; }
@media (max-width: 900px) { .fee-scroll-hint { display: block; } }

/* 基本報酬表：1列目（遺産総額）を見出し扱いにし、金額列は右寄せで桁を揃える */
.fee-table--base th[scope="row"] { background: var(--gray); font-weight: 700; color: var(--ink); white-space: nowrap; }
.fee-table--base thead th { font-size: 14.5px; padding: 14px 16px; }
.fee-table--base th, .fee-table--base td { padding: 14px 16px; }
.fee-table--base td { text-align: right; font-variant-numeric: tabular-nums; }
/* 基本報酬の列だけ少し大きく見せる */
.fee-price--base { font-size: 16px; }
/* 加算列は基本報酬より控えめに（加算額であることが伝わるよう「+」を付ける）
 * ※2026-09-24に相続人加算の3列を廃止したため、現在この2行は効いていない（復元用に残置） */
.fee-table--base td:not(.fee-price--base) { color: var(--ink-2); font-weight: 500; }
.fee-table--base td:not(.fee-price--base):not(:empty)::before { content: "＋"; color: var(--muted); font-weight: 400; }
/* 5億円超の行（別途お見積り）は「＋」を出さない */
.fee-row--over td::before { content: none !important; }
.fee-row--over th[scope="row"], .fee-row--over td { background: #fff; color: var(--ink-2); }

/* 加算項目の表（2列） */
.fee-table--option th[scope="row"] { width: 42%; background: var(--gray); font-weight: 700; color: var(--ink); }
.fee-table--option td { text-align: right; }

/* 表の下のひとこと注記 */
.fee-caption { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }

/* 見出しの2つ目以降（加算項目・お支払い方法）は上に余白を取る */
.fee-head--sub { margin-top: 56px; }

/* お支払い方法 */
.fee-payment-list { display: flex; flex-direction: column; gap: 12px; }
.fee-payment-item {
	background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green);
	border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.9; color: var(--ink-2);
}

/* 取扱業務の個別ページ内に置いた場合は、淡グレー背景の上なので表の枠を保つ */
.service-block .fee-scroll { margin-top: 16px; }
.service-block .fee-caption { margin-top: 10px; }

@media (max-width: 767px) {
	.fee-table--base thead th, .fee-table--base th, .fee-table--base td { padding: 12px 12px; font-size: 14px; }
	.fee-price--base { font-size: 15px; }
	.fee-table--option th[scope="row"] { width: 46%; }
	.fee-head--sub { margin-top: 40px; }
	.fee-payment-item { padding: 14px 16px; font-size: 14px; }
}


/* =========================================================
 * 2026-09-07 追加分（第3弾）：相続シミュレーション導線の帯バナー（.simband-*）
 * ---------------------------------------------------------
 * 優馬様のご指示により、**かわぐち税理士事務所サイト（kawaguchi-zei-theme の `.simband`）と
 * 全く同じ形式**で移植した。数値（余白・文字サイズ・ボタンの最小幅/高さ・影）はかわぐちのまま。
 * **配色だけを碓井のテーマ色に置き換えている**（かわぐち：深緑×金茶 → 碓井：深緑×オレンジ）。
 *
 * 【禁忌】
 *  ・**新しい色を足さないこと。** 使ってよいのは既存の CSS 変数のみ。
 *  ・帯の中で金額を断定しないこと（「概算を知る」導線であり、料金表ではない）。
 *  ・置き場所はトップの「お悩み」直後・「取扱業務」の前。front-page.php のコメントも参照。
 * ======================================================= */
.simband { background: var(--green-dd); color: #eef3ee; padding: 56px 0; }
/* 左＝文章／右＝ボタンの2カラム（TB・SPは縦積み） */
.simband-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.simband-tag {
	display: inline-block; margin: 0 0 14px; padding: 5px 16px; border: 1px solid rgba(255,255,255,.5);
	font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em; color: #fff; border-radius: 999px;
}
.simband-title { margin: 0 0 14px; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; color: #fff; }
/* 見出しの後半＝アクセント色（かわぐちは金茶、碓井はオレンジ） */
.simband-title em { font-style: normal; color: var(--orange); }
.simband-lead { margin: 0; font-size: 15px; line-height: 1.9; color: #d8e2d9; }
.simband-action { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; }
.simband-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	min-width: 300px; min-height: 64px; padding: 16px 30px; border-radius: var(--radius);
	background: var(--orange); color: #fff; font-family: var(--sans); font-size: 17px; font-weight: 700;
	letter-spacing: .04em; line-height: 1.4;
	box-shadow: 0 8px 32px rgba(0,0,0,.28); transition: background .25s, transform .25s;
}
.simband-btn:hover, .simband-btn:focus-visible { background: var(--orange-d); color: #fff; transform: translateY(-2px); }
.simband-btn .icon { flex: none; transition: transform .25s; }
.simband-btn:hover .icon { transform: translateX(4px); }
.simband-note { margin: 0; font-size: 11.5px; line-height: 1.7; color: #b9c7ba; text-align: center; }

@media (max-width: 1024px) {
	.simband { padding: 48px 0; }
	.simband-inner { grid-template-columns: 1fr; gap: 28px; }
	.simband-title { font-size: 26px; }
	.simband-btn { width: 100%; min-width: 0; }
}
@media (max-width: 767px) {
	.simband { padding: 40px 0; }
	.simband-title { font-size: 21px; }
	.simband-lead { font-size: 14px; }
	.simband-btn { min-height: 58px; padding: 14px 18px; font-size: 16px; gap: 10px; }
	/* 見出しの改行はSPでは不要（自然な折り返しに任せる） */
	.simband-br { display: none; }
}


/* =========================================================
 * 2026-09-07 追加分（第4弾）：お知らせ（.news-bar-*）とコラム（.ca-* / .post-single-*）
 * ---------------------------------------------------------
 * 優馬様のご指示により、**國田サイト（kunita-theme）と全く同じ形式**で移植した。
 * 構成・数値は國田のまま、**配色だけ碓井のテーマ色（緑）に置き換えている**。
 * **新しい色を足さないこと。**
 * ======================================================= */

/* ---------- お知らせ（MV直下・最新1件だけを帯で表示） ----------
   ※帯の高さは國田と同じ「約4cm」。CSSの cm は 1cm ≒ 37.8px として計算される。
     低くしたい場合は `.news-bar-inner` の min-height を変えること。 */
.news-bar { background: var(--gray); }
.news-bar-inner {
	max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
	min-height: 4cm; display: flex; align-items: center;
	/* 左から「お知らせ」ラベル → 日付 → 内容 の並びを、帯の中央に置く */
	justify-content: center; gap: 24px;
}
.news-bar-label {
	flex: none; padding: 7px 18px; background: var(--green-d); color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: .08em; border-radius: 3px;
}
.news-bar-date { flex: none; font-size: 15px; color: var(--muted); letter-spacing: .04em; }
.news-bar-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
/* お知らせが1件も無いときの定型文 */
.news-bar-text--empty { color: var(--ink-2); }
/* 内容部分は詳細ページへのリンク */
a.news-bar-link { text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
a.news-bar-link:hover, a.news-bar-link:focus-visible { color: var(--green-d); border-bottom-color: currentColor; }
@media (max-width: 767px) {
	.news-bar-inner { flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 16px; }
	.news-bar-label { font-size: 13px; padding: 5px 14px; }
	.news-bar-date { font-size: 14px; }
	.news-bar-text { width: 100%; font-size: 15px; text-align: center; }
}

/* ---------- コラム一覧（/column/） ---------- */
.ca-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ca-link {
	display: flex; flex-direction: column; height: 100%; color: var(--ink);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-sm);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ca-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green-l); color: var(--ink); }
.ca-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--gray-2); overflow: hidden; }
.ca-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ca-link:hover .ca-thumb img { transform: scale(1.04); }
.ca-noimg {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: Georgia, "Times New Roman", serif; font-size: 14px; letter-spacing: .12em; color: var(--muted);
}
.ca-body { padding: 20px 22px 24px; }
.ca-date { display: block; font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-bottom: 8px; }
.ca-title { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--green-d); transition: color .2s; }
.ca-link:hover .ca-title { color: var(--orange); }
.ca-excerpt { margin-top: 12px; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 1024px) { .ca-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 640px) { .ca-grid { grid-template-columns: 1fr; } }

/* コラムが1件も無いとき */
.column-empty { text-align: center; padding: 40px 0; }
.column-empty-title { font-family: var(--serif); font-size: 18px; color: var(--ink-2); }

/* ページ送り */
.column-pagination { margin-top: 44px; }
.column-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.column-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
	padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; color: var(--green-d); font-size: 15px; font-weight: 500; text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.column-pagination .page-numbers:hover { border-color: var(--green-l); color: var(--orange); }
.column-pagination .page-numbers.current { background: var(--green-d); border-color: var(--green-d); color: #fff; }

/* ---------- お知らせ／コラムの詳細ページ（共通） ---------- */
.post-single-head { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 2px solid var(--green-l); }
.post-single-date { display: block; font-size: 14px; color: var(--muted); letter-spacing: .04em; margin-bottom: 10px; }
.post-single-title { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.6; color: var(--green-d); }
.post-single-thumb { margin-bottom: 28px; border-radius: var(--radius-lg); overflow: hidden; }
.post-single-thumb img { width: 100%; height: auto; display: block; }
/* 本文はエディタで自由に書かれるため、基本タグに最低限のスタイルを当てておく */
.post-single-body { font-size: 16px; line-height: 2; color: var(--ink-2); }
.post-single-body > * + * { margin-top: 1.4em; }
.post-single-body h2 { font-family: var(--serif); font-size: 22px; color: var(--green-d); padding-left: 14px; border-left: 4px solid var(--green); line-height: 1.6; }
.post-single-body h3 { font-family: var(--serif); font-size: 19px; color: var(--green-d); line-height: 1.6; }
.post-single-body a { color: var(--green-d); text-decoration: underline; }
.post-single-body a:hover { color: var(--orange); }
.post-single-body ul, .post-single-body ol { padding-left: 1.4em; }
.post-single-body ul li { list-style: disc; }
.post-single-body ol li { list-style: decimal; }
.post-single-body img { border-radius: var(--radius); }
.post-single-body blockquote { padding: 16px 20px; background: var(--gray); border-left: 4px solid var(--green-l); border-radius: 0 var(--radius) var(--radius) 0; }
.post-empty-text { font-size: 15px; color: var(--ink-2); text-align: center; }
.post-single-back { margin-top: 44px; text-align: center; }
@media (max-width: 767px) {
	.post-single-title { font-size: 21px; }
	.post-single-body { font-size: 15px; }
	.post-single-body h2 { font-size: 19px; }
	.post-single-body h3 { font-size: 17px; }
}


/* =========================================================
 * 2026-09-08 追加：取扱業務 と 選ばれる理由 のあいだの境界線
 * ---------------------------------------------------------
 * 優馬様のご指示：「取扱業務と選ばれる理由の間に境界線がないので、
 * 太めの境界線を引いてくっきりと違いが分かるようにしてほしい」。
 *
 * ・取扱業務（`.section-services`）の**下端**に緑の太線を引く。
 *   取扱業務のパネルは画面幅いっぱい（`.container` の外）なので、
 *   セクション側に引くことで線も全幅になる。
 * ・太さは 6px。細くしたい／太くしたいときはこの値だけを変えること。
 * ・**色はテーマの深緑（--green-d）。新しい色を足さないこと。**
 * ======================================================= */
.section-services { border-bottom: 6px solid var(--green-d); }
/* スマホは画面が狭く6pxが目立ちすぎるため、少しだけ細くする */
@media (max-width: 767px) {
	.section-services { border-bottom-width: 5px; }
}


/* =========================================================
 * 2026-09-08 追加：選ばれる理由の本文をPC用／スマホ用で切り替える
 * ---------------------------------------------------------
 * 優馬様のご指示「PCは5行・スマホも5行」に対応するための仕組み。
 * 本文の幅が違うため（PC 1行 約36文字／スマホ 1行 約22文字）、
 * **同じ文章では両方を5行にできない**。そこで `usu_strengths()` に
 * `text`（PC用・約165文字）と `text_sp`（スマホ用・約100文字）を持たせ、
 * 両方をHTMLに出力して**767pxを境に表示を切り替えている**。
 *
 * 【注意】
 *  ・**両方の文章がHTMLに含まれる**（片方は非表示）。内容が食い違わないよう、
 *    文言を直すときは必ず `text` と `text_sp` の**両方**を直すこと。
 *  ・切替点は767px。タブレット（768〜1024px）は1カラムだが本文の幅が広いため、
 *    PC用の文章を出している（4行前後になる）。
 *  ・**文字数の目安は functions.php の `usu_strengths()` のコメントを参照。**
 *    本文の幅やフォントサイズを変えたら、目安も計算し直すこと。
 * ======================================================= */
.s04-txt--sp { display: none; }
@media (max-width: 767px) {
	.s04-txt--pc { display: none; }
	.s04-txt--sp { display: block; }
}


/* =========================================================
 * 2026-09-08 追加：MVのスマホ表示の2点修正（優馬様のご指示・**スマホ限定**）
 * ---------------------------------------------------------
 *  ① 注釈「※1 相続税申告・生前対策…まで対応します。」をスマホでは非表示にする。
 *     → **あわせて、3つの強みの中の注釈番号「※1」も非表示にする。**
 *       注釈本文を消したまま番号だけ残すと、参照先の無い記号になってしまうため。
 *       PC・タブレットでは従来どおり注釈も番号も表示する。
 *  ② リード文「相続税のご相談をお考えなら」が左寄りになっていたのを中央に戻す。
 *     原因＝2026-09-07 にMVの並び順を制御するため `.mvp-body` を縦フレックスにしたことで、
 *     `display:inline-flex` の `.mvp-lead` がフレックス項目になり、
 *     親の `text-align: center` が効かなくなっていた。`align-self: center` で中央に戻す。
 *     **`.mvp-body` の `display:flex` を外すと並び順（写真→強み）が崩れるので、外さないこと。**
 * ======================================================= */
@media (max-width: 767px) {
	/* ① 注釈と注釈番号を非表示（スマホのみ） */
	.mvp-note { display: none; }
	.mvp-point-sup { display: none; }

	/* ② リード文を中央に戻す */
	.mvp-lead { align-self: center; }
}


/* =========================================================
 * 2026-09-08 追加：公認会計士紹介ページ（/profile/）の調整
 * ---------------------------------------------------------
 * 優馬様のご指示（4点）:
 *  ① PC：「私たちの想い」の本文幅を他セクションと揃える → page-profile.php 側で
 *     `container-narrow`（800px）→ `container`（1120px）に変更済み。
 *  ② スマホ：見出し「想いと財産を、未来へつなげます。」が2行 → 1行に。
 *  ③ PC：経営理念の見出し「それぞれの相続を、ノウハウと専門性で支える。」が2行 → 1行に。
 *  ④ 経営理念3枚の高さを統一（本文は functions.php 側で各6行に要約済み）。
 * ======================================================= */

/* ---------- ② スマホの「想いと財産を、未来へつなげます。」を1行に ----------
   `.section-title` はスマホで25pxのため、16文字が画面幅（約342px）に収まらず2行になっていた。
   このセクション（`.section-about`）だけ文字サイズを下げて1行に収める。
   ★見出しの文言を長くすると再び2行になる。文言を変えたらこの値も見直すこと。 */
@media (max-width: 767px) {
	.section-about .section-title { font-size: 20px; }
}

/* ---------- ③④ 経営理念（3カラム）の見出しと高さ ----------
   ★見出しを1行に収めるための計算：
     本文の幅 1120 − 左右padding48 = 1072px。3カラム・gap24px なので1枚 ≒ 341px。
     最長の見出し「それぞれの相続を、ノウハウと専門性で支える。」は22文字。
     22文字 × 15px = 330px ＜ 341px なので1行に収まる（gapを広げると2行に戻る）。
   ★3枚の高さを揃えるため、`.s01-item` を縦フレックスにして本文を下端まで伸ばしている。
     見出しが全て1行・本文が全て6行なら自然に揃う（本文の文字数は functions.php のコメント参照）。 */
.philosophy-3col .s01-grid { gap: 24px; align-items: stretch; }
.philosophy-3col .s01-item { height: 100%; }
.philosophy-3col .s01-title {
	font-size: 15px; line-height: 1.6;
	/* 見出しが1行でも2行でも写真の開始位置を揃えるための最小高さ（保険） */
	min-height: calc(15px * 1.6);
	margin-bottom: 16px; padding-bottom: 10px;
}
.philosophy-3col .s01-body { flex: 1 1 auto; }
/* タブレット以下は2〜1カラムになり幅が広がるため、見出しの文字サイズを戻す */
@media (max-width: 767px) {
	.philosophy-3col .s01-title { font-size: 17px; min-height: 0; }
}


/* =========================================================
 * 2026-09-08 追加：末尾CTAの説明文（優馬様のご指示）
 * ---------------------------------------------------------
 *  ① PC限定：説明文を1行に収める
 *  ② 全画面幅：注釈（`.cta-note`）を削除したため、その分の下余白を `.cta-text` に移す
 * ======================================================= */

/* ---------- ② 注釈を消した分の下余白を説明文側で確保する ----------
   旧：`.cta-text` margin-bottom 10px ＋ `.cta-note` margin-bottom 46px
   新：`.cta-text` だけで 46px（SPは28px）を確保する。
   ※`.cta-note` のCSSは未使用のまま残置しているが、**注釈を復活させる場合は
     `.cta-text` の margin-bottom を 10px に戻すこと**（二重に余白が空くため）。 */
.cta-text { margin-bottom: 46px; }
@media (max-width: 767px) {
	.cta-text { margin-bottom: 28px; }
}

/* ---------- ① PC限定：説明文を1行に収める ----------
   説明文は58文字。19pxのままだと 58×19＝1102px となり、
   本文の最大幅（1120 − 左右padding48 ＝ 1072px）に収まらず2行になっていた。
   そこで**画面幅に応じて文字サイズを自動調整**し、`white-space: nowrap` で1行を保証する。

   ★計算式：min(19px, 使える幅 ÷ 60)
     使える幅 ＝ min(画面幅 − 48px, 1072px)  ※1120pxのコンテナで頭打ちになるため
     58文字を60で割って安全余裕を1文字分もたせている。
   ★**説明文の文字数を変えたら、式の「60」も文字数＋2程度に直すこと。**
     数を合わせないと、はみ出す（nowrapのため折り返さず画面外へ出る）。
   ★タブレット・スマホ（1024px以下）は従来どおり折り返す（対象外）。 */
@media (min-width: 1025px) {
	.cta-text {
		white-space: nowrap;
		font-size: min(19px, calc(min(100vw - 48px, 1072px) / 60));
	}
}


/* =========================================================
 * 2026-09-14 追加：ご相談の流れ STEP5 の見出しをPCで1行に
 * ---------------------------------------------------------
 * 優馬様のご指示：「PC版限定で『申告の実施・納税のご案内』が2行になっているので1行に」。
 *
 * ★計算根拠（PC・横並び5カラム）
 *   1カラムの幅 ＝ min(画面幅 − 48px, 1072px) ÷ 5
 *   文字が使える幅 ＝ 上記 − 左右padding（4px×2 ＝ 8px）
 *     ・1440px時：1072÷5 − 8 ＝ 206px
 *     ・1025px時：977 ÷5 − 8 ＝ 187px  ← ここが最も狭い
 *   最長の見出し「申告の実施・納税のご案内」は12文字。
 *   12文字 × 15px ＝ 180px ＜ 187px なので、1025px以上で必ず1行に収まる。
 *
 * ★**見出しを13文字以上にする／paddingを広げる／文字を大きくすると2行に戻る。**
 *   `usu_flow()` の `title` を変えたら、必ず1025px幅で確認すること。
 * ★min-height は「1行ぶんの高さ」に固定。全ステップが1行になったため、
 *   これで説明文の開始位置が揃う（旧値の2.4em＝2行ぶんは不要になった）。
 * ★タブレット（768〜1024px）とスマホは対象外（従来どおり）。
 * ======================================================= */
@media (min-width: 1025px) {
	.s03-step { padding: 0 4px; }
	.s03-step-title { font-size: 15px; min-height: 1.6em; }
}

/* =========================================================
 * 加算項目リスト（料金ページ）※2026-09-24 新設
 * ---------------------------------------------------------
 * 優馬様のご指示により、加算項目は**金額を出さず項目名だけ**を掲げる形にした。
 * そのため2列の表（`.fee-table--option`）をやめ、チェック付きのカード型リストにしている。
 * **ここに金額の列を足さないこと。**（旧 `.fee-table--option` のCSSは復元用に残置）
 * ======================================================= */
.fee-option-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fee-option-item {
	display: flex; align-items: center; gap: 10px;
	padding: 16px 20px; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius);
	font-size: 15px; font-weight: 700; color: var(--ink);
}
.fee-option-ico { display: inline-flex; flex: none; color: var(--green); }
@media (max-width: 767px) {
	.fee-option-list { grid-template-columns: 1fr; gap: 10px; }
	.fee-option-item { padding: 14px 16px; font-size: 14px; }
}

/* =========================================================
 * MV（PC 1025px〜）：テキストブロック全体を左へ寄せる ※2026-09-28 優馬様のご指示
 * ---------------------------------------------------------
 * 「強みの項目（白いカード）が碓井先生の顎に重なる」とのご指摘への対応。
 * MVの文字（リード・キャッチ・3つの強み・注釈・CTAボタン）は全て `.mvp-body` の中にあるため、
 * その左端の位置＝`.mvp-inner` の左余白を**現在の 2/3** にすれば、全項目がまとめて左へ寄る。
 *
 * ★ 計算
 *   従来の左余白 ＝ (画面幅 − 1120px) ÷ 2   … 中央寄せコンテナの外側の余白
 *                  ＋ 64px                  … .mvp-inner の padding-left
 *   その 2/3 ＝ (画面幅 − 1120px) ÷ 3 ＋ 43px
 *   （1440px→150px／1920px→310px／1120px以下→43px。従来は 224／464／64px）
 *
 * ★ 触るときの注意
 *   ・`max-width: none` を外すと中央寄せに戻り、padding の計算が効かなくなる。
 *   ・`max(0px, …)` は画面幅が1120px未満のときに余白が負にならないようにするためのもの。**外さないこと。**
 *   ・**タブレット（〜1024px）・スマホは対象外**（それぞれ padding 40px／0 のまま）。
 *   ・右側は `.mvp-body` の max-width 800px で止まるため、padding-right は従来どおり64pxでよい。
 * ======================================================= */
@media (min-width: 1025px) {
	.mvp-inner {
		max-width: none;
		padding-left: calc(max(0px, 100% - var(--wrap)) / 3 + 43px);
		padding-right: 64px;
	}
}