/* ===================================================================
 * ファーストビュー「スマートフォンの中へ入っていく」（2026-11-05。案 A＋C を 11-04 に採用したものを作り替え）。
 * 開いたとき: 見出しと申込み、下からスマートフォンがのぞく → スクロールで真ん中へ上がり、
 * 近づいて画面の中へ入る → お母さんとのトークルームが進み、注文 1 回 → 3 回のお届けを段階で見せる → 離れて申込み。
 * 端末の位置と大きさ、見出し・説明・終わりの出入りは hero.js がスクロール量から毎フレーム入れる。
 * 会話の強調は CSS 変数 --a --f --d --r、目盛りは --on --now、ふちの消え方は --melt（どれも 0〜1）。
 * 送った人（男性）とお母さんには IRODORI のアイコンを添える。書体と色は taste.css に従う。
 * =================================================================== */

/* ---------- ルビ「カタチ」 ---------- */
.h1 .ln-ruby{padding-top:.5em;margin-top:-.42em}
.h1 ruby{ruby-position:over;ruby-align:center}
.h1 rt{font-family:var(--latin),var(--font);font-size:max(.26em,11px);font-weight:700;letter-spacing:.3em;color:var(--accent);text-indent:.3em;line-height:1.2}

/* ---------- 値段の一行 ---------- */
.hero-price{margin:0;font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;line-height:1.5}
.hero-price b{font-family:var(--latin),var(--font);font-size:17px;color:var(--ink);letter-spacing:.02em}

/* ---------- 貼りつく画面。スクロールの長さは hero.js が入れる ---------- */
.fvc{position:relative}
.fvc-pin{position:sticky;top:0;height:100svh;overflow:hidden}
/* スマートフォンで画面の中にいるあいだ、上のメニューを隠す */
.nav.fvc-in{transform:translateY(-100%)}
/* 見出しと文ははじめから見せる（main.js の出す動きを打ち消す） */
.motion .fvc .h1 .ln>span{transform:none}

