@charset "UTF-8";

/* ========================================================= */

@font-face {
  font-family: "Yuji Mai Haiku";
  src: url("/assets/fonts/yuji-mai-haiku.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --paper:     #f7f3ea;   /* 白い紙 */
  --paper-sub: #f1ebdd;   /* 節を沈めるときの、ほんの少し濃い紙 */
  --ink:       #1f1b16;   /* 墨 */
  --ink-soft:  #635a4d;   /* 添え書き。地に対して 5.5:1 以上 */
  --line:      #d9d0bd;
  --accent:    #9c5220;   /* 朱に寄せた茶。紙の上で 5.9:1 */

  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --haiku-brush: "Yuji Mai Haiku", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans:  "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;

  /* 節ごとの間合い。均一にしないために3段持つ */
  --gap-wide:   clamp(4.6rem, 11vh, 7rem);
  --gap-mid:    clamp(3rem, 7vh, 4.4rem);
  --gap-tight:  clamp(2rem, 4.5vh, 2.8rem);

  --vh: 100vh;
  --header-h: 3.4rem;

  /* 角の丸さ。四角い部品はすべてこれ 1 つを見る（2026-09-19 本人「すごく丸くしなくていい。若干丸く、統一して」） */
  --r: 6px;
}

@supports (height: 100svh) { :root { --vh: 100svh; } }

html { scroll-behavior: smooth; }

/* ---------- 季節の色（トップのCSS下地に効く） ----------
   ★色は2組ある。--b-* が着る側（html の data-season）、--a-* が脱ぐ側（data-season-from）。
     混ざり具合 --season-blend（0..1）は season.js が書く。0 で脱ぐ側、1 で着る側。
     混ぜるのは color-mix で、使えないブラウザでは着る側だけが出る
     （＝季節は跳んで変わるが、絵は今までと同じに見える）。
   ★透明度は色に焼き込む（--sun-core .92／--sun-halo .45／--mist .5）。
     「255, 246, 220」のような部品の並びは混ぜられないため。
   3D表示中は町側の色を使い、この表は静止画とCSS下地の色被せに残る */

/* 着る側 */
:root,
html[data-season="summer"] {
  --b-sky-hi:   #cfe0e6;
  --b-sky-lo:   #f2e6c8;
  --b-sun-core: rgba(255, 246, 220, .92);
  --b-sun-halo: rgba(255, 246, 220, .45);
  --b-mist:     rgba(255, 244, 228, .5);
  --b-row-1: #8fae6a; --b-row-2: #6f9a52; --b-row-3: #4f8040; --b-row-4: #35652f; --b-row-5: #22461f;
}
html[data-season="spring"] {
  --b-sky-hi:   #e8d4d8;
  --b-sky-lo:   #f8e9dd;
  --b-sun-core: rgba(255, 240, 236, .92);
  --b-sun-halo: rgba(255, 240, 236, .45);
  --b-mist:     rgba(255, 238, 240, .5);
  --b-row-1: #c9b3ae; --b-row-2: #a8b483; --b-row-3: #82a05c; --b-row-4: #5f8347; --b-row-5: #3f6135;
}
html[data-season="autumn"] {
  --b-sky-hi:   #d6d3c2;
  --b-sky-lo:   #f6e3b6;
  --b-sun-core: rgba(255, 238, 190, .92);
  --b-sun-halo: rgba(255, 238, 190, .45);
  --b-mist:     rgba(252, 240, 214, .5);
  --b-row-1: #cdb173; --b-row-2: #b99a51; --b-row-3: #8f7a3c; --b-row-4: #6a6031; --b-row-5: #4a4626;
}
html[data-season="winter"] {
  --b-sky-hi:   #d7dde2;
  --b-sky-lo:   #eef0ee;
  --b-sun-core: rgba(245, 250, 255, .92);
  --b-sun-halo: rgba(245, 250, 255, .45);
  --b-mist:     rgba(250, 252, 253, .5);
  --b-row-1: #e2e2dc; --b-row-2: #cdd0c8; --b-row-3: #adb3a8; --b-row-4: #8b9287; --b-row-5: #6b7268;
}

/* 脱ぐ側。同じ色を --a-* で持つ */
html[data-season-from="summer"] {
  --a-sky-hi:   #cfe0e6;
  --a-sky-lo:   #f2e6c8;
  --a-sun-core: rgba(255, 246, 220, .92);
  --a-sun-halo: rgba(255, 246, 220, .45);
  --a-mist:     rgba(255, 244, 228, .5);
  --a-row-1: #8fae6a; --a-row-2: #6f9a52; --a-row-3: #4f8040; --a-row-4: #35652f; --a-row-5: #22461f;
}
html[data-season-from="spring"] {
  --a-sky-hi:   #e8d4d8;
  --a-sky-lo:   #f8e9dd;
  --a-sun-core: rgba(255, 240, 236, .92);
  --a-sun-halo: rgba(255, 240, 236, .45);
  --a-mist:     rgba(255, 238, 240, .5);
  --a-row-1: #c9b3ae; --a-row-2: #a8b483; --a-row-3: #82a05c; --a-row-4: #5f8347; --a-row-5: #3f6135;
}
html[data-season-from="autumn"] {
  --a-sky-hi:   #d6d3c2;
  --a-sky-lo:   #f6e3b6;
  --a-sun-core: rgba(255, 238, 190, .92);
  --a-sun-halo: rgba(255, 238, 190, .45);
  --a-mist:     rgba(252, 240, 214, .5);
  --a-row-1: #cdb173; --a-row-2: #b99a51; --a-row-3: #8f7a3c; --a-row-4: #6a6031; --a-row-5: #4a4626;
}
html[data-season-from="winter"] {
  --a-sky-hi:   #d7dde2;
  --a-sky-lo:   #eef0ee;
  --a-sun-core: rgba(245, 250, 255, .92);
  --a-sun-halo: rgba(245, 250, 255, .45);
  --a-mist:     rgba(250, 252, 253, .5);
  --a-row-1: #e2e2dc; --a-row-2: #cdd0c8; --a-row-3: #adb3a8; --a-row-4: #8b9287; --a-row-5: #6b7268;
}

/* 受け皿。町はここに書いた10本しか見ない。
   ★var(--a-x, var(--b-x)) の内側の受け皿は必ず要る。
     data-season-from が無いとき（JS が動かない・着替えが済んだ後）に --a-* は未定義になり、
     受け皿が無いと色そのものが消えて .town が透明になる */
:root {
  --season-blend: 1;
  --tod-phase: 0.25;
  --tod-dur: 2.5s;

  --sky-hi:   var(--a-sky-hi,   var(--b-sky-hi));
  --sky-lo:   var(--a-sky-lo,   var(--b-sky-lo));
  --sun-core: var(--a-sun-core, var(--b-sun-core));
  --sun-halo: var(--a-sun-halo, var(--b-sun-halo));
  --mist:     var(--a-mist,     var(--b-mist));
  --row-1:    var(--a-row-1,    var(--b-row-1));
  --row-2:    var(--a-row-2,    var(--b-row-2));
  --row-3:    var(--a-row-3,    var(--b-row-3));
  --row-4:    var(--a-row-4,    var(--b-row-4));
  --row-5:    var(--a-row-5,    var(--b-row-5));
}

/* 混ぜられる環境では、10本を --season-blend で混ぜる */
@supports (color: color-mix(in oklab, #000, #fff)) {
  :root {
    --sky-hi:   color-mix(in oklab, var(--a-sky-hi,   var(--b-sky-hi))   calc((1 - var(--season-blend)) * 100%), var(--b-sky-hi));
    --sky-lo:   color-mix(in oklab, var(--a-sky-lo,   var(--b-sky-lo))   calc((1 - var(--season-blend)) * 100%), var(--b-sky-lo));
    --sun-core: color-mix(in oklab, var(--a-sun-core, var(--b-sun-core)) calc((1 - var(--season-blend)) * 100%), var(--b-sun-core));
    --sun-halo: color-mix(in oklab, var(--a-sun-halo, var(--b-sun-halo)) calc((1 - var(--season-blend)) * 100%), var(--b-sun-halo));
    --mist:     color-mix(in oklab, var(--a-mist,     var(--b-mist))     calc((1 - var(--season-blend)) * 100%), var(--b-mist));
    --row-1:    color-mix(in oklab, var(--a-row-1,    var(--b-row-1))    calc((1 - var(--season-blend)) * 100%), var(--b-row-1));
    --row-2:    color-mix(in oklab, var(--a-row-2,    var(--b-row-2))    calc((1 - var(--season-blend)) * 100%), var(--b-row-2));
    --row-3:    color-mix(in oklab, var(--a-row-3,    var(--b-row-3))    calc((1 - var(--season-blend)) * 100%), var(--b-row-3));
    --row-4:    color-mix(in oklab, var(--a-row-4,    var(--b-row-4))    calc((1 - var(--season-blend)) * 100%), var(--b-row-4));
    --row-5:    color-mix(in oklab, var(--a-row-5,    var(--b-row-5))    calc((1 - var(--season-blend)) * 100%), var(--b-row-5));
  }
}

/* 時刻の色被せ。昼は何も被せない（.town::after に敷く） */
:root                  { --tod-wash: rgba(255, 255, 255, 0); }
html[data-tod="dawn"]  { --tod-wash: rgba(255, 196, 140, .22); }
html[data-tod="dusk"]  { --tod-wash: rgba(214, 110, 60, .30); }
html[data-tod="night"] { --tod-wash: rgba(16, 22, 48, .55); }

/* ---------- 土台 ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.9;
  overflow-wrap: break-word;
  overflow-x: clip;

  /* 日本語の折返し（kumihan-qa の処方1） */
  line-break: strict;
  word-break: auto-phrase;
}

/* 見出しは各行の長さを均す。本文は最終行に1文字だけ落ちるのを抑える（処方2） */
h1, h2, h3, .copy { text-wrap: balance; }
p, li { text-wrap: pretty; }

img, svg { max-width: 100%; }
img { height: auto; border: 0; display: block; }

a { color: inherit; }

::selection { background: rgba(156, 82, 32, .18); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 版面 ---------- */

.wrap {
  width: min(100% - 2.4rem, 68rem);
  margin-inline: auto;
}

/* 本文の行長。全角で35〜40字に収める（読みやすさの根） */
.wrap--narrow { width: min(100% - 2.4rem, 37em); }

.section { padding-block: var(--gap-mid); position: relative; }
.section--belief { padding-block: var(--gap-wide); background: var(--paper-sub); }
.section--tight  { padding-block: var(--gap-tight); }
.section--works  { padding-block: var(--gap-wide) var(--gap-mid); }
.section--fit    { padding-block: var(--gap-tight) var(--gap-mid); }
.section--steps  { padding-block: var(--gap-mid) var(--gap-wide); }
.section--taiken { padding-block: var(--gap-tight) 0; }
.section--ikusei { padding-block: var(--gap-mid) var(--gap-wide); }
.section--invite { padding-block: 0 var(--gap-wide); }

.body { margin: 0 0 1.35em; }
.body:last-child { margin-bottom: 0; }

.body--aside {
  color: var(--ink-soft);
  font-size: .94em;
  border-left: 2px solid var(--line);
  padding-left: 1em;
  margin-top: 1.8em;
}

.note {
  color: var(--ink-soft);
  font-size: .88em;
  line-height: 1.85;
  margin: 1.2em 0 0;
}

/* ---------- 見出し ---------- */

.page-head {
  padding-block: calc(var(--header-h) + var(--gap-mid)) var(--gap-tight);
}
.page-head--lost { padding-block: calc(var(--header-h) + var(--gap-wide)) var(--gap-wide); }

.page-head__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.4vw, 2.6rem);
  line-height: 1.45;
  letter-spacing: .04em;
  margin: 0;
}

