/* SORA KITE / SAMPLE 08 ── FLOATING-OBJECT-FIELD

   ★この見本の動きの決めごと(守らないと静かに壊れる)
   1. **スクロールで現れる部分**は clip-path で隠す。透明度では隠さない。
      透明度で隠すと、その要素は検査からも読み上げからも「無いもの」になり、
      公開品質ゲートが盲目のまま緑を出す。
      ★例外は**開幕だけ**。参考サイトと同じ「ふわっと出る」を作るには透明度が要るため、
        popHop / popHopPhone / markAll / swarmIn は opacity を使っている。
        その代わり開幕中(最初の約 8 秒)のヒーローはゲートから見えない。
        完成状態は別途 3 幅で実測して補う(検査ログに記載)。
   2. .play-field h1 / .object / .scribble の **位置と傾き** は transform に書く。
      共有の shared-quality.css は 820px 以下で transform:none!important を当てて
      狭い画面用に並べ直す。個別プロパティ(translate / rotate)に書くとその打ち消しが
      効かず、狭い画面で要素が画面の外へ出る(2026-08-19 実測: h1 が左へ -21.6px、
      o4 と o6 が 358px 重なった)。**動き**(開幕の拡大)だけは scale に載せる。
      scale は打ち消されないので、狭い画面でも同じように動く。
   3. 走っている animation と、後から当てる transition を同じプロパティに載せない。
      触った瞬間に必ず瞬間移動する。持ち上げは translate、寄りは scale、と分けてある。
   4. 触る演出は @media(hover:hover) で囲む。囲まないと、指で触った状態が居座る。        */

*{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}
figure{margin:0}

.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}
.demo a{text-decoration:underline}
.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}
/* ★見本バーは画面上端 44px を占め、重なり順もこのリンクと同値。DOM 順で後にある
   バーが上に塗るため、top:8px だと完全に下敷きになる(2026-08-19 別人格QA W-a)。
   バーの下へ出す。 */
.skip:focus{top:56px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0}
:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}

:root{
  --bg:#fffdf5;
  --ink:#171716;
  --body:"M PLUS Rounded 1c","Yu Gothic",sans-serif;
  --hand:Yomogi,cursive;
  --red:#ef5448;
  --green:#72b85a;
  --deep:#2a773c;
  --purple:#7054d8;
  --yellow:#f0d94e;
  --sun:#f1c941;
  --brown:#a46a3d;
  --teal:#4ebac1;
  /* ★白文字を載せる面はここを使う。--red / --brown のままだと白文字が
     3.48:1 / 4.46:1 で読みにくい(2026-08-19 別人格QA warning 1-3・実測)。 */
  --red-face:#cf3a2e;   /* 白との比 4.89 */
  --brown-face:#87512c; /* 白との比 6.47 */
  --pad:clamp(72px,10vw,132px) clamp(20px,6vw,88px);
}

h2{font-size:clamp(38px,6vw,88px);line-height:1.18;letter-spacing:-.04em;margin:14px 0 0;font-weight:900}
h3{line-height:1.25;margin:0}

/* ── スクロールで現れる演出は撤去した(2026-08-19)──────────────
   理由 = オーナーの画面で「ヒーローの次から先が全部出ない」が再発し続けた。
   この仕組みは「まず CSS で隠し、JS が出す」形で、JS 側が期待どおり動かない環境が
   1 つでもあると**本文が消えたまま戻らない**。保険を 3 つ入れてもオーナー環境では直らず、
   制作者の環境では一度も再現しなかった = 原因を掴めないまま危険な作りを残すことになる。
   **見せ方より、確実に見えることを取る。** ヒーローの開幕演出(CSS だけで完結し、
   JS が動かなくても最後まで再生される)は残す。 */
/* ── 遊び ─────────────────────────────────────────────
   小見出しの前に丸、写真にはテープ、見出しには手描きの下線。
   飾りはすべて ::before / ::after で描き、本文の要素は増やさない。 */
