/* ============================================================
   Enjy LP — sections.css
   ストーリー：静寂 → 芽生え → 共鳴 → 拡散 → 深化 → 参加
   ============================================================ */

/* ============ 01 HERO ============ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(120px,16vh,180px) 0 clamp(90px,12vh,130px);
  overflow:hidden;
}
/* PC : 左にコピーとボタン、右にモック
   スマホ: コピー → モック → ボタン の縦並び
   ボタンはコピーと別ブロックにして、配置だけ切り替える */
.hero__inner{
  width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-template-areas:
    "copy    visual"
    "actions visual";
  column-gap:clamp(28px,5vw,60px);
  row-gap:clamp(28px,3.2vw,42px);
  align-items:center;
}
.hero__copy{ grid-area:copy; }
.hero__visual{ grid-area:visual; }
.hero__actions{ grid-area:actions; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.66em;
  font-family:var(--f-en); font-size:.74rem; letter-spacing:.2em;
  color:var(--ink-2); padding:.56em 1.24em; border-radius:999px;
  background:rgba(255,255,255,.66); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--sh-sm); margin-bottom:1.9em;
}
.hero__eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 0 rgba(255,111,165,.55); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,111,165,.5); }
  70%{ box-shadow:0 0 0 9px rgba(255,111,165,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,111,165,0); }
}

/* 主役コピー：明朝で組む＝しっとり感の核 */
.hero__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(2.5rem, 6.4vw, 4.5rem);
  line-height:1.42; letter-spacing:.06em;
  margin-bottom:.68em;
}
.hero__title .line{ display:block; }
.hero__title .line:last-child{
  background:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:flowText 11s ease-in-out infinite;
}
@keyframes flowText{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } }

.hero__lead{
  font-size:clamp(.96rem,1.9vw,1.12rem); line-height:2.15;
  color:var(--ink-2);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85em; }
.hero__note{
  margin-top:1.5em; font-size:.8rem; letter-spacing:.1em; color:var(--ink-3);
}

/* --- デバイスモック --- */
.hero__visual{ position:relative; perspective:1600px; }
.device{
  border-radius:20px; background:var(--card); overflow:hidden;
  box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.9);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.device--pc{
  width:100%; transform:rotateY(-13deg) rotateX(5deg) rotateZ(.6deg);
  transform-style:preserve-3d;
  animation:floatPC 12s ease-in-out infinite;
}
.device__bar{
  display:flex; gap:6px; align-items:center; padding:10px 14px;
  background:linear-gradient(90deg, rgba(255,111,165,.10), rgba(139,124,255,.10), rgba(95,212,255,.10));
  border-bottom:1px solid var(--line);
}
.device__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.device__bar i:first-child{ background:rgba(255,111,165,.5); }
.device__bar i:nth-child(2){ background:rgba(139,124,255,.5); }
.device--pc img{ width:100%; }

/* 画像がスマホの筐体ごと透過PNGで入っているので、カード枠は付けない。
   影は矩形ではなく実物の輪郭に沿わせたいので drop-shadow を使う。 */
.device--sp{
  position:absolute; right:-6%; bottom:-12%; width:27%;
  border-radius:0; padding:0; background:transparent;
  border:0; overflow:visible; box-shadow:none;
  filter:drop-shadow(0 30px 58px rgba(112,88,180,.30))
         drop-shadow(0 8px 18px rgba(112,88,180,.16));
  transform:rotateY(-13deg) rotateX(4deg) translateZ(60px);
  animation:floatSP 9s ease-in-out infinite;
}
.device--sp img{ border-radius:0; }

@keyframes floatPC{
  0%,100%{ transform:rotateY(-13deg) rotateX(5deg) rotateZ(.6deg) translateY(0); }
  50%{ transform:rotateY(-11deg) rotateX(4deg) rotateZ(0deg) translateY(-14px); }
}
@keyframes floatSP{
  0%,100%{ transform:rotateY(-13deg) rotateX(4deg) translateZ(60px) translateY(0); }
  50%{ transform:rotateY(-10deg) rotateX(3deg) translateZ(60px) translateY(-18px); }
}