.page-head__lead {
  margin: 1.1em 0 0;
  max-width: 37em;
  font-size: 1.02em;
}

.section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.6;
  letter-spacing: .03em;
  margin: 0 0 .9em;
}
.section__title--small { font-size: clamp(1.12rem, 2.4vw, 1.3rem); margin-top: 2.4em; }
.section__title--small:first-child { margin-top: 0; }

/* ---------- ヘッダ ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.site-header--overlay {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  border-bottom: 0;
  background: transparent;
  color: #fbf6ea;
}
.site-header--overlay .site-header__inner { text-shadow: 0 1px 8px rgba(40, 26, 12, .5); }
.site-header--overlay .site-lang__link,
.site-header--overlay .sound { border-color: rgba(251, 246, 234, .5); }

.site-header__inner {
  width: min(100% - 2.4rem, 74rem);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  padding-block: .5rem;
}

.site-header__logo {
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: .1em;
  text-decoration: none;
  margin-right: auto;
}

.site-nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

.site-nav__link {
  font-size: .82rem;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { border-bottom-color: currentColor; }

/* ---------- 言語切替（ただのリンク） ---------- */

.site-lang { display: flex; align-items: center; gap: .4rem; font-size: .76rem; }

.site-lang__now,
.site-lang__link {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .12em .55em;
  letter-spacing: .04em;
  text-decoration: none;
}
.site-lang__now { border-color: currentColor; }
.site-lang__link:hover { border-color: currentColor; }

/* ---------- 音ボタン（既定オフ） ---------- */

.sound {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font: inherit;
  font-size: .76rem;
  letter-spacing: .04em;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .12em .55em;
  cursor: pointer;
}
.sound__mark {
  width: .62em; height: .62em;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.sound[aria-pressed="true"] { border-color: currentColor; }
.sound[aria-pressed="true"] .sound__mark { background: currentColor; }

/* ---------- トップ: 町と、3Dを動かせない場合のCSS下地 ---------- */

.town {
  position: relative;
  height: var(--vh);
  min-height: 34rem;
  overflow: hidden;
  color: #fbf6ea;
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-lo) 46%, var(--row-3) 72%, var(--row-5) 100%);
}

/* 空の上端の薄い墨。白い文字を読みやすくするためだけの1枚（絵は変えない） */
.town::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(24, 20, 14, .22) 0%, rgba(24, 20, 14, .07) 26%, rgba(24, 20, 14, 0) 46%);
}

/* 時刻の色被せ。朝は橙、夕は赤、夜は藍。昼は透明なので何も起きない */
.town::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--tod-wash);
  transition: background-color var(--tod-dur) linear;
}

.town__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-lo) 38%, rgba(255, 255, 255, 0) 60%);
}

.town__sun {
  position: absolute; left: 54%; top: 40%;
  width: 22vw; height: 22vw; max-width: 320px; max-height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      var(--sun-core) 0%, var(--sun-halo) 32%, transparent 70%);
  animation: town-breathe 11s ease-in-out infinite;
}
@keyframes town-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}

.town__mist {
  position: absolute; left: -20%; right: -20%;
  background: linear-gradient(180deg,
      transparent, var(--mist) 50%, transparent);
  filter: blur(14px);
  animation: town-drift 34s linear infinite alternate;
}
.town__mist--a { top: 40%; height: 24%; }
.town__mist--b { top: 51%; height: 16%; opacity: .6; animation-duration: 47s; animation-direction: alternate-reverse; }
@keyframes town-drift {
  0%   { transform: translateX(-5%); }
  100% { transform: translateX(5%); }
}

/* 茶畑の畝。奥ほど小さく薄い。風でゆっくり揺れるだけ（弾まない・光らない） */
.town__rows { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; }

.town__row {
  position: absolute; left: -10%; right: -10%;
  height: 26%;
  background-repeat: repeat-x;
  background-size: var(--w) 100%;
  transform-origin: 50% 100%;
  animation: town-sway var(--t) ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes town-sway {
  0%   { transform: skewX(-1.6deg); }
  100% { transform: skewX(1.8deg); }
}
.town__row--1 { bottom: 52%; --w: 110px; --t: 6.5s; --d: -1s;   opacity: .55; filter: blur(1px);
  background-image: radial-gradient(ellipse 55px 40px at 50% 100%, var(--row-1) 60%, rgba(0, 0, 0, 0) 62%); }
.town__row--2 { bottom: 38%; --w: 170px; --t: 6s;   --d: -3s;   opacity: .8;
  background-image: radial-gradient(ellipse 88px 62px at 50% 100%, var(--row-2) 60%, rgba(0, 0, 0, 0) 62%); }
.town__row--3 { bottom: 22%; --w: 260px; --t: 5.6s; --d: -2s;   height: 32%;
  background-image: radial-gradient(ellipse 136px 90px at 50% 100%, var(--row-3) 60%, rgba(0, 0, 0, 0) 62%); }
.town__row--4 { bottom: 4%;  --w: 380px; --t: 5.2s; --d: -.5s;  height: 40%;
  background-image: radial-gradient(ellipse 200px 128px at 50% 100%, var(--row-4) 60%, rgba(0, 0, 0, 0) 62%); }
.town__row--5 { bottom: -14%; --w: 560px; --t: 4.9s; --d: -2.6s; height: 48%;
  background-image: radial-gradient(ellipse 300px 190px at 50% 100%, var(--row-5) 60%, rgba(0, 0, 0, 0) 62%); }

/* Phase 4 の差し込み口。three.js の canvas がここに入る */
.town__canvas,
.town__still { position: absolute; inset: 0; }
.town__canvas > canvas,
.town__still > img { width: 100%; height: 100%; object-fit: cover; }

/* 重なりの順: canvas 0 → 静止画 1 → 言葉 2 → 季節の切替 3 */
.town__canvas { z-index: 0; pointer-events: none; }
.town__still {
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .45s ease, visibility 0s linear;
}

/* 1コマ描けてから浮かび上がる。白い箱が一瞬出るのを避けるため、 */
.town__canvas > canvas { opacity: 0; transition: opacity .6s ease; }
.town__canvas.is-on > canvas { opacity: 1; }
html[data-town="on"] .town__still {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, .45s;
}

/* 町が出たら、下地として働いていた CSS の茶畑と空を畳む */
html[data-town="on"] .town__rows,
html[data-town="on"] .town__sky,
html[data-town="on"] .town__sun,
html[data-town="on"] .town__mist { display: none; }
html[data-town="on"] .town::after { background-color: transparent; }
/* 画面のいちばん下だけ薄く沈める。3D の町が出ると時刻の色被せが消えるので、 */
html[data-town="on"] .town::after {
  background-image: linear-gradient(0deg, rgba(24, 20, 14, .28) 0%, transparent 14%);
}

.town__copy {
  position: absolute;
  left: clamp(1.2rem, 6vw, 5rem);
  top: 27%;
  z-index: 2;
  text-shadow: 0 2px 22px rgba(50, 34, 16, .45);
}

.town__headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  line-height: 1.28;
  letter-spacing: .05em;
  margin: 0 0 .5em;
  animation: town-rise 2.2s ease-out both;
}

/* 横幅 701〜1807px（本人の画面もここ。CSS 幅 1280・DPR 1.5）で、見出しを少し小さくする */
@media (min-width: 701px) and (max-width: 1807px) {
  .town__headline { font-size: clamp(1.7rem, 3.6vw, 4.6rem); }
}

.town__tagline {
  margin: 0;
  font-size: clamp(.82rem, 1.9vw, 1rem);
  letter-spacing: .16em;
  animation: town-rise 2.2s .5s ease-out both;
}
/* 題の箱は残す。句に替わっても、3D が避ける左の矩形は動かさない。 */
.town__intro { transition: opacity 1.2s ease; }
.town__copy.is-haiku .town__intro { opacity: 0; pointer-events: none; }
.town__haiku {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.town__haiku.is-visible { opacity: 1; }
.town__haiku[hidden], .town__haiku-entry[hidden] { display: none; }
.town__haiku-entry {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
  gap: .8em;
  margin: 0;
  font-family: var(--haiku-brush);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.6;
  letter-spacing: .1em;
}
.town__haiku.is-visible .town__haiku-entry:not([hidden]) {
  animation: haiku-drift 40s linear both;
}
.town__haiku-lines { display: flex; flex-direction: row-reverse; gap: .85em; }
.town__haiku-line { writing-mode: vertical-rl; white-space: nowrap; line-break: strict; }
.town__haiku-author {
  writing-mode: vertical-rl;
  align-self: flex-end;
  font-size: .65em;
  letter-spacing: .16em;
  opacity: .8;
}
/* 縦の列の順序や古語を、読み上げでは一つの自然な文として渡す。 */
.town__haiku-reading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes town-rise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}
@keyframes haiku-drift {
  0%   { transform: translateY(.35rem); }
  100% { transform: translateY(-.85rem); }
}

