/* 姓氏の公開ページ（2026-09-08）
   正: 統括フォルダ/姓氏公開ページ_見本_20260907.html。色はすべて変数。 */

:root{
  color-scheme:light dark;
  --paper:#FAFAF6;
  --card:#FFFFFF;
  --ink:#1E211C;
  --ink-2:#454B42;
  --muted:#7A8076;
  --rule:#E1E5DC;
  --rule-2:#EDF0E9;
  --midori:#3F5C3A;
  --midori-2:#5C7A55;
  --midori-bg:#EDF2EA;
  --kin:#9C7C2E;
  --kin-bg:#F5EFDF;
  --lock:#8A8F85;
  --lock-bg:#F0F1ED;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#151814;
    --card:#1C201B;
    --ink:#E9ECE4;
    --ink-2:#C2C8BC;
    --muted:#8E958A;
    --rule:#333A31;
    --rule-2:#282E26;
    --midori:#96BC8C;
    --midori-2:#7FA576;
    --midori-bg:#1F2A1C;
    --kin:#D9B463;
    --kin-bg:#2E2617;
    --lock:#8E958A;
    --lock-bg:#242822;
  }
}
:root[data-theme="dark"]{
  --paper:#151814;
  --card:#1C201B;
  --ink:#E9ECE4;
  --ink-2:#C2C8BC;
  --muted:#8E958A;
  --rule:#333A31;
  --rule-2:#282E26;
  --midori:#96BC8C;
  --midori-2:#7FA576;
  --midori-bg:#1F2A1C;
  --kin:#D9B463;
  --kin-bg:#2E2617;
  --lock:#8E958A;
  --lock-bg:#242822;
}

html{background:var(--paper);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:16px;
  line-height:2.0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;}
a{color:var(--midori);}
.gothic{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;}

.page{max-width:760px;margin:0 auto;padding:0 24px 100px;}

/* --- サイト見出し --- */
.site{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:22px 0 18px;border-bottom:1px solid var(--rule);flex-wrap:wrap;}
.site .brand{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--midori);}
.site .brand a{color:inherit;text-decoration:none;}
.site nav{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;}
.site nav a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;}
.site nav a:hover,.site nav a:focus-visible{color:var(--midori);border-bottom-color:var(--midori);}

.crumb{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12px;color:var(--muted);padding:16px 0 0;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--midori);}

h1{font-size:clamp(30px,6vw,44px);font-weight:900;letter-spacing:.06em;margin:14px 0 0;line-height:1.35;}
h1.small{font-size:clamp(24px,4.5vw,32px);}
.yomi{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13px;color:var(--muted);letter-spacing:.2em;margin-top:6px;}
.yomi .alias{letter-spacing:.04em;}

.meta{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:18px;padding:14px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12.5px;color:var(--muted);}
.meta b{color:var(--ink-2);font-weight:500;}
.meta b a{color:inherit;}

h2{font-size:20px;font-weight:700;letter-spacing:.05em;color:var(--midori);
  margin:52px 0 0;padding-bottom:9px;border-bottom:2px solid var(--midori);}
h3{font-size:16px;font-weight:700;margin:32px 0 0;padding-left:12px;
  border-left:3px solid var(--kin);letter-spacing:.04em;}
p{margin:18px 0 0;color:var(--ink-2);}
p.lead{font-size:17px;color:var(--ink);}
em.mark{font-style:normal;background:linear-gradient(transparent 62%,var(--midori-bg) 62%);}

/* 成り立ちの型（概観） */
.kata{margin-top:22px;padding:12px 16px;border-left:3px solid var(--kin);background:var(--kin-bg);
  font-size:12.5px;line-height:1.9;color:var(--ink-2);}
.kata .k{display:block;color:var(--kin);font-weight:700;letter-spacing:.06em;margin-bottom:2px;}

