@charset "UTF-8";
/* =========================================================
   ONE-C / 新ユニット ランディングページ
   共通スタイル
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  --pink:#ff10b1;
  --navy:#00004a;
  --cyan:#00ffff;
  --yellow:#ffff00;
  --blue:#0000ac;
  --white:#fdfbfe;
  --line-green:#06c655;
  --ink:#14121a;
  --lavender:#f4f1f8;

  --wrap:720px;          /* コンテンツ最大幅 */
  --pad:24px;            /* 左右余白 */
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",
         "BIZ UDPGothic",Meiryo,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font);
  font-weight:700;
  color:var(--white);
  background:#05031a;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0;}
/* 日本語は行を最後まで使い切る（text-wrap:pretty だと行が短く揃えられ、
   右側に余白ができてしまうため使わない）。1〜2文字だけ落ちる箇所は
   HTML側の <br class="br-sp"> で個別に調整している。 */
p,li,h1,h2,h3,h4,span{text-wrap:wrap;word-break:normal;line-break:strict;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0;}
h1,h2,h3,h4{margin:0;font-weight:900;line-height:1.4;}

/* ---------- utilities ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.cyan{color:var(--cyan);}
.pink{color:var(--pink);}
.yellow{color:var(--yellow);}
.is-hidden{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* スマホ幅のときだけ改行する（PCでは無視される） */
@media (min-width:601px){ .br-sp{display:none;} }

/* 画像見出し（.aiから書き出し） */
.h-img{margin-inline:auto;width:100%;}

/* =========================================================
   HERO — キービジュアル＋デモ音源プレーヤー
   ========================================================= */
/* ページ全体をキービジュアルと同じ幅の1カラムに収める */
.page{
  max-width:var(--wrap);margin-inline:auto;
  background:#05031a;overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.65);
}

/* ヒーロー全体に .ai の電撃テクスチャを敷き、キービジュアルの下端を
   そこへ溶け込ませることで「背景が下まで続いている」ように見せる */
.hero{
  position:relative;
  background:#07010e url("../assets/bg-electric.jpg") center top / cover no-repeat;
}
.hero__art{
  width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 92%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 92%,rgba(0,0,0,0) 100%);
}

/* プレーヤーを載せる帯（.aiの電撃テクスチャをキービジュアルから continue させる） */
.hero__demo{
  position:relative;
  padding:4px var(--pad) 34px;
}
/* プレーヤーを見やすくするための軽い落ち込みと、下のセクションへのつなぎ */
.hero__demo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(85% 55% at 50% 40%, rgba(4,2,18,.55), rgba(4,2,18,0) 78%),
    linear-gradient(180deg, rgba(6,3,24,0) 74%, #05031a 100%);
}
.hero__demo > *{position:relative;z-index:1;}

/* 専属ボカロP監修 リボン */
.ribbon{
  position:relative;top:-14px;
  display:inline-block;
  background:var(--yellow);color:#000;
  font-size:clamp(12px,3.2vw,15px);font-weight:900;letter-spacing:.04em;
  padding:7px 20px;
  transform:rotate(-2.5deg);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);
}

/* ---------- プレーヤー本体（.aiのモックを踏襲したたて型） ---------- */
.player{
  max-width:380px;margin-inline:auto;
  background:#050506;
  border-radius:34px;
  padding:18px 18px 22px;
  box-shadow:0 16px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07) inset;
}

/* ジャケット（白い角丸パネルに載せる） */
.player__disc{
  background:#fff;border-radius:20px;padding:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.player__art{width:100%;border-radius:12px;}

.player__title{
  margin-top:16px;text-align:center;color:#fff;
  font-size:clamp(16px,4.6vw,21px);font-weight:500;letter-spacing:.02em;
  line-height:1.35;
}
.player__title span{font-weight:400;}
.player__artist{
  margin-top:2px;text-align:center;color:#fff;
  font-size:clamp(11px,3vw,13px);font-weight:700;letter-spacing:.02em;
}

/* シークバー */
.player__seekwrap{margin-top:16px;padding:0 4px;}
.player__time{
  display:flex;justify-content:space-between;
  margin-top:2px;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

/* 共通レンジUI（シーク／音量）— モックに合わせて白のミニマル */
.range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:20px;margin:0;
  background:transparent;cursor:pointer;
}
.range::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(90deg,#fff 0%,#fff var(--p,0%),rgba(255,255,255,.28) var(--p,0%));
}
.range::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.28);}
.range::-moz-range-progress{height:4px;border-radius:999px;background:#fff;}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-5.5px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.range::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.range:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:999px;}

/* 再生／一時停止（モックに合わせて白いグリフのみ） */
.player__ctrl{
  display:flex;align-items:center;justify-content:center;
  margin-top:6px;
}
.pbtn{
  display:grid;place-items:center;
  width:72px;height:50px;padding:0;
  background:transparent;border:0;
  color:#fff;cursor:pointer;
  transition:transform .15s,opacity .15s;
}
.pbtn svg{width:44px;height:44px;fill:currentColor;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));}
.pbtn:hover{transform:scale(1.08);}
.pbtn:active{transform:scale(.96);}
.pbtn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:14px;}

