@charset "UTF-8";
/* =========================================================
 * dan-law-theme メインスタイル
 * 段貞行法律事務所（離婚・相続）／深緑 × 白
 * ======================================================= */

/* ---------- デザイントークン ---------- */
:root {
	--green-900: #14312a;   /* 最も濃い深緑（フッター・ダーク背景） */
	--green-800: #1b3f36;
	--green-700: #22503f;   /* ブランド基調 */
	--green-600: #2c614c;
	--green-500: #3a7660;
	--green-100: #eef3f0;   /* 淡い緑（面） */
	--green-050: #f6f9f7;
	--accent:    #b8945a;   /* 装飾・暗背景上の文字用（明るい真鍮） */
	--accent-dark:#7c5e2b;  /* 明背景上のテキスト用（AA準拠：白地コントラスト約5.9:1） */
	--accent-btn: #8a6a2f;  /* 白文字ボタン/バッジの背景用（AA準拠：白文字コントラスト約5.0:1） */
	--ink:       #23302c;   /* 本文 */
	--ink-soft:  #55635d;   /* 補足文 */
	--line:      #e0e6e2;   /* 罫線 */
	--white:     #ffffff;
	--cream:     #f8f6f0;

	--serif: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
	--sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	--container: 1120px;
	--radius: 12px;
	--shadow-sm: 0 2px 10px rgba(20,49,42,.06);
	--shadow-md: 0 10px 30px rgba(20,49,42,.10);
}

/* ---------- ベース ---------- */
* { 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;
	text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-decoration: none; transition: opacity .2s, color .2s; }
a:hover { opacity: .8; }
body.nav-open { overflow: hidden; }

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

/* ---------- 見出し共通 ---------- */
.section { padding: 84px 0; }
.section-head { text-align: center; margin-bottom: 48px; }
/* 日本語ラベル（取扱業務・経営理念 等）＝大見出し */
.section-sub {
	display: block;
	font-family: var(--serif);
	font-size: clamp(26px, 4.4vw, 37px); letter-spacing: .02em;
	font-weight: 600;
	color: var(--green-800);
	line-height: 1.35;
	margin-bottom: 10px;
}
.section-sub::before, .section-sub::after { content: none; }
/* 説明文（わたしたちができること 等）＝小さめの子見出し */
.section-title {
	display: block;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.7;
}
.section-desc { margin: 12px auto 0; max-width: 720px; color: var(--ink-soft); font-size: 15px; }
.section-desc strong { color: var(--green-700); }

.mini-head { font-family: var(--serif); font-size: 17px; color: var(--green-800); margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); }
.mini-head-lg { font-family: var(--serif); font-size: clamp(20px,3vw,24px); color: var(--green-800); margin: 48px 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--green-100); }

/* ---------- ボタン ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
	line-height: 1.3; cursor: pointer; border: 2px solid transparent; transition: all .2s;
}
.btn .icon { flex: none; }
.btn-lg { padding: 16px 34px; font-size: 16px; }
.btn-cta { background: var(--accent-btn); color: #fff; border-color: var(--accent-btn); box-shadow: 0 6px 18px rgba(184,148,90,.35); }
.btn-cta:hover { background: var(--accent-dark); border-color: var(--accent-dark); opacity: 1; }
.btn-primary { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.btn-primary:hover { background: var(--green-800); opacity: 1; }
.btn-outline { background: transparent; color: var(--green-700); border-color: var(--green-600); }
.btn-outline:hover { background: var(--green-700); color: #fff; opacity: 1; }
.btn-outline-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: #fff; color: var(--green-800); opacity: 1; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-700); }
.text-link .icon { transition: transform .2s; }
.text-link:hover .icon { transform: translateX(4px); }

/* =========================================================
 * ヘッダー
 * ======================================================= */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(1.2) blur(6px);
	transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(20,49,42,.09); }
/* ナビを縦線で区切ると横幅を取るため、ヘッダーの最大幅を広げて1行に収める
   （見本デザインもヘッダーは画面幅いっぱいに近い） */
.header-inner { max-width: 1440px; margin-inline: auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
.site-brand { margin-right: auto; flex: none; }
.brand-link { display: block; line-height: 1.25; }
.brand-name { display: block; font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--green-800); letter-spacing: .04em; white-space: nowrap; }
.brand-tagline { display: block; font-size: 11px; color: var(--ink-soft); letter-spacing: .12em; margin-top: 2px; }

/* グローバルナビ：項目を縦線で区切る（見本デザイン準拠）
   ※項目の左に線を引き、最後の項目だけ右にも引くことで両端にも線が入る。
     項目数を増やすと横幅が足りなくなるため、下部のレスポンシブで
     左右padding・文字サイズ・電話番号の表示を段階的に絞っている。 */
.global-nav-list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; align-items: stretch; }
.global-nav-list > li { display: flex; align-items: center; min-height: 44px; border-left: 1px solid var(--line); }
.global-nav-list > li:last-child { border-right: 1px solid var(--line); }
.global-nav-list a { display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--green-800); position: relative; padding: 6px 16px; white-space: nowrap; }
.global-nav-list a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; width: auto; transform: scaleX(0); transform-origin: left; height: 2px; background: var(--accent); transition: transform .25s; }
.global-nav-list a:hover::after { transform: scaleX(1); }
.global-nav-list a:hover { opacity: 1; color: var(--green-700); }

/* ---- 取扱業務のドロップダウン（2026-09-14／参考サイトと同じ構図） ----
   ・PC …「取扱業務」にカーソルを合わせると各業務が開き、個別ページへ遷移する
   ・SP … 下の 1024px 以下でハンバーガー内のインデント表示に切り替える（.sp-nav-sub）
   【注意】このナビは `.global-nav-list a` が**子メニューの a にも効く**。
   　　　　下線アニメ（::after）は `.global-nav-list .sub-menu a` で必ず打ち消すこと。 */
.global-nav-list > li.menu-item-has-children { position: relative; }
/* ▼マークの分だけ右に余白を足す（縦線に重ならない位置に置く） */
.global-nav-list > li.menu-item-has-children > a { padding-right: 26px; }
.global-nav-list > li.menu-item-has-children > a::before {
	content: ""; position: absolute; right: 11px; top: 50%;
	width: 5px; height: 5px;
	border-right: 1.5px solid var(--accent-dark); border-bottom: 1.5px solid var(--accent-dark);
	transform: translateY(-70%) rotate(45deg);
}
.global-nav-list .sub-menu {
	position: absolute; top: 100%; left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 200px; margin: 0; padding: 8px 0; list-style: none;
	background: #fff; border-radius: 10px;
	border-top: 3px solid var(--green-700); box-shadow: var(--shadow-md);
	opacity: 0; visibility: hidden;
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 130;
}
/* ヘッダーとメニューのあいだにカーソルが抜ける“隙間”を埋めて、移動中に閉じないようにする */
.global-nav-list .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.global-nav-list > li.menu-item-has-children:hover > .sub-menu,
.global-nav-list > li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.global-nav-list .sub-menu > li { display: block; border: 0; min-height: 0; }
/* 親（.global-nav-list a）の指定を打ち消す */
.global-nav-list .sub-menu a {
	display: block; padding: 11px 20px; font-size: 14px; color: var(--ink); white-space: nowrap;
}
.global-nav-list .sub-menu a::after { display: none; }
.global-nav-list .sub-menu a:hover { background: var(--green-050); color: var(--green-700); }

/* ---- SPメニュー：取扱業務の下に各業務をインデント表示 ---- */
.sp-nav-sub { list-style: none; margin: 0; padding: 0 0 8px 16px; }
.sp-nav-sub li { border-bottom: 0; }
.sp-nav-sub li:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.08); }
.sp-nav-sub a { padding: 12px 6px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.sp-nav-sub a::before { content: "－ "; color: var(--accent); }

.header-tel { text-align: right; }
.header-tel-link { display: flex; align-items: center; gap: 8px; color: var(--green-800); }
.header-tel-ico { color: var(--accent-dark); }
.header-tel-num { display: block; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.header-tel-note { display: block; font-size: 10px; color: var(--ink-soft); }
.header-contact-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--green-700); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; flex: none; }
.header-contact-btn:hover { background: var(--green-800); opacity: 1; }

.nav-toggle { display: none; width: 44px; height: 44px; border: none; background: transparent; position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--green-800); transition: .25s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.is-active span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* SPメニュー */
.sp-nav { position: fixed; inset: 64px 0 0; background: var(--green-800); z-index: 99; padding: 24px; overflow-y: auto; }
.sp-nav-list { list-style: none; margin: 0 0 24px; padding: 0; }
.sp-nav-list li { border-bottom: 1px solid rgba(255,255,255,.14); }
.sp-nav-list a { display: block; padding: 16px 6px; color: #fff; font-size: 16px; font-weight: 500; }
.sp-nav-cta { display: grid; gap: 12px; }
.sp-nav-cta .btn { width: 100%; }

/* ※旧ヒーロー（.hero／深緑オーバーレイに白文字を重ねる背景形式）のスタイルは、
 *   2026-08-07 のトップ刷新でMVを .mvp-*（3ポイント訴求＋CTA型）へ差し替えたため削除した。
 *   現在のMVのスタイルはこのファイル末尾「MV（デザインパーツ section_mv-points-cta を移植）」を参照。 */

/* =========================================================
 * 取扱業務（トップ）
 * ======================================================= */
/* =========================================================
 * こんなお悩みはありませんか？
 * ======================================================= */
/* お悩み：2列グリッド＋チェックマークの帯（見本デザイン準拠）
   ・カードは枠線なし・淡いグリーンの面のみ。チェックは丸で囲わず線画のまま置く */
.section-worries { background: #fff; }
.worry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.worry-card { display: flex; align-items: center; gap: 14px; background: var(--green-050); border: none; border-radius: var(--radius); padding: 20px 26px; }
.worry-ico { flex: none; display: inline-flex; align-items: center; color: var(--green-600); }
.worry-text { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.7; }
.worry-more { display: none; text-align: center; margin-top: 20px; }
.wmb-less { display: none; }
.worry-more-btn[aria-expanded="true"] .wmb-more { display: none; }
.worry-more-btn[aria-expanded="true"] .wmb-less { display: inline; }
.worry-cta { text-align: center; margin: 34px 0 0; font-weight: 400; color: var(--ink-soft); font-size: 16px; }
.sp-br { display: none; }

/* =========================================================
 * 取扱業務（トップ）
 * ======================================================= */
.section-services { background: var(--green-050); }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; color: var(--ink);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); opacity: 1; }
.service-photo { margin: 0; }
.service-photo img { display: block; width: 100%; height: 200px; object-fit: cover; }
.service-body { padding: 28px 30px 30px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.service-name { font-family: var(--serif); font-size: 23px; color: var(--green-800); margin: 0 0 12px; }
.service-lead { font-size: 15px; color: var(--ink-soft); margin: 0 0 18px; flex: 1; }
.service-price { font-weight: 700; color: var(--accent-dark); font-size: 15px; margin-bottom: 14px; }
.service-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-700); font-size: 14px; }
.service-card:hover .service-more .icon { transform: translateX(4px); transition: transform .2s; }

