/* ==========================================================================
   WAF 公式サイト — 共通スタイル
   仕様: site/REQUIREMENTS.md（正本）／思想: docs/PHILOSOPHY.md

   外部依存なし（フォントは CDN に頼らずシステムスタック）。
   色・寸法の変更は下の :root だけを触る。ここが唯一の宣言場所。

   設計方針: 会社案内ではなく「絵本 / 美術館のガイド / 上質な教育ブランド」。
   各ページには「読み終えたときに何を感じてほしいか」がある（各HTMLのコメント参照）。
   Puzz は説明役ではなく語り部。教えず、問いかける。
   Puzz の画像は公式 No.001 の実物写真のみ。イラストは描き起こさない。
   ========================================================================== */

:root{
  --cream:#FAF6EE;
  --cream-2:#F4EEE1;
  --paper:#fffdf8;
  --green:#21661E;
  --dgreen:#1F4D33;
  --yellow:#E3B311;
  --gold:#A98B3B;
  /* 紙の上に置く eyebrow 用の gold。--gold は cream 地の想定なので、
     ヒーローの紙（#F7EFDE）に乗せると 4.5:1 を切る。実測 4.82:1 */
  --gold-ink:#7E6420;
  /* Home の「Three ways in」の地。cream 系ではなく淡い草地の緑（2026-09-07） */
  --field:#E9F1DE;
  --field-2:#DCEAC4;
  /* 風景の上に反転で置く eyebrow 用の Yellow。--yellow は cream 地の想定なので、
     草原の上に白い文字と並べると 12px bold で 4.5:1 を割る。同じ色相の明るい側 */
  --yellow-lt:#F6DE8E;
  --ink:#131313;
  --rule:rgba(31,77,51,.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1120px;
  --hdr:64px;
  /* 面の継ぎ目の波の高さ。波を置く面の余白はこの値から計算する（下層ページの節） */
  --wave:clamp(32px,4.8vw,70px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--green); }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:760px; margin:0 auto; }
/* 地を明示して面を不透明にする。透明のままだと、波の継ぎ目の 1px を
   次の面が塗り潰せない（下の「下層ページの装飾レイヤー」の節を参照） */
section{ padding:88px 0; background:var(--cream); }
section.tight{ padding:64px 0; }
section.alt{ background:var(--cream-2); }

h1,h2,h3{ font-family:var(--serif); color:var(--green); font-weight:600; margin:0; }
h2{ font-size:clamp(28px,4.4vw,42px); line-height:1.12; letter-spacing:-.01em; }
h3{ font-size:clamp(19px,2.4vw,24px); line-height:1.2; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 12px;
}
.hl{
  background:linear-gradient(to top, rgba(227,179,17,.55) 0, rgba(227,179,17,.55) .22em, transparent .22em);
  padding:0 .06em;
}
.lead{ font-family:var(--serif); font-size:clamp(20px,2.5vw,26px); line-height:1.36; color:var(--dgreen); }
.sub{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.1vw,21px); color:var(--dgreen); margin:6px 0 0; }
.muted{ font-size:14px; color:#5c6b5f; }
.serif{ font-family:var(--serif); }
strong{ color:var(--dgreen); }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60; height:var(--hdr);
  background:rgba(250,246,238,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
header .bar{
  max-width:var(--wrap); margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; gap:20px;
}
header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
header .brand img{ width:34px; height:34px; }
header .brand b{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dgreen); font-weight:800;
}
/* ヘッダーの nav だけを対象にする。bare な nav に書くと footer の nav.sitemap まで
   巻き込み、モバイルで position:fixed が漏れて画面上部に貼り付く。 */
header nav{ display:flex; gap:22px; }
header nav a{
  font-size:14px; text-decoration:none; color:var(--dgreen); font-weight:600;
  padding:4px 0; border-bottom:2px solid transparent;
}
header nav a:hover{ border-bottom-color:var(--yellow); }
/* 複数ページなので、いま自分がどこにいるか分かるようにする */
header nav a[aria-current="page"]{ color:var(--green); border-bottom-color:var(--yellow); }
/* nav の中の CTA は狭い画面だけ。広い画面ではヘッダー右のボタンが担う */
header nav a.cta{ display:none; }

/* モバイルのメニュー。ページが分かれた以上、狭い画面でも移動できる必要がある */
.menu{
  display:none; width:42px; height:42px; flex:none; margin-left:auto;
  background:transparent; border:1.5px solid var(--rule); border-radius:11px;
  color:var(--dgreen); font-size:18px; line-height:1; cursor:pointer;
}
.menu[aria-expanded="true"]{ background:rgba(33,102,30,.08); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green); color:#fff; text-decoration:none;
  font-size:15px; font-weight:700; letter-spacing:.02em;
  padding:12px 22px; border-radius:999px; border:0; cursor:pointer;
  transition:transform .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--dgreen); transform:translateY(-1px); }
.btn.sm{ padding:9px 18px; font-size:14px; }
.btn.ghost{ background:transparent; color:var(--green); border:1.5px solid var(--green); }
.btn.ghost:hover{ background:rgba(33,102,30,.07); color:var(--green); }
.btn.warm{ background:var(--yellow); color:#2a2000; }
.btn.warm:hover{ background:#f2c526; }

/* ---------- Puzz の吹き出し ---------- */
.puzz{ display:flex; align-items:center; gap:14px; }
.puzz > img{ width:66px; height:66px; flex:none; }
.puzz .bubble{
  position:relative; margin:0;
  background:var(--paper); border:1px solid rgba(31,77,51,.2);
  border-radius:20px 20px 20px 5px; padding:12px 20px;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16px,1.9vw,19px); line-height:1.4; color:var(--dgreen);
}
.puzz .bubble::after{
  content:""; position:absolute; left:-7px; bottom:16px;
  width:12px; height:12px; background:var(--paper);
  border-left:1px solid rgba(31,77,51,.2); border-bottom:1px solid rgba(31,77,51,.2);
  transform:rotate(45deg);
}
.puzz.rev{ flex-direction:row-reverse; }
.puzz.rev .bubble{ border-radius:20px 20px 5px 20px; }
.puzz.rev .bubble::after{
  left:auto; right:-7px; border-left:0; border-bottom:0;
  border-right:1px solid rgba(31,77,51,.2); border-top:1px solid rgba(31,77,51,.2);
}
.puzz.center{ justify-content:center; }
.puzz.dark .bubble{
  background:rgba(250,246,238,.1); border-color:rgba(250,246,238,.3); color:#fff;
}
.puzz.dark .bubble::after{
  background:rgba(250,246,238,.1);
  border-left-color:rgba(250,246,238,.3); border-bottom-color:rgba(250,246,238,.3);
}

/* ---------- hero（Home のみ） ---------- */
.hero{ position:relative; }
/* ⚠️ **ヒーローの高さを固定しない。**
   高さは紙（`.plate`）の中身で決まる ―― h1 の折り返し行数、端末の文字サイズ設定、
   eyebrow が1行か2行か、日本語版では英文の下に添えた日本語の行。
   固定すると CSS 側で紙の高さを見積もることになり、どこかで必ず上下が見切れる。
   実測（2026-09-11）では **1000×700 / 1280×720 / 1440×700 など、ありふれた窓の
   大きさで英語版も 9〜77px 切れていた**（日本語版は添え書きのぶん 21〜147px）。
   だから写真を絶対配置の地にして、**高さはコピーに決めさせる**。
   `clamp(340px,58vh,580px)` は**下限**として残すので、コピーが短いときの
   見え方（＝これまで切れていなかった大きな窓）は変わらない。
   これは SP で同じ事故を踏んだときの直し方（`@media (max-width:820px)` の
   「ヒーロー」の節）を、広い画面にも広げたもの。考え方は1つに揃えてある。 */
.hero-img{ position:absolute; inset:0; height:auto; overflow:hidden; }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(19,32,22,.88) 0%, rgba(19,32,22,.58) 48%, rgba(19,32,22,.16) 100%);
}
.hero-copy{
  position:relative; z-index:2; display:flex; align-items:center;
  min-height:clamp(340px,58vh,580px);
  /* 紙の `::before` が上に 16px・下に 22px 張り出すぶんと、下端の波を避ける */
  padding:40px 0 calc(var(--wave) + 26px);
}
.hero-copy .wrap{ width:100%; }
.hero h1{
  color:#fff; font-size:clamp(32px,5.2vw,56px); line-height:1.1;
  letter-spacing:-.015em; max-width:20ch; margin:0 0 18px;
}
.hero p.t{
  color:rgba(255,255,255,.9); font-family:var(--serif);
  font-size:clamp(17px,2.1vw,21px); line-height:1.45; max-width:44ch; margin:0 0 26px;
}
.hero .brandline{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--yellow); font-weight:700; margin:0 0 14px;
}
.hero .puzz{ position:absolute; right:24px; bottom:24px; z-index:3; }
.hero .puzz .bubble{ background:rgba(255,253,248,.94); font-size:16px; padding:10px 16px; }

.facts{ background:var(--dgreen); color:var(--cream); }
.facts ul{
  max-width:var(--wrap); margin:0 auto; padding:18px 24px; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 40px; justify-content:space-between;
}
.facts li{ font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }

/* ---------- 下層ページの見出し ---------- */
.pagehead{ background:var(--cream-2); border-bottom:1px solid var(--rule); padding:58px 0 52px; }
.pagehead h1{ font-size:clamp(30px,4.8vw,46px); line-height:1.12; letter-spacing:-.01em; }
.pagehead .sub{ margin-top:12px; max-width:44ch; }
.pagehead .lead{ margin-top:22px; max-width:40ch; }

