@charset "utf-8";
/* ============================================================================
   制作例21 PLOTFABLE MARKET  site.css   2026-08-29 ブラッシュアップ(ゲイツ)

   ★直した土台の欠陥(実測)
   1. ヒーローが `height:1310px` 固定 + 写真が `position:absolute;top:477px` だった。
      文字が伸びた瞬間にリード文が写真の下へ潜る。2026-08-11 に実際に起きている。
      実測の余裕は 幅1440以上で **11px しか無かった**(1 行増えたら消える)。
      → 写真を流れの中へ戻した。文字が伸びても潜らない。
   2. 出現演出 `.reveal` が `opacity:0` を使っていた(社内で禁止。要素の箱を 0 にして
      品質検査を盲目にする)。しかも **HTML に `.reveal` が 1 つも付いていなかった**
      = 仕組みだけ在って動きは 0。
      → 覆い = clip-path / 持ち上げ = translate へ作り直し、実際に全節へ配線した。
   3. 商品カードのホバーが JS の直書き transform で、transition が無く瞬間移動していた。
   4. 朝露の粒が画面外でも回り続けていた。

   ★出現演出の規則(社内の実測でこうなっている)
   - `opacity` と `transform:scale(0)` は使わない。どちらも箱を 0 にして検査を潰す。
   - 隠す指定は全部 `:where(html.js)` の下(JS が落ちたら何も隠れない)。
   - `clip-path` を持つ要素は IntersectionObserver から永久に見えない。
     だから site.js は scroll + requestAnimationFrame で発火させる。
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}

.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}

:root{
  --bg:#f3ead8;            /* 生成りの地 */
  --bg2:#e7dbc1;           /* 一段濃い地 */
  --ink:#301e14;           /* 文字と濃い地 */
  --ink2:#3b2719;          /* 濃い地の中のカード */
  --soft:#6b5236;          /* 明るい地の弱い文字(実測 6.3:1) */
  --on-ink:#f6efe0;        /* 濃い地の本文 */
  --soft-on-ink:#c9b79c;   /* 濃い地の弱い文字(実測 8.1:1) */
  --rule:#301e1426;
  --rule-ink:#f6efe033;
  --body:"M PLUS Rounded 1c",sans-serif;
  --brush:"Zen Kurenaido",serif;
  --red:#d9472b;           /* ★小さい文字に使わない(生成り地で 3.6:1)。大きい字と面にだけ */
  --green:#397a43;
  --ease:cubic-bezier(.22,.61,.36,1);
}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0}
.lead{font-size:15.5px;line-height:2;max-width:44em;margin:0}
.ln{display:block}

.sec-head{max-width:1240px}
.sec-head h2{margin:0 0 clamp(16px,2vw,26px)}
/* ★見出しをまとめて指定する規則が margin:0 を持ち、同詳細度で後勝ちする。
   リード文の側に上余白を持たせて、どの節でも見出しと本文が付かないようにする。 */
.sec-head .lead{margin-top:clamp(16px,1.8vw,24px)}