/* 音量 */
.player__vol{
  display:flex;align-items:center;gap:12px;
  margin-top:8px;padding:0 6px;
}
.vol-ic{flex:0 0 auto;width:18px;height:18px;fill:#fff;}
.vol-ic--lg{width:22px;height:22px;}

/* =========================================================
   共通 — 電流テクスチャ背景
   ========================================================= */
.electric{
  position:relative;
  background:#000428 url("../assets/bg-electric.jpg") center top / 100% 100% no-repeat;
}
.electric::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,172,.62);
  pointer-events:none;
}
.electric > *{position:relative;z-index:1;}

/* =========================================================
   CONCEPT
   ========================================================= */
.concept{padding:48px 0 36px;}
.concept__title{max-width:640px;margin:0 auto 30px;}
.concept__lead{
  max-width:750px;margin-inline:auto;letter-spacing:0;
  font-size:clamp(13px,3.4vw,15px);font-weight:700;line-height:2.1;
  text-align:center;
  text-shadow:0 1px 6px rgba(0,0,40,.5);
}
.concept__lead + .concept__lead{margin-top:1.6em;}
.concept__statement{max-width:660px;margin:34px auto 0;}

/* 黄色い帯 */
.band{
  margin-top:32px;padding:22px var(--pad);
  background:var(--yellow);
  border-top:5px solid #b8d400;border-bottom:5px solid #b8d400;
  color:#000;font-size:16px;font-weight:900;line-height:1.75;
  text-align:center;letter-spacing:0;
}

/* 前身ユニット → YouTube */
.prev-unit{padding:10px 0 20px;}
.prev-unit__inner{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:16px;font-weight:900;letter-spacing:.08em;
  text-shadow:0 0 12px rgba(0,0,0,.6);
}
.prev-unit__btn{
  display:block;width:66px;transition:transform .2s,filter .2s;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.prev-unit__btn:hover{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(255,0,0,.8));}

/* =========================================================
   FEATURES — ①〜⑦
   ========================================================= */
.features{padding:0 0 40px;}
.feature{margin-bottom:22px;}
.feature__head{
  background:var(--white);
  color:var(--pink);
  font-size:clamp(18px,4.9vw,27px);
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
  padding:14px 12px;
  line-height:1.3;
}
.feature__body{
  background:var(--navy);
  border:2px solid rgba(253,251,254,.85);
  border-top:0;
  padding:18px 20px;
  font-size:15px;
  line-height:1.9;
}
.feature__body p + p{margin-top:.9em;}
.feature__list li{
  position:relative;padding-left:1.15em;
}
.feature__list li + li{margin-top:.55em;}
.feature__list li::before{
  content:"・";position:absolute;left:0;top:0;
}

/* =========================================================
   WANTED — こんなあなたを待っています
   ========================================================= */