/* =========================================================
 * 理念・想い
 * ======================================================= */
.message-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.message-photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.message-body .section-sub { text-align: left; }
.message-title { text-align: left; margin-bottom: 18px; font-size: 16px; font-weight: 600; color: var(--green-700); line-height: 1.7; }
.message-body p { margin: 0 0 16px; color: var(--ink); }
.message-sign { font-family: var(--serif); font-weight: 600; color: var(--green-800); margin: 22px 0 14px !important; }

/* ※経営理念セクション（.section-philosophy／.philo-*／.section-head-light）のスタイルは、
 *   2026-08-07 にトップ・事務所情報ページの両方から経営理念を廃止したため削除した。
 *   原稿データは functions.php の dan_philosophy() に残してある。 */

/* =========================================================
 * 強み（選ばれる理由）
 * ※カード横並び型（.strength-item）は 2026-08-07 に廃止し、
 *   文章／写真を左右交互に置く2カラム型（.s04-*／このファイル末尾）へ移行した。
 * ======================================================= */
.strengths-more { display: none; text-align: center; margin-top: 22px; }
.smb-less { display: none; }
.strengths-more-btn[aria-expanded="true"] .smb-more { display: none; }
.strengths-more-btn[aria-expanded="true"] .smb-less { display: inline; }

/* =========================================================
 * ご相談の流れ
 * ======================================================= */