.town__cue {
  position: absolute; left: 0; right: 0; bottom: 4.4rem;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .18em;
  text-shadow: 0 1px 8px rgba(40, 26, 12, .5);
}
.town__cue::after {
  content: "";
  display: block;
  width: .55rem; height: .55rem;
  margin: .5rem auto 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: town-nod 2s ease-in-out infinite;
}
@keyframes town-nod {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(3px, 3px); }
}

/* 画面の隅の季節の切替 */
.season {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1.4rem;
  z-index: 3;
  display: flex;
  gap: .3rem;
}
.season__btn {
  font: inherit;
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1;
  color: #fbf6ea;
  background: rgba(31, 27, 22, .22);
  border: 1px solid rgba(251, 246, 234, .5);
  border-radius: var(--r);
  padding: .42em .5em;
  cursor: pointer;
}
.season__btn[aria-pressed="true"] {
  background: rgba(251, 246, 234, .88);
  color: var(--ink);
  border-color: rgba(251, 246, 234, .9);
}
/* 「めぐる」は季節を選ぶボタンではなく、めぐるのに任せるボタン。少し離して置く */
.season__btn--auto { margin-left: .4rem; }

/* ---------- 三叉路の道標 ---------- */

.crossroads { padding-block: var(--gap-wide); }

.crossroads__inner {
  width: min(100% - 2.4rem, 58rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}

.signpost { display: block; text-decoration: none; }

/* 木の板。角を少しだけ落として、板の木口を右側の影で出す */
.signpost__board {
  display: block;
  position: relative;
  background: linear-gradient(180deg, #efe6d3 0%, #e5d9c0 100%);
  border: 1px solid #c8b795;
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #c2b090;
  padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1rem, 2.6vw, 1.6rem);
  transition: transform .25s ease, box-shadow .25s ease;
}
.signpost:hover .signpost__board,
.signpost:focus-visible .signpost__board {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #c2b090;
}

.signpost__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.06rem, 2.5vw, 1.32rem);
  letter-spacing: .05em;
  margin-bottom: .5em;
}
.signpost__lead {
  display: block;
  font-size: .92rem;
  line-height: 1.85;
  color: #4a4034;
}

/* ★2026-09-13 朝の意匠直しで、板を支える柱（.signpost__post）を外した */

/* ---------- 見出しの上の動く絵 ---------- */

.vignette {
  margin: 0 0 clamp(1.1rem, 2.4vh, 1.7rem);
}

.vignette__stage {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--vignette-ratio, 1.6);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* 草花は背景が透けるので、接地の影だけ紙に敷いておく */
  background:
    radial-gradient(58% 30% at 50% 90%, rgba(31, 27, 22, .14), rgba(31, 27, 22, 0) 72%),
    linear-gradient(180deg, #fbf8f1 0%, #eee7d8 100%);
}

.vignette__video,
.vignette__still,
.vignette__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.vignette__video { object-fit: cover; }
.vignette__still { object-fit: contain; transition: opacity .5s ease; }
/* 動画ループの表紙は動画と同じ切り方にする（草花だけが contain） */
.vignette--loop .vignette__still { object-fit: cover; }
.vignette__canvas,
.vignette__video { opacity: 0; transition: opacity .5s ease; }

/* canvas が1コマ描けてから、動画は動き出してから入れ替える */
.vignette.is-on .vignette__canvas,
.vignette.is-on .vignette__video { opacity: 1; }
.vignette.is-on .vignette__still  { opacity: 0; }

.vignette__note {
  margin: .55em 0 0;
  font-size: .86rem;
  line-height: 1.85;
  color: var(--ink-soft);
  /* figcaption は p でも li でもないので、body の text-wrap: pretty が届かない */
  text-wrap: pretty;
}

/* 草花は本文の脇に置く小さな絵。動画ループは版面いっぱい */
.vignette--plant { width: min(100%, 20rem); }

/* 実写の1枚。版面いっぱいにすると、紙と墨の中で写真だけが手前へ出てきて */
.vignette--photo { width: min(100%, 78%); }
.vignette--photo .vignette__still { object-fit: cover; }

/* 作品の画面の静止画は版面いっぱい。枠と同じ比で焼いてあるので contain でも切れない。
   画面と画面のあいだの透明な隙間からは、そのまま紙の地が透ける */
.vignette--work .vignette__still { object-fit: contain; }

/* ---------- 絵の付いた道標 ---------- */

.crossroads__inner--three {
  width: min(100% - 2.4rem, 72rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signpost__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.6;
  border: 1px solid #c8b795;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fbf8f1 0%, #eee7d8 100%);
  pointer-events: none;
  transition: transform .25s ease;
}
.signpost__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signpost--media .signpost__board { border-radius: 0 0 2px 2px; }

/* 板の下端をそろえる。3本のうち1本だけ名前が2行になると（動くHTMLの作業マニュアル、 */
.crossroads__inner { align-items: stretch; }
.signpost--media { display: flex; flex-direction: column; }
.signpost--media .signpost__board { flex: 1 1 auto; }

/* 札だけが浮くと絵から剥がれて見えるので、絵も一緒に持ち上げる */
.signpost--media:hover .signpost__media,
.signpost--media:focus-visible .signpost__media { transform: translateY(-2px); }

/* ---------- 作品 ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.5vw, 2.6rem);
  align-items: center;
  margin-bottom: var(--gap-mid);
}
.work--flip .work__shot { order: 2; }

.work__shot {
  display: block;
  border: 1px solid var(--line);
  background: #efe8da;
  overflow: hidden;
}
.work__shot img { width: 100%; }

.work__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.14rem, 2.6vw, 1.36rem);
  letter-spacing: .04em;
  margin: 0 0 .6em;
}


.note--works { margin-top: 0; }

/* ---------- 進め方 ---------- */

.way { margin-bottom: 1.9em; }
.way__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: .04em;
  margin: 0 0 .45em;
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item {
  counter-increment: step;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: .9em;
}
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.55em;
  height: 1.55em;
  line-height: 1.5em;
  text-align: center;
  font-family: var(--serif);
  font-size: .92em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.plain { list-style: none; margin: 0; padding: 0; }
.plain__item {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: .8em;
}
.plain__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: .42em;
  height: 1px;
  background: var(--accent);
}

/* ---------- 教材の体験 ---------- */

.taiken { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }

.taiken__note { margin-top: .9em; }

.sample-note {
  margin: 1.1rem 0 1.35rem;
  padding-left: .9rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.8;
}

.demo-embed__panel {
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  background: var(--paper);
}
.demo-embed__panel[hidden] { display: none; }
.demo-embed__bar {
  display: flex;
  justify-content: flex-end;
  padding: .65rem;
  border-bottom: 1px solid var(--line);
}
.demo-embed__close {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: .25rem .15rem;
}
.demo-embed__slot {
  width: 100%;
  height: min(72vh, 780px);
  min-height: 520px;
}
.demo-embed__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 連絡（名刺） ---------- */

.card {
  list-style: none;
  margin: 0;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
}
.card__row { margin-bottom: .55em; }
.card__row:last-child { margin-bottom: 0; }
.card__qr { margin-top: .8em; }
.card a { color: var(--accent); text-underline-offset: .28em; }
.card [data-todo] { color: var(--ink-soft); }
/* 事業者の情報（つくる人）。ラベルを左に揃えて、値を読む列をそろえる */
.card--facts .card__row { display: flex; gap: 1.1em; align-items: baseline; }
.card__label { flex: 0 0 5.5em; color: var(--ink-soft); font-size: .92em; }
.card__value { flex: 1 1 auto; }
@media (max-width: 480px) {
  .card--facts .card__row { display: block; }
  .card__label { display: block; margin-bottom: .1em; }
}

/* ---------- 申し込みへの誘い ---------- */

/* ---------- 申し込みへの誘い（見た目は下の「押すところ」の節） ---------- */
.invite { margin: var(--gap-tight) 0 0; }

/* ---------- 申し込みの用紙 ---------- */

.apply { margin: 0; }

/* 迷惑投稿よけの隠し欄。人の目にも読み上げにも触れない位置へ逃がす */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { margin: 0 0 1.5em; }

.field__label {
  display: block;
  font-size: .92rem;
  letter-spacing: .02em;
  margin-bottom: .35em;
}

.field__input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .6em .7em;
}
.field__input:focus { border-color: var(--accent); }
.field__input--area { line-height: 1.85; resize: vertical; }

.choice {
  margin: 0 0 1.5em;
  padding: 0;
  border: 0;
}
.choice__legend {
  padding: 0;
  font-size: .92rem;
  letter-spacing: .02em;
  margin-bottom: .3em;
}
.choice__item {
  display: block;
  margin-bottom: .2em;
  cursor: pointer;
}
.choice__item input { margin-right: .4em; }

.apply__privacy { margin-top: 1.8em; }

.apply__send { margin: 1.6em 0 0; }

/* ---------- 切り絵の文様（うっすら） ---------- */

.section--kirie,
.footer { position: relative; isolation: isolate; }

.section--kirie::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/img/kirie.svg");
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: .075;
  pointer-events: none;
}
.footer::before { opacity: .09; }

