@charset "UTF-8";
/* ============================================================
 * tegawa-law-theme メインスタイル
 * 配色はすべて CSS変数（--tg-*）で管理する。色の直書きは禁止
 * ============================================================ */

/* ---- 1. 変数定義 ---- */
:root {
	/* ベースカラー：深いオレンジブラウン（見出し・ロゴ・電話番号）。白背景とのコントラスト比 6.6 */
	--tg-main:        #9a3d12;
	--tg-main-dark:   #7a2f0c;
	--tg-main-light:  #d9773f;

	/* ピンク（小見出しの番号・ラベル・装飾）。白背景とのコントラスト比 5.0 */
	--tg-pink:        #c23f63;
	--tg-pink-soft:   #f8d9df;

	/* アクセント：ビビッドなオレンジ（ボタン）。白文字とのコントラスト比 5.18 を確保 */
	--tg-accent:      #c2410c;
	--tg-accent-dark: #9a330a;

	/* 背景・文字・罫線 */
	--tg-bg:          #ffffff;
	--tg-bg-alt:      #fff4ef;
	--tg-bg-main:     linear-gradient(135deg, #c2410c 0%, #c23f63 100%);
	--tg-text:        #3a2a24;
	--tg-text-muted:  #6e5a52;
	--tg-text-invert: #ffffff;
	--tg-border:      #f2ddd3;
	--tg-border-dark: #e3c3b4;

	/* レイアウト */
	--tg-container:   1120px;
	--tg-narrow:      840px;
	--tg-radius:      6px;

	/* フォント（暖色に合わせ、見出しも丸みのあるゴシックで統一する） */
	--tg-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
	--tg-font-serif: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* ---- 2. リセット・ベース ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--tg-font);
	font-size: 16px;
	line-height: 1.9;
	color: var(--tg-text);
	background: var(--tg-bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--tg-main); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--tg-accent); }
h1, h2, h3, h4 { line-height: 1.5; margin: 0; font-weight: 700; }
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

/* 本文へスキップ（キーボード操作時のみ表示） */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	padding: 10px 16px; background: var(--tg-main); color: var(--tg-text-invert);
}
.skip-link:focus { left: 0; }

/* ---- 3. 共通レイアウト ---- */
.container {
	width: min(100% - 48px, var(--tg-container));
	margin-inline: auto;
}
.container--narrow { width: min(100% - 48px, var(--tg-narrow)); }

.section { padding: 84px 0; }
.section--alt { background: var(--tg-bg-alt); }

.section__head { text-align: center; margin-bottom: 48px; }
.section__title {
	font-size: 28px; letter-spacing: .08em; color: var(--tg-main);
	font-family: var(--tg-font-serif);
}
.section__title::after {
	content: ""; display: block; width: 40px; height: 2px;
	background: var(--tg-pink); margin: 16px auto 0; border-radius: 2px;
}
.section__sub { margin-top: 14px; font-size: 15px; color: var(--tg-text-muted); }

.sub-title {
	font-size: 21px; color: var(--tg-main); margin: 0 0 20px;
	padding-left: 14px; border-left: 4px solid var(--tg-accent);
	font-family: var(--tg-font-serif);
}

.lead-text {
	text-align: center; font-size: 16.5px; line-height: 2.1;
	color: var(--tg-text-muted); margin-bottom: 56px;
}
/* リード文の出し分け（既定はPC用を表示し、SP用は隠す） */
.lead-text--sp { display: none; }

/* ---- 4. ボタン・リンク ---- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 12px 34px;
	font-size: 15.5px; font-weight: 700; text-decoration: none;
	border-radius: var(--tg-radius); border: 1px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn--accent { background: var(--tg-accent); color: var(--tg-text-invert); }
.btn--accent:hover { background: var(--tg-accent-dark); color: var(--tg-text-invert); }
.btn--outline { background: transparent; color: var(--tg-main); border-color: var(--tg-border-dark); }
.btn--outline:hover { background: var(--tg-main); color: var(--tg-text-invert); border-color: var(--tg-main); }
.btn--lg { min-height: 60px; padding: 14px 48px; font-size: 16.5px; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 700; color: var(--tg-main);
	text-decoration: none; border-bottom: 1px solid var(--tg-border-dark);
	padding-bottom: 4px;
}
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover { color: var(--tg-accent); border-color: var(--tg-accent); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---- 5. ヘッダー ---- */
.header {
	position: sticky; top: 0; z-index: 50;
	background: var(--tg-bg); border-bottom: 1px solid var(--tg-border);
}
.header__inner {
	width: min(100% - 40px, 1280px); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; min-height: 84px;
}
.header__logo { text-decoration: none; display: block; line-height: 1.4; }
.header__logo-role { font-size: 12px; color: var(--tg-text-muted); letter-spacing: .12em; }
.header__logo-name {
	display: block; font-size: 21px; font-weight: 700; color: var(--tg-main);
	font-family: var(--tg-font-serif); letter-spacing: .04em;
}
.header__logo-office { display: block; font-size: 11.5px; color: var(--tg-text-muted); }

.header__body { display: flex; align-items: center; gap: 28px; }
.gnav__list { display: flex; gap: 26px; }
.gnav__list a {
	font-size: 15px; font-weight: 700; color: var(--tg-text);
	text-decoration: none; padding: 6px 0; display: block;
	border-bottom: 2px solid transparent;
}
.gnav__list a:hover,
.gnav__list .current-menu-item a { color: var(--tg-main); border-color: var(--tg-accent); }