.hero__chip{
  position:absolute; z-index:3;
  font-size:.76rem; letter-spacing:.06em; color:var(--ink);
  padding:.68em 1.24em; border-radius:999px;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--sh); white-space:nowrap;
}
.hero__chip--1{ top:6%; left:-7%; animation:floatChip 7s ease-in-out infinite; }
.hero__chip--2{ bottom:16%; left:-4%; color:var(--pink); animation:floatChip 8.5s ease-in-out infinite .8s; }
@keyframes floatChip{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

/* --- scroll hint --- */
.scroll-hint{
  position:absolute; left:50%; bottom:clamp(20px,4vh,40px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.8em;
}
.scroll-hint__line{
  width:1px; height:52px; overflow:hidden; position:relative;
  background:var(--line-2);
}
.scroll-hint__line::after{
  content:""; position:absolute; inset:0; background:var(--grad);
  animation:scrollLine 2.4s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); }
}
.scroll-hint__txt{
  font-family:var(--f-en); font-size:.66rem; letter-spacing:.3em;
  color:var(--ink-3); text-transform:uppercase;
}


/* ============ 02 ABOUT ============ */
.about{ position:relative; padding:var(--sec) 0; overflow:hidden; }

/* 背景を流れるアプリ画面 */
.stream{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; gap:clamp(18px,3vw,40px);
  justify-content:center; align-items:stretch;
  opacity:.30; filter:blur(1.6px) saturate(.86);
  transform:rotate(-7deg) scale(1.34); transform-origin:center;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, transparent 0%, transparent 28%, #000 78%);
  mask-image:radial-gradient(circle at 50% 46%, transparent 0%, transparent 28%, #000 78%);
}
.stream__col{ width:clamp(200px,20vw,300px); flex:none; height:100%; overflow:hidden; }
.stream__track{ display:flex; flex-direction:column; gap:clamp(18px,3vw,34px); }
.stream__track img{
  width:100%; border-radius:14px; box-shadow:var(--sh-sm);
  border:1px solid rgba(255,255,255,.8);
}
.stream__col--up   .stream__track{ animation:streamUp 58s linear infinite; }
.stream__col--down .stream__track{ animation:streamUp 66s linear infinite reverse; }
.stream__col--slow .stream__track{ animation-duration:78s; }
@keyframes streamUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

.about__inner{
  position:relative; z-index:1;
  width:min(880px, 100% - var(--pad)*2); margin-inline:auto; text-align:center;
}
.about .sec-label{ justify-content:center; }
.about .sec-label::after{ display:none; }
.about__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(1.6rem,4.4vw,2.85rem); line-height:1.7; letter-spacing:.07em;
  margin-bottom:1.1em;
}
.about__text{
  font-size:clamp(1rem,2.1vw,1.22rem); line-height:2.15; margin-bottom:1.5em;
}
.about__text b{
  font-weight:500; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about__text--sub{ font-size:clamp(.9rem,1.7vw,1rem); color:var(--ink-2); line-height:2.25; }

.about__facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,22px); margin-top:clamp(46px,7vw,76px);
}
.about__facts li{
  padding:clamp(24px,3.4vw,38px) clamp(12px,2vw,20px); border-radius:20px;
  background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:var(--sh-sm);
}
.about__facts .num{
  font-family:var(--f-en); font-weight:300; font-size:clamp(2.1rem,5vw,3.1rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about__facts .unit{ font-size:.82rem; color:var(--ink-2); margin-left:.35em; letter-spacing:.1em; }
.about__facts p{ margin-top:.9em; font-size:.8rem; line-height:1.9; color:var(--ink-2); }


/* ============ 03 EXPERIENCE ============ */
.exp{ position:relative; padding:var(--sec) 0; overflow:hidden; }
/* 巨大マイク：白背景の写真を multiply で溶かして薄く敷く */
.exp__mic{
  position:absolute; top:50%; left:50%;
  width:clamp(460px,58vw,900px); transform:translate(-50%,-48%);
  opacity:.16; mix-blend-mode:multiply; z-index:0; pointer-events:none;
  filter:saturate(.5) contrast(.92);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 34%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, #000 34%, transparent 72%);
}
.exp__inner{ position:relative; z-index:1; width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }
.exp .sec-title{ margin-bottom:clamp(56px,9vw,110px); }

.step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,6vw,84px); align-items:center;
  margin-bottom:clamp(80px,12vw,150px);
}
.step:last-child{ margin-bottom:0; }
.step--rev .step__text{ order:2; }
.step--rev .step__visual{ order:1; }

