/* ================================================================
* houmukyoku.nodokaya.jp — 全国法務局 管轄ガイド
* 「墨と金」テーマ
*
* 移植元 : PJ0011 pref.nodokaya.jp
* 05_scripts/templates/css/style.css（1,337 行 / 42,389 B / 2026-08-23）
* 仕様書 : PJ0017 02_work/block-c/DESIGN_PORT_SPEC.md（985 行）
* 移植日 : 2026-09-13
* 🔴 移植は一方向コピー。PJ0011 側は 1 バイトも書き換えていない。
*
* ---- ドナーから改名した点（親テンプレはこちらの名前で書く）----
* .tax-types-chips → .service-chips （税目 → 業務種別）
* .tax-types-chips li → .service-chip （li 直指定をやめ、色クラスが付く独立クラスに）
* .tax-types-block → .service-block
* .tax-types-label → .service-label
* .tax-types-scope → .service-scope
* ※ 改名はこの 1 系統のみ。他はドナーのクラス名を逐語で踏襲する。
*
* ---- ドナーから落としたもの ----
* .mailing-address / .kaijo-meta / .office-card(s) / .byline
* … いずれも njk 参照 0（退役 include 由来）
* .support-section / .affiliate-card 一式 / .affiliate-disclosure
* … アフィリエイト 4 商材は PJ0017 非搭載（ユーザー方針）。
* sticky CTA は「クラスだけ」残す（行き先は親が決める）。
*
* ---- PJ0017 で新設したもの（§P）----
* 業務種別 12 色トークンと --svc 受け渡し機構 / .office-group /
* .office-type-badge（拠点種別 6 値）/ .note-card / .official-link /
* .areas-by-gun（郡→町村）/ .status-badge / .service-scope の level 変種
*
* ---- 親への申し送り ----
* 1. （style.css ではない）
* 2. .eleventy.js に fonts の passthrough が要る：
* eleventyConfig.addPassthroughCopy({ "../01_input/fonts": "fonts" });
* 3. は墨 #1A1614。
* ドナーの #1b4d3a（緑・PJ0010 由来の残骸）は持ち込まないこと。
* 4. body::before の和紙ノイズが全面に敷かれる。新設ブロックには
* position + z-index:1 以上を必ず与える（でないと膜の下に潜る）。
* ============================================================ */
/* ---------- Fonts（自ホスト・外部読込なし／ドナー逐語） ---------- */
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/zen-maru-gothic-400.woff2) format('woff2');}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zen-maru-gothic-500.woff2) format('woff2');}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zen-maru-gothic-700.woff2) format('woff2');}
@font-face{font-family:'Yomogi';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/yomogi-400.woff2) format('woff2');}
/* ---------- CSS Variables（ドナー逐語＋業務種別 12 色） ---------- */
:root {
/* craft paper 系 */
--bg-craft: #F2E6D5;
--bg-craft-light: #F8F0E5;
--bg-white-card: #FFFDF9;
--color-brown-dark: #4A3728;
--color-brown: #786043;
--color-brown-light: #A08A6E;
/* 墨と金 */
--sumi: #1A1614;
--sumi-soft: #2E2A27;
--gold: #B8942E;
--gold-deep: #7E5F12;
--gold-light: #D9BC5E;
--gold-tint: #F3E7C2;
/* accents（sparingly） */
--color-green: #6B8E5A;
--color-green-dark: #4E6B40;
--font-heading: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;
--font-body: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;
--font-brush: 'Yomogi', 'Zen Maru Gothic', cursive;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
--shadow-card: 0 2px 12px rgba(26, 22, 20, 0.08);
--shadow-card-hover: 0 6px 24px rgba(26, 22, 20, 0.16);
--shadow-seal: 0 1px 3px rgba(26, 22, 20, 0.35), inset 0 0 0 1px rgba(184, 148, 46, 0.4);
--radius-s: 4px;
--radius: 10px;
--radius-lg: 16px;
--notch: 12px;
--maxw: 48rem;
/* ---- 業務種別 12 色（PJ0017 新設・data/service-labels.json の color_class と同名）----
設計は 3 段：
① 彩度を 36% に固定する。墨と金の紙面で浮かないための上限で、
12 色すべて同じ値にしてあるので、どれか 1 色だけが目立つことがない。
② 明度は色ごとに解いた。「チップ地（自色 12% 混）に対する contrast が 5.8:1」に
なる明度を二分探索で求めてある。結果 12 色の contrast は 5.74〜6.11 に収まり、
WCAG AA（4.5:1）を全色が超え、かつ見た目の濃さが揃う
（同じ明度を全色に使うと黄緑だけ沈み、青紫だけ浮く）。
③ 色相は「等間隔」ではなく「知覚等間隔」にした。まず 42 度から 30 度刻みで
12 色を置いたが、緑帯（h100〜h160）で色差が潰れて戸籍と動産譲渡が
ΔE00 = 4.4（別の色と認識される閾値 5 未満）になった。そこで色相を
±14 度の範囲で動かし、全 66 組の最小 ΔE00 を最大化した。
結果 最小 ΔE00 = 8.7 / 中央値 28.7 で、12 色すべてが弁別可能。
割り当ての順は service-labels.json の並びに対し 5 つ飛ばし（≒150 度）。
チップが並ぶときに隣り合う 2 色が最も離れる。
不動産登記だけは h42＝金（#B8942E は h44.3）に置き、主業務が地の金と同族に見えるようにした。 */
--svc-real-estate: #675731; /* h 42 不動産登記 金茶 */
--svc-corporate: #325F6B; /* h192 商業・法人登記 錆浅葱 */
--svc-deposit: #8A4157; /* h342 供託 蘇芳 */
--svc-koseki: #2E6348; /* h149 戸籍・国籍 千歳緑 */
--svc-will: #75448F; /* h279 遺言書保管 菫 */
--svc-guardianship: #595D2C; /* h 64 成年後見登録 海松 */
--svc-human-rights: #41588B; /* h222 人権擁護 紺桔梗 */
--svc-boundary: #814B3D; /* h 12 筆界特定 弁柄 */
--svc-eauth: #2E615C; /* h175 電子認証 老緑 */
--svc-inheritance: #863F73; /* h316 法定相続情報 梅紫 */
--svc-movable: #3F612E; /* h100 動産譲渡登記 苔 */
--svc-claim: #54499C; /* h248 債権譲渡登記 藤紫 */
}
/* ---- 業務種別 → --svc の受け渡し（色の分岐はこの 12 行だけ）----
左は service-labels.json の color_class、右は JSON の service enum。
どちらの書き方でも同じ --svc が入るので、親は njk の都合で選んでよい。
--svc は継承するので、カードに付ければ内側のチップ・ドットも揃う。 */
/* 🔴 業務別 12 色（--svc）は 2026-09-15 に全面退役した。
チップ → 単色、管轄カードの左罫 → 金、郡見出しの菱形 → 金。
「1 拠点に最大 11 業務が並ぶので色が多すぎる」というユーザー判断による。
トークンと下の割当は残置——再導入するならここを生かせば足りる。 */
.svc-real-estate, [data-service="real-estate-registration"] { --svc: var(--svc-real-estate); }
.svc-corporate, [data-service="corporate-registration"] { --svc: var(--svc-corporate); }
.svc-deposit, [data-service="deposit"] { --svc: var(--svc-deposit); }
.svc-koseki, [data-service="koseki-nationality"] { --svc: var(--svc-koseki); }
.svc-will, [data-service="will-custody"] { --svc: var(--svc-will); }
.svc-guardianship, [data-service="adult-guardianship"] { --svc: var(--svc-guardianship); }
.svc-human-rights, [data-service="human-rights"] { --svc: var(--svc-human-rights); }
.svc-boundary, [data-service="boundary-identification"] { --svc: var(--svc-boundary); }
.svc-eauth, [data-service="electronic-authentication"] { --svc: var(--svc-eauth); }
.svc-inheritance, [data-service="statutory-inheritance-info"] { --svc: var(--svc-inheritance); }
.svc-movable, [data-service="movable-property-transfer"] { --svc: var(--svc-movable); }
.svc-claim, [data-service="claim-transfer"] { --svc: var(--svc-claim); }
/* ================================================================
* §1 リセット・body・和紙ノイズ（ドナー逐語）
* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
font-feature-settings: "palt" 1;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.9;
font-weight: 400;
color: var(--color-brown-dark);
background: var(--bg-craft);
letter-spacing: 0.02em;
counter-reset: section;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
}
/* 和紙テクスチャ（ほのかなノイズ）。外部リクエストなし・画像ファイル不要。
🔴 全画面の固定オーバーレイゆえ、上に乗る要素は z-index:1 以上が要る。 */
body::before {
content: '';
position: fixed;
inset: 0;
background:
url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E") repeat;
pointer-events: none;
z-index: 0;
}
img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; color: var(--sumi); }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--sumi); line-height: 1.5; }
a {
color: var(--gold-deep);
text-decoration: underline;
text-decoration-color: var(--gold-light);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--sumi); text-decoration-color: var(--gold); }
/* ================================================================
* §2 ヘッダー（印章ロゴ）
* ドナーからの改変は ::before の 1 文字だけ（税 → 法）。
* ============================================================ */
.site-header {
background: var(--sumi);
border-bottom: 3px solid var(--gold);
padding: 0.9rem 0;
position: relative;
z-index: 5;
}
.site-header__inner {
max-width: 64rem;
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.site-header__logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.12rem;
letter-spacing: 0.06em;
color: var(--gold-light);
text-decoration: none;
border: none;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.site-header__logo:hover { color: #fff; border: none; }
.site-header__logo::before {
content: "法"; /* 姉妹サイトと同じ機構（税／産／宅／動…）。PJ0017 は「法」 */
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
background: var(--gold);
color: var(--sumi);
font-size: 1rem;
font-weight: 700;
border-radius: 6px;
box-shadow: var(--shadow-seal);
}
.site-header__tagline {
font-size: 0.78rem;
letter-spacing: 0.12em;
color: var(--gold-light);
opacity: 0.8;
font-family: var(--font-heading);
}
/* ================================================================
* §3 パンくず（ドナー逐語）
* ============================================================ */
.breadcrumb {
max-width: 64rem;
margin: 0 auto;
padding: 0.85rem 1.25rem 0.4rem;
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
position: relative;
z-index: 1;
}
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; margin: 0; padding: 0; }
.breadcrumb__item:not(:last-child)::after { content: "／"; margin-left: 0.4em; color: var(--color-brown-light); }
.breadcrumb__item a { border: none; color: var(--color-brown); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--gold-deep); text-decoration: underline; text-decoration-color: var(--gold-light); }
/* ================================================================
* §4 コンテナ（ドナー逐語）
* ============================================================ */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
position: relative;
z-index: 1;
}
/* ================================================================
* §5 kicker（eyebrow チップ）
* ドナー逐語＋__type を新設（PJ0017 は「県名｜拠点種別」を出す）。
* 拠点種別で色を振りたい場合も、帯そのものは墨のまま __type だけ振る。
* ============================================================ */
.article__kicker {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1rem;
padding: 5px 14px;
background: var(--sumi);
color: var(--gold-light);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.1em;
border-radius: var(--radius-s);
}
.article__kicker::before,
.article__kicker::after { content: none; }
.article__kicker__main { white-space: nowrap; }
/* 拠点種別（本局／支局／出張所／証明サービスセンター／本局特別課／分室） */
.article__kicker__type {
display: inline-block;
padding: 0.05rem 0.5rem;
background: var(--gold);
color: var(--sumi);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.08em;
border-radius: 2px;
white-space: nowrap;
}
/* ================================================================
* §6 H1・最終確認日・アイキャッチ・リード（ドナー逐語）
* ============================================================ */
.article__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.55rem, 4.4vw, 2.15rem);
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--sumi);
margin: 0.4rem 0 1.5rem;
padding-left: 16px;
border-left: 4px solid var(--gold);
text-align: left;
}
.article__title__small { display: block; font-size: 0.6em; color: var(--color-brown); margin-top: 0.5rem; font-weight: 500; letter-spacing: 0.02em; }
.article__verified {
text-align: right;
color: var(--color-brown);
font-size: 0.78rem;
margin: 0 0 2rem;
letter-spacing: 0.05em;
}
.article__verified::before { content: "\25C6 "; color: var(--gold); }
/* 公式ページ側の更新日（page_last_updated・ドナーに無い概念）。
最終確認日の下に小さく添える。 */
.article__source-updated {
display: block;
margin-top: 0.15rem;
font-size: 0.72rem;
color: var(--color-brown-light);
letter-spacing: 0.04em;
}
.article__meta { color: var(--color-brown); font-size: 0.85rem; margin: 0 0 2rem; letter-spacing: 0.05em; }
.article__meta::before { content: "\25C6 "; color: var(--gold); }
.article__eyecatch { margin: 0 0 2.5rem; }
.article__eyecatch img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.article__eyecatch figcaption {
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--color-brown);
text-align: center;
letter-spacing: 0.04em;
}
.article__lead {
font-size: 1rem;
line-height: 1.95;
letter-spacing: 0.03em;
margin: 0 0 2rem;
color: var(--color-brown-dark);
text-align: justify;
text-justify: inter-ideograph;
}
/* ================================================================
* §7 広告枠（AdSense autorelaxed・ドナー逐語）
* 枠 ID は PJ0017 用の値が別途要る（ユーザー手番）。CSS は枠の見た目だけ。
* ============================================================ */
.ad-unit {
margin: 2.25rem 0;
text-align: center;
min-height: 1px;
}
.ad-unit::before {
content: "スポンサーリンク";
display: block;
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--color-brown-light);
margin-bottom: 0.4rem;
}
.ad-unit .adsbygoogle { display: block; }
/* ================================================================
* §8 目次（漢数字カウンタ toc・本文の section カウンタとは独立）
* 🔴 目次の の順と本文 .article__section の順は、テンプレ側で
* 同じ条件式・同じ順に書いて初めて一致する。ズレると
* 目次の「五」が本文の「六」を指す事故になる。
* ============================================================ */
.toc {
margin: 1.5rem 0 2.5rem;
padding: 1.2rem 1.5rem 1.35rem;
background: var(--bg-white-card);
border: 1px solid rgba(184, 148, 46, 0.2);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.toc__heading {
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--sumi);
margin: 0 0 0.75rem;
padding-bottom: 0.55rem;
border-bottom: 1px dashed var(--gold-light);
}
.toc__heading::before {
content: "\25C6";
color: var(--gold);
margin-right: 0.5em;
font-size: 0.7em;
vertical-align: 0.15em;
}
.toc__list {
margin: 0;
padding-left: 0;
list-style: none;
counter-reset: toc;
}
.toc__list li {
counter-increment: toc;
margin: 0.15rem 0;
position: relative;
}
.toc__list a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.35rem;
color: var(--color-brown-dark);
text-decoration: none;
border: none;
border-radius: var(--radius-s);
font-size: 0.92rem;
line-height: 1.6;
transition: background .15s ease, color .15s ease;
}
.toc__list a::before {
content: counter(toc, cjk-ideographic);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px; height: 28px;
padding: 0 6px;
background: var(--sumi);
color: var(--gold);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.92rem;
border-radius: 3px;
flex-shrink: 0;
}
.toc__list a:hover { background: var(--gold-tint); color: var(--sumi); }
@media (max-width: 640px) {
.toc { padding: 1rem 1.1rem; }
.toc__list a { font-size: 0.85rem; }
}
/* ================================================================
* §9 本文の節と見出し（章番号：漢数字）
* body{counter-reset:section} → .article__section{counter-increment}
* 番号を振らない節を作るときは §13 .internal-links h2 の型を踏襲する
* （counter-increment を持たない要素に h2 を置き ::before/::after を殺す）。
* ============================================================ */
.article__section { margin: 3.25rem 0; counter-increment: section; scroll-margin-top: 1rem; }
.article__section h2 {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.3rem, 3.2vw, 1.6rem);
line-height: 1.5;
color: var(--sumi);
margin: 0 0 1.25rem;
padding: 0.35rem 0 0.7rem 3.4rem; /* 左 3.4rem が番号札の逃げ */
position: relative;
border-bottom: 2px solid var(--gold);
letter-spacing: 0.03em;
}
.article__section h2::before {
content: counter(section, cjk-ideographic);
position: absolute;
left: 0;
top: 0.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--gold);
background: var(--sumi);
border-radius: 3px;
}
.article__section h2::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 56px; height: 2px;
background: var(--sumi); /* 金の罫の左 56px だけ墨で押さえる */
}
.article__section h3 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.12rem;
color: var(--sumi);
margin: 2rem 0 0.75rem;
padding-left: 0.75rem;
border-left: 4px solid var(--gold);
letter-spacing: 0.03em;
}
.article__section h4 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--sumi);
margin: 1.25rem 0 0.5rem;
letter-spacing: 0.03em;
}
.article__section h4::before { content: "\25C6"; color: var(--gold); margin-right: 0.4em; font-size: 0.8em; }
.article__section p { margin: 1rem 0; text-align: justify; text-justify: inter-ideograph; }
.section-illust { margin: 0 0 1.5rem; }
.section-illust img {
width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* ================================================================
* §10 表（basic-info）
* ============================================================ */
.basic-info {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
font-size: 0.92rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.25);
border-radius: var(--radius);
overflow: hidden;
}
.basic-info th, .basic-info td {
border-bottom: 1px dashed rgba(139, 111, 78, 0.25);
padding: 0.85rem 0.95rem;
text-align: left;
vertical-align: top;
line-height: 1.7;
}
.basic-info th {
background: var(--bg-craft-light);
color: var(--sumi);
font-family: var(--font-heading);
font-weight: 700;
width: 8em;
white-space: nowrap;
letter-spacing: 0.04em;
border-right: 1px dashed rgba(139, 111, 78, 0.25);
}
.basic-info tr:last-child th, .basic-info tr:last-child td { border-bottom: none; }
/* 表の中の補足（hours.notes / closed など）。改行して小さく添える。 */
.basic-info td small {
display: block;
margin-top: 0.25rem;
font-size: 0.78rem;
color: var(--color-brown);
line-height: 1.7;
}
/* ================================================================
* §11 リスト（管轄地域・アクセス）
* ============================================================ */
.jurisdiction-list, .access-list {
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.2);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
padding: 1rem 1rem 1rem 2.25rem;
margin: 1rem 0;
font-size: 0.92rem;
}
.jurisdiction-list li, .access-list li { margin: 0.3rem 0; line-height: 1.85; }
.jurisdiction-list li::marker, .access-list li::marker { color: var(--gold); }
.besshi-link { font-size: 0.85rem; }
/* access[] は PJ0017 では配列（type: train / bus / car / walk）。
種別ラベルを行頭に小さく置く。 */
.access-list__type {
display: inline-block;
min-width: 3.5em;
margin-right: 0.5em;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-brown);
}
.access-list__walk { font-size: 0.85rem; color: var(--color-brown); white-space: nowrap; }
/* ================================================================
* §12 案内図（法務省公式 jpg→webp の静止図 ／ Google Maps iframe）
* 🔴 PJ0017 は出典表記が必須。figcaption と alt の両方に
* 「出典: 法務省法務局公式サイト」を入れること（njk 側の責務）。
* ============================================================ */
.map-figure {
margin: 1.5rem 0;
padding: 0.75rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.2);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.map-figure img { margin: 0 auto; border-radius: var(--radius-s); }
.map-figure figcaption {
margin-top: 0.6rem;
text-align: center;
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
}
/* 出典表記。figcaption の中で 1 段落として使う。 */
.map-figure__source {
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
color: var(--color-brown-light);
letter-spacing: 0.04em;
}
.map-figure--google { padding: 0; overflow: hidden; }
.map-figure--google iframe { display: block; width: 100%; height: 360px; border: 0; }
.map-figure--google figcaption { padding: 0.6rem 0.75rem 0.75rem; }
@media (max-width: 640px) { .map-figure--google iframe { height: 280px; } }
/* ================================================================
* §13 統合監修カード（のどか会計事務所 × 監修者）— ドナー逐語
* 移植量が最も大きい単一ブロック。クラス名はドナーのまま。
* 🔴 このカードを動かすデータが PJ0017 にはまだ無い（site.json の
* service / regional_services、supervisor.json の office_phrase、
* jpNumber フィルタ、マスコット画像）。CSS だけ先に置く。
* __nodoka ブロックを出さず __supervisor だけ出しても崩れない。
* ============================================================ */
.integrated-card {
position: relative;
background: var(--bg-white-card);
border: 1px solid rgba(139, 105, 20, 0.25);
border-radius: var(--radius-lg);
padding: 2.25rem 1.5rem 1.5rem; /* 上が厚いのは印章の逃げ */
margin: 2rem 0 3.25rem;
box-shadow: var(--shadow-card);
}
/* 右上の切り欠き。地色 --bg-craft を直に参照するので、
ページ地色を変えるとここも自動で追従する。 */
.integrated-card::after {
content: "";
position: absolute;
top: 0; right: 0;
width: var(--notch); height: var(--notch);
background: linear-gradient(135deg, transparent 50%, var(--bg-craft) 50%);
border-top-right-radius: var(--radius-lg);
pointer-events: none;
}
.integrated-card__seal-wrap { position: absolute; top: -14px; left: 20px; z-index: 2; }
.integrated-card__seal {
display: inline-flex;
align-items: center; justify-content: center;
padding: 6px 16px;
min-height: 30px;
background: var(--sumi);
color: var(--gold);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.22em;
border-radius: 3px;
box-shadow: var(--shadow-seal);
white-space: nowrap;
}
.integrated-card__nodoka { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; }
.integrated-card__nodoka-header { display: flex; gap: 1rem; align-items: center; }
.integrated-card__mascot { flex-shrink: 0; }
.integrated-card__mascot img {
width: 80px; height: 80px;
border-radius: 50%;
border: 2px solid var(--gold-light);
background: var(--bg-craft-light);
}
.integrated-card__office-eyebrow { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--gold-deep); font-weight: 500; margin: 0; }
.integrated-card__office-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.12rem;
color: var(--sumi);
line-height: 1.35;
margin: 2px 0;
}
.integrated-card__office-sub { font-size: 0.85rem; color: var(--color-brown); margin: 0; }
.integrated-card__office-desc { font-size: 0.92rem; line-height: 1.85; margin: 0.25rem 0 0; color: var(--color-brown-dark); }
/* 姉妹サイトへの外部リンク。唯一の緑アクセント。 */
.integrated-card__kaigo-link { font-weight: 500; color: var(--color-green-dark); text-decoration-color: var(--color-green); margin-left: 0.25rem; }
.integrated-card__kaigo-link:hover { color: var(--sumi); background: rgba(107, 142, 90, 0.08); }
.integrated-card__price {
margin: 0.75rem 0 0.25rem;
padding: 0.6rem 0.9rem;
background: var(--bg-craft-light);
border-radius: var(--radius-s);
border-left: 3px solid var(--gold);
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-brown-dark);
text-align: center;
}
.integrated-card__price strong { color: var(--sumi); font-size: 1.03em; }
.integrated-card__divider {
height: 1px;
margin: 1.25rem 0 1rem;
background: linear-gradient(to right, transparent 0%, var(--gold-light) 20%, var(--gold-light) 80%, transparent 100%);
}
/* Yomogi（--font-brush）を使う唯一の箇所 */
.integrated-card__section-title {
font-family: var(--font-brush);
font-size: 0.92rem;
letter-spacing: 0.16em;
color: var(--gold-deep);
margin: 0 0 0.65rem;
}
.integrated-card__supervisor-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.integrated-card__photo {
flex-shrink: 0;
width: 96px; height: 96px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--gold-light);
background: var(--bg-craft-light);
margin: 0;
}
.integrated-card__photo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.integrated-card__name { font-size: 1rem; margin: 0 0 2px; line-height: 1.35; }
.integrated-card__name strong { font-size: 1.12rem; color: var(--sumi); font-family: var(--font-heading); }
.integrated-card__kana { display: inline-block; font-size: 0.78rem; color: var(--color-brown); margin-left: 0.5rem; }
.integrated-card__bio { font-size: 0.92rem; line-height: 1.75; color: var(--color-brown-dark); margin: 0; }
@media (max-width: 480px) {
.integrated-card { padding: 2rem 1rem 1.25rem; }
.integrated-card__nodoka-header { gap: 0.75rem; }
.integrated-card__mascot img { width: 64px; height: 64px; }
.integrated-card__office-name { font-size: 1.12rem; }
.integrated-card__supervisor-body { gap: 0.9rem; }
.integrated-card__photo { width: 72px; height: 72px; }
.integrated-card__price { text-align: left; }
}
/* ================================================================
* §14 FAQ（ドナー逐語）
* ============================================================ */
.faq-list { margin: 1.25rem 0; }
.faq-item {
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.2);
border-radius: var(--radius);
padding: 1.1rem 1.35rem;
margin: 0.85rem 0;
box-shadow: var(--shadow-card);
}
.faq-item__q {
font-family: var(--font-heading);
font-weight: 700;
color: var(--sumi);
font-size: 1rem;
line-height: 1.55;
margin: 0 0 0.65rem;
padding-left: 0.75rem;
border-left: 3px solid var(--gold);
}
.faq-item__a { margin: 0; padding-left: 0.75rem; color: var(--color-brown-dark); line-height: 1.85; font-size: 0.92rem; }
.faq-item__a strong { color: var(--sumi); }
/* ================================================================
* §15 県内の他拠点リンク（章番号を持たない節の型）
* 🔴 h2 の ::before/::after を殺すこの型が「番号を振らない節」の作り方。
* PJ0017 は拠点数が 3〜30 と幅があるので、種別ごとに畳むときは
* §P3 .office-group を .internal-links の中に入れ子で使う。
* ============================================================ */
.internal-links {
margin: 3rem 0 0;
padding: 1.6rem 1.5rem 1.75rem;
background: var(--bg-craft-light);
border-top: 3px solid var(--gold);
border-radius: var(--radius);
}
.internal-links h2 {
font-family: var(--font-heading);
font-size: 1.12rem;
color: var(--sumi);
margin: 0 0 1rem;
padding: 0;
border: none;
}
.internal-links h2::before, .internal-links h2::after { display: none; }
.internal-links__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.6rem;
}
.internal-links__list li { margin: 0; }
.internal-links__list a {
display: block;
padding: 0.7rem 0.95rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.2);
border-radius: 6px;
color: var(--color-brown-dark);
text-decoration: none;
font-size: 0.92rem;
line-height: 1.6;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.internal-links__list a:hover { border-color: var(--gold); background: var(--gold-tint); color: var(--sumi); transform: translateY(-1px); }
/* リンクカード内の副次情報（所在地の市区町村名など） */
.internal-links__list a small {
display: block;
margin-top: 0.15rem;
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
}
/* ================================================================
* §16 フッター（ドナー逐語）
* ============================================================ */
.site-footer {
background: var(--sumi);
color: rgba(255, 255, 255, 0.75);
margin-top: 4rem;
padding: 2.5rem 1.25rem 1.75rem;
font-size: 0.85rem;
line-height: 1.85;
border-top: 4px solid var(--gold);
position: relative;
z-index: 2;
}
.site-footer__inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.site-footer p { margin: 0.5rem 0; opacity: 0.85; }
.site-footer a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(184, 148, 46, 0.35); }
.site-footer a:hover { color: #fff; border-bottom-color: var(--gold); }
/* ================================================================
* §17 トップページ（県の一覧）
* PJ0017 は法務局が管区（bureau）で束ねられる県があるので、
* ドナーの .kyoku-group をそのまま管区の見出しに使える。
* ============================================================ */
.index-block { margin: 2.5rem 0; }
.index-block__heading {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.3rem;
color: var(--sumi);
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--gold);
letter-spacing: 0.03em;
}
.kyoku-group { margin: 1.5rem 0; }
.kyoku-group__heading {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--sumi);
margin: 0 0 0.5rem;
padding-left: 0.75rem;
border-left: 4px solid var(--gold);
letter-spacing: 0.05em;
}
.pref-list { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.pref-list li { margin: 0.3rem 0; font-size: 0.92rem; break-inside: avoid; }
.pref-list a { color: var(--color-brown-dark); text-decoration: none; border-bottom: 1px solid rgba(139, 111, 78, 0.25); }
.pref-list a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.pref-list__count { font-size: 0.78rem; color: var(--color-brown); }
.pref-list__pending { color: var(--color-brown-light); }
.pref-list__pending-tag {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.1em;
padding: 0.05rem 0.45rem;
margin-left: 0.4rem;
background: var(--bg-craft-light);
color: var(--color-brown-light);
border-radius: var(--radius-s);
vertical-align: 0.05em;
}
/* ================================================================
* §18 県ページ：拠点リスト（office-list）
* ドナーの .office-list を踏襲。落としたのは 2 系統：
* __branches-jur* … PJ0017 に branches[] が無い（親子は parent_office_slug）
* → 代わりに §P3 .office-group を使う
* __jur-badge--island / --license-plate … 県税固有（島嶼・ナンバー）
* → 代わりに §P2 の level / cash 変種を使う
* ============================================================ */
.office-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.office-list__item {
margin: 1.2rem 0;
padding: 1.1rem 1.3rem 1.2rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.25);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.office-list__name {
margin: 0 0 0.6rem;
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.office-list__name a { color: var(--sumi); border: none; text-decoration: none; }
.office-list__name a:hover { color: var(--gold-deep); }
.office-list__meta { margin: 0.2rem 0; font-size: 0.85rem; color: var(--color-brown); line-height: 1.7; }
.office-list__basic { margin: 0 0 0.85rem; padding: 0; font-size: 0.85rem; color: var(--color-brown-dark); line-height: 1.7; }
.office-list__basic-row {
display: grid;
grid-template-columns: 4.5em 1fr;
gap: 0 0.8rem;
align-items: baseline;
padding: 0.15rem 0;
}
.office-list__basic-row dt {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-brown);
letter-spacing: 0.08em;
font-size: 0.85rem;
}
.office-list__basic-row dd { margin: 0; font-size: 0.85rem; }
.office-list__jur {
margin: 0.5rem 0 0;
padding: 0.7rem 0.95rem;
background: var(--bg-craft-light);
border: 1px solid rgba(139, 111, 78, 0.2);
border-radius: var(--radius);
font-size: 0.85rem;
color: var(--color-brown-dark);
line-height: 1.7;
}
.office-list__jur-row {
display: grid;
grid-template-columns: 4.5em 1fr;
gap: 0 0.8rem;
align-items: baseline;
padding: 0.1rem 0;
}
.office-list__jur-row dt {
font-family: var(--font-heading);
font-weight: 700;
color: var(--sumi);
letter-spacing: 0.08em;
font-size: 0.85rem;
}
.office-list__jur-row dd { margin: 0; font-size: 0.85rem; }
/* 墨地に金字の小バッジ。--svc が効いている文脈では業務色の地になる。 */
.office-list__jur-badge {
display: inline-block;
margin-left: 0.3em;
padding: 0.05rem 0.45rem;
background: var(--sumi);
color: var(--gold);
font-size: 0.72rem;
letter-spacing: 0.08em;
border-radius: var(--radius-s);
vertical-align: 0.1em;
}
.office-list__detail {
margin: 1rem 0 0;
padding-top: 0.7rem;
border-top: 1px dashed rgba(139, 111, 78, 0.3);
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
}
.office-list__detail a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-light); text-decoration: none; }
.office-list__detail a:hover { color: var(--sumi); border-bottom-color: var(--gold); }
/* ================================================================
* §19 課別 直通電話テーブル（basic-info--dial-in）
* PJ0017 では office.tel_departments[]（366/488 拠点）がここに入る。
* ============================================================ */
.basic-info--dial-in { table-layout: auto; }
.basic-info--dial-in th {
width: auto;
max-width: 30em;
white-space: normal;
word-break: break-all;
font-family: var(--font-body);
font-weight: normal;
color: var(--color-brown-dark);
letter-spacing: 0.02em;
font-size: 0.92rem;
vertical-align: top;
border-right: 1px dashed rgba(139, 111, 78, 0.25);
padding-right: 1rem;
}
.basic-info--dial-in th .dial-in-name {
display: block;
font-family: var(--font-heading);
font-weight: 700;
color: var(--sumi);
font-size: 1rem;
margin-bottom: 0.2rem;
}
.basic-info--dial-in th .dial-in-detail {
display: block;
font-size: 0.85rem;
color: var(--color-brown);
line-height: 1.65;
}
/* 番号は折り返させない（td 側で nowrap を三重に固定するのはドナー由来） */
.basic-info--dial-in td {
width: 1%;
min-width: 9em;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: 0.92rem;
vertical-align: top;
text-align: right;
padding-left: 1rem;
}
.basic-info--dial-in td a {
color: var(--gold-deep);
white-space: nowrap !important;
word-break: keep-all !important;
display: inline-block;
}
.basic-info--dial-in td a:hover { color: var(--sumi); }
.basic-info--dial-in td small {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--color-brown);
margin-top: 0.2rem;
}
@media (max-width: 640px) {
.basic-info--dial-in th { font-size: 0.85rem; }
.basic-info--dial-in td { font-size: 0.85rem; }
}
/* ================================================================
* §P PJ0017 固有コンポーネント
* ここから下はドナーに無い／ドナーから作り変えた分。
* ============================================================ */
/* ----------------------------------------------------------------
* §P1 業務管轄カード（jurisdiction-card）
* ドナーは 1 カード＝地域のまとまり（scope）に複数税目だったが、
* PJ0017 は 1 カード＝業務 1 種（service）に管轄地域。
* よって modifier 体系を --pref-wide / --regional から
* 「--svc（業務色）＋ level 変種」へ置き換えた。
* 1 拠点あたり最大 11 枚積むので、区切りの金罫が効く。
* -------------------------------------------------------------- */
.jurisdiction-card {
margin: 2rem 0;
padding: 1.4rem 1.5rem 1.5rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.25);
border-left: 4px solid var(--gold); /* 🔴 2026-09-15：業務別 12 色を撤回し金一色へ。1 拠点に 11 枚積むと左罫が虹色になる（チップと同じ判断） */
border-radius: var(--radius);
box-shadow: var(--shadow-card);
position: relative;
}
.jurisdiction-card + .jurisdiction-card { margin-top: 2.5rem; }
.jurisdiction-card + .jurisdiction-card::before {
content: "";
position: absolute;
top: -1.35rem; left: 50%;
transform: translateX(-50%);
width: 60%; height: 1px;
background: linear-gradient(to right, transparent 0, var(--gold-light) 30%, var(--gold-light) 70%, transparent 100%);
}
/* 自局で扱わず他拠点へ委譲する業務（jurisdictions[].delegated_to） */
.jurisdiction-card--delegated {
border-left-style: dashed;
background: var(--bg-craft-light);
box-shadow: none;
}
.jurisdiction-card .service-block { margin: 0 0 0.5rem; }
.jurisdiction-note {
margin: 0.6rem 0 0;
padding: 0.55rem 0.85rem;
background: var(--bg-craft-light);
border-left: 2px solid var(--gold);
font-size: 0.85rem;
color: var(--color-brown-dark);
line-height: 1.75;
}
/* jurisdiction-card--delegated の中では地色が同じになるので白に戻す */
.jurisdiction-card--delegated .jurisdiction-note { background: var(--bg-white-card); }
.jurisdiction-areas-label {
margin: 1.1rem 0 0.5rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.92rem;
color: var(--sumi);
letter-spacing: 0.06em;
}
.jurisdiction-areas-label::before {
content: "\25C6";
color: var(--gold);
margin-right: 0.45em;
font-size: 0.7em;
vertical-align: 0.15em;
}
/* カード内では areas リストの箱を外してフラットに戻す */
.jurisdiction-card .jurisdiction-list {
background: transparent;
border: none;
border-left: none;
padding: 0 0 0 1.4rem;
margin: 0;
list-style: disc;
}
.jurisdiction-card .jurisdiction-list li { margin: 0.25rem 0; line-height: 1.8; }
.jurisdiction-card .jurisdiction-list li::marker { color: var(--gold); }
/* ----------------------------------------------------------------
* §P2 業務種別チップ（🔴 ドナー .tax-types-* からの改名先）
* .tax-types-block → .service-block
* .tax-types-label → .service-label
* .tax-types-chips → .service-chips
* .tax-types-chips li → .service-chip（li 直指定をやめた）
* .tax-types-scope → .service-scope
* 色は §0 の 12 トークンを --svc 経由で受ける。--svc は継承するので
* カードに .svc-* か [data-service] を付ければ中のチップも揃う。
* -------------------------------------------------------------- */
.service-block {
margin: -0.5rem 0 0.5rem;
padding: 0.5rem 1rem 1.5rem;
background: var(--bg-craft-light);
border: 1px solid rgba(139, 111, 78, 0.2);
border-radius: var(--radius);
}
.service-label {
margin: 0 0 0.05rem;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
line-height: 1.2;
color: var(--sumi);
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
/* 業務名の頭に置く小さな色玉（見出し・リストでも使える） */
.service-dot {
display: inline-block;
width: 0.62em; height: 0.62em;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* 墨地に金字の小バッジ。jur.level / jur.cash_handling を入れる枠。 */
.service-scope {
display: inline-block;
background: var(--sumi);
color: var(--gold);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.15rem 0.55rem;
border-radius: var(--radius-s);
white-space: nowrap;
}
/* level: full（2,404 要素・既定）は無印でよい。以下は非既定の 3 値と現金取扱。 */
.service-scope--summary,
.service-scope--certificate {
background: transparent;
color: var(--color-brown);
border: 1px solid rgba(139, 111, 78, 0.45);
font-weight: 500;
}
.service-scope--certificate { border-style: dashed; }
.service-scope--application { background: var(--gold-deep); color: var(--bg-craft); }
.service-scope--cash { background: var(--gold-tint); color: var(--sumi); border: 1px solid var(--gold); }
.service-chips {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.4rem;
}
/* .service-chip を付けても、.service-chips の直下 li に置くだけでも効く */
.service-chip,
.service-chips > li {
--_c: var(--color-brown);
display: inline-block;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.3);
color: var(--color-brown-dark);
font-size: 0.78rem;
line-height: 1.4;
padding: 0.22rem 0.6rem;
border-radius: 999px;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 🔴 2026-09-15：業務別の 12 色をチップに載せる案は撤回した。
ドナー（PJ0011 .tax-types-chips）はチップを単色で組んでおり、
1 拠点あたり最大 11 枚並ぶ PJ0017 で色を振ると県トップが虹色になる（実見して却下）。
--svc は .jurisdiction-card の左罫にだけ使う——1 カード＝1 業務なので一度に 1 色しか出ない。 */
/* 扱わない業務を打ち消して見せる場合（県トップの対照表など） */
.service-chip--absent {
color: var(--color-brown-light);
background: var(--bg-craft-light);
border-color: rgba(139, 111, 78, 0.2);
text-decoration: line-through;
text-decoration-color: var(--color-brown-light);
}
/* リンクになるチップ（業務 → 該当セクションへ飛ばす） */
a.service-chip { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.service-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
/* ----------------------------------------------------------------
* §P3 拠点の種別グルーピング（office-group）— 新設
* PJ0017 は 1 県 3〜30 拠点。県トップと記事末の内部リンクを
* 「本局／支局／出張所／証明サービスセンター…」で束ねる器。
* 中身は .office-list（カード列）でも .internal-links__list
* （リンク格子）でも、この __list（汎用格子）でもよい。
* -------------------------------------------------------------- */
.office-group { margin: 2.25rem 0; position: relative; z-index: 1; }
.office-group + .office-group { margin-top: 2.75rem; }
.office-group__heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 0.9rem;
padding: 0 0 0.5rem 0.75rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--sumi);
letter-spacing: 0.05em;
border-left: 4px solid var(--gold);
border-bottom: 1px solid rgba(184, 148, 46, 0.35);
}
/* 「12 か所」等。見出しの右端に寄せる。 */
.office-group__count {
margin-left: auto;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
color: var(--color-brown);
letter-spacing: 0.08em;
white-space: nowrap;
}
/* 種別の説明（「登記事項証明書の交付のみを扱います」等） */
.office-group__note {
margin: -0.35rem 0 0.9rem;
font-size: 0.85rem;
line-height: 1.8;
color: var(--color-brown);
}
.office-group__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.6rem;
}
.office-group__list li { margin: 0; }
.office-group__list a {
display: block;
padding: 0.7rem 0.95rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.2);
border-left: 3px solid var(--gold-light);
border-radius: 6px;
color: var(--color-brown-dark);
text-decoration: none;
font-size: 0.92rem;
line-height: 1.6;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.office-group__list a:hover { border-color: var(--gold); background: var(--gold-tint); color: var(--sumi); transform: translateY(-1px); }
.office-group__list a small {
display: block;
margin-top: 0.15rem;
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
}
/* 現在地（いま開いている拠点）は飛ばさず印だけ付ける */
.office-group__list .is-current {
padding: 0.7rem 0.95rem;
background: var(--bg-craft-light);
border: 1px dashed rgba(139, 111, 78, 0.4);
border-left: 3px solid var(--gold);
border-radius: 6px;
font-size: 0.92rem;
color: var(--color-brown);
}
/* ----------------------------------------------------------------
* §P4 拠点種別バッジ（office_type 6 値）— 新設
* 🔴 業務種別が「色相」で分かれるのに対し、拠点種別は「濃さ」で分ける。
* 同じ紙面で 2 系統が喧嘩しないよう、ここは墨・金・茶の階調だけを使う。
* -------------------------------------------------------------- */
.office-type-badge {
display: inline-block;
padding: 0.08rem 0.5rem;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
border-radius: var(--radius-s);
white-space: nowrap;
vertical-align: 0.08em;
background: var(--bg-craft-light);
color: var(--color-brown);
border: 1px solid rgba(139, 111, 78, 0.35);
}
.office-type-badge--honkyoku { background: var(--sumi); color: var(--gold); border-color: var(--sumi); }
.office-type-badge--special-dept { background: var(--sumi-soft); color: var(--gold-light);border-color: var(--sumi-soft); }
.office-type-badge--shikyoku { background: var(--gold); color: var(--sumi); border-color: var(--gold-deep); }
.office-type-badge--shutchojo { background: var(--gold-tint); color: var(--sumi); border-color: var(--gold-light); }
.office-type-badge--csc { background: var(--bg-craft-light); color: var(--color-brown); border-color: rgba(139, 111, 78, 0.35); }
.office-type-badge--bunshitsu { background: transparent; color: var(--color-brown-light); border-style: dashed; }
/* ----------------------------------------------------------------
* §P5 運用状態バッジ（operational_status）— 新設
* closing は closes_on 必須。実データは現時点で 1 件。
* -------------------------------------------------------------- */
.status-badge {
display: inline-block;
padding: 0.08rem 0.55rem;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: var(--radius-s);
white-space: nowrap;
}
.status-badge--closing { background: var(--gold-deep); color: var(--bg-craft); }
.status-badge--closed { background: var(--color-brown-light); color: var(--bg-craft); }
/* 閉鎖予告の帯（記事冒頭・kicker の下に置く想定） */
.status-notice {
margin: 0 0 1.5rem;
padding: 0.85rem 1.15rem;
background: var(--gold-tint);
border: 1px solid var(--gold);
border-left: 4px solid var(--gold-deep);
border-radius: var(--radius-s);
font-size: 0.92rem;
line-height: 1.8;
color: var(--sumi);
}
.status-notice strong { color: var(--sumi); }
/* ----------------------------------------------------------------
* §P6 注記カード（note-card）— 新設
* PJ0017 固有フィールドの受け皿。ドナーに当て所が無かったもの：
* services_notes(479) / deposit_notes(145) / voice_menu_variant(200) /
* sub_services(96) / events_notes(79) / disaster_notes(24) /
* inquiry_office_slug(77)
* 🔴 節を増やすと目次の漢数字が伸びる。注記カードは「節の中に置く」もの
* として設計してある（h2 を持たせない）。節にするか注記に留めるかは親の判断。
* 色は墨・金・茶の階調のみ。業務種別の 12 色と喧嘩させない。
* -------------------------------------------------------------- */
.note-card {
margin: 1.25rem 0;
padding: 0.95rem 1.2rem 1rem;
background: var(--bg-white-card);
border: 1px solid rgba(139, 111, 78, 0.22);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
font-size: 0.92rem;
line-height: 1.85;
color: var(--color-brown-dark);
}
.note-card__title {
margin: 0 0 0.45rem;
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--sumi);
letter-spacing: 0.06em;
}
.note-card__title::before {
content: "\25C6";
color: var(--gold);
margin-right: 0.45em;
font-size: 0.7em;
vertical-align: 0.15em;
}
.note-card__body { margin: 0; }
.note-card__body + .note-card__body { margin-top: 0.6rem; }
.note-card ul { margin: 0.4rem 0 0; padding-left: 1.4rem; }
.note-card li { margin: 0.2rem 0; }
.note-card li::marker { color: var(--gold); }
/* 変種。左罫の色と地色だけを振る。 */
.note-card--voice { border-left-color: var(--sumi); } /* 音声案内の階層 */
.note-card--deposit { border-left-color: var(--gold-deep); } /* 供託の現金取扱 */
.note-card--will { border-left-color: var(--gold-deep); background: var(--bg-craft-light); }
.note-card--event { border-left-color: var(--gold-light); background: var(--bg-craft-light); }
.note-card--disaster { border-left-color: var(--sumi); background: var(--gold-tint); }
.note-card--inquiry { border-left-style: dashed; background: var(--bg-craft-light); }
/* 音声案内の番号階層（「1 を押す → 2 を押す」）を 1 行ずつ見せる */
.voice-menu { list-style: none; margin: 0.5rem 0 0; padding: 0; counter-reset: voice; }
.voice-menu li {
counter-increment: voice;
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.2rem 0;
font-size: 0.92rem;
line-height: 1.75;
}
.voice-menu li::before {
content: counter(voice);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em; height: 1.5em;
background: var(--sumi);
color: var(--gold);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
border-radius: 3px;
}
/* ----------------------------------------------------------------
* §P7 管轄地域の表示（cities[] / towns_by_gun{}）— 新設
* cities は 1 要素最大 32 市、towns_by_gun は最大 21 郡。
* 市は箇条書きにすると縦に伸びすぎるので読点で連ねる（.areas-cities）。
* 郡は「郡名：町村、町村…」の定義リストにする（.areas-by-gun）。
* -------------------------------------------------------------- */
.areas-cities {
margin: 0.4rem 0 0;
padding: 0;
list-style: none;
font-size: 0.92rem;
line-height: 1.95;
color: var(--color-brown-dark);
}
.areas-cities li { display: inline; }
.areas-cities li:not(:last-child)::after { content: "、"; color: var(--color-brown-light); }
.areas-by-gun { margin: 0.6rem 0 0; font-size: 0.92rem; }
.areas-by-gun dt {
margin: 0.55rem 0 0.1rem;
font-family: var(--font-heading);
font-weight: 700;
color: var(--sumi);
letter-spacing: 0.04em;
}
.areas-by-gun dt::before {
content: "\25C6";
color: var(--gold);
margin-right: 0.4em;
font-size: 0.65em;
vertical-align: 0.18em;
}
.areas-by-gun dd {
margin: 0 0 0 1.25rem;
line-height: 1.9;
color: var(--color-brown-dark);
}
/* 「1 町だけの郡」も同じ形で出る。件数の添え字は小さく。 */
.areas-by-gun dd small { color: var(--color-brown); font-size: 0.78rem; margin-left: 0.3em; }
/* ----------------------------------------------------------------
* §P8 一次情報リンク（official_url）— 新設
* 🔴 PJ0017 は法務省法務局公式の該当ページへの外部リンクが必須。
* -------------------------------------------------------------- */
.official-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 1rem 0 0;
padding: 0.55rem 1.1rem;
background: var(--bg-white-card);
border: 1px solid var(--gold);
border-radius: var(--radius-s);
color: var(--gold-deep);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.official-link::after { content: "\2197"; font-size: 0.9em; }
.official-link:hover { background: var(--gold-tint); color: var(--sumi); }
/* 出典の但し書き（本文末・図の下など） */
.source-note {
margin: 0.5rem 0 0;
font-size: 0.78rem;
color: var(--color-brown);
letter-spacing: 0.04em;
line-height: 1.75;
}
/* ================================================================
* §20 スクロール追従 CTA（拠点ページのみ・画面下固定）
* 🔴 PJ0017 はアフィリンク非搭載ゆえ、ドナーの #sec-support という
* 行き先は無い。クラスだけ用意してある——href は親が決める。
* 帯そのものをリンクにせず、帯の中に独立したボタンを置く形は踏襲。
* 出し分けは base.njk 側で {% if pageType == 'office' %} とする。
* ============================================================ */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
background: rgba(26, 22, 20, 0.97);
border-top: 2px solid var(--gold);
box-shadow: 0 -4px 14px rgba(26, 22, 20, 0.18);
}
.sticky-cta__inner {
max-width: 64rem; margin: 0 auto; padding: 10px 1.25rem;
display: flex; align-items: center; justify-content: center; gap: 18px;
}
.sticky-cta__text { margin: 0; color: var(--bg-craft-light); font-size: 0.92rem; line-height: 1.5; }
.sticky-cta__btn {
/* line-height を明示する。body の 1.9 を継承するとバーが伸び、下で確保する余白の見積りが崩れる */
display: inline-block; padding: 12px 26px; border-radius: var(--radius-s);
font-size: 1rem; line-height: 1.4;
background: var(--gold); color: var(--sumi);
font-family: var(--font-heading); font-weight: 700;
text-decoration: none; white-space: nowrap; border: 1px solid var(--gold-deep);
box-shadow: 0 2px 0 var(--gold-deep), 0 3px 10px rgba(26, 22, 20, 0.25);
transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}
.sticky-cta__btn:hover { background: var(--gold-light); color: var(--sumi); }
.sticky-cta__btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--gold-deep), 0 1px 4px rgba(26, 22, 20, 0.25); }
.sticky-cta__btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 640px) {
.sticky-cta__text { display: none; }
.sticky-cta__inner { padding: 8px 12px; }
.sticky-cta__btn { width: 100%; text-align: center; }
}
/* バーに隠れる分の余白。iOS のホームバー領域も足す。
🔴 84px は手計算の定数。バー実高 = 2(上罫) + 10 + [1 + 12 + 22 + 12 + 1] + 10 = 70px に
14px の余裕を足したもの。__btn の padding / font-size / line-height を触ったら
この数字も必ず再計算すること。 */
body[data-page="office"] { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .sticky-cta__btn { transition: none; } }
/* ================================================================
* §21 モーション抑制
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ================================================================
* §22 印刷
* 地色を白に落とし、和紙ノイズ・ナビ・広告・地図・画像を落とす。
* 管轄地域の本文は残す（窓口で使う紙になる）。
* ============================================================ */
@media print {
body { background: #fff; color: #000; font-size: 11pt; line-height: 1.6; letter-spacing: 0; }
body::before { display: none !important; }
body[data-page="office"] { padding-bottom: 0; }
.site-header, .site-footer, .breadcrumb, .internal-links, .office-group,
.toc, .ad-unit, .map-figure--google, .article__eyecatch, .section-illust,
.sticky-cta { display: none !important; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
.article__title { border-left: none; padding-left: 0; }
.jurisdiction-card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
.basic-info--dial-in td { text-align: left; }
.service-chip, .service-chips > li { border-color: #999 !important; background: none !important; }
.integrated-card, .note-card, .faq-item { box-shadow: none; break-inside: avoid; }
}
/* ---------------------------------------------------------------------------
* §24 PJ0017 追加：記事ラッパ
* ドナーは 直下に節を並べるが、PJ0017 は
* を 1 枚挟む（JSON-LD の Article と対応を取り、目次の scroll-margin を効かせるため）。
* ------------------------------------------------------------------------ */
.article { counter-reset: section; }
.integrated-card__supervisor { display: block; }
/* 広告に関する開示（AdSense ユニットの直前） */
.ad-disclosure {
margin: 1.4rem 0 0.4rem;
color: var(--color-brown);
font-size: 0.78rem;
letter-spacing: 0.04em;
}
/* ----------------------------------------------------------------
* §25 管内拠点の表（basic-info--branches）
* ドナー PJ0011 の支局表専用修飾子を移植（2026-09-15・移植漏れの是正）。
* 素の .basic-info は th{width:8em; white-space:nowrap} ゆえ、
* 拠点名リンクを入れると狭幅で崩れる。
* ------------------------------------------------------------- */
.basic-info--branches { table-layout: auto; }
.basic-info--branches th {
width: auto;
max-width: 22em;
white-space: normal;
font-weight: 700;
}
.basic-info--branches td { white-space: normal; }
.basic-info--branches td small {
display: block;
margin-top: 0.2rem;
font-size: 0.78rem;
color: var(--color-brown);
}
@media (max-width: 600px) {
.basic-info--branches th,
.basic-info--branches td { display: block; width: auto; }
.basic-info--branches th { border-bottom: none; padding-bottom: 0.2rem; }
}