/* 見本（動き・静止クッカー型）の差分 CSS（設計 memory/2026-10-23_grill-me_offer-motion-fan-door-vs-static-cooker.md・ユーザー「問B 1,2,3 問D 1,2」2026-10-23）
   出荷の面 ../index.html は触らない。各ページは body の class（m-fan5／m-fan1／m-door／m-cooker）で分岐。
   動きの約束（前提 8・9）: 1 回だけ・1 秒以内・prefers-reduced-motion で無し・タップで終わる（motion.js）・hero の絵は opacity 0 から始めない（LCP [文書 shopify.dev]）。
   html.no-motion（#motion=0）＝最終状態で止まった面（検問 23・撮影）。reduced-motion も同じ面 */

/* --- 扇（案1・問D 1＝5 膳／2＝1 膳）: 包装の写真（../img/ohashi-pkg.png 178×1200）を背景に＝<img> は増やさない（検問 5 は包装の img を 1 枚と数える） --- */
.product-panel>.fan{grid-column:1/-1;margin:0 0 6px;width:100%}
.m-fan5 .r1-side,.m-fan1 .r1-side,.m-fan5s .r1-side,.m-fan1s .r1-side,.m-fan5u .r1-side,.m-fan5v .r1-side,.m-fan5w .r1-side{grid-row:4/span 4}   /* 先頭に扇の行が入る＝瓶の行を 1 つ下げる（styles.css の 3/span 4 と対） */
.fan-sticks{position:relative;width:100%}
.fan-5 .fan-sticks{height:250px}
.fan-1 .fan-sticks{height:300px}
.fan-stick{position:absolute;left:50%;bottom:0;transform-origin:50% 100%;background:url("../img/ohashi-pkg.png") center/contain no-repeat;transform:rotate(var(--a));filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.fan-5 .fan-stick{width:34px;height:230px;margin-left:-17px}
.fan-1 .fan-stick{width:44px;height:296px;margin-left:-22px}
.fan-5 .fan-stick:nth-child(1){--a:-40deg;--d:0s}
.fan-5 .fan-stick:nth-child(2){--a:-20deg;--d:.06s}
.fan-5 .fan-stick:nth-child(3){--a:0deg;--d:.12s}
.fan-5 .fan-stick:nth-child(4){--a:20deg;--d:.18s}
.fan-5 .fan-stick:nth-child(5){--a:40deg;--d:.24s}
.fan-1 .fan-stick{--a:-8deg;--d:0s}
.fan figcaption.micro{margin-top:6px}
/* JS あり: 閉じた状態から開く（1 回・.8 秒）。JS なし: 最初から開いた状態（上の transform） */
.js .fan-5:not(.is-open) .fan-stick{transform:rotate(0deg)}
.js .fan-1:not(.is-open) .fan-stick{transform:rotate(-78deg)}
.js .fan-5.is-open .fan-stick{animation:fan5-open .8s cubic-bezier(.2,.8,.3,1.08) var(--d) both}
.js .fan-1.is-open .fan-stick{animation:fan1-open .9s cubic-bezier(.3,.7,.3,1) both}
@keyframes fan5-open{from{transform:rotate(0deg)}to{transform:rotate(var(--a))}}
@keyframes fan1-open{0%{transform:rotate(-78deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(var(--a))}}

/* --- 観音開き（案2・言い換え後）: hero の絵の上に 2 枚の扉を被せ、読み込みから .25 秒後に左右へ開く（.7 秒）。絵は .93→1 に拡大・.65→1（0 からは始めない） --- */
.m-door .hero-pair,.m-door2 .hero-pair,.m-door3 .hero-pair{overflow:hidden}
.door{position:absolute;top:0;width:50%;aspect-ratio:1/2;background:var(--red);z-index:2;pointer-events:none;animation:door-open .7s cubic-bezier(.65,0,.3,1) .25s both}
.door-l{left:0;--x:-100%;box-shadow:inset -1px 0 0 rgba(255,255,255,.35)}
.door-r{right:0;--x:100%}
.m-door .hero-img-1,.m-door2 .hero-img-1,.m-door3 .hero-img-1{animation:hero-in 1s ease-out .25s both}   /* 2026-10-24: door2・door3 に当たっていなかった（ユーザー「拡大とfadeがなくなっていた」） */
@keyframes door-open{0%{transform:none;opacity:1}70%{opacity:1}100%{transform:translateX(var(--x));opacity:0;visibility:hidden}}
@keyframes hero-in{from{transform:scale(.93);opacity:.65}to{transform:none;opacity:1}}

/* --- 止まった面（#motion=0・reduced-motion）＝最終状態。検問 23 と撮影はこの面 --- */
.no-motion .door{display:none!important}
.no-motion .hero-img,.no-motion .fan-stick{animation:none!important}
.no-motion .fan-stick{transform:rotate(var(--a))!important}
@media(prefers-reduced-motion:reduce){.door{display:none!important}.hero-img,.fan-stick{animation:none!important}.fan-stick{transform:rotate(var(--a))!important}}

/* --- 静止のクッカー型（案3）: 受験生応援の段を赤の全面＋袋文字＋瓶を大きく。字は HTML のまま（検問 BANNED・12px・文節が効く）。
   訴求÷条件 ≤ 2（検問 1・#offer の条件の最小は terms-list の 12px）＝h3 の上限 24px [観察 2026-10-23: 30px は 2.50 で NG]。クッカーの 70px 級の袋文字はこの規則の外 --- */
.m-cooker .product-panel{background:var(--red);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.m-cooker .product-panel::before,.m-cooker .product-panel::after{content:"";position:absolute;z-index:-1;border-radius:10px}
.m-cooker .product-panel::before{width:130px;height:130px;background:#2a5db0;transform:rotate(16deg);right:-46px;top:64px}
.m-cooker .product-panel::after{width:96px;height:96px;background:#2fa36b;transform:rotate(-22deg);left:-34px;bottom:118px}
.m-cooker .pending-tag{background:#fff;color:var(--red);border-color:#fff;font-weight:700}
.m-cooker .product-panel p,.m-cooker .tag-note{color:#fff}
.m-cooker .product-word{color:#fff}
.m-cooker .product-panel h3{font-size:24px;line-height:1.3;color:#ffe14d;font-weight:900;paint-order:stroke fill;-webkit-text-stroke:6px #7a0f18;text-shadow:0 3px 0 #7a0f18}
.m-cooker .product-panel p.offer-condition{font-size:15px;color:#fff;background:#7a0f18;padding:6px 10px;border-radius:4px;display:inline-block;margin-top:12px}
.m-cooker .r1-side{height:200px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
/* 2026-10-25（ユーザー「月額3,000円以上・ の・は不要で 4ヶ月以上のご契約が条件 で1行に…2行になるように」「明治の宅配専用商品をお届けします。 も一行にできるレイアウトで」）:
   瓶を R-1 と h3 の横だけに（3/span 2）、条件と句を瓶の下で全幅に。条件は .nb ごとに 1 行（「・」は make_motion で外す）。直す前は 390px で列 186px＝条件 3 行・句 2 行 [観察]。検問 20 */
.m-cooker .r1-side{grid-row:3/span 2}
.m-cooker .product-panel>p.offer-condition,.m-cooker .product-panel>p.offer-lead{grid-column:1/-1}
.m-cooker .product-panel>p.offer-condition{justify-self:start}
.m-cooker .offer-condition .nb{display:block}
/* 2026-10-26 扇の枠（設計 memory/2026-10-26_grill-me_fan-out-of-red.md 問 1「2」問 2「1」・ユーザー「別ページのデザインのままで別領域で設置したい」）: all・plum の扇は赤い段（.product-panel）の外の枠＝fan.html と同じクリームの地・灰の説明。
   赤い段は札から始まる＝motion/cooker.html と同じ並び（上の 3/span 2 のまま）。余白は .product-panel と同じ 35px／25px（.fan-5v の棒の箱は余白 25px ぶん外へ広がる） */
.fan-area{background:var(--cream);padding:35px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px}
.fan-area>.fan{margin:0}
@media(max-width:700px){.fan-area{padding:25px}}

/* --- 2026-10-23 夜 5 追加（ユーザー「doorについては ドアのテクスチャに明治牛乳だったりR-1だったりの文字があった方が良いのではと父親からアドバイス」「お箸の扇ですが、孔雀のように開くのと、最後に日の出が昇って目立つ感じ」）
   元の fan5・fan1・door は残す（作る依頼は追加）。扉の字は社長が了解済みの語だけ＝「R-1」「明治の宅配」（広告の絵 #276・署名 #246。「明治牛乳」は台帳に無い語＝使わない） --- */
/* 扇・孔雀（fan5s）: 5 本を −68〜+68° に大きく開く（中央から外へ）。棒は 160px＝開いた幅 297px が panel の中に収まる（390px） */
.fan-5s .fan-sticks,.fan-5u .fan-sticks,.fan-5v .fan-sticks{height:290px;overflow:hidden}
.fan-5s .fan-sticks,.fan-5u .fan-sticks,.fan-5v .fan-sticks{margin-left:-25px;margin-right:-25px;width:calc(100% + 50px)}   /* 棒の箱だけ広げる（figure ごと広げると説明の字が左端に寄った [観察 2026-10-24]） */   /* 2026-10-24 panel の余白いっぱい＝350px（ユーザー「fan1s くらい近くてもいい 商品が大きい方がいい」） */   /* overflow:hidden＝下の縁が地平線（日の出の下半分を隠す） */
.fan-5s .fan-stick,.fan-5u .fan-stick,.fan-5v .fan-stick{width:36px;height:240px;margin-left:-18px;z-index:1}   /* 2026-10-24 ユーザー「端のお箸が切れている…切れない範囲で最大」: 回した棒の半幅＝h·sin42°＋(w/2)·cos42° ≤ 175（箱 350px の半分）→ h 240・w 36 で 174.0px。前の 260×40 は 189px＝端が 14px 切れていた。±68° のままなら棒は 189px が上限（別の式） */
.fan-5s .fan-stick:nth-child(1),.fan-5u .fan-stick:nth-child(1),.fan-5v .fan-stick:nth-child(1){--a:-42deg;--d:.16s}
.fan-5s .fan-stick:nth-child(2),.fan-5u .fan-stick:nth-child(2),.fan-5v .fan-stick:nth-child(2){--a:-21deg;--d:.08s}
.fan-5s .fan-stick:nth-child(3),.fan-5u .fan-stick:nth-child(3),.fan-5v .fan-stick:nth-child(3){--a:0deg;--d:0s}
.fan-5s .fan-stick:nth-child(4),.fan-5u .fan-stick:nth-child(4),.fan-5v .fan-stick:nth-child(4){--a:21deg;--d:.08s}
.fan-5s .fan-stick:nth-child(5),.fan-5u .fan-stick:nth-child(5),.fan-5v .fan-stick:nth-child(5){--a:42deg;--d:.16s}
.js .fan-5s:not(.is-open) .fan-stick,.js .fan-5u:not(.is-open) .fan-stick,.js .fan-5v:not(.is-open) .fan-stick{transform:rotate(0deg)}
.js .fan-5s.is-open .fan-stick,.js .fan-5u.is-open .fan-stick,.js .fan-5v.is-open .fan-stick{animation:fan5-open .8s cubic-bezier(.2,.8,.3,1.08) var(--d) both}
/* 1 膳＋日の出（fan1s） */
.fan-1s .fan-sticks{height:300px;overflow:hidden}
.fan-1s .fan-stick{width:44px;height:296px;margin-left:-22px;--a:-8deg;--d:0s;z-index:1}
.js .fan-1s:not(.is-open) .fan-stick{transform:rotate(-78deg)}
.js .fan-1s.is-open .fan-stick{animation:fan1-open .9s cubic-bezier(.3,.7,.3,1) both}
/* 日の出: 棒の後ろの円（金→橙）が地平線（箱の下端）から昇る。放射の線は入れない（旭日の形に読まれる恐れ [推測]）。最終＝中心が下端の 46px 上 */
.fan-sun{position:absolute;left:50%;bottom:-100px;width:200px;height:200px;margin-left:-100px;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 40%,#fff3b0 0,#ffd23f 38%,#ff9b2f 70%,#f26a3d 100%);box-shadow:0 0 40px 12px rgba(255,190,70,.55);transform:translateY(0)}
.fan-5s .fan-sun{bottom:-110px}
/* 日の出が上まで昇って止まる版（fan5u・ユーザー「上に上がっていって止まるパターンもいいかも」2026-10-24）: 円の全体が棒の後ろに出て止まる＝最終は bottom 50px（transform は等倍のまま＝検問 23） */
.fan-5u .fan-sun,.fan-5v .fan-sun{top:0;bottom:auto;width:190px;height:190px;margin-left:-95px}   /* 2026-10-24 ユーザー「エリアの上限まで日の出をもっていけないか」＝箱の上端で止まる */
.js .fan.fan-5u:not(.is-open) .fan-sun,.js .fan.fan-5v:not(.is-open) .fan-sun{transform:translateY(150%);opacity:0}   /* .fan を足して強さを上げる＝後ろの汎用 .js .fan.is-open .fan-sun（.7 秒）に上書きされていた [観察 2026-10-24 t:700 で fan5v＝fan5u 画素差 0] */
.js .fan.fan-5u.is-open .fan-sun{animation:sun-up 1.2s cubic-bezier(.2,.7,.2,1) .7s both}
/* fan5v（ユーザー「お箸が開くのと同時に…開いて 20% のところで日の出が昇るアニメーションが始まる」2026-10-24）: 棒の開き .8 秒の 20%＝.16 秒後に日の出（終点は fan5u と同じ上端） */
.js .fan.fan-5v.is-open .fan-sun{animation:sun-up 1.2s cubic-bezier(.2,.7,.2,1) .16s both}
@keyframes sun-up{from{transform:translateY(150%);opacity:0}25%{opacity:1}to{transform:translateY(0);opacity:1}}
.js .fan:not(.is-open) .fan-sun{transform:translateY(110%);opacity:0}
.js .fan.is-open .fan-sun{animation:sun-rise .9s cubic-bezier(.2,.7,.2,1) .7s both}
@keyframes sun-rise{from{transform:translateY(110%);opacity:0}30%{opacity:1}to{transform:translateY(0);opacity:1}}
.no-motion .fan-sun{animation:none!important;transform:translateY(0)!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.fan-sun{animation:none!important;transform:translateY(0)!important;opacity:1!important}}
/* 扉に字（door2）: 左「R-1」右「明治の宅配」＝白の大きい字（HTML・開くと扉ごと消える）。字は検問 23 の DOOR_WORDS と照合 */
.door{display:flex;align-items:center;justify-content:center}
.door-word{color:#fff;font-weight:800;letter-spacing:.04em;line-height:1.1;text-align:center;font-family:Arial,"Hiragino Kaku Gothic ProN",sans-serif;text-wrap:balance}
.door-l .door-word{font-size:clamp(48px,16vw,96px)}
.door-r .door-word{font-size:clamp(22px,7vw,40px);writing-mode:vertical-rl;letter-spacing:.2em}
/* 扉に模様（door3）: 「R-1」「明治の宅配」を斜めに敷き詰めた SVG の背景（data: は CSP img-src が許す）。字は絵の中＝床は 10px の側（#159）・ここでは 14px */
.m-door3 .door{background-color:var(--red);background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195 130'%3E%3Cg fill='%23ffffff' fill-opacity='0.3' font-family='Arial,Hiragino Kaku Gothic ProN,sans-serif' font-weight='700' text-anchor='middle' dominant-baseline='middle'%3E%3Ctext x='58' y='42' font-size='24' transform='rotate%28-18 58 42%29'%3ER-1%3C/text%3E%3Ctext x='122' y='92' font-size='16' transform='rotate%28-18 122 92%29'%3E%E6%98%8E%E6%B2%BB%E3%81%AE%E5%AE%85%E9%85%8D%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:100% 33.3334%;background-repeat:repeat}   /* 2026-10-24: tile を扉の幅に合わせ 3 段＝字が扉の縁でも tile の縁でも切れない（ユーザー「R-1の文字が切れていたり潰れていたり」） */
/* 花びら版（案3b cooker-petal・設計 memory/2026-10-25_grill-me_cooker-look-copyright.md・ユーザー「1と2だと思います。花びらのバージョンも作って比べられるようにするのがいいかも」2026-10-25）:
   cooker の正方形 2 つ（上の ::before・::after）と同じ大きさ・位置・角度・色のまま、形だけ札のアイコン（../index.html の .pending-tag の svg）の花びら 1 枚に。
   viewBox は path の外接箱（11.694〜20.306 × 4.440〜16.000 を 3 桁で）＝箱の高さいっぱい。data: は CSP img-src が許す（door3 と同じ） */
.m-petal .product-panel::before,.m-petal .product-panel::after{border-radius:0;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11.694 4.44 8.612 11.56'%3E%3Cpath d='M16 16C13 12.5 10.5 9.5 12.3 5.6c.9-1.9 2.6-1.3 3.7.6 1.1-1.9 2.8-2.5 3.7-.6C21.5 9.5 19 12.5 16 16Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11.694 4.44 8.612 11.56'%3E%3Cpath d='M16 16C13 12.5 10.5 9.5 12.3 5.6c.9-1.9 2.6-1.3 3.7.6 1.1-1.9 2.8-2.5 3.7-.6C21.5 9.5 19 12.5 16 16Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* --- 本の表紙（案4 book・案4b book-ema・設計 memory/2026-10-25_grill-me_offer-book-cover.md 案 A・ユーザー「本のようにめくるアニメーションで開けないでしょうか」「花びらや合格祈願などR-1のシルエット」2026-10-25）
   ご契約特典の箱（.offer-with-photo）に硬い表紙 1 枚を重ね、中央の帯に来たら左の辺を軸にめくれて消える（motion.js の data-open=center・.9 秒・1 回）。
   表紙に注記は置かない＝閉じている間だけ #207 を覆す（前提 2）。覆す範囲は見本の book・book-ema から社長に見せる hurdle/all.html の表紙 1 枚へ広がった（2026-10-25 設計 car-on-present-pages 前提 5・理由はユーザーの「しまらなくなりそう」#349 のまま）→ JS の無い面・止めた面（motion=0・reduced-motion）では表紙を出さない＝箱 2 は今と同じ。
   置き場は自分の箱（knowledges 2026-10-25）: inset:0＝箱の padding の箱にぴったり（左の赤い線が背）。door の aspect-ratio は継がない。
   模様は data: の SVG（CSP img-src が許す＝door3 と同じ）: 札の桜（../index.html の .tag-icon の path）と自分で描いた瓶の外形を薄く。字は包装の語「合格祈願」だけ --- */
.m-book .offer-with-photo{position:relative;perspective:1400px}
.book-cover{display:none}
.js .book-cover{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:3;pointer-events:none;transform-origin:0 50%;backface-visibility:hidden;border-radius:0 6px 6px 0;
  background-color:var(--red);background-image:linear-gradient(90deg,rgba(60,0,8,.38),rgba(60,0,8,0) 16px),url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='p' d='M16 16C13 12.5 10.5 9.5 12.3 5.6c.9-1.9 2.6-1.3 3.7.6 1.1-1.9 2.8-2.5 3.7-.6C21.5 9.5 19 12.5 16 16Z'/%3E%3C/defs%3E%3Cg fill='%23f6c1cf' fill-opacity='.42'%3E%3Cg transform='translate%286 6%29 scale%28.9%29'%3E%3Cuse href='%23p' transform='rotate%280 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%2872 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28144 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28216 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28288 16 16%29'/%3E%3C/g%3E%3Cuse href='%23p' transform='translate%2870 4%29 rotate%2828 16 16%29'/%3E%3Cuse href='%23p' transform='translate%2818 74%29 rotate%28-40 16 16%29'/%3E%3Cg transform='translate%2892 92%29 scale%28.5%29'%3E%3Cuse href='%23p' transform='rotate%280 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%2872 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28144 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28216 16 16%29'/%3E%3Cuse href='%23p' transform='rotate%28288 16 16%29'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M7 0h6v5H7zM8 5h4v4c0 2 5 4 5 9v23c0 2-1 3-3 3H6c-2 0-3-1-3-3V18c0-5 5-7 5-9z' fill='%23ffffff' fill-opacity='.2' transform='translate%2872 50%29 scale%281.05%29'/%3E%3C/svg%3E");background-size:100% 100%,120px 120px;
  box-shadow:inset 0 0 0 9px var(--red),inset 0 0 0 11px #e3b85c,0 8px 18px rgba(60,0,8,.28)}
.book-title{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;white-space:nowrap;font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-weight:700;
  font-size:44px;letter-spacing:.2em;color:#ffe14d;paint-order:stroke fill;-webkit-text-stroke:6px #7a0f18;text-shadow:0 3px 0 #7a0f18}
.book-ema .book-title{width:160px;height:232px;padding:78px 0 24px;letter-spacing:.1em;font-size:28px;color:#3a1d0c;-webkit-text-stroke:0;text-shadow:none;
  filter:drop-shadow(0 4px 6px rgba(60,0,8,.35))}   /* 絵馬＝五角の板＋紐（差はこの 1 点） */
.book-ema .book-title,.m-plum .site-header .button.small.plum-seat{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M45 31C37 -1 63 -1 55 31' fill='none' stroke='%23d0202e' stroke-width='3'/%3E%3Cpath d='M50 14 96 42V124H4V42Z' fill='%23f1d29b' stroke='%238a5a2b' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M50 21 89 45V117H11V45Z' fill='none' stroke='%23c79a5a' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='31' r='3.2' fill='%238a5a2b'/%3E%3C/svg%3E") center/contain no-repeat;}   /* 絵馬の絵（五角の板・赤い紐の輪・木の色・縁）＝表紙と幹に座るボタン（設計 ema-apply-button §6-5）で共有 */
.js .book-cover.is-open{animation:book-open .9s cubic-bezier(.55,.05,.35,1) both}
@keyframes book-open{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg);visibility:hidden}}
.no-motion .book-cover{display:none!important}
@media(prefers-reduced-motion:reduce){.book-cover{display:none!important}}

/* --- 車（hurdle/car.html・幅 96px＝80・96・112 を 390／360 で撮って選んだ（80 は窓と車輪がつぶれ、112 は見出しと張り合う [観察 2026-10-25]）・設計 memory/2026-10-25_grill-me_delivery-van-and-cold-box-icon.md 問 1・ユーザー「写真の画像を元にデフォルメの車がいいです」「推薦」2026-10-25）
   「お届けまでの流れ。」の上の道（.car-road・罫は .area-note と同じ色）に、右の画面の外から白い軽バン（鼻は左）が来て、減速して h2 の頭の上で止まる（.9 秒・1 回・中央の帯 data-open=center）。
   来る間は #delivery の外へ出る＝overflow-x:clip（はみ出しを scrollWidth に出さない＝検問 23 の車は画面の幅を自分で測る）。JS なし・止めた面＝最初から止まった車
   長さを並べる 2 ページ（car-16.html 1.6 秒・car-24.html 2.4 秒・設計 memory/2026-10-25_grill-me_car-speed-compare.md 問 1・ユーザー「問1 推薦 Approve」2026-10-25）: 長さと曲線は変数だけ上書き。
   曲線は一定の速さで来て最後の 3 割でブレーキ（前の曲線は 300ms で 82% 進む＝長さだけ延ばしても飛び出しが残る・設計 前提 2）。
   動きの約束「1 秒以内」（冒頭）を外すのは hurdle/car*.html と社長に見せる hurdle/all.html（2026-10-25 設計 car-on-present-pages 前提 4・car-16 と同じ 1.6 秒）の車 1 台だけ（前提 3: 車は字を隠さず待たせる物が無い [推測]）。扇・扉・本の表紙は 1 秒以内のまま --- */
.m-car{--car-w:96px;--car-dur:.9s;--car-ease:cubic-bezier(.2,.75,.25,1)}
.m-car.m-car16{--car-dur:1.6s;--car-ease:cubic-bezier(.3,.35,.35,1)}
.m-car.m-car24{--car-dur:2.4s;--car-ease:cubic-bezier(.3,.35,.35,1)}
.m-car #delivery{overflow-x:clip}
.car-road{grid-column:1/-1;position:relative;height:calc(var(--car-w) * 62 / 120);margin:0 0 14px;border-bottom:1px solid #cdcfbf}
.car{position:absolute;left:0;bottom:0;width:var(--car-w);aspect-ratio:120/62;height:auto;display:block;overflow:visible}
.car-shell{fill:#fff;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.car-glass{fill:#d5e4ea;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.car-line{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.car-lamp{fill:#ffd96a;stroke:var(--ink);stroke-width:1.2}
.car-tire{fill:var(--ink)}
.car-hub{fill:#d9dbd4}
.car-body{transform-box:fill-box;transform-origin:50% 100%}
.js .car-road:not(.is-open) .car{transform:translateX(100vw)}
.js .car-road.is-open .car{animation:car-in var(--car-dur) var(--car-ease) both}
.js .car-road.is-open .car-body{animation:car-settle var(--car-dur) ease-out both}   /* 止まる時に鼻が少し沈む＝ブレーキ */
@keyframes car-in{from{transform:translateX(100vw)}to{transform:none}}
@keyframes car-settle{0%,78%{transform:none}88%{transform:rotate(-2deg)}100%{transform:none}}
.no-motion .car,.no-motion .car-body{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.car,.car-body{animation:none!important;transform:none!important}}

/* --- 梅（hurdle/plum.html・設計 memory/2026-10-25_grill-me_plum-bloom-at-apply.md 問 1〜3・ユーザー「先に梅の蕾と枝を設置して 長い一本として」「2 です。花が開くのは お申し込みセクションが中央にきたらです」2026-10-25）
   2026-10-26 見本を見た直し（§7）: ユーザー「03 /QUESTIONS と重なると視認性的によくないです。ヘッダーみたいに独立して固定するのはダメでしょうか？ フォームで固定は解除します」→ 問 4「推薦」
   ＝枝はヘッダーと同じ地の帯（.plum-band・地の字面は styles.css .site-header）に載り、03・04 の字は帯の下に潜る（前の「枝は字の後ろ・字に地の色の縁」は置き換わった）。
   03・04 を包む .plum-run の頭の .plum（高さ＝帯）が 03 の頭の上に場所を取り、ヘッダー（390・360・375 で 78px [観察 2026-10-26]）の下に貼りつく。フォームに当たると motion.js が帯を上へ押す。
   スマホの幅で決めた（問 1）＝700px 以下だけ。重なりの順: 段の地（04 は .apply-section が塗る）→ 字とフォーム z2 → 帯 z3（.plum-run の isolation の中＝ヘッダー 5・固定ボタン 6 より下）。祖先に overflow を足さない（sticky の基準が変わる）。
   帯の下の線（ヘッダーの border-bottom）は付けない版が 1 本目（撮って決める・§7.2-5）。
   問 6「推薦」: 帯が貼りついている間、ヘッダーの「お申し込み」は根元（右の端）の上へ .3 秒で移る（motion.js が .plum-seat と --plum-seat を付ける・DOM はヘッダーのまま＝帯より上に描かれ押せる）。
   2026-10-26 絵馬（設計 memory/2026-10-26_grill-me_ema-apply-button.md 問 1「1」・問 2「1」・ユーザー「お申し込みボタンを絵馬の形にして 空白をいい感じに減らせないでしょうか」）:
   座る間だけボタンは背の高い絵馬（幅・高さ＝make_motion.PLUM_EMA・右の余白＝PLUM_EMA_RIGHT）＝ヘッダーの右の空白（A）の上の端から根元まで。基準はヘッダー（sticky）・下端を根元に載せる量は --plum-seat。
   出るときは上の端を軸に .3 秒で縦にのびる（ヘッダーのボタンの高さ 44/140 から）。止めた面・reduced-motion は動きなし。
   戻りは入りの逆（.3 秒・設計 memory/2026-10-26_ema-return-motion.md 問 1「推薦」・ユーザー「絵馬からボタンに戻る時のアニメーションも違和感のないようにしたいです」2026-10-26）:
   motion.js が .plum-leave を足す間、絵馬のまま同じ上の端へ 44/140 まで縮み、座った量は .plum-seat の transition で 0 へ。縮み切ったら motion.js が両方を外す＝ヘッダーのボタン。
   往復（設計 memory/2026-10-26_ema-turn-midway.md 問 1「推薦」＝(c) と (d)・ユーザー「(c) の跳ねも直したいです」2026-10-26）: 伸びる／縮む途中で折り返したら、その時の高さから逆へ。
   motion.js が折り返した時だけ今の縦の scale を --plum-from に、長さの比（残りの量 ÷ 44/140〜1 の量＝一定の速さ）を --plum-dur に置く。ヘッダーから座る時は両方を外す＝44/140 から .3 秒。
   着地: 帯がある幅では #apply に帯の分の scroll-margin（ユーザー「ジャンプするときは、文字が見える位置に飛んで欲しいです」）＝html の scroll-padding-top 86px（styles.css）と足し算
   ＝86 + 余白 ＝ ヘッダー 78 + 帯の高さ − 段の上の余白 56 + 8 → 余白 ＝ 帯の高さ − 56（「04 / CONTACT」が帯の下 8px）。
   JS が動かない面は枝を出さない（押し上げも開花も無いまま帯がフォームに被る）＝html.js か html.no-motion のときだけ --- */
.plum{display:none}
@media(max-width:700px){
  .m-plum .plum-run{isolation:isolate}
  .js .plum,.no-motion .plum{display:block;position:sticky;top:78px;z-index:3;pointer-events:none}
  .plum-band{aspect-ratio:390/110;background:rgba(255,254,250,.97)}   /* 比は make_motion.PLUM_VIEW と同じ・地は .site-header と同じ */
  .plum svg{width:100%;height:100%;display:block}
  .m-plum .faq-section>*,.m-plum .apply-layout{position:relative;z-index:2}
  .m-plum .site-header .button.small.plum-seat{transform:translateY(var(--plum-seat,0px));transition:transform .3s cubic-bezier(.2,.7,.3,1);
    position:absolute;right:12px;top:0;width:108px;height:140px;padding:47px 0 14px;border:0;justify-content:center;writing-mode:vertical-rl;
    font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-size:14px;letter-spacing:.06em;color:#3a1d0c;filter:drop-shadow(0 3px 4px rgba(60,0,8,.3));
    transform-origin:50% 0;animation:plum-ema calc(.3s * var(--plum-dur,1)) cubic-bezier(.2,.7,.3,1)}   /* 字の上下の余白＝.book-ema の 78/232・24/232 を高さ 140 に */
  .m-plum .site-header .button.small.plum-seat.plum-leave{transform:none;animation:plum-ema-out calc(.3s * var(--plum-dur,1)) cubic-bezier(.2,.7,.3,1) forwards}
  .m-plum .site-header .button.small.plum-seat span{display:none}   /* ↗ は隠す（1 本目） */
  .m-plum #apply{scroll-margin-top:calc(100vw * 110 / 390 - 56px)}   /* 帯の高さ（.plum-band の比 390/110）− 56 */
}
@keyframes plum-ema{from{scale:1 var(--plum-from,.3143)}}
@keyframes plum-ema-out{from{scale:1 var(--plum-from,1)}to{scale:1 .3143}}
.no-motion .site-header .button.small{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.m-plum .site-header .button.small{transition:none!important;animation:none!important}}
.plum-branch{fill:#5b3b2b}
.plum-bud{fill:#b8285a;stroke:#7c1838;stroke-width:.8;transform-box:fill-box;transform-origin:50% 50%}
.plum-flower{fill:#ec6f96;stroke:#c8456e;stroke-width:.6;transform-box:fill-box;transform-origin:50% 50%}
.plum-eye{fill:#ffd75e;stroke:#d99a20;stroke-width:.5}
/* 蕾→花（1 輪 1 秒・右から .1 秒ずつ（問 5「咲くのも右から左です」・.f1 が右の端＝make_motion.PLUM_FLOWERS の順）＝7 輪で 1.6 秒。長さは車で父とユーザーが「良い」とした 1.6 秒を借りた [推測 梅で確かめた値ではない]・前提 6）。一度開いたら閉じない（motion.js） */
.plum .f2{--d:.1s}.plum .f3{--d:.2s}.plum .f4{--d:.3s}.plum .f5{--d:.4s}.plum .f6{--d:.5s}.plum .f7{--d:.6s}
.js .plum:not(.is-open) .plum-flower{opacity:0;transform:scale(.25)}
/* 2026-10-26 蕾（設計 memory/2026-10-26_grill-me_plum-buds-midway.md 案 A・問 1「2 Approve」・父「最初つぼみはいらない」）: 最初は枝だけ。03 の段の真ん中が中央で motion.js が .is-bud＝花と同じ動き・同じずらし（.f1〜.f7）で出る */
.js .plum:not(.is-bud) .plum-bud{opacity:0;transform:scale(.25)}
.js .plum.is-bud .plum-bud{animation:plum-bloom 1s cubic-bezier(.2,.7,.3,1) var(--d,0s) both}
.js .plum.is-open .plum-flower{animation:plum-bloom 1s cubic-bezier(.2,.7,.3,1) var(--d,0s) both}
@keyframes plum-bloom{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
.no-motion .plum-flower,.no-motion .plum-bud{animation:none!important;opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.plum-flower,.plum-bud{animation:none!important;opacity:1!important;transform:none!important}}