.section-flow { background: var(--green-050); }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.flow-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px 26px 130px; box-shadow: var(--shadow-sm); }
.flow-step { position: absolute; left: 26px; top: 26px; font-family: var(--serif); font-size: 13px; font-weight: 700; color: #fff; background: var(--green-700); padding: 6px 12px; border-radius: 999px; letter-spacing: .04em; }
.flow-item.is-goal .flow-step { background: var(--accent-btn); }
.flow-title { font-family: var(--serif); font-size: 19px; color: var(--green-800); margin: 0 0 8px; }
.flow-text { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* =========================================================
 * 料金リード
 * ======================================================= */
.section-fee-lead { text-align: center; }
.section-fee-lead .section-desc strong { color: var(--accent-dark); font-size: 1.15em; }
.fee-lead-actions { margin-top: 8px; }

/* =========================================================
 * 下部CTA・相談ボタン群
 * ======================================================= */
.footer-cta { background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff; text-align: center; padding: 64px 0; }
.footer-cta-lead { font-family: var(--serif); font-size: clamp(22px,3.4vw,30px); margin: 0 0 8px; }
.footer-cta-sub { margin: 0 0 28px; color: #e7ddc6; }
.consult-cta-head { font-weight: 700; margin: 0 0 16px; }
.consult-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.cbtn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 999px; font-weight: 700; background: #fff; color: var(--green-800); min-width: 250px; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.cbtn:hover { opacity: 1; transform: translateY(-2px); }
.cbtn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.cbtn-txt small { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.cbtn-tel { background: var(--accent-btn); color: #fff; }
.cbtn-tel .cbtn-txt small { color: rgba(255,255,255,.85); }

/* =========================================================
 * お客様の声
 * ======================================================= */
.section-voices { background: var(--green-050); }
.voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.voice-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.voice-stars { color: #e8a93b; font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
.voice-text { margin: 0 0 16px; font-size: 15px; line-height: 1.9; color: var(--ink); flex: 1; position: relative; padding-left: 26px; }
.voice-text::before { content: "“"; position: absolute; left: 0; top: -6px; font-family: var(--serif); font-size: 34px; color: var(--green-100); line-height: 1; }
.voice-meta { font-size: 13px; color: var(--ink-soft); text-align: right; }
.voice-meta::before { content: "— "; }
.voices-more { display: none; text-align: center; margin-top: 22px; }
.vmb-less { display: none; }
.voices-more-btn[aria-expanded="true"] .vmb-more { display: none; }
.voices-more-btn[aria-expanded="true"] .vmb-less { display: inline; }
.voice-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 22px 0 0; }

/* =========================================================
 * フッター
 * ======================================================= */
.site-footer { background: var(--green-900); color: #cfd9d3; padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-office { font-family: var(--serif); font-size: 20px; color: #fff; margin: 0 0 12px; }
.footer-addr, .footer-tel, .footer-areas { margin: 0 0 8px; font-size: 14px; }
.footer-tel a { color: #fff; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { color: #cfd9d3; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
.footer-copy { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 20px; font-size: 12px; color: #9fb0a8; }

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

/* =========================================================
 * 下層ページ共通
 * ======================================================= */
.page-hero { background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff; padding: 56px 0; text-align: center; }
.page-hero-sub { display: block; font-family: var(--serif); letter-spacing: .18em; font-size: 12px; color: #d9c8a6; margin-bottom: 8px; }
.page-hero-title { font-family: var(--serif); font-size: clamp(26px,4vw,36px); font-weight: 600; margin: 0; }
.breadcrumb { background: var(--green-050); font-size: 13px; }
.breadcrumb .container { padding-block: 12px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.breadcrumb span[aria-hidden] { color: var(--accent); }

.page-body { padding: 64px 0 20px; }
.lead-text { font-size: 17px; text-align: center; color: var(--ink); margin: 0 0 48px; }
.lead-text strong { color: var(--green-700); }
.note-inline { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.notice-box { background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 26px 30px; margin-top: 30px; }
.notice-box p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.dot-list { margin: 0; padding-left: 0; list-style: none; }
.dot-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15px; color: var(--ink-soft); }
.dot-list li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dot-list strong { color: var(--green-700); }

/* 取扱業務ページ：写真／テキストの2カラム交互（見本デザイン準拠）
   ・PC   ：1業務ごとに写真とテキストの左右を入れ替える（.svc-row--reverse）
   ・TB/SP：見出し → 写真 → 本文 → 料金の目安 → 相談リンク の縦積み
            （.svc-body を display:contents にして、見出しだけ写真より上へ出している） */
/* トップの取扱業務タブから /services/#rikon 等で飛んでくるため、固定ヘッダー分の余白を確保 */
.svc-block { padding: 62px 0; scroll-margin-top: 90px; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.svc-row--reverse .svc-media { order: 2; }
.svc-media { margin: 0; }
/* 元画像は16:9で横長のため、テキスト側と高さが釣り合うよう4:3で切り出して表示する */
.svc-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.svc-head { margin-bottom: 24px; }
.svc-title { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--green-700); margin: 0 0 14px; letter-spacing: .04em; }
.svc-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.svc-lead { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.95; margin: 0 0 16px; }
.svc-para { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.95; }
/* 料金の目安（淡いグリーンの囲み＋左の縦ライン） */
.svc-fee { background: var(--green-050); border-left: 4px solid var(--green-600); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin: 24px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink); }
.svc-fee-label { font-weight: 700; color: var(--green-800); margin-right: 10px; }
/* 「○○を相談する」＝塗りボタンではなく矢印付きのテキストリンク */
.svc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 16px; font-weight: 700; color: var(--accent-dark); }
.svc-more .icon { transition: transform .2s; }
.svc-more:hover { opacity: 1; color: var(--accent-btn); }
.svc-more:hover .icon { transform: translateX(4px); }
.svc-items { margin-top: 26px; }
.svc-items-head { font-size: 15px; color: var(--green-800); margin: 0 0 12px; font-weight: 700; }

@media (max-width: 1024px) {
	.svc-block { padding: 44px 0; }
	.svc-row { grid-template-columns: 1fr; gap: 22px; }
	/* 見出しを写真の上に出すため、テキスト側の入れ物をグリッドから外す */
	.svc-body { display: contents; }
	.svc-head { order: 1; margin-bottom: 0; }
	.svc-media, .svc-row--reverse .svc-media { order: 2; }
	.svc-detail { order: 3; }
	.svc-title { font-size: 25px; }
}
@media (max-width: 720px) {
	.svc-block { padding: 36px 0; }
	.svc-title { font-size: 22px; }
	.svc-fee { padding: 16px 18px; font-size: 14.5px; }
	.svc-more { font-size: 15px; }
}
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.tag-list .icon { color: var(--green-600); }

/* 弁護士紹介 */
.attorney { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.attorney-photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); position: sticky; top: 90px; }
.attorney-role { display: inline-block; background: var(--green-100); color: var(--green-700); font-weight: 700; font-size: 13px; padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }
.attorney-name { font-family: var(--serif); font-size: 30px; color: var(--green-800); margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.attorney-kana { font-size: 14px; color: var(--ink-soft); font-family: var(--sans); }
.attorney-lead p { margin: 0 0 14px; }
.attorney-tags { margin: 26px 0; }
.attorney-tags-label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list li { background: var(--cream); border-radius: 999px; padding: 7px 16px; font-size: 14px; color: var(--green-800); font-weight: 500; }
.chip-list-outline li { background: transparent; border: 1.5px solid var(--green-600); color: var(--green-700); font-weight: 700; }
.career-list { list-style: none; margin: 0; padding: 0; }
.career-list li { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.career-year { flex: none; width: 100px; font-weight: 700; color: var(--green-700); }
.attorney-career, .attorney-fields { margin-top: 28px; }
.attorney-coming { margin-top: 44px; background: var(--green-050); border: 1px dashed var(--green-500); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-soft); }
.attorney-coming strong { color: var(--green-700); }

/* 料金 */
.fee-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.fee-card-title { font-family: var(--serif); font-size: 20px; color: #fff; background: var(--green-700); margin: 0; padding: 16px 24px; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th, .fee-table td { padding: 16px 24px; border-bottom: 1px solid var(--line); text-align: left; }
.fee-table th { width: 40%; background: var(--green-050); font-weight: 700; color: var(--green-800); }
.fee-table td { font-weight: 700; color: var(--accent-dark); }
.fee-card-notes { margin: 0; padding: 16px 24px; list-style: none; background: var(--cream); }
.fee-card-notes li { font-size: 14px; color: var(--ink-soft); position: relative; padding-left: 18px; }
.fee-card-notes li::before { content: "※"; position: absolute; left: 0; }
.fee-th-sub { font-weight: 500; font-size: 12px; color: var(--ink-soft); }
.fee-free { color: #0b8043; font-weight: 700; }
.fee-terms { margin: 0; }
.fee-terms dt { font-weight: 700; color: var(--green-800); margin-top: 14px; }
.fee-terms dt:first-child { margin-top: 0; }
.fee-terms dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.fee-cta { margin-top: 40px; text-align: center; background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 30px 24px; }
.fee-cta p { margin: 0 0 18px; font-weight: 600; color: var(--green-800); }
.fee-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 事務所情報 */
.about-photo { margin: -20px 0 40px; }
.about-photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.outline-table { width: 100%; border-collapse: collapse; }
.outline-table th, .outline-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.outline-table th { width: 30%; background: var(--green-050); color: var(--green-800); font-weight: 700; white-space: nowrap; }
.access-addr { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--green-800); font-weight: 500; }
.access-addr .icon { color: var(--accent-dark); }
.access-map-link { margin: 18px 0 6px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.access-map iframe { border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; width: 100%; }
.section-access { background: var(--green-050); }
.access-office { font-family: var(--serif); font-size: 21px; color: var(--green-800); font-weight: 600; margin: 0 0 12px; }
.access-facts { list-style: none; margin: 16px 0 22px; padding: 0; }
.access-facts li { display: flex; gap: 14px; padding: 12px 2px; border-bottom: 1px dashed var(--line); font-size: 15px; }
.access-facts .af-label { flex: none; width: 78px; color: var(--green-700); font-weight: 700; }
.access-facts .af-val { color: var(--ink); }
.building-ph { margin-top: 22px; border: 1px dashed var(--green-500); border-radius: var(--radius); background: var(--green-050); padding: 30px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-soft); text-align: center; }
.building-ph-ico { color: var(--green-500); }
.building-ph-label { font-size: 14px; }
@media (max-width: 820px) { .access-grid { grid-template-columns: 1fr; } .access-map { order: -1; } }

/* FAQ */
.faq-list { display: grid; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--green-800); }
.faq-mark { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green-700); color: #fff; font-family: var(--serif); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.faq-mark-a { background: var(--accent-btn); }
.faq-q-text { flex: 1; }
.faq-toggle { flex: none; width: 16px; height: 16px; position: relative; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--green-600); transition: transform .25s; }
.faq-toggle::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-toggle::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-item.is-open .faq-toggle::after { transform: rotate(90deg); opacity: 0; }
.faq-a { display: flex; gap: 14px; padding: 4px 22px 24px; }
/* ＋を押すまで回答を隠す（HTMLのhidden属性を有効化）。
   ※これが無いと .faq-a の display:flex が hidden より優先され、常に開いた状態になる */
.faq-a[hidden] { display: none; }
.faq-a p { margin: 4px 0 0; color: var(--ink); }

/* お知らせ */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { border-bottom: 1px solid var(--line); }
.news-item a { display: flex; gap: 20px; padding: 20px 8px; color: var(--ink); align-items: baseline; }
.news-item a:hover { opacity: 1; background: var(--green-050); }
.news-date { flex: none; color: var(--accent-dark); font-weight: 700; font-size: 14px; }
.pager { margin-top: 32px; text-align: center; }
.pager .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 4px; border: 1px solid var(--line); border-radius: 8px; }
.pager .current { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.single-post { margin-bottom: 30px; }
.single-date { color: var(--accent-dark); font-weight: 700; }
.single-title { font-family: var(--serif); font-size: 27px; color: var(--green-800); margin: 8px 0 24px; padding-bottom: 20px; border-bottom: 2px solid var(--green-100); }

/* お問い合わせ */
.contact-tel-box { background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 26px 30px; text-align: center; margin-bottom: 24px; }
.contact-tel-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-800); }
.contact-tel-num { display: block; font-family: var(--serif); font-size: clamp(28px,5vw,40px); font-weight: 700; color: var(--green-800); margin: 6px 0 4px; }
.contact-tel-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.contact-notes { margin-bottom: 36px; }
.contact-form-wrap { margin-top: 20px; }

/* WP本文 */
.wp-content { line-height: 2; }
.wp-content h2 { font-family: var(--serif); font-size: 24px; color: var(--green-800); margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--green-100); }
.wp-content h3 { font-family: var(--serif); font-size: 20px; color: var(--green-800); margin: 32px 0 12px; }
.wp-content a { text-decoration: underline; }
.wp-content ul, .wp-content ol { padding-left: 1.4em; }

/* =========================================================
 * Contact Form 7 スタイル
 * ======================================================= */
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label { display: block; font-weight: 700; color: var(--green-800); margin-bottom: 8px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px;
	font-family: inherit; font-size: 16px; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(58,118,96,.15); }
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form .wpcf7-submit {
	display: inline-flex; justify-content: center; width: 100%; max-width: 340px; margin: 10px auto 0;
	background: var(--accent-btn); color: #fff; border: none; padding: 16px 30px; border-radius: 999px;
	font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(184,148,90,.35); transition: background .2s;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--accent-dark); }
.wpcf7 .wpcf7-response-output { border-radius: 8px; padding: 14px 18px !important; margin: 18px 0 0 !important; font-size: 14px; }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; font-weight: 500; }
span.wpcf7-list-item { margin-left: 0; margin-right: 16px; }
.req { color: #c0392b; font-size: 12px; margin-left: 4px; }

/* =========================================================
 * レスポンシブ
 * ======================================================= */
/* 901〜1280px：ナビを縦線で区切ると横幅を取るため、電話番号を隠し、
   さらに項目の左右余白と文字サイズを詰めて1行に収める
   （電話はヘッダーの「相談予約」ボタン・末尾CTA・フッターで担保する） */
@media (max-width: 1340px) {
	.header-tel { display: none; }
	.global-nav-list a { padding: 6px 12px; font-size: 14px; }
	.global-nav-list a::after { left: 12px; right: 12px; }
}
@media (max-width: 1100px) {
	.global-nav-list a { padding: 6px 9px; font-size: 13.5px; }
	.global-nav-list a::after { left: 9px; right: 9px; }
}

@media (max-width: 900px) {
	.global-nav, .header-tel, .header-contact-btn { display: none; }
	.nav-toggle { display: block; }
	.header-inner { padding: 10px 18px; }
	.message-grid { grid-template-columns: 1fr; gap: 30px; }
	.message-photo { order: -1; }
	.message-body .section-sub, .message-title { text-align: center; }
	.attorney { grid-template-columns: 1fr; gap: 28px; }
	.attorney-photo img { position: static; max-width: 360px; margin-inline: auto; }
	.attorney-name { justify-content: center; }
	.attorney-role { display: block; text-align: center; width: fit-content; margin-inline: auto; }
	.footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720px) {
	.section { padding: 60px 0; }
	.services-grid { grid-template-columns: 1fr; gap: 18px; }
	/* --- お悩み：モバイルは2つのみ、残り4つは「もっと見る」で展開 --- */
	.worry-grid { grid-template-columns: 1fr; gap: 14px; }
	.worry-extra { display: none; }
	.worry-grid.is-expanded .worry-extra { display: flex; }
	.worry-more { display: block; }
	.sp-br { display: inline; }

	/* --- お客様の声：モバイルは2つのみ、残り2つは「もっと見る」で展開 --- */
	.voices-grid { grid-template-columns: 1fr; gap: 16px; }
	.voice-extra { display: none; }
	.voices-grid.is-expanded .voice-extra { display: flex; }
	.voices-more { display: block; }

	.flow-item { padding: 60px 24px 24px; }
	.flow-step { top: 22px; }
	.cbtn { min-width: 0; width: 100%; }
	.consult-btns { flex-direction: column; }
	.outline-table th { width: 34%; padding: 12px; font-size: 14px; }
	.outline-table td { padding: 12px; }
	.sp-fixed-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; box-shadow: 0 -4px 18px rgba(0,0,0,.14); }
	.spf { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-weight: 700; font-size: 15px; color: #fff; }
	.spf-tel { background: var(--accent-btn); }
	.spf-mail { background: var(--green-700); }
	body { padding-bottom: 56px; }
	.sp-nav { inset: 60px 0 0; }
}

/* =========================================================
 * ▼ 2026-08-07 追加：トップページのレイアウトを全面刷新
 *   MV（.mvp-*）／取扱業務タブ（.s11-*）／解決実績（.s09-*・.cchart-*）／
 *   お客様の声カルーセル（.voice-carousel）／ご相談の流れ（.s03-*）／末尾CTA（.cta-*）
 *   ※クラス名はデザインパーツ由来のものを維持し、**配色のみ当サイトの
 *     深緑（--green-*）× 真鍮（--accent-*）に置き換えている**。
 * ======================================================= */

/* ---------- 共通ユーティリティ ---------- */
.section-en { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--accent-dark); margin-bottom: 10px; }
/* 枠付きの英字ラベル（RESULT） */
.section-en--boxed { display: inline-block; border: 1px solid var(--green-600); padding: 7px 22px; letter-spacing: .22em; color: var(--green-700); margin-bottom: 16px; }
.section-action { text-align: center; margin-top: 40px; }
.br-sp { display: none; }
@media (max-width: 767px) { .br-sp { display: inline; } }

/* セクション背景の割り当て（上下で色が続かないように調整） */
.section-cases { background: var(--green-050); }
.section-voices { background: #fff; }
.section-faq { background: var(--green-050); }
.section-access { background: #fff; }

/* =========================================================
 * MV（デザインパーツ `section_mv-points-cta` を移植）
 *   ・背景写真＋白ベールの上に、深緑のキャッチと3ポイント訴求ボックスを重ねる
 *   ・**キャッチコピー（その一歩を、一緒に考える。）は従来のまま**
 *   ・写真の見え方はCV率に直結するため、位置を変えたらPC・TB・SPの3サイズで目視確認すること
 * ======================================================= */
:root {
	/* レイアウト（高さは固定px。vh指定だと縦長モニタで写真が間延びするため） */
	--mvp-min-height: 640px;
	--mvp-max-width: var(--container);
	--mvp-body-width: 800px;
	--mvp-radius: var(--radius);
	/* 背景写真の表示位置・拡大率
	   ※PCは写真を拡大（--mvp-bg-size）して横位置をずらせるようにし、
	     鶴羽先生のお顔がキャッチコピーと重ならない右側に来るよう調整している。
	     元画像 hero.webp は 1920×1280（3:2）で人物がほぼ中央にいるため、
	     等倍（cover）のままだと顔が文字の真後ろに来てしまう。 */
	--mvp-bg-size: 142% auto;
	--mvp-bg-position: 0% 34%;
	--mvp-bg-position-sp: 64% 18%;
	--mvp-bg-size-sp: cover;
	/* SP（上下2段構成）用 */
	--mvp-sp-bg: var(--white);
	--mvp-sp-photo-h: 400px;
	/* 背景ベール */
	--mvp-veil-strong: rgba(255,255,255,.95);
	--mvp-veil-mid: rgba(255,255,255,.74);
	--mvp-veil-weak: rgba(255,255,255,0);
	/* 配色（段貞行カラー：深緑 × 真鍮 × 白） */
	--mvp-lead-cl: var(--green-800);
	--mvp-lead-line: var(--green-700);
	--mvp-dot-cl: var(--accent-dark);
	--mvp-heading-cl: var(--green-800);   /* キャッチ1行目「その一歩を、」＝深緑（旧：黒に近い --ink） */
	--mvp-heading-em-cl: var(--green-700);
	--mvp-box-bg: var(--white);
	--mvp-box-shadow: var(--shadow-md);
	--mvp-badge-bg: var(--green-700);
	--mvp-badge-cl: var(--white);
	--mvp-num-cl: var(--accent-dark);     /* 01/02/03 の番号＝真鍮（アクセント） */
	--mvp-point-cl: var(--green-800);     /* 3つの強みの本文＝深緑（旧：黒に近い --ink） */
	--mvp-point-em-cl: var(--accent-dark); /* 強みの強調語＝真鍮（アクセント） */
	--mvp-point-border: var(--line);
	--mvp-note-cl: var(--ink-soft);
	--mvp-btn-bg: var(--accent-btn);
	--mvp-btn-cl: var(--white);
	--mvp-btn-hover: var(--accent-dark);
	--mvp-btn-shadow: 0 8px 28px rgba(138,106,47,.30);
	--mvp-btn-outline-bg: var(--white);
	--mvp-btn-outline-cl: var(--green-800);
	--mvp-btn-outline-bd: var(--green-600);
	--mvp-btn-outline-hover: var(--green-050);
}

.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/hero.webp');
	background-size: var(--mvp-bg-size);
	background-position: var(--mvp-bg-position);
	background-repeat: no-repeat;
}
/* 左側の文字可読性を確保するベール（左が濃く・右に向かって透明）
   ※お顔のあたり（右側 55%〜）には白ベールがかからないよう早めに透明にしている */
.mvp-bg-veil {
	position: absolute; inset: 0;
	background: linear-gradient(to right, var(--mvp-veil-strong) 0%, var(--mvp-veil-strong) 26%, var(--mvp-veil-mid) 42%, var(--mvp-veil-weak) 58%);
}

.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: 19px; 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; }

/* キャッチコピー（明朝＝サイト共通の見出し書体を維持） */
.mvp-heading { margin: 0 0 32px; font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.35; letter-spacing: .04em; color: var(--mvp-heading-cl); }
.mvp-heading-line { display: block; }
.mvp-heading-lg { font-size: 58px; line-height: 1.3; }
.mvp-heading-em { font-style: normal; color: var(--mvp-heading-em-cl); }

/* 3ポイント訴求ボックス */
.mvp-points { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; padding: 24px; background-color: var(--mvp-box-bg); border-radius: var(--mvp-radius); box-shadow: var(--mvp-box-shadow); }
.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 12px; text-align: center; }
.mvp-point + .mvp-point { border-left: 1px solid var(--mvp-point-border); }
.mvp-point-num { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: .05em; line-height: 1; color: var(--mvp-num-cl); }
.mvp-point-text { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--mvp-point-cl); }
.mvp-point-em { font-style: normal; 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: .04em; color: var(--mvp-note-cl); }

