/* 暮らしのとなり（一般社団法人 住まいとくらしの相談支援協会）
   読み手の中心は高齢の方とご家族＝本文は大きく・行間は広く・色の差ははっきり。
   色はここ（:root）だけが持つ。 */
:root {
  --bg: #fbf8f1;        /* 生成り */
  --paper: #fffdf8;
  --ink: #33281f;       /* 焦茶の墨 */
  --sub: #5c5047;
  --brown: #6d3e24;     /* 柿渋＝ロゴの左の手 */
  --brown-dark: #55301b;
  --green: #5d6c53;     /* 苔＝ロゴの右の手 */
  --green-dark: #48563f;
  --green-soft: #eceee4;
  --amber: #e8a44f;     /* 窓のあかり＝飾りだけ（文字には使わない） */
  --amber-soft: #f8ecd9;
  --line: #e4dccd;
  --line-strong: #9c8c74;                     /* 押せる枠（地との比 3.2:1） */
  --warm: #f4ece0;
  --focus: #b5651d;
  --r: 12px;
  --t-quick: 150ms;                            /* 色・影の切り替わり＝画面の移り変わり（150ms）と同じ長さ */
  --t-soft: 200ms;                             /* 幕を閉じる・消える */
  --ease-out: cubic-bezier(.2, .7, .2, 1);     /* 序章の印が帯へ収まる時と同じ曲線 */
  --wrap: 920px;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: .03em;
  padding-bottom: 76px; /* 画面下の電話の帯のぶん */
}

@media (min-width: 760px) {
  body { font-size: 19px; padding-bottom: 0; }
}
body { line-break: strict; }

a { color: var(--green-dark); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--brown); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

img, svg { max-width: 100%; }
.doors .more { display: block; width: fit-content; padding: 6px 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 10; }

/* 見出しは明朝＝ロゴの文字と同じ書体 */
h1, h2, h3, .brand-name, .foot-org, ol.steps b, .qa .q { font-family: var(--mincho); font-weight: 700; }

/* ── 上の帯 */
.site-head { background: var(--paper); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand svg { width: 48px; height: 48px; flex: none; }
.brand-name { display: block; font-size: 24px; line-height: 1.25; color: var(--ink); letter-spacing: .1em; }
.brand-sub { display: block; font-size: 14px; line-height: 1.5; color: var(--sub); letter-spacing: .04em; }
.head-tel { display: none; text-align: right; text-decoration: none; color: var(--ink); line-height: 1.3; }
.head-tel b { display: block; font-size: 26px; color: var(--brown); letter-spacing: .05em; }
.head-tel span { font-size: 14px; color: var(--sub); }
@media (min-width: 760px) { .head-tel { display: block; } }

/* ── メニュー（隠さない＝開け閉めの操作を要らなくする。スマホは2列のボタン） */
.nav { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap); display: grid; grid-template-columns: 1fr 1fr; }
.nav a { display: block; color: var(--ink); text-decoration: none; padding: 11px 14px; font-size: 16px; line-height: 1.5; text-align: center; border-bottom: 1px solid var(--line); }
.nav li:nth-child(odd) a { border-right: 1px solid var(--line); }
.nav a:hover { color: var(--brown); background: var(--warm); }
.nav a[aria-current="page"] { color: var(--brown); font-weight: 700; background: var(--amber-soft); }
@media (min-width: 760px) {
  .nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .nav a, .nav li:nth-child(odd) a { padding: 13px 18px; border: 0; position: relative; }
  .nav a[aria-current="page"] { background: none; }
  .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--amber); }
}
@media (min-width: 760px) and (max-width: 959px) {
  .nav a, .nav li:nth-child(odd) a { padding: 13px 11px; font-size: 15px; }
  .nav a[aria-current="page"]::after { left: 11px; right: 11px; }
}