/* ---- 頭 ------------------------------------------------------------------ */
.harvest-head{height:140px;position:sticky;top:0;z-index:30;background:#f3ead8;display:flex;align-items:center;padding:0 4vw}
.harvest-head>a{font:900 25px/.8 var(--body);color:var(--red)}
.harvest-head button{background:var(--red);color:#fff;border:0;padding:15px 20px;cursor:pointer;
  transition:background .25s var(--ease)}
@media(hover:hover){.harvest-head button:hover{background:#b8391f}}

/* ============================ ヒーロー ==================================== */
/* ★写真を流れの中へ戻した。文字が何行になってもリード文が写真の下へ潜らない。 */
.market-hero{position:relative;padding:clamp(28px,4.5vh,60px) 0 0;overflow:hidden}
.market-hero>.brush,.market-hero>.market-window{width:min(1240px,92vw);margin-inline:auto}
.brush{position:relative;z-index:4}
.brush>span{display:block;font-size:12.5px;letter-spacing:.16em;color:var(--soft)}
.brush h1{font:clamp(64px,10.5vw,150px)/1.08 var(--brush);margin:.04em 0 .1em;color:var(--red)}
.brush p{max-width:34em;line-height:1.95;margin:0;font-size:15.5px}

.market-window{position:relative;z-index:2;margin-top:clamp(20px,2.4vw,38px);
  height:clamp(300px,44vw,760px);overflow:hidden}
.market-window img{filter:saturate(1.2)}
.market-window>span{position:absolute;left:15px;bottom:15px;background:#f3ead8;padding:9px 12px;
  font-size:12.5px;letter-spacing:.04em}

/* 手書きの値札。スクロールで少し揺れる(遊び) */
.paper-tag{position:absolute;z-index:3;right:clamp(14px,3vw,52px);top:clamp(16px,4vw,64px);
  background:#fff4d8;padding:clamp(16px,2vw,30px);font:clamp(18px,2vw,28px)/1.5 var(--brush);
  box-shadow:8px 8px var(--ink);rotate:6deg}
.paper-tag b{font-weight:400;font-size:1.25em}

/* 朝露。画面の外では止める(末尾に書いて play-state を戻されないようにする) */
.dew{position:absolute;z-index:1;width:min(480px,46vw);height:520px;pointer-events:none;
  background:radial-gradient(circle,#ffffffaa 0 3px,transparent 4px);background-size:32px 32px;filter:blur(1px)}
.d1{right:0;top:22%}
.d2{left:22%;bottom:-4%}
@keyframes dew{50%{transform:translateY(-30px)}}
.dew{animation-name:dew;animation-duration:7s;animation-timing-function:linear;animation-iteration-count:infinite}

/* ============================ 今週、並ぶもの ============================== */
.today{padding:clamp(64px,11vh,130px) 0}
.today header{display:block}
.today h2,.season h2,.morning h2,.farmer h2,.distance h2,.numbers h2,
.places h2,.rain h2,.first h2,.market-contact h2{
  font:clamp(52px,7.4vw,116px)/1.25 var(--brush);margin:0}
.produce{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(30px,4vw,56px)}
.produce article{position:relative;transition:transform .45s var(--ease)}
.produce img{aspect-ratio:3/4;height:auto;width:100%}
.produce span{position:absolute;left:10px;top:10px;background:var(--red);color:#fff;border-radius:50%;
  width:44px;height:44px;display:grid;place-content:center;font-size:15px;font-weight:700}
.produce h3{font-size:clamp(21px,2vw,28px);margin:16px 0 6px}
.produce p{margin:0;font-size:14px;color:var(--soft)}
@media(hover:hover){
  .produce article:hover{transform:translateY(-12px) rotate(-.6deg)}
  .produce article:nth-child(2):hover{transform:translateY(-16px) rotate(.5deg)}
  .produce article:nth-child(3):hover{transform:translateY(-20px) rotate(-.4deg)}
}
.today-note{margin:clamp(26px,3vw,40px) 0 0;max-width:44em;font-size:14px;line-height:2;color:var(--soft)}

/* ============================ 朝の時間割(新設)=========================== */
.morning{background:var(--ink);color:var(--on-ink);padding:clamp(64px,11vh,130px) 0}
.morning .eyebrow{color:var(--soft-on-ink)}
.morning .lead{color:var(--on-ink);margin-top:clamp(14px,1.6vw,22px)}
.rail{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-ink)}
.rail{row-gap:clamp(30px,3.4vw,48px)}
.rail li{position:relative;padding:clamp(26px,2.6vw,38px) clamp(14px,1.6vw,24px) 0 0}
.rail li::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 4px var(--ink)}
.rail li:last-child::before{background:var(--on-ink)}
.rail b{display:block;font:clamp(24px,2.5vw,34px)/1 var(--brush);color:var(--soft-on-ink);letter-spacing:.02em}
.rail h3{margin:12px 0 8px;font-size:clamp(17px,1.7vw,21px)}
.rail p{margin:0;font-size:14px;line-height:1.95;color:var(--soft-on-ink)}

/* ============================ つくる人 ==================================== */
.farmer{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:#fff}
.farmer-copy{padding:clamp(48px,8vw,110px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.farmer-copy .eyebrow{color:#d6e6cf}
.farmer-copy h2{margin:0 0 clamp(18px,2vw,28px)}
.farmer-copy>p:not(.eyebrow){line-height:1.95;max-width:32em;font-size:15.5px}
.farmer-copy a{display:inline-block;border-bottom:1px solid;padding:10px 0;margin-top:14px;
  transition:padding-left .3s var(--ease)}
@media(hover:hover){.farmer-copy a:hover{padding-left:8px}}
.farmer figure{margin:0;overflow:hidden}

/* ============================ 数字(新設)================================= */
.numbers{padding:clamp(64px,11vh,130px) 0}
.nums{list-style:none;margin:clamp(36px,4.5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.nums li{border-top:2px solid var(--ink);padding-top:16px}
.nums b{display:block;font:clamp(44px,5.4vw,80px)/1.05 var(--brush);letter-spacing:-.01em}
.nums span{display:block;margin-top:6px;font-size:13px;color:var(--soft);line-height:1.7}
.nums-note{margin:clamp(26px,3vw,40px) 0 0;max-width:44em;font-size:14px;line-height:2;color:var(--soft)}

/* ============================ 場所 ======================================== */
.places{background:var(--bg2);padding:clamp(64px,12vh,140px) 0}
.place-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,60px)}
.places article{padding:clamp(26px,3vw,46px);background:var(--bg);border:1px solid var(--rule)}
.places article b{display:block;font:clamp(38px,4.4vw,60px)/1 var(--brush);color:var(--red)}
.places h3{margin:12px 0 18px;font-size:clamp(16px,1.5vw,19px);letter-spacing:.08em}
.place-when{margin:0;font:clamp(20px,2vw,26px)/1.3 var(--brush)}
.place-where{margin:12px 0 18px;font-size:14.5px}
.place-note{margin:0;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.95;color:var(--soft)}

/* ============================ はじめての方へ(新設)======================= */
.first{padding:clamp(64px,11vh,130px) 0}
.tips{list-style:none;margin:clamp(34px,4vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,34px)}
.tips li{padding-top:18px;border-top:1px solid var(--rule)}
.tips b{display:block;font:600 12.5px/1 var(--body);letter-spacing:.2em;color:var(--soft)}
.tips h3{margin:14px 0 10px;font-size:clamp(18px,1.8vw,23px)}
.tips p{margin:0;font-size:14.5px;line-height:1.95;color:var(--soft)}

/* ============================ 市場だより ================================== */
.market-contact{padding:clamp(64px,12vh,140px) 0;background:var(--red);color:#fff}
.market-contact .eyebrow{color:#fff}
.market-contact h2{margin:0 0 clamp(18px,2vw,28px)}
.market-contact .lead{color:#fff}
.market-contact a{display:inline-block;background:#f3ead8;color:#301e14;padding:16px 24px;margin-top:clamp(24px,3vw,40px);
  transition:transform .3s var(--ease),background .3s var(--ease)}
@media(hover:hover){.market-contact a:hover{transform:translateX(5px);background:#fff}}

footer{padding:28px 4vw;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;font-size:12.5px}


/* ============================ 旬のこよみ(新設)=========================== */
.season{background:var(--bg2);padding:clamp(64px,11vh,130px) 0}
.cal{margin-top:clamp(36px,4.5vw,64px)}
/* ★上に 16px 空ける。「今週」の丸をここへ逃がす(空けないと月の数字 7 に重なる) */
.cal{padding-top:16px}
.cal-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  /* ★行の隙間 14px を足さないと、月見出しが帯より 14px 左へずれる(実測) */
  margin-left:calc(var(--cal-label) + 14px);
  font-size:12px;letter-spacing:.04em;color:var(--soft);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.cal-head span{text-align:center}
.cal-rows{list-style:none;margin:0;padding:0}
.cal-rows li{display:grid;grid-template-columns:var(--cal-label) 1fr;align-items:center;
  gap:0 14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.cal-rows b{font-weight:400;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-rows i{grid-column:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:20px}
.cal-rows i::after{content:"";grid-column:var(--a)/var(--b);background:#c9b48d;border-radius:2px;
  transform:scaleX(0);transform-origin:left center}
.cal-rows .is-now i::after{background:var(--red)}
.cal-rows .is-now b{color:var(--red)}
.cal.seen i::after{animation:calGrow .9s var(--ease) forwards}
.cal.seen li:nth-child(2) i::after{animation-delay:.08s}
.cal.seen li:nth-child(3) i::after{animation-delay:.16s}
.cal.seen li:nth-child(4) i::after{animation-delay:.24s}
.cal.seen li:nth-child(5) i::after{animation-delay:.32s}
.cal.seen li:nth-child(6) i::after{animation-delay:.40s}
@keyframes calGrow{to{transform:scaleX(1)}}
.cal-note{margin:18px 0 0;font-size:13.5px;color:var(--soft)}
:root{--cal-label:112px}
@media(max-width:720px){:root{--cal-label:78px}.cal-rows b{font-size:12.5px}}

/* ============================ 畑からの距離(新設)========================= */
.distance{padding:clamp(64px,11vh,130px) 0}
.rings-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);
  gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(34px,4vw,58px)}
.rings{margin:0}
.rings svg{width:100%;height:auto;max-width:520px}
.rings .rg{fill:none;stroke:var(--rule);stroke-width:1.4}
.rings .rg-last{stroke:#c9b48d;stroke-dasharray:5 7}
.rings .rg-core{fill:var(--red)}
.rings .farms circle{fill:var(--green)}
.rings figcaption{margin-top:14px;font-size:13px;line-height:1.9;color:var(--soft);max-width:34em}
.ring-key{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ring-key li{padding:14px 0;border-top:1px solid var(--rule);display:grid;
  grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:baseline}
.ring-key b{font:clamp(20px,1.9vw,26px)/1 var(--brush);color:var(--red)}
.ring-key span{font-size:13.5px;line-height:1.9;color:var(--soft)}
/* 輪が内側から広がる / 畑の点が順に灯る */
.rings.seen .rg{animation:ringOut .8s var(--ease) backwards}
.rings.seen .rg:nth-of-type(2){animation-delay:.1s}
.rings.seen .rg:nth-of-type(3){animation-delay:.2s}
.rings.seen .rg:nth-of-type(4){animation-delay:.3s}
@keyframes ringOut{from{transform:scale(.72);opacity:0}}
.rings .farms circle{transform-box:fill-box;transform-origin:50% 50%}
.rings.seen .farms circle{animation:farmPop .5s var(--ease) backwards}
@keyframes farmPop{from{transform:scale(0)}}
.rings.seen .farms circle:nth-child(3n){animation-delay:.30s}
.rings.seen .farms circle:nth-child(3n+1){animation-delay:.42s}
.rings.seen .farms circle:nth-child(3n+2){animation-delay:.54s}
@media(max-width:820px){.rings-wrap{grid-template-columns:minmax(0,1fr)}.rings svg{max-width:420px;margin-inline:auto}}

/* ============================ 雨の日は(新設)============================= */
.rain{background:var(--ink);color:var(--on-ink);padding:clamp(64px,11vh,130px) 0}
.rain .eyebrow{color:var(--soft-on-ink)}
.rain .lead{color:var(--on-ink)}
.weather{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(36px,4.5vw,64px)}
.weather article{background:var(--ink2);padding:clamp(22px,2.4vw,34px)}
.wx{margin:0 0 18px}
.wx svg{width:100%;height:auto;max-width:150px}
.wx path,.wx circle{fill:none;stroke:var(--soft-on-ink);stroke-width:2.4;stroke-linecap:round}
.wx .wx-sun{fill:none;stroke:var(--red)}
.wx .wx-roof,.wx .wx-post{stroke:var(--on-ink)}
.wx .wx-rain path{stroke:var(--red)}
.wx .wx-box{stroke:var(--red)}
.weather h3{margin:0 0 10px;font-size:clamp(17px,1.7vw,21px)}
.weather p{margin:0;font-size:14px;line-height:1.95;color:var(--soft-on-ink)}
.rain-note{margin:clamp(26px,3vw,40px) 0 0;font-size:14px;line-height:2;color:var(--soft-on-ink);max-width:44em}
/* 光条が回る / 雨が落ちる */
.wx .wx-ray{transform-box:fill-box;transform-origin:50% 50%}
.rise.seen .wx-ray{animation:rayTurn 22s linear infinite}
@keyframes rayTurn{to{transform:rotate(360deg)}}
.rise.seen .wx-rain path{animation:rainFall 1.5s linear infinite}
.rise.seen .wx-rain path:nth-child(2){animation-delay:.3s}
.rise.seen .wx-rain path:nth-child(3){animation-delay:.6s}
.rise.seen .wx-rain path:nth-child(4){animation-delay:.15s}
.rise.seen .wx-rain path:nth-child(5){animation-delay:.45s}
@keyframes rainFall{0%{transform:translateY(-6px)}100%{transform:translateY(10px)}}
@media(max-width:820px){.weather{grid-template-columns:minmax(0,1fr)}}

/* ---- 数字が下から立ち上がる(既存の節に動きを足す)---------------------- */
.nums li.seen b{animation:numRise .7s var(--ease) backwards}
.nums li.seen:nth-child(2) b{animation-delay:.09s}
.nums li.seen:nth-child(3) b{animation-delay:.18s}
.nums li.seen:nth-child(4) b{animation-delay:.27s}
@keyframes numRise{from{transform:translateY(.28em)}}
.nums li{overflow:hidden}

/* ---- 幌が揺れる(ヒーローの写真の上に朝の川風)-------------------------- */
.market-window::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#fff6 0 6%,transparent 22%);mix-blend-mode:soft-light}
.market-window.seen::after{animation:awning 9s ease-in-out infinite}
@keyframes awning{50%{transform:translateX(4%)}}

/* ---- 時間割の点が順に灯る ------------------------------------------------ */
.rail li.seen::before{animation:dotOn .5s var(--ease) backwards}
.rail li.seen:nth-child(2)::before{animation-delay:.1s}
.rail li.seen:nth-child(3)::before{animation-delay:.2s}
.rail li.seen:nth-child(4)::before{animation-delay:.3s}
.rail li.seen:nth-child(5)::before{animation-delay:.4s}
@keyframes dotOn{from{transform:scale(0)}}


/* ---- 会場の見取り図 ------------------------------------------------------ */
.plan{margin:0 0 18px}
.plan svg{width:100%;height:clamp(96px,11vw,150px)}
.plan path{fill:none;stroke:var(--soft);stroke-width:1.4;vector-effect:non-scaling-stroke}
.plan .pl-river{stroke:#7fa8c4;stroke-width:2}
.plan .pl-river2{stroke:#7fa8c4;stroke-width:1;opacity:.6}
.plan .pl-bank{stroke:var(--rule);stroke-width:1.2}
.plan .pl-roof,.plan .pl-post{stroke:var(--ink);stroke-width:2}
.plan .pl-tents path{stroke:var(--red);stroke-width:1.6;fill:none}
.plan .pl-path{stroke:var(--rule);stroke-dasharray:4 6}
.plan .pl-gate{stroke:var(--green);stroke-width:3}
.plan figcaption{margin-top:10px;font-size:12.5px;line-height:1.8;color:var(--soft)}
/* 川が流れる / テントが順に立つ */
.plan.seen .pl-river2{animation:flow 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}
.plan .pl-river2{stroke-dasharray:14 10}
.plan.seen .pl-tents path{animation:tentUp .45s var(--ease) backwards}
@keyframes tentUp{from{transform:translateY(6px)}}
.plan .pl-tents path{transform-box:fill-box;transform-origin:50% 100%}

/* ---- 写真の器 ------------------------------------------------------------
   ★比を写真に合わせて宣言する。1536x1024 = 3:2 / 1024x1024 = 1:1。
     高さで指定すると幅が変わるたびに比が動き、ある幅で切り捨てが床(40%)を割る。 */
/* ★比は figure ではなく img に乗せる。figure に aspect-ratio + overflow:hidden を
     掛けると、img が高さを使い切って figcaption が切り落とされる(別人格 CT2)。
     同じページの .produce img が既に正しい書き方をしている。そちらに揃える。
   ★.shot-sq をグリッドの項目(.tips / .rail / .weather)の中に入れないこと。
     グリッドは行の高さへ引き伸ばすので、宣言した比が上書きされる(別人格 CT3)。 */
.shot,.shot-sq{margin:0}
.shot img{aspect-ratio:3/2;height:auto;width:100%;object-fit:cover;filter:saturate(1.12)}
.shot-sq img{aspect-ratio:1;height:auto;width:100%;object-fit:cover;filter:saturate(1.12)}
.shot figcaption,.shot-sq figcaption{margin-top:12px;font-size:12.5px;line-height:1.85;color:var(--soft)}
.morning .shot figcaption,.rain .shot figcaption{color:var(--soft-on-ink)}
/* ============================================================================
   出現の演出
   ★opacity と scale(0) は使わない。覆い = clip-path / 持ち上げ = translate。
   ★隠す指定は全部 :where(html.js) の下(詳細度 0)。html.js のままだと
     詳細度で .seen に勝ってしまい、開かなくなる。
   ========================================================================== */
:where(html.js) .wipe{clip-path:inset(0 0 100% 0)}
:where(html.js) .rise{transform:translateY(clamp(14px,2.2vw,28px))}

.wipe{transition:clip-path 1s var(--ease)}
.rise{transition:transform .75s var(--ease)}
.wipe.seen{clip-path:inset(-180px)}
.rise.seen{transform:translateY(0)}

/* 並んでいるものは少しずつ遅らせる(箱は動かさない) */
.produce .rise:nth-child(2),.rail .rise:nth-child(2),.nums .rise:nth-child(2),
.tips .rise:nth-child(2),.place-grid .rise:nth-child(2){transition-delay:.07s}
.produce .rise:nth-child(3),.rail .rise:nth-child(3),.nums .rise:nth-child(3),
.tips .rise:nth-child(3){transition-delay:.14s}
.rail .rise:nth-child(4),.nums .rise:nth-child(4){transition-delay:.21s}
.rail .rise:nth-child(5){transition-delay:.28s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wipe,.rise,.produce article,.market-contact a,.farmer-copy a{transition:none!important}
  :where(html.js) .wipe{clip-path:none}
  :where(html.js) .rise{transform:none}
  .dew{animation:none!important}
  /* ★2026-08-29 critical: 名指しでは必ず漏れる。実測で、後から足した 8 種が
     1 つも入っておらず、reduce の人にだけ 13 本のループが永久に走っていた。
     さらに site.js は reduce のとき画面外停止ごと切るので、逃げ道も無かった。
     だから**全部止める**。ここより後ろに動きを足しても、忘れても効く。 */
  *,*::before,*::after{animation:none!important}
  /* ★ただし旬の帯だけは素の姿が scaleX(0) = 見えない。止めるなら終わりの姿を置く。
     (他の 1 回きりの動きは backwards なので、止めれば終わりの姿で出る) */
  .cal-rows i::after{transform:scaleX(1)}
}

/* ============================================================================
   狭い画面。段組みは全部 1 列へ落とす。
   ========================================================================== */
@media(max-width:1024px){
  .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .tips{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .harvest-head{height:60px}
  .market-hero{padding:44px 0 30px}
  .brush h1{font-size:clamp(42px,11vw,58px)}
  .brush p{font-size:14px}
  .market-window{height:clamp(240px,58vw,340px);margin-top:24px}
  .paper-tag{font-size:16px;padding:14px;right:12px;top:12px}
  .dew{width:250px;height:260px}
  .produce{grid-template-columns:minmax(0,1fr)}
  .rail{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--rule-ink)}
  .rail li{padding:0 0 30px 22px}
  .rail li::before{left:-6px;top:6px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .farmer{grid-template-columns:minmax(0,1fr)}
  .farmer figure{height:clamp(300px,80vw,560px)}
  .place-grid{grid-template-columns:minmax(0,1fr)}
  .market-contact h2{font-size:clamp(40px,11vw,58px)}
  footer{grid-template-columns:minmax(0,1fr)}
  .demo{max-width:calc(100vw - 20px)}
}
@media(max-width:420px){
  .nums{grid-template-columns:minmax(0,1fr)}
}

/* ★.farmer h2 は共有CSS が clamp(44px,5vw,58px) を当てている。これは正しい。
   この節の文章は **半分の幅の段**(幅1440 で内寸 576px)に入るため、他の節と
   同じ 116px にすると見出しが 4 行に折れて緑の面からあふれる(2026-08-29 実測)。
   一度 #main で上書きしたが、実物を見て取り消した。上書きしないこと。 */

/* ============================================================================
   狭い画面での見出しの潰れ止め
   ★共有 shared-quality.css は site.css の**後**に読まれ、`.farmer h2` 等へ
     `font-size:48px!important` を当てている。同じ詳細度では後読みの共有が勝つので、
     `#main` を足して詳細度で上回る(実測でこれ以外に当たらない)。
   ★床 = 社内の定規で 見出し 1 行 4 文字。320px で 3 文字まで潰れていた。
   ========================================================================== */
@media(max-width:480px){
  #main .morning h2,#main .numbers h2,#main .first h2,
  #main .season h2,#main .distance h2,#main .rain h2{font-size:44px!important}
}
@media(max-width:400px){
  #main .today h2,#main .season h2,#main .morning h2,#main .farmer h2,
  #main .distance h2,#main .numbers h2,#main .places h2,#main .rain h2,
  #main .first h2,#main .market-contact h2{font-size:36px!important}
}

/*HEADFIX-20260811*/.harvest-head{justify-content:space-between;gap:16px}.harvest-head>*{min-width:0}.harvest-head button,.harvest-head>a:last-child{flex:0 0 auto;white-space:nowrap}/*/HEADFIX-20260811*/

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  ★2026-08-29: 見出しの既定を 1.25 にしたので下の 3 本は同値の念押しになったが、
    オーナー指示で入った行なので消さない(共有 CSS が後から !important で勝つ経路が残るため)。
*/
html body div#main main section#today.today header h2{line-height:1.25!important}
html body div#main main section#places.places h2{line-height:1.25!important}
html body div#main main section.market-contact h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/* ============================================================================
   画面の外に出た節では、中の動きを丸ごと止める。
   ★2026-08-29 実測で作り直した。前の版は要素を名指しで並べていて 2 通りに壊れていた:
     (1) 動きを足すたびに列挙への追記を忘れる(実測 7 件が回りっぱなし)
     (2) 追記しても勝てない。動かす側が `.rise.seen .wx-ray`(クラス3個)で、
         止める側 `.is-off .wx-ray`(2個)に詳細度で負け、
         animation 一括指定が play-state を running へ戻していた(実測 6 件)。
   だから「節の中の全部」を !important で止める。画面の外なので見た目への影響は無い。
   この 1 本より後ろに動きの指定を足しても、!important に勝てないので忘れても効く。
   ========================================================================== */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* ============================================================================
   繰り返し動くもの(2026-08-29 オーナー指摘「最初だけで後は静止画になってる」)
   出現演出は 1 回で終わる。ここは**内容がループにふさわしい所だけ**を回す。
   画面の外に出たら .is-off の 1 本がまとめて止める(この節に名指しの停止は書かない)。
   ========================================================================== */

/* a. 距離の輪 = 中心から波紋。毎朝、畑から市場へ届いてくること。
      r=9 を 24.6 倍で 221 になり、いちばん外の輪 222 の内側で消える。
      線の太さが一緒に太らないよう vector-effect="non-scaling-stroke" を HTML 側に付けてある。 */
.rings .ping{fill:none;stroke:var(--red);stroke-width:1.4;
  transform-box:fill-box;transform-origin:50% 50%}
.rings.seen .ping{animation:ringPing 5.2s cubic-bezier(.22,.61,.31,1) infinite}
.rings.seen .ping2{animation-delay:2.6s}
@keyframes ringPing{
  0%{transform:scale(1);opacity:.6}
  72%{opacity:0}
  100%{transform:scale(24.6);opacity:0}
}

/* b. 朝の流れ = 時間の線の上を光が左から右へ。04:30 から 12:00 へ進む時間そのもの。
      .rail は出現演出を持たないので .seen を待たずに回す(ループは演出ではなく状態)。 */
.rail{position:relative}
.rail::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 34%,var(--red) 46%,transparent 58%);
  background-size:240% 100%;background-repeat:no-repeat;
  animation:railRun 7.5s linear infinite}
/* 100% -> 0% で光は左から右へ進む(模様が大きいほど位置の%は逆向きに効く) */
@keyframes railRun{from{background-position:100% 0}to{background-position:0% 0}}

/* c. こよみの「今週」= 7 月の中央に縦線。ゆっくり呼吸させて「今はここ」を示す。
      左位置は帯の描画域(ラベル幅 + 隙間 14px)を 12 等分した 7 月目の中央。 */
.cal{position:relative}
.cal-now{position:absolute;top:0;bottom:34px;width:1px;pointer-events:none;
  left:calc(var(--cal-label) + 14px + (100% - var(--cal-label) - 14px) * 6.5 / 12);
  background:var(--red);opacity:.34}
.cal-now i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--red);animation:nowBreath 3.6s ease-in-out infinite}
@keyframes nowBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.75)}}

/* d. 市場だより = 矢印が右へ繰り返し滑る。「受け取る」動作を字で言わずに見せる。 */
.market-contact .arw{display:inline-block;font-style:normal;
  animation:arwSlide 2.4s ease-in-out infinite}
@keyframes arwSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---- はじめての方へ = 正方形の写真 + 三箇条の二段組 ------------------------
   写真が 1:1 なので、横いっぱいに敷くと高さを食いすぎる。左に置いて三箇条を右へ立てる。
   狭い画面では 1 段に落として、写真 -> 三箇条 の順で読ませる。 */
.first-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start;margin-top:clamp(34px,4vw,60px)}
.first-grid .tips{margin-top:0;grid-template-columns:minmax(0,1fr)}
.first-grid .shot-sq{margin-top:6px}
@media(max-width:820px){.first-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- 別人格レビュー(2026-08-29)で見つかった、狭い画面の欠陥 ---------------- */
/* C2: 720px 以下では時間の線が縦並びになり border-top が 0 になる。
       そこへ横向きの光を走らせると、**線が 1 本も無い空間を赤い筋が横切る**。
       縦版を作る値打ちが無いので、狭い画面では出さない。 */
@media(max-width:720px){.rail::after{display:none}}

/* W8: 二段組が解ける 820px 以下で、正方形の写真が 753px 角まで膨らんで画面を丸ごと食う
       (実測 w=819 -> 753×753)。上の注記で自分が禁じたことを、折り返し先でやっていた。 */
@media(max-width:820px){
  .first-grid .shot-sq{width:min(420px,72vw);margin-inline:auto}
}

/* ---- 見出しの折り返しを、作者が宣言した位置だけに戻す ----------------------
   2026-08-29 別人格レビュー W5 + オーナー直接指摘(2026-08-25)。
   ★実測してから直せ。字が大きすぎるように見えて、**器が 1〜3px 足りないだけ**だった。
     生産者の見出し: 幅1280 = 2行目に必要 515px / 器 512px。幅480 = 427/424。幅375 = 320/319。
     .farmer h2 の 58px は半幅の柱に対して正しい(過去に小さくして悪化させた)。字は触らない。 */
.farmer-copy{padding-inline:clamp(20px,4.4vw,64px)}
/* ★真因 = 字は画面の幅で決まるのに、この見出しが立っているのは**半幅の柱**。
   768px で 2 段組になった瞬間、器だけ半分になり 768〜1200 で必ずあふれる(実測 10 幅)。
   だから柱の幅に紐づける。2 行目は 8.9 字ぶん要るので 1 字は柱の 11% まで。
   1280px 以上では 58px で頭打ち = **オーナーが見た広い画面の見た目は 1px も動かない**。 */
.farmer-copy{container-type:inline-size}
/* ★#main と !important が要る。共有 CSS が後から
   `.farmer h2{font-size:clamp(44px,5vw,58px)!important}` を当てているため、
   これを付けないと **1 文字も効かない**(実測で確認済み)。 */
#main .farmer-copy h2{font-size:min(58px,11cqw)!important}

/* 狭い画面の 3 つの見出し。器はどれも 92vw なので、1 行に n 字入れるには 1 字 <= 92/n [vw]。
   実測の必要字数 = 数字「数えられるものだけ、」10 字 / 今週「今週、並ぶもの。」8 字 /
   市場だより「木曜の夕方に。」7 字。境目ぴったりだと行き来するので少し小さく取る。 */
@media(max-width:560px){
  #main .numbers h2{font-size:min(8.9vw,44px)!important}
  #main .today h2{font-size:min(11.2vw,52px)!important}
  #main .market-contact h2{font-size:min(11vw,44px)!important}
}