.header__contact { display: flex; align-items: center; gap: 16px; }
.header__tel { text-decoration: none; line-height: 1.3; text-align: right; display: block; }
.header__tel-num {
	display: block; font-size: 21px; font-weight: 700; color: var(--tg-main);
	letter-spacing: .02em;
}
.header__tel-note { display: block; font-size: 11.5px; color: var(--tg-text-muted); }
.header__cta { min-height: 46px; padding: 10px 22px; font-size: 14.5px; }

.header__toggle { display: none; }

/* ---- 6. メインビジュアル（aoki-law を参考にしたファーストビュー） ----
   背景・波型装飾・写真のアーチ切り抜きはすべてCSSで生成している（デザイン画像は使わない） */
.mv {
	position: relative;
	background: linear-gradient(158deg, #ffffff 0%, #fff5ef 48%, #ffe8e3 100%);
	color: var(--tg-text);
	overflow: hidden;
}
/* 斜めの細い罫線（ごく薄く敷いて紙面の質感を出す） */
.mv::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: repeating-linear-gradient(
		115deg, rgba(154,61,18,.035) 0 1px, transparent 1px 96px
	);
}
/* 左下に置く大きな波（淡いネイビーの楕円を2枚重ねて緩やかな曲線をつくる） */
.mv::after {
	content: ""; position: absolute; z-index: 0;
	left: -18%; bottom: -46%;
	width: 86%; height: 78%;
	border-radius: 50%;
	background: rgba(154, 61, 18, .055);
}

.mv__inner {
	/* ★position: relative を付けないこと。付けると内側の .mv__photo の絶対配置の基準が
	   画面幅ではなくこのコンテナ幅（1120px）になり、写真の右側に隙間ができる */
	width: min(100% - 48px, var(--tg-container));
	margin-inline: auto; padding: 76px 0 84px;
}
/* テキストは写真より前面に出す（.mv__inner ではなく各ブロックに指定する） */
.mv__head, .mv__text { position: relative; z-index: 2; }
/* ★テキストの幅は max-width で指定する（padding-rightの％は画面幅基準で効きすぎるため使わない） */
.mv--has-photo .mv__head,
.mv--has-photo .mv__text { max-width: 580px; }

/* バッジ：立地という事実のみを置く（料金の話は入れない） */
.mv__badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 20px 9px 16px; margin-bottom: 26px;
	border: 1px solid rgba(154,61,18,.45); border-radius: 999px;
	font-size: 14px; font-weight: 700; letter-spacing: .04em;
	color: var(--tg-main); background: rgba(255,255,255,.7);
}
.mv__badge-icon { width: 17px; height: 17px; fill: var(--tg-accent); flex-shrink: 0; }

.mv__title {
	font-family: var(--tg-font-serif);
	font-size: 53px; line-height: 1.46; letter-spacing: .035em;
	color: var(--tg-main); margin-bottom: 26px;
}
/* キャッチの一文字だけアクセント色にする（aoki-law の「話」と同じ手法） */
.mv__accent { color: var(--tg-pink); }

/* 区切り線：中央に小さな菱形を置く */
.mv__divider {
	position: relative; max-width: 380px; height: 1px;
	background: linear-gradient(to right, rgba(154,61,18,.28), rgba(154,61,18,.06));
	margin: 0 0 26px;
}
.mv__divider-mark {
	position: absolute; left: 44%; top: 50%;
	width: 7px; height: 7px; margin-top: -3.5px;
	background: var(--tg-pink); transform: rotate(45deg);
}

.mv__lead { font-size: 16.5px; line-height: 2.05; color: var(--tg-text-muted); margin-bottom: 18px; }
.mv__name { font-size: 18px; font-weight: 700; color: var(--tg-main); margin-bottom: 32px; }
.mv__bar { font-size: 13px; font-weight: 400; color: var(--tg-text-muted); }

/* CTAボタン：大きく、影を付けて押せることを明示する */
.mv__cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 16px;
	min-width: 360px; min-height: 70px; padding: 16px 44px;
	margin-bottom: 30px;
	font-family: var(--tg-font-serif);
	font-size: 22px; font-weight: 700; letter-spacing: .06em;
	color: var(--tg-text-invert); text-decoration: none;
	background: linear-gradient(180deg, #d4561f 0%, var(--tg-accent) 100%);
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba(194, 63, 99, .26);
	transition: background .2s, box-shadow .2s, transform .2s;
}
.mv__cta:hover {
	background: var(--tg-accent-dark); color: var(--tg-text-invert);
	box-shadow: 0 10px 22px rgba(194, 63, 99, .34);
	transform: translateY(-1px);
}
.mv__cta-arrow { font-size: 26px; line-height: 1; }

/* 電話番号：特大＋アイコン */
.mv__tel-line { margin: 0 0 8px; }
.mv__tel-line a {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 40px; font-weight: 700; letter-spacing: .02em;
	color: var(--tg-main); text-decoration: none; line-height: 1.2;
}
.mv__tel-line a:hover { color: var(--tg-accent); }
.mv__tel-icon { width: 30px; height: 30px; fill: var(--tg-accent); flex-shrink: 0; }

.mv__hours {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 14.5px; line-height: 1.7; color: var(--tg-text-muted); margin: 0;
}
/* 2行に折り返したときもアイコンが1行目の高さに揃うようにする */
.mv__hours-icon { width: 16px; height: 16px; margin-top: 4px; fill: var(--tg-text-muted); flex-shrink: 0; }

