/* 家系サーチ 法務ページ 共通スタイル
   外部フォント/CDNは使わない(自己完結)。
   ⚠ 2026-08-29: 外部通信は Cloudflare Web Analytics のビーコン
   (static.cloudflareinsights.com) の1本のみ。Cookieレス・個人特定なし。
   これ以外の外部リソースは足さないこと。プライバシーポリシーの記載と対応させる。 */

:root {
  --bg: #fdf8ef;
  --surface: #ffffff;
  --ink: #211c17;
  --ink-soft: #5c5348;
  --ink-mute: #8a8073;
  --noren: #b3241c;
  --noren-ink: #b3241c;
  --soup: #c47a1e;
  --line: #e7ddcb;
  --line-soft: #f0e8da;
  --accent-bg: #fbeee0;
  --tree-line: #cfc0a6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17130f;
    --surface: #201a15;
    --ink: #ece4d6;
    --ink-soft: #b7ab9a;
    --ink-mute: #8a7f6f;
    --noren: #e86a5f;
    --noren-ink: #ef7a6f;
    --soup: #e0a24e;
    --line: #33291f;
    --line-soft: #2a2119;
    --accent-bg: #2a2018;
    --tree-line: #4f4132;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ヘッダー */
.masthead {
  border-top: 4px solid var(--noren);
  margin-bottom: 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--noren-ink);
  font-size: 15px;
}
/* 法務ページのロゴは紹介ページ(ルート)へ戻るリンクにしている。
   見た目は変えず、下線だけ出さない。 */
a.brand { text-decoration: none; width: fit-content; }
a.brand:hover { text-decoration: underline; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--noren);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex: none;
}

