/* エキテイ商会のホームページ（10/25 作り直し 3 版目）
   本人「サイト全体のデザインは https://www.shirahone.org/ を参考に」→ 本物の CSS（common.css）と計算済みスタイルから寸法を写した
   （ref/shirahone/measurements.md）。大きさの式 clamp() は元のまま（幅 375px で最小・1568px で最大）
   型：色は墨だけ・地は和紙の質感を固定で敷く・細い明朝 2 本（Hina Mincho と Zen Old Mincho の 400）で太字なし・
       見出しと短い言葉は縦書き・長い説明は横書き・余白を大きく・写真は端まで出し小さな窓を縁に重ねる・
       飾りは 1px の線と墨の点だけ・動きは「ぼかしが取れる」だけ
   朱は印と道すじの真ん中の駅だけ（元のサイトは強調の色を持たない）
   10/27 本人「重たい」→ 字体は使う字だけに絞って自前で配る（fonts/）・和紙の地の fixed をやめる（送るたびに画面全体を描き直していた）・
   写真は avif/webp・訪れた時の暖簾（WebGL）と季節の物をやめた。入口は shirahone.org と同じ、和紙の覆いに一言が浮かぶ形（hiraki.js・10/27 本人「墨書きはやめて shirahone.org のように」） */
@font-face { font-family: "Zen Old Mincho"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/zen-old-mincho.woff2) format("woff2"); }
@font-face { font-family: "Hina Mincho"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/hina-mincho.woff2) format("woff2"); }
:root {
  --paper: #f5f0e6; --ink: #1b1a17; --muted: #6b6760; --faint: #a59f94;
  --line-soft: #d8d0c2; --line-mid: #9b968c;
  --band-gray: #585957; --band-green: rgba(138, 143, 130, .4);
  --shu: #a8402c;
  --washi: url(img/washi.svg);
  --f-body: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-head: "Hina Mincho", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fs-base: clamp(.9375rem, .19vw + 14.3px, 1.0625rem);
  --fs-p: clamp(1rem, .28vw + 14.9px, 1.1875rem);
  --sp-sm: clamp(70px, 4.19vw + 54.3px, 120px);
  --sp-md: clamp(100px, 6.57vw + 75.4px, 170px);
  --sp-lg: clamp(130px, 6.71vw + 104.9px, 210px);
  --wide: min(94%, clamp(347px, 81.6vw + 41px, 1216px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; color: var(--ink);
  background: var(--washi), var(--paper);
  font-family: var(--f-body); font-weight: 400; font-size: var(--fs-base); line-height: 1.75;
  font-feature-settings: "palt";
}
@media (min-width: 960px) { body { line-height: 2; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .3s; }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--paper); padding: 8px 12px; }
.wide { width: var(--wide); margin-inline: auto; }
.tate { writing-mode: vertical-rl; white-space: nowrap; transform: scaleY(.9); transform-origin: top center; }
.caption { font-size: clamp(.75rem, .19vw + 11.3px, .875rem); line-height: 1.9; color: var(--muted); }

/* ── ボタン：字の下の 1px の線と、右下の墨の点。触れると点がにじむ ── */
.btn { display: block; position: relative; width: fit-content; padding: 0 4em .5em 0; font-size: clamp(1.0625rem, .28vw + 15.9px, 1.25rem); }
.btn::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; }
.btn::after {
  content: ""; position: absolute; right: 0; bottom: .8em; width: 1em; height: 1em;
  background: url(img/sumi-ten.svg) no-repeat center / 100% 100%; transform: scale(.32); transition: transform .3s steps(5);
}
.btn:hover::after, .btn:focus-visible::after { transform: scale(1); }
.btn.-tate { writing-mode: vertical-rl; height: 10em; padding: 0 0 0 .5em; }
.btn.-tate::before { width: 1px; height: 100%; top: 0; bottom: auto; }
.btn.-tate::after { top: auto; right: auto; left: .7em; bottom: 0; }
.btn.-shiro { color: var(--paper); }
.btn.-shiro::after { filter: invert(1); }

