/* ===========================================================
   AIマロン 背景アニメ 確認用
   文字の大きさ・行間は revenge-english のオプトインLPから流用。
   幅で自動的に決まる仕組み（clamp + calc(100cqi / 除数)）。
     見出し   clamp(21px, 100cqi/14.7, 30px)  / 1.75
     幅いっぱい clamp(21px, 100cqi/12.05, 38px) / 1.55
     本文     18px / 1.65     ボタン 18px / 1.5     注記 13px / 1.75
   =========================================================== */
:root{
  --ink:#f2f7fb;
  --ink-dim:rgba(242,247,251,.70);
  --ground:#0B1F35;        /* 映像の外側・本文の地。無地の深い藍 */
  --accent:#8CC63F;        /* マロン君の黄緑 */
  --col:470px;             /* 縦映像の幅 */
  --pad:clamp(20px,5.5vw,34px);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===== 映像の外側 ===== */
.ambient{position:fixed;inset:0;z-index:0;background:var(--ground)}

/* ===== 縦の映像（固定）。映像の区間だけ現れる ===== */
.stage{
  position:fixed;top:0;left:50%;
  width:min(100%,var(--col));height:100%;
  transform:translateX(-50%);
  z-index:1;overflow:hidden;
  box-shadow:0 0 60px 20px rgba(11,31,53,.55);
}
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.stage.has-video .hero{display:block}
.stage.has-video .layer{display:none}
.layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity}
.layer:first-of-type{opacity:1}

/* 文字が乗るときだけ効く、ごく薄い影 */
.shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,26,.28) 0%,rgba(4,14,26,0) 26%,rgba(4,14,26,0) 52%,rgba(4,14,26,.70) 100%);
}
.stage.plain .shade{opacity:.35}

/* 場面転換の一瞬の白 */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}

/* ===== セクション ===== */
main{position:relative;z-index:2}
.scene{position:relative}
.scene.film{min-height:var(--len,120svh)}

/* 映像の上に文字を置く区間（FVと着地だけ） */
.hold{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--pad) 12svh;
}
.copy{width:min(100%,var(--col));text-align:left;container-type:inline-size}

/* 文字のない映像だけの区間（＝余白の代わり） */
.scene.film.gap{min-height:var(--len,120svh)}

/* ===== 読ませる区間（無地・文字だけ） ===== */
/* 読ませる区間は「不透明な面」。映像を計算で消すのではなく、物理的に隠す */
.scene.text{
  padding:16svh var(--pad);display:flex;justify-content:center;
  background:var(--ground);position:relative;z-index:2;
}
.wrap{width:min(100%,620px);container-type:inline-size}

/* ===== 白背景の読ませる区間（波が白く飛んだ流れを受ける） ===== */
.scene.text.light{
  background:#fff;
  color:#0B1F35;
}
.scene.text.light .head,
.scene.text.light .strong{color:#0B1F35}
.scene.text.light .body,
.scene.text.light .list li{color:rgba(11,31,53,.78)}
.scene.text.light .body b,
.scene.text.light .list li b{color:#0B1F35}
.scene.text.light .list li{border-bottom-color:rgba(11,31,53,.12)}
.scene.text.light .box{background:rgba(11,31,53,.04);border-color:rgba(11,31,53,.12)}
.scene.text.light .box--on{background:rgba(140,198,63,.14);border-color:rgba(140,198,63,.55)}
.scene.text.light .box h3{color:#0B1F35}
.scene.text.light .box--on h3{color:#5f9021}
.scene.text.light .box p{color:rgba(11,31,53,.78)}
.scene.text.light .box p b{color:#0B1F35}

/* ===== 文字（revenge-english の指定） ===== */
.lead-copy,.head{
  font-size:clamp(21px, calc(100cqi / 14.7), 30px);
  line-height:1.75;
  letter-spacing:.03em;
  font-weight:700;
  text-wrap:balance;
}
.lead-copy{text-shadow:0 2px 18px rgba(2,10,20,.8)}
.head{margin-bottom:26px}

.strong{
  font-size:clamp(21px, calc(100cqi / 13.5), 34px);
  line-height:1.55;
  letter-spacing:.03em;
  font-weight:700;
  margin-top:30px;
  text-wrap:balance;
}

.body{font-size:18px;line-height:1.65;letter-spacing:.03em;color:var(--ink-dim);margin:22px 0}
.body b{color:var(--ink);font-weight:700}
.sub{margin-top:18px;font-size:15px;line-height:1.75;letter-spacing:.03em;color:var(--ink-dim);text-shadow:0 2px 14px rgba(2,10,20,.85)}

.list{list-style:none}
.list li{
  font-size:16px;line-height:1.75;letter-spacing:.03em;color:var(--ink-dim);
  padding:15px 0 15px 20px;border-bottom:1px solid rgba(242,247,251,.10);position:relative;
}
.list li::before{content:"";position:absolute;left:0;top:24px;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.85}
.list li b{color:var(--ink);font-weight:700}

.two{display:grid;gap:14px;margin:26px 0}
.box{padding:20px 22px;border-radius:14px;background:rgba(242,247,251,.05);border:1px solid rgba(242,247,251,.10)}
.box--on{background:rgba(140,198,63,.09);border-color:rgba(140,198,63,.32)}
.box h3{font-size:16px;line-height:1.5;letter-spacing:.03em;margin-bottom:10px}
.box--on h3{color:var(--accent)}
.box p{font-size:15px;line-height:1.75;letter-spacing:.03em;color:var(--ink-dim)}
.box p b{color:var(--ink)}
@media (min-width:760px){ .two{grid-template-columns:1fr 1fr;gap:16px} }

/* ===== ボタン ===== */
.btn{
  display:inline-block;margin-top:26px;
  padding:17px 28px;border-radius:999px;
  background:var(--accent);color:#0B1F35;
  font-size:18px;line-height:1.5;letter-spacing:.03em;font-weight:700;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.note{margin-top:12px;font-size:13px;line-height:1.75;letter-spacing:.03em;color:var(--ink-dim);text-shadow:0 2px 12px rgba(2,10,20,.8)}

/* ===== SCROLL の合図 ===== */
.scrollhint{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:4;font-size:10px;letter-spacing:.22em;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;transition:opacity .4s;pointer-events:none;
}
.scrollhint span{display:block;width:1px;height:26px;background:linear-gradient(180deg,transparent,var(--ink-dim))}

[data-anim]{will-change:opacity,transform,filter}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1!important;transform:none!important;filter:none!important}}