/* ---------- layout helpers ---------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.two.lopsided{ grid-template-columns:1.15fr .85fr; }
.two.tightgap{ gap:26px; }
/* 進行のタイムライン＋右レール。狭い画面では下の @820px で1列に戻す */
.two.railed{ grid-template-columns:1.32fr .68fr; }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:28px; }
.card.tint{ background:rgba(33,102,30,.05); border-color:rgba(33,102,30,.15); }
.card.warm{ background:rgba(227,179,17,.11); border-color:rgba(227,179,17,.4); }
figure{ margin:0; }
figure.framed img{ border-radius:12px; width:100%; object-fit:cover; }
figure.framed figcaption{ margin-top:10px; font-size:14px; color:#5c6b5f; }
.r32 img{ aspect-ratio:3/2; }
.r1610 img{ aspect-ratio:16/10; }

ul.dots{ list-style:none; margin:0; padding:0; }
ul.dots li{ position:relative; padding-left:22px; margin-bottom:9px; }
ul.dots li::before{
  content:""; position:absolute; left:2px; top:.66em;
  width:8px; height:8px; border-radius:50%; background:var(--yellow);
}
ul.check{ list-style:none; margin:0; padding:0; }
ul.check li{ position:relative; padding-left:26px; margin-bottom:9px; }
ul.check li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--green); font-weight:800; }
ul.nos{ list-style:none; margin:0; padding:0; }
ul.nos li{
  position:relative; padding-left:30px; margin-bottom:12px;
  font-family:var(--serif); font-size:clamp(18px,2.2vw,22px); line-height:1.32; color:var(--green);
}
ul.nos li::before{
  content:""; position:absolute; left:0; top:.58em; width:18px; height:2px;
  background:var(--yellow);
}
.beliefs{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }

/* 三つの問い — サイト全体を貫く背骨 */
ol.qs{ counter-reset:q; list-style:none; margin:0; padding:0; }
ol.qs li{
  counter-increment:q; position:relative; padding-left:38px; margin-bottom:16px;
  font-family:var(--serif); font-size:clamp(19px,2.2vw,23px); line-height:1.32; color:var(--green);
}
ol.qs li::before{
  content:counter(q); position:absolute; left:0; top:2px;
  font-family:var(--serif); font-size:17px; font-weight:700; color:var(--yellow);
}
ol.qs.big li{ font-size:clamp(21px,2.9vw,29px); margin-bottom:22px; }
ol.qs li .where{
  display:block; margin-top:5px; font-family:var(--sans); font-size:13px;
  letter-spacing:.06em; color:var(--gold); font-weight:600; font-style:normal;
}

.band{ position:relative; height:clamp(260px,44vh,440px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }
.band .cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:64px 0 34px;
  background:linear-gradient(to top, rgba(19,19,19,.78), rgba(19,19,19,0)); color:#fff;
}
.band .cap q{ font-family:var(--serif); font-size:clamp(22px,3.4vw,34px); line-height:1.16; }
.band .cap .m{
  display:block; margin-top:10px; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--yellow); font-weight:700;
}

.pull{ border-left:5px solid var(--yellow); padding:4px 0 4px 24px; margin:30px 0; }
.pull .q{
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.4vw,34px);
  line-height:1.2; color:var(--green); margin:0 0 10px;
}

/* 署名的な一行。ブランドの最重要の言葉なので、他のどの文字より静かに大きく置く */
.signature{ text-align:center; padding:78px 0; background:var(--cream-2); }
.signature p{
  font-family:var(--serif); font-size:clamp(23px,3.8vw,38px); line-height:1.26;
  color:var(--green); max-width:26ch; margin:0 auto;
}
.signature .jp{
  font-family:var(--sans); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
  max-width:none; margin:0 auto 22px;   /* .signature p の max-width/auto を打ち消さない */
}

/* ワークショップ名を強く見せる帯（Home / What is WAF）。
   名前を先に大きく、直下の確定表現に説明させる。
   ⚠️ ブランドの一行（.signature・最大38px）より大きくしない。序列は
      「Value never truly disappears.」＞ 中心の問い ＞ ワークショップ名 のまま。
      前面に出す手段はサイズではなく濃緑の反転（クリーム地のページで一番強いコントラスト）。 */
.named{ background:var(--dgreen); color:var(--cream); padding:76px 0; text-align:center; }
.named .eyebrow{ color:var(--yellow); }
.named .name{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,4.2vw,40px); line-height:1.14; letter-spacing:-.01em;
  color:#fff; max-width:20ch; margin:0 auto;
}
.named .why{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,2.1vw,21px); line-height:1.4;
  color:var(--yellow); max-width:34ch; margin:22px auto 0;
}
.named .go{
  display:inline-block; margin-top:28px; padding-bottom:3px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--cream); text-decoration:none;
  border-bottom:1px solid rgba(250,246,238,.42);
}
.named .go:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }

/* ワークショップ名のページはページ見出しを一段大きく取る */
.pagehead.named-page h1{ font-size:clamp(34px,5.8vw,56px); }

/* フッターのワークショップ名（全6ページに出る＝反復がいちばん効く） */
footer .wsname{
  margin:4px 0 6px; font-family:var(--serif); font-size:16px;
  line-height:1.3; color:var(--green);
}

/* Home の3つの入口 */
.entries{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.entry{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.entry:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(19,32,22,.10); }
.entry img{ width:100%; aspect-ratio:5/3; object-fit:cover; }
.entry .body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.entry h3{ font-size:21px; }
.entry .say{
  font-family:var(--serif); font-style:italic; font-size:16.5px;
  color:var(--dgreen); margin:9px 0 0; line-height:1.42;
}
.entry .go{
  margin:16px 0 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); font-weight:700;
}

/* 旧→新 の転換図（about） */
.shift{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; }
.shift .box{
  border:1px solid var(--rule); border-radius:14px; padding:22px 24px; background:var(--paper);
}
.shift .box.old{ opacity:.72; }
.shift .box.new{ background:rgba(33,102,30,.06); border-color:rgba(33,102,30,.24); }
.shift .box .t{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--gold); margin:0 0 10px;
}
.shift .box p.v{ font-family:var(--serif); font-size:clamp(17px,2vw,20px); line-height:1.4; margin:0; color:var(--dgreen); }
.shift .arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--yellow); font-weight:700;
}

/* 学び方の順序（about）。一般教育と逆であることを示す */
.path{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:0; padding:0; list-style:none; }
.path li{
  flex:1 1 170px; background:var(--paper); border:1px solid var(--rule);
  border-radius:12px; padding:16px 18px;
}
.path li .n{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}
.path li .w{ font-family:var(--serif); font-size:20px; color:var(--green); display:block; margin:4px 0 4px; }
.path li .d{ font-size:14px; color:#5c6b5f; line-height:1.45; }
.versus{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:26px;
  border:1px solid var(--rule); border-radius:14px; overflow:hidden;
}
.versus > div{ padding:20px 24px; }
.versus > div + div{ border-left:1px solid var(--rule); background:rgba(33,102,30,.05); }
.versus .t{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold); margin:0 0 8px; }
.versus .f{ font-family:var(--serif); font-size:clamp(16px,1.9vw,19px); color:var(--dgreen); margin:0; line-height:1.4; }

/* Meet Puzz（絵本のページ） */
.puzzsec{ background:var(--cream-2); text-align:center; }
.puzzsec .portrait{ width:clamp(180px,26vw,260px); height:clamp(180px,26vw,260px); margin:26px auto 22px; }
.puzzsec .hi{ font-family:var(--serif); font-size:clamp(26px,3.6vw,36px); color:var(--green); margin:0 0 22px; }
.puzzsec .story{
  max-width:560px; margin:0 auto; font-family:var(--serif);
  font-size:clamp(17px,2.1vw,20px); line-height:1.75; color:var(--ink);
}
.puzzsec .story p{ margin:0 0 18px; }
.bigbubble{
  position:relative; display:inline-block; margin:34px 0 26px;
  background:var(--paper); border:1px solid rgba(31,77,51,.22);
  border-radius:44px; padding:24px clamp(28px,5vw,58px);
  font-family:var(--serif); font-size:clamp(22px,3.4vw,34px); color:var(--green); line-height:1.25;
}
.bigbubble::after{
  content:""; position:absolute; left:50%; bottom:-9px; margin-left:-9px;
  width:18px; height:18px; background:var(--paper);
  border-right:1px solid rgba(31,77,51,.22); border-bottom:1px solid rgba(31,77,51,.22);
  transform:rotate(45deg);
}
.family{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:34px; flex-wrap:wrap; }
.family img{ width:150px; height:150px; }
.family p{
  margin:0; text-align:left; max-width:280px;
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--dgreen);
}
/* Puzz を迎える面（puzz の最後・#get-puzz・2026-10-24）。写真と文字の2列。
   狭い画面では `.two` が1列に戻り、見出し → 写真 → 本文 → 価格の順に積まれる。
   ⚠️ ボタンは Stripe の Payment Link へのただのリンク。外部スクリプトは読まない（REQUIREMENTS §2.4）。
   ⚠️ ヘッダーが sticky なので、#get-puzz で飛んできたとき見出しが下に隠れないよう余白を取る */