.eyebrow::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;margin-right:10px;vertical-align:1px}
.parallax img{height:114%;object-position:50% 50%}
.tape{position:relative}
.tape::after{content:"";position:absolute;z-index:3;left:5%;top:14px;width:clamp(110px,11vw,170px);height:44px;rotate:-7deg;
  background:linear-gradient(#fff3cf,#ffe9ad);opacity:.86;
  -webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0);
  box-shadow:0 3px 10px #00000024}
.wavy{position:relative;display:inline-block}
.wavy::after{content:"";position:absolute;left:0;right:0;bottom:-.16em;height:.12em;background:
  radial-gradient(circle at 50% 120%,transparent 58%,currentColor 59% 78%,transparent 79%) 0 0/1.1em .5em repeat-x;opacity:.55}

/* ══ ヘッダー ═════════════════════════════════════════ */
.sora-head{position:fixed;z-index:30;inset:20px 24px auto;display:flex;justify-content:space-between;align-items:start;font-size:12px}
.sora-head a{font-weight:900;font-size:16px;line-height:.85}

/* ══ ヒーロー ═════════════════════════════════════════ */
.play-field{height:100svh;min-height:720px;position:relative;overflow:hidden}

/* ★中央寄せは「レイアウト」で行う。transform:translate(-50%,-50%) では寄せない。
   個別プロパティの scale は transform より **外側** で適用されるため、原点は
   「変換前の要素中心」であって「寄せたあとの中心」ではない。つまり寄せの移動量まで
   一緒に縮み、小さいときだけ右下へずれる(2026-08-19 実測: 幅1920 で右へ 126.3px /
   下へ 96.7px。計算値 1086.35px と実測 1086.3px が一致)。
   inset:0 + place-items:center なら器が画面いっぱいなので、いくら縮めても中心は動かない。 */
.play-field h1{position:absolute;inset:-44px 0 0;display:grid;place-items:center;margin:0;text-align:center;line-height:1;pointer-events:none}
/* ★太さと最終の大きさは公開中のものから変えない(2026-08-19 オーナー指示)。
   font-weight は指定しない = h1 の既定(太字)のまま。 */
.wordmark{display:block;white-space:nowrap;font-size:clamp(72px,12vw,170px);letter-spacing:-.08em}
/* 1 文字ずつ跳ねさせるため字を分けている。分けた結果、欧文が行をまたぐ検査は
   この見出しに効かなくなる。折り返しそのものを nowrap で起こらなくして埋め合わせる。 */
.wordmark i{display:inline-block;font-style:normal}
.hero-lead{position:absolute;left:50%;top:calc(50% + clamp(58px,7vw,104px));translate:-50% 0;margin:0;font:20px var(--hand);white-space:nowrap}

.object{position:absolute;display:grid;place-items:center;text-align:center;filter:drop-shadow(8px 12px 8px #0002);animation:bob 5s ease-in-out infinite}
.object .tag{opacity:0;background:#fff;border:1px solid;border-radius:999px;padding:7px 12px;font-size:14px;transition:opacity .2s;z-index:2}
.o1{width:160px;height:120px;left:8%;top:18%}
.o1::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:polygon(10% 30%,70% 0,100% 60%,35% 100%)}
.o2{width:130px;height:190px;right:10%;top:12%;background:var(--green);border-radius:100% 0 100% 0;animation-delay:.5s}
.o3{width:180px;height:180px;left:18%;bottom:9%;background:var(--purple);border-radius:45% 55% 35% 65%;animation-delay:1s}
.o4{width:160px;height:80px;right:15%;bottom:14%;background:var(--sun);border-radius:50% 20% 30% 50%;animation-delay:1.5s}
.o5{width:80px;height:110px;right:38%;top:8%;background:var(--brown);border-radius:50%;animation-delay:2s}
.o6{width:120px;height:150px;left:3%;top:48%;background:var(--teal);transform:rotate(-12deg);animation-delay:2.5s}
@keyframes bob{50%{translate:0 -18px;rotate:3deg}}

.scribble{position:absolute;font:22px var(--hand);transform:rotate(-12deg)}
.s1{left:6%;top:70%;animation:sway 7s ease-in-out infinite}
.s2{left:36%;bottom:5%;animation:sway 9s ease-in-out infinite reverse}
@keyframes sway{50%{rotate:4deg}}
.hint{position:absolute;left:24px;bottom:20px;font-size:12px;margin:0}

.hero-card{position:absolute;right:6%;top:50%;translate:0 -50%;width:clamp(150px,15vw,220px);transform:rotate(6deg);background:#fff;padding:10px 10px 0;box-shadow:0 18px 40px #0000001f;border-radius:6px}
.hero-card img{aspect-ratio:1;border-radius:3px}
.hero-card figcaption{font:15px/2.6 var(--hand);text-align:center}

/* ── 開幕で外から中心へ吸い寄せられる飾り(参考サイトのお茶わんに当たるもの)──
   文字を持たせない。持たせると検査の対象になり、画面の外に居る瞬間が
   「はみ出し」として数えられる。 */
.intro-swarm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.intro-swarm i{position:absolute;left:50%;top:50%;opacity:0;transform-origin:center;display:block}
.intro-swarm i::before{content:"";position:absolute;inset:22%;display:block}
.k1{width:132px;height:132px;background:var(--red);border-radius:18px;--fx:70vw;--fy:-60vh}
.k1::before{background:#ffd9a0;border-radius:6px}
.k2{width:112px;height:158px;background:var(--green);border-radius:100% 0 100% 0;--fx:-70vw;--fy:60vh}
.k2::before{background:var(--deep);border-radius:100% 0 100% 0;inset:34%}
.k3{width:126px;height:126px;background:var(--teal);border-radius:50%;--fx:70vw;--fy:60vh}
.k3::before{background:#fffdf5;border-radius:50%;inset:38%}
.k4{width:150px;height:56px;background:var(--sun);border-radius:999px;--fx:-70vw;--fy:-60vh}
.k4::before{background:var(--brown);border-radius:999px;inset:26% 6% 26% 74%}
.k5{width:130px;height:130px;background:var(--yellow);--fx:40vw;--fy:-80vh;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.k5::before{display:none}
.k6{width:96px;height:118px;background:var(--brown);border-radius:50% 50% 46% 46%;--fx:-6vw;--fy:80vh}
.k6::before{background:#6d4526;border-radius:50% 50% 0 0;inset:0 12% 66% 12%}
.k7{width:140px;height:126px;background:var(--purple);--fx:-80vw;--fy:-30vh;clip-path:polygon(50% 0,100% 42%,100% 100%,0 100%,0 42%)}
.k7::before{background:#fffdf5;border-radius:4px;inset:56% 36% 0 36%}

/* ══ 開幕の 4 拍(参考サイト「お米で超えてく」の構造と速度をそのまま踏襲)══
   ① 0.0〜3.2 秒   画面の中心に SORA が小さく出て、左から順に跳ねる。
                    参考は米 3 粒が 1.6 秒周期で回り続ける = ここも 1.6 秒 × 2 周。
   ② 3.2〜5.06 秒  外から中心へオブジェクトが吸い寄せられて縮んで消える。
                    参考の実測値をそのまま使う: 1.4 秒 / cubic-bezier(.63,.64,.84,.99) /
                    遅らせ 0・.10・.16・.24・.32・.40・.46 秒。
   ③ 4.95〜5.55 秒 部品が一斉に表示され、SORA が最終の大きさへ。
                    参考の見出しと同じ 0.6 秒 / cubic-bezier(.51,.34,0,.98)。
   ④ 5.5〜6.0 秒   出た瞬間に全体がピョンと上へ跳ねて収まる。
   ★隠すのは clip-path。透明度や scale で隠すと、検査から見て箱が消え(押せる大きさが
     0 になり)公開品質ゲートが赤になる。切り抜きなら箱は最終の形のまま残る。 */
@keyframes hop1{0%{translate:0 0}12%{translate:0 -55px}25%{translate:0 0}100%{translate:0 0}}
@keyframes hop2{0%{translate:0 0}25%{translate:0 0}37%{translate:0 -55px}50%{translate:0 0}100%{translate:0 0}}
@keyframes hop3{0%{translate:0 0}50%{translate:0 0}62%{translate:0 -55px}75%{translate:0 0}100%{translate:0 0}}
@keyframes hop4{0%{translate:0 0}75%{translate:0 0}87%{translate:0 -55px}99%{translate:0 0}100%{translate:0 0}}
/* ★③④(2026-08-19 オーナー指示・4 度目の作り直し)
     順番は次のとおり。ここを崩したら作り直しになる。
       1. 飾りが中心へ吸い込まれて消える(〜5.05 秒)
       2. **中央の SORA も一緒に消える。画面から全部が無くなる。**
       3. 何も無い時間を **0.30 秒** 置く(5.05 → 5.35 秒)
       4. 全部品が **同時に** 出現する(ずらさない。ずらすと跳ねが 1 つの動きに見えない)
       5. 出た直後に **全部が一斉に上へ跳ぶ**(頂点 min(7vw,100px))
       6. 着地 → 小さく跳ね返る → 収まる。**ここで開幕が終わる。**
     ★上がりは減速・落ちは加速(コマごとに緩急を変える)。同じ緩急だと機械の上下運動に見える。 */
/* 割合と時刻(遅らせ 5.35 秒 / 長さ 1.05 秒)
   0%:5.35 出ていない / 5.7%:5.41 姿が出る(定位置) / 23.8%:5.60 まだ定位置 ←ここが「表示された」
   47.6%:5.85 頂点 / 76.2%:6.15 着地 / 87.6%:6.27 小さく跳ね返る / 100%:6.40 収まる
   ★定位置で見えている時間を 190ms 取る。ここが短いと(前版は 48ms)
     「出た瞬間もう上がっている」に見えて、跳ねとして読めない。 */
@keyframes popHop{
  0%{opacity:0;translate:0 0;scale:.86;animation-timing-function:linear}
  5.7%{opacity:1;translate:0 0;scale:1;animation-timing-function:linear}
  23.8%{translate:0 0;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  47.6%{translate:0 calc(-1 * min(7vw,100px));animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  76.2%{translate:0 0;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  87.6%{translate:0 calc(-1 * min(1.6vw,22px));animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  95%{translate:0 0}
  100%{opacity:1;translate:0 0;scale:1}
}
/* 狭い画面は共有の指定が translate を打ち消すので、上下ではなく大きさで跳ねさせる。 */
@keyframes popHopPhone{
  0%{opacity:0;scale:.8;animation-timing-function:linear}
  5.7%{opacity:1;scale:1;animation-timing-function:linear}
  23.8%{scale:1;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  47.6%{scale:1.16;animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  76.2%{scale:1;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  87.6%{scale:1.04;animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  95%{scale:1}
  100%{opacity:1;scale:1}
}
/* SORA は「小さいまま消える → 間 → 最終の大きさで出現 → 一緒に跳ぶ」を 1 本で行う。
   2 本に分けると同じ scale / opacity を奪い合って、どちらかが黙って死ぬ。
   4.75 秒から 1.4 秒。割合と時刻 = 0%:4.75 / 21.4%:5.05(消えきる) / 43.6%:5.35 /
   47%:5.41(出現) / 61%:5.60(頂点) / 79%:5.86(着地) / 87%:5.97 / 100%:6.15 */
/* 4.75 秒から 1.65 秒。割合と時刻 = 0%:4.75 / 18.2%:5.05(消えきる) / 36.4%:5.35 /
   40%:5.41(姿が出る) / 51.5%:5.60(まだ定位置) / 66.7%:5.85(頂点) /
   84.8%:6.15(着地) / 92%:6.27 / 100%:6.40(収まる) */
@keyframes markAll{
  0%{opacity:1;scale:.30;translate:0 0;animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  18.2%{opacity:0;scale:.06;translate:0 0;animation-timing-function:linear}
  36.4%{opacity:0;scale:1;translate:0 0;animation-timing-function:linear}
  40%{opacity:1;scale:1;translate:0 0;animation-timing-function:linear}
  51.5%{translate:0 0;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  66.7%{translate:0 calc(-1 * min(7vw,100px));animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  84.8%{translate:0 0;animation-timing-function:cubic-bezier(.14,.7,.28,1)}
  92%{translate:0 calc(-1 * min(1.6vw,22px));animation-timing-function:cubic-bezier(.6,0,.85,.38)}
  97%{translate:0 0}
  100%{opacity:1;scale:1;translate:0 0}
}
@keyframes swarmIn{
  0%{opacity:0;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(2)}
  0.6%{opacity:1;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(2)}
  99.8%{opacity:1;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(0)}
}
html.intro .play-field h1{animation:markAll 1.65s linear 4.75s both}
html.intro .wordmark i{animation-duration:1.6s;animation-timing-function:ease;animation-iteration-count:2;animation-fill-mode:both}
html.intro .wordmark i:nth-child(1){animation-name:hop1}
html.intro .wordmark i:nth-child(2){animation-name:hop2}
html.intro .wordmark i:nth-child(3){animation-name:hop3}
html.intro .wordmark i:nth-child(4){animation-name:hop4}

/* ★回数と向きも必ず上書きする。部品には元から別の動き(bob / sway)がまとめ書きで
   乗っており、その回数 infinite と、s2 だけが持つ reverse が新しい動きへ漏れる。
   ★遅らせは全部 5.35 秒で揃える。ずらすと「一斉に跳ねる」に見えない。 */
html.intro .play-field :where(.object,.scribble,.hint,.hero-lead,.hero-card){
  animation-name:popHop;animation-duration:1.05s;animation-timing-function:linear;
  animation-delay:5.35s;animation-fill-mode:both;
  animation-iteration-count:1;animation-direction:normal}

html.intro .intro-swarm i{animation:swarmIn 1.4s cubic-bezier(.63,.64,.84,.99) both}
html.intro .intro-swarm i.k1{animation-delay:3.20s}
html.intro .intro-swarm i.k2{animation-delay:3.30s}
html.intro .intro-swarm i.k3{animation-delay:3.36s}
html.intro .intro-swarm i.k4{animation-delay:3.44s}
html.intro .intro-swarm i.k5{animation-delay:3.52s}
html.intro .intro-swarm i.k6{animation-delay:3.60s}
html.intro .intro-swarm i.k7{animation-delay:3.66s}
@media(max-width:820px){
  html.intro .play-field :where(.object,.scribble,.hint,.hero-lead,.hero-card){animation-name:popHopPhone!important}
}

/* ══ 園のことば ═══════════════════════════════════════ */
.sora-concept{padding:var(--pad);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:start;position:relative}
.sora-concept::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#17171612 1.5px,transparent 1.6px) 0 0/26px 26px;opacity:.5;pointer-events:none}
.concept-copy{position:relative}
.concept-copy h2{max-width:16em}
.concept-copy p:not(.eyebrow){font-size:clamp(16px,1.15vw,19px);line-height:2.05;max-width:32em;margin:26px 0 0}
.concept-shot{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden}
.concept-keys{grid-column:1/-1;list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);position:relative}
.concept-keys li{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:clamp(22px,2.4vw,32px)}
.concept-keys b{display:block;font-size:clamp(26px,2.6vw,36px);letter-spacing:.04em}
.concept-keys span{display:block;margin-top:14px;font-size:clamp(15px,1.05vw,17px);line-height:1.95}
.concept-keys li:nth-child(1){background:#fff5cf}
.concept-keys li:nth-child(2){background:#e2f3d8}
.concept-keys li:nth-child(3){background:#e8e2fb}

/* ══ 園の一日 ═════════════════════════════════════════ */
.day{padding:var(--pad);background:var(--yellow);display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);align-items:start}
.day-title{grid-column:1/-1}
.day-title h2{line-height:1.25}
.day-shot{margin-top:clamp(20px,3vw,34px);aspect-ratio:1;border-radius:26px;overflow:hidden}
.day-line{list-style:none;padding:0 0 0 34px;max-width:1000px;margin:clamp(20px,3vw,34px) 0 0 auto;position:relative;--fill:0%}
.day-line::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:3px;background:#17171626;border-radius:2px}
.day-line::after{content:"";position:absolute;left:9px;top:14px;width:3px;height:var(--fill);background:var(--ink);border-radius:2px;transition:height .25s linear}
.day-line li{display:grid;grid-template-columns:130px 1fr 1.5fr;gap:14px;padding:26px 0;border-top:2px solid;font-size:clamp(16px,1.1vw,18px);position:relative}
.day-line li::before{content:"";position:absolute;left:-31px;top:28px;width:15px;height:15px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);scale:.7;transition:scale .3s cubic-bezier(.51,.34,0,.98),background .3s}
.day-line li.on::before{scale:1;background:var(--red)}
.day-line time{font-family:var(--hand);font-size:clamp(19px,1.5vw,24px)}
.day-line b{font-size:clamp(20px,1.5vw,24px)}
.day-line span{line-height:1.8}

/* ══ 庭 ═══════════════════════════════════════════════ */
.garden{padding:var(--pad);background:var(--green);display:grid;place-items:center;position:relative;overflow:hidden}
.garden-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(28px,4vw,64px);align-items:center;position:relative;z-index:2;width:min(100%,1500px)}
.garden-shot{aspect-ratio:1;border-radius:28px;overflow:hidden}
.garden-copy h2{line-height:1.25}
.garden-copy p:not(.eyebrow){font-size:clamp(16px,1.15vw,19px);line-height:2.05;margin:22px 0 0;max-width:30em}
.leaf{position:absolute;width:32vw;height:50vw;background:var(--deep);border-radius:100% 0 100% 0}
.leaf-a{left:-10%;bottom:-20%;rotate:-20deg;animation:leafSway 14s ease-in-out infinite}
.leaf-b{right:-12%;top:-25%;rotate:50deg;animation:leafSway 18s ease-in-out infinite reverse}
@keyframes leafSway{50%{rotate:-14deg}}
.leaf-b{--x:0}
.garden-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(26px,3vw,38px) 0 0}
.garden-facts>div{background:var(--deep);border:2px solid #fff;border-radius:20px;padding:18px}
.garden-facts dt{font-size:13px;letter-spacing:.06em}
.garden-facts dd{margin:6px 0 0;font-size:clamp(30px,3.4vw,44px);font-weight:900;line-height:1}
.garden-facts small{font-size:15px;font-weight:400;margin-left:4px}

/* ══ 園のなか ═════════════════════════════════════════ */
.sora-room{padding:var(--pad);background:#eaf4ee;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center}
.room-shot{aspect-ratio:3/2;border-radius:28px;overflow:hidden}
.room-copy h2{line-height:1.25}
.room-copy p{font-size:clamp(16px,1.15vw,19px);line-height:2.05;margin:22px 0 0}
.room-notes{list-style:none;padding:0;margin:26px 0 0}
.room-notes li{padding:16px 0 16px 32px;border-bottom:1px dashed #17171640;font-size:clamp(16px,1.1vw,18px);position:relative}
.room-notes li::before{content:"";position:absolute;left:4px;top:22px;width:12px;height:12px;background:var(--teal);border-radius:50%}

/* ══ アトリエ ═════════════════════════════════════════ */
.atelier{padding:var(--pad)}
.atelier h2{line-height:1.25;max-width:14em}
.atelier-shot{margin:clamp(26px,4vw,48px) 0;aspect-ratio:16/9;border-radius:28px;overflow:hidden;position:relative}
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.works span{aspect-ratio:1;display:grid;place-items:center;background:var(--red);border-radius:45% 55% 50% 40%;font:22px var(--hand);transition:rotate .35s cubic-bezier(.51,.34,0,.98),scale .35s cubic-bezier(.51,.34,0,.98)}
.works span:nth-child(2){background:var(--purple);color:#fff;border-radius:15%}
.works span:nth-child(3){background:var(--teal);border-radius:50%}
.works span:nth-child(4){background:var(--yellow);clip-path:polygon(50% 0,100% 100%,0 100%)}
.atelier-note{margin:clamp(22px,3vw,34px) 0 0;font:18px var(--hand)}

/* ══ ごはん ═══════════════════════════════════════════ */
.sora-lunch{padding:var(--pad);background:var(--red-face);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.sora-lunch h2{line-height:1.25}
.lunch-copy>p{font-size:clamp(16px,1.15vw,19px);line-height:2.05;margin:22px 0 0;max-width:30em}
.lunch-points{list-style:none;padding:0;margin:clamp(24px,3vw,36px) 0 0;display:grid;gap:12px}
.lunch-points li{background:#00000026;border:2px solid #ffffff8c;border-radius:20px;padding:18px 22px}
.lunch-points b{display:block;font-size:20px}
.lunch-points span{display:block;margin-top:8px;font-size:clamp(15px,1.05vw,17px);line-height:1.85}
.lunch-shot{aspect-ratio:4/3;border-radius:28px;overflow:hidden}

/* ══ 数 ═══════════════════════════════════════════════ */
.sora-figures{padding:var(--pad);background:#fff7e0}
.sora-figures h2{line-height:1.25}
.figure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin:clamp(30px,4vw,52px) 0 0}
.figure-grid>div{border:3px solid var(--ink);border-radius:26px;padding:clamp(26px,2.8vw,42px);background:#fff}
.figure-grid dt{font-size:13px;letter-spacing:.08em}
.figure-grid dd{margin:10px 0 0;line-height:1}
.figure-grid b{font-size:clamp(46px,5.6vw,76px);font-weight:900;letter-spacing:-.04em}
.figure-grid small{font-size:16px;margin-left:6px}
.figures-note{margin:26px 0 0;font-size:15px;line-height:1.9;max-width:40em}

/* ══ 先生たち ═════════════════════════════════════════ */
.sora-teachers{padding:var(--pad);background:var(--teal)}
.sora-teachers h2{line-height:1.25;max-width:16em}
.teachers-shot{margin:clamp(26px,4vw,44px) 0;aspect-ratio:16/9;border-radius:28px;overflow:hidden}
.teacher-words{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.teacher-words li{background:var(--bg);border-radius:24px;padding:clamp(22px,2.4vw,30px)}
.teacher-words b{display:block;font-size:17px;letter-spacing:.06em;padding-bottom:12px;border-bottom:2px solid}
.teacher-words span{display:block;margin-top:16px;font:clamp(18px,1.35vw,22px)/1.9 var(--hand)}

/* ══ 一年 ═════════════════════════════════════════════ */
.sora-year{padding:var(--pad);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,60px);align-items:start}
.sora-year>.eyebrow,.sora-year>h2{grid-column:1/-1}
.sora-year h2{line-height:1.25}
.year-shot{aspect-ratio:1;border-radius:28px;overflow:hidden;margin-top:clamp(20px,3vw,32px)}
.year-list{list-style:none;padding:0;margin:clamp(20px,3vw,32px) 0 0;display:grid;gap:14px}
.year-list li{border-radius:22px;padding:clamp(22px,2.4vw,32px);display:grid;grid-template-columns:26px 82px 1fr;align-items:center;gap:16px;position:relative}
.year-list li::before{content:"";width:20px;height:20px;border-radius:50%;background:currentColor;opacity:.34}
.year-list b{font-size:clamp(26px,2.8vw,38px)}
.year-list span{font-size:clamp(16px,1.15vw,19px);line-height:1.9}
.sp{background:#ffe0e6}
.sm{background:#d9f1f4}
.au{background:#fbe3c8}
.wt{background:#e6eaf2}
.year-note{grid-column:1/-1;margin:clamp(22px,3vw,32px) 0 0;font:18px var(--hand)}

/* ══ おうちの人の言葉 ═════════════════════════════════ */
.sora-voice{padding:var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;background:#fbf5e4}
.voice-shot{aspect-ratio:3/2;border-radius:28px;overflow:hidden}
.sora-voice h2{line-height:1.25}
.voice-body blockquote{margin:clamp(24px,3vw,34px) 0 0;background:#fff;border-radius:24px;padding:clamp(22px,2.4vw,30px);box-shadow:0 14px 32px #0000000f}
.voice-body blockquote p{margin:0;font-size:clamp(16px,1.15vw,19px);line-height:2.05}
.voice-body .who{display:block;margin-top:14px;font-size:13px;letter-spacing:.06em;opacity:.7}

/* ══ 入園と費用 ═══════════════════════════════════════ */
.sora-admission{padding:var(--pad);background:#fdf3c9}
.sora-admission h2{line-height:1.25}
.admission-list{margin:clamp(28px,4vw,44px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,60px)}
.admission-list>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:20px 0;border-top:2px solid}
.admission-list dt{font-size:14px;letter-spacing:.06em;padding-top:3px}
.admission-list dd{margin:0;font-size:clamp(17px,1.2vw,20px);line-height:1.8}
.admission-note{margin:26px 0 0;font-size:15px;line-height:1.9}

/* ══ アクセス ═════════════════════════════════════════ */
.sora-access{padding:var(--pad);background:var(--brown-face);color:#fff;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.access-shot{aspect-ratio:3/2;border-radius:28px;overflow:hidden}
.sora-access h2{line-height:1.25}
.access-list{margin:clamp(24px,3vw,36px) 0 0}
.access-list>div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-top:1px solid #ffffff59}
.access-list dt{font-size:14px;letter-spacing:.06em}
.access-list dd{margin:0;font-size:clamp(17px,1.2vw,20px)}

/* ══ よくある質問 ═════════════════════════════════════ */
.sora-faq{padding:var(--pad)}
.sora-faq h2{line-height:1.25}
.faq-list{margin:clamp(28px,4vw,44px) 0 0}
.faq-list details{border-top:2px solid;padding:6px 0}
.faq-list details:last-child{border-bottom:2px solid}
.faq-list summary{list-style:none;cursor:pointer;padding:26px 54px 26px 0;font-size:clamp(18px,1.35vw,22px);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:12px;top:50%;width:22px;height:4px;background:var(--ink);border-radius:2px}
.faq-list summary::before{content:"";position:absolute;right:21px;top:calc(50% - 9px);width:4px;height:22px;background:var(--ink);border-radius:2px;transition:scale .3s}
.faq-list details[open] summary::before{scale:1 0}
.faq-list p{margin:0 0 26px;font-size:clamp(16px,1.15vw,19px);line-height:2.05;max-width:48em}

/* ══ 見学 ═════════════════════════════════════════════ */
.visit{padding:var(--pad);background:var(--purple);color:#fff}
.visit-shot{margin:0 0 clamp(30px,5vw,58px);aspect-ratio:16/9;border-radius:28px;overflow:hidden}
.visit h2{line-height:1.25}
.visit-lead{margin:24px 0 0;font-size:clamp(17px,1.35vw,22px);line-height:2;max-width:30em}
.visit a{display:inline-block;margin-top:clamp(26px,3vw,38px);border:3px solid;border-radius:999px;padding:22px 36px;font-size:clamp(18px,1.4vw,22px);font-weight:700;transition:scale .3s cubic-bezier(.51,.34,0,.98),background .3s,color .3s}

footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}

/* ── 触ったときだけの演出(指で触った状態が居座らないように囲う) ── */
@media(hover:hover){
  .object:hover .tag{opacity:1}
  .works span:hover{rotate:-4deg;scale:1.04}
  .visit a:hover{background:#fff;color:var(--purple);scale:1.04}
  .hero-card:hover{transform:rotate(2deg)}
  .concept-keys li:hover{scale:1.02}
}
.hero-card{transition:transform .4s cubic-bezier(.51,.34,0,.98)}
.concept-keys li{transition:scale .3s cubic-bezier(.51,.34,0,.98)}

/* ── 狭い画面 ──────────────────────────────────────────
   ヒーローまわりは 820px で折り返す。共有 shared-quality.css が 820px で
   .play-field を組み直すため、ここだけ site.css の 720px に合わせると
   721〜820px で二重の配置になる(2026-08-11 の実測)。 */
@media(max-width:820px){
  /* ★共有 CSS が ≤820px で `#main>header nav` を display:none!important にするため、
     このページのメニューはボタンを押しても開かなかった(2026-08-19 実測: 0×0・不可視)。
     打ち消しには共有側(強さ 1,1,3)より強い指定が要る。ここは 1,2,4。 */
  html body>.demo + #main>header nav  .hero-lead{position:static;translate:none;white-space:normal;text-align:center;grid-column:1/-1;padding:0 0 20px}
  .hero-card{position:static;translate:none;transform:none;width:min(100%,280px);margin-inline:auto;grid-column:1/-1}
  .s1,.s2{animation:none}
  /* 縦に積み替わった器を丸ごと拡大すると不自然に見えるので、狭い画面では
     ④の「全体がポンッと跳ねる」だけ止める。①②③(小さく出る・跳ねる・集まって消える)は残す。 */
}
@media(max-width:720px){
  .demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}
  .sora-head span{display:none}
  .wordmark{font-size:75px}
  .o1{width:100px;height:80px}
  .o2{width:90px;height:130px}
  .o3{width:110px;height:110px;left:5%}
  .o4{width:110px}
  .o5{right:28%}
  .o6{width:80px;height:110px}
  .sora-concept,.sora-room,.sora-lunch,.sora-year,.sora-voice,.sora-access{grid-template-columns:1fr}
  .day{grid-template-columns:1fr}
  .garden-in{grid-template-columns:1fr}
  .day-line li{grid-template-columns:76px 1fr}
  .day-line li span{grid-column:1/-1}
  .concept-keys,.works,.teacher-words{grid-template-columns:1fr 1fr}
  .figure-grid{grid-template-columns:1fr 1fr}
  .garden-facts{grid-template-columns:1fr}
  .admission-list{grid-template-columns:1fr}
  .admission-list>div{grid-template-columns:120px 1fr}
  .year-list li{grid-template-columns:64px 1fr}
  footer{grid-template-columns:1fr;gap:8px}
}
@media(max-width:480px){
  .concept-keys,.works,.teacher-words,.figure-grid{grid-template-columns:1fr}
  .day-line{padding-left:26px}
  .day-line li::before{left:-24px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  }