nav.docnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
nav.docnav a {
  font-size: 13px;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .15s, color .15s;
}
nav.docnav a:hover { color: var(--noren-ink); border-color: var(--noren); }
nav.docnav a[aria-current="page"] {
  color: #fff;
  background: var(--noren);
  border-color: var(--noren);
}
@media (prefers-color-scheme: dark) {
  nav.docnav a[aria-current="page"] { color: #17130f; }
}

h1 {
  font-size: 26px;
  line-height: 1.35;
  margin: 8px 0 6px;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.meta {
  color: var(--ink-mute);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.meta b { color: var(--ink-soft); font-weight: 600; }

h2 {
  font-size: 18px;
  margin: 40px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--soup);
  line-height: 1.5;
}

.lead { color: var(--ink-soft); }

p { margin: 12px 0; }

ul, ol { margin: 12px 0; padding-left: 1.5em; }
li { margin: 6px 0; }

/* 更新履歴の項目。見出し(何ができるようになったか)を太字で立て、
   その下に詳細を1段落として置く。ライト/ダーク両方で読めるよう変数を使う。 */
li .detail {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
/* 見出し＋詳細の項目は、単行の項目より少し間を空けて塊を分かりやすくする。 */
li:has(.detail) { margin: 12px 0; }

/* 更新履歴の項目に付ける種別ラベル。
   版ごとに見出しで区切る案もあったが、1〜2件しかない版が9版中4版あり
   見出しのほうが中身より目立つため、項目単位のラベルにした。
   種別は「新機能 / 改善 / 修正」の3つ。利用者から見た価値で分け、
   迷うものは新機能に倒す。

   ラベルと本文を2列のグリッドに置き、本文の左端を揃える。
   見出しが折り返しても、詳細文が続いても、常に同じ位置から始まる。 */
li:has(.tag) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  margin: 12px 0;
}
li:has(.tag) .tag { grid-column: 1; grid-row: 1; }
li:has(.tag) strong,
li:has(.tag) .detail { grid-column: 2; }

.tag {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  /* 「新機能」3文字と「改善」2文字で幅が変わらないよう最小幅を持たせる。 */
  min-width: 4.6em;
}
.tag::before { content: '['; }
.tag::after { content: ']'; }
/* 新機能だけ暖簾色にして、ぱっと見で「増えた回」が分かるようにする。 */
.tag.new { color: var(--noren-ink); }

strong { color: var(--ink); font-weight: 700; }

a { color: var(--noren-ink); }

.purpose {
  display: block;
  background: var(--accent-bg);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.purpose b { color: var(--ink); }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--noren);
  border-radius: 8px;
  padding: 4px 16px;
  margin: 16px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.table-scroll { overflow-x: auto; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--accent-bg);
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 32px 0;
}

.disclaimer {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
  line-height: 1.75;
}

.pagefoot {
  margin-top: 40px;
  color: var(--ink-mute);
  font-size: 12.5px;
  text-align: center;
}
.pagefoot a { color: var(--ink-soft); }

/* ------------------------------------------------------------------
   ここから下は紹介ページ(ルート)専用。法務ページには影響しない。
   クラス名はすべて lp- で始める。
   ------------------------------------------------------------------ */

/* 日本語の折り返し制御。
   本文は「文節の途中で切らない」だけにして、改行位置はブラウザに任せる。
   word-break: auto-phrase が文節を見て自然な位置で折り返してくれる。
   text-wrap: pretty は行末に1〜2文字だけ取り残されるのを防ぐ。
   ※ 以前 .b を inline-block にして句読点で強制的に折り返していたが、
     スマホ幅では塊ひとつで1行が埋まり「1行1文節」の詩のような見た目に
     なったのでやめた。強制せず、ぶら下がりを防ぐだけにする。 */
.lp-hero .lead, .lp-sec p, .lp-author p, .lp-cta p, .lp-note, .lp-feats span {
  text-wrap: pretty;
  word-break: auto-phrase;
}
/* キャプションだけは短く2文節なので、句点での折り返しが素直に効く。 */
.lp-shot-cap .b { display: inline-block; }

/* 見出しにも文節の途中で切らせない。本文より文字が大きく1行に入る文節数が
   少ないぶん、途中で切れると特に目立つ(375px幅で
   「その一杯は、ど/こから来たのか。」と「どこ」が割れていた)。
   ※ 本文と違い text-wrap: pretty は足さない。h1 の balance と噛み合わず、
     かえって不自然な位置(「その一杯は、どこから/来たのか。」)で折れる。 */
h1, h2, h3 { word-break: auto-phrase; }

/* 見出し行(アイコン＋アプリ名)。法務ページの .brand より少し強く出す。 */
.lp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 0;
}
.lp-brand img {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex: none;
}
.lp-brand .name {
  font-weight: 700;
  font-size: 17px;
  color: var(--noren-ink);
  letter-spacing: 0.02em;
}

/* ヒーロー。広い画面では左に文章＋CTA、右にスクショを並べる。
   CTA(公開ステータス)は左カラムの中に入れる。スクショの下に置くと、
   その高さぶん画面外へ押し出されてしまうため。
   狭い画面では縦積みになり、順序は 見出し→リード→タグ→CTA→スクショ。
   この順ならCTAは最初の画面に収まる。 */
.lp-hero {
  display: grid;
  gap: 24px;
  align-items: start;
  padding: 20px 0 4px;
}
@media (min-width: 760px) {
  .lp-hero { grid-template-columns: 1.05fr 0.95fr; gap: 36px; }
}
/* ヒーローの中では、上の余白を詰めて塊として見せる。 */
.lp-hero .lp-cta { margin-top: 26px; padding: 24px 20px; }
.lp-hero .lp-cta h2 { font-size: 19px; }
.lp-hero h1 {
  font-size: 30px;
  line-height: 1.3;
  margin: 0 0 14px;
}
.lp-hero .lead { margin: 0 0 14px; font-size: 16px; }
.lp-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.lp-tags li {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  background: var(--surface);
}