.step__no{
  font-family:var(--f-en); font-size:.72rem; letter-spacing:.3em; color:var(--ink-3);
  margin-bottom:1.5em; display:flex; align-items:center; gap:.9em;
}
.step__no::before{ content:""; width:30px; height:1px; background:var(--grad); }
.step__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(1.34rem,3.2vw,2rem); line-height:1.62; letter-spacing:.05em;
  margin-bottom:1em;
}
.step__desc{ color:var(--ink-2); font-size:clamp(.9rem,1.7vw,1rem); line-height:2.15; }
.step__desc--sub{
  margin-top:1.5em; font-size:.84rem; color:var(--ink-3);
  padding-left:1.1em; border-left:2px solid var(--line-2);
}

/* --- お題カード --- */
.step__visual{ position:relative; }
.theme-card{
  position:relative; z-index:2;
  padding:clamp(24px,3.4vw,38px); border-radius:24px;
  background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--sh);
}
.theme-card__badge{
  display:inline-block; font-size:.7rem; letter-spacing:.12em; color:#fff;
  padding:.44em 1.1em; border-radius:999px; background:var(--grad);
  margin-bottom:1.4em;
}
.theme-card__title{
  font-family:var(--f-min); font-size:clamp(1rem,2.1vw,1.24rem);
  line-height:1.85; letter-spacing:.04em;
}
.theme-card__meta{
  display:flex; gap:1.4em; margin-top:1.3em; padding-top:1.3em;
  border-top:1px solid var(--line);
  font-size:.74rem; color:var(--ink-3); letter-spacing:.08em;
}
.theme-card__btn{
  display:inline-block; margin-top:1.6em; padding:.86em 1.9em; border-radius:999px;
  background:var(--grad); color:#fff; font-size:.84rem; letter-spacing:.08em;
  box-shadow:0 10px 26px rgba(255,111,165,.24);
}
.theme-card--ghost{
  position:absolute; left:6%; width:88%; padding:1.2em 1.6em;
  background:rgba(255,255,255,.55); box-shadow:var(--sh-sm);
}
.theme-card--ghost .theme-card__title{ font-size:.86rem; color:var(--ink-2); line-height:1.7; }
.theme-card--g1{ z-index:1; bottom:-46px; transform:scale(.965); opacity:.9; }
.theme-card--g2{ z-index:0; bottom:-84px; left:11%; width:78%; transform:scale(.93); opacity:.6; }

/* --- 録音画面 + 波形 --- */
.rec-frame{
  width:min(300px, 78%); margin-inline:auto; padding:8px;
  border-radius:30px; background:var(--card);
  box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.9);
}
.rec-frame img{ border-radius:24px; }

.wave{
  display:flex; align-items:center; justify-content:center; gap:5px;
  height:64px; margin-top:34px;
}
.wave span{
  width:4px; border-radius:999px; background:var(--grad); opacity:.66;
  animation:waveBar 1.5s ease-in-out infinite;
}
.wave span:nth-child(3n){   animation-duration:1.15s; }
.wave span:nth-child(3n+1){ animation-duration:1.85s; }
.wave span:nth-child(4n){   animation-delay:-.5s; }
.wave span:nth-child(5n){   animation-delay:-.9s; }
.wave span:nth-child(7n){   animation-delay:-1.3s; }
@keyframes waveBar{ 0%,100%{ height:10px; } 50%{ height:52px; } }


/* ============ 04 GALLERY ============ */
.gallery{ position:relative; padding:var(--sec) 0; }
.gallery__inner{ width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }
.gallery .sec-title{ margin-bottom:clamp(50px,8vw,92px); }

.gal-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(18px,2.6vw,34px); align-items:start;
}
.gal{ margin:0; grid-column:span 2; }
.gal--wide{ grid-column:span 4; }

.gal__frame{
  position:relative; overflow:hidden; background:var(--card);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh); transition:transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .9s;
}
/* 画面の中身を見せるのが目的なので、比率を固定して切り抜かない。
   枠の高さはスクショの縦横比にまかせる。 */
.gal__frame--pc{ border-radius:18px; }
.gal__frame--sp{ border-radius:22px; padding:7px; }
.gal__frame--sp img{ border-radius:16px; }
.gal__frame img{ width:100%; height:auto; display:block; }
.gal__frame::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .9s;
  background:linear-gradient(140deg, rgba(255,111,165,.14), rgba(95,212,255,.14));
}
.gal:hover .gal__frame{ transform:translateY(-9px); box-shadow:var(--sh-lg); }
.gal:hover .gal__frame::after{ opacity:1; }