/* ── 本文 */
main { display: block; }
.hero { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero .wrap { padding-top: 48px; padding-bottom: 48px; position: relative; }
.hero h1 { font-size: clamp(28px, 2.6vw + 18px, 38px); line-height: 1.65; margin: 0 0 22px; color: var(--ink); letter-spacing: -.03em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--brown); }
@media (min-width: 760px) { .hero .wrap { padding-top: 64px; padding-bottom: 60px; } }
.hero-mark { display: none; }
/* 写真＝スマホは文字と電話の後ろに帯で置く／PC は右半分に敷き、左端を紙の色へ溶かす */
.hero-photo { margin: 0; position: relative; }
@media (max-width: 959px) { .hero .wrap { padding-bottom: 30px; } }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 760px) and (max-width: 959px) { .hero-photo img { aspect-ratio: 16 / 9; } }
@media (min-width: 960px) {
  .hero .wrap > * { max-width: 540px; }
  .hero .btns { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero .wrap { padding-top: 76px; padding-bottom: 72px; }
  .hero-photo { position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% + 120px); }
  .hero-photo picture, .hero-photo img { height: 100%; }
  .hero-photo img { aspect-ratio: auto; object-position: 58% 50%; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--paper) 0, rgba(255,253,248,0) 26%); }
}
.lead { font-size: 1.05em; margin: 0 0 30px; }

.page-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-top: 36px; padding-bottom: 30px; }
.page-head h1 { font-size: clamp(27px, 1.9vw + 20px, 34px); line-height: 1.5; margin: 0; color: var(--ink); letter-spacing: -.03em; }
.page-head p { margin: 12px 0 0; }
/* ページの頭の写真＝スマホは文の下・PC は右 40%。文字は写真に載せない */
.head-photo { margin: 20px 0 0; }
.head-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
@media (min-width: 960px) {
  .page-head.has-photo .wrap { display: grid; grid-template-columns: 1fr 40%; column-gap: 48px; align-items: center; }
  .head-photo { margin: 0; }
}
/* 節の中の写真＝本文列と同じ幅 */
.sec-photo { margin: 0 0 20px; max-width: 36em; }
.sec-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
/* 写真帯＝全幅・3:2 を高さで切る・上下 48px を節の地色へ溶かす・文字は載せない */
.band { margin: 16px 0 0; position: relative; }
.band img { display: block; width: 100%; height: clamp(220px, 32vw, 420px); object-fit: cover; object-position: 50% 28%; }
/* 溶かしは写真（picture）の上下だけに掛ける＝下のキャプションを覆わない */
.band picture { display: block; position: relative; }
.band picture::before, .band picture::after { content: ""; position: absolute; left: 0; right: 0; height: 48px; pointer-events: none; }
.band picture::before { top: 0; background: linear-gradient(180deg, var(--bg), rgba(251,248,241,0)); }
.band picture::after { bottom: 0; background: linear-gradient(0deg, var(--bg), rgba(251,248,241,0)); }
.band figcaption { font-size: 13px; line-height: 1.6; letter-spacing: .12em; color: var(--sub); text-align: right; padding: 6px 20px 0; max-width: var(--wrap); margin: 0 auto; }
/* /sodan の先頭の目次 */
.toc { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.toc a { display: inline-block; padding: 10px 14px; border: 1px solid var(--line-strong); border-left: 4px solid var(--amber); border-radius: 6px var(--r) var(--r) 6px; background: var(--bg); color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.5; }
@media (hover: hover) { .toc a:hover { border-color: var(--brown); border-left-color: var(--brown); } }

/* 明朝の見出しは字間を足さない（0）。Zen Old Mincho は palt（かなの詰め）が効かない＝2026-10-04 実測で幅が同じ 405px。
   字間 .06em を足すと、かなの小さい字面の左右が空いて間延びして見える＝大きい見出し（h1・h2）だけ -.03em 詰める（6書体の比較で決定）。 */

/* 見出しは文節で折り返す（「住/まい」のような切れ方をさせない・対応していないブラウザは従来どおり） */
h1, h2, h3, .btn, ul.topics a, ol.steps b, ol.vows b, .doors b { word-break: auto-phrase; text-wrap: balance; }
main p, main li, main dd, .contact-box .org, .facts dd { text-wrap: pretty; }
ol.vows p, .doors span { word-break: auto-phrase; }
.nb { display: inline-block; max-width: 100%; }  /* 1行に入る時は塊のまま次の行へ送る。入らない時（文字の拡大）だけ中で折れる */
.paren { margin-left: -.5em; }  /* 行頭の全角かっこの左の空きを詰める */

section { padding: 48px 0 8px; }
/* 見出しの頭＝ロゴの「窓ふたつ」 */
h2 { position: relative; font-size: 24px; line-height: 1.5; margin: 0 0 22px; padding-left: 38px; color: var(--ink); letter-spacing: -.03em; }
h2::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 2.5px; background: var(--amber); box-shadow: 14px 0 0 var(--amber); }
@media (min-width: 760px) { h2 { font-size: 27px; } }
h3 { font-size: 20px; line-height: 1.55; margin: 28px 0 8px; color: var(--brown); letter-spacing: 0; }
p { margin: 0 0 16px; }
/* 本文の1行は全角36字まで（高齢の読者は行の戻りで迷う） */
main p, main ul.plain, main ol.steps, main dl.outline, main .qa, main ol.vows { max-width: 36em; }
.hero p, .facts dd, .contact-box p, ul.topics { max-width: none; }
/* 本文中の「→次のページ」は指で押せる高さに（44px以上） */
.more { display: inline-block; padding: 10px 0; text-decoration-thickness: 1px; }
.more::after { content: "›"; margin-left: .4em; color: var(--brown); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin: 0 0 16px; max-width: 36em; }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .cards.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.soft { background: none; border: 0; border-left: 3px solid var(--green); border-radius: 0; padding: 4px 0 4px 20px; margin: 20px 0 24px; }
.soft h3 { color: var(--green-dark); }
.warm { background: var(--warm); border-color: transparent; }