/* 写真：右側にアーチ状（左辺が弧）で切り抜いて配置する */
.mv__photo {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: 46%; z-index: 1;
	pointer-events: none;
	clip-path: ellipse(94% 100% at 100% 50%); /* 左辺だけを弧にし、右端は画面端まで埋める */
}
.mv__photo img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 16%;
}

/* ---- 7. 3つの特徴 ---- */
.features__list {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.features__item {
	background: var(--tg-bg); border: 1px solid var(--tg-border);
	padding: 34px 28px; border-top: 3px solid var(--tg-accent); border-radius: 0 0 var(--tg-radius) var(--tg-radius);
}
.features__label {
	font-size: 12px; letter-spacing: .14em; color: var(--tg-pink);
	font-weight: 700; margin-bottom: 10px;
}
.features__title { font-size: 19px; color: var(--tg-main); margin-bottom: 14px; }
.features__body { font-size: 14.5px; line-height: 1.95; color: var(--tg-text-muted); }

/* ---- 8. 2カラム（取扱分野） ---- */
.s2col {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 56px; align-items: center;
	padding: 52px 0; border-bottom: 1px solid var(--tg-border);
}
.s2col:last-of-type { border-bottom: none; }
.s2col--reverse .s2col__text { order: 2; }
.s2col--reverse .s2col__img { order: 1; }
/* 写真が未受領の分野は1カラムで表示する（空枠を出さない） */
.s2col--noimg { grid-template-columns: 1fr; gap: 0; }

.s2col__no {
	font-size: 13px; font-weight: 700; letter-spacing: .12em;
	color: var(--tg-pink); margin-bottom: 8px;
}
.s2col__title {
	font-size: 25px; color: var(--tg-main); margin-bottom: 14px;
	font-family: var(--tg-font-serif);
}
/* 分野名の下に出す括弧書き（例：不動産関係、交通事故 など） */
.s2col__sub { font-size: 13.5px; color: var(--tg-text-muted); margin: -8px 0 14px; letter-spacing: .02em; }
.s2col__lead { font-size: 16px; font-weight: 700; color: var(--tg-pink); margin-bottom: 14px; }
.s2col__body { font-size: 15px; line-height: 2.05; color: var(--tg-text-muted); margin-bottom: 22px; }
/* 本文の出し分け（既定はPC用を表示し、SP用は隠す） */
.s2col__body--sp { display: none; }
.s2col__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* フリー素材を使っている箇所に必ず添える注記（実在の事務所・依頼者の写真ではないため） */
.s2col__note { font-size: 11.5px; color: var(--tg-text-muted); margin: 6px 0 0; text-align: right; }

.s2col__items { margin-bottom: 22px; }
.s2col__items-title {
	font-size: 13px; font-weight: 700; color: var(--tg-text);
	margin-bottom: 10px;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li {
	font-size: 13.5px; padding: 6px 14px;
	background: var(--tg-bg-alt); border: 1px solid var(--tg-border);
	color: var(--tg-text-muted);
}
.section--alt .tag-list li { background: var(--tg-bg); }
.tag-list--lg li { font-size: 14.5px; padding: 8px 18px; }
.tag-list a { text-decoration: none; color: var(--tg-main); }

.services-top__more { text-align: center; margin-top: 48px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
/* 料金ページ下部の「取扱分野を見る」 */
.fee-page__more { text-align: center; margin-top: 40px; }

/* その他の取扱分野：トップページ用（項目名だけをシンプルに並べる） */
.other-simple {
	margin-top: 52px; padding: 34px 40px;
	background: var(--tg-bg); border: 1px solid var(--tg-border);
}
.section--alt .other-simple { background: var(--tg-bg); }
.other-simple__title {
	font-size: 15px; font-weight: 700; color: var(--tg-main);
	margin-bottom: 18px; text-align: center;
}
.other-simple__list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.other-simple__list li {
	font-size: 14.5px; color: var(--tg-text); padding: 8px 18px;
	background: var(--tg-bg-alt); border: 1px solid var(--tg-border);
}

/* その他の取扱分野：取扱分野ページ用（項目名＋説明文を文章で並べる） */
.other-detail { margin-top: 72px; padding-top: 8px; }
.other-detail__note { font-size: 15px; color: var(--tg-text-muted); margin-bottom: 30px; }
.other-detail__item {
	padding: 22px 0 24px; border-bottom: 1px solid var(--tg-border);
}
.other-detail__item:first-of-type { border-top: 1px solid var(--tg-border); }
.other-detail__name {
	font-size: 18px; color: var(--tg-main); margin-bottom: 10px;
	padding-left: 15px; position: relative;
	font-family: var(--tg-font-serif);
}
.other-detail__name::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 6px; height: 6px; background: var(--tg-accent); transform: rotate(45deg);
}
.other-detail__desc {
	font-size: 15px; line-height: 2.0; color: var(--tg-text-muted);
	margin: 0; padding-left: 15px;
}

/* ---- 9. 弁護士紹介 ---- */
.profile-top__body { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.profile-top__body--noimg { grid-template-columns: 1fr; }
.profile-top__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.profile-top__name {
	font-size: 25px; font-weight: 700; color: var(--tg-main);
	font-family: var(--tg-font-serif); margin-bottom: 6px;
}
.profile-top__kana { font-size: 13px; font-weight: 400; color: var(--tg-text-muted); margin-left: 10px; }
.profile-top__meta {
	font-size: 14px; color: var(--tg-text-muted);
	padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--tg-border);
}
.profile-top__p { font-size: 15px; line-height: 2.05; color: var(--tg-text-muted); margin-bottom: 1.2em; }

.profile__head { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; margin-bottom: 44px; }
.profile__head--noimg { grid-template-columns: 1fr; }
.profile__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.profile__role { font-size: 13px; letter-spacing: .14em; color: var(--tg-accent); font-weight: 700; margin-bottom: 8px; }
.profile__name { font-size: 32px; color: var(--tg-main); font-family: var(--tg-font-serif); margin-bottom: 14px; }
.profile__kana { font-size: 14px; font-weight: 400; color: var(--tg-text-muted); margin-left: 12px; }
.profile__meta { font-size: 14.5px; color: var(--tg-text-muted); }
.profile__text { font-size: 15.5px; line-height: 2.1; color: var(--tg-text-muted); margin-bottom: 52px; }
.profile__career { margin-bottom: 48px; }

/* 定義テーブル */
.def-table { border-top: 1px solid var(--tg-border); }
.def-table__row {
	display: grid; grid-template-columns: 160px 1fr;
	border-bottom: 1px solid var(--tg-border);
}
.def-table dt {
	padding: 18px 20px; font-weight: 700; font-size: 14.5px;
	background: var(--tg-bg-alt); color: var(--tg-main);
}
.def-table dd { padding: 18px 20px; font-size: 15px; line-height: 1.9; }

/* ---- 10. 事務所情報 ---- */
.office__box {
	background: var(--tg-bg); border: 1px solid var(--tg-border);
	padding: 8px 32px; margin-bottom: 32px;
}
.office__row {
	display: grid; grid-template-columns: 150px 1fr;
	padding: 18px 0; border-bottom: 1px solid var(--tg-border);
}
.office__row:last-child { border-bottom: none; }
.office__dl dt { font-weight: 700; font-size: 14.5px; color: var(--tg-main); }
.office__dl dd { font-size: 15px; line-height: 1.9; }
.office__tel { font-size: 20px; font-weight: 700; text-decoration: none; letter-spacing: .02em; }

.office__media { display: grid; grid-template-columns: 1fr auto; gap: 24px; } /* 写真は縦長のまま必要な幅だけ取り、残りを地図に充てる */
/* 建物写真が未受領の場合は地図を全幅にする */
.office__media--single { grid-template-columns: 1fr; }
/* 地図と写真の高さ。変えるときは office-info.php の iframe の height 属性も必ず合わせること */
.office__map iframe { display: block; width: 100%; height: 500px; border: 1px solid var(--tg-border); }
/* ★外観写真は縦長（7:12）。切り抜かずに全体を見せるため、高さを地図に合わせ幅は比率なりにする */
.office__photo img { display: block; width: auto; max-width: none; height: 500px; }
.office__note { font-size: 11.5px; color: var(--tg-text-muted); margin: 6px 0 0; text-align: right; }


/* ---- 11. CTA ---- */
.cta { background: var(--tg-bg-main); color: var(--tg-text-invert); padding: 72px 0; }
.cta__inner { width: min(100% - 48px, var(--tg-narrow)); margin-inline: auto; text-align: center; }
.cta__lead {
	font-size: 27px; font-family: var(--tg-font-serif);
	letter-spacing: .06em; margin-bottom: 16px;
}
.cta__text { font-size: 15px; line-height: 2; opacity: .9; margin-bottom: 38px; }

.cta__actions {
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
	align-items: center;
}
.cta__tel-box { border-right: 1px solid rgba(255,255,255,.2); }
.cta__tel { text-decoration: none; color: var(--tg-text-invert); display: block; }
.cta__tel-label { display: block; font-size: 12.5px; letter-spacing: .1em; opacity: .85; margin-bottom: 4px; }
.cta__tel-num { display: block; font-size: 32px; font-weight: 700; letter-spacing: .02em; }
.cta__tel-note { font-size: 12.5px; line-height: 1.8; opacity: .8; margin-top: 8px; }
.cta__form-note { font-size: 12.5px; opacity: .8; margin-top: 12px; }
/* CTAの背景がオレンジ〜ピンクのグラデーションのため、ボタンは白地にして埋もれないようにする */
.cta .btn--accent { background: var(--tg-bg); color: var(--tg-accent); box-shadow: 0 6px 16px rgba(122, 47, 12, .25); }
.cta .btn--accent:hover { background: var(--tg-bg-alt); color: var(--tg-accent-dark); }

/* ---- 12. 下層ページ共通 ---- */
.page-hero { background: var(--tg-bg-alt); border-bottom: 1px solid var(--tg-border); }
.page-hero__inner {
	width: min(100% - 48px, var(--tg-container));
	margin-inline: auto; padding: 56px 0; text-align: center;
}
.page-hero__title {
	font-size: 32px; color: var(--tg-main); letter-spacing: .06em;
	font-family: var(--tg-font-serif);
}
.page-hero__sub { margin-top: 12px; font-size: 14.5px; color: var(--tg-text-muted); }

.breadcrumb { border-bottom: 1px solid var(--tg-border); }
.breadcrumb__inner {
	width: min(100% - 48px, var(--tg-container));
	margin-inline: auto; padding: 14px 0; font-size: 12.5px; color: var(--tg-text-muted);
}
.breadcrumb a { color: var(--tg-text-muted); }
.breadcrumb__sep { margin: 0 8px; }

.note-list li {
	font-size: 15px; line-height: 1.95; padding-left: 22px;
	position: relative; margin-bottom: 12px;
}
.note-list li::before {
	content: ""; position: absolute; left: 0; top: .8em;
	width: 10px; height: 1px; background: var(--tg-accent);
}
/* 事務所の様子（事務所概要ページ）。現状は会議室の1枚のみのため、横幅を抑えて中央に置く */
.office-gallery { margin-top: 56px; }
.office-gallery__list {
	list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
	display: grid; grid-template-columns: 1fr; gap: 24px;
}
.office-gallery__img { background: var(--tg-bg-alt); border: 1px solid var(--tg-border); }
.office-gallery__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.office-gallery__cap { margin: 8px 0 0; font-size: 13px; color: var(--tg-text-muted); text-align: center; }

.access-note { margin-top: 56px; }

/* ---- 13. お問い合わせ ---- */
.contact-tel {
	text-align: center; padding: 36px; margin-bottom: 56px;
	background: var(--tg-bg-alt); border: 1px solid var(--tg-border);
}
.contact-tel__label { font-size: 13px; letter-spacing: .1em; color: var(--tg-text-muted); margin-bottom: 8px; }
.contact-tel__num {
	font-size: 38px; font-weight: 700; color: var(--tg-main);
	text-decoration: none; letter-spacing: .02em; display: inline-block; line-height: 1.3;
}
.contact-tel__note { font-size: 13px; line-height: 1.9; color: var(--tg-text-muted); margin-top: 12px; }
.contact-form__note { font-size: 14px; color: var(--tg-text-muted); margin-bottom: 28px; }

/* Contact Form 7 */
.wpcf7 { margin-top: 8px; }
.wpcf7-form p { margin-bottom: 22px; }
.wpcf7-form label { display: block; font-weight: 700; font-size: 14.5px; 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 14px; font-size: 16px;
	font-family: var(--tg-font); color: var(--tg-text);
	border: 1px solid var(--tg-border-dark); border-radius: var(--tg-radius);
	background: var(--tg-bg);
}
.wpcf7-form textarea { min-height: 190px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
	outline: 2px solid var(--tg-pink); outline-offset: 1px; border-color: var(--tg-pink);
}
.wpcf7-form .required { color: var(--tg-accent); font-size: 12px; margin-left: 6px; }
.wpcf7-form input[type="submit"] {
	display: block; margin: 8px auto 0; min-width: 280px;
	padding: 16px 40px; font-size: 16.5px; font-weight: 700;
	color: var(--tg-text-invert); background: var(--tg-accent);
	border: none; border-radius: var(--tg-radius); cursor: pointer;
	font-family: var(--tg-font);
}
.wpcf7-form input[type="submit"]:hover { background: var(--tg-accent-dark); }
.wpcf7-not-valid-tip { color: var(--tg-accent-dark); font-size: 13.5px; }
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0; padding: 14px 18px; font-size: 14.5px;
	border-width: 1px; border-radius: var(--tg-radius);
}

/* ---- 14. 本文（固定ページ） ---- */
.entry { font-size: 15.5px; line-height: 2.05; }
.entry h2 {
	font-size: 21px; color: var(--tg-main); margin: 48px 0 18px;
	padding-left: 14px; border-left: 4px solid var(--tg-accent);
	font-family: var(--tg-font-serif);
}
.entry h3 { font-size: 18px; color: var(--tg-main); margin: 34px 0 14px; }
.entry ul, .entry ol { margin: 0 0 1.4em 1.6em; }
.entry ul li { list-style: disc; margin-bottom: 8px; }
.entry ol li { list-style: decimal; margin-bottom: 8px; }
.entry a { color: var(--tg-main); }

.post-list__item { border-bottom: 1px solid var(--tg-border); }
.post-list__item a { display: block; padding: 20px 0; text-decoration: none; }
.post-list__date { font-size: 13px; color: var(--tg-text-muted); margin-right: 20px; }
.post-list__title { font-weight: 700; }

/* ---- 15. フッター ---- */
.footer { background: var(--tg-bg-alt); border-top: 1px solid var(--tg-border); padding: 56px 0 0; }
.footer__inner {
	width: min(100% - 48px, var(--tg-container)); margin-inline: auto;
	display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 40px;
	padding-bottom: 44px;
}
.footer__name {
	font-size: 20px; font-weight: 700; color: var(--tg-main);
	font-family: var(--tg-font-serif); margin-bottom: 8px;
}
.footer__office, .footer__bar { font-size: 13.5px; color: var(--tg-text-muted); margin-bottom: 4px; }

.footer__dl { display: grid; grid-template-columns: 82px 1fr; gap: 8px 12px; font-size: 13.5px; }
.footer__dl dt { font-weight: 700; color: var(--tg-main); }
.footer__dl dd { color: var(--tg-text-muted); line-height: 1.8; }
.footer__dl a { color: var(--tg-text-muted); text-decoration: none; }

.footer__list { display: flex; flex-direction: column; gap: 12px; }
.footer__list a { font-size: 14px; color: var(--tg-text); text-decoration: none; }
.footer__list a:hover { color: var(--tg-accent); }

.footer__copy {
	text-align: center; font-size: 12px; color: var(--tg-text-muted);
	padding: 18px 0; margin: 0; border-top: 1px solid var(--tg-border);
}

/* ---- 16. 料金 ---- */
.fee { border-top: 2px solid var(--tg-main); margin-top: 8px; }
.fee__row {
	display: grid; grid-template-columns: 220px 1fr;
	gap: 8px 28px; align-items: baseline;
	padding: 26px 4px; border-bottom: 1px solid var(--tg-border);
}
.fee__label {
	font-weight: 700; font-size: 16px; color: var(--tg-main);
	letter-spacing: .04em;
}
.fee__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fee__amount { font-size: 28px; font-weight: 700; color: var(--tg-accent); letter-spacing: .02em; }
.fee__unit { font-size: 13.5px; color: var(--tg-text-muted); }
/* 説明文は金額の列に揃える（ラベル列はまたがない） */
.fee__desc {
	grid-column: 2; margin: 0;
	font-size: 14px; line-height: 1.9; color: var(--tg-text-muted);
}
.fee__note {
	margin-top: 18px; font-size: 13.5px; line-height: 1.9;
	color: var(--tg-text-muted);
}


/* CTA内の料金ページへの導線 */
.cta__fee-note { margin-top: 10px; font-size: 12.5px; }
.cta__fee-note a { color: var(--tg-text-invert); opacity: .9; }
.cta__fee-note a:hover { opacity: 1; }

/* ---- 17. 弁護士に依頼するメリット（取扱分野ページ） ---- */
.merits { margin-top: 72px; }
.merits__list {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	margin: 0; padding: 0;
}
.merits__item {
	list-style: none; background: var(--tg-bg-alt);
	border-radius: var(--tg-radius); padding: 30px 26px;
}
.merits__no { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--tg-pink); margin-bottom: 6px; }
.merits__title { font-size: 18px; color: var(--tg-main); margin-bottom: 12px; font-family: var(--tg-font-serif); }
.merits__body { font-size: 14.5px; line-height: 1.95; color: var(--tg-text-muted); }