.getpuzz{ scroll-margin-top:var(--hdr); }
.getpuzz .two{ margin-top:34px; align-items:center; }
.getpuzz .ask{
  font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.5vw,25px);
  line-height:1.3; color:var(--green); margin:24px 0 0;
  text-wrap:balance;   /* 日本語版で「でしょ／う？」と最後の2字だけが次の行に落ちるため */
}
.getpuzz .offer{ margin-top:22px; padding:22px 24px; }
.getpuzz .price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 16px; }
.getpuzz .price b{ font-family:var(--serif); font-size:34px; line-height:1; font-weight:600; color:var(--green); }
.getpuzz .price span{ font-size:14px; color:#5c6b5f; }
.getpuzz .offer .muted{ margin:16px 0 0; line-height:1.55; }

/* 誕生譚の二段構造（puzz）。made ではなく born であることを形で示す */
.born{ counter-reset:b; }
.born .step{ position:relative; padding-left:66px; margin-bottom:38px; }
.born .step:last-child{ margin-bottom:0; }
.born .step::before{
  counter-increment:b; content:counter(b);
  position:absolute; left:0; top:-4px; width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1.5px solid rgba(33,102,30,.28); color:var(--green);
  font-family:var(--serif); font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.born .step h3{ font-size:21px; margin-bottom:10px; }
.born .step .why{
  font-family:var(--serif); font-size:clamp(18px,2.2vw,22px); line-height:1.45;
  color:var(--green); border-left:4px solid var(--yellow); padding-left:18px; margin:16px 0 0;
}

/* Puzz の定義表（語り部であって、マスコットではない） */
table.isnot{ width:100%; border-collapse:collapse; margin-top:18px; }
table.isnot th{
  text-align:left; font-family:var(--sans); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); font-weight:700;
  padding:0 0 10px; border-bottom:1px solid var(--rule);
}
table.isnot td{ padding:12px 0; border-bottom:1px solid var(--rule); font-size:16px; vertical-align:top; }
table.isnot td:first-child{ padding-right:20px; color:var(--dgreen); font-weight:600; }
table.isnot td:last-child{ color:#7a7a7a; }
table.isnot tr:last-child td{ border-bottom:0; }

/* The books, in the making */
.books{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.book-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:24px; display:flex; flex-direction:column;
}
.book-card .vol{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 10px;
}
.book-card h3{ font-size:20px; line-height:1.24; }
.book-card .asks{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--serif); font-style:italic; font-size:17px; color:var(--dgreen);
}
.method{ counter-reset:m; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.method li{
  counter-increment:m; position:relative; padding-left:44px;
  font-size:16.5px; line-height:1.5;
}
.method li::before{
  content:counter(m); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%; background:rgba(227,179,17,.24);
  color:#7d5200; font-family:var(--serif); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.method li strong{ color:var(--green); }

/* ---------- workshops ---------- */
.ws-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
/* 1 と 2 を見た瞬間に区別できるように、番号・地色・「何が何になるか」の3点で差をつける */
.ws{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ws.one{ background:rgba(33,102,30,.05); border-color:rgba(33,102,30,.22); }
.ws.two{ background:rgba(227,179,17,.10); border-color:rgba(227,179,17,.45); }
.ws-head{ display:flex; gap:16px; align-items:flex-start; }
.ws-no{
  flex:none; width:46px; height:46px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:23px; font-weight:700; line-height:1;
}
.ws.one .ws-no{ background:var(--green); }
.ws.two .ws-no{ background:var(--gold); }
.ws-flow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:18px 0; padding:13px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.ws.one .ws-flow{ color:var(--dgreen); }
.ws.two .ws-flow{ color:#7d5200; }
.ws-flow .arw{ color:var(--yellow); font-size:15px; }
.ws.one .q{ color:var(--green); }
.ws.two .q{ color:#8a5a00; }
.ws .pics{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.ws .pics img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ws .body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
/* ANWS のティア名（Creative 1 / Creative 2）。総称は見出し側が持つ。 */
.ws-tier{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  margin:2px 0 7px; line-height:1;
}
.ws.one .ws-tier{ color:var(--green); }
.ws.two .ws-tier{ color:#8a5a00; }
.ws .q{
  font-family:var(--serif); font-style:italic; font-size:20px;
  color:var(--gold); margin:0 0 6px; line-height:1.3;
}
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 16px; }
.chip{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--dgreen); background:rgba(31,77,51,.09); border-radius:999px; padding:5px 12px;
}
.chip.warn{ color:#7d5200; background:rgba(227,179,17,.26); }
.learn{ list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--rule); }
.learn li{ display:flex; gap:10px; font-size:15.5px; margin-bottom:7px; line-height:1.45; }
.learn li:last-child{ margin-bottom:0; }
.learn .ic{ flex:none; }

/* Discovery Workshop は signature program。他の2つと同じ見た目にしない */
.discovery{ background:var(--dgreen); color:var(--cream); }
.discovery h2, .discovery h3{ color:#fff; }
.discovery .eyebrow{ color:var(--yellow); }
.discovery .sub{ color:rgba(250,246,238,.86); }
.discovery strong{ color:var(--yellow); }
.discovery .panel{
  background:rgba(255,255,255,.07); border:1px solid rgba(250,246,238,.22);
  border-radius:14px; padding:26px;
}
.discovery .lead{ color:#fff; }
.stc{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 4px; }
.stc span{
  font-family:var(--serif); font-size:clamp(24px,4vw,40px); color:var(--yellow); line-height:1.1;
}
.flow{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.flow li{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--cream); background:rgba(250,246,238,.12); border-radius:999px; padding:7px 14px;
}
.flow li.sep{ background:none; padding:0 2px; color:var(--yellow); font-size:15px; }

/* ---------- セッションの進行（ANWS の5ステップ） ----------
   進行は ANWS のどの回でも同じ形。materials が変わるだけ。
   時刻 / 番号＋縦線 / 本文 の3列。縦線は ::before で引き、最後の li だけ切る。 */
.session{ list-style:none; margin:0; padding:0; }
.session li{
  display:grid; grid-template-columns:52px 34px 1fr; gap:0 16px;
  align-items:start; padding-bottom:26px;
}
.session li:last-child{ padding-bottom:0; }
.session .t{
  grid-column:1; grid-row:1;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--gold); padding-top:4px; text-align:right; line-height:1.5;
}
.session .n{
  grid-column:2; grid-row:1;
  width:34px; height:34px; border-radius:50%;
  background:var(--green); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--serif); font-size:17px; font-weight:700;
  line-height:1; position:relative; z-index:1;
}
.session li > div{ grid-column:3; grid-row:1; }
.session li:not(:last-child) .n::after{
  content:""; position:absolute; top:34px; left:50%; transform:translateX(-50%);
  width:2px; height:calc(100% + 26px); background:var(--rule);
}
.session h3{ font-size:19px; margin:5px 0 0; }
.session p{ margin:7px 0 0; font-size:15px; }
.session .ask{
  font-family:var(--serif); font-style:italic; font-size:16.5px;
  color:var(--gold); margin:8px 0 0;
}

/* ---------- gallery / stories（スクラップブック） ---------- */
.scrap{ columns:3; column-gap:26px; }
.scrap > *{ break-inside:avoid; margin:0 0 26px; }
.scrap figure{
  padding:10px; background:#fff; border:1px solid rgba(19,19,19,.07);
  box-shadow:0 3px 9px rgba(19,19,19,.13);
  transform:rotate(var(--r,0deg)); position:relative;
}
.scrap figure button{
  display:block; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; width:100%;
}
.scrap figure img{ width:100%; height:auto; }
.scrap figure.tape::before{
  content:""; position:absolute; left:50%; top:-12px;
  transform:translateX(-50%) rotate(-2.5deg);
  width:74px; height:24px; background:rgba(227,179,17,.36);
  border-left:1px solid rgba(0,0,0,.06); border-right:1px solid rgba(0,0,0,.06);
}
.scrap figcaption{
  font-family:var(--serif); font-style:italic; font-size:15px;
  color:var(--dgreen); text-align:center; padding:10px 4px 2px;
}
.scrap .note{
  font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.4;
  color:var(--gold); transform:rotate(var(--r,0deg)); padding:4px 8px;
}

#lb{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(14,20,15,.94); align-items:center; justify-content:center; padding:24px;
}
#lb[open]{ display:flex; }
#lb img{ max-width:min(1100px,94vw); max-height:82vh; border-radius:8px; }
#lb figcaption{
  color:rgba(255,255,255,.85); font-size:14px; text-align:center; margin-top:14px; max-width:60ch;
}
#lb .x, #lb .nav{
  position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0;
  width:46px; height:46px; border-radius:50%; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#lb .x{ top:18px; right:18px; }
#lb .prev{ left:18px; top:50%; transform:translateY(-50%); }
#lb .next{ right:18px; top:50%; transform:translateY(-50%); }
#lb .x:hover, #lb .nav:hover{ background:rgba(255,255,255,.28); }

/* 実際に起きたことの記録（stories）。時系列があることを線で示す */
.record{ position:relative; padding-left:30px; }
.record::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(to bottom, var(--yellow), rgba(227,179,17,.15));
}
.record > article{ position:relative; margin-bottom:56px; }
.record > article:last-child{ margin-bottom:0; }
.record > article::before{
  content:""; position:absolute; left:-30px; top:9px; width:12px; height:12px;
  border-radius:50%; background:var(--yellow); border:2px solid var(--cream);
}
.record .when{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 6px;
}
.record .closer{
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.5vw,25px);
  line-height:1.3; color:var(--green); margin:18px 0 0;
}

/* ---------- invitation / contact ---------- */
.invite{ background:var(--cream-2); }
dl.info{ margin:0; }
dl.info > div{ display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule); }
dl.info > div:last-child{ border-bottom:0; }
dl.info dt{
  width:104px; flex:none; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); font-weight:700; padding-top:4px;
}
dl.info dd{ margin:0; font-size:15.5px; line-height:1.5; }
/* 特定商取引法に基づく表記（legal.html・2026-10-25）。dl.info を、見出しの長い表に広げる。
   見出しは紙の上ではないが小さい字なので、--gold ではなく --gold-ink（AA 付近を避ける） */
.legal dl.info > div{ padding:14px 0; }
.legal dl.info dt{ width:172px; color:var(--gold-ink); }
.legal dl.info dd{ font-size:16px; line-height:1.65; }
.legal dl.info dd p{ margin:0; }
.legal dl.info dd p + p{ margin-top:8px; }
table.price{ width:100%; border-collapse:collapse; }
table.price td{ padding:12px 0; border-bottom:1px solid var(--rule); font-size:16px; }
table.price tr:last-child td{ border-bottom:0; }
table.price .amt{
  text-align:right; font-family:var(--serif); font-size:22px; color:var(--green); font-weight:600;
}
.avail{ display:flex; flex-wrap:wrap; gap:8px; }
.avail .chip{ font-size:12.5px; padding:7px 15px; }