/* スクリーンショット。端末のガラス面に見えるよう角丸＋薄い枠。 */
.lp-shot {
  display: block;
  width: 100%;
  /* height属性を書いているので、auto を指定しないと縦に伸びる。
     width/height属性自体は読み込み中のガタつき防止のために残す。 */
  height: auto;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.lp-shot-cap {
  max-width: 300px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}
/* 系譜セクションだけスクショ2枚を並べる。狭い画面では縦積み。 */
.lp-shots {
  display: grid;
  gap: 24px;
  margin: 22px 0 0;
}
@media (min-width: 560px) {
  .lp-shots { grid-template-columns: 1fr 1fr; gap: 20px; }
  .lp-shots .lp-shot { max-width: 220px; }
}

/* 数字ストリップ。規模を1行で見せる。 */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0 8px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.lp-stats .n {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: var(--noren-ink);
  line-height: 1.3;
  /* 「1,900店以/上」のように数字ごと割れるのを防ぐ。
     3カラムのまま狭い画面に入るよう、下で文字を小さくする。 */
  white-space: nowrap;
}
@media (max-width: 480px) {
  .lp-stats { gap: 6px; }
  .lp-stats .n { font-size: 15px; }
  .lp-stats .k { font-size: 11px; }
}
.lp-stats .k {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 3px;
}
.lp-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.7;
}

/* 補足行(.lp-note)の直後に置く、店舗一覧(/shop)への1行リンク。
   ⚠️ CTAではない。ページ内のCTAは .lp-cta の1箇所だけという原則は変えない。
   なので .lp-note と同じ字の大きさ・同じ行間のまま、下線と矢印だけで
   「押せる」ことを示す。ここを大きくしたり囲みやボタンにすると
   ファーストビュー直下に第2のCTAが生えたように見えるので、寸法を上げないこと。
   色は本文リンクの赤ではなく --ink-soft(フッターのリンクと同じ)。
   数字の主張のすぐ下で赤が光ると、注記の静けさが壊れる。 */
.lp-notelink {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  text-wrap: pretty;
  word-break: auto-phrase;
}
.lp-notelink a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.lp-notelink a::after { content: " →"; }
.lp-notelink a:hover { color: var(--noren-ink); border-color: var(--noren); }

/* セクション。h2 は法務ページと同じ意匠(左のオレンジ罫)を引き継ぐ。 */
.lp-sec { margin-top: 44px; }
.lp-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--noren-ink);
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.lp-sec h2 { margin-top: 0; }

/* 系譜の実例。等幅で経路を見せる。長い場合は横スクロール。 */
.lp-chain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--soup);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
}
.lp-chain .t {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-mute);
}
.lp-chain .path {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  font-weight: 600;
}
.lp-chain .path .arrow { color: var(--soup); font-weight: 400; padding: 0 2px; }

/* 機能の箇条書き。行頭に丸を置かず、見出し＋説明の2段にする。 */
.lp-feats { list-style: none; margin: 16px 0 0; padding: 0; }
.lp-feats li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.lp-feats li:last-child { border-bottom: 0; }
.lp-feats b { display: block; font-size: 15px; margin-bottom: 2px; }
.lp-feats span { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }

/* 「作った人」。マスコットは背景が赤ベタなので円形に切り抜く。 */
.lp-author {
  display: grid;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .lp-author { grid-template-columns: 108px 1fr; gap: 22px; }
}
.lp-author img {
  width: 108px; height: 108px;
  border-radius: 50%;
  object-fit: cover;
  justify-self: center;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.lp-author p { margin: 0 0 12px; }
.lp-sign { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

/* CTA。公開前/公開後の差し替えはこのブロックの中だけで完結させる。 */
.lp-cta {
  margin: 52px 0 0;
  padding: 30px 24px;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.lp-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--noren);
  border-radius: 999px;
  padding: 5px 14px;
}
@media (prefers-color-scheme: dark) {
  .lp-badge { color: #17130f; }
}
.lp-cta h2 {
  border-left: 0;
  padding-left: 0;
  margin: 14px 0 10px;
  font-size: 21px;
}
.lp-cta p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; }
.lp-btn {
  display: inline-block;
  margin: 18px 0 0;
  padding: 13px 30px;
  background: var(--noren);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  transition: opacity .15s, transform .1s;
}
.lp-btn:hover { opacity: .9; transform: translateY(-1px); }
@media (prefers-color-scheme: dark) {
  .lp-btn { color: #17130f; }
}
.lp-sub { display: block; margin-top: 14px; font-size: 13.5px; }

/* フッターの法的リンク。目立たせないが必ず到達できるようにする。 */
.lp-footlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 56px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.lp-footlinks a { color: var(--ink-soft); text-decoration: none; }
.lp-footlinks a:hover { color: var(--noren-ink); text-decoration: underline; }

/* インデックスページ用カード */
.cards { display: grid; gap: 14px; margin: 28px 0; }
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  transition: border-color .15s, transform .1s;
}
.card:hover { border-color: var(--noren); transform: translateY(-1px); }
.card .t { font-size: 17px; font-weight: 700; color: var(--noren-ink); margin: 0 0 4px; }
.card .d { font-size: 14px; color: var(--ink-soft); margin: 0; }


/* ===== 系譜ページ(/lineage) =====
   罫線は li の ::before(横棒)と ::after(縦棒)で引く。
   最後の子だけ縦棒を途中で止めることで └ の形になる。
   ⚠ 幅を「列」で取る樹形図には戻さないこと。実測したところ吉村家の木が
     1585x2740px になり、380px の画面では全体の6%しか見えなかった。
   ⚠ 店名を画像や <svg text> にしないこと。リンクでなくなると内部リンクが消える。 */

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 9px; }
.tree li { position: relative; }
.tree ul > li { padding-left: 19px; }
.tree ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 13px;
  height: 1px;
  background: var(--tree-line);
}
.tree ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tree-line);
}
.tree ul > li:last-child::after { bottom: auto; height: 15px; }

.nd {
  display: flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 5px 0;
}
.nd i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  top: -2px;
  background: var(--surface);
  border: 1px solid var(--tree-line);
}
/* 弟子がいる店は丸を塗る */
.nd-branch i { background: var(--tree-line); border-color: var(--tree-line); }
.nd .nm { min-width: 0; }
.nd em { font-style: normal; font-size: 11px; color: var(--ink-mute); margin-left: 8px; flex: none; }
/* その店から広がった店の数 */
.nd u {
  text-decoration: none;
  font-size: 10px;
  color: var(--ink-mute);
  margin-left: 7px;
  flex: none;
  background: var(--accent-bg);
  border-radius: 8px;
  padding: 1px 6px;
}
.nd b {
  font-weight: 400;
  font-size: 10px;
  color: var(--ink-mute);
  margin-left: 7px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
}
.nd:hover { color: var(--noren); }
.nd:hover i { background: var(--noren); border-color: var(--noren); }
.nd-root { font-size: 16px; font-weight: 700; color: var(--noren-ink); }
.nd-root i {
  width: 9px;
  height: 9px;
  margin-right: 7px;
  background: var(--noren);
  border-color: var(--noren);
}
.nd-closed .nm { color: var(--ink-mute); }

.tree-block {
  margin: 0 0 34px;
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tree-block h2 {
  margin: 0 0 10px;
  font-size: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.t-meta { float: right; font-weight: 400; font-size: 12px; color: var(--ink-mute); }

.lineage-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; }
.lineage-toc a {
  font-size: 13px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 3px 10px;
}
.lineage-toc a b { color: var(--ink-mute); font-weight: 400; margin-left: 5px; }
.lineage-toc a:hover { color: var(--noren); border-color: var(--noren); }

.lineage-stat {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lineage-stat div { min-width: 88px; }
.lineage-stat b { display: block; font-size: 22px; line-height: 1.3; }
.lineage-stat span { font-size: 12px; color: var(--ink-mute); }
.lineage-hint { font-size: 12px; color: var(--ink-mute); margin: 0 0 28px; }

@media (max-width: 480px) {
  .t-meta { float: none; display: block; }
  .tree-block { padding: 14px 12px 12px; }
  .tree ul { padding-left: 6px; }
  .tree ul > li { padding-left: 15px; }
  .tree ul > li::before { width: 10px; }
  .nd { font-size: 13px; }
}