.gal figcaption{ margin-top:1.5em; }
.gal figcaption b{
  display:block; font-family:var(--f-min); font-weight:600;
  font-size:clamp(.98rem,1.9vw,1.14rem); line-height:1.75; letter-spacing:.05em;
  margin-bottom:.5em;
}
.gal figcaption span{ font-size:.8rem; color:var(--ink-3); line-height:1.9; }


/* ============ 05 PRICING ============ */
.pricing{ position:relative; padding:var(--sec) 0; }
.pricing__inner{
  width:min(940px, 100% - var(--pad)*2); margin-inline:auto; text-align:center;
}
.pricing .sec-label{ justify-content:center; }
.pricing .sec-label::after{ display:none; }

.plans{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,30px); text-align:left;
}
.plan{
  position:relative; padding:clamp(30px,4vw,46px); border-radius:26px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--sh-sm);
  transition:transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s;
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh); }

.plan--premium{
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72)) padding-box,
    var(--grad) border-box;
  border:1.5px solid transparent;
  box-shadow:0 22px 60px rgba(255,111,165,.14), 0 6px 20px rgba(139,124,255,.10);
}
.plan__ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--f-en); font-size:.68rem; letter-spacing:.24em; color:#fff;
  padding:.5em 1.5em; border-radius:999px; background:var(--grad);
  box-shadow:0 8px 20px rgba(255,111,165,.28); text-transform:uppercase;
}
.plan__name{
  font-family:var(--f-en); font-size:.82rem; letter-spacing:.24em;
  color:var(--ink-3); text-transform:uppercase; margin-bottom:.9em;
}
.plan__price{ display:flex; align-items:baseline; gap:.35em; margin-bottom:.5em; }
.plan__price .v{
  font-family:var(--f-en); font-weight:300; font-size:clamp(2.2rem,5vw,3rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plan__price .u{ font-size:.8rem; color:var(--ink-2); letter-spacing:.1em; }
.plan__desc{
  font-family:var(--f-min); font-size:.92rem; color:var(--ink-2);
  padding-bottom:1.6em; margin-bottom:1.6em; border-bottom:1px solid var(--line);
}
.plan__list li{
  position:relative; padding-left:1.7em; margin-bottom:.9em;
  font-size:.87rem; line-height:1.95; color:var(--ink-2);
}
.plan__list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:8px; border-radius:50%; background:var(--grad); opacity:.85;
}
.plan__list b{ font-weight:500; color:var(--ink); }
.plan__list .off{ color:var(--ink-3); }
.plan__list .off::before{ background:var(--line-2); }
/* 項目に付ける補足（エフェクトの内訳など） */
.plan__list small{
  display:block; margin-top:.15em;
  font-size:.76rem; line-height:1.75; letter-spacing:.03em; color:var(--ink-3);
}

/* β期間の特典。「後出しの課金改悪はしない」方針に沿って、
   特典と“終わり方”を必ず同じ場所に並べて書く */
.plan__beta{
  margin-top:1.7em; padding-top:1.4em; border-top:1px dashed var(--line-2);
}
.plan__beta b{
  display:block; font-weight:500; font-size:.9rem; letter-spacing:.05em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plan__beta small{
  display:block; margin-top:.5em;
  font-size:.75rem; line-height:1.85; letter-spacing:.03em; color:var(--ink-3);
}


/* ============ 06 BETA ============ */
.beta{ position:relative; padding:var(--sec) 0 clamp(110px,15vw,180px); overflow:hidden; }
.beta::before{
  content:""; position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
  width:min(1000px,120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,111,165,.20), rgba(139,124,255,.10) 46%, transparent 70%);
  pointer-events:none; animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.09); } }

.beta__inner{
  position:relative; z-index:1;
  width:min(680px, 100% - var(--pad)*2); margin-inline:auto; text-align:center;
}
.beta .sec-label{ justify-content:center; }
.beta .sec-label::after{ display:none; }
.beta__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(1.7rem,4.6vw,2.9rem); line-height:1.65; letter-spacing:.07em;
  margin-bottom:1em;
}
.beta__lead{ color:var(--ink-2); font-size:clamp(.9rem,1.7vw,1rem); line-height:2.15; margin-bottom:1.9em; }

/* β特典。登録の動機になる一方で終了条件も同時に見せる必要があるため、
   ひとつの箱に「もらえるもの」と「終わったらどうなるか」を並べる */