/* --- 分布 --- */
.bunpu{margin:22px 0 0;border:1px solid var(--rule);background:var(--card);}
.bunpu .row{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:11px 18px;border-bottom:1px solid var(--rule-2);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13.5px;}
.bunpu .row:last-child{border-bottom:none;}
.bunpu dt{color:var(--muted);}
.bunpu dd{margin:0;color:var(--ink-2);}
.bunpu dd a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);}
.bunpu dd a:hover{color:var(--midori);border-bottom-color:var(--midori);}
@media (max-width:480px){ .bunpu .row{grid-template-columns:1fr;gap:2px;} }

/* --- 系統一覧 --- */
.keito{margin-top:22px;border:1px solid var(--rule);background:var(--card);}
.keito .k{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--rule-2);}
.keito .k:last-child{border-bottom:none;}
.keito .n{font-size:14px;color:var(--midori);font-weight:700;}
.keito .t{font-size:15.5px;color:var(--ink);}
.keito .t small{display:block;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-size:12.5px;color:var(--muted);line-height:1.8;margin-top:2px;}
.lockchip{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:11px;
  color:var(--lock);background:var(--lock-bg);padding:2px 8px;border-radius:2px;white-space:nowrap;}
@media (max-width:480px){
  .keito .k{grid-template-columns:32px 1fr;}
  .keito .lockchip{grid-column:2;justify-self:start;}
}

.note{margin-top:18px;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-size:12.5px;line-height:1.9;color:var(--muted);
  background:var(--midori-bg);padding:14px 18px;border-left:3px solid var(--midori-2);}
.note b{color:var(--ink-2);}
.note.fixed{margin-top:28px;color:var(--ink-2);}

/* --- 問い＋導線 --- */
.toi{margin-top:56px;border:1px solid var(--midori-2);background:var(--card);padding:28px 26px 26px;}
.toi .q{font-size:19px;line-height:1.9;color:var(--ink);font-weight:500;}
.toi .q .big{color:var(--midori);font-weight:700;}
.toi .sub{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13.5px;color:var(--ink-2);margin-top:14px;line-height:1.95;}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.btn{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:14px;font-weight:700;
  padding:13px 22px;text-decoration:none;display:inline-block;letter-spacing:.04em;}
.btn.p{background:var(--midori);color:var(--paper);}
.btn.p:hover{background:var(--midori-2);}
.btn.s{border:1px solid var(--midori);color:var(--midori);}
.btn.s:hover{background:var(--midori-bg);}
.btn:focus-visible{outline:2px solid var(--kin);outline-offset:2px;}
.price{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-top:14px;}

/* --- 監修・規律 --- */
.kiritsu{margin-top:52px;border-top:1px solid var(--rule);padding-top:22px;
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12.5px;line-height:2.0;color:var(--muted);}
.kiritsu .who{color:var(--ink-2);font-weight:700;font-size:13.5px;}

.linenote{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  padding:16px 20px;background:var(--midori-bg);border-left:3px solid var(--midori-2);
  font-size:13.5px;line-height:1.95;color:var(--ink-2);}
.linenote .t{flex:1 1 320px;}
.linenote .t a{color:var(--midori);font-weight:700;text-decoration:none;border-bottom:1px solid var(--midori);}
.linenote .btn.small{font-size:13px;padding:10px 18px;white-space:nowrap;background:var(--card);}

.rel{margin-top:44px;}
.rel ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
.rel a{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13px;
  text-decoration:none;color:var(--ink-2);border:1px solid var(--rule);padding:7px 14px;background:var(--card);display:inline-block;}
.rel a:hover{border-color:var(--midori);color:var(--midori);}

.shutten{margin-top:44px;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:12.5px;color:var(--muted);line-height:1.95;}
.shutten ol{padding-left:1.3em;margin:10px 0 0;}
.shutten p{margin:6px 0 0;color:var(--muted);font-size:12.5px;}