/* ---------- 裾 ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-sub);
  padding-block: var(--gap-mid);
}

.footer__inner { width: min(100% - 2.4rem, 68rem); margin-inline: auto; }

.footer__mark {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .06em;
  margin: 0 0 1.1em;
}

.footer__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }

.footer__link {
  font-size: .84rem;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.footer__link:hover { border-bottom-color: currentColor; }
.footer__link--apply { color: var(--accent); border-bottom-color: currentColor; }

.footer__back-wrap { margin: 1.5rem 0 0; text-align: right; }
.footer__back {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 2.75rem;
  padding: .45rem 1rem;
  border: 1px solid currentColor;
  text-decoration: none;
  font-size: .84rem;
  letter-spacing: .05em;
}
.footer__back:hover,
.footer__back:focus-visible { color: var(--accent); }

/* ---------- 狭い画面 ---------- */

/* 文章と相談の入口。町の描画・位置・色は変更しない。 */
.body strong { font-weight: 700; }
.body, .card__row, .note { overflow-wrap: break-word; line-break: strict; }
.body, .note, .page-head__lead, .demo-status { word-break: auto-phrase; text-wrap: pretty; }
.section__title, .page-head__title { text-wrap: balance; }
.demo-entry + .demo-entry { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.demo-status { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid currentColor; font-size: 1rem; line-height: 1.9; }
.apply__alternative { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.site-nav__link, .site-lang, .sound, .season__btn { font-size: max(14px, .82rem); }
.choice__item { min-height: 44px; }

@media (max-width: 720px) {
  .work,
  .work--flip { grid-template-columns: 1fr; }
  /* 絵の付いた道標3本は、横に並べると絵が小さくなりすぎるので縦1列にする */
  .crossroads__inner--three { grid-template-columns: 1fr; }
  .vignette--plant { width: 100%; }
  /* 狭い画面では柱そのものが細いので、写真も版面いっぱいに戻す */
  .vignette--photo { width: 100%; }
  .work--flip .work__shot { order: 0; }
  .demo-embed__slot {
    height: 72svh;
    min-height: 440px;
  }
}

@media (max-width: 480px) {
  body { font-size: 16px; }

  .site-header__inner { gap: .4rem .8rem; }
  .site-nav { order: 3; width: 100%; }
  .site-nav__link { font-size: 14px; }

  /* 道標は縦に2つ */
  .crossroads__inner { grid-template-columns: 1fr; }

  .town__copy { top: 24%; right: clamp(1.2rem, 6vw, 5rem); }
  .town__haiku-entry {
    font-size: clamp(1.5rem, 6.6vw, 1.75rem);
    gap: .62em;
  }
  .town__haiku-lines { gap: .62em; }
  .town__cue { bottom: 5.2rem; }
  /* 5枚（春夏秋冬＋めぐる）は横に並びきらないので折り返す */
  .season {
    left: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
  }
  .season__btn--auto { margin-left: 0; }
}

/* ---------- 動きを減らす／JS が動かない ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .town__haiku.is-visible .town__haiku-entry:not([hidden]) { animation: none; }
}

/* JS が動かないときは季節ボタンが効かないので出さない（押せない死にボタンを残さない） */
html:not(.js) .season,
html:not(.js) .sound,
html:not(.js) .demo-embed__launch { display: none; }

/* ========================================================= */

/* ---------- トップ: 入れ替わらない3行の帯 ---------- */

.town__band {
  position: absolute;
  left: clamp(1.2rem, 6vw, 5rem);
  bottom: 5.4rem;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 2 * clamp(1.2rem, 6vw, 5rem));
  color: #fbf6ea;
  text-shadow: 0 1px 10px rgba(40, 26, 12, .7);
}
/* 草の逆光の上でも読めるように、帯の後ろにだけ薄墨を1枚敷く（絵は変えない） */
.town__band::before {
  content: "";
  position: absolute;
  top: -1.8rem;
  bottom: -1.5rem;
  /* 左は画面の端まで伸ばし、右は透明へ逃がす。四角い板の継ぎ目を草の上に出さないため */
  left: calc(-1 * clamp(1.2rem, 6vw, 5rem));
  right: -2.6rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(24, 20, 14, 0) 0%, rgba(24, 20, 14, .46) 30%,
      rgba(24, 20, 14, .46) 76%, rgba(24, 20, 14, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}
.town__band-who {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(.84rem, 2.1vw, 1rem);
  letter-spacing: .1em;
}
.town__band-what {
  margin: .4em 0 0;
  font-size: clamp(.88rem, 2.4vw, 1.06rem);
  letter-spacing: .04em;
  line-break: strict;
  word-break: auto-phrase;
}
.town__band-tel { margin: .6em 0 0; }
.town__band-link {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-size: clamp(.84rem, 2.2vw, .96rem);
  letter-spacing: .06em;
  color: inherit;
  text-decoration: none;
  background: rgba(31, 27, 22, .3);
  border: 1px solid rgba(251, 246, 234, .55);
  border-radius: var(--r);
  padding: .34em .8em;
}
.town__band-link:hover,
.town__band-link:focus-visible { border-color: rgba(251, 246, 234, .95); }

/* ---------- H1 が画面の右端で切れるのを直す ---------- */
.town__copy { max-width: calc(100% - 2 * clamp(1.2rem, 6vw, 5rem)); }
.town__headline { line-break: strict; text-wrap: balance; }

/* ---------- ヘッダの電話ボタン（トップ以外） ---------- */
.tel-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .76rem;
  letter-spacing: .04em;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .12em .55em;
  white-space: nowrap;
}
.tel-btn:hover,
.tel-btn:focus-visible { border-color: currentColor; }
.tel-btn__mark {
  width: .58em; height: .58em;
  border-radius: 50%;
  background: var(--accent);
}
.tel-btn__num { font-variant-numeric: tabular-nums; }

/* ---------- 節の末尾の、押せる電話とメールの1行 ---------- */
.tel-line { margin: 0 0 1.35em; }
.tel-line__link {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  letter-spacing: .06em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .12em;
}
.tel-line__link:hover,
.tel-line__link:focus-visible { color: var(--ink); }
.tel-line .card__qr { vertical-align: middle; margin-left: 1rem; }

/* ---------- 裾の連絡先 ---------- */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 0 0 1.1em;
  font-size: .84rem;
  letter-spacing: .04em;
}
.footer__address { color: var(--ink-soft); }

/* ---------- 道標を2本に ----------
   2026-09-15。3本目（手順型）を教材のページへ入れたので、上の既定（2列・58rem）へ戻した。
   横幅だけは絵の付いた札に合わせて少し広げる。--three は使わない */
.crossroads__inner { width: min(100% - 2.4rem, 62rem); }

/* ---------- サンプルの札 ---------- */
.sample-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .18em .5em;
  margin-inline-end: .7em;
  vertical-align: .14em;
  white-space: nowrap;
}
.work__name .sample-tag { margin-inline: .7em 0; }

/* ---------- 2つの形を比べる表 ---------- */
.table-wrap { overflow-x: auto; margin: 1.9em 0 1.5em; }
.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-size: .94em;
  line-height: 1.75;
}
.compare th,
.compare td {
  border: 1px solid var(--line);
  padding: .6em .8em;
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  background: var(--paper-sub);
  font-family: var(--serif);
  font-weight: 500;
}
.compare tbody th { font-weight: 500; color: var(--ink-soft); white-space: nowrap; }

/* 1つの節に見出しを積むページ（/about/・/contact/）で、見出しの上に息を入れる */
.section--kirie .section__title:not(:first-child) { margin-top: 2.6em; }

/* 作例の節の見出しは、絵の左端にそろえたうえで行長だけ抑える */
.works-lead > * { max-width: 37em; }
.works-lead { margin-bottom: var(--gap-mid); }

/* ---------- 補助金のページ ---------- */
/* 図は本文の柱より広く見せる（2026-09-19 本人「隙間が空いている」）。
   字の入った図なので、狭い柱に押し込めると読めない。左右は本文の柱と同じ所から始めて、右へ広げる */
.page--subsidy .wrap--narrow > .subsidy-visual--diagram {
  width: min(100% + 14rem, 100vw - 2.4rem, 60rem);
  margin-inline: 0 auto;
}
.subsidy-visual--diagram img { border: 1px solid var(--line); box-shadow: none; }
/* 写真は 2 枚だけ残した。影をやめ、細い罫で締める（「紙と墨」にそろえる） */
.subsidy-visual--photo img { box-shadow: none; border: 1px solid var(--line-strong); }
@media (max-width: 1100px) {
  .page--subsidy .wrap--narrow > .subsidy-visual--diagram { width: 100%; }
}

/* 制度の名前が長いぶん見出しも長い。狭い画面（430px 実測）で balance だけに任せると
   つく｜れる ・ 制｜度 ・ ……の｜は、 のように語の途中で折れるので、この頁の見出しに
   だけ文節折りを足す（本文がすでに使っている word-break: auto-phrase と同じ手）。
   ほかのページの見出しは今までどおり balance のまま。 */
.page--subsidy .page-head__title,
.page--subsidy .section__title { word-break: auto-phrase; }

/* ---------- 出どころ（/subsidy/ と /tutawaru/） ---------- */
/* 資料の名前をリンクにして、機関名はその下へ小さく落とす。長いPDFのURLは
   出さない（狭い画面で横にはみ出すため。行き先は href だけが持つ） */
.sources .plain__item { margin-bottom: 1.1em; }
/* 添え書き（.note）のすぐ下に並べるとき用。項目どうしの間より上が詰まって
   見えるので、1行ぶんだけ空ける（/tutawaru/ の育成就労の節。2026-09-13） */
.sources--after-note { margin-top: 1.1em; }
.sources__org { display: block; margin-top: .2em; color: var(--ink-soft); font-size: .88rem; }

/* ---------- こまごま ---------- */
.page-head__aside { margin: 1.1em 0 .7em; color: var(--ink-soft); font-size: .94em; }
.apply__reply { margin-top: .5em; }

/* ---------- 狭い画面（案B の追加分） ---------- */