ul.plain { list-style: none; margin: 0 0 16px; padding: 0; }
ul.plain li { position: relative; padding-left: 1.3em; margin-bottom: 8px; }
ul.plain li::before { content: "・"; position: absolute; left: 0; color: var(--brown); }
ul.plain.win li::before { content: ""; top: .55em; width: 11px; height: 11px; border: 1.5px solid var(--amber); border-radius: 1.7px; }

ul.topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { ul.topics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; } }
ul.topics a { display: block; position: relative; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 6px var(--r) var(--r) 6px; padding: 15px 44px 15px 18px; text-decoration: none; color: var(--ink); height: 100%; align-content: center; }
ul.topics a:hover { border-color: var(--brown); border-left-color: var(--brown); background: #fff; }
ul.topics a::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-52%); color: var(--brown); font-size: 1.3em; }

/* トップの「確かめたい事実」＝紹介する方が最初に見る4つ（運営・費用・誰から・仲介しない）。箱にせず、細い線で区切った1列 */
.facts { background: var(--bg); border-bottom: 1px solid var(--line); }
.facts dl { margin: 0 auto; padding-top: 8px; padding-bottom: 8px; display: grid; }
.facts dl div { display: grid; align-content: start; grid-template-columns: 4.8em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dl div:last-child { border-bottom: 0; }
.facts dt { font-family: var(--mincho); font-weight: 700; color: var(--brown); letter-spacing: .08em; }
.facts dd { margin: 0; }
/* PC は3列。1列の幅が狭い（約266px）ので、見出し語を上・本文を下に積む */
@media (min-width: 960px) { .facts dl { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .facts dl div { border-bottom: 0; grid-template-columns: 1fr; gap: 2px; } }

/* 3者への入口＝見出しを置かず、呼び名（明朝・茶）＋1〜2文。スマホは縦に3つ、PC は横に3つ */
.doors { background: var(--paper); border-bottom: 1px solid var(--line); }
.doors ul { list-style: none; margin: 0 auto; padding: 8px 20px; max-width: var(--wrap); display: grid; }
.doors li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.doors li:last-child { border-bottom: 0; }
.doors b { display: block; font-family: var(--mincho); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--brown); letter-spacing: .04em; margin-bottom: 4px; }
.doors span { display: block; }
@media (min-width: 960px) {
  .doors ul { grid-template-columns: repeat(3, 1fr); column-gap: 40px; padding: 24px 20px; }
  .doors li { border-bottom: 0; padding: 0; }
}

/* 大切にしていること＝漢数字の縦の列（同じ形のカードを並べない） */
ol.vows { list-style: none; counter-reset: v; margin: 0; padding: 0; }
ol.vows > li { counter-increment: v; position: relative; padding: 24px 0 24px 64px; border-top: 1px solid var(--line); }
ol.vows > li:last-child { border-bottom: 1px solid var(--line); }
/* 漢数字は細い枠の窓に入れる（「一」が横棒だけに見えないように・流れの番号＝塗りの窓と対） */
ol.vows > li::before { content: counter(v, cjk-ideographic); position: absolute; left: 0; top: 24px; width: 40px; height: 40px; box-sizing: border-box; border: 1.5px solid var(--brown); border-radius: 5.5px; text-align: center; font-family: var(--mincho); font-weight: 700; font-size: 20px; line-height: 37px; color: var(--brown); }
ol.vows b { display: block; font-family: var(--mincho); font-weight: 700; font-size: 20px; line-height: 1.55; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
ol.vows p { margin: 0; }
@media (min-width: 760px) { ol.vows > li { padding-left: 72px; } ol.vows b { font-size: 22px; } }

/* 流れ＝番号の窓（塗り）を左の1本線でつなぐ。箱にしない（箱＝押せる物・窓口だけ） */
ol.steps { list-style: none; counter-reset: s; margin: 0 0 8px; padding: 0; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 28px 60px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 5.5px; background: var(--brown); color: #fff; font-family: var(--mincho); font-weight: 700; text-align: center; line-height: 40px; font-size: 20px; }
ol.steps > li::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 0; width: 1px; background: var(--line); }
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps > li:last-child::after { display: none; }
ol.steps b { display: block; font-size: 20px; line-height: 1.55; margin: 4px 0 6px; color: var(--ink); letter-spacing: 0; }
ol.steps p:last-child { margin-bottom: 0; }
@media (min-width: 760px) { ol.steps > li { padding-left: 64px; } }

dl.outline { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
dl.outline div { display: grid; grid-template-columns: 1fr; padding: 15px 22px; border-bottom: 1px solid var(--line); }
dl.outline div:last-child { border-bottom: 0; }
dl.outline dt { font-weight: 700; color: var(--brown); }
dl.outline dd { margin: 0; }
@media (min-width: 760px) { dl.outline div { grid-template-columns: 200px 1fr; gap: 16px; } }

/* よくある質問＝開け閉めせず全部見せる（印刷しても答えが消えない） */
.qa { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; padding: 18px 22px 6px; }
.qa .q { position: relative; padding-left: 38px; margin: 0 0 8px; font-size: 1.04em; line-height: 1.7; color: var(--ink); border: 0; letter-spacing: 0; }
.qa .q::before { content: "問"; position: absolute; left: 0; top: 0; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--brown); font-family: var(--mincho); font-weight: 700; }
.qa .q::after { display: none; }
.qa .a { position: relative; padding-left: 38px; }
.qa .a::before { content: "答"; position: absolute; left: 0; top: 0; color: var(--green-dark); font-family: var(--mincho); font-weight: 700; }

/* /shienkata「それぞれの方へ」＝箱をやめて h3＋本文＋ヘアライン */
.each { padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.each:last-child { border-bottom: 0; }
.each h3 { margin-top: 20px; }

/* /kyokai「この窓口について」＝手紙の文字 */
.letter p { font-family: var(--mincho); font-weight: 400; line-height: 2.1; letter-spacing: .02em; }

/* /otoiawase＝メールソフトが開かない端末のため、アドレスを選べる大きな文字で */
.addr { margin: 12px 0 20px; }
.addr span { font-size: clamp(17px, 4.9vw, 22px); letter-spacing: .04em; user-select: all; -webkit-user-select: all; color: var(--ink); word-break: break-all; }

/* /privacy＝法文に窓の印を付けない */
.plain-h h2 { padding-left: 0; }
.plain-h h2:not(:first-child) { margin-top: 40px; }
.plain-h h2::before { display: none; }

/* ── 電話・メールの案内 */
.contact-box { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--brown); border-radius: var(--r); padding: 26px 24px; max-width: 36em; }
.contact-box .org { font-weight: 700; margin-bottom: 10px; word-break: auto-phrase; }
.btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
.btns > .btn { min-width: 0; }
.btns > .btn:only-child { grid-column: 1 / -1; }
.btn small { overflow-wrap: anywhere; }
@media (min-width: 760px) { .btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.btn { display: block; text-align: center; text-decoration: none; border-radius: var(--r); padding: 15px 16px; font-weight: 700; line-height: 1.5; }
.btn small { display: block; font-weight: 400; font-size: 15px; letter-spacing: .06em; }
.btn-tel { background: var(--brown); color: #fff; font-size: 26px; letter-spacing: .06em; box-shadow: 0 3px 0 var(--brown-dark); }
.btn-tel { white-space: normal; }  /* 100% では1行に収まる（390 で約210px／350px）。文字を2倍にした時だけ折れる＝折らないと 512px に広がり画面全体が 70% に縮む（2026-10-04 実測） */
@media (hover: hover) { .btn-tel:hover { background: var(--brown-dark); color: #fff; } }
.btn-mail { background: var(--paper); color: var(--green-dark); border: 2px solid var(--green); font-size: 19px; }
@media (hover: hover) { .btn-mail:hover { background: var(--green-soft); color: var(--green-dark); } }
.note { font-size: 15px; color: var(--sub); line-height: 1.85; }

/* ── 下の帯 */
.site-foot { margin-top: 56px; background: var(--brown-dark); font-size: 15px; line-height: 1.85; color: #eadfce; }
.site-foot .wrap { padding-top: 34px; padding-bottom: 32px; }
.site-foot a { color: #fff3df; }
.site-foot a:hover { color: var(--amber); }
.site-foot .foot-org { font-size: 18px; color: #fff; margin-bottom: 6px; letter-spacing: .06em; }
@media (max-width: 759px) { .site-foot .foot-org { font-size: 16px; letter-spacing: .02em; } }
.site-foot .foot-contact { color: #fff; margin-bottom: 4px; font-size: 17px; overflow-wrap: anywhere; }
.site-foot .foot-contact a { color: #fff; display: inline-block; padding: 8px 0; }
.site-foot .foot-links { margin: 16px 0; padding: 14px 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.site-foot .foot-legal { margin: 0 0 10px; color: #dccfbc; }
.site-foot .copy { margin: 0; font-size: 13px; color: #dccfbc; }
.site-foot .foot-links a { display: inline-block; padding: 8px 0; }
@media (max-width: 759px) { .site-foot .foot-links { gap: 4px 20px; font-size: 15px; } .site-foot .foot-links a { padding: 11px 0; } }

/* スマホだけ＝画面の下に電話とメールを常に出す */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 8px 10px; background: rgba(251, 248, 241, .97); border-top: 1px solid var(--line); z-index: 5; }
.callbar a { display: block; text-align: center; text-decoration: none; border-radius: var(--r); padding: 10px 6px; font-weight: 700; font-size: 17px; line-height: 1.4; }
.callbar .c-tel { background: var(--brown); color: #fff; border: 2px solid var(--brown); }
.callbar .c-mail { background: var(--paper); color: var(--green-dark); border: 2px solid var(--green); }
@media (min-width: 760px) { .callbar { display: none; } }
body:has(#mail) .callbar { display: none; }
body:has(#mail) { padding-bottom: 0; }

/* ── 序章（トップの最初の1回・約2.7秒）＝手が左右から寄り（0〜0.92秒）、窓に灯がともり（0.76〜1.3秒）、
   名前が出て一呼吸おき、印が上の帯の自分の場所へ収まる（2.05〜2.7秒）。
   出す判定は kurashi_site.py の INTRO_HEAD（html.ov）。幕は紙と同じ色＝白い画面を待たせない。
   動かすのは transform・opacity・fill だけ（安い端末でもコマ落ちしない）。最初のひと触りは幕を閉じるだけ＝長押しの指が離れた時のクリックも1回だけ捨てる（下の電話ボタンに落ちない）。
   スクロールは止めない（止めると Windows でスクロールバーが消えて、印が着く瞬間に画面が8pxずれる）。 */
.ov-cur { display: none; }
.ov .ov-cur { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; background: var(--paper);
  animation: ovBg 500ms ease 2400ms forwards, ovGone 1ms linear 3600ms forwards; }
.ov-stage { display: flex; flex-direction: column; align-items: center; }
.ov-mark { width: clamp(120px, 28vw, 176px); height: auto; overflow: visible;
  animation: ovFly 650ms cubic-bezier(.2, .7, .2, 1) 2300ms forwards, ovHide 120ms ease 2830ms forwards; }
.ov-mark path, .ov-mark rect { transform-box: view-box; transform-origin: 50% 50%; }
.ov .k-lo { animation: ovInL 800ms cubic-bezier(.16, 1, .3, 1) both; }
.ov .k-ro { animation: ovInR 800ms cubic-bezier(.16, 1, .3, 1) both; }
.ov .k-li { animation: ovInL 800ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
.ov .k-ri { animation: ovInR 800ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
.ov .k-wl { animation: ovLamp 400ms cubic-bezier(.33, 0, .5, 1) 760ms both; }
.ov .k-wr { animation: ovLamp 400ms cubic-bezier(.33, 0, .5, 1) 900ms both; }
.ov-name { margin: 24px 0 0; font-family: var(--mincho); font-weight: 700; font-size: clamp(20px, 5vw, 28px); letter-spacing: .12em; color: var(--ink);
  opacity: 0; animation: ovName 600ms ease-out 1150ms forwards, ovNameOut 300ms ease 2300ms forwards; }
.ov-name span { font-size: .78em; }
.ov .site-head .brand svg { opacity: 0; animation: ovShow 120ms ease 2830ms forwards; }
@keyframes ovInL { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ovInR { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ovLamp { 0% { opacity: 0; fill: #f6cf8e; } 55% { opacity: 1; fill: #f6cf8e; } 100% { opacity: 1; fill: #e8a44f; } }
@keyframes ovName { to { opacity: 1; } }
@keyframes ovNameOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ovFly { to { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, .96)); } }
@keyframes ovHide { to { opacity: 0; } }
@keyframes ovShow { to { opacity: 1; } }
@keyframes ovBg { to { background-color: rgba(255, 253, 248, 0); } }
@keyframes ovGone { to { visibility: hidden; } }
/* 触ったら0.2秒で幕を閉じる */
.ov-skip .ov-cur { opacity: 0; transition: opacity var(--t-soft) var(--ease-out); }
.ov-skip .site-head .brand svg { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .ov .ov-cur { display: none; } .ov .site-head .brand svg { opacity: 1; animation: none; } }

/* ── 触った時の反応＝サイト全体で同じ長さ・同じ曲線（:root の --t-quick／--ease-out）。
   hover はマウスのある端末だけ、押した瞬間（:active）は指でもマウスでも同じ手応え。既定の灰色のタップ光は消す。 */
a, .btn, .nav a, .toc a, ul.topics a, .callbar a, .more {
  transition: color var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
a:active { color: var(--brown-dark); }
.btn-tel:active, .callbar .c-tel:active { background: var(--brown-dark); color: #fff; }
.btn-tel:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brown-dark); }   /* 3px の影が1pxに＝沈む */
.btn-mail:active, .callbar .c-mail:active { background: var(--green-soft); color: var(--green-dark); }
.nav a:active { background: var(--amber-soft); color: var(--brown); }
.toc a:active, ul.topics a:active { background: var(--warm); border-color: var(--brown); border-left-color: var(--brown); }
/* 下の帯（焦茶）の上では既定の焦点の色が 2.65:1 しか無い＝薄い生成りに */
.site-foot a:focus-visible { outline-color: #fff3df; }
/* 本文中の電話・メール＝行の高さは変えずに、押せる範囲だけ上下に広げる。拡大した時は中で折れる */
main p > a[href^="tel:"], main p > a[href^="mailto:"], main dd > a[href^="tel:"], main dd > a[href^="mailto:"] { padding: 12px 0; overflow-wrap: anywhere; }
/* 目次で着いた節＝見出しの窓に一度だけ灯がともる（序章の ovLamp と同じ色の順） */
section:target h2::before { animation: tgtLamp 1200ms ease-out 1; }
@keyframes tgtLamp {
  0%   { background: #f6cf8e; box-shadow: 14px 0 0 #f6cf8e, 0 0 0 7px rgba(232, 164, 79, .28), 14px 0 0 7px rgba(232, 164, 79, .28); }
  45%  { background: #f6cf8e; box-shadow: 14px 0 0 #f6cf8e, 0 0 0 7px rgba(232, 164, 79, .18), 14px 0 0 7px rgba(232, 164, 79, .18); }
  100% { background: var(--amber); box-shadow: 14px 0 0 var(--amber), 0 0 0 0 rgba(232, 164, 79, 0), 14px 0 0 0 rgba(232, 164, 79, 0); }
}
/* ── 文字の出方（ユーエスハウジングのサイトと同じ動き・2026-10-04 オーナー「ユーエスハウジングの仕様は取り入れたい」）
   ①トップの見出しは行ごとに窓の下から立ち上がり、続いてリード文・ボタン・注記がふわっと出る（CSSだけ＝JSが落ちても文字は出る）。
     見出しの文字そのものの opacity は触らない（opacity:0 の要素は表示の計測から外れる）。序章（.ov）の間は待ち、幕が上がってから動く。
   ②スクロールして入ってくる節は、滲みが晴れるように見出し→最初の段落の順で立つ（kurashi_site.py の MOTION が .reveal を付ける）。
     付けるのは「開いた時に画面の下にある節」だけ＝最初の画面は待たせない。
   ③章の見出しが画面の真ん中を越えたら、下の線が筆の運びで引かれる（.lit）。
   隠す状態はどれも JS が付けた印（.js／.reveal）の時だけ＝JSが動かない時はすべて最初から見えて、線も引いてある。
   写真は動かさない（ユーエスハウジングと同じ決め）。 */
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .ln i { display: block; font-style: normal; transform: translateY(108%); }
html:not(.ov) .hero h1 .ln i { animation: heroLine 1150ms cubic-bezier(.2, .78, .2, 1) 80ms both; }
html:not(.ov) .hero h1 .ln:nth-child(2) i { animation-delay: 210ms; }
html:not(.ov) .hero h1 .ln:nth-child(3) i { animation-delay: 340ms; }
html:not(.ov) .hero h1 .ln:nth-child(4) i { animation-delay: 470ms; }
html:not(.ov) .hero .lead { animation: heroRise 1000ms cubic-bezier(.2, .7, .2, 1) 620ms both; }
html:not(.ov) .hero .btns { animation: heroRise 1000ms cubic-bezier(.2, .7, .2, 1) 820ms both; }
html:not(.ov) .hero .note { animation: heroRise 1000ms cubic-bezier(.2, .7, .2, 1) 960ms both; }
.ov .hero :is(.lead, .btns, .note) { opacity: 0; }
@keyframes heroLine { to { transform: none; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 長い説明のページ（main.read）＝読んでいる所から墨が濃くなる。まだの段落も --sub（地との比 約7.6:1）で十分読める＝薄くしすぎない。
   一度濃くしたら戻さない（読み返す時に暗くなるのは邪魔＝ユーエスハウジングの手紙と同じ決め）。色だけ＝行の位置は1pxも動かさない。 */
.js main.read section p { transition: color .7s ease; }
.js main.read section p:not(.lit):not(.org) { color: var(--sub); }

.js section.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
.js section.reveal.is-visible { opacity: 1; transform: none; }
.js section.reveal :is(h2, h2 + p) { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity .85s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter .8s ease var(--d, 0s), color .7s ease; }
.js section.reveal.is-visible :is(h2, h2 + p) { opacity: 1; transform: none; filter: none; }
.js section.reveal h2 { --d: .14s; }
.js section.reveal h2 + p { --d: .3s; }

/* 線の先（右端）だけ薄い＝伸びている間は穂先が軽く、引き終わりに“抜き”が残る。伸び方は筆の運び（置く→入る→わずかに緩む→走る→少し行き過ぎて止まる）。 */
main h2::after { content: ""; display: block; width: min(46%, 168px); height: 2px; margin-top: 12px; transform-origin: left center;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber) 84%, rgba(232, 164, 79, .42) 100%); }
.plain-h h2::after { display: none; }
.js main h2::after { transform: scaleX(0); opacity: .5; }
.js main h2.lit::after { animation: secline .95s linear forwards; }
@keyframes secline {
  0%   { transform: scaleX(0); opacity: .5; }
  8%   { transform: scaleX(.018); opacity: .72; }
  20%  { transform: scaleX(.085); }
  34%  { transform: scaleX(.215); opacity: 1; }
  48%  { transform: scaleX(.40); }
  58%  { transform: scaleX(.545); }
  70%  { transform: scaleX(.72); }
  82%  { transform: scaleX(.875); }
  92%  { transform: scaleX(.985); }
  96%  { transform: scaleX(1.008); }
  100% { transform: scaleX(1); opacity: 1; }
}
/* 見出しの横の窓2つ＝見出しが画面の真ん中を越えたら、左の窓→右の窓の順に灯がともる（序章の ovLamp と同じ色の順＝淡い灯→いつもの琥珀）。
   灯る前の窓は生成りに近い色。灯った後の色は animation の外にも書く＝目次で着いた時の tgtLamp が終わっても消えない。 */
.js main h2::before { background: #ebdfc9; box-shadow: 14px 0 0 #ebdfc9; }
.js main h2.lit::before { background: var(--amber); box-shadow: 14px 0 0 var(--amber); animation: winLamp 1100ms cubic-bezier(.33, 0, .5, 1) 1; }
.js section:target h2.lit::before { animation: tgtLamp 1200ms ease-out 1; }
@keyframes winLamp {
  0%   { background: #ebdfc9; box-shadow: 14px 0 0 #ebdfc9; }
  28%  { background: #f6cf8e; box-shadow: 14px 0 0 #ebdfc9; }
  52%  { background: #f6cf8e; box-shadow: 14px 0 0 #f6cf8e; }
  100% { background: var(--amber); box-shadow: 14px 0 0 var(--amber); }
}

/* お問い合わせの枠の電話ボタン＝画面に入ったら一度だけ、窓の灯の色の輪がふわっと広がって消える（押す所へ目が行く）。 */
.contact-box .btn-tel.glow { animation: telGlow 1500ms ease-out 300ms 1; }
@keyframes telGlow {
  0%   { box-shadow: 0 3px 0 var(--brown-dark), 0 0 0 0 rgba(232, 164, 79, .6); }
  70%  { box-shadow: 0 3px 0 var(--brown-dark), 0 0 0 12px rgba(232, 164, 79, 0); }
  100% { box-shadow: 0 3px 0 var(--brown-dark), 0 0 0 0 rgba(232, 164, 79, 0); }
}

/* 見出しの読点・句点・閉じかっこを半分に詰める（kurashi_site.py の tsume が span.yk で包む） */
.yk { letter-spacing: -.5em; }

/* 押した手応え＝電話は既に沈む（3pxの影が1pxに）。メール・下の帯・項目の札も1pxだけ沈む */
.btn-mail:active, .callbar a:active, ul.topics a:active, .toc a:active { transform: translateY(1px); }

/* 動きを減らす設定でも、この細い線だけは引く（ユーエスハウジングと同じ＝オーナー指定 2026-08-02「引かれるようにして」）。
   ほかの文字の動きは下のブロックで全部止めて、最初から見せる。 */
/* 動きを減らす設定＝ここで足した動きも全部止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, .btn, .nav a, .toc a, ul.topics a, .callbar a, .more, .ov-skip .ov-cur { transition: none; }
  .btn-tel:active { transform: none; }
  section:target h2::before { animation: none; }
  .hero h1 .ln i, html:not(.ov) .hero h1 .ln i, .hero :is(.lead, .btns, .note), html:not(.ov) .hero :is(.lead, .btns, .note) { animation: none; transform: none; opacity: 1; }
  .js section.reveal, .js section.reveal :is(h2, h2 + p) { opacity: 1; transform: none; filter: none; transition: none; }
  .js main h2::before, .js main h2.lit::before { background: var(--amber); box-shadow: 14px 0 0 var(--amber); animation: none; }
  .js main.read section p:not(.lit):not(.org) { color: inherit; }
  .js main.read section p, .contact-box .btn-tel.glow { transition: none; animation: none; }
  .btn-mail:active, .callbar a:active, ul.topics a:active, .toc a:active { transform: none; }
}

/* ── 印刷（支援者の方が印刷してお渡しする時） */
@media print {
  .btn-tel { background: none; color: var(--brown); border: 2px solid var(--brown); box-shadow: none; }
  .ov .ov-cur { display: none !important; }
  .ov .site-head .brand svg { opacity: 1 !important; animation: none !important; }
  .hero h1 .ln i, .hero :is(.lead, .btns, .note), .js section.reveal, .js section.reveal :is(h2, h2 + p) { animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
  main h2::after { animation: none !important; transform: none !important; opacity: 1 !important; }
  .js main h2::before { background: var(--amber) !important; box-shadow: 14px 0 0 var(--amber) !important; animation: none !important; }
  .js main.read section p { color: var(--ink) !important; }
  .btn-mail { color: var(--green-dark); }
  .site-foot .foot-contact, .site-foot .foot-contact a { color: #333; }
  ol.steps > li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 11.5pt; line-height: 1.7; padding: 0; }
  .nav, .callbar, .skip, .no-print, .hero-mark { display: none !important; }
  .site-foot .foot-links, .band, .head-photo, .sec-photo { display: none !important; }
  .site-head .brand svg { width: 36pt; height: 36pt; }
  .site-head .wrap { padding: 0 0 6pt; }
  .head-tel { display: block; }
  section { padding: 12pt 0 0; }
  .card, .contact-box, ol.steps > li, dl.outline, .qa { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .qa .a { display: block; }
  a { color: inherit; text-decoration: none; }
  .site-foot { margin-top: 16pt; background: #fff; color: #333; }
  .site-foot .foot-org, .site-foot .foot-contact, .site-foot a, .site-foot .foot-legal, .site-foot .copy { color: #333; }
  h2::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}