/* ── 四隅に墨だまりの付いた枠（元の c-box--ink-puddle） ── */
.sumi-waku { position: relative; border: 1px solid var(--ink); }
.sumi-waku::before, .sumi-waku::after { content: ""; position: absolute; left: 0; right: 0; width: 100%; height: 4px; background: var(--ink); }
.sumi-waku::before { top: -1px; clip-path: polygon(0 0, 100% 0, 100% 4px, calc(100% - 4px) 0, 4px 0, 0 4px); }
.sumi-waku::after { bottom: -1px; clip-path: polygon(0 0, 4px 4px, calc(100% - 4px) 4px, 100% 0, 100% 4px, 0 4px); }

/* ── 頭：真ん中に屋号の縦書き、左上に一言、右上に縦書きのメニュー。固定しない ── */
.hd { position: relative; height: clamp(215px, 12.21vw + 169.2px, 345px); }
.hd-logo { position: absolute; left: 50%; top: clamp(18px, 2.2vw + 10px, 44px); transform: translateX(-50%); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: .35em; color: var(--ink); }
.hd-logo .kuni { writing-mode: vertical-rl; font-family: var(--f-head); font-size: clamp(.6875rem, .19vw + 10.3px, .875rem); letter-spacing: .3em; padding-top: .2em; }
.hd-logo .na { writing-mode: vertical-rl; font-family: var(--f-head); font-size: clamp(1.625rem, 1.1vw + 22px, 2.75rem); line-height: 1; letter-spacing: .12em; transform: scaleY(.9); transform-origin: top center; }
.hd-logo .in { align-self: flex-end; width: clamp(20px, .84vw + 17px, 30px); margin-bottom: clamp(14px, 1.5vw, 26px); }
.hd-uta { position: absolute; top: clamp(15px, 1.6vw + 9px, 32px); left: clamp(12px, 1.13vw + 7.8px, 24px); z-index: 10; font-family: var(--f-head); font-size: clamp(.875rem, .56vw + 11.9px, 1.25rem); line-height: 1.8; }
.hd-uta .na { display: block; text-align: right; font-size: clamp(.75rem, .38vw + 10.6px, 1rem); margin-right: .5em; }
.hd-uta .na::before { content: ""; display: inline-block; width: 1px; height: 2em; background: currentColor; margin-bottom: .5em; }
.hd-nav { display: none; }
@media (min-width: 768px) {
  .hd-nav { display: block; position: absolute; top: 35px; right: 30px; }
  .hd-nav ul { display: flex; flex-direction: row-reverse; gap: .35em; writing-mode: horizontal-tb; }
  .hd-nav a { display: block; writing-mode: vertical-rl; font-size: clamp(.8125rem, .5vw + 9px, 1.25rem); line-height: 1.75; transform: scaleY(.9); transform-origin: top center; }
}
@media (min-width: 960px) { .hd-nav a { font-size: clamp(1.125rem, .19vw + 17.3px, 1.25rem); } }

/* ハンバーガー：右上に固定。PC は 200px 下ろすと出る（site.js が html に scrolled を付ける） */
.hb { position: fixed; top: clamp(15px, 1.2vw + 10.5px, 29px); right: clamp(15px, 1.2vw + 10.5px, 29px); z-index: 60; width: 33px; height: 33px; padding: 0; border: 0; background: none; color: #fff; mix-blend-mode: exclusion; cursor: pointer; transition: opacity .3s; }
.hb i, .hb i::before, .hb i::after { display: block; }
.hb i { position: relative; width: 33px; height: 33px; }
.hb i::before, .hb i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 33px; height: 1px; background: currentColor; transition: transform .3s; }
.hb i::before { transform: translateY(-5px); }
.hb i::after { transform: translateY(5px); }
.menu-open .hb { mix-blend-mode: normal; color: var(--paper); }
.menu-open .hb i::before { transform: rotate(20deg); }
.menu-open .hb i::after { transform: rotate(-20deg); }
@media (min-width: 768px) { .js .hb { opacity: 0; pointer-events: none; } .js.scrolled .hb, .js.menu-open .hb { opacity: 1; pointer-events: auto; } }