/* ナビの4語目が切れるのを直す。4語が長くなったので、折り返す幅を 480 から 700 へ広げる */
@media (max-width: 700px) {
  .site-nav { order: 3; width: 100%; }
  .site-nav__link { font-size: 14px; letter-spacing: .02em; }

  /* 道標は縦に2つ */
  .crossroads__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* 季節ボタンとスクロールの誘いの上に、帯を積む */
  .town__band { bottom: 6.6rem; }

  /* 表は横に逃がさず、3列とも画面に収める（切れた列に気づけないため） */
  .compare { min-width: 0; font-size: .86em; line-height: 1.65; }
  .compare th, .compare td { padding: .5em .5em; }
  .compare tbody th { white-space: normal; }
}

/* ========================================================= */

/* 色と線と間合い。--line を薄墨にすると、サイト中の1pxの罫が一度に墨になる */
:root {
  --line:        rgba(31, 27, 22, .16);
  --line-strong: rgba(31, 27, 22, .34);
  --seal:        #9c5220;   /* 朱。--accent と同じ色を、印としてだけ使う名で持つ */

  /* 節と節のあいだを広げる。行の長さ（wrap--narrow 37em）は変えない */
  --gap-wide:  clamp(5.4rem, 13vh, 8.4rem);
  --gap-mid:   clamp(3.8rem, 8.5vh, 5.4rem);
  --gap-tight: clamp(2.5rem, 5.5vh, 3.4rem);
}

/* 角を落とす */
.site-lang__now, .site-lang__link, .sound, .tel-btn, .season__btn,
.field__input, .town__band-link,
.sample-tag, .vignette__stage, .signpost__media, .signpost__board {
  border-radius: var(--r);   /* 2026-09-19 本人：角を落とさず、若干の丸みで統一 */
}

/* 見出し。明朝はそのまま、字間だけ広げる。H2 の前に短い縦の罫を1本 */
.page-head__title { letter-spacing: .06em; }

.section__title {
  letter-spacing: .085em;
  margin-bottom: 1.15em;
}
.section__title::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.45em;
  margin: 0 0 .6em;
  background: linear-gradient(180deg, rgba(31, 27, 22, 0), rgba(31, 27, 22, .5));
}

/* H3 はより軽く。罫は立てない */
.section__title--small {
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.section__title--small::before { display: none; }

.work__name, .way__name, .footer__mark { letter-spacing: .08em; }

/* ナビと言語切替。位置と大きさは変えず、語の間に細い縦の罫と広い字間 */
.site-nav { gap: .3rem 0; }
.site-nav__link {
  padding: 0 .82rem;
  letter-spacing: .1em;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}
.site-nav > .site-nav__link:first-child { border-left: 0; padding-left: 0; }
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
}

.site-lang { gap: 0; }
.site-lang__now,
.site-lang__link {
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 .62rem;
  letter-spacing: .1em;
}
.site-lang > :first-child { border-left: 0; padding-left: 0; }
/* 色ではなく濃さで差を付ける。地が紙でも絵でも効く */
.site-lang__now {
  border-bottom: 1px solid currentColor;
  padding-bottom: .1em;
}
.site-lang__link { opacity: .72; }
.site-lang__link:hover,
.site-lang__link:focus-visible { opacity: 1; border-color: var(--line); }

.site-header--overlay .site-nav__link,
.site-header--overlay .site-lang__now,
.site-header--overlay .site-lang__link { border-left-color: rgba(251, 246, 234, .34); }

/* 三叉路の道標＝3枚の紙の札。木の板（茶の面・木口の影・支柱）をやめ、 */
.signpost--media {
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color .25s ease;
}
.signpost--media:hover,
.signpost--media:focus-visible { border-color: var(--line-strong); }

.signpost__media {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbf8f1 0%, #f2ece0 100%);
}
/* 紙は浮かない */
.signpost--media:hover .signpost__media,
.signpost--media:focus-visible .signpost__media,
.signpost:hover .signpost__board,
.signpost:focus-visible .signpost__board { transform: none; box-shadow: none; }

.signpost__board {
  background: none;
  border: 0;
  box-shadow: none;
  transition: none;
  padding: clamp(1.05rem, 2.4vw, 1.45rem) clamp(1rem, 2.2vw, 1.3rem) clamp(1.2rem, 2.6vw, 1.55rem);
}

.signpost__name {
  position: relative;
  padding-left: 1.2em;
  letter-spacing: .08em;
  margin-bottom: .62em;
}
/* 朱の印。漢数字でなく点にしたのは、英語と中国語の札でも同じ形で出るため */
.signpost__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .3em;
  height: .3em;
  background: var(--seal);
}

.signpost__lead {
  color: var(--ink-soft);
  font-size: .88rem;
  letter-spacing: .02em;
}

/* 絵の枠と添え書き。道標と同じ語彙にそろえる */
.vignette__stage { border-color: var(--line); }

.vignette__note {
  position: relative;
  margin-top: .7em;
  padding-left: 1.15em;
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .04em;
}
.vignette__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: .32em;
  height: .32em;
  background: var(--seal);
}

/* トップの帯。紙も枠もやめ、草の上に生成りの字を直接置く（2026-09-13 本人「透過の背景はやめて素の上に。白い字が映えるように」）。
   読めるかどうかは字の影だけで支える。朱の縦線も出さない */
.town__band {
  color: #fbf6ea;
  text-shadow: 0 1px 2px rgba(20, 16, 10, .6), 0 0 16px rgba(20, 16, 10, .45);
  background: none;
  border: 0;
  padding: 0;
  background-image: none;
}
.town__band::before { display: none; }
.town__band-link {
  background: transparent;
  border: 1px solid rgba(251, 246, 234, .6);
  color: #fbf6ea;
  text-shadow: 0 1px 2px rgba(20, 16, 10, .6);
}
.town__band-link:hover,
.town__band-link:focus-visible {
  border-color: #fbf6ea;
  background: rgba(251, 246, 234, .12);
}


.apply__button:hover,
.apply__button:focus-visible {
  background: rgba(31, 27, 22, .08);
  color: var(--ink);
  border-color: var(--ink);
}

.field__input:focus { border-color: var(--ink); }

.invite__link { letter-spacing: .08em; }

.season__btn { background: rgba(31, 27, 22, .26); }

/* 脇に添える1行 */
.body--aside,
.demo-status { border-left-width: 1px; border-left-color: var(--line); }
.sample-note { border-left-width: 1px; border-left-color: var(--seal); }

.work__shot { background: var(--paper-sub); }

/* 比べる表。縦線を消して横の細い罫だけに */
.compare th,
.compare td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .72em .9em;
}
.compare th:first-child,
.compare td:first-child { padding-left: 0; }
.compare thead th {
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  letter-spacing: .06em;
}
.compare tbody th { color: var(--ink); }

/* 切り絵の文様。本文の背は柄が勝つので1段薄く、裾は繰り返しをやめて中央に1つ（閉じの印） */
.section--kirie::before { opacity: .028; }

.footer { padding-block: var(--gap-mid) calc(var(--gap-mid) + 3.4rem); }
.footer::before {
  background-repeat: no-repeat;
  background-position: center calc(100% - 1.1rem);
  background-size: 132px 132px;
  opacity: .15;
}

/* 狭い画面 */
@media (max-width: 700px) {
  /* 折り返すと2行目の頭に行き場のない罫が残る。罫をやめて余白で分ける */
  .site-nav { gap: .3rem 1rem; }
  .site-nav__link { padding: 0; border-left: 0; letter-spacing: .06em; }
}

/* ========================================================= */

:root {
  --washi: .62;   /* 紙の繊維。拡大して分かる程度 */
  --sumi:  .3;    /* 余白の隅の草花 */
  --brush: .26;   /* 節の切れ目の筆の線 */
}

/* 和紙の地。繊維は本文の下に固定で敷く。地の色は html が持ち body は透かす */
html { background: var(--paper); }
body { background: transparent; }

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/img/washi.webp");
  background-size: 256px 256px;
  opacity: var(--washi);
}

/* 色を敷く節と裾は、繊維が透けるまで薄める */
.section--belief { background: rgba(241, 235, 221, .82); }
.footer { background: rgba(241, 235, 221, .86); }

/* トップの帯は町の上。固定の層が届かないので自分で繊維を持つ */


/* 節の切れ目の筆の一払い。地の色が変わる節（--belief/--kirie）には出さない */
.section + .section:not(.section--belief):not(.section--kirie)::before {
  content: "";
  position: absolute;
  top: -.5rem;
  left: 50%;
  width: 172px;
  height: 8px;
  transform: translateX(-50%);
  background: url("/assets/img/brush.svg") no-repeat center / contain;
  opacity: var(--brush);
  pointer-events: none;
}

/* 余白の隅の草花（墨絵）。1ページに1点だけ、本文の右外に置く */
@media (min-width: 1180px) {
  .page--index .section--belief::after,
  .page--web .section--belief::after,
  .page--tutawaru .section--belief::after,
  .page--about .section--kirie::after,
  .page--contact .section--kirie::after {
    content: "";
    position: absolute;
    left: calc(50% + 21rem);
    top: 2.2rem;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    opacity: var(--sumi);
    pointer-events: none;
  }

  /* ページごとに草花を変える。同じ絵が続くと型に見える */
  .page--index .section--belief::after {
    background-image: url("/assets/img/sumi-rice.webp");
    width: 236px; height: 152px;
  }
  .page--web .section--belief::after {
    background-image: url("/assets/img/sumi-susuki.webp");
    width: 158px; height: 236px;
  }
  .page--tutawaru .section--belief::after {
    background-image: url("/assets/img/sumi-tea.webp");
    width: 232px; height: 175px;
  }
  .page--about .section--kirie::after {
    background-image: url("/assets/img/sumi-higanbana.webp");
    width: 148px; height: 246px;
  }
  .page--contact .section--kirie::after {
    background-image: url("/assets/img/sumi-cosmos.webp");
    width: 130px; height: 261px;
  }
}