.beta__perk{
  display:inline-block; margin-bottom:2.8em;
  padding:1.1em 1.8em; border-radius:20px; text-align:center;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:var(--sh-sm);
}
.beta__perk b{
  display:block; font-weight:500; font-size:clamp(.88rem,1.7vw,.96rem); letter-spacing:.05em;
}
.beta__perk small{
  display:block; margin-top:.55em;
  font-size:.75rem; line-height:1.85; letter-spacing:.03em; color:var(--ink-3);
}

.beta__form .field{
  display:flex; gap:.5em; padding:.5em; border-radius:999px;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--sh); transition:box-shadow .5s, border-color .5s;
}
.beta__form .field:focus-within{ box-shadow:var(--sh-lg); }
.beta__form input[type=email]{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  padding:1em 1.6em; font-size:.94rem; letter-spacing:.06em;
}
.beta__form input[type=email]::placeholder{ color:var(--ink-3); }
.beta__err{
  min-height:1.5em; margin-top:.9em; font-size:.78rem; color:var(--pink); letter-spacing:.06em;
}
.check{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-size:.8rem; color:var(--ink-2);
}
.check input{ width:16px; height:16px; accent-color:var(--purple); }
.check a{ color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.beta__mini{ margin-top:1.6em; font-size:.74rem; color:var(--ink-3); line-height:1.9; }

/* 送信完了 */
.beta__done{ padding:2em 0; }
.beta__ring{ position:relative; width:110px; height:110px; margin:0 auto 2em; }
.beta__ring span{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--pink);
  opacity:0; animation:ripple 3s cubic-bezier(.2,.8,.2,1) infinite;
}
.beta__ring span:nth-child(2){ animation-delay:.9s; border-color:var(--purple); }
.beta__ring span:nth-child(3){ animation-delay:1.8s; border-color:var(--aqua); }
@keyframes ripple{
  0%{ transform:scale(.3); opacity:0; }
  22%{ opacity:.85; }
  100%{ transform:scale(1.35); opacity:0; }
}
.beta__doneTtl{
  font-family:var(--f-min); font-size:clamp(1.3rem,3.4vw,1.85rem);
  letter-spacing:.08em; margin-bottom:.8em;
}
.beta__doneTxt{ color:var(--ink-2); font-size:.92rem; line-height:2.1; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  /* コピー → モック → ボタン。ボタンを画面のより近くに置いて押させる */
  .hero__inner{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "visual" "actions";
    column-gap:0; row-gap:clamp(54px,10vw,78px);
    text-align:center;
  }
  .hero__eyebrow{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__visual{ max-width:560px; margin-inline:auto; }
  .step, .step--rev .step__text, .step--rev .step__visual{ grid-template-columns:1fr; order:initial; }
  .step{ gap:clamp(48px,8vw,64px); }
  .step__visual{ margin-bottom:clamp(50px,9vw,70px); }
  .gal-grid{ grid-template-columns:repeat(4,1fr); }
  .gal{ grid-column:span 2; }
  .gal--wide{ grid-column:span 4; }
}

@media (max-width:640px){
  .hero{ min-height:auto; padding-top:clamp(110px,22vh,150px); }
  .device--pc{ transform:none; animation:none; }
  .device--sp{ transform:none; animation:none; right:-3%; bottom:-8%; width:30%; }
  .hero__chip--1{ top:-4%; left:0; }
  .hero__chip--2{ bottom:8%; left:-2%; }
  .scroll-hint{ display:none; }

  .stream{ transform:rotate(-10deg) scale(1.9); opacity:.24; }
  .about__facts{ grid-template-columns:1fr; }
  .about__facts li{ display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap; text-align:left; padding:22px 24px; }
  .about__facts p{ width:100%; margin-top:.4em; }
  .about__facts p br{ display:none; }

  .exp__mic{ width:150vw; opacity:.12; }
  .theme-card--g1{ bottom:-34px; }
  .theme-card--g2{ bottom:-62px; }
  .step__visual{ margin-bottom:100px; }

  .gal-grid{ grid-template-columns:1fr; }
  .gal, .gal--wide{ grid-column:span 1; }
  .gal__frame--sp{ max-width:300px; margin-inline:auto; }

  .plans{ grid-template-columns:1fr; }
  .plan--premium{ margin-top:14px; }

  .beta__form .field{ flex-direction:column; border-radius:26px; padding:.8em; }
  .beta__form input[type=email]{ text-align:center; padding:.9em 1em; }
  .beta__form .btn{ width:100%; }
  .check{ display:flex; justify-content:center; text-align:left; }
}