/* CTAボタン */
.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: 460px; 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: 19px; 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); opacity: 1; transform: translateY(-2px); }
.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); }

/* =========================================================
 * 取扱業務（横一列タブ＋パネル切替型／デザインパーツ `section_services-tabs`）
 *   ・PC ：タブを1行に均等配分／パネルは左＝写真・右＝見出し＋本文の2カラム
 *   ・SP ：タブは横一列のまま／パネルは 見出し→写真→本文 の縦積み
 *   ・タブとパネルの紐付けは data-slug ／ aria-controls、切替の動作は main.js が担当
 * ======================================================= */
.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(--ink-soft); 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: #46534e; }
.s11-tab.is-active { background: var(--green-700); }
/* アクティブタブ下の三角インジケーター */
.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-700); z-index: 2; }
.s11-tab-ja { font-family: var(--serif); font-size: 17px; 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: 52px clamp(32px, 4.5vw, 80px) 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.s11-panel-img { grid-column: 1; grid-row: 1 / 3; overflow: hidden; }
.s11-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s11-panel-body { grid-column: 2; grid-row: 2; padding: 0 clamp(32px, 4.5vw, 80px) 52px; display: flex; flex-direction: column; }
.s11-heading-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.s11-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-100); color: var(--green-700); }
.s11-heading { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--green-800); letter-spacing: .04em; line-height: 1.35; margin: 0; margin-right: auto; }
.s11-price { background: var(--green-700); color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 999px; font-size: 14px; }
.s11-rule { border: none; border-top: 1px solid var(--line); margin: 0; }
.s11-text { font-size: 15.5px; line-height: 2; color: var(--ink-soft); margin: 22px 0 20px; }
.s11-tags { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s11-tags li { display: inline-flex; align-items: center; gap: 6px; background: var(--green-050); border: 1px solid var(--green-100); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; color: var(--ink); }
.s11-tags .icon { color: var(--green-600); }
/* 「詳しく見る」（横線＋丸ボタン） */
.s11-more { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.s11-more:hover { opacity: 1; }
.s11-more:hover .s11-more-btn { transform: scale(1.08); }
.s11-more-text { flex: none; font-size: 14px; font-weight: 700; color: var(--accent-dark); 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(--accent-btn); 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: 15px; }
	.s11-tab-en { font-size: 10px; }
	.s11-panel-inner { min-height: 400px; }
	.s11-panel-hdr { padding: 34px 28px 16px; }
	.s11-panel-body { padding: 0 28px 34px; }
	.s11-heading { font-size: 22px; }
	.s11-text { font-size: 15px; margin: 18px 0 18px; }
}
@media (max-width: 767px) {
	.s11-tab { padding: 12px 6px; }
	.s11-tab-ja { font-size: 14px; letter-spacing: .04em; }
	.s11-tab-en { font-size: 9px; letter-spacing: .06em; }
	.s11-panel-inner { display: flex; flex-direction: column; min-height: auto; }
	.s11-panel-hdr { order: 1; padding: 24px 20px 12px; }
	.s11-panel-img { order: 2; }
	.s11-panel-img img { height: auto; aspect-ratio: 4 / 3; }
	.s11-panel-body { order: 3; padding: 20px 20px 30px; }
	.s11-heading { font-size: 20px; }
	.s11-ico { width: 34px; height: 34px; }
	.s11-text { font-size: 15px; line-height: 1.9; margin: 16px 0 16px; }
	.s11-more-text { font-size: 13px; }
	.s11-more-btn { width: 40px; height: 40px; }
}

/* =========================================================
 * RESULT（解決実績・ビフォーアフター型カード）
 *   PC：左（依頼者）｜中（グラフ）｜右（ご相談時→解決後）の横並び
 *   TB：上段に依頼者＋グラフ、下段にご相談時→解決後
 *   SP：すべて縦積み（3件目以降は「もっと見る」で展開）
 *   ※掲載数値はモデルケース。functions.php の dan_case_studies() の注記を参照。
 * ======================================================= */
:root {
	--s09-card-bg: #fff;
	--s09-card-border: var(--line);
	--s09-icon-bg: var(--green-100);
	--s09-icon-fg: var(--green-700);
	--s09-label-before: #90a099;
	--s09-label-after: var(--green-600);
	--s09-arrow: var(--accent-btn);
}
.section-cases-ba .section-title em { font-style: normal; color: var(--accent-dark); }

.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;
}
.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); white-space: pre-line; margin: 0; }
.s09-person-attr { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); 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, #fbfdfc 0%, var(--green-050) 100%); border-radius: var(--radius); padding: 22px 20px 18px; }
.cchart-plot { display: flex; align-items: center; gap: 10px; }
.cchart-badge {
	position: relative; flex: none;
	width: 104px; height: 104px; margin: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--accent) 0%, var(--accent-btn) 100%);
	color: #fff; display: grid; place-content: center; text-align: center; line-height: 1.25;
	box-shadow: 0 6px 16px rgba(138,106,47,.26);
}
/* 吹き出しのしっぽ。
   【2026-09-14 修正】以前は右下（top:62%・right:-8px）に置いていたため、円の縁から浮いて
   「丸に三角を貼り付けた」形に見えていた。**別案件で採用した直し方**と同じ方法で、
   **円の右端の中央（top:50%）に置き、付け根を円へ食い込ませて**一体の吹き出しにしている。
   ※`right` を 0 以上にすると再び浮くので、必ず負の値（円に重ねる）にすること。
   ※色は円のグラデーションの右端＝var(--accent-btn) に合わせる。
   ※スマホ（767px以下）は下向きの三角に切り替わる指定が別にあるため、ここはPC・タブレット用。 */
.cchart-badge::after {
	content: ""; position: absolute;
	right: -12px; top: 50%; transform: translateY(-50%);
	border-style: solid; border-width: 9px 0 9px 16px;
	border-color: transparent transparent transparent var(--accent-btn);
}
/* バッジの主文言は **1行に収める**（「約1,000万円」など文字数が増えても円の中で折り返さない）。
   ※`white-space: nowrap` を外すと「円」だけが次行に落ちて不格好になる。 */
.cchart-badge-main {
	display: block; font-family: var(--serif); font-weight: 700;
	font-size: clamp(14.4px, 16.8px, 19.2px); letter-spacing: -.02em;
	white-space: nowrap; transform-origin: center;
	/* 円の内寸（104px − 左右の余白）に収める */
	max-width: 92px; overflow: visible;
}
.cchart-badge-sub { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }

.cchart-graph { flex: 1; min-width: 0; }
/* height:100% を効かせるため、バー枠にも明示的に高さを持たせる（親が auto だと％が解決されない） */
.cchart-bars { position: relative; display: flex; align-items: flex-end; height: 168px; border-bottom: 2px solid #c6d2cc; color: #90a099; }
.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, #bcc7c2 0%, #a2b0ab 100%); }
.cchart-col--after { background: linear-gradient(180deg, var(--green-600) 0%, var(--green-900) 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側で算出）
   【2026-09-14 修正】以前は `left:25%;width:50%`＝**バーの中心から中心**まで引いていたため、
   線がバーの上に乗り上げてはみ出していた。
   → **前のバーの「右上の角」から、後のバーの「左上の角」まで**になるよう左右を詰める。
   計算の根拠：
     ・`.cchart-bar` は flex:1 なので**それぞれ全体の50%幅**。その中心は 25% と 75%。
     ・`.cchart-col`（実際の棒）は枠の `width:78%` かつ `max-width:92px` の**可変幅**。
       → 棒の半幅 ＝ min(50%×78%÷2, 92px÷2) ＝ **min(19.5%, 46px)**
     ・したがって 左端＝25%＋半幅、幅＝50%−半幅×2（＝50%−min(39%,92px)）。
   **`.cchart-col` の width / max-width を変えたら、この式も必ず合わせること。**
   ※上下（top/height）はPHPが棒の上端どうしに合わせているため、ここでは触らない。 */
.cchart-link {
	position: absolute;
	left: calc(25% + min(19.5%, 46px));
	width: calc(50% - min(39%, 92px));
	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-soft); font-weight: 500; line-height: 1.5; white-space: pre-line; }
.cchart-note { margin: 14px 0 0; border: 1px solid #e2d3b6; border-radius: 4px; background: var(--cream); padding: 8px 10px; text-align: center; font-size: 13px; color: var(--accent-dark); font-weight: 500; }
.cchart-note b { font-family: var(--serif); font-size: 17px; color: var(--accent-dark); 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: 0 0 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); margin: 0; }
.s09-detail-text strong { font-weight: 700; background: linear-gradient(transparent 62%, #eddfc2 62%); }
.s09-detail-arrow { text-align: center; color: var(--s09-arrow); font-size: 15px; margin: 12px 0 14px; line-height: 1; }

/* 注記（モデルケースである旨）※削除しないこと */
.cases-disclaimer { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.8; }
.cases-more { display: none; text-align: center; margin-top: 22px; }
.cmb-less { display: none; }
.cases-more-btn[aria-expanded="true"] .cmb-more { display: none; }
.cases-more-btn[aria-expanded="true"] .cmb-less { display: inline; }

@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 { 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 { right: auto; left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); border-width: 12px 8px 0 8px; border-color: var(--accent-btn) transparent transparent transparent; }
	.cchart-badge-main { font-size: clamp(13.6px, 15.2px, 17.6px); max-width: 80px; }
	.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; }
	/* SPは上2件のみ表示し、残りは「もっと見る」で展開 */
	.case-extra { display: none; }
	.s09-cards.is-expanded .case-extra { display: grid; }
	.cases-more { display: block; }
}

/* =========================================================
 * お客様の声（写真＋★＋タグ＋声＋属性のカードをカルーセル表示）
 *   PC3枚／TB2枚／SP1枚・自動再生なし。動作は main.js。
 *   ※既存の .voice-card（枠内テキスト型）を壊さないよう、
 *     カルーセル内（.voice-carousel 配下）に限定して上書きしている。
 * ======================================================= */
.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-carousel .voice-card {
	height: 100%; margin: 0; padding: 0;
	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-carousel .voice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* 写真の高さは padding-top で固定（16:10）。画像ごとの実寸に左右されないようにする */
.voice-photo { position: relative; flex: none; width: 100%; padding-top: 62.5%; overflow: hidden; background: var(--green-050); }
.voice-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.voice-carousel .voice-stars { margin-bottom: 12px; }
.voice-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.voice-tag { padding: 4px 12px; border-radius: 6px; background: var(--green-700); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; }
.voice-carousel .voice-text { flex: 1; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.9; margin: 0; padding-left: 0; }
.voice-carousel .voice-text::before { content: none; }
.voice-carousel .voice-meta { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; text-align: left; }
.voice-carousel .voice-meta::before { content: none; }

.voice-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.voice-arrow { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.voice-arrow:hover:not(:disabled) { background: var(--green-700); border-color: var(--green-700); 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(--accent-btn); }

@media (max-width: 1024px) { .voice-item { flex: 0 0 calc((100% - 24px) / 2); } }   /* TB：2枚 */
@media (max-width: 767px) {
	.voice-item { flex: 0 0 100%; }                                                  /* SP：1枚 */
	.voice-body { padding: 20px; }
	.voice-nav { margin-top: 26px; }
}

/* =========================================================
 * ご相談の流れ（横線＋円ノードのタイムライン／`section_timeline-flow`）
 *   ※接続ラインの left/right は「100% ÷ ステップ数 ÷ 2」。現在4ステップ＝12.5%。
 *     dan_flow() のステップ数を変えたらこの値も必ず合わせること（3→16.7% / 5→10%）。
 * ======================================================= */
.flow-lead { text-align: center; font-size: 16px; color: var(--ink-soft); margin: -16px 0 52px; }
.flow-lead strong { color: var(--green-800); font-weight: 700; }

.s03-timeline-wrap { position: relative; }
.s03-steps { display: flex; position: relative; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
/* 各ノードの中心を結ぶ横ライン（ノード径56px の半分＝28px の高さに引く） */
.s03-steps::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: var(--green-700); 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-700); background: #fff; color: var(--green-700); 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-700); color: #fff; }
.s03-step-body { width: 100%; }
.s03-step-title { font-family: var(--serif); font-size: 19px; color: var(--green-800); line-height: 1.5; margin: 0 0 14px; }
.s03-step--accent .s03-step-title { color: var(--accent-dark); }
.s03-step-desc { font-size: 15px; color: var(--ink-soft); line-height: 1.9; margin: 0; }

@media (max-width: 1024px) {
	.s03-step { padding: 0 10px; }
	.s03-step-title { font-size: 17px; }
	.s03-step-desc { font-size: 14px; }
}
@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; }
}

/* =========================================================
 * 末尾CTA（離婚・相続の無料相談）※全ページ共通（footer.php から読み込み）
 *   背景は上＝最も濃い深緑／下＝ブランド深緑の2トーン。白カードが境目にまたがる。
 *   配色はこの2変数のみで調整すること。
 * ======================================================= */
:root {
	--cta-green-top: #1b3f36;    /* 上段（濃い側） */
	--cta-green-bottom: #22503f; /* 下段（やや明るい側） */
}
.cta-section {
	position: relative; overflow: hidden;
	padding: 88px 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%);
}
.cta-section::after { content: ""; display: block; height: 88px; }
.cta-inner { text-align: center; position: relative; }
.cta-title { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.45; margin: 0 0 30px; }
/* バッジは白で塗りつぶし＋深緑文字（枠線なし） */
.cta-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.cta-badges li { background: #fff; color: var(--green-800); border: none; padding: 6px 26px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.cta-text { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.cta-note { font-size: 14px; color: #cfdcd5; margin: 0 0 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-md); }
/* ※右上のラベル（.cta-card-tag）は 2026-08-07 に廃止 */
/* 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: 0 0 40px; list-style: none; }
.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(--green-700); 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(--ink-soft); }
/* 電話番号（明朝・大）とフォームボタン */
.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:hover { opacity: 1; }
.cta-tel-row { display: flex; align-items: center; gap: 12px; }
.cta-tel-ico { display: flex; color: var(--ink); }
.cta-tel-num { font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; color: var(--ink); }
.cta-tel-note { font-size: 15px; color: var(--ink-soft); text-align: center; }
.cta-form-btn { flex: 1; min-width: 320px; max-width: 420px; border-radius: 0; padding: 24px 30px; font-size: 19px; box-shadow: none; }
.cta-form-btn:hover { box-shadow: none; }
.cta-form-btn-arrow { margin-left: auto; font-size: 20px; }
.cta-card-note { margin: 26px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center; }

@media (max-width: 1024px) {
	.cta-title { font-size: 34px; }
	.cta-badges li { font-size: 16px; padding: 3px 20px; }
	.cta-text { font-size: 16px; }
	.cta-card { padding: 40px 44px; }
	.cta-tel-num { font-size: 36px; letter-spacing: .05em; }
	.cta-flow-step { min-width: 120px; }
	/* 電話番号と横並びのままボタン文言を1行に収める（幅が足りないと2行に折り返すため） */
	.cta-form-btn { min-width: 280px; padding: 20px 24px; font-size: 17px; }
}
@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; }
	/* 3ステップは折り返さず横1列に固定 */
	.cta-flow { flex-wrap: nowrap; 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: 11px; }
	/* 電話とボタンは縦積み（横並びだとボタン文字が折り返す） */
	.cta-actions { flex-direction: column; gap: 20px; }
	.cta-tel-num { font-size: 30px; letter-spacing: .03em; }
	.cta-tel-note { font-size: 12px; }
	/* 文言（お問い合わせフォームはこちら）が2行に折り返さないサイズに抑える */
	.cta-form-btn { min-width: 0; width: 100%; max-width: none; padding: 18px 14px; font-size: 15px; gap: 6px; }
}
@media (max-width: 520px) { .cta-tel-num { font-size: 26px; } }

/* =========================================================
 * MV レスポンシブ（TB／SP）
 * ======================================================= */
@media (max-width: 1024px) {
	/* TB：ベールを左側だけに絞り、人物のいる右側は素通しにして写真を見せる */
	.mvp { min-height: 520px; }
	.mvp-inner { padding: 64px 40px; }
	.mvp-body { max-width: 560px; }
	/* TBは画面が縦長寄りで人物が右に寄るため、拡大せず等倍（cover）に戻す */
	.mvp-bg-img { background-size: cover; background-position: 62% 28%; }
	.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: 16px; }
	.mvp-heading { font-size: 34px; }
	.mvp-heading-lg { font-size: 44px; }
	.mvp-points { gap: 12px; padding: 16px; }
	.mvp-points-badge { width: 88px; height: 88px; }
	.mvp-points-badge-txt { font-size: 11px; }
	.mvp-point { padding: 0 4px; }
	.mvp-point-text { font-size: 13px; }
	/* 2つのボタンを1行に収めるため、余白と矢印を詰める */
	.mvp-btn { font-size: 17px; min-width: 200px; gap: 12px; padding: 16px 20px; }
	.mvp-btn-arrow { width: 32px; }
}
@media (max-width: 767px) {
	/* ---- SP：上＝白地にテキスト／下＝写真＋写真に重なるCTAボタンの2段構成 ----
	   テキストを写真に重ねないため、写真がそのまま大きく見える。
	   写真エリアの高さは --mvp-sp-photo-h の1変数で変更でき、ボタン位置も連動する。 */
	.mvp { min-height: auto; align-items: flex-start; background-color: var(--mvp-sp-bg); }
	.mvp-bg-img { top: auto; bottom: 0; height: var(--mvp-sp-photo-h); background-size: var(--mvp-bg-size-sp); background-position: var(--mvp-bg-position-sp); }
	/* 写真の上端を白くフェードさせ、上段のテキストエリアと自然につなぐ */
	.mvp-bg-veil { top: auto; bottom: 0; height: var(--mvp-sp-photo-h); background: linear-gradient(to bottom, var(--mvp-sp-bg) 0%, rgba(255,255,255,0) 10%); }
	.mvp-inner { padding: 0; }
	.mvp-body { max-width: none; padding: 30px 18px; text-align: center; }
	.mvp-lead { gap: 12px; margin-bottom: 14px; font-size: 14px; }
	.mvp-lead::before, .mvp-lead::after { height: 22px; }
	.mvp-heading { margin-bottom: 20px; font-size: 28px; }
	.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; }
	.mvp-point-text { font-size: 12.5px; }
	.mvp-point-text br { display: none; }
	/* 注釈は左寄せ。下に写真エリア分の余白を確保（96px＝ボタン高64px＋下余白32px） */
	.mvp-note { margin-bottom: calc(var(--mvp-sp-photo-h) - 96px); 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; }
}


/* =========================================================
 * ▼ 2026-08-07（修正2）選ばれる理由：文章／写真を左右交互に置く2カラム型
 *   デザインパーツ `section_2col-text-image`（.s04-*）を当サイト配色へ移植。
 *   ・PC   ：01=文章→写真／02=写真→文章 と1項目ごとに左右を入れ替える（.s04-reverse）
 *   ・TB/SP：**必ず「文章が上・写真が下」に統一**する（order を 0 に戻す）
 * ======================================================= */
.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-600); letter-spacing: .05em; }
.s04-num-value { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 60px; line-height: .85; color: var(--green-700); }
.s04-title { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--green-800); line-height: 1.55; letter-spacing: .02em; margin: 0 0 18px; }
.s04-body-text { font-size: 15.5px; color: var(--ink-soft); line-height: 1.95; }
.s04-body-text p { margin: 0; }
.s04-body-text p + p { margin-top: 14px; }
.s04-img-wrap { width: 100%; min-width: 0; }
.s04-img-wrap img { width: 100%; height: auto; display: block; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-md); }