.book{ background:var(--dgreen); color:var(--cream); }
.book h2, .book h3{ color:#fff; }
.book .eyebrow{ color:var(--yellow); }
.book .sub{ color:rgba(250,246,238,.86); }
.book .panel{
  background:rgba(255,255,255,.07); border:1px solid rgba(250,246,238,.22);
  border-radius:14px; padding:26px;
}
.book a.line{
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  background:rgba(250,246,238,.1); border:1px solid rgba(250,246,238,.2);
  border-radius:12px; color:#fff; text-decoration:none; margin-bottom:12px;
  transition:background .15s ease;
}
.book a.line:hover{ background:rgba(250,246,238,.2); }
.book a.line .t{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); font-weight:700; }
/* ⚠️ メールアドレスは折り返し位置を持たない1語。320px では**この1語の min-content が
   グリッドのトラック（`.two.lopsided` は狭い画面で `1fr` = `minmax(auto,1fr)`）を
   押し広げ**、workshops と contact に 10px の横スクロールが出ていた（§8-8 違反）。
   ⚠️ `overflow-wrap:break-word` では min-content が縮まないので効かない。`anywhere` を使う。
   折り返す位置は `@` のあとが読みやすいので、HTML 側に `<wbr>` を1つ置いてある
   （見えない改行機会。文字は増えないのでコピーしたアドレスは変わらない）。 */
.book a.line .v{ font-size:16.5px; overflow-wrap:anywhere; }
.book .qrs{ display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; }
.book .qr{ width:112px; text-align:center; }
.book .qr img{ width:112px; height:112px; border-radius:8px; background:var(--cream); }
.book .qr span{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--yellow); font-weight:700; margin-top:8px;
}
#formSlot iframe{ width:100%; min-height:1150px; border:0; border-radius:12px; background:#fff; }
ol.steps{ margin:16px 0 0; padding-left:22px; font-size:15.5px; line-height:1.6; }
ol.steps li strong{ color:var(--green); }
.book ol.steps li strong, .discovery ol.steps li strong{ color:var(--yellow); }
ol.steps li{ margin-bottom:14px; }
ol.steps li::marker{ color:var(--yellow); font-weight:700; }

/* ---------- closing ---------- */
.closing{ background:var(--dgreen); color:var(--cream); text-align:center; padding:96px 0 104px; border-top:1px solid rgba(250,246,238,.14); }
.closing img.puzz-big{ width:132px; height:132px; margin:0 auto 30px; }
.closing .q-small{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--yellow); font-weight:700; margin:0 0 18px;
}
.closing .q-big{
  font-family:var(--serif); font-size:clamp(30px,5.4vw,52px); line-height:1.16; color:#fff; margin:0 0 24px;
}
.closing .after{
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,2.1vw,20px);
  color:rgba(250,246,238,.84); max-width:34ch; margin:0 auto;
}