/* 開いたとき: 真ん中に見出しと申込み */
.fvc-intro{position:absolute;left:0;right:0;top:0;padding-top:118px;text-align:center;z-index:2}
.fvc-intro .h1 .ln{display:inline}
.fvc-intro .h1 .ln-ruby{display:block}
.fvc-intro .lead{margin:18px auto 0;font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:var(--ink)}
.fvc-intro .lead b,.fvc-end em{color:var(--accent);font-style:normal}
.fvc-act{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:26px}
.fvc-intro .fvc-act{justify-content:center}
.fvc-more{margin-top:22px;font-size:12px;color:var(--ink-3)}
.fvc-more::after{content:"";display:block;width:1px;height:28px;margin:8px auto 0;background:linear-gradient(var(--ink-3),transparent);animation:fvc-more 1.8s ease-in-out infinite}
@keyframes fvc-more{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 画面に入ったあとの説明（パソコン: 左に大きく） */
.fvc-side,.fvc-end{position:absolute;top:0;bottom:0;left:max(24px,calc(50% - 560px));width:min(440px,40vw);display:flex;flex-direction:column;justify-content:center;z-index:3;visibility:hidden}
.fvc-side .fvc-steps{width:100%;max-width:380px}
.fvc-side .fvc-stage{margin:28px 0 0;padding:0;background:none;text-align:left;justify-content:flex-start;font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.5;min-height:3em}
.fvc-note{margin-top:22px;font-size:14px;line-height:1.8;color:var(--ink-2)}
.fvc-note small{display:block;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
/* 終わり: まとめと申込み */
.fvc-end-h{font-size:clamp(30px,3.4vw,46px);font-weight:700;line-height:1.4}
.fvc-end-p{margin-top:16px;font-size:16px;color:var(--ink-2);line-height:1.8}

/* ---------- iPhone のふち: 黒い縁、角の丸み、ダイナミックアイランド、横のボタン、下のバー（大きさと位置は hero.js） ---------- */
.fvc-phone{--melt:0;position:absolute;left:50%;top:50%;width:320px;height:640px;padding:9px;border-radius:50px;z-index:1;transform-origin:50% 50%;
  background:color-mix(in srgb,#1C1C1E calc((1 - var(--melt))*100%),#F1EEEA);
  box-shadow:0 0 0 1.5px rgba(58,58,60,calc(1 - var(--melt))) inset,0 0 0 1px rgba(142,142,147,calc(1 - var(--melt))),0 30px 60px rgba(47,51,56,calc(.22*(1 - var(--melt)))),0 8px 18px rgba(47,51,56,calc(.12*(1 - var(--melt))))}
.fvc-phone::before,.fvc-phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#8E8E93;opacity:calc(1 - var(--melt))}
.fvc-phone::before{left:-3px;top:96px;height:54px;box-shadow:0 66px 0 #8E8E93}
.fvc-phone::after{right:-3px;top:130px;height:80px}
.fvc-screen{position:relative;height:100%;border-radius:calc(42px*(1 - var(--melt)));overflow:hidden}
.fvc-status{position:relative;height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 32px;background:#fff;line-height:1}
.fvc-status b{font-family:var(--latin);font-size:14px;font-weight:600;letter-spacing:0}
.fvc-status .island{position:absolute;left:50%;top:10px;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000}
.fvc-status .bars{display:flex;align-items:flex-end;gap:2px}
.fvc-status .bars i{width:3px;background:var(--ink);border-radius:1px}
.fvc-status .bars i:nth-child(1){height:4px}.fvc-status .bars i:nth-child(2){height:6px}.fvc-status .bars i:nth-child(3){height:8px}.fvc-status .bars i:nth-child(4){height:10px}
.fvc-status .bars em{margin-left:6px;width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;opacity:.9}
.fvc-status .bars em::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:var(--ink);border-radius:1px}
.fvc-home{position:absolute;left:50%;bottom:7px;width:118px;height:5px;margin-left:-59px;border-radius:3px;background:var(--ink);opacity:.85}

/* 目盛り: 注文 1 回 → 3 回のお届け */
.fvc-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 12px 8px;position:relative}
.fvc-steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:41px;border-top:2px dashed #F0C4AF}
.st{--on:0;--now:0;position:relative;background:none;border:0;font:inherit;color:var(--ink-3);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0}
.st:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.st .dot{width:44px;height:44px;border-radius:50%;background:#F4F1EC;border:2px solid #fff;overflow:hidden;display:grid;place-items:center;font-size:11px;margin:8px 0 7px;font-weight:700;color:var(--ink-3);
  transform:scale(calc(1 + var(--now)*.14));
  box-shadow:0 0 0 calc(2px + var(--now)*1px) color-mix(in srgb,var(--accent) calc(var(--on)*100%),#EDE7DF),0 0 0 calc(var(--now)*8px) rgba(240,122,69,calc(var(--now)*.18))}
.st .dot img{width:100%;height:100%;object-fit:cover;filter:grayscale(calc(1 - var(--on))) opacity(calc(.45 + var(--on)*.55))}
.st b{font-family:var(--latin);font-size:13px;font-weight:600;line-height:1.1;color:color-mix(in srgb,var(--ink) calc(var(--on)*100%),var(--ink-3))}
.st small{font-size:10px;line-height:1.2}
.st.order .dot{background:color-mix(in srgb,var(--accent-btn) calc(var(--on)*100%),#F4F1EC);color:color-mix(in srgb,#fff calc(var(--on)*100%),var(--ink-3))}
.st.now small{color:var(--accent);font-weight:700}

/* 目盛りの下の一行: いまの段階をことばで */
.fvc-stage{margin:0 12px 10px;border-radius:12px;background:var(--accent-soft);padding:8px 12px;font-size:13px;line-height:1.5;text-align:center;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.fvc-stage span{display:block}
.fvc-stage b{color:var(--accent)}
.fvc-stage.swap{animation:fvc-swap .45s cubic-bezier(.16,1,.3,1)}
@keyframes fvc-swap{from{transform:translateY(6px);opacity:.3}}

/* トークルーム */
.fvc-room{display:flex;flex-direction:column;background:#F1EEEA;min-height:0}
.fvc-room header{background:#fff;padding:4px 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);line-height:1.4}
.fvc-room header .back{font-size:26px;line-height:1;color:var(--accent);margin:-4px 2px 0 -4px}
.fvc-room header .av{width:32px;height:32px;border-radius:50%;object-fit:cover}
.fvc-room header b{font-size:13px}
.fvc-room header small{display:block;font-size:10px;color:var(--ink-3);line-height:1.3}
.fvc-log{position:relative;flex:1;overflow:hidden;padding:18px 16px 22px;display:flex;flex-direction:column;gap:14px}
/* --a: 出てくる度合い / --f: いま見ている度合い / --d: 前の月として薄くなる度合い（0〜1）。
   どれもスクロール量から hero.js が毎フレーム入れる。CSS の transition は使わない */
.fvc-log>*{flex-shrink:0;--a:1;--f:0;--d:0;
  opacity:calc(var(--a)*(1 - var(--d)*.62));
  filter:saturate(calc(1 - var(--d)*.5));
  transform:translateY(calc((1 - var(--a))*16px)) scale(calc(.94 + var(--a)*.06 + var(--f)*.04))}
.fvc-log>.hide{display:none}
.fvc-log .day{align-self:center;font-size:11px;border-radius:999px;padding:2px 12px;margin:10px 0 0;line-height:1.6;
  background:color-mix(in srgb,var(--ink) calc(var(--f)*100%),rgba(255,255,255,.85));color:color-mix(in srgb,#fff calc(var(--f)*100%),var(--ink-2))}
.fvc-log .sys{align-self:center;font-size:12px;color:var(--accent);background:#fff;border:1px solid #F3D3C4;border-radius:10px;padding:5px 12px;text-align:center;line-height:1.5}
/* お届けのお知らせ: いちばん目立たせる。出てくるあいだ、波紋が広がって消える */
.fvc-log .arrive{--r:0;align-self:stretch;background:var(--accent-btn);color:#fff;border-radius:12px;padding:9px 14px;text-align:center;font-size:14px;font-weight:700;line-height:1.4;
  box-shadow:0 0 0 calc(var(--r)*16px) rgba(240,122,69,calc((1 - var(--r))*.55*var(--f))),0 10px 26px rgba(240,122,69,calc(var(--f)*.4))}
.fvc-log .arrive small{display:block;font-size:11px;font-weight:400;opacity:.92}
/* 吹き出しの行: アイコン＋吹き出し。送った人は右、お母さんは左 */
.fvc-log .fvc-line{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.fvc-log .fvc-line .av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 1.5px #fff}
.fvc-log .fvc-line.me{align-self:flex-end;flex-direction:row-reverse;transform-origin:right bottom}
.fvc-log .fvc-line.mom{align-self:flex-start;transform-origin:left bottom}
.fvc-log .msg{min-width:0;font-size:14px;line-height:1.65;padding:10px 14px;border-radius:18px}
.fvc-log .me .msg{background:#FFE3D4;border-bottom-right-radius:5px}
.fvc-log .mom .msg{background:#fff;border-bottom-left-radius:5px}
.fvc-log .fvc-line.has-pic{width:74%}
.fvc-log .pic{flex:1;min-width:0;border-radius:16px;overflow:hidden;border:4px solid #fff}
.fvc-log .pic img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* 強調: いま出てきた 1 つ（--f が 1 に近いほど強く） */
.fvc-log .msg,.fvc-log .pic,.fvc-log .sys{box-shadow:0 0 0 calc(var(--f)*2px) var(--accent),0 10px 24px rgba(240,122,69,calc(var(--f)*.22))}

/* やり取りできることを見せる入力欄（飾り） */
.fvc-input{background:#fff;border-top:1px solid var(--line);padding:9px 14px 24px;display:flex;align-items:center;gap:8px;line-height:1.4}
.fvc-input span{flex:1;font-size:13px;color:var(--ink-3);background:#F4F1EC;border-radius:999px;padding:6px 14px}
.fvc-input i{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:#F3B79C;border-radius:999px;padding:5px 12px}

@media (prefers-reduced-motion:reduce){.fvc-stage,.fvc-more::after{animation:none!important}}

/* ---------- 小さい画面: 見出しは上、近づいたあとの説明は下のカード ---------- */
@media (max-width:900px){
  .fvc-intro{padding:92px 16px 0}
  .fvc-intro .h1{font-size:clamp(28px,8vw,34px);line-height:1.38}
  .fvc-intro .h1 .ln{display:block}
  .fvc-intro .lead{font-size:15px;line-height:1.75;margin-top:12px}
  .fvc-act{gap:10px 16px;margin-top:18px}
  .fvc-act .btn{--h:48px;font-size:15px}
  .fvc-act .hero-price{flex-direction:column;gap:0;font-size:12px;text-align:left}
  .fvc-act .hero-price b{font-size:16px}
  .fvc-more{margin-top:14px}
  .fvc-side{top:auto;bottom:12px;left:12px;right:12px;width:auto;display:block;padding:12px 10px 10px;border-radius:22px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(47,51,56,.14)}
  .fvc-side .fvc-steps{max-width:none;padding:0}
  .fvc-side .fvc-steps::before{top:26px}
  .fvc-side .st .dot{width:36px;height:36px}
  .fvc-side .fvc-stage{margin:8px 0 0;padding:7px 10px;border-radius:12px;background:var(--accent-soft);justify-content:center;text-align:center;font-size:13px;line-height:1.5;min-height:0}
  .fvc-note{margin-top:6px;font-size:0;line-height:1;text-align:center}
  .fvc-note small{margin:0;font-size:10px;line-height:1.4}
  .fvc-end{top:96px;bottom:auto;left:16px;right:16px;width:auto;display:block;text-align:center}
  .fvc-end-h{font-size:28px}
  .fvc-end-p{margin-top:8px;font-size:14px}
  .fvc-end .fvc-act{justify-content:center;margin-top:16px}
  .fvc-phone{padding:7px;border-radius:44px}
  .fvc-phone::before{top:70px;height:40px;box-shadow:0 50px 0 #8E8E93}
  .fvc-phone::after{top:96px;height:60px}
  .fvc-screen{border-radius:calc(37px*(1 - var(--melt)))}
  .fvc-status{height:36px;padding:2px 22px 0 28px}
  .fvc-status b{font-size:13px}
  .fvc-status .island{top:8px;width:80px;height:23px;margin-left:-40px}
  .fvc-room header{padding:2px 14px 8px}
  .fvc-log{padding:14px 14px 18px;gap:12px}
  .fvc-log .msg{font-size:12.5px;padding:9px 12px}
  .fvc-log .arrive{font-size:13px}
  .fvc-input{padding:7px 12px 20px}
}