@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; }
}
@media (max-width: 767px) {
	.s04 { padding: 32px 0; }
	.s04-container { padding: 0 24px; }
	.s04-num-value { font-size: 44px; }
	.s04-title { font-size: 19px; margin-bottom: 14px; }
	.s04-body-text { font-size: 15px; }
	/* スマホは上2項目のみ表示し、残りは「さらに見る」で展開 */
	.s04-extra { display: none; }
	.features-2col.is-expanded .s04-extra { display: block; }
	.strengths-more { display: block; }
}

/* =========================================================
 * ▼ 2026-08-07（修正1）MVの「相談を予約する」ボタン
 *   タブレット・スマホでは非表示にする（ご指示）。
 *   ・TB   ：電話番号ボタンのみ残す
 *   ・SP   ：電話番号ボタンも元から非表示のため、MV内のCTAは無くなる
 *            （相談導線は画面下部の固定CTAバーが担う）
 * ======================================================= */
@media (max-width: 1024px) {
	.mvp-cta .mvp-btn:not(.mvp-btn--outline) { display: none; }
}
@media (max-width: 767px) {
	/* ボタンが無くなる分、写真エリアの高さぶんだけ余白を確保して写真を全部見せる */
	.mvp-note { margin-bottom: var(--mvp-sp-photo-h); }
	.mvp-cta { display: none; }
}

/* =========================================================
 * 取扱業務（カード一覧＋個別ページ）
 * 2026-09-14：ご指示で、参考サイトと同じ形式に揃えた。
 *   ・/services/          … 各業務への入口カード（.svc-grid / .svc-card）
 *   ・/services/<key>/    … 業務ごとの個別ページ（.service-single / .service-block ほか）
 * 配色は本テーマの深緑×真鍮のまま（移植したのはレイアウトのみ）。
 * ======================================================= */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.svc-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; color: inherit; box-shadow: var(--shadow-sm); transition: .25s;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; opacity: 1; }
.svc-card-thumb { aspect-ratio: 3 / 2; background: var(--green-050); overflow: hidden; }
.svc-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.svc-card:hover .svc-card-thumb img { transform: scale(1.04); }
/* 左右の余白はカード直下の要素へまとめて指定する（写真だけは全幅のまま） */
.svc-card > :not(.svc-card-thumb) { margin-left: 28px; margin-right: 28px; }
.svc-card > .svc-card-en { margin-top: 24px; }
.svc-card > :last-child { margin-bottom: 26px; }
.svc-card-en { display: block; font-family: var(--serif); color: var(--accent-dark); font-size: 12px; letter-spacing: .2em; }
.svc-card-title { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin: .3em 0 .6em; line-height: 1.4; }
.svc-card-text { margin: 0 0 16px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.95; flex: 1; }
.svc-card-fee { font-family: var(--serif); color: var(--accent-dark); font-weight: 700; font-size: 16px; border-top: 1px dashed var(--line); padding-top: 12px; margin: 0 0 16px; }
.svc-card-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--green-700); }
.svc-card:hover .svc-card-more { color: var(--green-600); }
.svc-card:hover .svc-card-more svg { transform: translateX(4px); }
.svc-card-more svg { transition: transform .25s; }
.svc-index-cta { margin-top: 44px; text-align: center; }
.svc-index-cta-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }

/* ---- 個別ページ：写真＋業務説明 ---- */
.service-single { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; margin: 0 0 52px; }
.service-single-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.service-single-en { display: block; font-family: var(--serif); color: var(--accent-dark); font-size: 12px; letter-spacing: .2em; margin-bottom: 8px; }
.service-detail-title { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--green-800); margin: 0 0 14px; }
.service-detail-text { color: var(--ink-soft); font-size: 15px; line-height: 2; margin: 0 0 18px; }
.service-single-body .service-detail-text:last-child { margin-bottom: 0; }

/* ---- 個別ページ：見出し付きのブロック（主な取扱内容・料金・本文追記） ---- */
.service-block { margin: 0 0 48px; }
.service-block-head { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--green-800); margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--accent); }
.service-block-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.service-block-points li { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; background: var(--green-050); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.service-block-points li svg { flex: none; margin-top: 4px; color: var(--green-600); }
.service-block--entry { font-size: 15px; line-height: 2; color: var(--ink-soft); }

/* ---- 個別ページ：この業務の相談への導線 ---- */
.service-single-cta { margin: 0 0 52px; padding: 36px; text-align: center; background: var(--green-050); border-radius: var(--radius); }
.service-single-cta-text { margin: 0 0 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.9; }

/* ---- 個別ページ：そのほかの取扱業務 ---- */
.service-other { margin: 0; }
/* 当事務所の取扱業務は2件のため、「そのほかの取扱業務」は基本1枚だけになる。
   repeat(3,1fr) だとカードが1/3幅で寂しく見えるので、**カードの上限幅を決めて左寄せ**にしている。
   業務が増えたら自動で2枚・3枚と並ぶ。 */
.svc-grid--other { grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); justify-content: start; gap: 22px; }
.svc-grid--other .svc-card > :not(.svc-card-thumb) { margin-left: 20px; margin-right: 20px; }
.svc-grid--other .svc-card > .svc-card-en { margin-top: 18px; }
.svc-grid--other .svc-card > :last-child { margin-bottom: 20px; }
.svc-grid--other .svc-card-title { font-size: 18px; }
.svc-grid--other .svc-card-text { font-size: 13.5px; line-height: 1.9; }

.fee-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.9; }

@media (max-width: 900px) {
	.service-single { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
	.svc-grid--other { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.svc-grid { grid-template-columns: 1fr; gap: 22px; }
	.svc-card > :not(.svc-card-thumb) { margin-left: 20px; margin-right: 20px; }
	.svc-card-title { font-size: 19px; }
	.svc-card-text { font-size: 14px; }
	.service-detail-title { font-size: 22px; }
	.service-block { margin-bottom: 38px; }
	.service-block-head { font-size: 18px; }
	.service-block-points { grid-template-columns: 1fr; gap: 10px; }
	.service-block-points li { padding: 12px 14px; font-size: 14.5px; }
	.service-single-cta { padding: 26px 20px; }
	.service-single-cta-text { font-size: 14.5px; }
}

/* =========================================================================
 * ★ 2026-09-14：トップページを参考デザイン（以下「参考サイト」）と同じ形式へ作り直した際に追加した一式
 * -------------------------------------------------------------------------
 * 移植したのは**レイアウト（構造）のみ**で、配色は本テーマの深緑×真鍮のまま。
 * 参考サイトは 1rem = 10px（html font-size:62.5%）だが、本テーマは 1rem = 16px のため、
 * **すべて px に換算して移植**している。rem のまま貼り付けないこと。
 *
 * 内訳：MV（.mv-*）／お悩み（.s02-*）／共通見出し（.sh01-*）／選ばれる理由の導入（.s01-*）
 *       ／お客様の声（.s06-*）／よくあるご質問（.s05-*）／アクセス（.s13-*）
 *       ／ご相談の流れの見出し（.s03-header ほか）／セクション背景の交互ルール
 *
 * ※旧トップで使っていた `.mvp-*`（旧MV）・`.worry-*`（旧お悩み）・`.voice-*`（旧お客様の声）・
 *   `.svc-block` / `.svc-row`（旧取扱業務ページ）は、トップからは使わなくなった。
 *   他ページで参照される可能性があるため**削除はしていない**（`.voice-note` は現行でも使用中）。
 * ======================================================================= */

/* =========================================================
 * ① MV（メインビジュアル）
 *   PC・タブレット … 背景写真（ベールなし）→ キャッチ（2行）→ 区切り線付きサブコピー → 強み3点の白カード
 *   携帯（767px以下） … 白地にして、キャッチ → 写真（.mv-sp-photo）→ 強み3点（全幅）の縦並び
 *                        ※サブコピー（.mv-sub）と注記（.mv-note）は非表示
 *   ※参考サイトにある弁護士の切り抜き写真（.mv-lawyer）は、当事務所に素材が無いため置いていない。
 * ======================================================= */
.mv {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* 背景＝事務所イメージ写真。
	   【2026-09-28・ご指示】白のベール（もや）は「文字が乗る左側だけ」に入れ、
	   **弁護士のお顔には一切かけない**。そのため、人物の身体の手前で完全に透明へ抜くこと。
	     ・hero.webp（1672×941）で人物の身体の左端は画像の約41%、お顔は約58〜73%。
	     ・下の 50% で透明になる指定なら、お顔まで約8ポイントの余裕がある。
	   ⚠️ 透明になる位置（50%）を大きくすると、再びお顔にもやがかかる。 */
	background-color: var(--green-050);
	background-image:
		linear-gradient(100deg,
			rgba(255,255,255,.92) 0%,
			rgba(255,255,255,.80) 28%,
			rgba(255,255,255,.40) 40%,
			rgba(255,255,255,0)   50%),
		url(../images/hero.webp);
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center center, center center;
}
.mv-inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding: 72px 24px;
}
.mv-copy { max-width: 720px; }

/* キャッチ：行ごとにブロック化し、2行目を大きく見せてメリハリをつける */
.mv-catch {
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .03em;
	color: var(--green-900);
	margin: 0 0 24px;
}
.mv-catch-line { display: block; }
.mv-catch-line--lg { font-size: 50px; line-height: 1.3; }
.mv-catch-em { font-style: normal; color: var(--accent-dark); }

/* サブコピー：キャッチとの間に真鍮色の細い区切り線を引き、広めの行間で4行に見せる */
.mv-sub {
	position: relative;
	/* 【2026-09-28・ご指示】読みやすさのため文字を大きく・濃くした（17px/400 → 19px/500）。
	   色は既に最も濃い本文色 `--ink` のため据え置き、太さを上げて「濃さ」を出している。 */
	font-size: 19px;
	font-weight: 500;
	line-height: 2.05;
	color: var(--ink);
	margin: 0 0 32px;
	padding-top: 28px;
}
.mv-sub::before {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 260px; height: 1px;
	background: var(--accent);
}

/* 強み3点：1枚の白カードにまとめ、円形アイコン＋縦の区切り線で3カラム表示 */
.mv-badges {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 20px 16px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(20,49,42,.12);
}
.mv-badge { flex: 1 1 0; min-width: 0; padding: 0 14px; text-align: center; }
.mv-badge + .mv-badge { border-left: 1px solid var(--line); }
/* 円形アイコン（インラインSVG）。circle の fill は currentColor のため color で配色を制御する */
.mv-badge-icon { display: block; width: 52px; height: 52px; margin: 0 auto 10px; color: var(--green-700); }
.mv-badge-label { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-soft); font-weight: 500; }
.mv-badge-label strong { display: block; font-size: 17px; font-weight: 700; color: var(--green-800); }
.mv-badge-sup { font-size: 10px; color: var(--ink-soft); vertical-align: super; margin-left: 2px; }