/* ---------- download / footer ---------- */
.dl{ background:var(--cream-2); }
.dl .row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between; }
footer{ background:var(--cream); border-top:1px solid var(--rule); padding:44px 0 56px; }
footer .row{ display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
footer .tags{ color:var(--gold); font-weight:700; letter-spacing:.06em; font-size:14px; }
footer img.mark{ width:44px; height:44px; }
footer nav.sitemap{ display:flex; flex-direction:column; gap:6px; }
footer nav.sitemap a{ font-size:14.5px; text-decoration:none; color:var(--dgreen); }
footer nav.sitemap a:hover{ text-decoration:underline; }

.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,246,238,.96); border-top:1px solid var(--rule); backdrop-filter:blur(10px);
}
.cta-bar .btn{ width:100%; padding:15px; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .scrap{ columns:2; }
  .ws-grid{ grid-template-columns:1fr; }
  .entries, .books, .three{ grid-template-columns:1fr 1fr; }
  header .btn{ display:none; }
  .menu{ display:flex; align-items:center; justify-content:center; }
  /* ページが分かれているので、狭い画面ではメニューを開いて移動する */
  header nav{
    position:fixed; left:0; right:0; top:var(--hdr); z-index:59;
    flex-direction:column; gap:0; padding:8px 16px 16px;
    background:rgba(250,246,238,.985); border-bottom:1px solid var(--rule);
    box-shadow:0 12px 26px rgba(19,32,22,.12);
    display:none;
  }
  header nav[data-open]{ display:flex; }
  header nav a{ padding:14px 6px; border-bottom:1px solid var(--rule); font-size:16px; }
  header nav a:last-child{ border-bottom:0; }
  header nav a[aria-current="page"]{ border-bottom-color:var(--rule); color:var(--green); }
  header nav a.cta{ display:block; margin-top:12px; border:0; color:#fff; background:var(--green); border-radius:999px; text-align:center; font-weight:700; }
}
@media (max-width:820px){
  section{ padding:62px 0; }
  .two, .two.lopsided, .two.railed{ grid-template-columns:1fr; gap:32px; }
  /* 1列になったら右レールを追従させない（画面下に貼りついて見える） */
  .two.railed > div[style*="sticky"]{ position:static !important; }
  .beliefs, .versus{ grid-template-columns:1fr; }
  .versus > div + div{ border-left:0; border-top:1px solid var(--rule); }
  .shift{ grid-template-columns:1fr; }
  .shift .arrow{ transform:rotate(90deg); }
  .facts ul{ gap:8px 26px; justify-content:flex-start; }
  .facts li{ font-size:11.5px; }
  .cta-bar{ display:block; }
  .hero .puzz{ display:none; }
  /* 狭い画面では横グラデーションだと見出しが写真の明るい側に乗る。下から敷く。 */
  .hero-img::after{
    background:linear-gradient(to top, rgba(19,32,22,.92) 0%, rgba(19,32,22,.66) 58%, rgba(19,32,22,.34) 100%);
  }
  body.has-cta footer{ padding-bottom:120px; }
  .puzz > img{ width:56px; height:56px; }
  .pagehead{ padding:44px 0 40px; }
}
@media (max-width:700px){
  .session li{ grid-template-columns:34px 1fr; }
  .session .t{ grid-column:2; grid-row:1; text-align:left; padding-top:6px; }
  .session .n{ grid-column:1; grid-row:1 / span 2; }
  .session li > div{ grid-column:2; grid-row:2; }
  .session li:not(:last-child) .n::after{ height:calc(100% + 26px); }
}
@media (max-width:640px){
  .entries, .books, .three{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  /* ⚠️ `.btn` の `white-space:nowrap` は、ラベルが長いボタン
     （`Download the A4 catalog (PDF)` = 283px）だと 300px 幅で面から出る。
     端末の文字サイズを大きくしたときも同じことが起きるので、狭い画面では折り返しを許す。
     360px 以上では一番長いラベルでも収まるので、見た目は変わらない。 */
  .btn{ white-space:normal; text-align:center; }
  .scrap{ columns:1; }
  .card{ padding:22px; }
  .ws .body{ padding:22px; }
  dl.info > div{ flex-direction:column; gap:2px; }
  dl.info dt{ width:auto; }
  .born .step{ padding-left:0; }
  .born .step::before{ position:static; margin-bottom:12px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ==========================================================================
   Home の装飾レイヤー（2026-09-07 新設）

   Home だけを水彩の自然に寄せる。**ここで増やしたのは装飾だけで、文言・写真の
   被写体・構成の順序は一切変えていない**（`site/REQUIREMENTS.md` §3.1 のまま）。

   規則:
   - 装飾はすべて `.decor`（空の span・背景画像）か inline SVG の `.sep`。
     読み上げに意味を持たないので HTML 側で必ず `aria-hidden="true"` を付ける
   - 装飾を入れる面には `.decorated` を足す（`position:relative` + `overflow:hidden`）。
     bare な `section` に overflow を書くと workshops の sticky レールが死ぬので、
     **クラスを付けた面だけ**に効かせる
   - 素材は `site/assets/decor/`。SVG は `build/make_decor.py` の出力、
     `mountains.jpg` `grass.jpg` はラスター（由来は decor/README.md）
   - 狭い画面では装飾を消す（下の @media）。装飾が本文を邪魔したら装飾が負ける
   ========================================================================== */

.decorated{ position:relative; overflow:hidden; }
/* 重ね順は 装飾(1) < 波(3) < 本文(5)。波は不透明なので、万一本文に掛かっても
   本文が勝つようにしておく（読めなくなるほうが装飾より悪い） */
.decorated > .wrap{ position:relative; z-index:5; }

.decor{
  position:absolute; z-index:1; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* ---------- セクションの継ぎ目の波 ----------
   前の面の色で次の面の上端を隠す（.up）か、次の面の色で前の面の下端を隠す（.down）。
   塗りをページの色変数で受けたいので CSS の background では書けず、
   HTML に inline SVG で置いている（1本 200 字程度）。 */
.sep{
  position:absolute; left:0; width:100%; display:block; z-index:3;
  height:var(--wave);
}
/* 1px はみ出させる。面の高さが端数だと SVG の縁が地と混ざって線に見える */
.sep.up{ top:-1px; }
.sep.down{ bottom:-1px; }
.sep.cream  > path{ fill:var(--cream); }
.sep.cream2 > path{ fill:var(--cream-2); }
.sep.field  > path{ fill:var(--field); }
/* 下層ページにしかない面の色（about の名前の帯・workshops の Discovery と予約・contact の連絡先） */
.sep.dgreen > path{ fill:var(--dgreen); }

/* ---------- ヒーロー ----------
   コピーを「ちぎった紙」に乗せる。写真が濃緑のカッターマットなので、
   白文字＋暗幕よりも、紙の上の濃緑のほうが強く読める。
   暗幕は写真の端と Puzz バッジのために薄く残す。
   ⚠️ h1 の一行は3媒体の固定点。**文字は変えていない**。地と色だけ変えた。 */
.hero.decorated .hero-img::after{
  background:linear-gradient(to right,
    rgba(19,32,22,.56) 0%, rgba(19,32,22,.26) 52%, rgba(19,32,22,.04) 100%);
}
/* ちぎった紙。ヒーローと下層ページのページ見出しで共有する（2026-09-08）。
   ⚠️ `::before` の `z-index:-1` は、親（`.hero-copy` / `.decorated > .wrap`）が
      z-index を持っていて初めて「紙だけが content の下・面の地の上」に入る。 */
.plate{ position:relative; }
.plate::before{
  content:""; position:absolute; z-index:-1;
  background:url(decor/paper.svg) 0 0/100% 100% no-repeat;
}
.hero .plate{ max-width:600px; padding:36px 42px 40px; }
.hero .plate::before{
  inset:-16px -26px -22px -28px;
  transform:rotate(-.7deg);
  filter:drop-shadow(0 12px 26px rgba(12,24,14,.34));
}
.hero .plate h1{ color:var(--green); }
.hero .plate p.t{ color:#3a463c; }
.hero .plate .brandline{ color:var(--gold-ink); }
/* 下端の波が Puzz バッジに掛かるので、その分だけ上げる */
.hero.decorated .hero-copy{ z-index:5; }
.hero.decorated .puzz{ bottom:58px; z-index:6; }

.hero .d-leaf-l{
  left:-34px; top:-18px; width:min(300px,25vw); height:258px;
  background-image:url(decor/leaves-tl.svg); background-position:left top; opacity:.92;
}
.hero .d-leaf-r{
  right:-26px; top:-22px; width:min(330px,27vw); height:270px;
  background-image:url(decor/leaves-tr.svg); background-position:right top; opacity:.94;
}
.hero .d-doodle{
  left:min(56vw,796px); bottom:104px; width:146px; height:72px;
  background-image:url(decor/doodle.svg); opacity:.9;
}

/* ---------- 「何ではないか」の面 ----------
   本文は `.wrap.narrow` のまま中央に置き、写真は右端から流し込む。
   写真は既存の実物（手だけが写ったもの）。被写体は増やしていない。 */
.s-not .d-photo{
  right:-90px; top:50%; transform:translateY(-50%);
  width:340px; height:410px; z-index:1;
  border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(19,32,22,.14);
  background-size:cover; background-position:56% 42%;
  background-image:url(img/hands-cutting.jpg);
  -webkit-mask-image:radial-gradient(120% 100% at 30% 50%, #000 58%, transparent 100%);
          mask-image:radial-gradient(120% 100% at 30% 50%, #000 58%, transparent 100%);
}
.s-not .d-foliage{
  left:-40px; bottom:-26px; width:min(330px,26vw); height:420px;
  background-image:url(decor/foliage.svg); background-position:left bottom; opacity:.85;
  /* 草地が四角い色面なので、右端をぼかして cream 地に溶かす */
  -webkit-mask-image:linear-gradient(to right, #000 56%, transparent 100%);
          mask-image:linear-gradient(to right, #000 56%, transparent 100%);
}
.s-not .d-sparkle{
  right:min(28vw,400px); top:34%; width:88px; height:88px;
  background-image:url(decor/sparkle.svg); opacity:.9;
}
.s-not .d-leaf{
  right:6px; top:-18px; width:min(300px,24vw); height:210px;
  background-image:url(decor/leaves-tr.svg); background-position:right top; opacity:.9;
}

/* ---------- 山の帯（ワークショップ名） / 草原の帯（クロージング） ----------
   2026-09-07（第2版）: **風景を明るいまま見せる。**
   初版は濃緑と乗算していたが、それでは青空も草原の緑も見えず、
   モックアップの「水彩の風景の中に文字が置かれている」感じにならなかった。

   ⚠️ この変更で `.named` は**濃緑の反転をやめた**（`REQUIREMENTS.md` §3.1b を改訂）。
      反転は `.closing`（中心の問い）だけが持つ装置になった。思想上の序列
      「Value never truly disappears.」＞ 中心の問い ＞ ワークショップ名 は、
      反転を持つのが問いのほうであることで保たれている。
      ワークショップ名を前に出す手段は **「ページで唯一の風景の帯」＋ 反復**（全6ページのフッター・
      入口カード・workshops.html）に移した。

   コントラストの作り方（AA を割らないための唯一の手段）:
   - `.named` は **白のかすみ**を中央に敷いて、その上に濃緑の文字を置く
   - `.closing` は **濃緑のかすみ**を中央に敷いて、その上に白い文字を置く
   どちらも中央だけを寄せるので、縁では風景が素のまま見える。
   ⚠️ **かすみの濃さを下げるときは必ず測り直す**
      （文字を隠した版を描画し、padding の内側の最も明るい／暗い地の画素で測る）。 */
.onland{ background-repeat:no-repeat; background-size:cover; position:relative; }

/* 山の帯 — 空と山を見せる。文字は濃緑。 */
.named.onland{
  padding:104px 0 108px;
  background-color:#D9EAF4;                 /* 画像が来る前に見えるのは空の色 */
  background-image:
    radial-gradient(64% 112% at 50% 50%,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,.54) 58%, rgba(255,255,255,0) 88%),
    url(decor/mountains.jpg);
  background-position:center, center 34%;
  color:var(--ink);
}
.named.onland .eyebrow{ color:var(--gold-ink); }
.named.onland .name{ color:var(--green); }
.named.onland .why{ color:var(--dgreen); }
.named.onland .go{ color:var(--green); border-bottom-color:rgba(33,102,30,.5); }
.named.onland .go:hover{ color:var(--dgreen); border-bottom-color:var(--green); }

/* 草原の帯 — 草の緑を見せる。文字は白のまま（反転はここに残す）。 */
.closing.onland{
  border-top:0; padding-bottom:132px;
  background-color:#5E9A4E;
  background-image:
    radial-gradient(66% 114% at 50% 50%,
      rgba(18,46,28,.76) 0%, rgba(18,46,28,.46) 60%, rgba(18,46,28,0) 90%),
    url(decor/grass.jpg);
  background-position:center, center 52%;
}
/* 草原の上では Yellow の明るい側を使い、`.after` は透過をやめる。
   どちらも 12px bold / 20px なので「大きい文字」に当たらず 4.5:1 が必要
   （実測は `/tmp` のスクリプトではなく手順を `site/README.md` に置いた）。 */
.closing.onland .q-small{ color:var(--yellow-lt); }
.closing.onland .after{ color:var(--cream); }
/* ⚠️ フッターの上の線は「波で分かれていない面のあと」だけ残す。
   Home は `.closing` の濃緑＋波で分かれているので線は不要だが、about / stories / contact は
   直前が同じ cream の面なので、線を消すとフッターがページに溶けて境目が無くなる。 */
footer.decorated{ border-top:1px solid var(--rule); }
*:has(> .sep.down) + footer.decorated{ border-top:0; }

/* ⚠️ `.closing` に草と白い花を重ねる装飾はやめた（2026-09-07 第2版）。
   風景を明るいまま見せるようになったので、絵の中に既に草と白い花がある。
   その上に重ねると、貼り付けたように浮いてしまう。
   生成をやめた理由と戻し方は build/make_decor.py の FILES の上のコメント。 */

/* ---------- ブランドの一行の帯 ----------
   一行の左右に葉を置く。**文字には重ねない**（ここが Home でいちばん静かな面）。 */
/* 下端に波があるので、その分の余白を足す */
.signature.decorated{ padding-bottom:104px; }
.signature .d-band-l{
  left:-40px; top:50%; transform:translateY(-50%);
  width:min(360px,27vw); height:232px;
  background-image:url(decor/leaf-band-l.svg); background-position:left center; opacity:.92;
}
.signature .d-band-r{
  right:-40px; top:50%; transform:translateY(-50%);
  width:min(360px,27vw); height:232px;
  background-image:url(decor/leaf-band-r.svg); background-position:right center; opacity:.92;
}

/* ---------- 三つの問いの面 ---------- */
.s-qs .d-flowers{
  right:-20px; bottom:34px; width:min(340px,27vw); height:250px;
  background-image:url(decor/flowers.svg); background-position:right bottom; opacity:.9;
}
.s-qs .d-flight{
  right:min(6vw,90px); top:24%; width:min(340px,28vw); height:150px;
  background-image:url(decor/flight.svg); opacity:.85;
}

/* ---------- 3つの入口の面 ----------
   ここは cream 系ではなく**淡い草地の緑**。`section.alt` の cream-2 を上書きする
   （モックアップではこの面だけ地が緑に振れていて、カードの白が浮いて見える）。 */
section.alt.s-ways{ background:var(--field); }
.s-ways .d-field{
  left:0; right:0; bottom:0; width:100%; height:64%;
  background-image:url(decor/field-wave.svg);
  background-position:center bottom; background-size:100% 100%;
}
.s-ways .d-leaf-l{
  left:-56px; top:36%; width:min(300px,23vw); height:210px;
  background-image:url(decor/leaf-band-l.svg); background-position:left center; opacity:.8;
}
.s-ways .d-leaf-r{
  right:-56px; top:12%; width:min(300px,23vw); height:210px;
  background-image:url(decor/leaf-band-r.svg); background-position:right center; opacity:.8;
}

/* ---------- フッター ---------- */
footer.decorated .d-sprig{
  right:-34px; bottom:-16px; width:min(300px,24vw); height:200px;
  background-image:url(decor/sprig.svg); background-position:right bottom; opacity:.55;
}

/* ---------- 狭い画面 ----------
   2026-09-07 第3版: **装飾を消すのではなく、置き場所を作って残す。**
   第2版は狭い画面で葉・花・蝶・木立・Puzz を display:none にしていたが、
   SP で見ると装飾がまるごと消えて、モックアップと別のページになっていた。

   規則:
   - 装飾は本文に重ねない。**重ねずに置けないときは、その面の padding を足して
     装飾のための場所を作る**（SP は縦に伸びてよい。重ねて読みにくくするほうが悪い）
   - 左右に振っていたものは、狭い画面では**上下に振り分ける**
     （文字が横幅いっぱいまで来るので、左右には物理的に置けない）
   - 大きさは `min(px, vw)` で指定する。320px の画面まで縮む必要がある
   - `.decorated` の overflow:hidden があるので、はみ出しても横スクロールは出ない

   ⚠️ ヒーローの紙は消さない（コピーの地なので、消すと読めない）。 */

/* --- 1000〜1180px: 紙が広がって写真とぶつかるので、写真を外へ逃がす --- */
@media (max-width:1180px){
  .s-not .d-photo{ right:-150px; width:290px; height:360px; }
}

@media (max-width:1000px){
  /* ブランドの一行 — 葉を文字の左右に置けなくなる。上と下に振り分ける */
  .signature.decorated{ padding:98px 0 106px; }
  .signature .d-band-l{
    left:-34px; top:4px; transform:none;
    width:min(300px,34vw); height:126px; background-position:left top;
  }
  .signature .d-band-r{
    right:-34px; top:auto; bottom:12px; transform:none;
    width:min(300px,34vw); height:126px; background-position:right bottom;
  }
  /* 三つの問い — 花と蝶は本文の下に場所を作って並べる */
  .s-qs{ padding-bottom:224px; }
  .s-qs .d-flowers{ right:-12px; bottom:20px; width:min(262px,44vw); height:192px; }
  .s-qs .d-flight{
    left:-18px; top:auto; bottom:56px; width:min(250px,46vw); height:112px;
  }
  /* 3つの入口 — 葉はカードの上（右）と下（左）の余白へ */
  .s-ways{ padding-bottom:158px; }
  .s-ways .d-leaf-r{ right:-40px; top:-8px; width:min(230px,38vw); height:142px; }
  .s-ways .d-leaf-l{
    left:-40px; top:auto; bottom:6px; width:min(230px,38vw); height:142px;
  }
  /* 黄色いひと筆はヒーローの写真の左下へ（Puzz は右下に来る） */
  .hero .d-doodle{ left:14px; bottom:46px; width:108px; height:54px; }
  /* ⚠️ 紙は最大 600px、Puzz の吹き出しは約 280px ある。この幅では左右に並べられず、
     吹き出しが紙の右下の角に掛かる（英語版 821px・日本語版 900px 以下で重なっていた）。
     紙を持ち上げて Puzz を**紙の下**に出す ―― SP で Puzz を流れに戻しているのと
     同じ結果を、広い側では余白で作る。`display:none` で消す選択はしない（§5「装飾」）。 */
  .hero-copy{ padding-bottom:calc(var(--wave) + 26px + 96px); }
}

@media (max-width:820px){
  .named.onland{ padding:76px 0 80px; }
  .hero .plate{ padding:26px 24px 28px; }
  .hero .plate::before{ inset:-12px -16px -14px -16px; }

  /* --- ヒーロー ---
     ⚠️ SP では**コピーと Puzz を絶対配置しない。**写真を背景として敷き、
        高さは中身に任せる。

        絶対配置のままだと「紙の高さ」を CSS 側で見積もることになる。ところが紙の高さは
        端末の文字サイズ設定・h1 の折り返し行数・eyebrow が1行か2行かで変わるので、
        どこかで必ず Puzz がボタンに重なる（実機の iPhone で踏んだ）。
        Puzz を流れの中で紙の**あと**に置けば、重なりは構造的に起こらない。

     並び: 葉（上の両角） → 紙 → Puzz（右寄せ） → 波
     `.puzz` は `.hero-copy` の兄弟なので、両方を流れに戻すだけで紙の下に来る。 */
  .hero.decorated .hero-img{ position:absolute; inset:0; height:auto; }
  .hero.decorated .hero-copy{
    /* static にすると絶対配置の写真に隠れる（z-index は位置指定要素にしか効かない）。
       relative で流れに残したまま重ね順を保つ */
    position:relative; inset:auto; z-index:5;
    display:block; padding:86px 0 0;
    /* 広い画面用の下限（clamp(340px,58vh,580px)）はここでは要らない。
       SP は中身が必ずそれより高くなるうえ、余った高さは Puzz を下へ押すだけ */
    min-height:0;
  }
  .hero .d-leaf-l{ left:-26px; top:-14px; width:min(196px,44vw); height:96px; }
  .hero .d-leaf-r{ right:-20px; top:-16px; width:min(206px,46vw); height:98px; }
  /* eyebrow を1行に収める（2行になると紙が 48px 伸びてファーストビューを圧迫する） */
  .hero .plate .brandline{ font-size:10.5px; letter-spacing:.12em; margin-bottom:12px; }
  /* Puzz は SP でも出す。§4 の「Home の吹き出しは1回」を満たすのはここ */
  .hero.decorated .puzz{
    display:flex; position:relative; z-index:6; right:auto; bottom:auto;
    justify-content:flex-end; gap:10px; margin:20px 0 0; padding:0 24px 74px;
  }
  .hero.decorated .puzz > img{ width:44px; height:44px; }
  .hero.decorated .puzz .bubble{
    font-size:13.5px; line-height:1.35; padding:8px 13px; border-radius:16px 16px 16px 4px;
  }
  .hero.decorated .puzz .bubble::after{ bottom:11px; }

  /* --- 何ではないか ---
     写真は「右から流し込む」のをやめ、**本文のあとに1枚置く**（HTML では .wrap の後ろ）。
     木立は面の足元に敷き、そのぶん下の余白を足す。 */
  .s-not{ padding-bottom:268px; }
  .s-not .d-photo{
    position:static; display:block; width:auto; height:min(232px,54vw);
    margin:34px 24px 0; transform:none; border-radius:14px;
    -webkit-mask-image:none; mask-image:none;
    box-shadow:0 10px 24px rgba(19,32,22,.13);
  }
  /* ⚠️ 幅と高さの比を絵（440:540 ≒ 0.815）に合わせる。contain で絵が箱より細くなると、
     絵の右端がマスクのフェードの途中に来て、縦の切り口が見えてしまう */
  .s-not .d-foliage{
    left:-14px; bottom:-6px;
    width:min(210px,52vw); height:min(258px,64vw); opacity:.92;
  }
  .s-not .d-leaf{ right:-14px; top:-16px; width:min(176px,40vw); height:132px; }
  .s-not .d-sparkle{ right:16px; bottom:100px; top:auto; width:62px; height:62px; }

  /* --- フッター --- */
  footer.decorated{ padding-bottom:154px; }
  footer.decorated .d-sprig{
    right:-18px; bottom:-4px; width:min(216px,48vw); height:152px; opacity:.62;
  }
}

@media (max-width:560px){
  .hero.decorated .hero-copy{ padding-top:80px; }
  .hero .d-leaf-l, .hero .d-leaf-r{ height:90px; }
  /* ⚠️ .s-not / .s-qs の padding-bottom はここで下げない。
     花と木立の高さぶんの場所なので、削ると本文に重なる */
}

/* ==========================================================================
   下層ページの装飾レイヤー（2026-09-08 新設）

   Home に敷いた水彩を **下層5ページにも広げる**（`site/REQUIREMENTS.md` §5 を改訂）。
   ここでも増やしたのは装飾だけで、**文言・写真の被写体・構成の順序は一切変えていない**。

   Home との違いは2つ。

   ① **密度は Home の 4〜5 割。**1ページに置くのは 5〜6 点（Home は 14 点）。
      ページ見出しに2点、面の足元に1〜2点、フッターに1点。それ以上は足さない。
   ② **置き場所は2種類だけ。**
      - ページ見出しの **右上と左下**（コピーは紙に乗るので、この2ヶ所は常に空く）
      - 面の **足元の帯**（`section.foot` で `padding-bottom` を先に足してから置く）

      ⚠️ Home のように**面の中ほど**（`.s-not .d-photo` のような位置）へは置かない。
         `.wrap`（最大 1120px）が画面いっぱいに広がる 1120〜1300px 付近で、
         左右に振った装飾が必ず本文の裏に入る。上の2ヶ所に限れば
         **320px から 1920px まで本文と重なる幅が存在しない**ので、
         狭い画面用の逃がし方（`@media` での置き直し）も要らなくなる。

   波（`.sep`）は Home と同じで、**面の色が変わる境目すべて**に入れる。
   Home に直線の境目が1つも無いのがトンマナの芯なので、ここも同じにする。
   ========================================================================== */

/* ---------- 波だけを置く面 ----------
   `.decorated` は `overflow:hidden` も持つ。`.sep` は面の内側に収まるので clip は要らず、
   ⚠️ workshops の sticky レール（`.two.railed` の中）を含む面に `.decorated` を付けると
      **祖先の overflow で sticky が死ぬ**。波だけの面はこちらを使う。 */
.waved{ position:relative; }
.waved > .wrap{ position:relative; z-index:5; }

/* ⚠️ 波を持つ面は次の面と 1px 重ねる。
   面の高さは行送りと `--wave`（vw 由来）から出るので**必ず端数になる**。端数の境目では
   `overflow:hidden` の切り口で波の最下行が「その面の地」と混ざり、
   **濃い面と明るい面の境目に 1px の線が出る**（contact の濃緑の面の上下で踏んだ）。
   波の色は必ず次の面の地の色なので、次の面を 1px 手前から描かせれば消える。
   `:has()` が無い環境では、いまと同じ 1px の線が見えるだけで壊れはしない。 */
.decorated:has(> .sep.down), .waved:has(> .sep.down){ margin-bottom:-1px; }
.decorated:has(> .sep.up),   .waved:has(> .sep.up){   margin-top:-1px; }

/* ---------- 波のぶんの余白 ----------
   波は面の端を最大 `var(--wave)`（70px）ぶん隣の色で塗る。本文が波に触らないよう、
   `section` の 88px / `.tight` の 64px を上書きして「波＋40px」を確保する。
   ⚠️ `.foot` と併用しない（`.foot` が波のぶんも含んでいる）。 */
section.wv-t{ padding-top:calc(var(--wave) + 40px); }
section.wv-b{ padding-bottom:calc(var(--wave) + 40px); }

/* ---------- 足元の帯 ----------
   面の下端に植物を1点置くための場所。**先に場所を作ってから置く**のが規則
   （`REQUIREMENTS.md` §5「装飾」）。見た目が空いているからと削ると本文に重なる。 */
section.foot{ padding-bottom:calc(var(--wave) * .5 + 196px); }
.decor.at-foot{ bottom:calc(var(--wave) * .38); }

/* ---------- 装飾の形 ----------
   ⚠️ 箱の縦横比は必ず絵に合わせる（`background-size:contain` なので、箱が絵より細いと
      絵が箱の中で縮み、マスクのフェードが絵の途中に来て切り口が見える）。
      幅だけを `min()` で決め、高さは `calc(幅 / 比)` で出す。比は SVG の viewBox のまま。 */
.dx-leaf{                                  /* leaves-tr.svg 420:360 */
  --w:min(280px,26vw); width:var(--w); height:calc(var(--w) / 1.1667);
  background-image:url(decor/leaves-tr.svg); background-position:right top; opacity:.92;
}
.dx-doodle{                                /* doodle.svg 260:130 */
  --w:min(132px,15vw); width:var(--w); height:calc(var(--w) / 2);
  background-image:url(decor/doodle.svg); opacity:.85;
}
.dx-foliage{                               /* foliage.svg 440:540 */
  --w:min(150px,17vw); width:var(--w); height:calc(var(--w) / .815);
  background-image:url(decor/foliage.svg); background-position:left bottom; opacity:.8;
  /* 草地が四角い色面なので、右端をぼかして地に溶かす */
  -webkit-mask-image:linear-gradient(to right, #000 58%, transparent 100%);
          mask-image:linear-gradient(to right, #000 58%, transparent 100%);
}
.dx-flowers{                               /* flowers.svg 460:330 */
  --w:min(238px,25vw); width:var(--w); height:calc(var(--w) / 1.394);
  background-image:url(decor/flowers.svg); background-position:right bottom; opacity:.88;
}
.dx-flight{                                /* flight.svg 520:210 */
  --w:min(300px,30vw); width:var(--w); height:calc(var(--w) / 2.476);
  background-image:url(decor/flight.svg); opacity:.82;
}
.dx-leafband{                              /* leaf-band-l.svg 540:320 */
  --w:min(280px,27vw); width:var(--w); height:calc(var(--w) / 1.6875);
  background-image:url(decor/leaf-band-l.svg); background-position:left center; opacity:.85;
}
.dx-sparkle{                               /* sparkle.svg 120:120 */
  --w:min(78px,10vw); width:var(--w); height:var(--w);
  background-image:url(decor/sparkle.svg); opacity:.9;
}

/* ---------- ページ見出し（下層5ページ共通） ----------
   cream-2 の平らな箱＋下の1本線をやめ、Home のヒーローと同じ組み立てにする ——
   **地 → 紙 → 葉 → 波**。違いは地が写真ではなく水彩のにじみであることだけ。

   にじみは CSS のグラデーション2枚で作る（素材を増やさない）。空の青を右上から、
   草の緑を左下から。紙（`#F7EFDE`）は cream-2（`#F4EEE1`）とほぼ同じ明るさなので、
   **紙が読めるのは影のおかげ**。`filter:drop-shadow` を薄くしないこと。 */
.pagehead.decorated{
  border-bottom:0;
  padding:58px 0 calc(var(--wave) + 34px);
  background-color:var(--cream-2);
  background-image:
    radial-gradient(72% 118% at 88% -16%, rgba(190,221,239,.62) 0%, rgba(190,221,239,0) 64%),
    radial-gradient(80% 128% at 2% 118%, rgba(198,223,163,.55) 0%, rgba(198,223,163,0) 62%);
}
.pagehead .plate{ max-width:760px; padding:34px 38px 36px; }
.pagehead .plate::before{
  inset:0;
  transform:rotate(-.55deg);
  filter:drop-shadow(0 10px 22px rgba(31,77,51,.19));
}
/* 紙の上の色。`--gold` と `.muted` の `#5c6b5f` は cream 地の想定なので、
   紙（`#F7EFDE`＋下端に影の帯）に乗せると AA 付近まで落ちる。 */
.pagehead .plate .eyebrow{ color:var(--gold-ink); }
.pagehead .plate .muted{ color:#4b584d; }
/* 44ch だと `.sub` の最後の1語だけが次行に落ちる。折り返しは紙の幅に任せる */
.pagehead .plate .sub{ max-width:60ch; }

/* puzz.html にはページ見出しが無く、Puzz が一人称で話す面がそのまま入口になる。
   紙は置かない（`.bigbubble` が紙の役をしている）が、**地のにじみと角の葉は他の5ページに合わせる**。 */
.puzzsec.decorated{
  background-image:
    radial-gradient(72% 118% at 88% -16%, rgba(190,221,239,.62) 0%, rgba(190,221,239,0) 64%),
    radial-gradient(80% 128% at 2% 118%, rgba(198,223,163,.55) 0%, rgba(198,223,163,0) 62%);
}
.pagehead .dx-leaf, .puzzsec.decorated .dx-leaf{ right:-22px; top:-24px; }
.pagehead .dx-doodle, .puzzsec.decorated .dx-doodle{ left:20px; bottom:calc(var(--wave) * .5); }

/* workshops.html だけ、ページ見出しの地を **山の風景**にする（2026-09-08）。
   Home の `.named.onland` と同じ絵。Home では「これがこの名前だ」と告げる帯だったものが、
   その名前そのもののページでは入口の地になる。風景の帯を持つ下層ページはここだけ
   （`REQUIREMENTS.md` §3.1b）。
   ⚠️ 文字は**不透明な紙の上**にあるので、コントラストは風景の明るさに依存しない。
      それでも `build/check_contrast.py` の対象に入れてある（紙にノイズと影の帯があるため）。
   ⚠️ 左に cream のベールを掛けるのは、紙が木立の上に乗ると影が読めなくなるから。 */
.pagehead.onland{
  background-color:#D9EAF4;
  background-image:
    linear-gradient(100deg, rgba(250,246,238,.66) 0%, rgba(250,246,238,.30) 50%, rgba(250,246,238,0) 82%),
    url(decor/mountains.jpg);
  background-position:center, center 40%;
  background-size:auto, cover;
}

/* ---------- 写真の帯（about） ----------
   写真の上下を波で切る。Home のヒーロー（濃緑の写真 → cream の波）と同じ扱い。
   ⚠️ `.sep` は z-index:3、`.band .cap` は 2 なので、下の波が説明文に掛かる。
      キャプションを波より上に出し、波のぶんの余白を足す。 */
.band.waved{ overflow:visible; }   /* 波を 1px はみ出させる。写真は箱ぴったりなので溢れない */
/* ⚠️ `.cap` を波より上（z-index 4）にしてはいけない。`.cap` は `inset:auto 0 0 0` の
   全幅の面なので、上に出すと暗いグラデーションが波を隠して写真の下端が直線に戻る。
   z-index は 2 のまま（波の下）にして、**波のぶんの余白**で説明文を波の上に逃がす。 */
.band.waved .cap{
  padding-bottom:calc(var(--wave) + 20px);
  /* 面が波のぶん高くなったので、暗幕を一段強くする。既定の `to top` 一本だと
     説明文の位置でグラデーションが薄くなり、白い文字が写真の明るい側に乗る。 */
  background:linear-gradient(to top,
    rgba(19,19,19,.82) 0%, rgba(19,19,19,.80) 52%, rgba(19,19,19,.40) 78%, rgba(19,19,19,0) 100%);
}

/* ---------- 名前の帯（about） ----------
   about の `.named` は濃緑の反転のまま（序列の理屈は `REQUIREMENTS.md` §3.1b）。
   下端に波を置いたぶんの余白だけ足す。 */
.named.waved{ padding-bottom:calc(var(--wave) + 34px); }

/* ---------- 足元の帯の置き場所（ページごと） ----------
   どの面に何を置くかは1ページ 1〜2ヶ所。ページごとに違う植物にして、
   6ページを続けて見ても同じ絵の繰り返しにならないようにしてある。 */
.a-shift   .dx-flight  { right:min(4vw,64px); }
.a-skill   .dx-foliage { left:-26px; }
.p-size    .dx-flowers { right:-18px; }
.p-get     .dx-leafband{ left:-30px; }   /* 2026-10-24 に .p-family から移した（最後の面になったため） */
.w-take    .dx-foliage { left:-26px; }
.w-invite  .dx-flowers { right:-18px; }
.s-record  .dx-flight  { right:min(4vw,64px); }
.s-gallery .dx-foliage { left:-26px; }
.c-close   .dx-flowers { right:-18px; }
.c-close   .dx-sparkle { left:min(8vw,110px); bottom:calc(var(--wave) * .38 + 96px); }

/* ---------- 狭い画面 ----------
   置き場所が「見出しの角」と「足元の帯」の2種類しかないので、**消す必要がない**。
   ⚠️ `display:none` にしないこと（`REQUIREMENTS.md` §5「装飾」）。
      幅は上の `min(px,vw)` が縮めるので、ここで直すのは余白と見出しの詰めだけ。 */
@media (max-width:820px){
  .pagehead.decorated{ padding:44px 0 calc(var(--wave) + 26px); }
  .pagehead .plate{ padding:24px 24px 26px; }
  .pagehead .dx-leaf, .puzzsec.decorated .dx-leaf{ right:-16px; top:-14px; }
  .pagehead .dx-doodle, .puzzsec.decorated .dx-doodle{ left:14px; }
  section.wv-t{ padding-top:calc(var(--wave) + 26px); }
  section.wv-b{ padding-bottom:calc(var(--wave) + 26px); }
  section.foot{ padding-bottom:calc(var(--wave) * .5 + 150px); }
  .named.waved{ padding-bottom:calc(var(--wave) + 26px); }
}
@media (max-width:560px){
  section.foot{ padding-bottom:calc(var(--wave) * .5 + 118px); }
  /* 蝶は本文の幅がいっぱいになるので、右端ではなく足元の中央寄りへ */
  .a-shift .dx-flight, .s-record .dx-flight{ right:auto; left:50%; transform:translateX(-46%); }
  .c-close .dx-sparkle{ left:12px; bottom:calc(var(--wave) * .38 + 74px); }
}

/* ==========================================================================
   言語切替（2026-09-09 新設 / 英語版 ↔ 日本語版）

   英語版・日本語版の両方から読むので、この節は :lang で分けない。
   リンクは常に「同じページの別言語」を指す（Home から Home、workshops から
   workshops へ）。ヘッダー（常に見える）とフッター（読み終えた場所）の2ヶ所。
   ========================================================================== */
header .lang{
  flex:none; text-decoration:none; white-space:nowrap;
  /* ⚠️ font-family をここで宣言し直すのが要点。--sans は :lang(ja) で
     和文フェイスつきに差し替わるが、変数が解決されるのは宣言した場所なので、
     body 側の指定だけでは英語版の「日本語」の3文字に効かない */
  font-family:var(--sans);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--dgreen);
  padding:6px 12px; border:1.5px solid var(--rule); border-radius:999px;
}
header .lang:hover{ color:var(--green); border-color:var(--green); }

footer .langline{ margin:12px 0 0; }
footer .langline a{
  font-family:var(--sans); font-size:14px; font-weight:700;
  color:var(--green); text-decoration:none;
  border-bottom:1px solid rgba(33,102,30,.4);
}
footer .langline a:hover{ border-bottom-color:var(--green); }
/* 特定商取引法に基づく表記への入口（全ページ・2026-10-25）。法律上どのページからも
   行けることが要るので置くが、思想の面では目立たせない（© と同じ控えめな字） */
footer .legalline{ margin:6px 0 0; font-size:13px; }
footer .legalline a{ color:#5c6b5f; }

@media (max-width:1000px){
  /* 狭い画面ではハンバーガーが右端（慣習）。言語切替はその左隣に残す ――
     メニューを開かずに切り替えられるようにしておく。
     .brand の margin-right:auto と .menu の margin-left:auto が
     同じ隙間に並ぶので、order で並び順だけを入れ替える */
  header .brand{ order:-2; }
  header .lang{ order:-1; }
  /* ⚠️ .menu の margin-left:auto を消す。.brand の margin-right:auto と2つ並ぶと
     余白が半分ずつに分かれ、言語切替がバーの真ん中に浮く（実機幅で踏んだ） */
  .menu{ margin-left:0; }
}

/* ==========================================================================
   404（site/404.html・2026-09-13 新設）

   ⚠️ 404 は**英語と日本語を同じ重みで両方置く**面。どちらの読者が迷い込むか
      分からないため。だから `html[lang="ja"]` の節（下）は当たらない ――
      和文の組みが要るところに `.nf-ja` を付けて、ここで最低限だけ整える。
   ========================================================================== */

/* ページ一覧。footer nav.sitemap と同じ見た目だが、あちらは footer にスコープ
   されているので（bare な nav セレクタを避ける規則）ここで別に持つ */
.nf-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.nf-list a{
  font-size:16px; text-decoration:none; color:var(--dgreen);
  border-bottom:1px solid transparent; align-self:flex-start;
}
.nf-list a:hover{ border-bottom-color:var(--yellow); }

/* 和文だけ、英文向けの詰めと斜体を打ち消す（理由は下の「日本語版の組み」と同じ） */
.nf-ja{ font-style:normal; letter-spacing:0; line-height:1.8; }
.nf-ja.sub{ font-size:clamp(16px,1.7vw,18px); margin-top:10px; }

/* ==========================================================================
   日本語版の組み（2026-09-09 新設 / site/ja/*.html）

   HTML・クラス・装飾・波は英語版と同じ。違うのは文字と、文字の組み方だけ。
   だからこの節は「和文にすると崩れるところ」だけを上書きする。

   ⚠️ 英語の確定表現（PHILOSOPHY §3・§6）は英語のまま置き、直下に日本語を
      添える（`.gloss`）。3媒体の固定点（BIO・カタログ表紙・サイト）を
      日本語版が崩さないための決めごと。詳細は site/REQUIREMENTS.md「言語」。
   ========================================================================== */

/* 和文フェイスは :lang(ja) に置く。日本語版の <html lang="ja"> でも、
   英語版のヘッダーに置いた <a lang="ja">日本語</a> でも同じ指定が効く。
   ⚠️ 欧文フェイスを先に並べる。ラテン文字は英語版と同じ顔のまま、
      仮名と漢字だけが後ろの和文フォントから来る */
:lang(ja){
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,
          "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,
          "Noto Serif JP","MS PMincho",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",
         "Helvetica Neue",Helvetica,Arial,
         "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,
         "Noto Sans JP",Meiryo,sans-serif;
}

html[lang="ja"]{
  /* 行頭に来てはいけない文字（、。」等）の禁則を厳しく取る */
  line-break:strict;
}
/* 和文は字面が正方形で、欧文より行間を要求する */
html[lang="ja"] body{ line-height:1.85; }

/* ⚠️ 和文に斜体を使わない。合成オブリークになって明朝が歪む。
   英語の確定表現には lang="en" が付いているので、この上書きは当たらない
   （:lang(ja) は「その要素の言語」で判定するため）。斜体は英語側に残る */
html[lang="ja"] :lang(ja){ font-style:normal; }

/* 見出し・表示用の文字 ―― 欧文向けの負のトラッキングと 1.1 台の行送りは
   和文だと窮屈に見え、濁点や送り仮名が詰まる。詰めを 0 に戻して行送りを広げ、
   palt（仮名の字間だけを詰める）で大きな文字の間延びを抑える */
html[lang="ja"] :is(h1,h2,h3){
  letter-spacing:0; line-height:1.4; font-feature-settings:"palt" 1;
}
html[lang="ja"] :is(.lead,.sub,.name,.why,.q,.f,.hi,.closer,.asks,.ask,.v,.w,
                    .bubble,figcaption,.q-big,.after,.bigbubble,.cap q,.stc span){
  letter-spacing:0; line-height:1.6; font-feature-settings:"palt" 1;
}
html[lang="ja"] :is(.q-big,.name,.hi,.bigbubble,.cap q,.stc span){ line-height:1.42; }
/* 小さいラベルの字送り。欧文の大文字を前提にした .2em 前後は和文だと開きすぎる */
html[lang="ja"] :is(.eyebrow,.facts li,.chip,.flow li,.ws-tier,.session .t,
                    .path li .n,.record .when,.book a.line .t,.qr span,
                    .signature .jp,.versus .t,.shift .box .t){ letter-spacing:.1em; }
/* 和文の1行は 35〜45 字が読みやすい。欧文の ch 指定はそのままだと倍近くなる。
   ⚠️ ただし**中身が英語の確定表現の箱は狭めない**（`.signature p` `.named .name`
      `.named .why` など）。狭めると英文の折り返しが増える上に、直下に添えた日本語
      （`.gloss`）が親の幅を継ぐので「見か／たです」のような不体裁な割れ方をする */
html[lang="ja"] .pagehead .plate .sub{ max-width:40ch; }
html[lang="ja"] q{ quotes:"「" "」"; }

/* 英語の確定表現に添える日本語。英語を主、日本語を従にして、
   固定点を崩さずに意味だけを渡す。
   大きさは em 基準（見出しの下では大きく、本文の下では小さく）。
   最小 14px は本文より小さくしすぎないための下限 */
html[lang="ja"] .gloss{
  display:block; margin-top:.52em;
  font-family:var(--sans); font-style:normal; font-weight:600;
  font-size:max(14px,.46em); line-height:1.65; letter-spacing:.01em;
  color:var(--dgreen);
}
/* 濃い面（濃緑の反転・写真の暗幕・パネル）では明るいほうへ。
   ⚠️ 触ったら python3 build/check_contrast.py（絵と写真の上は AA 実測） */
/* ⚠️ 半透明にしない。地と合成されるぶんコントラストが落ちる。
   草原の帯の下端（かすみが切れて草が明るいところ）で AA を割った（実測 3.68:1）*/
html[lang="ja"] :is(.named:not(.onland),.closing,.discovery,.panel,.band .cap,
                    .puzz.dark .bubble) .gloss{ color:var(--cream); }
html[lang="ja"] :is(.named.onland,.pagehead .plate) .gloss{ color:var(--dgreen); }
/* 3媒体の固定点そのもの（ヒーローの h1）の下だけは、紙の上なので一段濃く */
html[lang="ja"] .hero .plate .gloss{ color:#3a463c; }
/* 箇条書きの表示文字も同じ理由で行送りを広げる（欧文向けの 1.3 台では詰まる） */
html[lang="ja"] :is(ol.qs li,ul.nos li,.learn li,dl.info dd,.session p,
                    .shift .box p.v,.path li .w,.versus .f){ line-height:1.6; }
/* 行送りを広げたぶん、行頭に絶対配置した番号と黄色い線も同じだけ下げる
   （半行取りが .16em → .3em に増えるので、その差 .14em を足す） */
html[lang="ja"] ol.qs li::before{ top:.23em; }
html[lang="ja"] ul.nos li::before{ top:.72em; }
/* See. Think. Create. の三語は横並びなので、添えた日本語だけ次の行に落とす */
html[lang="ja"] .stc .gloss{ flex-basis:100%; margin-top:.2em; }

/* 草原の帯は日本語版だけ行がひとつ増える（英語の一行＋日本語の添え書き）。
   増えた1行はかすみ（濃緑の radial-gradient）の外へ出て、明るい草の上に乗る。
   ⚠️ だから日本語版だけ**かすみを一段濃く・一段広く**する。薄くするのではなく
      濃くしているので安全側だが、触ったら python3 build/check_contrast.py。
      Home（英語版）の見え方は変えない */
html[lang="ja"] .closing.onland{
  background-image:
    radial-gradient(70% 126% at 50% 47%,
      rgba(18,46,28,.82) 0%, rgba(18,46,28,.58) 62%, rgba(18,46,28,.10) 94%),
    url(decor/grass.jpg);
}
/* 黄色いひと筆（`.hl`）は「短い語をなぞる」しるしなので、和文では途中で折らない。
   折れると 1文字だけが前の行に残って線が2本に割れる（contact の「それだけ」で踏んだ）。
   ⚠️ 中身は必ず 6文字程度までにする。長い語に付けると狭い画面ではみ出す
      （h2 の font-size は clamp の下限 28px まで下がるので 280px でも収まる）。
   ⚠️ `:lang(ja)` で絞る。日本語版でも見出しが英語の面（about / stories の h1 は確定表現）が
      あり、そこの `.hl` は欧文なので、単語の折り返しをそのまま使わせる */
html[lang="ja"] .hl:lang(ja){ white-space:nowrap; }

/* 特定商取引法に基づく表記の見出し。欧文の大文字向けの 11.5px・.12em は、和文の
   「商品代金以外の費用」だと小さすぎて開きすぎる */
html[lang="ja"] .legal dl.info dt{ font-size:13px; letter-spacing:.06em; }