/* ---- 18. 弁護士費用（取扱分野ページの #fee） ---- */
.fee-section { margin-top: 72px; scroll-margin-top: 100px; }
/* 料金ページでは先頭のセクションなので上の余白を付けない（取扱分野ページ用の余白が残って間延びするため） */
.fee-section.fee-section--page { margin-top: 0; }
.fee-consult {
	display: grid; grid-template-columns: 180px auto 1fr; gap: 8px 24px; align-items: center;
	padding: 22px 26px; margin-bottom: 24px;
	background: var(--tg-bg-alt); border-radius: var(--tg-radius);
}
.fee-consult__label { margin: 0; font-weight: 700; color: var(--tg-main); }
.fee-consult__price { margin: 0; font-size: 26px; font-weight: 700; color: var(--tg-accent); letter-spacing: .02em; }
.fee-consult__desc { margin: 0; font-size: 14px; line-height: 1.8; color: var(--tg-text-muted); }

.fee-table-wrap { overflow-x: auto; }
.fee-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fee-table th, .fee-table td { padding: 18px 20px; border: 1px solid var(--tg-border); line-height: 1.8; text-align: left; vertical-align: top; }
.fee-table thead th { background: var(--tg-main); color: var(--tg-text-invert); font-size: 15px; }
.fee-table tbody th { width: 140px; background: var(--tg-bg-alt); color: var(--tg-main); white-space: nowrap; }
.fee-table td { font-weight: 700; color: var(--tg-text); }