/* 開いたメニュー：全画面。PC は左右 2 つ（左は暗い写真に屋号、右は灰緑に項目） */
.menu { position: fixed; inset: 0; z-index: 55; display: grid; visibility: hidden; opacity: 0; filter: blur(8px); transition: opacity .5s, filter .5s, visibility 0s .5s; }
.menu-open .menu { visibility: visible; opacity: 1; filter: none; transition: opacity .5s, filter .5s; }
.menu-hidari { display: none; }
.menu-migi { display: flex; align-items: center; justify-content: center; background: var(--washi), #767973; background-blend-mode: multiply; color: #fff; }
.menu-migi ul { width: 85%; display: grid; gap: 33px 30px; }
.menu-migi a { display: block; padding-bottom: .5em; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 18px; }
@media (min-width: 768px) {
  .menu { grid-template-columns: 1fr 1fr; }
  .menu-hidari { display: flex; align-items: center; justify-content: center; position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
  .menu-hidari img.haikei { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
  .menu-hidari .na { position: relative; font-family: var(--f-head); font-size: clamp(2rem, 1.6vw + 24px, 3rem); letter-spacing: .18em; }
  .menu-migi ul { width: min(416px, 80%); grid-template-columns: 1fr 1fr; }
}

/* ── 最初の写真：幅いっぱい。上の縁に縦長の小さな窓をまたがせる ── */
.mv { position: relative; }
.mv-shashin { position: relative; height: clamp(624px, 27.42vw + 521.2px, 916px); overflow: hidden; background: var(--band-gray); }
.mv-shashin picture { position: absolute; inset: 0; display: block; }
.mv-shashin img { width: 100%; height: 100%; object-fit: cover; }
.mv-shashin picture + picture { opacity: 0; animation: kirikae 16s infinite; }
.mv-shashin picture:nth-child(2) { animation-delay: 4s; }
.mv-shashin picture:nth-child(3) { animation-delay: 8s; }
.mv-shashin picture:nth-child(4) { animation-delay: 12s; }
@keyframes kirikae { 0% { opacity: 0; } 18.75% { opacity: 1; } 25% { opacity: 1; } 43.75% { opacity: 0; } 100% { opacity: 0; } }
.mado { position: absolute; z-index: 2; width: clamp(94px, 4.6vw + 76.7px, 149px); aspect-ratio: 3 / 4; overflow: hidden; }
.mado img { width: 100%; height: 100%; object-fit: cover; }
.mv .mado { top: 0; right: 10%; transform: translateY(-60%); }
@media (min-width: 768px) { .mv .mado { right: auto; left: 13%; } }
.shashin-dewa { position: absolute; right: .5em; bottom: .5em; z-index: 3; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, .85); text-shadow: 0 0 4px rgba(0, 0, 0, .6); }
.shashin-dewa a { text-decoration: underline; }

/* 写真の下にかぶせる屋号の箱（元のトップの「白骨物語」の箱） */
.hako-wrap { position: relative; z-index: 3; margin-top: -120px; }
.hako { width: min(450px, 100%); margin-left: auto; padding: 12.5px; background: var(--washi), var(--paper); }
.hako-in { padding: clamp(28px, 2.4vw + 19px, 56px) clamp(20px, 2.4vw + 11px, 48px); }
.hako .yomi { display: block; text-align: center; font-size: var(--fs-base); }
.hako h1 { text-align: center; white-space: nowrap; font-size: clamp(1.75rem, .8vw + 24px, 2.5rem); letter-spacing: .3em; padding-left: .3em; line-height: 1.6; }
.hako-bun { display: flex; flex-direction: row-reverse; justify-content: center; gap: 2em; margin-top: 1.5em; }
.hako-bun p { writing-mode: vertical-rl; font-size: var(--fs-p); line-height: 2; max-height: 18em; }
.hako .btn { margin: 2em auto 0; }
@media (min-width: 768px) { .hako-wrap { margin-top: -340px; } }

/* ── 節：写真（93%・左右交互）＋ 縦書きの見出しと一言 ＋ 横書きの本文 ── */
.setsu { margin-top: var(--sp-md); }
.setsu-shashin { position: relative; width: 93%; height: clamp(221px, 24.79vw + 128px, 485px); }
.setsu-shashin > img, .setsu-shashin > picture > img { width: 100%; height: 100%; object-fit: cover; }
.setsu-shashin > picture { display: block; height: 100%; }
.setsu.-hidari .setsu-shashin { margin-left: 0; }
.setsu.-migi .setsu-shashin { margin-left: auto; }
.setsu-shashin .mado { top: 100%; right: 5%; aspect-ratio: 4 / 5; width: clamp(91px, 4.86vw + 72.8px, 149px); transform: translateY(-70%); }
.setsu.-migi .setsu-shashin .mado { right: auto; left: 5%; }
.setsu-naka { width: var(--wide); margin: clamp(48px, 4vw + 33px, 96px) auto 0; }
.setsu-midashi { display: flex; flex-direction: column; gap: .4em; }
.setsu-midashi h2 { font-family: var(--f-head); font-size: clamp(2.0625rem, 1.03vw + 29.1px, 2.75rem); line-height: 1.6; }
.setsu-midashi .hitokoto { font-family: var(--f-head); font-size: clamp(1.25rem, .75vw + 17.2px, 1.75rem); line-height: 1.6; }
.setsu-hon { margin-top: 2em; }
.setsu-hon > p, .setsu-hon li p { font-size: var(--fs-p); }
.setsu-hon > p + p { margin-top: 1em; }
@media (min-width: 768px) {
  .setsu-naka { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: clamp(48px, 5vw + 10px, 100px); }
  .setsu-midashi { flex-direction: row-reverse; gap: clamp(36px, 3vw + 13px, 70px); flex: none; }
  .setsu-midashi h2, .setsu-midashi .hitokoto { writing-mode: vertical-rl; white-space: nowrap; transform: scaleY(.9); transform-origin: top center; }
  .setsu-hon { margin-top: 0; flex: 0 1 clamp(300px, 39.44vw + 152.1px, 720px); padding-top: .4em; }
  .setsu.-hidari .setsu-naka { padding-left: 8%; justify-content: flex-start; }
}

/* 仕事の 3 つ：上に 1px の線、小見出し、本文 */
.shigoto li { padding-top: 1.2em; border-top: 1px solid var(--ink); }
.shigoto li + li { margin-top: 2.2em; }
.shigoto h3, .eki h3 { font-size: clamp(1.25rem, .47vw + 18.2px, 1.5625rem); line-height: 1.7; margin-bottom: .4em; }
.shigoto .bango { display: block; font-family: var(--f-head); font-size: clamp(.8125rem, .19vw + 12px, 1rem); color: var(--muted); letter-spacing: .1em; }

/* 道すじ：線の上の駅。真ん中の駅（私たち）だけ朱 */
.michi { position: relative; display: grid; gap: 2em; margin-top: 2.4em; }
.michi::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--ink); }
.eki { position: relative; padding-left: 32px; }
.eki::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
.eki.ima::before { background: var(--shu); border-color: var(--shu); }
@media (min-width: 768px) {
  .michi { grid-template-columns: repeat(3, 1fr); gap: 2em; }
  .michi::before { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
  .eki { padding: 32px 0 0; }
  .eki::before { top: 0; }
}

/* 数字：細い明朝の大きな数・上に 1px の線 */
.kazu { display: grid; gap: 1.6em; margin: 2.4em 0; }
.kazu li { padding-top: .8em; border-top: 1px solid var(--line-mid); font-size: var(--fs-base); }
.kazu .su { display: block; font-family: var(--f-head); font-size: clamp(2.5rem, 2.35vw + 31.2px, 4.0625rem); line-height: 1.3; }
.kazu .su small { font-size: .4em; margin-left: .15em; }
@media (min-width: 768px) { .kazu { grid-template-columns: repeat(3, 1fr); gap: 2em; } }
.setsu-hon .caption { margin-top: 1.4em; }

/* ── 屋号のこと：灰の帯に生成りの縦書き ── */
.yago { margin-top: var(--sp-lg); padding: var(--sp-md) 0; color: var(--paper); background: var(--washi), var(--band-gray); background-blend-mode: multiply; }
.yago-naka { width: var(--wide); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 2.4em; }
.yago h2 { font-family: var(--f-head); font-size: clamp(2.0625rem, 1.03vw + 29.1px, 2.75rem); line-height: 1.6; }
.yago-bun p { font-size: var(--fs-p); line-height: 2.1; }
.yago-bun p + p { margin-top: 1em; }
.yago .in { width: clamp(44px, 1.6vw + 38px, 64px); }
.yago-shashin { margin: 0; width: 100%; }
.yago-shashin img { display: block; width: 100%; height: auto; filter: grayscale(1); opacity: .88; }
.yago-shashin figcaption { margin-top: .8em; font-size: clamp(.75rem, .19vw + 11.3px, .875rem); line-height: 1.8; opacity: .8; }
@media (min-width: 768px) { .yago-shashin { flex: 0 1 clamp(280px, 28vw + 40px, 460px); align-self: center; } }
@media (min-width: 768px) {
  .yago-naka { flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: clamp(48px, 5vw + 10px, 110px); }  /* 縦の見出しをほかの節と同じ右の線に揃える（10/30 本人「縦の見出しがズレている」） */
  .yago h2, .yago-bun { writing-mode: vertical-rl; transform: scaleY(.9); transform-origin: top center; }
  .yago h2 { white-space: nowrap; }
  .yago-bun { max-height: 24em; }
  .yago-bun p + p { margin-top: 0; margin-right: 1.6em; }
  .yago .in { align-self: flex-end; }
}

/* ── お問い合わせ ── */
.toi { margin-top: var(--sp-md); }
.toi .setsu-hon p + p { margin-top: 1em; }

/* ── 足：大きなリンク → 写真の帯に白い縦書きの一言 → 屋号とページの中の案内 ── */
.ashi { margin-top: var(--sp-lg); }
.ashi-links { width: min(885px, var(--wide)); margin: 0 auto var(--sp-md); display: grid; gap: 1.6em; }
.ashi-links .btn { width: 100%; font-size: clamp(1.4375rem, .49vw + 21.2px, 1.8125rem); padding-right: 2em; }
@media (min-width: 768px) { .ashi-links { grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 8vw, 142px); } }
.ashi-uta { position: relative; overflow: hidden; padding: clamp(68px, 14.74vw + 12.7px, 225px) 0 clamp(65px, 13.99vw + 12.5px, 214px); background: var(--ink); color: #fff; }
.ashi-uta > img, .ashi-uta > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ashi-uta p { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; gap: clamp(18px, 1vw + 14px, 32px); font-family: var(--f-head); font-size: clamp(1.25rem, 1.13vw + 15.8px, 2rem); line-height: 1.6; }
.ashi-uta p span { writing-mode: vertical-rl; white-space: nowrap; transform: scaleY(.9); transform-origin: top center; }
.ashi-hon { width: var(--wide); margin-inline: auto; padding: clamp(53px, 5.13vw + 33.8px, 114px) 0 clamp(33px, 6.94vw + 7px, 115px); display: grid; gap: 2.4em; }
.ashi-logo { display: flex; align-items: center; gap: 14px; width: fit-content; }
.ashi-logo img { width: 34px; }
.ashi-logo span { font-family: var(--f-head); font-size: clamp(1.25rem, .5vw + 18px, 1.625rem); letter-spacing: .25em; }
.ashi-nav li { border-bottom: 1px solid var(--line-soft); }
.ashi-nav a { display: block; padding: .7em 0; font-size: clamp(.9375rem, .19vw + 14.3px, 1.0625rem); }
.ashi-shita { font-size: clamp(.75rem, .09vw + 11.7px, .8125rem); color: var(--muted); }
.ashi-dewa { font-size: 11px; line-height: 1.8; color: var(--muted); }
.ashi-dewa p { margin: 0 0 .4em; }
.ashi-dewa ul { margin: 0; padding: 0; list-style: none; }
.ashi-dewa a { text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 960px) { .ashi-hon { grid-template-columns: 1fr 2fr; align-items: start; } .ashi-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .ashi-shita, .ashi-dewa { grid-column: 1 / -1; } }

/* ── 訪れた時の入口（hiraki.js・10/27 本人「墨書きはやめて、shirahone.org のようにして。文字は今と同じで」） ──
   shirahone.org の本物の common.css の .c-loading と .c-loading__poem をそのまま写した（寸法・時間・ぼかしの値は同じ。地は向こうの砂の写真の代わりに和紙）。
   覆い：画面いっぱい・後ろを 100px ぼかす・和紙を 0.6 で重ねる。一言：縦書き・Hina Mincho・clamp(1.25rem, 1.13vw + 15.8px, 2rem)・行の高さ 2・scaleY(.9)・ぼかし 10px から 1 秒で浮かぶ。
   消える時：一言はぼかしへ 1 秒、覆いは hiraki.js が 0.5 秒後から 2 秒で消す。覆いは JS が html に hiraki-on を付けた時だけ出す（向こうは常に出している） */
.hiraki { display: none; width: 100%; height: 100%; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 9999; pointer-events: none; -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); }
.hiraki-on .hiraki { display: flex; }
.hiraki::before { content: ""; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: var(--washi), var(--paper); opacity: .6; display: block; }
.hiraki-uta { margin: 0; writing-mode: vertical-rl; white-space: nowrap; font-family: "Hina Mincho", serif; font-size: clamp(1.25rem, 1.13vw + 15.8px, 2rem); opacity: 0; filter: blur(10px); transition: opacity 1s, filter 1.3s; line-height: 2; position: relative; z-index: 2; transform: scaleY(.9); color: var(--ink); }
.hiraki-on .hiraki-uta { opacity: 1; filter: blur(0); }
.hiraki.-owari .hiraki-uta { opacity: 0; filter: blur(10px); transition: opacity 1s, filter .8s; }

