/* =========================================================
   Bloom Live LP — Renewal stylesheet
   参考デザイン（Felice）を踏襲した実写ヒーロー / ピンク×ネイビー
   構成: tokens / base / header / hero / spec / style / support
        / apply / footer / responsive
   ========================================================= */

/* ===== TOKENS ===== */
:root{
  /* スマホのハンバーガーのチップと、そこから開くメニュー板の共通ガラス */
  --glass:rgba(20,20,28,.46);
  --glass-line:rgba(255,255,255,.22);
  --pink:#ff2d74;
  --pink-deep:#e4185f;
  --pink-soft:#ffe6ef;
  --pink-bg1:#fff4f8;
  --pink-bg2:#ffe2ec;
  --blue:#2455e6;
  --blue-deep:#1b3fb0;
  /* 配信スタイルのテーマ色（実写=パステルピンク／ゲーム=パステル水色） */
  --live:#ff8fbb;
  --live-deep:#e85f95;
  --game:#7cc0f5;
  --game-deep:#3f92db;
  --navy:#16224a;
  --navy-2:#1f2c57;
  --ink:#191921;
  --text:#475063;
  --muted:#8b93a6;
  --line:#ececf2;
  --live:#ff2b2b;
  --font-jp:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --font-head:'Noto Sans JP','Zen Kaku Gothic New',sans-serif;
  --font-en:'Outfit',sans-serif;
  --font-script:'Dancing Script',cursive;
  --wrap:1180px;
  --radius:20px;
}

/* ===== BASE ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:var(--font-jp);font-weight:500;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
.c-pink{color:var(--pink);}
.c-blue{color:var(--blue);}
.c-pinklight{color:#ffd0e0;}

/* scroll reveal（JS有効時のみ隠す。JS無効でも内容は表示される） */
.js .fade-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.js .fade-up.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .fade-up{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== SHARED CTA BUTTON ===== */
.btn-cta{
  display:inline-flex;align-items:center;gap:.5em;
  background:linear-gradient(90deg,#ff2d74 0%,#ff3a82 42%,#b24bff 100%);
  color:#fff;font-family:var(--font-jp);font-weight:700;
  border:none;border-radius:7px;cursor:pointer;
  box-shadow:0 8px 22px rgba(160,60,255,.42);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(160,60,255,.52);filter:brightness(1.06);}
.btn-cta:focus-visible{outline:3px solid #ffb3cd;outline-offset:3px;}
/* Story帯だけの応募ボタン。この帯では「黄色＝押すところ」（選択中のカード）に意味をそろえている。
   水色の背景にはピンクより黄〜オレンジのほうが強く出る（実測：ピンク3.81 → こちら7以上）。
   ※他の応募ボタン（ヘッダー・ヒーロー・最下部）はピンクのまま。ここだけ例外 */
/* .btn-cta を2つ重ねているのは詳細度を上げるため。
   スマホ用の .btn-cta--lg 指定が後ろにあるので、単独クラスだと負けて小さくなる */
/* 見出しの「収入に変わる」と同じグラデーション。
   ※片方を変えたらもう片方も合わせること（.sty-title-em と同じ値） */
.btn-cta.btn-cta--sty{background:linear-gradient(96deg,#1268c9,#0b8f9e);
  color:#fff;
  /* 影は2枚。近くの濃い影が縁を締め、遠くの影で浮かせる。
     ボタンの右端(#0b8f9e)が帯の背景と近い色なので、近い影が無いと輪郭がぼやける */
  box-shadow:0 2px 7px rgba(5,45,80,.4),0 14px 30px rgba(5,45,80,.55);
  font-size:clamp(1.02rem,1.5vw,1.32rem);padding:1.05em 2.7em;border-radius:9px;}
.btn-cta.btn-cta--sty:hover{box-shadow:0 3px 9px rgba(5,45,80,.45),0 18px 38px rgba(5,45,80,.62);}
.btn-cta.btn-cta--sty:focus-visible{outline-color:#0b3a6b;}
.btn-cta--sm{padding:.62em 1.15em;font-size:.86rem;border-radius:7px;}
.btn-cta--lg{padding:.85em 1.6em;font-size:1.02rem;}
.btn-cta--xl{padding:1.05em 2.4em;font-size:1.18rem;box-shadow:0 14px 34px rgba(160,60,255,.5);}

/* ===== HEADER ===== */
/* 最上部は透明（Hero写真と同化）、スクロールで黒背景に */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;}
/* スクロール後（スマホ）：ロゴを消してハンバーガーだけをページ上に浮かせる。
   PCは従来通りヘッダーを出したままにする（下部の min-width:1001px で上書き） */
.hdr--mini{pointer-events:none;}
.hdr--mini .brand{opacity:0;visibility:hidden;transform:translateY(-8px);}
/* position:relative＝メニュー板の位置の基準。これが無いと板が画面右端を基準にしてハンバーガーから離れる */
.hdr-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:.6rem 1.4rem;
  display:flex;align-items:center;gap:1.2rem;}
.brand{position:relative;display:flex;flex-direction:column;line-height:1;margin-right:auto;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;}
.brand-logo{height:30px;width:auto;display:block;}
.brand-sub{font-family:var(--font-en);font-weight:600;font-size:.55rem;
  letter-spacing:.22em;color:rgba(255,255,255,.72);margin-top:.28rem;
  text-shadow:0 1px 5px rgba(0,0,0,.5);}

/* メニューは「右上から降りる板」が標準形。PCの最上部だけ横並びナビに戻す（下部の min-width:1001px 参照） */
.gnav{position:absolute;top:calc(100% - 4px);right:1.4rem;
  width:max-content;max-width:74vw;  /* 一番長い項目に合わせた幅にする */
  display:flex;flex-direction:column;gap:0;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.gnav--open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
.gnav-link{font-size:.83rem;font-weight:700;color:rgba(255,255,255,.95);position:relative;
  padding:.85rem 1.2rem;width:100%;border-top:1px solid rgba(255,255,255,.08);}
.gnav-link:first-child{border-top:none;}
.gnav-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--pink);border-radius:2px;transition:width .22s ease;}
.gnav-link:hover{color:var(--pink);}

/* ハンバーガー開閉ボタン（2本線＋MENU/CLOSE文字）。線は常に白 */
.hdr-burger{position:relative;width:52px;height:52px;background:none;border:none;cursor:pointer;padding:0;
  pointer-events:auto;order:3;}
/* スクロールして浮いたときだけ、背景に丸いガラスのチップを敷く。
   これで背景が写真でも白でも線が必ず読めるので、背景色の判定は不要 */
.hdr-burger::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--glass-line);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s ease;}
.hdr--mini .hdr-burger::before{opacity:1;transform:none;}
.hdr-burger .bar{position:absolute;left:0;right:0;margin:auto;width:26px;height:2px;border-radius:2px;background:#fff;
  transition:transform .25s ease,top .25s ease,width .25s ease;}
.hdr-burger .bar1{top:15px;}
.hdr-burger .bar2{top:22px;}
.hdr-burger .txt{position:absolute;left:0;right:0;top:29px;text-align:center;color:#fff;font-family:var(--font-en);font-weight:700;font-size:10px;letter-spacing:1.5px;line-height:1;}
.hdr-burger .txt-close{display:none;}
.hdr-burger.is-open .bar{top:19px;width:20px;}
.hdr-burger.is-open .bar1{transform:rotate(-45deg);}
.hdr-burger.is-open .bar2{transform:rotate(45deg);}
.hdr-burger.is-open .txt-menu{display:none;}
.hdr-burger.is-open .txt-close{display:block;}

/* ===== HERO ===== */
/* Heroは画面いっぱい（フルスクリーン）。dvhでモバイルのアドレスバーにも対応 */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  overflow:hidden;color:#fff;padding-top:64px;}
.hero-photo{position:absolute;inset:0;z-index:0;}
/* メイン写真をHeroセクション全体の背景として敷く（全面cover・ぼかしなし）
   ズーム＋基点を左寄りにして、女性の顔を大きく・右側に寄せる */
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:scale(1.32);transform-origin:24% 40%;}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(98deg,rgba(12,10,22,.82) 0%,rgba(12,10,22,.6) 30%,rgba(12,10,22,.18) 52%,rgba(12,10,22,0) 70%),
    linear-gradient(0deg,rgba(12,10,22,.55) 0%,rgba(12,10,22,0) 30%);}
/* ロゴ背後の黒い円形グラデ：Hero内（写真の上・他オブジェクトの背面 z1）に配置 */
.hero-logo-glow{position:absolute;top:-280px;left:-400px;z-index:1;
  width:960px;height:600px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,rgba(0,0,0,.34) 42%,transparent 72%);}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);width:100%;
  margin:0 auto;padding:2.2rem 1.4rem 3rem;}

/* hero copy */
.hero-copy{max-width:680px;}
.hero-flag{position:relative;z-index:3;top:22px;display:inline-block;background:#fff;color:#191921;
  font-weight:900;font-size:1.1rem;padding:.42em 1.2em;border-radius:999px;--rot:-6deg;
  transform:rotate(-6deg);filter:drop-shadow(0 5px 10px rgba(0,0,0,.22));margin-bottom:-0.5rem;}
.hero-flag-em{color:var(--pink);}
/* 吹き出しの尻尾（下向きのチョン） */
.hero-flag::after{content:"";position:absolute;left:24px;bottom:-7px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #fff;}

.hero-title{display:flex;flex-direction:column;align-items:flex-start;
  gap:.32rem;margin-bottom:1.3rem;}
/* Hero見出し（素材画像） */
.hero-title-img{width:610px;max-width:92%;height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));}
.hero-script-img{width:342px;max-width:66%;height:auto;margin-top:-2.4rem;margin-left:48px;position:relative;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.4));}
.ht-slab{display:inline-block;background:var(--ink);color:#fff;
  font-family:var(--font-head);font-weight:900;line-height:1;
  padding:.16em .34em;border-radius:6px;letter-spacing:.01em;--rot:-1.5deg;
  box-shadow:0 8px 20px rgba(0,0,0,.3);transform:rotate(-1.5deg);}
.ht-slab--1{font-size:3.5rem;}
.ht-slab--2{font-size:5.6rem;letter-spacing:.08em;}
.ht-script-row{display:flex;align-items:baseline;gap:.4rem;margin-top:.18rem;--rot:-2deg;
  transform:rotate(-2deg);}
.ht-nara{font-family:var(--font-jp);font-weight:900;font-size:1.85rem;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4);}
.ht-script{font-family:var(--font-script);font-weight:700;font-size:4.6rem;
  color:#fff;line-height:1;
  text-shadow:0 0 1px var(--pink),2px 3px 0 var(--pink),0 4px 18px rgba(255,45,116,.6);}

.hero-lead{display:flex;flex-direction:column;align-items:flex-start;
  gap:.45rem;margin:0 0 1.5rem;}
.ht-slab--lead{font-family:var(--font-jp);font-weight:700;font-size:1.16rem;
  padding:.34em .7em;border-radius:2px;letter-spacing:.02em;line-height:1.45;
  transform:rotate(-1.2deg);box-shadow:0 6px 16px rgba(0,0,0,.26);}

.hero-cta-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.hero-bolt{display:grid;place-items:center;width:46px;height:46px;
  background:var(--ink);border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.3);}
.hero-cta-note{display:inline-flex;align-items:center;gap:.3em;
  font-size:.9rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);}

/* hero live overlay */
.hero-live{position:absolute;top:2rem;right:1.4rem;z-index:3;width:320px;
  display:flex;flex-direction:column;gap:.55rem;align-items:flex-end;}
.hl-top{display:flex;align-items:center;gap:.5rem;}
.hl-livebadge{display:inline-flex;align-items:center;gap:.35em;
  background:var(--live);color:#fff;font-family:var(--font-en);font-weight:800;
  font-size:.82rem;letter-spacing:.06em;padding:.28em .7em;border-radius:7px;
  box-shadow:0 4px 12px rgba(255,43,43,.45);}
.hl-dot{width:7px;height:7px;border-radius:50%;background:#fff;
  animation:hl-blink 1.3s infinite;}
@keyframes hl-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hl-views{display:inline-flex;align-items:center;gap:.3em;
  background:rgba(0,0,0,.82);color:#fff;font-family:var(--font-en);font-weight:700;
  font-size:.82rem;padding:.28em .65em;border-radius:7px;backdrop-filter:blur(4px);}
/* 数字を等幅にして桁の変化で幅が変わらない＝LIVEバッジが動かない */
.hl-views-num{font-variant-numeric:tabular-nums;}
.hl-chats{display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;
  width:100%;align-items:flex-end;height:248px;overflow:hidden;}
.hl-chat{display:flex;align-items:center;flex:none;width:fit-content;max-width:248px;
  background:rgba(4,4,8,.92);backdrop-filter:blur(3px);
  border-radius:2px;padding:.34rem .8rem;
  box-shadow:0 4px 14px rgba(0,0,0,.3);}
.hl-chat--in{animation:hl-in .42s cubic-bezier(.2,.8,.25,1) both;}
.hl-chat--out{animation:hl-out .4s ease forwards;}
@keyframes hl-in{from{opacity:0;transform:translateX(46px) scale(.9);}to{opacity:1;transform:none;}}
@keyframes hl-out{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-12px);}}
.hl-msg{font-size:.9rem;font-weight:700;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* hero 右下バッジ：素材の配置スロット（後で <img class="hero-badge"> に差し替え） */
.hero-badge-slot{position:absolute;right:2rem;bottom:2.2rem;z-index:3;
  width:156px;height:156px;border-radius:50%;display:grid;place-items:center;
  text-align:center;color:rgba(255,255,255,.85);font-size:.74rem;font-weight:700;
  line-height:1.45;border:2px dashed rgba(255,255,255,.5);
  background:rgba(0,0,0,.22);backdrop-filter:blur(2px);}
.hero-badge-wrap{position:absolute;right:1.6rem;bottom:1.8rem;z-index:3;width:330px;height:330px;display:grid;place-items:center;}
/* 新素材はフチいっぱいまでバッジ＝旧素材（周囲に透明余白があり本体は画像の約50%）より大きく写る。
   枠の約52%で中央表示にすると本体が旧と同寸になり、背面の多色ネオン(::before)も周りに出る */
.hero-badge{width:52%;height:auto;display:block;transform:rotate(9deg);}
/* バッジ周囲を走る多色ネオン */
.hero-badge-wrap::before{content:"";position:absolute;inset:64px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#ff2d74,#ffd84d,#36e0ff,#9a78ff,#ff2d74);
  filter:blur(11px);opacity:.85;}

/* hero: 読み込み時の登場アニメ＋写真のゆるやかな動き（動きを減らす設定では無効） */
@media (prefers-reduced-motion: no-preference){
  .hero-title-img,.hero-script-img,.hero-lead,.hero-cta-row,.hero-live{
    animation:heroIn .7s cubic-bezier(.2,.75,.25,1) both;}
  /* 未経験バッジ：登場後に上下へ小刻みに揺れる */
  .hero-flag{animation:heroIn .7s cubic-bezier(.2,.75,.25,1) .05s both,
    flagBob 2.4s ease-in-out 1s infinite;}
  .hero-title-img{animation-delay:.18s;}
  .hero-script-img{animation-delay:.34s;}
  .hero-lead{animation-delay:.50s;}
  .hero-cta-row{animation-delay:.64s;}
  .hero-live{animation-delay:.78s;}
  /* バッジ：登場後にふわふわ浮遊、周囲のネオンは回転 */
  .hero-badge-wrap{animation:heroIn .7s cubic-bezier(.2,.75,.25,1) .94s both,
    badgeFloat 3.6s ease-in-out 1.9s infinite;}
  .hero-badge-wrap::before{animation:neonSpin 3.4s linear infinite;}
  @keyframes heroIn{
    from{opacity:0;transform:translateY(24px) scale(.9) rotate(var(--rot,0deg));}
    to{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot,0deg));}
  }
  @keyframes badgeFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
  @keyframes neonSpin{to{transform:rotate(360deg);}}
  @keyframes flagBob{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(-6deg) translateY(-5px);}}
}