/* 注記（※1・初回相談について） */
/* 注記：横に長く、左側のベールの範囲（50%）を越えて写真側まで伸びる。
   ベールを右へ伸ばすとお顔にかかってしまうため、**文字にだけ白いにじみ**を敷いて読ませる。
   写真を白い面で覆わずに文字だけを浮かせられる（参考サイトと同じ手法）。 */
.mv-note {
	margin: 22px 0 0;
	/* 【2026-09-28・ご指示】薄いグレー（--ink-soft）では読みにくいため、
	   文字を大きく（12.5px → 14px）し、テーマで最も濃い深緑＋太字で「濃く」した。 */
	font-size: 14px;
	font-weight: 600;
	line-height: 1.9;
	color: var(--green-900);
	/* にじみは「近距離を濃く・遠距離を広く」の2段構え。
	   同じ指定を重ねると白が濃く乗り、明るい肌色の上でも文字の輪郭が立つ。
	   ※タブレットでは注記が人物の手の上まで伸びるため、この濃さが必要（弱めると読めなくなる）。 */
	text-shadow:
		0 0 2px rgba(255,255,255,1),
		0 0 4px rgba(255,255,255,1),
		0 0 8px rgba(255,255,255,1),
		0 0 14px rgba(255,255,255,.95),
		0 0 24px rgba(255,255,255,.85);
}

/* 携帯版専用の写真エリア。PC・タブレットでは写真は `.mv` の背景が担当するため出さない。 */
.mv-sp-photo { display: none; }

@media (max-width: 1024px) {
	/* タブレットは写真が横方向に切り取られ、人物が画面の約38%まで寄ってくる（PCは約41%）。
	   そのぶんベールが透明になる位置を手前（42%）へ前倒しし、お顔（約50〜82%）を避ける。 */
	.mv {
		background-image:
			linear-gradient(100deg,
				rgba(255,255,255,.92) 0%,
				rgba(255,255,255,.78) 22%,
				rgba(255,255,255,.36) 33%,
				rgba(255,255,255,0)   42%),
			url(../images/hero.webp);
		background-position: center center, center center;
	}
	.mv-inner { padding: 52px 24px; }
	.mv-copy { max-width: none; }
	.mv-catch { font-size: 28px; }
	.mv-catch-line--lg { font-size: 38px; }
	.mv-sub { font-size: 17px; }
}
@media (max-width: 767px) {
	/* 【2026-09-28】携帯版のMVを参考デザインと同じ構成に作り替えた。
	   旧構成（写真を背景に敷き、上下方向の白ベールで文字を読ませる方式）は廃止。
	     ・並び順は「キャッチ → 写真 → 強み3点」。HTMLの順序はPC優先のまま、
	       `.mv-copy` を縦フレックスにして order で入れ替えている。
	     ・写真は背景ではなく**通常フローの `.mv-sp-photo`** が担当する。
	       絶対配置や背景方式に戻すと、強み3点の下に余白が帯状に残るので戻さないこと。
	     ・強み3点のカードは参考サイトと同じく**画面の端いっぱい**まで広げる。 */
	.mv {
		/* 写真ぶんの高さ。大きくすると人物が大きく写るが、ファーストビューが間延びする */
		--mv-sp-photo-h: 300px;
		/* `.mv-inner` の左右パディング。強み3点を全幅にする際の打ち消し量と必ず揃えること */
		--mv-sp-px: 20px;
		background-image: none;
		background-color: #fff;
	}
	/* 下の余白は入れない。強み3点のカードの下に白帯が残り、次のセクションとの間に隙間ができるため */
	.mv-inner { padding: 40px var(--mv-sp-px) 0; }
	/* 縦フレックス＋order で「キャッチ① → 写真② → 強み3点③」の順に並べ替える */
	.mv-copy { display: flex; flex-direction: column; }
	.mv-catch    { order: 1; }
	.mv-sp-photo { order: 2; }
	.mv-badges   { order: 3; }
	.mv-note     { order: 4; }
	.mv-catch { font-size: 24px; margin-bottom: 20px; }
	.mv-catch-line--lg { font-size: 32px; }
	/* 【2026-09-28・ご指示】携帯版ではサブコピー4行を出さない。
	   PC・タブレットでは引き続き表示するため、front-page.php 側からは消さないこと。 */
	.mv-sub { display: none; }
	/* 写真エリア：画面の端いっぱいまで広げ、上端だけ白へフェードさせてキャッチと自然につなぐ */
	.mv-sp-photo {
		display: block;
		position: relative;
		height: var(--mv-sp-photo-h);
		margin: 0 calc(-1 * var(--mv-sp-px)) 20px;
		background-image: url(../images/hero.webp);
		background-repeat: no-repeat;
		background-size: cover;
		/* 人物が中央に来る位置。数値を上げると人物が左へ動く */
		background-position: 50% 28%;
	}
	.mv-sp-photo::before {
		content: '';
		position: absolute;
		inset: 0 0 auto 0;
		height: 40px;
		background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
	}
	/* 強み3点：参考サイトと同じく左右の余白を打ち消して画面の端いっぱいに広げ、
	   角丸を外して端で途切れないようにする。下辺の深緑線で次セクションとの境界を作る。 */
	.mv-badges {
		padding: 16px 8px;
		margin: 0 calc(-1 * var(--mv-sp-px));
		border-radius: 0;
		border-bottom: 3px solid var(--green-700);
		box-shadow: none;
	}
	.mv-badge { padding: 0 8px; }
	.mv-badge-icon { width: 40px; height: 40px; margin-bottom: 8px; }
	.mv-badge-label { font-size: 11.5px; }
	.mv-badge-label strong { font-size: 13px; }
	/* 【2026-09-14・ご指示】携帯版ではMV下の注記を出さない。
	   PC・タブレットでは表示するため、front-page.php 側からは消さないこと。 */
	.mv-note { display: none; }
}

/* =========================================================
 * ② お悩みセクション（.s02）
 *   枠付きチェックリスト（2列）→ ▼ → 解決文 → 相談ボタン
 * ======================================================= */
.s02 { background: #fff; padding: 84px 0; }
.s02 ul { list-style: none; margin: 0; padding: 0; }
.s02 em { font-style: normal; }
.s02-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.s02-heading {
	font-family: var(--serif);
	font-size: 32px; font-weight: 600;
	text-align: center; line-height: 1.45; letter-spacing: .06em;
	color: var(--ink); margin: 0 0 48px;
}
.s02-heading .s02-em {
	color: var(--green-800);
	background: linear-gradient(transparent 75%, rgba(184,148,90,.32) 75%);
}
.s02-worry-box { border: 2px solid var(--green-700); background: #fff; padding: 40px 48px; }
.s02-worry-list { display: grid; grid-template-columns: 1fr 1fr; }
.s02-worry-item { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,.08); }
/* 【注意】最下段の下線を消す指定。dan_worries() の**項目数が偶数**である前提。
   奇数にするときはこの指定も見直すこと（現在は6件）。 */
.s02-worry-item:nth-last-child(-n+2) { border-bottom: none; }
.s02-check-icon {
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; flex-shrink: 0;
	border: 2px solid var(--accent); border-radius: 3px;
}
.s02-check-icon::after {
	content: ""; display: block; width: 10px; height: 5.5px;
	border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg) translateY(-15%);
}
.s02-worry-text { font-size: 15.5px; color: var(--ink); line-height: 1.7; }
.s02-arrow-wrap { display: flex; justify-content: center; padding: 32px 0; }
.s02-arrow { display: block; width: 0; height: 0; border-left: 32px solid transparent; border-right: 32px solid transparent; border-top: 24px solid var(--green-700); }
.s02-resolve-area { text-align: center; }
.s02-resolve-text { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.7; letter-spacing: .04em; margin: 0; }
.s02-resolve-em { color: var(--green-800); font-weight: 700; }

/* 相談ボタン（当事務所はLINEを運用していないため、メールフォームと電話の2つ） */
.s02-cta { margin-top: 44px; text-align: center; }
.s02-cta-lead { font-size: 16px; font-weight: 700; color: var(--green-800); margin: 0 0 18px; }
.s02-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.s02-cta-btn {
	display: inline-flex; align-items: center; gap: 14px;
	min-width: 300px; padding: 16px 26px; border-radius: 999px;
	color: #fff; text-align: left; transition: transform .2s, box-shadow .2s;
}
.s02-cta-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.s02-cta-btn--mail { background: var(--accent-btn); }
.s02-cta-btn--tel { background: var(--green-700); }
.s02-cta-btn-ico { flex: none; display: inline-flex; }
.s02-cta-btn-txt strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; }
.s02-cta-btn-txt small { display: block; font-size: 12px; opacity: .9; line-height: 1.6; }

@media (max-width: 1024px) {
	.s02 { padding: 64px 0; }
	.s02-heading { font-size: 28px; }
	.s02-worry-box { padding: 32px; }
	.s02-worry-item { padding: 16px; }
}
@media (max-width: 767px) {
	.s02 { padding: 48px 0; }
	.s02-heading { font-size: 21px; letter-spacing: .02em; margin-bottom: 28px; }
	.s02-worry-box { padding: 20px 14px; }
	.s02-worry-list { grid-template-columns: 1fr; }
	.s02-worry-item { padding: 14px 6px; border-bottom: 1px solid rgba(0,0,0,.08); }
	.s02-worry-item:last-child { border-bottom: none; }
	.s02-worry-text { font-size: 14px; }
	.s02-arrow { border-left-width: 24px; border-right-width: 24px; border-top-width: 18px; }
	.s02-resolve-text { font-size: 21px; }
	.s02-cta-btn { min-width: 0; width: 100%; }
}

/* =========================================================
 * ③ 共通セクション見出し（.sh01）
 *   英字ラベル（枠付き）＋大見出し＋リード。参考サイトの sh01 と同じ形式。
 * ======================================================= */
.sh01 { text-align: center; margin-bottom: 48px; }
.sh01--left { text-align: left; }
.sh01-eyebrow {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
	color: var(--green-700); border: 1px solid var(--green-700); border-radius: 4px;
	padding: 4px 16px; margin: 0 0 16px;
}
.sh01-title {
	font-family: var(--serif);
	font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: .04em;
	color: var(--ink); margin: 0 0 20px;
}
.sh01-title em { font-style: normal; color: var(--accent-dark); }
.sh01-lead { font-size: 15px; line-height: 1.9; color: var(--ink-soft); margin: 0; }
@media (max-width: 1024px) {
	.sh01-title { font-size: 28px; }
	.sh01-lead { font-size: 14.5px; }
}
@media (max-width: 767px) {
	.sh01 { margin-bottom: 32px; }
	.sh01-title { font-size: 22px; letter-spacing: .02em; }
	.sh01-lead { font-size: 14px; }
	.sh01-eyebrow { font-size: 11px; margin-bottom: 12px; }
}

/* =========================================================
 * ④ 選ばれる理由（#merits）の導入部（.merits-intro／.s01-*）
 * ======================================================= */