/* ---------- 目次（2026-09-15 本人「読む人が迷わないように」）----------
   長い頁（トップ・補助金）の頭に、見出しを 1 行ずつ。薄墨の罫と細い字だけ（枠も絵も付けない）。
   PC は 2 列、電話は 1 列。番号は小さく。行き先の節は固定ヘッダの下に隠れないよう scroll-margin を持つ */
.section--toc { padding-block: 0 var(--gap-mid); }
.toc { border-top: 1px solid var(--line); padding-top: 1rem; }
.toc__label { margin: 0 0 .55rem; font-size: .78rem; letter-spacing: .14em; color: var(--ink-soft); }
.toc__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.6rem; counter-reset: toc; }
.toc__item { break-inside: avoid; padding: .3rem 0 .3rem 2.2em; text-indent: -2.2em; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.5; }
.toc__item::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); display: inline-block; width: 1.5em; margin-right: .7em; text-indent: 0; font-size: .72rem; letter-spacing: .06em; color: var(--ink-soft); }
.toc__link { color: inherit; text-decoration: none; }
.toc__link:hover, .toc__link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (max-width: 700px) { .toc__list { columns: 1; } }

/* ---------- 自作の図（SVG・2026-09-15 第 1 弾）----------
   紙と墨: 墨の棒人間・細い線・薄い斜線の塗り。枠も影も付けない。文言は strings から（_figures.html.j2）。
   ★2026-09-15、本人の参考画像に合わせて描き直した（横長・軒の出た屋根・棒人間・細い線） */
.sumie { margin: 2.4rem 0 1.6rem; }
.sumie svg { display: block; width: 100%; height: auto; }
.sumie__ink { fill: var(--ink); }
.sumie__line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sumie__line--hair { stroke-width: 1.6; }
.sumie__wall { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.sumie__fill { fill: var(--ink-soft); opacity: .07; }
.sumie__fill--deep { opacity: .13; }
.sumie__hatch { stroke: var(--ink-soft); stroke-width: .8; opacity: .3; }
.sumie__beam { fill: var(--accent); opacity: .2; }
/* 棒人間。胴は太く、手足は細く（線の端は丸く） */
.sumie__figure path { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.sumie__figure .sumie__limb { stroke-width: 9; }
.sumie__figure--big path { stroke-width: 20; }
.sumie__figure--big .sumie__limb { stroke-width: 12; }
.sumie__leader { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }
.sumie__dot { fill: var(--ink-soft); }
.sumie__label { font-family: var(--serif); font-size: 30px; letter-spacing: .08em; fill: var(--ink-soft); }
/* 第 2 弾（危ないこと）で足した部品 */
.sumie__flame { fill: var(--accent); opacity: .5; }
.sumie__flame--core { opacity: .85; }
.sumie__barrier { fill: none; stroke: var(--ink-soft); stroke-width: 2.6; stroke-dasharray: 10 12; stroke-linecap: round; }
.sumie__mark { fill: none; stroke: var(--ink-soft); stroke-width: 2.6; stroke-linecap: round; }
.sumie__arrow { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* 第 3 弾（見せられないもの）で足した部品: 朱の薄い塗り（色づいたみかん） */
.sumie__tint { fill: var(--accent); opacity: .5; }
.sumie__tint--light { opacity: .22; }

/* ---------- 押すところ（2026-09-15・本人「Swell のボタンみたいに」） ----------
   次の一歩（問い合わせ・体験する・作品を見る）は朱に寄せた茶のべた塗り、
   メールは紙地に墨の枠。色は 1 色だけで、角丸 2px・影なし。押すと 1px 下がる。
   ★class は前からのものを使い回している（invite__link / taiken__link / work__try / apply__button） */
.invite { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: center; }

.invite__link,
.taiken__link,
.work__try a,
.apply__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1em;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.3vw, 1.08rem);
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: .7em 2.1em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.invite__link:hover, .invite__link:focus-visible,
.taiken__link:hover, .taiken__link:focus-visible,
.work__try a:hover, .work__try a:focus-visible,
.apply__button:hover, .apply__button:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.invite__link:active,
.taiken__link:active,
.work__try a:active,
.apply__button:active { transform: translateY(1px); }

/* メールと、主でない行き先。紙のまま、枠だけで押せると分かる形に */
.invite__link--sub {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.invite__link--sub:hover,
.invite__link--sub:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* 置き場がまだ決まっていない入口は、押せそうに見せない（前からの決めごと） */
.taiken__link[data-todo] {
  background: transparent;
  color: var(--ink-soft);
  border-style: dashed;
  border-color: var(--line);
  cursor: default;
}
.taiken__link[data-todo]:hover { background: transparent; color: var(--ink-soft); }

.work__try { margin: 1.3em 0 0; }
.apply__button { letter-spacing: .16em; padding-inline: 3em; }

@media (max-width: 480px) {
  .invite { gap: .8rem; }
  .invite__link, .taiken__link, .work__try a, .apply__button { width: 100%; padding-inline: 1.2em; }
}

/* 見本の下の「体験してみる」（2026-09-15・本人「右側に寄せて、テキストの上寄りにまとめて」）。
   上を詰めて自分の文章にくっつけ、下を広げて次の見本と離す。狭い画面では横いっぱいに戻す */
.sample-go {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin: 1.1em 0 var(--gap-wide);
}

/* 見本の絵は、すぐ下の見出しのもの。近づけて 1 つの塊に見せる（本人「画像と文章の間隔が寄りすぎ」）*/
#samples .vignette + .section__title--small { margin-top: 1.15em; }
.sample-go .invite { margin: 0; }
.sample-go .taiken__note { margin-top: .75em; max-width: 34em; }

@media (max-width: 480px) {
  .sample-go { align-items: stretch; text-align: left; }
}

/* 業種ごとのデザイン案の帯（/web/・2026-09-17 本人「一度あなたの言う通りそこに挿入してみて」）。
   紙の上を札がゆっくり流れる。意匠は「紙と墨」＝角丸 2px・影なし・1px の薄墨の罫。
   文章は狭い柱（wrap--narrow）、帯だけ左右いっぱい。札の上に小さく業種名。
   元の見本（mapleads/data/web-showcase/20260917-industry-strip-v2）の角丸 16px と影は持ち込まない */
.section--strip { padding-block: var(--gap-tight) var(--gap-mid); }
.strip { margin-top: var(--gap-tight); }
.strip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.strip__rail {
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  padding-block: .4rem 1rem;
  overflow-anchor: none;
}
.strip__rail::-webkit-scrollbar { display: none; }
.strip__track {
  display: flex;
  gap: 1.4rem;
  width: max-content;
  margin: 0;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  list-style: none;
}
.strip__card { flex: none; width: clamp(280px, 44vw, 37em); }
.strip__open {
  position: relative;   /* 読み上げ用の隠し文字（absolute）をこの札の中に留める。外に出ると帯の幅ぶん頁が横にはみ出す */
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.strip__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.strip__name {
  display: block;
  margin: 0 0 .5em .1em;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.strip__name .sample-tag { margin-inline: .6em 0; }
.strip__stage {
  display: block;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: var(--paper-sub);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.strip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strip__hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.strip__controls {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .2rem clamp(1.2rem, 4vw, 3rem) 0;
}
.strip__controls[hidden] { display: none; }
.strip__btn {
  min-height: 44px;
  min-width: 44px;
  padding: .5em .95em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r);
  font: inherit;
  font-size: .88rem;
  letter-spacing: .06em;
  cursor: pointer;
}
.strip__btn:hover, .strip__btn:focus-visible { border-color: var(--ink); }
.strip__btn:active { transform: translateY(1px); }
.strip__btn--toggle { min-width: 9em; }

/* 大きく見る窓。紙の上に 1 枚だけ置く */
.strip__viewer {
  width: min(100% - 2rem, 62rem);
  max-width: none;
  padding: 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.strip__viewer::backdrop { background: rgba(31, 27, 22, .55); }
.strip__viewer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .8rem;
}
.strip__viewer-title { margin: 0; font-size: 1rem; letter-spacing: .08em; font-weight: 600; }
.strip__viewer-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-sub);
}

@media (max-width: 720px) {
  .strip__track { gap: .9rem; }
  .strip__card { width: 86vw; }
  .strip__controls { justify-content: center; }
}

/* トップは、お問い合わせボタンのすぐ下に帯が続く（2026-09-17 本人）。
   ボタンと帯の文のあいだを空けて、別の話だと分かるようにする */
.strip-lead { margin-top: var(--gap-mid); }

/* 相談前の二つの場面。文章の直前に、読み手が状況を思い浮かべる写真だけを置く。 */
.customer-story-image {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.customer-story-image picture,
.customer-story-image img,
.customer-story-image video {
  display: block;
  width: 100%;
}
.customer-story-image img,
.customer-story-image video { height: auto; }

/* Claude 原稿の各節を変えず、相談場面の写真を見出しの前に置く。 */
.subsidy-visual {
  margin: 0 0 clamp(1.7rem, 4.5vw, 3rem);
}
.subsidy-visual picture,
.subsidy-visual img {
  display: block;
  width: 100%;
}
.subsidy-visual img {
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 16px 38px rgba(49, 43, 34, .1);
}
.subsidy-visual--diagram img {
  background: var(--paper-sub);
  box-shadow: 0 10px 28px rgba(49, 43, 34, .07);
}
.page--subsidy .page-head .subsidy-visual {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

/* 「つくる人」。元写真を中央に寄せ、顔から膝あたりまでの縦長に整えた版。 */
.customer-profile-portrait {
  width: min(100%, 32rem);
  margin: clamp(1.5rem, 4vw, 2.8rem) auto;
}
.customer-profile-portrait picture,
.customer-profile-portrait img {
  display: block;
  width: 100%;
}
.customer-profile-portrait img {
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 16px 38px rgba(49, 43, 34, .11);
}

/* ========================================================= */

/* ---------- 顧客起点の頁（2026-09-19・Fable の仕上げ）----------
   骨組みは Codex（src/templates/customer/）。ここは見た目だけ：間合い・幅・押すところ・相談の枠・図。
   ★間合いは 2 段。大見出しの節どうしは広く（--c-gap の 2 倍）、大見出しと小見出し・小見出しどうしは寄せる（--c-gap-sub の 2 倍）。
     骨組みのままだと、どの節も上下 65px ずつで、質問 1 つごとに 170px 空いていた（本人「隙間や間隔が多く空いている」）。
     節の段は data-level（見出しの段）と data-has-sub（すぐ下に小見出しの節が続く）で見分ける。
   ★幅は 3 段。文章は 37em のまま（読みやすさの根）。絵・動画・相談の枠は --c-wide、札の並びと図は --c-wider、
     見本の帯は画面の左右に少し余白（--c-side）を残して広げる（本人「端から端へ突き抜けず、若干少し左右残して」）。
   ★押すところは前からの決まり：次の一歩だけ朱のべた塗り、ほかは墨の枠。影なし。角は --r（若干の丸み）で統一。 */
[data-customer-scaffold] {
  --c-gap: clamp(2.5rem, 5.6vh, 3.2rem);
  --c-gap-sub: 1.2rem;
  --c-side: clamp(1.2rem, 4vw, 3.6rem);
  --c-wide: min(100vw - 2.4rem, 46rem);
  --c-wider: min(100vw - 2.4rem, 60rem);
  --c-strip: min(100vw - 2 * var(--c-side), 104rem);
  --c-sheet: #fffdf8;
}

/* 間合い */
[data-customer-scaffold] .section { padding-block: var(--c-gap); }
[data-customer-scaffold] .section[data-has-sub] { padding-bottom: var(--c-gap-sub); }
[data-customer-scaffold] .section[data-level="3"] { padding-top: var(--c-gap-sub); }
[data-customer-scaffold] .section[data-level="0"] { padding-top: 0; }
[data-customer-scaffold] .section[data-level="1"] { padding-top: calc(var(--header-h) + var(--c-gap) + .8rem); }
[data-customer-scaffold] .section > .wrap > * { margin-block: 0; }
[data-customer-scaffold] .section > .wrap > * + * { margin-top: clamp(1.5rem, 3.4vw, 2.1rem); }
[data-customer-scaffold] .ask-first { padding-top: var(--c-gap); }

/* 頁の終わりの相談。紙を 1 段沈めて、ここで話が閉じると分かるようにする */
[data-customer-scaffold] .section[data-closing] {
  margin-top: var(--c-gap);
  padding-block: calc(var(--c-gap) * 1.25);
  background: var(--paper-sub);
  border-top: 1px solid var(--line);
}

/* 文章 */
.ctext > :first-child { margin-top: 0; }
.ctext > :last-child { margin-bottom: 0; }
.ctext h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.7vw, 2.3rem);
  line-height: 1.5;
  letter-spacing: .06em;
  margin: 0 0 1.05em;
}
.ctext h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.28rem, 2.9vw, 1.58rem);
  line-height: 1.6;
  letter-spacing: .08em;
  margin: 0 0 1.05em;
}
.ctext h2::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.45em;
  margin: 0 0 .6em;
  background: linear-gradient(180deg, rgba(31, 27, 22, 0), rgba(31, 27, 22, .5));
}
.ctext h3,
.ask__label {
  position: relative;
  padding-left: 1.15em;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .06em;
}
.ctext h3::before,
.ask__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: .3em;
  height: .3em;
  background: var(--seal);
}
.ctext h3 {
  font-size: clamp(1.08rem, 2.3vw, 1.22rem);
  line-height: 1.65;
  margin: 0 0 .75em;
}
.ctext p { margin: 0 0 1.3em; }
.ctext strong { font-weight: 700; }
.ctext ul {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ctext ul li {
  position: relative;
  padding: .5em 0 .5em 1.4em;
  border-bottom: 1px solid var(--line);
  line-height: 1.7;
}
.ctext ul li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.35em;
  width: .5em;
  height: 1px;
  background: var(--ink-soft);
}
.ctext .table-wrap { margin: 1.6em 0 1.2em; }
.ctext .compare { width: 100%; border-collapse: collapse; }
.ctext .compare th {
  text-align: left;
  font-weight: 500;
  font-size: .86em;
  letter-spacing: .06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
}
/* 料金の表。金額だけ明朝で 1 段大きく、右に寄せる */
[data-copy-section="WEB-05"] .compare tr > :last-child:nth-child(2),
[data-copy-section="EDU-05"] .compare tr > :last-child:nth-child(2) { text-align: right; padding-right: 0; white-space: nowrap; }
[data-copy-section="WEB-05"] .compare td:last-child:nth-child(2),
[data-copy-section="EDU-05"] .compare td:last-child:nth-child(2) {
  font-family: var(--serif);
  font-size: 1.18em;
  letter-spacing: .06em;
}