/* --- 一覧・索引 --- */
.search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;font-size:13px;color:var(--muted);}
.search label{flex-basis:100%;}
.search input{flex:1 1 220px;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);}
.search input:focus-visible{outline:2px solid var(--kin);outline-offset:1px;}
.search button{font:inherit;font-weight:700;font-size:14px;padding:11px 20px;background:var(--midori);color:var(--paper);border:none;cursor:pointer;letter-spacing:.04em;}
.search button:hover{background:var(--midori-2);}

.rows{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;font-size:14px;}
.rows a,.rows span{display:inline-block;min-width:38px;text-align:center;padding:6px 8px;border:1px solid var(--rule);text-decoration:none;color:var(--ink-2);background:var(--card);}
.rows a small{display:block;font-size:10px;color:var(--muted);line-height:1.2;}
.rows a:hover,.rows a.on{border-color:var(--midori);color:var(--midori);}
.rows span{color:var(--lock);background:transparent;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);background:var(--card);padding:7px 13px;font-size:15px;letter-spacing:.04em;}
.chip small{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:11px;color:var(--muted);letter-spacing:.08em;}
.chip i{font-style:normal;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:10.5px;color:var(--midori);background:var(--midori-bg);padding:1px 6px;border-radius:2px;}
.chip:hover{border-color:var(--midori);color:var(--midori);}
.chip.off{color:var(--lock);background:transparent;}
.empty{font-size:13px;color:var(--muted);}

.samples{list-style:none;padding:0;margin:22px 0 0;}
.samples li{border:1px solid var(--rule);background:var(--card);margin-top:10px;}
.samples a{display:block;padding:16px 18px;text-decoration:none;color:var(--ink);}
.samples a b{display:block;font-size:17px;}
.samples a small{display:block;color:var(--kin);font-size:12px;margin-top:2px;}
.samples a span{display:block;color:var(--ink-2);font-size:14px;margin-top:6px;line-height:1.9;}
.samples a:hover{border-color:var(--midori);}

.shoken-body h2{font-size:18px;}
.shoken-body blockquote{margin:18px 0 0;padding:12px 18px;border-left:3px solid var(--kin);background:var(--kin-bg);color:var(--ink-2);}
.shoken-body table{border-collapse:collapse;margin-top:18px;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13.5px;}
.shoken-body th,.shoken-body td{border:1px solid var(--rule);padding:8px 12px;text-align:left;vertical-align:top;}
.shoken-body th{color:var(--muted);font-weight:500;background:var(--rule-2);}

.foot{margin-top:72px;border-top:1px solid var(--rule);padding-top:18px;font-size:12px;color:var(--muted);line-height:2;}
.foot a{color:var(--muted);text-decoration:none;}
.foot a:hover{color:var(--midori);}

/* ── わが家の姓を登録する（2026-09-10）── */
.watch{margin-top:48px;border:1px solid var(--midori-2);background:var(--card);padding:26px 24px 22px;}
.watch-title{margin:0;font-size:20px;color:var(--ink);}
.watch-lead{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-size:13.5px;color:var(--ink-2);margin-top:10px;line-height:1.95;}
.watch-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;}
.watch-line .small{font-size:12.5px;color:var(--muted);flex:1 1 240px;line-height:1.8;}
.watch-or{margin-top:22px;padding-top:16px;border-top:1px dashed var(--rule);font-size:13px;font-weight:700;color:var(--midori);}
.watch-form{margin-top:10px;font-size:13px;color:var(--muted);}
.watch-form label{display:block;margin-top:12px;}
.watch-form label small{margin-left:8px;color:var(--muted);font-weight:400;}
.watch-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;}
.watch-form input[type=text],.watch-form input[type=email]{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);}
.watch-form input[type=email]{margin-top:6px;}
.watch-form input:focus-visible{outline:2px solid var(--kin);outline-offset:1px;}
.watch-form button{margin-top:16px;border:none;cursor:pointer;}
.watch-privacy{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.8;}
.watch .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.chip.wait{color:var(--muted);border-style:dashed;cursor:default;}
@media (max-width:480px){.watch-names{grid-template-columns:1fr;}}