.merits-intro { background: var(--green-050); padding: 80px 0 40px; text-align: center; }
.s01-eyebrow {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
	color: var(--green-700); border: 1px solid var(--green-700); border-radius: 4px;
	padding: 4px 16px; margin: 0 0 16px;
}
.s01-title { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: .04em; color: var(--ink); margin: 0 0 18px; }
.s01-lead { font-size: 15px; line-height: 1.9; color: var(--ink-soft); margin: 0; }
/* 導入と各項目を1つの面として見せるため、#merits の中の .s04 も薄色にする */
#merits .s04 { background: var(--green-050); padding: 32px 0; }
#merits .s04 + .s04 { border-top: none; }
#merits .s04-inner { gap: 40px; }
#merits .s04-num { margin-bottom: 8px; }
#merits .s04-num-value { font-size: 48px; }
#merits .s04-title { margin-bottom: 14px; }
#merits .s04-body-text { margin-bottom: 0; }
@media (max-width: 1024px) {
	.merits-intro { padding: 64px 0 32px; }
	.s01-title { font-size: 28px; }
	#merits .s04 { padding: 24px 0; }
}
@media (max-width: 767px) {
	.merits-intro { padding: 48px 0 24px; }
	.s01-title { font-size: 22px; }
	.s01-lead { font-size: 14px; }
	#merits .s04 { padding: 16px 0; }
}

/* 代表挨拶（#message）で使う、.s04 のリンクと画像の追加指定 */
.s04-links { margin-top: 22px; }
.s04-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-dark); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.s04-link::after { content: "›"; }
.s04-img { width: 100%; height: auto; }

/* =========================================================
 * ⑤ ご相談の流れ（.s03）の見出し部分
 *   タイムライン本体（.s03-steps ほか）は上の既存指定を使う。
 * ======================================================= */
.s03 { background: var(--green-050); padding: 84px 0; }
.s03-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.s03-header { text-align: center; margin-bottom: 48px; }
.s03-eyebrow {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
	color: var(--green-700); border: 1px solid var(--green-700); border-radius: 4px;
	padding: 4px 16px; margin-bottom: 16px;
}
.s03-title { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: .04em; color: var(--ink); margin: 0 0 18px; }
.s03-title-em { font-style: normal; color: var(--accent-dark); }
.s03-lead { font-size: 15px; line-height: 1.95; color: var(--ink-soft); margin: 0; }
.s03-lead-em { color: var(--green-800); }
@media (max-width: 1024px) { .s03 { padding: 64px 0; } .s03-title { font-size: 28px; } }
@media (max-width: 767px) { .s03 { padding: 48px 0; } .s03-header { margin-bottom: 32px; } .s03-title { font-size: 22px; } .s03-lead { font-size: 14px; } }

/* =========================================================
 * ⑥ お客様の声（.s06）カルーセル
 *   PC3枚／TB2枚／SP1枚。動作は assets/js/main.js の S06Slider（自動再生なし）。
 * ======================================================= */
.s06 { background: var(--green-050); padding: 84px 0; overflow-x: hidden; }
.s06-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.s06-header { margin-bottom: 40px; }
.s06-eyebrow {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
	color: var(--green-700); border: 1px solid var(--green-700); border-radius: 4px;
	padding: 4px 16px; margin-bottom: 16px;
}
.s06-title { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--green-800); line-height: 1.4; letter-spacing: .06em; margin: 0 0 16px; }
.s06-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.85; max-width: 720px; margin: 0; }
.s06-slider-wrap { position: relative; overflow: hidden; margin: 0 -24px; padding: 0 24px; }
.s06-track { display: flex; gap: 24px; transition: transform .4s cubic-bezier(.25,.46,.45,.94); will-change: transform; }
.s06-card {
	flex: 0 0 calc((100% - 24px * 2) / 3);
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line); border-radius: 6px;
	box-shadow: var(--shadow-sm); overflow: hidden;
	transition: box-shadow .2s, transform .2s;
}
.s06-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.s06-card-img { width: 100%; padding-top: 64%; position: relative; background: var(--green-100); overflow: hidden; flex-shrink: 0; }
.s06-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.s06-card:hover .s06-card-img img { transform: scale(1.03); }
.s06-card-body { display: flex; flex-direction: column; padding: 20px; flex: 1; }
.s06-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.s06-tag { display: inline-block; background: var(--green-700); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .03em; padding: 3px 8px; line-height: 1.5; }
.s06-card-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.7; letter-spacing: .02em; margin: 0 0 12px; flex: 1; }
.s06-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.s06-card-company { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.s06-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }
.s06-nav-btn {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line); background: #fff; color: var(--green-700);
	font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: border-color .2s, color .2s, background .2s; flex-shrink: 0;
}
.s06-nav-btn:hover:not(:disabled) { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.s06-nav-btn:disabled { color: #c9d2ce; border-color: #e4e9e6; cursor: default; }
.s06-dots { display: flex; align-items: center; gap: 8px; }
.s06-dot { width: 24px; height: 3px; border: none; border-radius: 2px; background: #d3dbd7; cursor: pointer; padding: 0; transition: background .2s, width .2s; }
.s06-dot.is-active { background: var(--green-700); width: 36px; }
@media (max-width: 1024px) {
	.s06 { padding: 64px 0; }
	.s06-title { font-size: 26px; }
	.s06-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
	.s06 { padding: 48px 0; }
	.s06-header { margin-bottom: 28px; }
	.s06-title { font-size: 22px; }
	.s06-lead { font-size: 14px; }
	.s06-track { gap: 16px; }
	.s06-card { flex: 0 0 100%; }
	.s06-card-title { font-size: 14px; }
	.s06-nav { margin-top: 28px; gap: 16px; }
	.s06-nav-btn { width: 40px; height: 40px; font-size: 18px; }
}

/* =========================================================
 * ⑦ よくあるご質問（.s05）アコーディオン
 *   ※下層の「よくあるご質問」ページ（page-faq.php）は従来どおり .faq-* を使う。
 *     こちらはトップ専用。両方を混ぜないこと。
 * ======================================================= */
.s05 { background: var(--green-050); padding: 84px 0; }
.s05-container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.s05-header { text-align: center; margin-bottom: 32px; }
.s05-title { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.4; margin: 0; }
.s05-list { margin: 0; padding: 0; }
.s05-item { border-top: 1px solid var(--line); }
.s05-item:last-child { border-bottom: 1px solid var(--line); }
.s05-dt { margin: 0; }
.s05-question {
	width: 100%; display: flex; align-items: center; gap: 16px;
	padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left;
	font-family: inherit; transition: opacity .2s ease;
}
.s05-question:hover { opacity: .75; }
.s05-q-label { font-size: 16px; font-weight: 700; color: var(--accent-dark); flex-shrink: 0; line-height: 1; letter-spacing: .02em; }
.s05-q-text { font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.7; }
.s05-icon { flex-shrink: 0; position: relative; width: 18px; height: 18px; color: var(--green-700); }
.s05-icon::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; transform: translateY(-50%); }
.s05-icon::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: currentColor; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; }
.s05-item.is-open .s05-icon::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.s05-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; margin: 0; }
.s05-item.is-open .s05-answer { max-height: 1200px; }
.s05-answer-inner { padding: 0 0 28px 32px; }
.s05-answer-inner p { font-size: 15px; color: var(--ink-soft); line-height: 1.85; margin: 0 0 12px; }
.s05-answer-inner p:last-child { margin-bottom: 0; }
.s05-more-wrap { text-align: center; margin-top: 32px; }
.s05-more-link { font-weight: 700; color: var(--accent-dark); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (max-width: 1024px) { .s05 { padding: 64px 0; } }
@media (max-width: 767px) {
	.s05 { padding: 48px 0; }
	.s05-title { font-size: 21px; }
	.s05-question { gap: 12px; padding: 20px 0; }
	.s05-q-label, .s05-q-text { font-size: 15px; }
	.s05-answer-inner { padding: 0 0 20px 27px; }
	.s05-answer-inner p { font-size: 14px; }
}

/* =========================================================
 * ⑧ アクセス（.s13）
 *   中央見出し＋（左）Googleマップ／（右）アクセス情報の表
 *   ※参考サイトにある「事務所ビルの外観写真」は素材が無いため置いていない。
 * ======================================================= */
.s13 { background: var(--cream); padding: 96px 0; }
.s13-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.s13-header { text-align: center; margin-bottom: 56px; }
.s13-eyebrow { font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 400; letter-spacing: .4em; color: var(--ink-soft); text-transform: uppercase; margin: 0 0 10px; }
.s13-heading { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: .12em; margin: 0; position: relative; display: inline-block; padding-bottom: 16px; }
.s13-heading::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--green-700); }
.s13-body { display: grid; grid-template-columns: 1fr 42%; gap: 56px; align-items: stretch; }
.s13-map { min-height: 460px; position: relative; }
.s13-map-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border-radius: var(--radius); }
.s13-info { display: flex; flex-direction: column; justify-content: center; }
.s13-table { margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.s13-row { display: flex; align-items: flex-start; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.s13-label { flex-shrink: 0; width: 80px; font-size: 12.5px; font-weight: 500; color: var(--green-700); letter-spacing: .08em; padding-top: 3px; margin: 0; }
.s13-data { flex: 1; font-size: 14.5px; line-height: 1.8; color: var(--ink); letter-spacing: .02em; margin: 0; }
.s13-note { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.s13-tel { color: var(--green-700); font-size: 17px; letter-spacing: .06em; }
.s13-tel:hover { text-decoration: underline; }
.s13-map-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent-dark); letter-spacing: .06em; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; }
@media (max-width: 1024px) {
	.s13 { padding: 72px 0; }
	.s13-container { padding: 0 24px; }
	.s13-heading { font-size: 24px; }
	.s13-header { margin-bottom: 40px; }
	.s13-body { gap: 32px; grid-template-columns: 1fr 46%; }
	.s13-map { min-height: 400px; }
	.s13-label { width: 72px; }
}
@media (max-width: 767px) {
	.s13 { padding: 56px 0; }
	.s13-container { padding: 0 20px; }
	.s13-heading { font-size: 21px; }
	.s13-header { margin-bottom: 32px; }
	.s13-body { grid-template-columns: 1fr; gap: 0; }
	.s13-map { min-height: 300px; margin-bottom: 32px; }
	.s13-row { flex-direction: column; gap: 4px; padding: 14px 0; }
	.s13-label { width: auto; }
	.s13-tel { font-size: 18px; }
}

/* =========================================================
 * ⑨ セクション背景色 交互ルール（白 → 薄色 → 白 → …）
 *   worries: 白 / services: 白 / merits: 薄色 / cases: 白 / voices: 薄色 /
 *   flow: 薄色 / message: 白 / faq-top: 薄色 / access: クリーム
 *   ※参考サイトと同じ考え方。個別に背景を足すときはこの並びを崩さないこと。
 * ======================================================= */
#cases   { background: #fff; }
#message { background: #fff; padding: 84px 0; }
@media (max-width: 767px) { #message { padding: 48px 0; } }