.wanted{
  background:linear-gradient(180deg,#ffff00 0%,#ffff2e 45%,#ffffb4 100%);
  padding:30px 0 34px;
  color:#111;
}
.wanted__title{max-width:640px;margin:0 auto 26px;}
.wanted__list{display:flex;flex-direction:column;gap:20px;}
.wanted__item{display:flex;align-items:center;gap:16px;}
.wanted__icon{flex:0 0 54px;width:54px;display:grid;place-items:center;}
.wanted__icon img{max-height:64px;width:auto;}
.wanted__text{
  flex:1;background:#fff;border-radius:999px;
  padding:12px 22px;
  font-size:clamp(13px,3.5vw,16px);font-weight:900;color:#111;
  line-height:1.5;letter-spacing:0;text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.wanted__note{
  margin-top:10px;text-align:right;
  color:#e4002b;font-size:12px;font-weight:900;letter-spacing:.04em;
}
.wanted__foot{
  margin-top:26px;text-align:center;
  color:var(--pink);font-size:clamp(14px,3.7vw,17px);font-weight:900;
  line-height:1.7;letter-spacing:0;
}

/* =========================================================
   TERMS — 報酬・応募資格・スケジュール
   ========================================================= */
.terms{background:var(--lavender);color:var(--ink);padding:36px 0 8px;}
.terms h2{
  font-size:clamp(20px,5vw,25px);font-weight:900;letter-spacing:.04em;
  margin-bottom:14px;
}
.card{
  background:#fff;border-radius:18px;padding:22px 24px;
  box-shadow:0 2px 14px rgba(30,10,60,.06);
  margin-bottom:28px;
}
.pay-list{font-size:13.5px;font-weight:500;line-height:2.1;}
.pay-list li + li{margin-top:.35em;}

.req-list{font-size:14px;font-weight:500;line-height:1.85;}
.req-list > li{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;
  align-items:start;
}
.req-list > li + li{margin-top:16px;}
.req-list .check{width:22px;margin-top:.3em;}
.req-list b{font-weight:700;}
.req-note{
  display:block;margin-top:4px;
  font-size:11.5px;font-weight:500;line-height:1.75;color:#5a5566;
}
.req-list .em{color:var(--pink);font-weight:700;}

/* スケジュール */
.schedule__steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;align-items:stretch;
}
.step{
  background:#fff;border-radius:12px;padding:12px 8px;
  text-align:center;box-shadow:0 2px 10px rgba(30,10,60,.07);
  display:flex;flex-direction:column;justify-content:center;
}
.step__no{font-size:clamp(15px,4vw,20px);font-weight:900;letter-spacing:.04em;line-height:1.2;}
.step__label{font-size:clamp(9px,2.4vw,11.5px);font-weight:700;color:var(--pink);margin-top:4px;line-height:1.4;}
.step__date{font-size:clamp(9px,2.4vw,11.5px);font-weight:500;color:#333;margin-top:3px;line-height:1.4;overflow-wrap:anywhere;word-break:normal;}
.step--plain .step__label{color:#222;}

/* =========================================================
   LINE CTA
   ========================================================= */
.line-cta{background:var(--lavender);padding:26px 0 36px;color:var(--ink);}
.line-cta__title{max-width:640px;margin:0 auto 18px;}
.line-cta__body{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap;justify-content:center;}
.line-cta__qr{
  flex:0 0 190px;background:#fff;border-radius:16px;padding:12px;
  box-shadow:0 2px 12px rgba(30,10,60,.08);
}
.line-cta__steps{
  flex:1 1 300px;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:#fff;border-radius:16px;padding:18px 20px;
  font-size:13.5px;font-weight:500;line-height:1.95;
  box-shadow:0 2px 12px rgba(30,10,60,.08);
}
/* ここは行を最後まで使い切る（text-wrap:pretty だと右が余るため解除） */
.line-cta__steps,
.line-cta__steps li,
.line-cta__steps .sub{
  text-wrap:wrap;
  word-break:normal;
  line-break:strict;
}
.line-cta__steps li + li{margin-top:.7em;}
/* ①② をぶら下げインデントにして、2行目以降が番号の下に潜らないようにする */
.line-cta__steps li{padding-left:1.5em;text-indent:-1.5em;}
.line-cta__steps .sub{display:block;padding-left:0;text-indent:0;}
.line-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:420px;margin:20px auto 0;padding:16px 20px;
  background:var(--line-green);color:#fff;border-radius:999px;
  font-size:17px;font-weight:900;letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(6,198,85,.35);
  transition:transform .2s,box-shadow .2s;
}
.line-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,198,85,.45);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--lavender);color:#8b8598;
  text-align:center;font-size:12px;font-weight:500;
  letter-spacing:.2em;padding:16px 0 30px;
}
.site-footer a{text-decoration:underline;}

/* =========================================================
   フェードイン
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:480px){
  :root{--pad:18px;}
  .concept{padding:40px 0 32px;}
  .concept__lead{font-size:13.5px;line-height:2.05;}
  .band{font-size:13.5px;padding:18px var(--pad);}
  .feature__body{font-size:13.5px;padding:15px 14px;}
  .wanted__item{gap:11px;}
  .wanted__icon{flex-basis:42px;width:42px;}
  .wanted__icon img{max-height:48px;}
  .wanted__text{padding:10px 16px;}
  .card{padding:20px 18px;border-radius:14px;}
  .schedule__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .line-cta__qr{flex:0 0 150px;margin-inline:auto;}
}