/* ===== SPEC / 両方特化型 ===== */
.spec{background:linear-gradient(180deg,#fffbfd 0%,#fff3f8 100%);
  padding:2.4rem 1.4rem 2.6rem;position:relative;}
.spec-inner{max-width:var(--wrap);margin:0 auto;text-align:center;}
.spec-eyebrow{font-size:clamp(1.4rem,2.9vw,2.05rem);font-weight:700;color:#5a6276;
  margin-bottom:.4rem;line-height:1.25;}
.spec-eyebrow strong{color:inherit;font-size:1.1em;}
.spec-title{font-family:var(--font-head);font-weight:900;
  font-size:clamp(1.45rem,3.4vw,2.36rem);line-height:1.45;color:var(--ink);
  margin-bottom:1.6rem;}
.spec-quote{position:relative;color:var(--ink);}
.spec-title .qm{color:var(--pink);}
.spec-title .c-pink,.spec-title .c-blue{position:relative;}
.spec-title .c-pink::after,.spec-title .c-blue::after{content:"";position:absolute;
  left:-2%;right:-2%;bottom:.08em;height:.34em;z-index:-1;border-radius:3px;opacity:.5;}
.spec-title .c-pink::after{background:#ffc4d8;}
.spec-title .c-blue::after{background:#bcd0ff;}

.spec-features{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.5rem;margin-bottom:1.6rem;}
.spf{flex:1 1 165px;max-width:200px;display:flex;flex-direction:column;align-items:center;}
.spf-circle{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid #ffd0e2;margin-bottom:.85rem;
  box-shadow:0 8px 18px rgba(255,45,116,.12);}
.spf-icon{width:46px;height:46px;object-fit:contain;}
/* アイコン＋丸ごとふわふわ上下に（少しずつタイミングをずらす） */
@media (prefers-reduced-motion: no-preference){
  .spf-circle{animation:spfBob 2.8s ease-in-out infinite;}
  .spf:nth-child(2) .spf-circle{animation-delay:.3s;}
  .spf:nth-child(3) .spf-circle{animation-delay:.6s;}
  .spf:nth-child(4) .spf-circle{animation-delay:.9s;}
  .spf:nth-child(5) .spf-circle{animation-delay:1.2s;}
  @keyframes spfBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
}
.spf-title{font-family:var(--font-head);font-weight:900;font-size:1rem;
  color:var(--pink);line-height:1.35;margin-bottom:.45rem;}
.spf-text{font-size:.82rem;font-weight:500;color:#5a6276;line-height:1.6;}

.spec-stat{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  justify-content:center;background:#fff;border-radius:999px;
  padding:.7rem 1.5rem;font-size:clamp(.82rem,2.2vw,1rem);font-weight:700;
  color:#3a4154;box-shadow:0 10px 26px rgba(255,45,116,.16);}
.spec-stat strong{font-size:1.3em;font-family:var(--font-head);font-weight:900;}

/* ===== STYLE / 配信スタイル ===== */
.style{background:#fff;padding:3rem 1.4rem 3.2rem;}
.style-inner{max-width:var(--wrap);margin:0 auto;}
/* 大セクション見出し（他セクションのtlb-enと同じOutfit・サイズ・1文字バウンド） */
.style-en{display:block;text-align:center;font-family:var(--font-en);font-weight:800;
  font-size:clamp(58px,9.2vw,150px);line-height:1;letter-spacing:.01em;
  color:var(--ink);margin-bottom:.5rem;}
.style-en .wd{display:inline-block;white-space:nowrap;}   /* 単語単位で折り返し（語中では切れない） */
.style-en .ch{display:inline-block;}
.js .style-en.fade-up{transform:none;}   /* コンテナは動かさず、文字のバウンドだけ見せる */
.style-en.visible .ch{animation:nameBounce 1.3s ease-out both;animation-delay:calc(.15s + var(--n)*.06s);}
/* 「Style」だけ 実写(ピンク)×ゲーム(ブルー) のグラデ文字 */
.style-en .sgrad{background:linear-gradient(96deg,var(--live-deep) 0%,#b06fc7 50%,var(--game-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
/* 「?」を少し斜めに（バウンドと干渉しないよう内側spanで回転） */
.style-en .qmark{display:inline-block;transform:rotate(13deg);transform-origin:50% 60%;}
/* 見出しホバーで「?」がアイコンと同じゆれ（傾き13度を保持したまま同振幅） */
.style-en:hover .qmark{animation:qmarkSway .7s ease-in-out;}
@keyframes qmarkSway{0%,100%{transform:rotate(13deg)}15%{transform:rotate(4deg)}35%{transform:rotate(20deg)}55%{transform:rotate(8deg)}75%{transform:rotate(16deg)}90%{transform:rotate(12deg)}}
@media (min-width:769px){.style-en{white-space:nowrap;font-size:clamp(58px,9.2vw,132px);}}   /* PCは1行表示（超広幅でもコンテナ内に収める） */

/* 見出し直下の日本語サブ（見出しと同じOutfitを先頭に。日本語グリフはNoto Sans JPへ） */
.style-jp{text-align:center;font-family:var(--font-en),var(--font-head);font-weight:700;
  font-size:clamp(.9rem,2vw,1.15rem);letter-spacing:.03em;color:var(--ink);
  margin:.2rem 0 2rem;}

/* カードの操作ヒント。PCは「TAP」、スマホは「TAP or SLIDE」（スワイプ操作があるため） */
.style-lead{text-align:center;font-family:var(--font-en);font-weight:700;color:#b4b9c5;
  letter-spacing:.2em;font-size:.78rem;margin:.5rem 0 .4rem;}

/* === 配信スタイル：山札を切る（重なったデッキ→タップで切替・選択で下に詳細） === */
/* PC・スマホ共通：2枚を山札のように重ね、スクロールでシャッフル登場。 */
/* 上の札タップ＝選択（詳細開閉）／覗く下の札タップ＝前面へ入れ替え。詳細はデッキ下に開く。 */
.style-pick{max-width:var(--wrap);margin:0 auto;}

/* デッキ：2枚を山札状に重ねる器 */
.style-deck{position:relative;margin:0 auto;
  width:min(460px,92vw);height:clamp(400px,106vw,516px);
  perspective:1400px;}

.spick{
  --peek:120px;   /* 待機カードの覗き量（PC）。スマホはメディアクエリで上書き */
  position:absolute;left:50%;top:2%;
  width:min(90%,400px);aspect-ratio:5/6;
  transform-origin:50% 62%;
  border-radius:22px;overflow:hidden;cursor:pointer;background:#0b0b12;
  box-shadow:0 16px 32px rgba(20,20,45,.24);
  -webkit-tap-highlight-color:transparent;opacity:0;
  transition:transform .55s cubic-bezier(.32,.85,.35,1.03),
             filter .35s ease,box-shadow .35s ease,opacity .45s ease;
  will-change:transform;
}
/* 山札のポーズ：下の札（真っ直ぐ・上カードの横から覗く・少し小さめ）／上の札 */
.spick.is-under{transform:translateX(-50%) translateX(var(--peek)) scale(.88);
  filter:brightness(.82) saturate(.92);z-index:1;}
.spick.is-top{transform:translateX(-50%) rotate(-3deg);z-index:2;}
/* 選択：上の札が立ち上がる */
.style-deck .spick.is-top.is-selected{transform:translateX(-50%) translateY(-14px) rotate(0deg) scale(1.03);
  z-index:3;box-shadow:0 26px 46px rgba(20,20,45,.32);}
/* スワイプ中：指に追従させるためトランジション停止＋横移動を許可 */
.style-deck.is-dragging .spick{transition:none;}
.style-deck.is-dragging .spick.is-top{touch-action:pan-y;}

/* 物理シャッフル：前面札は左へ抜けて下段へ／背面札は右へ迫り出して上段へ（交差） */
.style-deck.is-shuffling .spick.is-top{animation:shuffleIn .54s cubic-bezier(.34,.7,.28,1) both;}
.style-deck.is-shuffling .spick.is-under{animation:shuffleOut .54s cubic-bezier(.34,.7,.28,1) both;}
@keyframes shuffleIn{  /* 背面(横)→右へ迫り出し→上段(選択)へ */
  0%{transform:translateX(-50%) translateX(var(--peek)) scale(.88);}
  40%{transform:translateX(-50%) translateX(calc(var(--peek) + 48px)) translateY(-10px) rotate(6deg) scale(1);}
  100%{transform:translateX(-50%) translateY(-14px) rotate(0deg) scale(1.03);}
}
@keyframes shuffleOut{  /* 前面(上段)→左へ抜ける→背面(横)へ回り込む */
  0%{transform:translateX(-50%) translateY(-14px) rotate(0deg) scale(1.03);}
  42%{transform:translateX(-50%) translateX(-48px) translateY(14px) rotate(-6deg) scale(.94);}
  100%{transform:translateX(-50%) translateX(var(--peek)) scale(.88);}
}

/* 登場：下に伏せた状態→山札へ（登場前ポーズを固定し、is-inで解除してトランジション） */
.style-pick:not(.is-in) .spick{transform:translateX(-50%) translateY(54px) scale(.9) rotate(0deg) !important;opacity:0;}
.style-pick.is-in .spick{opacity:1;}
.style-pick.is-in .spick.is-top{transition-delay:.05s;}
.style-pick.is-in .spick.is-under{transition-delay:.16s;}

/* PC（769px以上）のみ：カードを横長に広げて左右の余白を詰める（写真は横長=上下は切れない） */
@media (min-width:769px){
  .style-deck{width:min(1120px,90vw);height:clamp(520px,56vw,760px);}
  .spick{width:min(88%,1000px);aspect-ratio:3/2;--peek:130px;}
}

/* カード面：背景写真＋テーマスクリム＋名前 */
.spick-media{position:absolute;inset:0;z-index:0;}
/* 2枚を同じ場所に重ね、opacityだけで入れ替える（表示/非表示の切替だと一瞬消えて見える）。
   JSは .is-on を付け替えるだけ。切り替えるのは前面(.is-top)の札のみ */
.spick-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s ease;}
.spick-media img.is-on{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .spick-media img{transition:none;}
}
/* スマホは縦長カード（比0.83）に横長写真（比1.6）を入れているので、object-fit:cover が
   左右を切り落とす＝写真の横52%しか見えない。切り取り窓の位置は既定だと写真の中央なので、
   顔が中央に無い写真ほど顔が端に寄る。→ 窓を顔に合わせて横へずらす（縦は触らない）。
   値は「顔の横位置(写真の左端からの割合 f)」からの逆算：
     object-position の X = (f - 0.26) / 0.48       ※0.52は見えている幅の割合、0.26はその半分
   PCはカードが比1.5＝写真の94%が見えている（ほぼ切れない）ので、ずらす意味がない＝中央のまま。
   ※写真を差し替えたら、顔の位置を測り直してここも計算し直すこと */
@media (max-width:768px){
  .spick--live .spick-shot:nth-of-type(1){object-position:22% center;}   /* card-live.jpg   顔 約36% */
  .spick--live .spick-shot:nth-of-type(2){object-position:40% center;}   /* card-live-2.jpg 顔 約53%。%を下げるほど顔は右へ寄る（57%≒中央→40%でしっかり右） */
  .spick--game .spick-shot:nth-of-type(1){object-position:77% center;}   /* card-game.jpg   顔 約63% */
  .spick--game .spick-shot:nth-of-type(2){object-position:14% center;}   /* card-game-2.jpg 顔 約33% */

  /* ゲームの2枚は部屋ごと写した引きの写真で、実写の2枚（人物のアップ）より人が小さい。
     並べると顔の大きさが揃わないので、カードの中で拡大して実写側に合わせる。
     拡大の中心を顔に置くのが肝心。中心が顔からズレると、拡大するほど顔が枠外へ逃げていく。
     縦45%は顔の高さ（写真の上端からの割合）。横は object-position で顔を中央に寄せた後なので50%。 */
  .spick--game .spick-shot{transform-origin:50% 45%;}
  .spick--game .spick-shot:nth-of-type(1){transform:scale(1.5);}
  /* 2枚目だけ、顔が他の3枚より低い位置に写っているので上へ寄せる。
     上げられるのは15%まで。1.3倍にすると写真は上下に15%ずつはみ出す計算なので、
     それ以上ずらすと写真の下端がカードの中に入り、帯の下に地の色（#0b0b12）が覗く。
     ※倍率(1.3)を変えたら、上げられる限界も変わる（限界＝(倍率-1)÷2） */
  .spick--game .spick-shot:nth-of-type(2){transform:translateY(-10%) scale(1.3);}
}
.spick-media::after{content:"";position:absolute;inset:0;}
.spick--live .spick-media::after{background:linear-gradient(to top,rgba(219,74,131,.92) 4%,rgba(255,143,187,.42) 46%,rgba(255,143,187,.05) 78%);}
.spick--game .spick-media::after{background:linear-gradient(to top,rgba(46,120,190,.92) 4%,rgba(124,192,245,.44) 46%,rgba(124,192,245,.07) 78%);}

/* ハッシュタグ吹き出し：白文字・ほぼ透明の白フィル・白縁取り（フロスト）＋左下に尻尾 */
/* CTAの真上にフロー配置 */
.sptags{list-style:none;margin:.5rem 0 .2rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.42rem;}
.sptags li{font-size:clamp(.66rem,1.5vw,.8rem);font-weight:500;color:#fff;
  letter-spacing:.01em;padding:.4em .76em;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  text-shadow:0 1px 6px rgba(0,0,0,.45);}

.spick-label{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  display:flex;flex-direction:column;gap:.2rem;padding:.9rem .95rem 1rem;}
.spick-eyebrow{font-family:var(--font-head);font-weight:800;
  font-size:clamp(.6rem,1.4vw,.74rem);letter-spacing:.24em;line-height:1;
  margin-bottom:.15rem;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.spick--live .spick-eyebrow{color:#ffd7e6;}
.spick--game .spick-eyebrow{color:#d0e0ff;}
.spick-title{font-family:var(--font-head);font-weight:900;line-height:1.12;color:#fff;
  font-size:clamp(1.5rem,5.4vw,2.05rem);white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.45);}
.spick-sub{font-weight:500;font-size:clamp(.82rem,2.2vw,1rem);line-height:1.4;
  white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.45);}
.spick-cta{align-self:flex-start;margin-top:.4rem;
  display:inline-flex;align-items:center;gap:.35em;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;color:#fff;
  padding:.36em .82em;border-radius:999px;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .3s ease,color .3s ease;}
.cta-lead{font-style:normal;}
.cta-lead::before{content:"＋";font-weight:900;}
.cta-label::before{content:"特徴を見る";}
.cta-arrow{display:none;font-size:.88em;line-height:1;}

/* PC（769px以上）のみ：カード拡大に合わせてラベル（中身）も相対的に大きく（ベース定義の後に置いて後勝ちさせる） */
@media (min-width:769px){
  .spick-label{padding:1.6rem 1.9rem 1.75rem;gap:.34rem;}
  .spick-eyebrow{font-size:1rem;letter-spacing:.26em;margin-bottom:.35rem;}
  .spick-title{font-size:2.9rem;}
  .spick-sub{font-size:1.32rem;}
  .sptags{gap:.6rem;margin:.9rem 0 .35rem;}
  .sptags li{font-size:1rem;padding:.46em 1em;border-width:2px;}
  .spick-cta{font-size:1.05rem;padding:.55em 1.2em;margin-top:.75rem;gap:.45em;}
}

/* CTA：上=「特徴を見る」／選択中=「◯◯ライバーを詳しく見る ▼(バウンド)」／下=「切り替え」 */
.style-deck .spick.is-top.is-selected .spick-cta{background:rgba(255,255,255,.96);color:var(--live-deep);border-color:#fff;}
.style-deck .spick--game.is-top.is-selected .spick-cta{color:var(--game-deep);}
.style-deck .spick.is-top.is-selected .cta-lead{display:none;}
.style-deck .spick--live.is-top.is-selected .cta-label::before{content:"実写ライバーを詳しく見る";}
.style-deck .spick--game.is-top.is-selected .cta-label::before{content:"ゲームライバーを詳しく見る";}
.style-deck .spick.is-top.is-selected .cta-arrow{display:inline-block;animation:ctaBounce 1.5s ease-in-out infinite;}
.style-deck .spick.is-under .cta-lead::before{content:"⇄";}
.style-deck .spick.is-under .cta-label::before{content:"切り替え";}
@keyframes ctaBounce{0%,100%{transform:translateY(-1px);}50%{transform:translateY(3px);}}
.spick:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

/* リード文の「／スライド」はスマホのみ表示（PCは非表示） */
.lead-sp{display:none;}

/* 詳細：デッキの下に高さ0→autoで開く */
/* 詳細＝tlbセクションと同じ枠：実写=左(TikTok Live型)／ゲーム=右(Gift Culture型) */
/* 2枚を同一グリッドセルに重ねて位置を完全一致。切替は左右スライド＋フェード。 */
.style-stage{display:grid;margin-top:clamp(0rem,.5vw,.3rem);
  padding-top:clamp(30px,4vw,56px);   /* 見出しはみ出し分の上余白 */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}  /* 全幅ブリード */
.spick-detail{grid-area:1/1;opacity:0;visibility:hidden;will-change:transform,opacity;
  transition:opacity .55s ease,transform .66s cubic-bezier(.2,.72,.24,1),visibility 0s linear .55s;}
.spick-detail--live{transform:translateX(-56px);}   /* 実写は左から */
.spick-detail--game{transform:translateX(56px);}    /* ゲームは右から */
.spick-detail.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s ease,transform .66s cubic-bezier(.2,.72,.24,1);}
.spick-detail-inner{width:100%;}

/* パネル（tlb-cont相当：パステルなテーマ色グラデ＋気持ち白／片側フルブリード＋大角丸） */
.sdt{position:relative;color:#fff;padding:0 0 clamp(2rem,4vw,3.4rem);}
.spick-detail--live .sdt{margin-right:max(0px,calc(50% - 620px));border-radius:0 90px 90px 0;
  background:linear-gradient(130deg,#ec5d95 0%,#ff8bba 44%,#ffbcd7 74%,#ffe6f0 100%);
  box-shadow:10px 14px 50px rgba(232,95,149,.22);}
.spick-detail--game .sdt{margin-left:max(0px,calc(50% - 620px));border-radius:90px 0 0 90px;
  background:linear-gradient(230deg,#4d9ee0 0%,#7cc0f5 44%,#b3daf9 74%,#e3f2ff 100%);
  box-shadow:-10px 14px 50px rgba(63,146,219,.22);}

/* 見出し：白文字＋テーマ影で枠からしっかり上にはみ出す（tlb-head相当） */
.sdt-head{transform:translateY(-33%);position:relative;z-index:1;line-height:1;}
.spick-detail--live .sdt-head{padding-left:max(24px,calc(50% - 620px));text-align:left;text-shadow:0 4px 16px rgba(232,95,149,.72),0 2px 6px rgba(232,95,149,.5);}
.spick-detail--game .sdt-head{padding-right:max(24px,calc(50% - 620px));text-align:right;text-shadow:0 4px 16px rgba(63,146,219,.72),0 2px 6px rgba(63,146,219,.5);}
.sdt-en{display:block;font-family:var(--font-en);font-weight:800;line-height:1;color:#fff;
  font-size:clamp(58px,9.3vw,142px);letter-spacing:.01em;}
.sdt-jp{display:block;font-family:var(--font-en);font-weight:700;color:#fff;
  font-size:clamp(15px,1.9vw,22px);letter-spacing:.18em;margin-top:1.4rem;}

/* 本文：中央コンテンツ幅（人気のギフト例と同じフロスト枠＝半透明白＋白ボーダー） */
.sdt-body{width:min(1040px,100% - 56px);margin:0 auto;position:relative;z-index:1;}

/* Support：ベント（PC）＝主役スペック＋特徴カード4。
   カードはガラス調のまま、アイコンチップだけ1つずつ違うパステルに（マルチ差し色）。
   スマホは下部のメディアクエリでコンパクト2×2に組み替える */
.sbento{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;}
/* ul自体は枠を持たず、中の<li>を親gridの升目に流し込む */
.sbento-cells{display:contents;list-style:none;margin:0;padding:0;}
/* 主役＝スペック（白カード・左に大きく）。特徴カードはガラスのまま */
.sbento-hero{grid-row:span 2;background:#fff;border-radius:24px;padding:24px;
  display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(190,40,100,.20);}
.spick-detail--game .sbento-hero{box-shadow:0 14px 30px rgba(30,92,156,.20);}
.sbento-ribbon{align-self:flex-start;color:#fff;font-weight:900;font-size:12px;
  letter-spacing:.02em;padding:6px 14px;border-radius:999px;margin-bottom:16px;box-shadow:0 6px 14px rgba(0,0,0,.12);}
.spick-detail--live .sbento-ribbon{background:linear-gradient(90deg,#ff7bac 0%,#b98bff 58%);}
.spick-detail--game .sbento-ribbon{background:linear-gradient(90deg,#5db4f5 0%,#6d5fe6 58%);}
.sbento-spec{margin:0;}
.sbento-spec > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;}
.sbento-spec > div + div{border-top:1px dashed #f0cede;}
.spick-detail--game .sbento-spec > div + div{border-top-color:#cfe0f2;}
.sbento-spec dt{font-family:var(--font-head);font-weight:800;font-size:12.5px;white-space:nowrap;}
.sbento-spec dd{margin:0;font-family:var(--font-head);font-weight:900;font-size:14.5px;line-height:1.4;text-align:right;}
.spick-detail--live .sbento-spec dt{color:#b06886;}
.spick-detail--live .sbento-spec dd{color:#a01f5c;}
.spick-detail--game .sbento-spec dt{color:#6786ad;}
.spick-detail--game .sbento-spec dd{color:#1f5c9c;}
/* 特徴カード（ガラス） */
.sbento-cell{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);border-radius:20px;
  padding:15px 16px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;
  transition:transform .3s ease,background .3s ease;}
.sbento-cell:hover{transform:translateY(-4px);background:rgba(255,255,255,.24);}
.sbento-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 6px 14px rgba(0,0,0,.12);}
.sbento-ico img{width:34px;height:34px;object-fit:contain;transform-origin:center bottom;}
.sbento-cell:hover .sbento-ico img{animation:giftSway .7s ease-in-out;}
/* マルチ差し色チップ（4枚を色違いに）＝実写 */
.sbento-cell:nth-child(1) .sbento-ico{background:#ffe0ec;}
.sbento-cell:nth-child(2) .sbento-ico{background:#e7defb;}
.sbento-cell:nth-child(3) .sbento-ico{background:#d9eefb;}
.sbento-cell:nth-child(4) .sbento-ico{background:#ffe9d6;}
/* ゲームはアイコンの色に合わせたパステルに（OBS=青／切り抜き=グレー／トロフィー=金／実況=赤） */
.spick-detail--game .sbento-cell:nth-child(1) .sbento-ico{background:#d7ecfb;}
.spick-detail--game .sbento-cell:nth-child(2) .sbento-ico{background:#e6e8f1;}
.spick-detail--game .sbento-cell:nth-child(3) .sbento-ico{background:#ffeec2;}
.spick-detail--game .sbento-cell:nth-child(4) .sbento-ico{background:#ffdede;}
.sbento-ct h4{font-family:var(--font-head);font-weight:900;color:#fff;font-size:15px;line-height:1.3;margin:0 0 3px;}
.sbento-ct p{font-weight:500;color:rgba(255,255,255,.96);font-size:12.5px;line-height:1.5;margin:0;}
/* ガラスの特徴カード・note は色地でも読めるようテーマ発色シャドウ（白カードのスペックは影なし） */
.spick-detail--live .sbento-ct h4,.spick-detail--live .sbento-ct p,
.spick-detail--live .sbento-note{text-shadow:0 2px 10px rgba(232,95,149,.85),0 1px 3px rgba(232,95,149,.6);}
.spick-detail--game .sbento-ct h4,.spick-detail--game .sbento-ct p,
.spick-detail--game .sbento-note{text-shadow:0 2px 10px rgba(63,146,219,.85),0 1px 3px rgba(63,146,219,.6);}
.sbento-note{margin:14px 2px clamp(1.2rem,2.4vw,1.7rem);font-weight:600;font-size:.76rem;color:rgba(255,255,255,.92);}
/* スマホ：スペックはPCと同じ1列（行間に点線）／特徴は2×2 */
@media (max-width:768px){
  .sbento{grid-template-columns:1fr;grid-template-rows:none;gap:12px;}
  .sbento-hero{grid-row:auto;padding:16px 18px;border-radius:20px;}
  .sbento-ribbon{font-size:11px;margin-bottom:12px;}
  .sbento-spec > div{padding:9px 0;}
  .sbento-spec dt{font-size:12px;}
  .sbento-spec dd{font-size:13px;}
  .sbento-cells{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .sbento-cell{grid-template-columns:1fr;justify-items:center;text-align:center;padding:14px 10px;gap:8px;}
  .sbento-ico{width:44px;height:44px;border-radius:12px;}
  .sbento-ico img{width:30px;height:30px;}
  .sbento-ct h4{font-size:12.5px;}
  .sbento-ct p{font-size:10.5px;line-height:1.45;}
}

/* デビューまでの流れ（4ステップ・番号＋矢印） */
.sflow-title{font-family:var(--font-head);font-weight:900;color:#fff;text-align:center;
  font-size:clamp(17px,2vw,21px);letter-spacing:.04em;margin-bottom:clamp(1.1rem,2vw,1.5rem);
  text-shadow:0 2px 10px rgba(0,0,0,.42);}
.sflow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch;}
.sflow-step{position:relative;background:#fff;border-radius:16px;
  padding:20px 14px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.10);}
.sflow-num{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;
  font-family:var(--font-en);font-weight:800;font-size:16px;line-height:1;
  margin-bottom:12px;box-shadow:0 4px 10px rgba(0,0,0,.18);}
.spick-detail--live .sflow-num{background:var(--live-deep);}
.spick-detail--game .sflow-num{background:var(--game-deep);}
.sflow-text{display:flex;flex-direction:column;}
.sflow-name{font-family:var(--font-head);font-weight:900;
  font-size:clamp(13px,1.3vw,15px);line-height:1.3;margin-bottom:.35rem;}
.spick-detail--live .sflow-name{color:var(--live-deep);}
.spick-detail--game .sflow-name{color:var(--game-deep);}
.sflow-desc{color:#4b5563;font-weight:600;
  font-size:clamp(11px,1vw,12px);line-height:1.5;}
/* 矢印コネクタ：横並び時はカード間の隙間中央へ（白シェブロン・右へ流れる動き） */
.sflow-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-12px;
  transform:translate(50%,-50%);width:26px;height:26px;z-index:3;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
  animation:sflowArrow 1.6s ease-in-out infinite;
  background:no-repeat center/contain
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");}
.sflow-step:nth-child(2)::after{animation-delay:.25s;}
.sflow-step:nth-child(3)::after{animation-delay:.5s;}
@keyframes sflowArrow{
  0%,100%{transform:translate(50%,-50%);}
  50%{transform:translate(calc(50% + 6px),-50%);}
}

@media (prefers-reduced-motion:reduce){
  .spick{opacity:1;transition:filter .3s ease,box-shadow .3s ease;}
  .style-pick:not(.is-in) .spick{transform:none !important;opacity:1;}
  .style-pick.is-in .spick.is-top,.style-pick.is-in .spick.is-under{transition-delay:0s;}
  .spick-detail{transition:opacity .25s ease,visibility 0s linear .25s;}
  .spick-detail--live,.spick-detail--game,.spick-detail.is-open{transform:none;}
  .cta-arrow{animation:none !important;}
  .sbento-cell:hover .sbento-ico img{animation:none;}
  .style-en:hover .qmark{animation:none;}
  .sflow-step:not(:last-child)::after{animation:none;}
  .cmp-v{animation:none !important;}
}

/* ===== SUPPORT STRIP ===== */
.support{margin-top:3rem;border:2px solid var(--pink-soft);border-radius:24px;
  padding:1.8rem 2rem;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;
  align-items:center;background:#fffafc;}
.support-head{display:flex;align-items:center;gap:.7rem;
  font-size:1.1rem;font-weight:700;color:#3a4154;line-height:1.4;
  border-right:2px dashed #ffc9db;padding-right:1.5rem;}
.support-head strong{color:var(--pink);font-family:var(--font-head);font-weight:900;font-size:1.25rem;}
.support-head-icon{width:36px;height:36px;object-fit:contain;flex:none;}
.support-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.sup{display:flex;gap:.6rem;}
.sup-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink-soft);}
.sup-icon{width:22px;height:22px;object-fit:contain;}
.sup h4{font-size:.88rem;font-weight:900;color:#2f3548;margin-bottom:.15rem;}
.sup p{font-size:.74rem;font-weight:500;color:#6b7388;line-height:1.5;}

/* ===== COMPARE / 2スタイル比較 ===== */
.compare{background:linear-gradient(180deg,#ffffff 0%,#faf5ff 46%,#f4f8ff 100%);
  padding:4.2rem 1.4rem 4.6rem;}
.compare-inner{max-width:1020px;margin:0 auto;}
.cmp-title{font-family:var(--font-head);font-weight:900;text-align:center;
  font-size:clamp(1.4rem,3.6vw,2.3rem);line-height:1.4;color:var(--ink);
  letter-spacing:.01em;margin-bottom:clamp(1.8rem,4vw,2.6rem);}
.cmp-title-accent{background:linear-gradient(96deg,var(--live-deep) 0%,#a25fd0 50%,var(--game-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  white-space:nowrap;}

.cmp{background:#fff;border:1px solid #ece4f7;border-radius:24px;
  box-shadow:0 24px 60px rgba(120,60,160,.12);overflow:hidden;}
/* 各行は共通グリッド：ラベル / 実写 / ゲーム */
.cmp-head,.cmp-row{display:grid;grid-template-columns:clamp(112px,20%,188px) 1fr 1fr;align-items:stretch;}
.cmp-cell{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.15rem 1rem;line-height:1.5;}

/* ヘッダー行（ピル） */
.cmp-head{padding:14px;gap:12px;}
.cmp-corner{padding:0;}
.cmp-th{font-family:var(--font-head);font-weight:900;color:#fff;gap:.5rem;
  font-size:clamp(.95rem,1.8vw,1.12rem);border-radius:14px;padding:.85rem 1rem;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  border:none;appearance:none;-webkit-appearance:none;cursor:default;}
.cmp-th--live{background:linear-gradient(135deg,#ff5fa2 0%,#e4185f 100%);}
.cmp-th--game{background:linear-gradient(135deg,#5bb4f0 0%,#3f92db 100%);}
.cmp-th-ic{width:1.25em;height:1.25em;flex:none;}
.cmp-tabhint{display:none;}   /* PCでは非表示（スマホのタブ用ヒント） */

/* データ行 */
.cmp-row{border-top:1px solid #f0eaf7;}
.cmp-rl{font-family:var(--font-head);font-weight:800;color:#8a7ea3;
  font-size:clamp(.82rem,1.5vw,.95rem);letter-spacing:.02em;background:#faf7ff;}
.cmp-v{font-weight:700;color:var(--ink);font-size:clamp(.86rem,1.6vw,1rem);}
.cmp-v[data-side="live"]{background:#fff6fa;}
.cmp-v[data-side="game"]{background:#f5faff;}

/* サポート行（2列ぶち抜き） */
.cmp-row--full .cmp-both{grid-column:2 / 4;display:block;font-weight:800;color:var(--ink);
  font-size:clamp(.9rem,1.7vw,1.05rem);line-height:1.55;
  background:linear-gradient(100deg,#fff3f8 0%,#f3f1ff 52%,#eef7ff 100%);}
.cmp-both strong{background:linear-gradient(96deg,var(--live-deep),var(--game-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-weight:900;}

.cmp-note{text-align:center;color:#a99fbb;font-weight:600;
  font-size:clamp(.76rem,1.4vw,.86rem);margin-top:1.3rem;line-height:1.6;}
@keyframes cmpSwap{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}

/* ===== APPLY CTA ===== */
/* 白ベース。すぐ上の Message が大きなピンクの塊なので、ここもピンクにすると
   帯が続いて見えるうえ、ピンクの背景にピンクのボタンで一番押してほしいものが埋もれる。
   白にすると、ボタンがこの画面で唯一の色になる */
.apply{background:#fff;
  padding:4.5rem 1.4rem;text-align:center;position:relative;overflow:hidden;}
.apply::before,.apply::after{content:"";position:absolute;border-radius:50%;
  background:rgba(228,24,95,.07);}
.apply::before{width:280px;height:280px;top:-120px;left:-60px;}
.apply::after{width:200px;height:200px;bottom:-90px;right:-40px;}
.apply-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;color:var(--navy);}
.apply-flag{display:inline-block;background:linear-gradient(96deg,#e4185f,#b24bff);
  color:#fff;font-weight:900;
  font-size:.9rem;padding:.4em 1.2em;border-radius:999px;margin-bottom:1.1rem;
  transform:rotate(-1.5deg);box-shadow:0 6px 16px rgba(160,60,255,.28);}
.apply-title{font-family:var(--font-head);font-weight:900;
  font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.4;margin-bottom:1rem;}
/* 408px未満だけ、見出しを縮める。
   この文の1行目「あなたの「やってみたい」を、」は、文字25.6pxのとき363px必要。
   使える幅は「画面幅 − 左右の余白44.8px」なので、408pxを切ると入りきらず、
   「を、」だけが2行目に落ちて全体が3行になる（390pxで18px・360pxで48pxはみ出す＝実測）。
   408px以上では下限の25.6pxのまま＝今までと1pxも変わらない。
   6.6vw-3px は収まる限界からの逆算：この文は1行にフォントサイズの約14.2倍の幅を使うので、
   必要サイズ＝(画面幅-44.8)÷14.2 ≒ 7.05vw-3.16px。それを少し下回らせて余裕を取っている。
   ※文言を変えたら、14.2も408pxも計算し直すこと */
@media (max-width:407px){
  .apply-title{font-size:calc(6.6vw - 3px);}
}
/* 「一歩」。ボタンと同じピンク〜紫で、この帯の色を2つに絞る */
.apply-em{background:linear-gradient(96deg,#e4185f,#b24bff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
/* 白背景に変えたので、白文字・半透明の白は使えない。文字は濃色、チェックは塗りのピンクへ */
.apply-lead{font-weight:700;font-size:1rem;margin-bottom:2rem;color:#5a6480;}
.apply-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin-top:1.6rem;}
.apply-checks li{position:relative;padding-left:1.5rem;font-weight:700;font-size:.95rem;color:#5a6480;}
.apply-checks li::before{content:"✓";position:absolute;left:0;font-weight:900;
  color:#fff;background:var(--pink);width:1.1rem;height:1.1rem;
  border-radius:50%;display:grid;place-items:center;font-size:.7rem;top:.25em;}

/* ===== FOOTER ===== */
.ftr{background:var(--ink);color:#cfd3e0;padding:2.6rem 1.4rem 1.6rem;}
.ftr-inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:1.4rem;align-items:center;justify-content:space-between;}
.ftr-brand{display:flex;flex-direction:column;line-height:1;}
.brand-logo--ftr{height:34px;margin-bottom:.35rem;}
.brand-sub--ftr{color:#8b93a6;}
.ftr-nav{display:flex;flex-wrap:wrap;gap:1.3rem;}
.ftr-nav a{font-size:.85rem;font-weight:700;color:#cfd3e0;}
.ftr-nav a:hover{color:var(--pink);}
/* 会社情報（会社感を出すための運営会社表記）。区切り線でブランド/ナビと分ける */
.ftr-company{max-width:var(--wrap);margin:1.6rem auto 0;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-style:normal;color:#9aa1b4;font-size:.78rem;line-height:1.85;
  display:flex;flex-direction:column;gap:.12rem;}
.ftr-company-name{font-weight:800;color:#dfe2ec;font-size:.9rem;letter-spacing:.02em;margin-bottom:.15rem;}
.ftr-company a{color:inherit;}
.ftr-company a:hover{color:var(--pink);}
.ftr-copy{max-width:var(--wrap);margin:1rem auto 0;font-size:.72rem;color:#7d859a;
  font-family:var(--font-en);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* PCは従来通り：ヘッダーは常に表示。最上部は透明で、スクロールしたら黒帯。ハンバーガーは使わない */
@media (min-width:1001px){
  .hdr--mini{pointer-events:auto;background:rgba(18,18,24,.92);backdrop-filter:blur(10px);
    border-bottom-color:rgba(255,255,255,.1);}
  .hdr--mini .brand{opacity:1;visibility:visible;transform:none;}
  .gnav{position:static;width:auto;flex-direction:row;gap:1.15rem;
    background:none;backdrop-filter:none;border:none;border-radius:0;box-shadow:none;overflow:visible;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .gnav-link{padding:.2rem 0;width:auto;border-top:none;text-shadow:0 1px 6px rgba(0,0,0,.45);}
  .gnav-link:hover::after{width:100%;}
  .hdr-burger{display:none;}
}

@media (max-width:1000px){
  .hero-live{width:280px;}
  .support{grid-template-columns:1fr;}
  .support-head{border-right:none;border-bottom:2px dashed #ffc9db;
    padding-right:0;padding-bottom:1rem;justify-content:center;text-align:center;}
  .support-list{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:760px){
  /* スマホ版ヘッダーをコンパクトに */
  .hdr-inner{padding:.34rem .9rem;gap:.6rem;}
  .gnav{right:.9rem;} /* ヘッダー内側の余白が縮むぶん、メニュー板もハンバーガーに合わせる */
  .brand-name{font-size:1.3rem;}
  .brand-sub{font-size:.48rem;letter-spacing:.18em;}
  .btn-cta--sm{padding:.5em .9em;font-size:.74rem;}
  .btn-cta--sm svg{width:11px;height:11px;}
  /* スマホ版：写真を見せつつ、コピーを上下グループに分けて配置 */
  .hero{min-height:100vh;min-height:100dvh;align-items:stretch;padding-top:60px;}
  /* スマホ版はグラデを少し小さく */
  .hero-logo-glow{width:560px;height:360px;top:-190px;left:-250px;}
  /* 女性を右へ寄せて、左上/左下のオブジェクトと重ならないように */
  .hero-img{object-fit:cover;object-position:50% 22%;
    transform:scale(1.3);transform-origin:3% 32%;}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(12,10,22,.5) 0%,rgba(12,10,22,.12) 28%,rgba(12,10,22,.12) 50%,rgba(12,10,22,.85) 100%);}
  .hero-inner{padding:1.2rem 1.2rem 1.8rem;display:flex;flex-direction:column;}
  /* 上＝バッジ＋見出し（左上）／下＝リード＋ボタン（左下） */
  .hero-copy{max-width:100%;flex:1;display:flex;flex-direction:column;justify-content:space-between;}
  .hero-copy-top,.hero-copy-bottom{display:flex;flex-direction:column;align-items:flex-start;}
  .hero-copy-top{margin-top:0;}
  /* スマホ版：各オブジェクトをさらに小さく */
  .hero-flag{font-size:.66rem;padding:.3em .8em;margin-bottom:-0.4rem;top:0;}
  .hero-flag::after{left:18px;}
  .hero-title-img{width:310px;}
  .hero-script-img{width:170px;margin-top:-1.6rem;margin-left:30px;}
  .hero-title{gap:.18rem;margin-bottom:.9rem;}
  .ht-slab--lead{font-size:.72rem;}
  .hero-lead{gap:.35rem;margin-bottom:1rem;}
  .hero-bolt{width:36px;height:36px;}
  .btn-cta--lg{padding:.68em 1.1em;font-size:.84rem;}
  .hero-cta-note{font-size:.74rem;}
  /* スマホ版ではLIVEチャットを一旦非表示 */
  .hero-live{display:none;}
  .hero-badge-wrap{right:.35rem;bottom:5.4rem;top:auto;width:180px;height:180px;}
  .hero-badge-wrap::before{inset:38px;filter:blur(8px);}

  /* === スマホ：山札デッキは共通（サイズはベースのclampに委譲） === */
  .style-lead{margin:-.4rem 0 1rem;font-size:.72rem;}
  .lead-sp{display:inline;}   /* スマホは「 or SLIDE」を表示 */
  .spick{--peek:52px;}   /* 覗き量はスマホでは従来どおり */
  .support-list{grid-template-columns:1fr;}
  /* 吹き出しタグは折り返さず、画面幅に応じて自動縮小して一行を保証 */
  .sptags{flex-wrap:nowrap;gap:.34rem;}
  .sptags li{font-size:clamp(.58rem,2.8vw,.72rem);padding:.34em .62em;letter-spacing:0;}
  .spf{flex-basis:130px;}
  .spf-circle{width:70px;height:70px;}
  .spf-icon{width:38px;height:38px;}
  .spf-title{font-size:.88rem;}
  .spf-text{font-size:.74rem;}
  /* スマホ版「両方特化型」：全体的に小さく＆改行を整える */
  .spec{padding:2rem 1.2rem 2.2rem;}
  .spec-eyebrow{font-size:1.15rem;}
  .spec-title{font-size:1.2rem;line-height:1.55;}
  .spec-stat{font-size:.58rem;padding:.5rem .8rem;gap:.35rem;flex-wrap:nowrap;white-space:nowrap;}
  .spec-stat strong{font-size:1.1em;}
  .spec-stat svg{width:16px;height:16px;flex:none;}
  /* スマホ版ABOUT本文を小さく */
  .about{padding:56px 0 56px;}
  .about-text{font-size:9px;line-height:1.9;}
  .style-head{font-size:1.3rem;}
  /* スマホ版：サポートは .sbento 側で2×2化。流れは縦積み（矢印は下向き） */
  .sflow-steps{grid-template-columns:1fr;gap:16px;}
  .sflow-step{flex-direction:row;justify-content:flex-start;gap:12px;text-align:left;padding:14px 16px;}
  .sflow-num{margin-bottom:0;flex:none;}
  .sflow-text{flex:1;align-items:flex-start;}
  .sflow-name{margin-bottom:.15rem;}
  .sflow-step:not(:last-child)::after{top:auto;right:auto;bottom:-8px;left:32px;width:22px;height:22px;
    transform:translate(-50%,50%) rotate(90deg);animation:sflowArrowV 1.6s ease-in-out infinite;}
  @keyframes sflowArrowV{
    0%,100%{transform:translate(-50%,50%) rotate(90deg);}
    50%{transform:translate(-50%,calc(50% + 6px)) rotate(90deg);}
  }
  .ftr-inner{flex-direction:column;align-items:flex-start;}

  /* 2スタイル比較：スマホはタブ切替（PCと同じ表を縦1列で） */
  .compare{padding:3rem 1.1rem 3.4rem;}
  .cmp-head{grid-template-columns:1fr 1fr;gap:8px;padding:10px;}
  .cmp-corner{display:none;}
  .cmp-th{width:100%;cursor:pointer;font-size:.94rem;padding:.72rem .5rem;border-radius:12px;
    transition:filter .2s ease,opacity .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;}
  /* 非アクティブタブはグレーに沈める */
  .cmp[data-active="live"] .cmp-th--game,
  .cmp[data-active="game"] .cmp-th--live{background:#eef0f5;color:#9aa1b2;box-shadow:none;}
  .cmp-tabhint{display:block;text-align:center;color:#b3a9c6;font-weight:700;
    font-size:.68rem;letter-spacing:.06em;margin:-2px 0 2px;}
  /* データ行：ラベル + 値（アクティブ側のみ表示） */
  .cmp-row{grid-template-columns:clamp(84px,26%,120px) 1fr;}
  .cmp-cell{padding:.9rem .85rem;}
  .cmp-rl{justify-content:flex-start;text-align:left;font-size:.84rem;}
  .cmp-v{justify-content:flex-start;text-align:left;font-size:.92rem;
    border-left:3px solid transparent;}
  .cmp[data-active="live"] .cmp-v[data-side="game"]{display:none;}
  .cmp[data-active="game"] .cmp-v[data-side="live"]{display:none;}
  /* 表示中の値：display切替でフェード＋スライドを再生 */
  .cmp[data-active="live"] .cmp-v[data-side="live"],
  .cmp[data-active="game"] .cmp-v[data-side="game"]{display:flex;animation:cmpSwap .32s ease;}
  .cmp[data-active="live"] .cmp-v[data-side="live"]{background:#fff6fa;border-left-color:#f06aa2;}
  .cmp[data-active="game"] .cmp-v[data-side="game"]{background:#f5faff;border-left-color:#5bb4f0;}
  /* サポート共通行 */
  .cmp-row--full{grid-template-columns:clamp(84px,26%,120px) 1fr;}
  .cmp-row--full .cmp-both{grid-column:auto;justify-content:flex-start;text-align:left;font-size:.9rem;}
  .cmp-note{margin-top:1rem;}
}

@media (max-width:420px){
  .hero-title-img{width:270px;}
  .hero-script-img{width:148px;}
  .hero-cta-note{font-size:.72rem;}
}

/* ===== 移植: ABOUT（私たちについて）/ OWNER（オーナーの想い）===== */
.deco{position:absolute;pointer-events:none;}
.cover{width:100%;height:100%;object-fit:cover;object-position:center;}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.82);}50%{opacity:1;transform:scale(1.12);}}
.eyebrow{font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;letter-spacing:4px;}
.eyebrow--lg{font-size:14px;}
.eyebrow--pink{color:#ff4d8d;}

.about{position:relative;overflow:hidden;padding:90px 0 88px;background:#fff;}
.about-sparkle{top:60px;left:3%;width:30px;animation:twinkle 3.6s ease-in-out infinite;}
.about-grid{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;}
.about-title{font-family:'Noto Sans JP',sans-serif;font-weight:900;font-size:clamp(28px,3.6vw,44px);line-height:1.36;color:#2e3a52;margin:14px 0 0;}
.about-text{font-size:15px;line-height:2.05;font-weight:500;color:#5a6478;margin:24px 0 0;}
.about-underline{margin-top:18px;}
.about-media{position:relative;}
.about-photo{position:relative;border-radius:54% 46% 52% 48% / 58% 56% 44% 42%;overflow:hidden;aspect-ratio:4/3;box-shadow:0 22px 48px rgba(255,77,141,.16);border:5px solid #fff;}
.about-bubble{position:absolute;z-index:3;top:-14px;left:8%;background:#fff;border:2px solid #ffd0e2;color:#5a6478;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:13px;padding:10px 18px;border-radius:18px 18px 18px 4px;box-shadow:0 8px 18px rgba(255,77,141,.16);}
.about-badge-circle{position:absolute;z-index:2;right:-10px;bottom:-18px;width:128px;height:128px;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 30px rgba(124,77,255,.22);background:repeating-linear-gradient(45deg,#efe9fb,#efe9fb 12px,#e7dffa 12px,#e7dffa 24px);display:flex;align-items:center;justify-content:center;}
.about-sparkle2{position:absolute;top:-26px;right:14%;width:36px;animation:twinkle 3.4s ease-in-out infinite;}

/* ===== OWNER / オーナーの想い（メッセージ帯・Feliceピンク） ===== */
.ownerMsg{position:relative;padding:96px 0 100px;background:#fff;overflow:hidden;}
.ownerMsg-cont{
  position:relative;
  margin-right:max(0px,calc(50% - 620px));
  background:linear-gradient(130deg,#e4185f 0%,#ff7ba8 100%);
  color:#fff;
  border-radius:0 90px 90px 0;
  box-shadow:10px 14px 50px rgba(228,24,95,.22);
  padding:0 0 92px;
}
.ownerMsg-head{
  padding-left:max(24px,calc(50% - 620px));
  transform:translateY(-32%);
  text-shadow:0 -6px 22px rgba(228,24,95,.30);
}
.ownerMsg-en{display:block;font-family:var(--font-en);font-weight:800;font-size:clamp(58px,9.2vw,150px);line-height:1;letter-spacing:.01em;}
.ownerMsg-jp{font-family:var(--font-head);font-weight:900;font-size:clamp(19px,2.3vw,30px);}

.ownerMsg-body{width:min(1000px,100% - 56px);margin:0 auto;}
/* PC：本文（左）＋写真（右）を横並び。スマホでは縦積みにする（下の @media 参照）。
   署名は .ownerMsg-main の外＝本文・写真の下に全幅で置く */
.ownerMsg-main{display:flex;align-items:center;gap:50px;}
.ownerMsg-txt{flex:1;min-width:0;font-size:15px;line-height:1.7;font-weight:500;}
.ownerMsg-txt p{margin:0 0 11px;}
.ownerMsg-show{position:relative;flex:none;width:360px;aspect-ratio:4/3;
  border-radius:16px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.22);}
.ownerMsg-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%;opacity:0;transition:opacity 1.2s ease;}
.ownerMsg-shot.is-on{opacity:1;}

.ownerMsg-quote{display:block;font-family:var(--font-en);font-weight:800;font-size:68px;line-height:.4;color:rgba(255,255,255,.42);}
.ownerMsg-lead{font-family:var(--font-head);font-weight:900;font-size:clamp(20px,2.5vw,27px);line-height:1.55;margin:10px 0 22px;}
.ownerMsg-mark{box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(transparent 60%,rgba(255,255,255,.30) 60%);padding:0 .12em;}

.ownerMsg-sign{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.38);}
.ownerMsg-en-sm{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.85);}
.ownerMsg-name{font-family:var(--font-head);font-weight:900;font-size:23px;margin-top:4px;display:flex;align-items:baseline;gap:12px;}
.ownerMsg-name-en{font-family:var(--font-script);font-weight:700;font-size:21px;color:#ffe1ec;}
.ownerMsg-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ownerMsg-tags span{background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:11px;padding:5px 13px;border-radius:999px;}

/* スマホは Message セクションを（ほぼ）1画面に収めたいので、
   見出し・引用符・リード・本文・写真・署名の余白と文字をまとめて詰める。
   数値は「1画面(≒700〜760px)に収まるか」を基準に調整。詰めすぎたら各値を戻す */
@media (max-width:768px){
  .about-grid{grid-template-columns:1fr;}
  .ownerMsg{padding:38px 0 40px;}
  .ownerMsg-cont{margin-right:0;border-radius:0 32px 32px 0;padding-bottom:32px;}
  .ownerMsg-head{transform:translateY(-24%);padding-left:20px;}
  .ownerMsg-en{font-size:clamp(46px,15vw,82px);}
  .ownerMsg-jp{font-size:18px;}
  .ownerMsg-body{width:calc(100% - 40px);}
  /* スマホは横並びをやめて縦積み：本文 → 写真（署名はさらに下） */
  .ownerMsg-main{flex-direction:column;align-items:stretch;gap:0;}
  .ownerMsg-quote{font-size:38px;}
  .ownerMsg-txt{font-size:13px;line-height:1.55;}
  .ownerMsg-txt p{margin:0 0 6px;}
  /* 1段落目と2段落目を1ブロックに見せる（間の段落余白だけ消す＝指定の改行レイアウト） */
  .ownerMsg-txt p:nth-of-type(2){margin-bottom:0;}
  /* 中の画像が absolute なので枠は必ず明示的な幅を持たせる（auto だと幅0に潰れて写真が消える） */
  .ownerMsg-show{width:min(250px,100%);margin:16px auto 2px;}
  .ownerMsg-sign{margin-top:14px;padding-top:11px;}
  .ownerMsg-name{font-size:18px;}
  .ownerMsg-tags{margin-top:8px;}
}

/* ===== ABOUT / TikTok（Messageセクション風・左右交互の帯） ===== */
/* 帯の色は「左右の位置」ではなく帯ごとに指定する。
   組み立ては共通で「濃い色 0% → 明るくした同系色 52% → 右端に次の色 100%」 */
.tlb--pink{
  --tlb-grad:linear-gradient(130deg,#e4185f 0%,#e85a9a 52%,#7e2fd6 100%);
  --tlb-shadow:rgba(228,24,95,.22);
  --tlb-glow:rgba(228,24,95,.72);--tlb-glow2:rgba(228,24,95,.5);
  --tlb-accent:#e4185f;--tlb-coin:#ffe1ec;}
/* ② Gift Culture：紫メイン、右端は③の左端と同じ青につなぐ */
.tlb--purple{
  --tlb-grad:linear-gradient(130deg,#7e2fd6 0%,#9c45dd 52%,#5142de 100%);
  --tlb-shadow:rgba(126,47,214,.26);
  --tlb-glow:rgba(126,47,214,.72);--tlb-glow2:rgba(126,47,214,.5);
  --tlb-accent:#8f33e6;--tlb-coin:#ece0ff;}
/* ③ Reward：青メイン、右端に水色 */
.tlb--blue{
  --tlb-grad:linear-gradient(130deg,#2455e6 0%,#5b8bf0 52%,#4fc9f5 100%);
  --tlb-shadow:rgba(36,85,230,.26);
  --tlb-glow:rgba(36,85,230,.72);--tlb-glow2:rgba(36,85,230,.5);
  --tlb-accent:#2455e6;--tlb-coin:#dce6ff;}
/* ④ Story：水色メイン、右端は青緑 */
.tlb--cyan{
  --tlb-grad:linear-gradient(130deg,#4fc9f5 0%,#8fdcf9 52%,#39e0bf 100%);
  --tlb-shadow:rgba(79,201,245,.3);
  --tlb-glow:rgba(63,168,215,.72);--tlb-glow2:rgba(63,168,215,.5);
  --tlb-accent:#1f9fd0;--tlb-coin:#d8f2fd;}

.tlb{position:relative;background:#fff;overflow:hidden;padding:44px 0 12px;}
.tlb-cont{position:relative;color:#fff;
  background:var(--tlb-grad);
  box-shadow:10px 14px 50px var(--tlb-shadow);padding:0 0 60px;}
.tlb--left .tlb-cont{margin-right:max(0px,calc(50% - 620px));border-radius:0 90px 90px 0;}
.tlb--right .tlb-cont{margin-left:max(0px,calc(50% - 620px));border-radius:90px 0 0 90px;}
.tlb-card h3{color:var(--tlb-accent);}
.tlb-gift-coin{color:var(--tlb-coin);}

/* 大きな英字見出し（はみ出し・Messageと同じOutfit） */
.tlb-head{transform:translateY(-20%);text-shadow:0 -5px 18px var(--tlb-glow),0 -2px 7px var(--tlb-glow2);position:relative;z-index:1;}
.tlb--left .tlb-head{padding-left:max(24px,calc(50% - 620px));}
.tlb--right .tlb-head{padding-right:max(24px,calc(50% - 620px));text-align:right;}
.tlb-en{display:block;font-family:var(--font-en);font-weight:800;font-size:clamp(58px,9.2vw,150px);line-height:1;letter-spacing:.01em;}
.tlb-jp{font-family:var(--font-head);font-weight:900;font-size:clamp(18px,2.2vw,28px);}

/* 本文ラッパ */
.tlb-body{width:min(1040px,100% - 56px);margin:0 auto;position:relative;z-index:1;}

/* 装飾：雲（ふわふわ浮遊）＋キラキラ（ちかちか明滅）。コンテンツ背面に配置 */
.tlb-deco{position:absolute;inset:0;pointer-events:none;z-index:6;}
.tlb-cloud{position:absolute;opacity:.92;will-change:transform;}
.tlb-spark{position:absolute;mix-blend-mode:screen;will-change:opacity,transform;}
@keyframes tlbFloatA{0%,100%{transform:translate(0,0);}50%{transform:translate(1.8%,-10%);}}
@keyframes tlbFloatB{0%,100%{transform:translate(0,0);}50%{transform:translate(-2.4%,8%);}}
@keyframes tlbTwinkle{0%,100%{opacity:.28;transform:scale(.82);}50%{opacity:1;transform:scale(1.12);}}
/* 左右反転した雲用（浮遊アニメにscaleX(-1)を内包） */
@keyframes tlbFloatAflip{0%,100%{transform:translate(0,0) scaleX(-1);}50%{transform:translate(1.8%,-10%) scaleX(-1);}}
/* 左：TikTok Live
   ※注意：cloud.png は上下左右に透明な余白がある（320x140のうち中身は 13,18〜297,107。
     特に下は33px＝高さの23.6%）。要素の枠＝雲の見た目ではないので、
     文字とのすき間を詰めるときは枠ではなく雲の実シルエットで測ること */
.tlb--left .tlb-cloud--1{top:23%;right:18%;width:clamp(150px,18vw,224px);animation:tlbFloatA 9s ease-in-out infinite;}
.tlb--left .tlb-cloud--2{bottom:2%;left:41%;width:clamp(179px,21vw,260px);animation:tlbFloatB 11s ease-in-out infinite;}
.tlb--left .tlb-spark--1{top:6%;right:7%;width:clamp(46px,5vw,72px);animation:tlbTwinkle 2.4s ease-in-out infinite;}
.tlb--left .tlb-spark--2{top:22%;right:3%;width:clamp(40px,4.4vw,62px);animation:tlbTwinkle 3.1s ease-in-out .6s infinite;}
.tlb--left .tlb-spark--3{bottom:33%;right:3%;width:clamp(34px,3.8vw,52px);animation:tlbTwinkle 2.7s ease-in-out 1.1s infinite;}
.tlb--left .tlb-spark--4{bottom:12%;right:9%;width:clamp(30px,3.2vw,46px);animation:tlbTwinkle 3.4s ease-in-out .3s infinite;}
.tlb--left .tlb-spark--5{top:20%;right:30%;width:clamp(38px,4vw,58px);animation:tlbTwinkle 2.9s ease-in-out .9s infinite;}
.tlb--left .tlb-spark--6{top:29%;left:6%;width:clamp(28px,3vw,42px);animation:tlbTwinkle 3.2s ease-in-out 1.4s infinite;}
/* 右：Gift Culture */
.tlb--right .tlb-cloud--1{top:-4%;left:-6%;width:clamp(264px,31vw,396px);transform:scaleX(-1);animation:tlbFloatAflip 10s ease-in-out infinite;}
.tlb--right .tlb-cloud--2{bottom:13%;right:5%;width:clamp(138px,16vw,200px);animation:tlbFloatB 12s ease-in-out infinite;}
.tlb--right .tlb-spark--1{top:8%;left:5%;width:clamp(46px,5vw,72px);animation:tlbTwinkle 2.6s ease-in-out infinite;}
.tlb--right .tlb-spark--2{top:30%;left:4%;width:clamp(40px,4.4vw,62px);animation:tlbTwinkle 3s ease-in-out .5s infinite;}
.tlb--right .tlb-spark--3{bottom:28%;left:4%;width:clamp(34px,3.8vw,52px);animation:tlbTwinkle 2.9s ease-in-out 1.3s infinite;}
.tlb--right .tlb-spark--4{bottom:10%;left:9%;width:clamp(30px,3.2vw,46px);animation:tlbTwinkle 3.3s ease-in-out .4s infinite;}
.tlb--right .tlb-spark--5{top:15%;left:26%;width:clamp(38px,4vw,58px);animation:tlbTwinkle 2.7s ease-in-out 1s infinite;}
.tlb--right .tlb-spark--6{bottom:46%;right:3%;width:clamp(28px,3vw,42px);animation:tlbTwinkle 3.1s ease-in-out 1.5s infinite;}
@media (prefers-reduced-motion:reduce){
  .tlb-cloud,.tlb-spark{animation:none!important;}
  .tlb-spark{opacity:.6;}
}
.sp-br{display:none;}
.pc-br{display:inline;}   /* PCで改行／スマホでは無効（sp-brの逆） */
.tlb-lead{font-family:var(--font-head);font-weight:900;font-size:clamp(17px,2vw,22px);line-height:1.4;margin-bottom:22px;}

/* ① intro：テキスト＋スマホ */
.tlb-body:not(.tlb-body--gift):not(.tlb-body--rwd):not(.tlb-body--story){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);gap:36px;align-items:center;width:min(1440px,100% - 40px);}
.tlb-list{display:flex;flex-direction:column;gap:16px;margin:0 0 24px;}
.tlb-list li{position:relative;padding-left:28px;}
.tlb-list li::before{content:"♡";position:absolute;left:0;top:1px;color:#fff;font-size:17px;}
/* 各項目は「見出し（大・太）＋補足（小・細）」の2段構成で強弱をつける */
.tll-h{display:block;font-family:var(--font-head);font-weight:900;font-size:16.5px;line-height:1.28;}
.tll-s{display:block;margin-top:1px;font-weight:600;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.86);}
.tlb-note{display:flex;align-items:center;gap:16px;background:#fff;border-radius:30px;padding:18px 20px;box-shadow:0 14px 30px rgba(120,10,50,.22);}
.tlb-note-ic{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;background:radial-gradient(circle at 35% 30%,#ff8fd2,#e4185f);box-shadow:0 6px 14px rgba(228,24,95,.4);}
.tlb-note p{font-weight:700;color:#7a2348;font-size:14px;line-height:1.55;}
/* スマホ ライブ画面モック（上2/3を表示・下端を帯の下部に揃える） */
.tlb-figure{align-self:end;margin-bottom:-72px;transform:translate(-52px,-72px);position:relative;}
/* スマホ右側に浮かぶギフトボックス（ふわふわ＋ホバー/タップで揺れる） */
.tlb-giftbox{position:absolute;right:15%;bottom:42%;width:clamp(84px,11vw,156px);z-index:20;cursor:pointer;transform:rotate(-9deg);filter:drop-shadow(0 .8vw 1.4vw rgba(120,20,60,.35));animation:giftBob 4.2s ease-in-out infinite;}
.tlb-giftbox img{display:block;width:100%;height:auto;transform-origin:center bottom;}
.tlb-giftbox:hover img,.tlb-giftbox:focus-visible img,.tlb-giftbox img.sway{animation:giftSway .7s ease-in-out;}
.tlb-giftbox:focus-visible{outline:none;}
@keyframes giftBob{0%,100%{transform:translateY(0) rotate(-9deg);}50%{transform:translateY(-12px) rotate(-5deg);}}
@media (prefers-reduced-motion:reduce){.tlb-giftbox{animation:none;}.tlb-giftbox:hover img,.tlb-giftbox img.sway{animation:none;}}
.lp-crop{width:100%;max-width:920px;margin:0 auto 0 0;overflow:hidden;aspect-ratio:1/.667;container-type:inline-size;}
.lp{position:relative;width:100%;}
.tlb-figure .lp-frame{width:100%;max-width:none;display:block;border-radius:0;box-shadow:none;filter:drop-shadow(0 1.5cqw 3.4cqw rgba(0,0,0,.34));}
.lp-screen{position:absolute;left:28%;top:13.4%;width:44%;height:73.6%;}
.lp-screen *{box-sizing:border-box;}
.lp-row1{position:absolute;left:5%;right:5%;top:2.5%;display:flex;align-items:center;justify-content:space-between;}
.lp-row2{position:absolute;left:5%;right:5%;top:13.5%;display:flex;align-items:center;justify-content:space-between;}
.lp-stack{position:absolute;left:5%;right:14%;top:26%;bottom:42%;display:flex;flex-direction:column;justify-content:flex-end;gap:1.15cqw;align-items:flex-start;overflow:hidden;}
.lp-inbar{position:absolute;left:6%;right:6%;top:60%;display:flex;align-items:center;gap:1.4cqw;}
.lp-host{display:inline-flex;align-items:center;gap:.7cqw;background:rgba(0,0,0,.3);border-radius:3.5cqw;padding:.47cqw .7cqw;}
.lp-host-av{width:3.95cqw;height:3.95cqw;border-radius:50%;background:#fff;box-shadow:0 .2cqw .7cqw rgba(0,0,0,.25);flex:none;}
.lp-name{color:#fff;font-size:1.86cqw;font-weight:700;white-space:nowrap;}
.lp-follow{background:#e4185f;color:#fff;font-size:1.63cqw;font-weight:800;border-radius:2.1cqw;padding:.47cqw 1.4cqw;white-space:nowrap;}
.lp-x{width:3.72cqw;height:3.72cqw;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:2.1cqw;display:flex;align-items:center;justify-content:center;}
.lp-live{display:inline-flex;align-items:center;gap:.7cqw;background:#fe2c55;color:#fff;font-weight:800;font-size:1.86cqw;padding:.47cqw 1.4cqw;border-radius:1.4cqw;letter-spacing:.04em;}
.lp-live::before{content:"";width:1.16cqw;height:1.16cqw;border-radius:50%;background:#fff;animation:lpLive 1.5s ease-in-out infinite;}
@keyframes lpLive{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.78);}}
.lp-views{display:inline-flex;align-items:center;gap:.7cqw;background:rgba(0,0,0,.34);color:#fff;font-size:1.86cqw;font-weight:700;padding:.47cqw 1.63cqw;border-radius:2.56cqw;}
.lp-cmt{display:flex;background:rgba(20,11,24,.46);border-radius:2.33cqw;padding:.7cqw 2.1cqw;width:fit-content;max-width:100%;}
.lp-cmt p{font-size:1.98cqw;line-height:1.3;color:#fff;margin:0;}
.lp-cmt b{color:#ffcfe3;font-weight:700;margin-right:.7cqw;}
.lp-cmt b.bl{color:#7ecbff;}
/* コメント流れ込み */
.lp-cmt--in{animation:lpCin .45s cubic-bezier(.2,.8,.25,1) both;}
.lp-cmt--out{animation:lpCout .4s ease forwards;}
@keyframes lpCin{from{opacity:0;transform:translateY(2.6cqw) scale(.96);}to{opacity:1;transform:none;}}
@keyframes lpCout{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-1.6cqw);}}
/* 上昇するハート */
.lp-fheart{position:absolute;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 .2cqw .5cqw rgba(200,40,90,.3));}
@keyframes lpFloat{0%{opacity:0;transform:translateY(0) scale(.5);}18%{opacity:1;}100%{opacity:0;transform:translateY(-22cqw) translateX(var(--dx,0)) scale(1.15);}}
/* ギフト：チャット内のグラデ帯 */
.lp-cmt.lp-gift{background:linear-gradient(100deg,rgba(254,44,85,.95),rgba(155,69,221,.92));box-shadow:0 .3cqw 1.4cqw rgba(254,44,85,.4);max-width:none;}
.lp-cmt.lp-gift p{color:#fff;}
.lp-cmt.lp-gift b{color:#fff5fb;}
.lp-cmt.lp-gift .gi{width:4.8cqw;height:4.8cqw;object-fit:contain;margin-right:.9cqw;vertical-align:middle;flex:none;}
/* ギフト：コンボ表示（控えめにパッと出て消える） */
.lp-combo{position:absolute;left:6%;top:19.5%;display:flex;align-items:center;gap:.7cqw;pointer-events:none;z-index:4;filter:drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.28));transform-origin:left center;animation:lpCombo 2.5s cubic-bezier(.2,.85,.3,1) forwards;}
.lp-combo img{width:5.4cqw;height:5.4cqw;object-fit:contain;display:block;}
.lp-combo .cx{font-family:'Outfit',sans-serif;font-weight:800;font-size:3.8cqw;color:#fff;letter-spacing:.02em;text-shadow:0 .3cqw .8cqw rgba(254,44,85,.85),0 0 .5cqw rgba(0,0,0,.25);}
.lp-combo .cx small{font-size:.66em;}
@keyframes lpCombo{0%{opacity:0;transform:translateX(-2cqw) scale(.4);}13%{opacity:1;transform:translateX(0) scale(1.14);}22%{transform:scale(1);}74%{opacity:1;transform:scale(1);}100%{opacity:0;transform:translateX(-1.4cqw) scale(.96);}}
@media (prefers-reduced-motion:reduce){
  .lp-live::before{animation:none;}
  .lp-cmt--in,.lp-cmt--out,.lp-fheart,.lp-combo{animation:none;}
}
.lp-inbox{flex:1;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.45);border-radius:3.72cqw;color:rgba(255,255,255,.92);font-size:2.33cqw;padding:1.16cqw 2.56cqw;}
.lp-ic{width:6.28cqw;height:6.28cqw;border-radius:50%;background:rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;font-size:3.26cqw;}

/* ② gift */
/* 「ギフトで応援する文化」の強調：白字のまま、内側の文字だけ少し大きく。前後に白い“ ”を添える */
.gift-em{color:#fff;font-size:1.14em;}
.gift-em::before{content:"\201C";}
.gift-em::after{content:"\201D";}
/* 「なんでそんなに投げてくれるの？」の強調：ピンクのマーカー風ハイライト */
.gift-mark{background:linear-gradient(transparent 60%,rgba(255,77,148,.62) 60%);border-radius:2px;padding:0 .1em;}
/* カードへの問いかけ見出し */
.tlb-q{text-align:center;font-family:var(--font-head);font-weight:900;
  font-size:clamp(17px,2.2vw,22px);line-height:1.4;margin:2px 0 16px;}
/* 理由の3項目はTikTok Liveの♡本文の部品（.tlb-list/.tll-h/.tll-s）を流用しつつ、
   このセクションだけは大小2段をやめて両行を同体裁・同サイズに。
   さらに全体を小さめにして、問いかけ（.tlb-q）を相対的に目立たせる */
/* テキストの中央揃えではなく、左寄せのまま「ブロックごと」中央へ寄せる。
   幅を内容に合わせて縮める(fit-content)ことで、3項目の♥が左端で縦一列に揃う */
.tlb-list--gift{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;gap:13px;}
.tlb-list--gift .tll-h,
.tlb-list--gift .tll-s{font-family:var(--font-head);font-weight:900;color:#fff;
  font-size:12.5px;line-height:1.15;}
.tlb-list--gift .tll-s{margin-top:0;}
/* 問いかけ＋♡リストをまとめて白い角丸カードに収める。
   紫背景では白字だったので、カード内だけ濃色に切り替える */
.gift-qcard{background:#fff;border-radius:30px;padding:12px 18px;
  box-shadow:0 12px 34px rgba(126,47,214,.20);margin:2px auto 22px;max-width:620px;}
.gift-qcard .tlb-list--gift{margin-bottom:0;}
.gift-qcard .tlb-list--gift .tll-h,
.gift-qcard .tlb-list--gift .tll-s{color:#5a23a8;}
.gift-qcard .tlb-list--gift li::before{content:"♥";color:var(--tlb-accent);}
/* PCのみ（769px以上）の調整。除外対象（タイトル/見出し/カード/人気のギフト例/Point!）は据え置き */
@media (min-width:769px){
  /* TikTok Live：リード＋♡リストを拡大 */
  .tlb--pink .tlb-lead{font-size:27px;}
  .tlb--pink .tll-h{font-size:20px;}
  .tlb--pink .tll-s{font-size:15px;}
  /* Gift Culture：リード＋問いかけ＋♡リストを拡大し、まとめて右寄せに */
  .tlb--purple .tlb-lead{font-size:26px;text-align:left;}
  .tlb--purple .tlb-q{font-size:28px;text-align:left;}
  /* ♡リストは各項目1行。ブロックは右寄せ（各項目の右端を揃える）だが、♡マーカーは各項目の左（先頭）に置く */
  .tlb-list--gift{margin-left:auto;margin-right:0;}
  .tlb-list--gift li{white-space:nowrap;width:fit-content;margin-left:auto;padding-left:28px;padding-right:0;}
  .tlb-list--gift li::before{left:0;right:auto;}
  .tlb-list--gift .tll-h,.tlb-list--gift .tll-s{display:inline;font-size:15.5px;}
  .tlb-list--gift .tll-s{margin-left:.4em;}
  /* カード・リードとも左寄せ（PCのみ） */
  .gift-qcard{margin-left:0;margin-right:auto;}
  /* ♡リストはカードの中では左揃え（各項目の左端を揃える） */
  .gift-qcard .tlb-list--gift{margin-left:0;margin-right:auto;}
  .gift-qcard .tlb-list--gift li{margin-left:0;margin-right:0;}
}
.tlb-gifts{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:20px 16px;}
.tlb-gifts-title{font-family:var(--font-head);font-weight:900;text-align:center;font-size:16px;margin-bottom:16px;}
/* セクション名：表示時に1回だけ、1文字ずつ控えめでゆったりバウンス */
.tlb-en .ch,.ownerMsg-en .ch{display:inline-block;}
.tlb.visible .tlb-en .ch,.ownerMsg-headInner.visible .ownerMsg-en .ch{animation:nameBounce 1.3s ease-out both;animation-delay:calc(.15s + var(--n)*.06s);}
@keyframes nameBounce{0%{transform:translateY(0);}34%{transform:translateY(-20px);}58%{transform:translateY(0);}78%{transform:translateY(-6px);}100%{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.tlb.visible .tlb-en .ch,.ownerMsg-headInner.visible .ownerMsg-en .ch,.style-en.visible .ch{animation:none;}}
.tlb-gifts-list{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 6px;}
.tlb-gifts-list li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.tlb-gifts-list img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));transform-origin:center bottom;}
.tlb-gifts-list li:hover img{animation:giftSway .7s ease-in-out;}
@keyframes giftSway{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg)}35%{transform:rotate(7deg)}55%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}90%{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.tlb-gifts-list li:hover img{animation:none;}}
.tlb-gift-name{font-weight:800;font-size:11px;line-height:1.2;}
.tlb-gift-coin{font-weight:800;font-size:10.5px;color:#ffe1ec;}
.tlb-point{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-weight:800;font-size:15px;line-height:1.55;}
/* 「Point!」：Satisfy・P=ピンク/oint!=白・1文字ずつバウンス・斜め配置 */
.tlb-point-em{font-family:'Satisfy',cursive;font-weight:400;font-size:52px;line-height:1;flex-shrink:0;color:#fff;display:inline-block;transform:rotate(-8deg);transform-origin:center bottom;margin-right:8px;}
.tlb-point-em .ch{display:inline-block;animation:pointBounce 1.5s ease-in-out infinite;animation-delay:calc(var(--n)*.11s);}
.tlb-point-em .ch--p{color:#ff66c4;}
@keyframes pointBounce{0%,55%,100%{transform:translateY(0);}26%{transform:translateY(-12px);}}
@media (prefers-reduced-motion:reduce){.tlb-point-em .ch{animation:none;}}

/* =========================================================
   ③ REWARD / 報酬は一切中抜きナシ！
   ダイヤが2本の線を「同時に・別々に」流れることで、
   あなたの報酬がFeliceを経由しないことを動きで示す。
   線(SVG)とノード・ダイヤ(通常要素)は同じ％座標を使うので、
   画面幅が変わっても矢印の先はノードに刺さり続ける。
   ========================================================= */
.rwd-title{font-family:var(--font-head);font-weight:900;text-align:center;color:#fff;
  /* Story（④）の見出しと同じ大きさに揃える。片方を変えたらもう片方も合わせること */
  font-size:clamp(25px,4.4vw,48px);line-height:1.32;letter-spacing:.01em;}
.rwd-title-em{font-style:normal;color:#ffe14d;}
/* この帯は本文だけなので、雲は本文の背面へ（①②は雲をスマホに重ねる演出のため前面にある）。
   さらに、白い雲の上に白文字が乗ると文字が消えるので、雲は図の左右の余白へ逃がす */
.tlb--blue .tlb-deco{z-index:0;}
/* 右上の雲は、Gift Culture（②）の左上の雲と同じサイズ・対称の位置。
   あちらは scaleX(-1) で左向きにしているので、右端はその反転なし＝元の向きで対になる */
.tlb.tlb--blue .tlb-cloud--1{top:-4%;right:-6%;left:auto;width:clamp(264px,31vw,396px);}
.tlb.tlb--blue .tlb-cloud--2{bottom:8%;left:1%;right:auto;width:clamp(130px,15vw,200px);}

/* ---- Reward帯の遊び（シャボン玉・光の粒）。画像は増やさずCSSで描く ----
   すべて .tlb-deco の中＝本文の背面。本文と重ならないよう左右の余白に配置する */
.rwd-bub,.rwd-dot{position:absolute;}

/* シャボン玉。淡い水彩なので、白い本文の背面に来ると文字が読めなくなる。
   雲と同じく必ず左右の余白に置くこと。
   ふわふわ感は、周期と向きを1つずつずらして「揃わない」ようにして出す */
.rwd-bub{height:auto;opacity:.92;
  animation:rwdFloat 8s ease-in-out infinite;}
.rwd-bub--1{top:13%;left:2%;width:clamp(64px,8vw,112px);}
.rwd-bub--2{bottom:31%;right:5%;width:clamp(38px,4.6vw,64px);
  animation-duration:6.4s;animation-delay:-2.1s;}
.rwd-bub--3{top:61%;left:9%;width:clamp(24px,2.8vw,38px);
  animation-duration:9.2s;animation-delay:-4.6s;}
.rwd-bub--4{top:25%;right:8%;width:clamp(30px,3.6vw,48px);
  animation-duration:7.1s;animation-delay:-1.2s;}
@keyframes rwdFloat{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(7px,-18px);}}

.rwd-dot{border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(200,235,255,.9);}
.rwd-dot--1{top:26%;right:9%;width:5px;height:5px;}
.rwd-dot--2{top:44%;left:9%;width:4px;height:4px;}
.rwd-dot--3{bottom:12%;left:16%;width:6px;height:6px;background:rgba(255,180,225,.9);
  box-shadow:0 0 7px rgba(255,150,215,.9);}
.rwd-dot--4{top:72%;right:19%;width:4px;height:4px;}

/* 3.6vw は「360pxで13px」からの逆算。この文は2行と決めているが、
   360px（iPhone 12 mini）では13.5pxで両方の行が折り返して4行になる＝13pxが限界。
   幅の広い端末ほど余裕があるので、vwで伸ばして390px以上を大きくしている */
.rwd-lead{text-align:center;font-weight:700;font-size:clamp(13px,3.6vw,20px);line-height:1.85;
  color:rgba(255,255,255,.94);margin:6px auto 0;max-width:720px;}
.rwd-lead strong{font-weight:900;color:#ffe14d;}

.rwd-map{position:relative;margin:30px auto 0;width:min(820px,100%);aspect-ratio:820/430;}
.rwd-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.rwd-wire{fill:none;stroke:rgba(255,255,255,.72);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6 7;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(150,215,255,.75));}
.rwd-wire--sup{stroke:rgba(255,225,77,.85);stroke-dasharray:none;
  filter:drop-shadow(0 0 4px rgba(255,225,77,.8));}
.rwd-wg--sp{display:none;}

/* 線の先端の矢印。図の縦横比が固定なので線の角度も固定＝回転角を直接書ける */
.rwd-arw{position:absolute;width:15px;height:12px;
  background:#fff;clip-path:polygon(0 0,100% 50%,0 100%,24% 50%);
  filter:drop-shadow(0 0 5px rgba(150,215,255,.95));}
.rwd-arw--fl{left:21.2%;top:58.9%;transform:translate(-50%,-50%) rotate(153.1deg);}
.rwd-arw--you{left:78.8%;top:58.9%;transform:translate(-50%,-50%) rotate(26.9deg);}

/* ノード：中心を％で置く。左右の位置は下の枠線の計算とそろえてある */
.rwd-node{position:absolute;transform:translate(-50%,-50%);
  /* 文字を大きくしたぶん、カードの幅も広げないと「あなた（配信者）」が折り返す */
  width:clamp(164px,24%,210px);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border-radius:18px;padding:17px 12px 14px;
  /* 影は2枚。近くの薄い影で紙の厚みを出し、遠くの広い影で背景から浮かせる。
     青みを混ぜているのは、帯の背景が青なので黒だと影だけ濁って見えるため */
  box-shadow:0 2px 6px rgba(10,30,90,.10),0 12px 28px rgba(10,30,90,.16);
  text-align:center;}
.rwd-node--tt{left:50%;top:16%;}
.rwd-node--fl{left:15%;top:80%;}
.rwd-node--you{left:85%;top:80%;}
/* イラスト自体が色を持つので、下に色の付いた丸は敷かない（色がぶつかる） */
.rwd-node-ic{width:68px;height:68px;display:grid;place-items:center;flex:none;}
.rwd-node-ic img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:drop-shadow(0 3px 6px rgba(10,30,90,.18));}
/* TikTokは黒ベタなので、同じ寸法だと他の2つより重く見える。ここだけ小さくして釣り合わせる */
.rwd-node--tt .rwd-node-ic img{max-height:82%;}
/* 配信者の絵だけ横長（200x179）なので、同じ枠だと横で頭打ちになり、高さがFeliceより低く出る＝小さく見える。
   114%はFeliceと同じ高さになる値。枠(68px)からはみ出すぶんは、絵が枠より大きくなるだけで
   枠の大きさは変わらない＝カードの寸法には影響しない */
.rwd-node--you .rwd-node-ic img{max-width:114%;max-height:114%;}
.rwd-node-name{font-family:var(--font-head);font-weight:900;color:var(--ink);
  font-size:clamp(15px,1.9vw,20px);line-height:1.3;}
.rwd-node-role{font-weight:700;color:#7d8699;font-size:clamp(11.5px,1.4vw,15px);line-height:1.4;}

/* 線に添えるラベル。
   z-index:3 は、線の上を流れるダイヤ・光より前面に出すため。
   （指定しないとHTMLに書いた順で前後が決まり、後に書いてある光が吹き出しの上に乗ってしまう） */
.rwd-lbl{position:absolute;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;
  font-weight:800;font-size:clamp(14px,1.6vw,17px);letter-spacing:.02em;
  color:#fff;background:rgba(10,25,80,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 0 14px rgba(120,200,255,.45);
  border-radius:999px;padding:7px 16px;}
.rwd-lbl--fl{left:26%;top:44%;}
.rwd-lbl--you{left:74%;top:44%;}
.rwd-lbl--sup{left:50%;top:80%;color:#4a3c00;background:#ffe14d;
  border-color:rgba(255,248,190,.95);box-shadow:0 0 20px rgba(255,225,77,.8);}
/* 集客・サポートの線の両端の光点 */
.rwd-cap{position:absolute;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;
  box-shadow:0 0 10px 2px rgba(255,225,77,.9);}
.rwd-cap--l{left:30%;top:80%;}
.rwd-cap--r{left:70%;top:80%;}

/* 流れるダイヤ＝報酬。left/topを％で動かすので、線と必ず重なる */
.rwd-dia{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  background:linear-gradient(145deg,#bff3ff,#4fc9f5 45%,#2455e6);
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);
  filter:drop-shadow(0 0 6px rgba(120,220,255,.9));
  animation-duration:2.6s;animation-timing-function:linear;animation-iteration-count:infinite;}
.rwd-dia--fl{animation-name:rwdFlowFl;}
.rwd-dia--you{animation-name:rwdFlowYou;}
.rwd-dia--d2{animation-delay:1.3s;}
@keyframes rwdFlowFl{
  0%{left:50%;top:31%;opacity:0;}12%{opacity:1;}
  86%{opacity:1;}100%{left:21.2%;top:58.9%;opacity:0;}}
@keyframes rwdFlowYou{
  0%{left:50%;top:31%;opacity:0;}12%{opacity:1;}
  86%{opacity:1;}100%{left:78.8%;top:58.9%;opacity:0;}}

/* 集客・サポートはお金ではないので、ダイヤではなく黄色い光が流れる */
.rwd-spark{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 3px rgba(255,225,77,.95);
  animation:rwdSpark 2.6s linear infinite;}
@keyframes rwdSpark{
  0%{left:30%;top:80%;opacity:0;}14%{opacity:1;}
  86%{opacity:1;}100%{left:70%;top:80%;opacity:0;}}

.rwd-note{text-align:center;margin-top:26px;font-weight:700;
  font-size:clamp(10px,1.1vw,12px);color:rgba(255,255,255,.72);}

@media (max-width:768px){
  /* スマホは .tlb--left 用の雲指定が後に来るので、Reward用にもう一度上書きして本文から逃がす */
  .tlb.tlb--blue .tlb-cloud--1{top:52%;right:-10%;left:auto;bottom:auto;width:clamp(100px,28vw,140px);}
  .tlb.tlb--blue .tlb-cloud--2{top:60%;left:-10%;right:auto;bottom:auto;width:clamp(96px,26vw,130px);}
  .rwd-map{aspect-ratio:360/430;margin-top:24px;}
  .rwd-wg--pc{display:none;}
  .rwd-wg--sp{display:block;}
  .rwd-node{width:clamp(142px,44%,166px);padding:14px 8px 12px;border-radius:15px;}
  .rwd-node-name{font-size:15px;}
  .rwd-node-role{font-size:11.5px;}
  .rwd-node--tt{top:14%;}
  .rwd-node--fl{left:26%;top:74%;}
  .rwd-node--you{left:74%;top:74%;}
  .rwd-node-ic{width:52px;height:52px;}
  /* スマホは図が縦長＝線の角度が変わるので、矢印の回転角も差し替える */
  .rwd-arw{width:13px;height:10px;}
  .rwd-arw--fl{left:28.6%;top:55%;transform:translate(-50%,-50%) rotate(124.5deg);}
  .rwd-arw--you{left:71.4%;top:55%;transform:translate(-50%,-50%) rotate(55.5deg);}
  .rwd-lbl{font-size:14px;padding:6px 13px;}
  /* PCと違い、スマホは吹き出しが図の幅の1/3を占めるので、線の上に置くと線を覆ってしまう。
     線から外して、図の左右の端へ寄せている。
     内側へ寄せるほど線に近づく。線との間は約5pxで、これ以上内側にすると線に触れる（実測） */
  .rwd-lbl--fl{left:16.5%;top:42%;}
  .rwd-lbl--you{left:83.5%;top:42%;}
  /* 曲線の一番低いところ（100%）に吹き出しを乗せる。PC版で線の上に乗っているのと同じ関係。
     吹き出しは図の枠から約20px下にはみ出すので、そのぶん注記を下げて余白を保つ */
  .rwd-lbl--sup{left:50%;top:100%;}
  .rwd-note{margin-top:38px;}
  .rwd-cap{width:9px;height:9px;}
  .rwd-cap--l{left:25%;top:90%;}
  .rwd-cap--r{left:75%;top:90%;}
  /* スマホは本文が画面幅いっぱいで余白がほぼ無い。見出しの帯（上部）を避けて図の高さに置く */
  .rwd-bub--1{top:44%;left:-4%;width:54px;}
  .rwd-bub--2{bottom:28%;right:1%;width:34px;}
  .rwd-bub--3{top:66%;left:2%;width:20px;}
  .rwd-bub--4{top:36%;right:1%;width:26px;}
  .rwd-dot--3,.rwd-dot--4{display:none;}
  /* スマホは下のノードが近いので、集客・サポートの光は下側を回り込ませる */
  .rwd-dia--fl{animation-name:rwdFlowFlSp;}
  .rwd-dia--you{animation-name:rwdFlowYouSp;}
  @keyframes rwdFlowFlSp{
    0%{left:50%;top:29%;opacity:0;}12%{opacity:1;}
    86%{opacity:1;}100%{left:28.6%;top:55%;opacity:0;}}
  @keyframes rwdFlowYouSp{
    0%{left:50%;top:29%;opacity:0;}12%{opacity:1;}
    86%{opacity:1;}100%{left:71.4%;top:55%;opacity:0;}}
  /* スマホの集客・サポートの線は曲線（M25,90 Q50,110 75,90）。
     アニメはキーフレームの間を直線で結ぶので、3点だけだと線から浮いてしまう。
     曲線の式 y = 90 + 40t(1-t) / x = 25 + 50t を10%刻みで書き出して、線の上をなぞらせている。
     ※線のd属性を変えたら、この数値も必ず計算し直すこと */
  .rwd-spark{animation-name:rwdSparkSp;}
  @keyframes rwdSparkSp{
    0%{left:25%;top:90%;opacity:0;}
    10%{left:30%;top:93.6%;}
    14%{opacity:1;}
    20%{left:35%;top:96.4%;}
    30%{left:40%;top:98.4%;}
    40%{left:45%;top:99.6%;}
    50%{left:50%;top:100%;}
    60%{left:55%;top:99.6%;}
    70%{left:60%;top:98.4%;}
    80%{left:65%;top:96.4%;}
    86%{opacity:1;}
    90%{left:70%;top:93.6%;}
    100%{left:75%;top:90%;opacity:0;}}
}

/* ※350px未満（実機はほぼ無く、PCの400%拡大時に相当）は「せん。」が次行に落ちて5行になるが、
   文字を小さくしてまで4行に揃えない、という判断。350px以上は13pxのまま指定どおり4行 */

/* iPhone SE級（320px）だと図の実寸が264pxしかなく、下の2枚が重なる。
   ここだけカードを小さくして、左右にもう少し離す */
@media (max-width:374px){
  .rwd-node{width:clamp(112px,46%,130px);padding:11px 5px 10px;}
  .rwd-node--fl{left:23%;}
  .rwd-node--you{left:77%;}
  .rwd-node-ic{width:44px;height:44px;}
}

/* 文字の縮小は、カードの箱よりも狭い範囲でよい。
   箱を縮めるのは374px以下で必要だが、文字は下の幅まで縮めなくても収まる（すべて実測）。
   360px（iPhone 12 mini）は実機があるので、そこまで巻き込まないよう分けている */
@media (max-width:345px){        /* 「集客・サポート」がFeliceカードと左の光点に触れる */
  .rwd-lbl{font-size:12px;padding:4px 10px;}
}
@media (max-width:339px){        /* 「あなた（配信者）」がカードの中で折り返す */
  .rwd-node-name{font-size:12px;}
  .rwd-node-role{font-size:9.5px;}
}

@media (prefers-reduced-motion:reduce){
  .rwd-dia,.rwd-spark{animation:none;display:none;}
  /* ダイヤが止まっても、先端の矢印が残るので報酬の向きは伝わる */
  .rwd-wire{stroke-dasharray:none;}
  .rwd-bub{animation:none;}
}

/* =========================================================
   ④ STORY / 配信が、収入に変わるまでの4ヶ月
   月のカードを選ぶとスマホの中の「景色」が入れ替わる。
   水色の帯は明るいので、この帯だけ文字を濃い色にする。
   ========================================================= */
.tlb--cyan{--sty-ink:#0d3a4d;--sty-dim:#4a7f95;}
.tlb-body--story{color:var(--sty-ink);}
/* 左の雲をスマホの左斜め上へ下ろす。この帯の装飾は z-index:6＝本文より前面なので、
   置き場所を間違えると見出しやスマホ画面を覆ってしまう。
   左の空きは x<24%（見出しは中央29〜71%）、y は12〜33%（スマホ上端が35.7%）。
   ここは .tlb--right の指定と競合するので、勝つように .tlb を足して詳細度を上げている */
.tlb.tlb--cyan .tlb-cloud--1{top:19%;left:-8%;}
.sty-eyebrow{text-align:center;font-weight:900;font-size:clamp(20px,2.2vw,24px);
  color:var(--sty-dim);letter-spacing:.08em;}
/* 帯が画面に入ったとき、一度だけ跳ねる。
   .visible は帯に一度付いたら外れないので、スクロールで戻ってきても再生しない＝初回だけ。
   1.75秒待つのは、帯見出し「Story」の1文字ずつのバウンドが終わるのを待つため。
   　（最後のy＝5文字目： 遅延 .15s + 4×.06s ＋ 再生 1.3s ＝ 1.69秒で終わる）
   　※見出しの文字数やnameBounceの秒数を変えたら、ここも計算し直すこと */
.js .tlb--cyan.visible .sty-eyebrow{animation:styBounce 1.05s cubic-bezier(.25,.8,.35,1) 1.75s 1 both;}
@keyframes styBounce{
  0%{transform:translateY(0);}
  18%{transform:translateY(-11px);}
  36%{transform:translateY(0);}
  52%{transform:translateY(-5px);}
  68%{transform:translateY(0);}
  82%{transform:translateY(-2px);}
  92%,100%{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .js .tlb--cyan.visible .sty-eyebrow{animation:none;}}
/* 両脇の斜線は em 指定。px固定にすると、文字を大きくしたとき斜線だけ取り残されて
   短く細く見えてしまう（\ぶっちゃけ/ の形が崩れる） */
.sty-eyebrow span{position:relative;padding:0 1.35em;}
.sty-eyebrow span::before,.sty-eyebrow span::after{content:"";position:absolute;top:50%;
  width:.9em;height:.11em;border-radius:.06em;background:currentColor;}
.sty-eyebrow span::before{left:0;transform:rotate(62deg);}
.sty-eyebrow span::after{right:0;transform:rotate(-62deg);}
.sty-title{font-family:var(--font-head);font-weight:900;text-align:center;color:var(--sty-ink);
  /* 下限25pxは、360px幅（iPhone 12 mini）で1行に収まる限界からの逆算。
     これ以上大きくすると「収入に変わる／までの4ヶ月」と句の途中で折れる */
  /* margin-top を 0 以下にすると「ぶっちゃけ」の文字に触れる（実測：PCは0pxで接触） */
  font-size:clamp(25px,4.4vw,48px);line-height:1.32;margin-top:2px;}
.sty-title-em{font-style:normal;
  background:linear-gradient(96deg,#1268c9,#0b8f9e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.sty-sub{text-align:center;font-weight:700;font-size:clamp(12px,1.3vw,14px);
  color:var(--sty-dim);margin-top:12px;}

.sty-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,4vw,54px);align-items:center;margin-top:clamp(24px,3.4vw,38px);}
/* 横長のフレーム画像の中央にスマホがある部品なので、枠を大きく取って左右を切り落とす */
/* Story専用のフレーム画像は余白なしの切り抜きなので、
   TikTok LIVE側でやっている「拡大して余白を切り落とす」処理は要らない。素直に幅を決めるだけ */
.sty-phone{display:flex;justify-content:center;}
.sty-phone .lp-crop{width:100%;max-width:340px;margin:0;flex:none;aspect-ratio:auto;overflow:visible;}
/* height:auto は必須。imgのheight属性はCSSで打ち消さないとそのまま効いてしまい、
   幅だけ縮めた結果、画像が縦に引き伸ばされる */
.sty-phone .lp-frame{width:100%;height:auto;max-width:none;display:block;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 1.5cqw 3.4cqw rgba(0,0,0,.3));}

.sty-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
/* カードが押せることの案内。主役はカードなので、目立たせすぎないこと */
.sty-hint{align-self:flex-end;font-weight:800;font-size:clamp(11px,1.15vw,12.5px);
  color:#0d6b8a;letter-spacing:.02em;}
.sty-hint span{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.72);border-radius:999px;padding:5px 12px;}
/* 指のマーク。文字だけより「押す」が一目で分かる */
.sty-hint span::before{content:"";width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:var(--tap) center/contain no-repeat;mask:var(--tap) center/contain no-repeat;
  --tap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 1 1 4 0v9'/%3E%3Cpath d='M13 10a2 2 0 1 1 4 0v2'/%3E%3Cpath d='M17 11a2 2 0 1 1 4 0v4a6 6 0 0 1-6 6h-2a7 7 0 0 1-7-7v-1a2 2 0 1 1 4 0'/%3E%3C/svg%3E");
  animation:styTap 1.8s ease-in-out infinite;}
@keyframes styTap{0%,72%,100%{transform:translateY(0);}82%{transform:translateY(2px);}}
.sty-steps{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;counter-reset:none;}
.sty-step{font-family:inherit;position:relative;width:100%;display:grid;
  grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;
  background:rgba(255,255,255,.94);border:1.5px solid transparent;border-radius:16px;
  padding:11px 16px;text-align:left;cursor:pointer;appearance:none;
  box-shadow:0 8px 22px rgba(10,60,90,.1);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;}
.sty-step:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,60,90,.16);}
/* 選ばれているカード。選択の合図はサイトのアクセントであるピンクに統一（スマホの選択色と同じ）。
   縁の外に広がるピンクのリング＋番号の丸もピンクにして、どれを見ているかを一目で分かるようにする */
.sty-step[aria-pressed="true"]{border-color:#ff5fa2;background:#fff;
  box-shadow:0 0 0 4px rgba(255,95,162,.4),0 16px 34px rgba(10,60,90,.2);
  transform:translateY(-2px);}
.sty-step-badge{width:58px;height:58px;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  font-family:var(--font-head);font-weight:900;font-size:20px;color:#fff;
  background:linear-gradient(140deg,#6fd6f0,#2f9fd6);}
/* ピンクの丸に白文字（スマホの選択色と同じ配色） */
.sty-step[aria-pressed="true"] .sty-step-badge{background:linear-gradient(140deg,#ff5fa2,#e4185f);
  color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9);}
.sty-step-badge small{font-size:9.5px;font-weight:800;margin-top:2px;letter-spacing:.02em;}
.sty-step-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sty-step-title{font-family:var(--font-head);font-weight:900;color:var(--sty-ink);
  font-size:clamp(15px,1.75vw,19px);line-height:1.25;}
.sty-step-meta{font-weight:800;font-size:clamp(11.5px,1.3vw,14px);color:#2f9fd6;line-height:1.3;}
.sty-step-desc{font-weight:700;font-size:clamp(11.5px,1.3vw,14px);color:var(--sty-dim);line-height:1.3;}
.sty-step--goal{background:#fff;}
.sty-step-flag{position:absolute;top:-9px;right:12px;
  font-weight:900;font-size:9.5px;letter-spacing:.04em;color:#fff;
  background:linear-gradient(96deg,#39e0bf,#1268c9);border-radius:999px;padding:3px 9px;}

/* スマホの中：獲得ダイヤの表示。
   画面の背景は敷かない。フレーム画像がもともと持っている壁紙をそのまま見せる。
   位置は phone-frame-story.png（343x628／不透明・白い大理石・余白クロップ済み）の画面部分の実測値：x 17〜325 / y 12〜616 */
.lp-screen--story{left:4.96%;top:1.91%;width:90.09%;height:96.18%;}
/* 画面の中身の上下。TikTok LIVE側の数値をそのまま使うと2か所ズレるので、この帯だけ組み直す。
   ・上：このフレームはノッチとステータスバー（12:30・電波・電池）が画面の中に描かれている。
     ノッチ／ステータスバーは画面の上から約5.5%まで（実測）なので、名前はその下から始める
   ・下：チャットの箱が bottom:42% で終わり、獲得ダイヤ（上から86%）との間が大きく空いていた。
     ダイヤのすぐ上まで下ろす（箱は justify-content:flex-end なので中身は下に寄る） */
.lp-screen--story .lp-row1{top:8%;}
/* TikTok LIVE側の top:13.5% のままだと、名前と1.2px重なる（この帯は名前を8%まで下げたため）。
   18%で名前との間が23px空く */
.lp-screen--story .lp-row2{top:18%;}
/* チャットの下端は、獲得ダイヤのパネルの上に10px。
   パネルは bottom:5% ＋ 高さ56px（中の文字がpx指定なので、画面幅が変わっても56pxのまま）。
   ここを % だけで書くと、画面が小さいときにパネルが相対的に大きくなって追突する */
.lp-screen--story .lp-stack{bottom:calc(5% + 66px);}

/* 画面の中のUIは cqw（＝コンテナ幅の1%）で組まれている。
   TikTok LIVE側のコンテナは .lp-crop ＝ 余白だらけの画像の幅（端末の2.1倍）。
   Story専用フレームは余白が無いので .lp-crop がそのまま端末の幅になり、
   同じ cqw でも実寸が半分以下になってしまっていた。
   そこで Story だけ「画面そのもの」をコンテナにし、値を2.253倍して元の実寸に戻す。
   （画面の幅は 279.8px → 282.3px とほぼ同じなので、倍率ひとつで全部そろう）
   ※この中の cqw を触るときは、TikTok LIVE側の値の2.253倍だと思って計算すること */
.lp-screen--story{container-type:inline-size;}
.lp-screen--story .lp-host{gap:1.58cqw;border-radius:7.89cqw;padding:1.06cqw 1.58cqw;}
.lp-screen--story .lp-host-av{width:8.9cqw;height:8.9cqw;box-shadow:0 .45cqw 1.58cqw rgba(0,0,0,.25);}
.lp-screen--story .lp-name{font-size:4.19cqw;}
.lp-screen--story .lp-x{width:8.38cqw;height:8.38cqw;font-size:4.73cqw;}
/* LIVEと視聴者数だけ、他より1.2倍大きくしている（この2つは遠目にも要素として認識させたい）。
   文字だけ大きくすると余白が窮屈になるので、余白・角丸・点も同じ倍率でそろえること */
.lp-screen--story .lp-live{gap:1.9cqw;font-size:5.03cqw;padding:1.27cqw 3.78cqw;border-radius:3.78cqw;}
.lp-screen--story .lp-live::before{width:3.13cqw;height:3.13cqw;}
.lp-screen--story .lp-views{gap:1.9cqw;font-size:5.03cqw;padding:1.27cqw 4.4cqw;border-radius:6.92cqw;}
.lp-screen--story .lp-stack{gap:2.59cqw;}
.lp-screen--story .lp-cmt{border-radius:5.25cqw;padding:1.58cqw 4.73cqw;}
.lp-screen--story .lp-cmt p{font-size:4.46cqw;}
/* 名前は一律で水色（TikTok LIVE側はピンク＋水色の2色に出し分けているが、この帯は分けない）。
   ※紺色は不採用。吹き出しが暗い半透明なので沈んで読めなくなる。
     暗い吹き出しのまま濃い色を置くのは無理なので、変えるなら吹き出しごと明るくすること */
.lp-screen--story .lp-cmt b{margin-right:1.58cqw;color:#8fd3ff;}
/* ギフト帯だけは背景がピンク〜紫のベタなので、水色だと沈む。ここは白のまま */
.lp-screen--story .lp-cmt.lp-gift b{color:#fff5fb;}

/* ライブ演出（ハート・ギフト・コンボ）。
   アニメーションのキーフレームも cqw で書かれているので、同じ2.253倍が要る。
   キーフレームは名前ごと差し替えるしかない（同名だと TikTok LIVE 側まで変わってしまう） */
.lp-screen--story .lp-fheart{filter:drop-shadow(0 .45cqw 1.13cqw rgba(200,40,90,.3));}
.lp-screen--story .lp-cmt--in{animation-name:lpCinSty;}
.lp-screen--story .lp-cmt--out{animation-name:lpCoutSty;}
@keyframes lpCinSty{from{opacity:0;transform:translateY(5.86cqw) scale(.96);}to{opacity:1;transform:none;}}
@keyframes lpCoutSty{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-3.6cqw);}}
@keyframes lpFloatSty{0%{opacity:0;transform:translateY(0) scale(.5);}18%{opacity:1;}
  100%{opacity:0;transform:translateY(-49.57cqw) translateX(var(--dx,0)) scale(1.15);}}
/* コンボの縦位置(top)はJSが段ごとに直接入れる（同時に2つ出ても重ならないように）。
   TikTok LIVE側の top:19.5% だとこの帯では LIVE のピル（18%）に重なるので、JS側は30%以下から */
.lp-screen--story .lp-combo{gap:1.58cqw;
  filter:drop-shadow(0 .9cqw 2.25cqw rgba(0,0,0,.28));animation-name:lpComboSty;}
.lp-screen--story .lp-combo img{width:12.17cqw;height:12.17cqw;}
.lp-screen--story .lp-combo .cx{font-size:8.56cqw;}
@keyframes lpComboSty{0%{opacity:0;transform:translateX(-4.51cqw) scale(.4);}
  13%{opacity:1;transform:translateX(0) scale(1.14);}22%{transform:scale(1);}
  74%{opacity:1;transform:scale(1);}100%{opacity:0;transform:translateX(-3.15cqw) scale(.96);}}
.lp-screen--story .lp-cmt.lp-gift{box-shadow:0 .68cqw 3.15cqw rgba(254,44,85,.4);}
.lp-screen--story .lp-cmt.lp-gift .gi{width:10.82cqw;height:10.82cqw;margin-right:2.03cqw;}
.sty-dia{position:absolute;left:6%;right:6%;bottom:5%;background:rgba(12,6,28,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:12px;padding:8px 11px;display:flex;flex-direction:column;gap:3px;}
.sty-dia-label{font-weight:800;font-size:8.5px;color:rgba(255,255,255,.72);letter-spacing:.03em;}
.sty-dia-val{display:flex;align-items:center;gap:5px;}
.sty-dia-ic{font-size:12px;}
.sty-dia-num{font-family:var(--font-en);font-weight:800;font-size:17px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1;}
.sty-dia-up{font-size:9px;color:#39e0bf;font-weight:900;}

.sty-note{text-align:center;margin-top:22px;font-weight:700;
  font-size:clamp(10px,1.1vw,12px);color:var(--sty-dim);}
.sty-cta{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.sty-cta-note{font-weight:700;font-size:clamp(10px,1.1vw,12px);color:var(--sty-dim);}

@media (max-width:768px){
  .sty-grid{grid-template-columns:1fr;gap:22px;}
  /* スマホのみ：見出し2行（\ぶっちゃけ/ ／ 収益化までの4Step！）を詰める。
     eyebrowの下の行送りを削り、titleを上に寄せる（PCは既定値のまま） */
  .sty-eyebrow{line-height:1.12;}
  .sty-title{margin-top:-4px;}
  /* 旧フレーム（余白だらけの画像）を拡大して余白を切り落とすための指定だった。
     Story専用フレームは余白なしなので、幅の上限だけ少し下げれば足りる。
     スマホでは枠全体を一回り小さく（245→208px） */
  .sty-phone .lp-crop{max-width:min(208px,80%);}
  .sty-step{gap:10px;padding:11px 12px;border-radius:14px;}
  .sty-step-badge{width:50px;height:50px;font-size:17px;}
}

/* 丸を大きくすると、そのぶん本文の幅が削られる。360px（iPhone 12 mini）では
   50pxだと「ギフトが安定して届くように」が折り返してカードの高さが崩れる。
   42px以下なら説明文11.5pxのまま1行に収まる（実測）。狭い画面だけ丸を小さくする */
@media (max-width:374px){
  .sty-step-badge{width:42px;height:42px;font-size:15px;}
  .sty-step-badge small{font-size:8px;}
}

@media (max-width:768px){
  .tlb{padding:32px 0 10px;}
  .tlb-cont{padding-bottom:46px;}
  .tlb--left .tlb-cont{border-radius:0 44px 44px 0;}
  .tlb--right .tlb-cont{border-radius:44px 0 0 44px;}
  .tlb-head{transform:translateY(-18%);}
  .tlb--left .tlb-head{padding-left:22px;transform:translateY(-11%);}
  .tlb--right .tlb-head{padding-right:22px;}
  .tlb-en{font-size:clamp(46px,15vw,82px);}
  .style-en{font-size:clamp(46px,15vw,82px);}
  /* 詳細セクションもスマホは角丸を控えめに（tlbと同じ44px） */
  .spick-detail--live .sdt{border-radius:0 44px 44px 0;}
  .spick-detail--game .sdt{border-radius:44px 0 0 44px;}
  /* スマホのみ：スライド待機中の非表示パネルのはみ出しをclip（tlbの.tlbと同形式）→端の空白解消 */
  .style-stage{overflow:hidden;}
  .sp-br{display:inline;}
  .pc-br{display:none;}
  .tlb-note{gap:10px;padding:12px 14px;margin-top:-10px;}
  .tlb-note-ic{width:40px;height:40px;font-size:18px;}
  .tlb-note p{font-size:12px;line-height:1.55;}
  .tlb-body:not(.tlb-body--gift):not(.tlb-body--rwd):not(.tlb-body--story){grid-template-columns:1fr;gap:10px;}
  /* スマホ：TikTok Live帯を1画面に収める。フレームPNG上部の透明余白ぶん引き上げて
     注記のすぐ下に電話を寄せ、そのぶんセクション高も縮める（電話が注記に被らないよう-56pxに調整） */
  .tlb-figure{margin-top:-40px;margin-bottom:-46px;width:100vw;margin-left:calc(50% - 50vw);transform:none;}
  .lp-crop{max-width:480px;}
  .tlb-giftbox{right:8%;bottom:34%;width:clamp(74px,20vw,116px);}
  /* 装飾：スマホ版の雲（約2倍・最前面・指定位置）。キラキラは共通設定を流用 */
  .tlb--left .tlb-cloud--1{top:5%;right:-12%;left:auto;bottom:auto;width:clamp(166px,47vw,229px);}
  .tlb--left .tlb-cloud--2{bottom:4%;left:1%;right:auto;top:auto;width:clamp(120px,33vw,164px);}
  .tlb--right .tlb-cloud--1{display:none;}
  .tlb--right .tlb-cloud--2{top:2%;left:-12%;right:auto;bottom:auto;width:clamp(154px,43vw,211px);}
  /* Storyだけ雲を上へ。top:2%だと「配信で稼げるように…」の白文字に白い雲が重なって読めない。
     この指定は②Gift Cultureと共通なので、④だけに効くよう .tlb を足して詳細度で勝たせている。
     被らない限界は top:-1.1%（320px幅が一番きつい）。実機の文字位置のズレを見て少し上に置いている。
     ※cloud.pngは下に33px（高さの23.6%）透明な余白があるので、要素の枠で測ると限界を読み違える */
  .tlb.tlb--cyan .tlb-cloud--2{top:-1.5%;left:-6%;}
  /* キラキラ：スマホでは中央寄りの2つを左右の余白へ逃がし、本文と被らせない */
  .tlb--left .tlb-spark--5{top:42%;right:auto;left:3%;}
  .tlb--right .tlb-spark--5{top:30%;left:auto;right:3%;}
  .tlb-gifts-list{grid-template-columns:repeat(3,1fr);gap:18px 6px;}
  .tlb-gifts-list img{width:60px;height:60px;}
  /* Point!はスマホのみ小さく＋下の本文を上に詰める＋ブロックごと上へ（PCは据え置き） */
  .tlb-point{font-size:13.5px;gap:2px 14px;margin-top:4px;}
  .tlb-point-em{font-size:33px;}
}

/* =====================================================================
   Story（スマホ）＝ステップボタン＋吹き出し／各スタイルの対比スペック
   ===================================================================== */

/* （旧 .sdt-spec / .sspec は .sbento に統合済み・削除） */

/* 吹き出しは既定で非表示（PCでは出さない。スマホでのみ表示） */
.sty-bubble{display:none;}
@keyframes styBubblePop{
  from{opacity:0;transform:translateY(8px) scale(.94);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* --- Story レイアウト（スマホのみ・PCは従来どおり） --- */
@media (max-width:768px){
  /* スマホ画面の直下に Step1〜4 を並べ、選ぶと内容がふわっと吹き出しで出る */
  .sty-grid{gap:32px;}   /* 吹き出しは電話下端に固定なので、gapを詰めるとボタンだけ上がる（吹き出しは不動） */
  /* 横長の長方形（ピル）を横1列いっぱいに4等分で並べる。隙間は詰める */
  .sty-steps{flex-direction:row;gap:7px;padding:0 0 2px;}
  .sty-steps > li{flex:1;min-width:0;}   /* 4等分＝横1列に並ぶギリギリの幅 */
  /* ボタンは「長方形（バッジ）」だけ見せる。grid をやめて block にし、バッジを横いっぱいに広げる */
  .sty-step{display:block;width:100%;padding:0;background:none;border:none;box-shadow:none;}
  .sty-step:hover{transform:none;box-shadow:none;}
  .sty-step[aria-pressed="true"]{background:none;box-shadow:none;transform:none;}
  .sty-step .sty-step-main{display:none;}
  /* 丸→横長の長方形。幅いっぱい＝各ボタンがliの1/4を埋める。大きめ・「Step 1」を横並びで中央に */
  .sty-step-badge{width:100%;height:auto;min-height:0;border-radius:14px;
    flex-direction:row;gap:4px;padding:15px 4px;font-size:22px;
    transition:transform .2s ease,background .2s ease;}
  .sty-step-badge small{font-size:14px;margin-top:0;}
  /* 選択中：ピンク＋白文字。長方形なので拡大でなく少し持ち上げる */
  .sty-step[aria-pressed="true"] .sty-step-badge{transform:translateY(-2px);
    background:linear-gradient(140deg,#ff5fa2,#e4185f);color:#fff;}
  .sty-phone{position:relative;}
  /* ★1枚岩の吹き出し：箱＋しっぽを clip-path で「ひとつの図形」として切り抜く。
     すりガラス(backdrop-filter)が箱からしっぽまで連続して流れるので完全に一体。
     下に 11px の余白(padding-bottom)を確保し、その中にしっぽを彫る。
     影は filter:drop-shadow でしっぽの形まで回り込ませる（box-shadowは切り抜きに追従しない） */
  .sty-bubble{display:block;position:absolute;z-index:8;pointer-events:none;
    bottom:-12%;width:fit-content;max-width:min(80%,215px);padding:8px 13px 19px;
    background:rgba(228,24,95,.28);
    -webkit-backdrop-filter:blur(9px) saturate(1.4);backdrop-filter:blur(9px) saturate(1.4);
    filter:drop-shadow(0 6px 12px rgba(120,10,50,.32));color:#fff;}
  /* Step1-2は左端、Step3-4は右端（ページ端から少しだけ空けた位置） */
  .sty-bubble.bub-s1,.sty-bubble.bub-s2{left:0;right:auto;text-align:left;}
  .sty-bubble.bub-s3,.sty-bubble.bub-s4{right:0;left:auto;text-align:right;}
  /* 角は半径6pxを3点で近似して「ちょい丸」に。下辺の中央に各Step向きのしっぽを彫る。
     しっぽの先端＝選択中Stepボタン中心の真上。左寄せは左端(28px)から、右寄せは右端(362px)から測る */
  .sty-bubble.bub-s1{
    clip-path:polygon(0 6px,2px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 2px) 2px,100% 6px,
      100% calc(100% - 17px),calc(100% - 2px) calc(100% - 13px),calc(100% - 6px) calc(100% - 11px),
      35px calc(100% - 11px),26px 100%,17px calc(100% - 11px),
      6px calc(100% - 11px),2px calc(100% - 13px),0 calc(100% - 17px));}
  .sty-bubble.bub-s2{
    clip-path:polygon(0 6px,2px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 2px) 2px,100% 6px,
      100% calc(100% - 17px),calc(100% - 2px) calc(100% - 13px),calc(100% - 6px) calc(100% - 11px),
      120px calc(100% - 11px),111px 100%,102px calc(100% - 11px),
      6px calc(100% - 11px),2px calc(100% - 13px),0 calc(100% - 17px));}
  .sty-bubble.bub-s3{
    clip-path:polygon(0 6px,2px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 2px) 2px,100% 6px,
      100% calc(100% - 17px),calc(100% - 2px) calc(100% - 13px),calc(100% - 6px) calc(100% - 11px),
      calc(100% - 129px) calc(100% - 11px),calc(100% - 138px) 100%,calc(100% - 147px) calc(100% - 11px),
      6px calc(100% - 11px),2px calc(100% - 13px),0 calc(100% - 17px));}
  .sty-bubble.bub-s4{
    clip-path:polygon(0 6px,2px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 2px) 2px,100% 6px,
      100% calc(100% - 17px),calc(100% - 2px) calc(100% - 13px),calc(100% - 6px) calc(100% - 11px),
      calc(100% - 44px) calc(100% - 11px),calc(100% - 53px) 100%,calc(100% - 62px) calc(100% - 11px),
      6px calc(100% - 11px),2px calc(100% - 13px),0 calc(100% - 17px));}
  .sty-bubble .b-title{display:block;font-family:var(--font-head);font-weight:900;
    color:#fff;font-size:12px;line-height:1.4;text-shadow:0 1px 3px rgba(120,10,50,.55);}
  .sty-bubble .b-desc{display:block;margin-top:2px;font-size:10.5px;font-weight:600;
    color:rgba(255,255,255,.95);line-height:1.4;text-shadow:0 1px 3px rgba(120,10,50,.55);}
  .sty-bubble.pop{animation:styBubblePop .34s cubic-bezier(.22,1,.36,1);}
}
/* 動きを控える設定では、ふわっとは出さず即表示 */
@media (prefers-reduced-motion:reduce){
  .sty-bubble.pop{animation:none;}
}

/* =========================================================
   INTRO / 案A GOING LIVE（サイト入りの演出）
   表示判定は index.html <head> のスクリプト（html.intro-playing を付与）。
   既定は display:none。intro-playing のときだけ全画面で描画し、約3.4秒でサイトへ切替。
   入場アニメと退場アニメは同一要素に1つの animation でカンマ区切り指定
   （別ルールに分けると詳細度同値で打ち消し合うため）。
   ========================================================= */
.a-intro{display:none;}
/* スクロールロックは幕が退くまで（intro-reveal が付くと解除） */
html.intro-playing:not(.intro-reveal){overflow:hidden;}
html.intro-playing .a-intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:9999;
  background:radial-gradient(120% 100% at 50% 30%,#14161d 0%,#0b0c12 55%,#05060a 100%);
  transition:opacity .7s ease, transform .7s cubic-bezier(.7,0,.2,1);
}
.a-intro.done{opacity:0;transform:translateY(-8%);pointer-events:none;}
.a-intro .a-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;}
.a-intro .a-livebadge{display:inline-flex;align-items:center;gap:9px;padding:9px 20px 9px 15px;border-radius:999px;
  background:linear-gradient(90deg,#ff2d74,#ff3a55);color:#fff;font-family:var(--font-en);font-weight:800;
  letter-spacing:.14em;font-size:19px;box-shadow:0 10px 30px rgba(255,45,116,.5);opacity:0;transform:scale(.6);}
.a-intro .a-dot{width:11px;height:11px;border-radius:50%;background:#fff;}
.a-intro .a-count{display:inline-flex;align-items:center;gap:10px;color:#dfe6ff;font-family:var(--font-en);
  font-weight:700;font-size:clamp(40px,9vw,78px);letter-spacing:.01em;opacity:0;transform:translateY(10px);
  text-shadow:0 4px 24px rgba(90,130,255,.4);}
.a-intro .a-count svg{width:.62em;height:.62em;opacity:.85;}
.a-intro .a-count small{font-size:.26em;font-weight:600;letter-spacing:.22em;color:#8ea2e0;align-self:flex-end;margin-bottom:.7em;}
.a-intro .a-reveal{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;}
.a-intro .a-reveal-in{display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.9);}
.a-intro .a-logo{width:min(280px,64vw);filter:drop-shadow(0 8px 26px rgba(0,0,0,.45));}
.a-intro .a-tag{font-family:var(--font-en);font-weight:700;letter-spacing:.42em;font-size:13px;color:#9fb2ea;padding-left:.42em;}
.a-intro .a-flash{position:absolute;inset:-40vmax;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,0) 60%);opacity:0;pointer-events:none;}

.a-intro.play .a-livebadge{animation:aiBadge .5s .15s cubic-bezier(.2,1.4,.3,1) forwards, aiFade .35s 2.1s ease forwards;}
.a-intro.play .a-dot{animation:aiPulse 1s .5s ease-out 3;}
.a-intro.play .a-count{animation:aiCount .5s .45s ease forwards, aiFade .35s 2.1s ease forwards;}
.a-intro.play .a-flash{animation:aiFlash .55s 2.05s ease-out forwards;}
.a-intro.play .a-reveal{animation:aiRevealShow .6s 2.25s cubic-bezier(.2,1,.3,1) forwards;}
.a-intro.play .a-reveal-in{animation:aiRevealPop .7s 2.25s cubic-bezier(.2,1.3,.3,1) forwards;}

@keyframes aiBadge{to{opacity:1;transform:scale(1);}}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}100%{box-shadow:0 0 0 16px rgba(255,255,255,0);}}
@keyframes aiCount{to{opacity:1;transform:none;}}
@keyframes aiFlash{0%{opacity:0;transform:scale(.4);}40%{opacity:.95;}100%{opacity:0;transform:scale(1.1);}}
@keyframes aiFade{to{opacity:0;transform:translateY(-14px) scale(.96);}}
@keyframes aiRevealShow{to{opacity:1;}}
@keyframes aiRevealPop{to{transform:scale(1);}}

/* =========================================================
   INTRO → hero の受け渡し（①heroが緩やかに立ち上がる ＋ ③要素を順に）
   イントロが流れたセッションのみ有効（html.intro-playing）。
   通常ロード（イントロ無し）は既存の heroIn のまま・一切変更なし。
   仕組み：幕の裏では hero の通常入場を止めて隠し、幕が退く瞬間
   （driver が html に intro-reveal を付与）に改めて登場させる。
   写真は固定フレーミング transform:scale(1.32) を壊さないよう、独立の
   scale プロパティで「少し引き(×1.06)→定位置(×1)」に戻す（PC/スマホ共通）。
   ========================================================= */
/* 幕の裏：通常入場を止めて隠す（写真だけ少し引きの状態に） */
html.intro-playing .hero-flag,
html.intro-playing .hero-title-img,
html.intro-playing .hero-script-img,
html.intro-playing .hero-lead,
html.intro-playing .hero-cta-row,
html.intro-playing .hero-live,
html.intro-playing .hero-badge-wrap{animation:none;opacity:0;}
html.intro-playing .hero-img{scale:1.06;}

/* 幕が退く瞬間：写真がゆっくり定位置へ（①）／中身を少しずつ立ち上げ（③） */
@media (prefers-reduced-motion:no-preference){
  html.intro-playing.intro-reveal .hero-img{
    animation:heroSettle 1.25s cubic-bezier(.16,1,.3,1) both;}
  html.intro-playing.intro-reveal .hero-title-img,
  html.intro-playing.intro-reveal .hero-script-img,
  html.intro-playing.intro-reveal .hero-lead,
  html.intro-playing.intro-reveal .hero-cta-row,
  html.intro-playing.intro-reveal .hero-live{
    animation:heroIn .72s cubic-bezier(.16,1,.3,1) both;}
  html.intro-playing.intro-reveal .hero-flag{
    animation:heroIn .72s cubic-bezier(.16,1,.3,1) .06s both, flagBob 2.4s ease-in-out 1.2s infinite;}
  html.intro-playing.intro-reveal .hero-badge-wrap{
    animation:heroIn .72s cubic-bezier(.16,1,.3,1) .58s both, badgeFloat 3.6s ease-in-out 1.7s infinite;}
  /* 立ち上がりの順番（見出し→スクリプト→リード→CTA／チャットは中盤） */
  html.intro-playing.intro-reveal .hero-title-img{animation-delay:.14s;}
  html.intro-playing.intro-reveal .hero-script-img{animation-delay:.24s;}
  html.intro-playing.intro-reveal .hero-lead{animation-delay:.36s;}
  html.intro-playing.intro-reveal .hero-cta-row{animation-delay:.46s;}
  html.intro-playing.intro-reveal .hero-live{animation-delay:.42s;}
}
@keyframes heroSettle{from{scale:1.06;}to{scale:1;}}