/* 目次。項目が長い頁（大見出しをそのまま並べた頁）は 1 列 */
[data-customer-scaffold] .toc--long .toc__list { columns: 1; }

/* 絵と動く絵 */
.cmedia,
[data-customer-scaffold] .customer-story-image {
  width: var(--c-wide);
  margin-inline: calc(50% - var(--c-wide) / 2);
}
[data-customer-scaffold] .customer-story-image img {
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cmedia__stage {
  position: relative;
  overflow: hidden;
  background: var(--paper-sub);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cmedia__stage[hidden] { display: none; }
.cmedia__stage video { display: block; width: 100%; height: auto; }
.cmedia__note {
  position: relative;
  margin: .7em 0 0;
  padding-left: 1.15em;
  font-family: var(--serif);
  font-size: .85rem;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.cmedia__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .32em;
  height: .32em;
  background: var(--seal);
}
.vtoggle {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  min-height: 2.6rem;
  padding: .3em .9em;
  font: inherit;
  font-size: .76rem;
  letter-spacing: .08em;
  color: #fbf6ea;
  background: rgba(31, 27, 22, .58);
  border: 1px solid rgba(251, 246, 234, .5);
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color .18s ease;
}
.vtoggle[hidden] { display: none; }
.vtoggle:hover, .vtoggle:focus-visible { background: rgba(31, 27, 22, .86); }

/* 札の並び（トップの教材 3 つ）と、2 本並べる制作の画面 */
.ccards,
.cmedia--pair,
.cmedia--flow,
.cmedia--report {
  width: var(--c-wider);
  margin-inline: calc(50% - var(--c-wider) / 2);
}
.ccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.ccards .cmedia { width: auto; margin-inline: 0; }
.cmedia__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2.2vw, 1.4rem); }
.cmedia--sub { width: min(100%, 27rem); margin-inline: auto 0; }
.cmedia--qr { width: min(100%, 12.5rem); margin-inline: 0; }
.cmedia--qr img { width: 100%; height: auto; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.cmedia__start { margin: 1rem 0 0; }
.cmedia__loading { margin: .8rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.cmedia__frame iframe { display: block; width: 100%; height: min(82vh, 760px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
[data-customer-scaffold] .customer-profile-portrait { width: min(100%, 24rem); margin-inline: auto; }
[data-customer-scaffold] .customer-profile-portrait img { box-shadow: none; }

/* 見本の帯。左右に --c-side だけ残して広げ、端は紙に溶かす。札は PC で 2〜3 枚が同時に見える幅 */
.cstrip { width: var(--c-strip); margin-inline: calc(50% - var(--c-strip) / 2); }
.cstrip .strip { margin-top: 0; }
.cstrip .strip__rail {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.cstrip .strip__track { padding-inline: 2.5rem; }
.cstrip .strip__card { width: clamp(260px, 30vw, 30rem); }
.cstrip .strip__controls { padding-inline: 2.5rem; }
.cstrip__note {
  width: min(100%, 37em);
  margin: .9rem auto 0;
  font-size: .85rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 相談の枠 */
.ask {
  width: var(--c-wide);
  margin-inline: calc(50% - var(--c-wide) / 2);
  padding: clamp(1.3rem, 3.2vw, 2rem) clamp(1.2rem, 3.4vw, 2.2rem);
  background: var(--c-sheet);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.ask__label { margin: 0; font-size: clamp(1.06rem, 2.3vw, 1.2rem); line-height: 1.6; }
.ask__note { margin: .3em 0 1.15em; font-size: .9rem; color: var(--ink-soft); }
.ask__ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  align-items: start;
}
.ask__btn,
.go__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.3em;
  padding: .55em .9em;
  font-family: var(--serif);
  font-size: clamp(.95rem, 2.1vw, 1.02rem);
  line-height: 1.45;
  letter-spacing: .07em;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.ask__btn:hover, .ask__btn:focus-visible,
.go__link:hover, .go__link:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ask__btn:active, .go__link:active { transform: translateY(1px); }
.ask__btn--main,
.go__link--main { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.ask__num { display: inline-block; white-space: nowrap; }
.ask__ext { display: block; margin-top: .5em; font-size: .75rem; line-height: 1.65; color: var(--ink-soft); }
.ask__more { margin: 1.05rem 0 0; text-align: right; font-size: .9rem; }
.ask__more a { text-underline-offset: .32em; text-decoration-thickness: 1px; }
.ask__more a::after { content: "→"; display: inline-block; margin-left: .45em; font-family: var(--sans); }

/* 次の一歩（節の中のボタン）。続けて並ぶものは 1 行に */
.go-row { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: flex-start; }
.go { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4em; }
.go__link { display: inline-flex; gap: .75em; padding-inline: 1.5em; }
.go__link::after { content: "→"; font-family: var(--sans); transition: transform .18s ease; }
.go__link[target="_blank"]::after { content: "↗"; }
.go__link[href^="tel:"]::after, .go__link[href^="mailto:"]::after { content: none; }
.go__link:hover::after, .go__link:focus-visible::after { transform: translateX(3px); }
.go__note { font-size: .75rem; letter-spacing: .04em; color: var(--ink-soft); }

/* トップの最初の画面。リードは読める幅で折り、ボタンは生成りの紙で置く（絵の上でも押せると分かるように） */
.town__band-what--lead { max-width: 36em; font-size: clamp(.92rem, 1.45vw, 1.06rem); line-height: 1.95; }
.town__band-go { margin: 1.1em 0 0; }
/* ★2026-09-19 本人「色がはっきりしすぎ。ぎりぎりまで透ける背景に」。生成りのべた塗りをやめ、
   絵が透ける薄い紙 1 枚＋生成りの細い枠＋生成りの字。読めるかどうかは字の影と、うしろのぼかしで支える */
.town__band-link--go {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.5vw, 1.04rem);
  letter-spacing: .1em;
  padding: .72em 1.6em;
  color: #fbf6ea;
  background: rgba(251, 246, 234, .14);
  border: 1px solid rgba(251, 246, 234, .72);
  text-shadow: 0 1px 2px rgba(20, 16, 10, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.town__band-link--go::after { content: "→"; margin-left: .7em; font-family: var(--sans); }
.town__band-link--go:hover,
.town__band-link--go:focus-visible { color: #fbf6ea; background: rgba(251, 246, 234, .26); border-color: #fbf6ea; }
/* 季節のボタン。選ばれている 1 つ（はじめは「めぐる」）も、べた塗りにせず少し明るい透かしと濃い枠で示す */
[data-customer-scaffold] .season__btn { background: rgba(31, 27, 22, .16); border-color: rgba(251, 246, 234, .45); }
[data-customer-scaffold] .season__btn[aria-pressed="true"] {
  color: #fbf6ea;
  background: rgba(251, 246, 234, .26);
  border-color: #fbf6ea;
  text-shadow: 0 1px 2px rgba(20, 16, 10, .55);
}

/* 図：知ってから相談するまでの流れ（A04） */
.cflow {
  padding: clamp(1.2rem, 3vw, 1.9rem);
  background: var(--c-sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cflow__title { margin: 0 0 1.25em; font-family: var(--serif); font-size: 1rem; letter-spacing: .1em; text-align: center; color: var(--ink-soft); }
.cflow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem; }
.cflow__step { position: relative; padding: 1rem 1.1rem 1.15rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); }
.cflow__step + .cflow__step::before { content: ""; position: absolute; left: -2rem; top: 50%; width: 1.4rem; height: 1px; background: var(--ink-soft); }
.cflow__step + .cflow__step::after { content: ""; position: absolute; left: -1.05rem; top: calc(50% - .22rem); width: .45rem; height: .45rem; border-top: 1px solid var(--ink-soft); border-right: 1px solid var(--ink-soft); transform: rotate(45deg); }
.cflow__label { display: block; margin-bottom: .5em; padding-bottom: .5em; font-family: var(--serif); font-size: 1.02rem; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.cflow__text { display: block; font-size: .9rem; line-height: 1.8; }
.cflow__step--goal { border-color: var(--seal); }
.cflow__step--goal .cflow__label { color: var(--seal); }
.cflow__aside { margin: 1.3rem 0 0; padding-top: .95rem; font-size: .86rem; text-align: center; color: var(--ink-soft); border-top: 1px dashed var(--line-strong); }

/* 図：進め方（WEB-06）。縦に並べ、注記は指定の工程の前に挟む */
.csteps__list { list-style: none; margin: 0; padding: 0; }
.csteps__step { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1.05rem; padding-bottom: 1.5rem; }
.csteps__step::before { content: ""; position: absolute; left: 1.3rem; top: 2.6rem; bottom: 0; width: 1px; background: var(--line-strong); }
.csteps__list:last-child .csteps__step:last-child { padding-bottom: 0; }
.csteps__list:last-child .csteps__step:last-child::before { display: none; }
.csteps__num { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font-family: var(--serif); font-size: 1.05rem; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; }
.csteps__label { align-self: end; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; letter-spacing: .06em; }
.csteps__text { grid-column: 2; font-size: .94rem; line-height: 1.8; color: var(--ink-soft); }
.csteps__note { position: relative; margin: 0 0 1.5rem 3.65rem; padding: .6rem 1rem; font-size: .92rem; line-height: 1.75; color: var(--seal); background: var(--c-sheet); border: 1px solid var(--seal); border-radius: var(--r); }
.csteps__note::before { content: ""; position: absolute; left: calc(-2.35rem - 1px); top: -1px; bottom: calc(-1.5rem - 1px); width: 1px; background: var(--line-strong); }

/* 説明レポートの一例（A03）。机の上の本物の紙面の写真。電話幅は 1 枚目に寄った縦長の写真に替える */
/* 紙の色とサイトの地の色が近いので、写真の縁を墨の細い線で締める（2026-09-19 本人「同化してる」） */
.cmedia--report img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--r); }

/* 用紙 */
.field__mark { margin-left: .5em; padding: 0 .5em; font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--r); }
.field__mark--required { color: var(--seal); border-color: var(--seal); }
.field__help { display: block; margin: .4em 0 0; font-size: .84rem; line-height: 1.7; color: var(--ink-soft); }
[data-customer-scaffold] .apply__privacy .note { margin: 0 0 .5em; }
[data-customer-scaffold] .apply__privacy a { text-underline-offset: .3em; }

/* 押すところの立体感（2026-09-19 本人「Swell のボタンみたいに、ちょっと立体感ある感じに」）。
   ぼかした影ではなく、下に 3px の濃い縁を 1 本。重ねると 1px、押すと 3px 沈んで縁が消える。
   最初の画面の透けるボタンと季節のボタンには付けない（絵の上では透かしを優先・本人の指示） */
.ask__btn, .go__link, .apply__button,
.invite__link, .taiken__link, .work__try a {
  --btn-edge: rgba(31, 27, 22, .34);
  margin-bottom: 3px;
  box-shadow: 0 3px 0 var(--btn-edge);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.ask__btn, .go__link { background: var(--c-sheet); }
.ask__btn--main, .go__link--main { background: var(--accent); }
.ask__btn--main, .go__link--main, .apply__button,
.invite__link:not(.invite__link--sub), .taiken__link, .work__try a { --btn-edge: #6a3512; }
.ask__btn:hover, .ask__btn:focus-visible, .go__link:hover, .go__link:focus-visible,
.apply__button:hover, .apply__button:focus-visible,
.invite__link:hover, .invite__link:focus-visible, .taiken__link:hover, .taiken__link:focus-visible,
.work__try a:hover, .work__try a:focus-visible {
  --btn-edge: rgba(0, 0, 0, .62);
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--btn-edge);
}
.ask__btn:active, .go__link:active, .apply__button:active,
.invite__link:active, .taiken__link:active, .work__try a:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--btn-edge);
}
.taiken__link[data-todo] { box-shadow: none; transform: none; }

/* 角の丸みの統一（2026-09-19 本人）。前からの部品のうち、枠が在るのに丸みを持っていなかった物 */
.card, .footer__back, .signpost--media, .strip__stage, .strip__viewer, .strip__viewer-img { border-radius: var(--r); }
.signpost--media { overflow: hidden; }

/* 広い画面：文章の横に絵を置く節（data-beside）。絵はいつも右、文章の左端はそろえる。
   絵は HTML では見出しより前に在る（骨組みの決まり）ので、置き場所は grid で決める */
@media (min-width: 1000px) {
  [data-customer-scaffold] .section[data-beside] > .wrap {
    width: var(--c-wider);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
  [data-customer-scaffold] .section[data-beside] > .wrap > * { grid-column: 1 / -1; }
  [data-customer-scaffold] .section[data-beside] > .wrap > div:first-of-type { grid-column: 1; grid-row: 1; margin-top: 0; }
  [data-customer-scaffold] .section[data-beside] > .wrap > figure:first-of-type {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    margin: 0;
  }
  [data-customer-scaffold] .section[data-beside] > .wrap > .go-row { grid-column: 1; }
  [data-customer-scaffold] .section[data-beside] > .wrap > .toc { margin-top: clamp(2rem, 4vw, 2.8rem); }
  [data-customer-scaffold] .section[data-beside] > .wrap > .toc--long .toc__list { columns: 2; }
  /* TOUGEI は動く絵が 2 本。右の列に縦に重ね、左の列は文章とボタン */
  /* ★上の「> .wrap > *」より強く書く（弱いと 2 本目が横いっぱいに広がる。2026-09-19 に踏んだ） */
  [data-customer-scaffold] .section[data-beside][data-copy-section="WEB-04-B"] > .wrap > figure:first-of-type { grid-row: 1; }
  [data-customer-scaffold] .section[data-beside][data-copy-section="WEB-04-B"] > .wrap > figure.cmedia--sub { grid-column: 2; grid-row: 2; width: auto; margin: 1.4rem 0 0; }
  [data-customer-scaffold] .section[data-beside][data-copy-section="WEB-04-B"] > .wrap > .go-row { grid-row: 2; align-self: start; }
  [data-copy-section="ABOUT-00"] > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem) !important; align-items: center !important; }
}

/* 狭い画面 */
@media (max-width: 700px) {
  [data-customer-scaffold] { --c-gap: 2.1rem; --c-gap-sub: 1rem; }
  .ccards, .cmedia__pair, .cflow__steps, .ask__ways { grid-template-columns: minmax(0, 1fr); }
  .cflow__steps { gap: 2.2rem; }
  .cflow__step + .cflow__step::before { left: 50%; top: -1.7rem; width: 1px; height: 1.1rem; }
  .cflow__step + .cflow__step::after { left: calc(50% - .22rem); top: -.95rem; transform: rotate(135deg); }
  .cmedia--sub { width: 100%; }
  .cstrip .strip__rail { -webkit-mask-image: none; mask-image: none; }
  .cstrip .strip__track, .cstrip .strip__controls { padding-inline: 0; }
  .cstrip .strip__card { width: 78vw; }
  .go, .go__link { width: 100%; }
  .go__link { justify-content: space-between; }
  .ask__more { text-align: left; }
  /* 最初の画面：ボタンが足された分だけ帯を上げ、下の「この下に…」の 1 行と重ならないようにする */
  [data-customer-scaffold] .town__band { bottom: 8.7rem; }
}