/* ── 出てくる時：ぼかしが取れるだけ（元の c-anim-fade）。site.js が html に js を付けた時だけ隠す ── */
.js .fade { filter: blur(20px); opacity: .5; }
.js .fade.inview { animation: fadein .6s forwards; }
@keyframes fadein { 0% { filter: blur(20px); opacity: .7; } 50% { filter: blur(5px); opacity: .9; } 100% { filter: blur(0); opacity: 1; } }

/* ── お問い合わせ先のページ（toiawase/。deploy.py が作る）：名刺の表の左下と同じ「頭書き　値」の並び ── */
.toiawase { width: var(--wide); margin: 0 auto; padding: var(--sp-sm) 0; }
.modoru { margin: 0 0 var(--sp-sm); }
.toiawase h1 { font-family: var(--f-head); font-size: clamp(2.5rem, 2.35vw + 31.2px, 4.0625rem); line-height: 1.5; margin-bottom: .8em; }
.toiawase-in { width: 40px; height: 40px; margin-bottom: 1.6em; }
.saki { margin: 0 0 1em; padding-bottom: .8em; border-bottom: 1px solid var(--line-mid); font-size: var(--fs-p); line-height: 1.7; overflow-wrap: anywhere; }
.saki .komoku { display: block; color: var(--muted); font-size: .8em; letter-spacing: .08em; }
@media (min-width: 720px) { .saki .komoku { display: inline-block; min-width: 8em; margin-right: .8em; } }

/* 動きを減らす設定の人には、切り替えもぼかしも出さない（入口の覆いも出さない：hiraki.js） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mv-shashin picture + picture { animation: none; }
  .js .fade { filter: none; opacity: 1; animation: none; }
  .menu, .btn::after, .hb i::before, .hb i::after { transition: none; }
}

/* ── 無い住所の紙（404.html） ── */
.nai { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5em; text-align: center; padding: 24px; }