.fee-guarantee {
	margin: 24px 0 0; padding: 18px 22px;
	border: 2px solid var(--tg-pink-soft); border-radius: var(--tg-radius);
	font-size: 15px; line-height: 1.85;
}
.fee-guarantee__label {
	display: inline-block; margin-right: 10px; padding: 2px 12px;
	background: var(--tg-pink); color: var(--tg-text-invert);
	border-radius: 999px; font-size: 13px; font-weight: 700;
}

/* 見た目は隠し、読み上げソフトには届けるテキスト（display:none は使わない） */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 19. 表示切替ユーティリティ ---- */
.sp-only { display: none; }

/* ============================================================
 * レスポンシブ：タブレット（1024px以下）
 * ============================================================ */
@media screen and (max-width: 1024px) {
	.header__inner { min-height: 72px; }
	.header__body { gap: 18px; }
	.gnav__list { gap: 18px; }
	.gnav__list a { font-size: 14px; }
	.header__tel-num { font-size: 18px; }
	.header__cta { padding: 10px 16px; font-size: 13.5px; }

	.mv__title { font-size: 40px; }
	.mv__inner { padding: 60px 0 68px; }
	.mv--has-photo .mv__head,
	.mv--has-photo .mv__text { max-width: 470px; }
	.mv__photo { width: 42%; clip-path: ellipse(94% 100% at 100% 50%); }
	.mv__cta { min-width: 320px; min-height: 64px; font-size: 20px; }
	.mv__tel-line a { font-size: 34px; }

	.section { padding: 68px 0; }
	.features__list { grid-template-columns: 1fr; gap: 20px; }
	.s2col { gap: 36px; padding: 40px 0; }
	.profile-top__body { grid-template-columns: 260px 1fr; gap: 32px; }
	.profile__head { grid-template-columns: 220px 1fr; gap: 32px; }
	.other-simple { padding: 28px 24px; }
	.footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================
 * レスポンシブ：スマートフォン（767px以下）
 * ============================================================ */
@media screen and (max-width: 767px) {
	body { font-size: 15px; }
	.sp-only { display: inline; }

	.container, .container--narrow { width: calc(100% - 32px); }

	/* ヘッダー：ハンバーガーメニュー */
	.header__inner { min-height: 64px; flex-wrap: wrap; gap: 0; }
	.header__logo-name { font-size: 18px; }
	.header__toggle {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 5px; width: 52px; height: 52px; padding: 0;
		background: transparent; border: none; cursor: pointer; color: var(--tg-main);
	}
	.header__toggle-bar,
	.header__toggle-bar::before,
	.header__toggle-bar::after {
		display: block; width: 24px; height: 2px; background: var(--tg-main);
		transition: transform .2s, opacity .2s;
	}
	.header__toggle-bar { position: relative; }
	.header__toggle-bar::before { content: ""; position: absolute; top: -7px; left: 0; }
	.header__toggle-bar::after { content: ""; position: absolute; top: 7px; left: 0; }
	.header__toggle[aria-expanded="true"] .header__toggle-bar { background: transparent; }
	.header__toggle[aria-expanded="true"] .header__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
	.header__toggle[aria-expanded="true"] .header__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }
	.header__toggle-text { font-size: 9.5px; letter-spacing: .06em; }

	.header__body {
		display: none; width: 100%; flex-direction: column;
		align-items: stretch; gap: 0; padding-bottom: 20px;
		border-top: 1px solid var(--tg-border);
	}
	.header__body.is-open { display: flex; }
	.gnav__list { flex-direction: column; gap: 0; }
	.gnav__list a { padding: 15px 4px; border-bottom: 1px solid var(--tg-border); border-left: 3px solid transparent; }
	.gnav__list a:hover, .gnav__list .current-menu-item a { border-bottom-color: var(--tg-border); border-left-color: var(--tg-accent); }
	.header__contact { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
	.header__tel { text-align: center; }
	.header__tel-num { font-size: 24px; }
	.header__cta { width: 100%; }

	/* MV：aoki-law と同じく「キャッチ → 写真 → 文章」の順に積み上げる */
	.mv__inner { padding: 36px 0 44px; }
	.mv--has-photo .mv__head,
	.mv--has-photo .mv__text { max-width: none; }

	.mv__badge { font-size: 12.5px; padding: 8px 16px 8px 13px; margin-bottom: 18px; }
	.mv__title { font-size: 29px; line-height: 1.58; margin-bottom: 22px; }

	/* 写真は本文の流れに戻し、横長に切り出して挟み込む */
	/* ---- SPの写真：縦長の枠にして上半身まで見せ、装飾を添える ---- */
	/* 位置の基準をつくる（背後の円・下の菱形をこの中に配置する） */
	.mv--has-photo .mv__inner { position: relative; }
	.mv__photo {
		position: relative; z-index: 1;
		/* ★2026-10-06 岡本様のご指示：元写真（640×480）の横長4:3のまま切り抜かずに見せる。横長で低くなる分、幅を広げる */
		width: 100%; max-width: 480px; height: auto;
		aspect-ratio: 4 / 3;
		margin: 0 auto 44px; overflow: hidden;
		clip-path: none;
		/* 控えめの角丸（取扱分野の写真・弁護士紹介ページの写真と同じ扱いに揃える） */
		border-radius: 8px;
		box-shadow: 0 10px 26px rgba(154, 61, 18, .13);
	}
	.mv__photo img { object-position: center; }  /* 枠と元写真が同じ4:3のため切り抜きは発生しない */

	/* 写真の背後に置く淡いネイビーの円（左上と右下にはみ出させて奥行きを出す） */
	.mv__photo::before,
	.mv__photo::after { content: none; }           /* 写真自身には付けない（overflow:hiddenで切れるため） */
	.mv--has-photo .mv__inner::before {
		content: ""; position: absolute; z-index: 0;
		top: 148px; left: 2%;
		width: 108px; height: 108px; border-radius: 50%;
		background: rgba(154, 61, 18, .07);
	}
	.mv--has-photo .mv__inner::after {
		content: ""; position: absolute; z-index: 0;
		top: 430px; right: 4%;
		width: 86px; height: 86px; border-radius: 50%;
		background: rgba(194, 63, 99, .10);
	}

	/* 写真の下に置く菱形のアクセント（MVの区切り線と同じモチーフ） */
	.mv__photo + .mv__text { position: relative; }
	.mv__photo + .mv__text::before {
		content: ""; position: absolute; top: -28px; left: 50%;
		width: 9px; height: 9px; margin-left: -4.5px;
		background: var(--tg-accent); transform: rotate(45deg);
	}

	.mv__divider { display: none; } /* 写真下の菱形が区切りの役目を果たすため、SPでは線を出さない */
	.mv__lead { font-size: 15px; line-height: 1.95; }
	.mv__name { font-size: 16px; margin-bottom: 24px; }
	.mv__bar { display: block; margin-top: 2px; }

	.mv__cta { width: 100%; min-width: 0; min-height: 62px; font-size: 19px; padding: 14px 20px; margin-bottom: 24px; }
	.mv__tel-line a { font-size: 30px; gap: 9px; }
	.mv__tel-icon { width: 24px; height: 24px; }
	.mv__hours { font-size: 13px; }

	/* セクション共通 */
	.section { padding: 52px 0; }
	.section__head { margin-bottom: 32px; }
	.section__title { font-size: 23px; }
	.lead-text { font-size: 15px; line-height: 1.95; text-align: left; margin-bottom: 36px; }
	.lead-text br { display: none; }
	/* リード文をSP用の短縮版に切り替える */
	.lead-text--pc { display: none; }
	.lead-text--sp { display: block; }
	/* SP用リード文は文の区切りで改行させる（.lead-text br の一括非表示を打ち消す） */
	.lead-text--sp br { display: inline; }

	/* ---- セクションの並び替え：取扱分野 → ご相談にあたって の順にする ---- */
	/* ★トップページ限定（body.home）。他ページの .main には影響させない */
	.home .main { display: flex; flex-direction: column; }
	.home .mv           { order: 1; }
	.home .services-top { order: 2; }
	.home .profile-top  { order: 3; }
	.home .features     { order: 4; }
	.home .office-top   { order: 5; }
	.home .cta          { order: 6; }
	/* 並び替えに合わせて背景色も入れ替える（白→薄色→白→薄色の交互を保つため）
	   SPの並び：取扱分野(白) → 弁護士紹介(薄) → ご相談にあたって(白) → 事務所案内(薄) → CTA(紺) */
	.home .services-top { background: var(--tg-bg); }
	.home .services-top .other-simple { background: var(--tg-bg-alt); }
	.home .profile-top  { background: var(--tg-bg-alt); }
	.home .features     { background: var(--tg-bg); }
	.home .features .features__item   { background: var(--tg-bg-alt); }

	/* 本文をSP用の短縮版に切り替える */
	.s2col__body--pc { display: none; }
	.s2col__body--sp { display: block; }

	/* 2カラム → 1カラム */
	.s2col { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; }
	.s2col--reverse .s2col__text { order: 0; }
	.s2col--reverse .s2col__img { order: 0; }
	.s2col__title { font-size: 21px; }
	.s2col__lead { font-size: 15px; }
	.s2col__body { font-size: 14.5px; }

	.other-simple { padding: 22px 16px; margin-top: 40px; }
	.other-simple__list { justify-content: flex-start; gap: 8px; }
	.other-simple__list li { font-size: 13.5px; padding: 7px 13px; }
	.other-detail { margin-top: 52px; }
	.other-detail__name { font-size: 16.5px; }
	.other-detail__desc { font-size: 14.5px; line-height: 1.95; }

	/* 弁護士紹介 */
	.profile-top__body, .profile__head { grid-template-columns: 1fr; gap: 24px; }
	.profile-top__img, .profile__img { max-width: 260px; margin-inline: auto; }
	/* ★スマホのトップだけ、弁護士の写真を少し横長（5:4）にする（2026-10-06 岡本様のご指示。元写真は4:3のため顔は切れない） */
	.profile-top__img { max-width: 320px; }
	.profile-top__img img { aspect-ratio: 5 / 4; }
	.profile__name { font-size: 26px; }
	.profile-top__name { font-size: 21px; }
	.profile-top__kana, .profile__kana { display: block; margin-left: 0; margin-top: 4px; }

	/* テーブル類 */
	.def-table__row, .office__row { grid-template-columns: 1fr; }
	.def-table dt { padding: 12px 14px; }
	.def-table dd { padding: 14px; }
	.office__box { padding: 4px 18px; }
	.office__row { padding: 14px 0; gap: 6px; }
	/* スマホは1列。地図は低く、写真は幅に応じた高さ（11:10）にして縦に伸びすぎないようにする */
	.office__media { grid-template-columns: 1fr; }
	.office__map iframe { height: 300px; }
	/* スマホは切り抜かず縦長のまま。縦に伸びすぎないよう幅を抑えて中央に置く */
	.office__photo img { width: 100%; max-width: 300px; height: auto; margin-inline: auto; }

	/* CTA */
	.cta { padding: 52px 0; }
	.cta__lead { font-size: 18px; letter-spacing: .03em; white-space: nowrap; } /* 狭い画面でも1行に収める */
	.cta__actions { grid-template-columns: 1fr; gap: 28px; }
	.cta__tel-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 26px; }
	.cta__tel-num { font-size: 28px; }
	.cta__form-box .btn { width: 100%; }

	/* 下層ページ */
	.page-hero__inner { padding: 36px 0; }
	.page-hero__title { font-size: 24px; }
	.breadcrumb__inner { padding: 12px 0; font-size: 11.5px; }

	/* お問い合わせ */
	.contact-tel { padding: 26px 18px; }
	.contact-tel__num { font-size: 30px; }
	.wpcf7-form input[type="submit"] { min-width: 100%; }

	/* 料金（2026-10-05） */
	.fee__row { grid-template-columns: 1fr; gap: 6px; padding: 22px 2px; }
	.fee__amount { font-size: 24px; }
	.fee__desc { grid-column: 1; }


	/* フッター */
	.footer { padding-top: 40px; }
	.footer__inner { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
}

/* ============================================================
 * スマートフォン（767px以下）：メリット・料金表
 * ============================================================ */
@media screen and (max-width: 1024px) {
	.merits__list { grid-template-columns: 1fr; gap: 16px; }
}
@media screen and (max-width: 767px) {
	.merits, .fee-section { margin-top: 52px; }
	.merits__item { padding: 22px 18px; }
	.fee-consult { grid-template-columns: 1fr; padding: 18px; gap: 4px; }
	.fee-consult__price { font-size: 22px; }

	/* 料金表は横スクロールさせず、行ごとのカードに積み替える（列名は data-label で表示する） */
	.fee-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.fee-table, .fee-table tbody, .fee-table tr, .fee-table th, .fee-table td { display: block; width: 100%; }
	.fee-table tr { margin-bottom: 16px; border: 1px solid var(--tg-border); border-radius: var(--tg-radius); overflow: hidden; }
	.fee-table th, .fee-table td { border: none; }
	.fee-table tbody th { width: 100%; background: var(--tg-main); color: var(--tg-text-invert); padding: 10px 14px; }
	.fee-table td { padding: 12px 14px; border-top: 1px solid var(--tg-border); font-size: 14.5px; }
	.fee-table td::before {
		content: attr(data-label); display: block;
		font-size: 12px; font-weight: 700; color: var(--tg-pink); margin-bottom: 2px;
	}
	.fee-guarantee { font-size: 14px; padding: 14px 16px; }
	.fee-guarantee__label { display: table; margin: 0 0 8px; }
}