/* LOFI BGM ── 見本の意匠に合わせた作り
 *
 * 色は「生成りに近い薄青の地」＋「濃い藍」＋「配信の赤」。
 * ⚠️色は増やさない。写真が主役なので周りは黙らせる。
 *   例外は --amber の1色だけ（2026-09-01）。
 */
:root{
  --bg:#F3F6FB;
  --card:#FFFFFF;
  --navy:#17376B;        /* 見出しと塗りボタン */
  --navy-d:#0E2547;
  --ink:#1B2A45;
  --sub:#6B7A90;
  --line:#E2E8F2;
  --red:#E0332B;         /* 配信中 */
  /* 🔴2026-09-01：紺一色だと平坦だというので、暖色を**1つだけ**足した。
     ⚠️増やすのはここまで。使う場所も、印・アイコン・矢印・下線に絞る。 */
  --amber:#C07B39;
  --amber-w:rgba(192,123,57,.12);
  --shadow:0 24px 60px -34px rgba(19,40,80,.45);
  /* ⚠️端末に入っている字に頼らない。どの端末でも同じ見た目にする。
     ⚠️後ろの並びは、読めなかったときの逃げ道。消さないこと。 */
  --en:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--jp);
  line-height:1.9; overflow-x:hidden;   /* ⚠️斜めの絵がはみ出すので必ず切る */
}
img{max-width:100%; display:block;}
/* 🔴2026-09-01：広い画面のヒーローにも、絵をうっすら敷く（タクヤ指示）。
   ⚠️狭い画面では出さない。絵は上にふつうに1枚載せてあるので二重になるうえ、
     文の裏に絵があると読みにくい（一度やって外した経緯がある）。 */
a{color:inherit; text-decoration:none;}

/* ══ 上の帯 ══════════════════════════════ */
/* ⚠️地の色に透かすと、下の絵が透けて落ち着かない。白で締める（タクヤ指示） */
.hd{position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--line);}
.hd__in{max-width:1400px; margin:0 auto; padding:11px 26px;
  display:flex; align-items:center; gap:24px;}

/* ⚠️見本のロゴは**白地に藍の字**。塗りつぶしていない。
   LOFI と BGM のあいだに細い仕切りが入る。 */
/* ⚠️仕切りを太くすると**ロゴが2つに割れて**見える（タクヤ指摘）。
   線は細く薄く。1つの塊として読ませる。 */
/* ⚠️ロゴは画像。枠や仕切りはロゴ自体が持っているので、CSSでは足さない */
.logo{display:inline-flex; align-items:center; flex:0 0 auto;}
.logo img{height:34px; width:auto; display:block;}

/* ⚠️見本のナビは Arial Black ではない。細めの字で字間も狭い */
.nav{display:flex; gap:38px; margin-left:auto; margin-right:auto;
  font-family:var(--jp); font-weight:700; font-size:13px; letter-spacing:.06em;}
.nav a{color:var(--sub); padding:6px 0; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;}
.nav a:hover{color:var(--navy);}
.nav a.is-on{color:var(--navy); border-bottom-color:var(--navy);}

.hd__r{display:flex; align-items:center; gap:18px; flex:0 0 auto;}
/* ⚠️inline のままだと中の svg が文字のベースラインに乗り、
   下に文字の沈み込みぶんの隙間ができて**上にずれて見える**（タクヤ指摘）。
   flex にして真ん中で揃える。 */
.ic{display:inline-flex; align-items:center; justify-content:center;
  color:var(--navy-d); opacity:.78; transition:opacity .2s, transform .2s;}
.ic svg{display:block;}
.ic:hover{opacity:1; transform:translateY(-1px);}
/* 🔴2026-09-03：配信ボタンを作り直した（タクヤ指示）。
   紺の塊＋小さい赤い点だと、赤が濁って「生配信」に見えなかった。
   面を赤にして、点は白。字は LIVE だけに絞り、24/7 を小さな札で添える。 */
.live{display:inline-flex; align-items:center; gap:9px; background:var(--red);
  color:#fff; border-radius:999px; padding:7px 13px 7px 14px;
  white-space:nowrap; flex:0 0 auto;
  box-shadow:0 8px 18px -10px rgba(224,51,43,.75);
  transition:box-shadow .25s;}
.live:hover{box-shadow:0 12px 22px -10px rgba(224,51,43,.9);}
.live b{font-family:var(--en); font-weight:800; font-size:12.5px;
  letter-spacing:.14em; line-height:1;}
/* ⚠️「24/7」は札にして、LIVEより一段下げる。同じ大きさだと二語が競う */
.live span{font-family:var(--en); font-weight:700; font-size:10px;
  letter-spacing:.06em; line-height:1; padding:3px 6px 2px; border-radius:999px;
  background:rgba(255,255,255,.22);}
.live i{width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.9); animation:beat 2s infinite;}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}
  70%{box-shadow:0 0 0 6px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}

.burger{display:none; width:42px; height:34px; border:1px solid var(--line);
  background:#fff; border-radius:8px; cursor:pointer; padding:8px 9px;
  flex-direction:column; justify-content:space-between;}
.burger span{display:block; height:2px; background:var(--navy); border-radius:2px;}

.spnav{display:none;}
body.is-menu .spnav{display:block; background:#fff; border-top:1px solid var(--line);
  padding:8px 26px 18px;}
.spnav a{display:block; padding:13px 2px; border-bottom:1px solid var(--line);
  font-family:var(--en); font-size:15px; letter-spacing:.1em; color:var(--navy);}
.spnav__cta{margin-top:14px; border:0 !important; background:var(--navy-d);
  color:#fff !important; border-radius:999px; text-align:center;
  font-family:var(--jp) !important; letter-spacing:0 !important; font-weight:700;}

/* ══ ヒーロー ══════════════════════════════ */
/* ⚠️isolation:isolate を付けて、負の z-index をこの中に閉じ込める。
   付けないと body の下地より後ろに落ちて見えなくなる。 */
.hero{padding:40px 0 70px; overflow:hidden; position:relative; isolation:isolate;}
/* 🔴2026-09-01：下地は**下へ向かってグラデーションで消す**（タクヤ指示）。
   ⚠️かぶせ物で隠すのではなく、下地そのものを抜く。
     かぶせだと、上に重なる帯の色が見えてしまう。 */
.hero-bg{display:block; position:absolute; inset:0; z-index:-2; overflow:hidden;
  /* ⚠️下の抜きは軽く（2026-09-02 タクヤ指示）。
     長く濃いまま残し、**最後だけ短く**消す。0にはするが、
     途中で止めると台紙との境目に硬い線が出る。 */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 84%,
    rgba(0,0,0,.62) 94%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 84%,
    rgba(0,0,0,.62) 94%, rgba(0,0,0,0) 100%);}
/* ⚠️picture を挟んだ。JSは heroBg の**直接の子**に目印を付けるので、
   透かすのは picture 側。img は常に見えたままにする。 */
/* 🔴2026-09-02：1枚になったので、目印(is-on)で出し分けない。
   ⚠️左へ抜くのは**この picture**。下へ抜くのは親の .hero-bg。
     1つの要素に縦横2枚のマスクは重ねられないので、2段に分けている。 */
/* ⚠️人物はだいたい横 45〜70% にいる。そこがまだ半透明だと**顔が溶ける**
   （実測：1366pxで顔の位置が約50%の濃さだった）。
   56%で完全に出しきるようにして、人物を薄まりの外へ出す。 */
/* ⚠️object-position の横方向は**効かない**。この絵は横幅ぴったりに収まり、
   切れるのは上下だけだから（1366/1440/1920 で実測）。
   横に動かすには、面そのものをずらす。はみ出しは親が切る。 */
.hero-bg picture{position:absolute; top:0; bottom:0; left:15%; right:-15%;
  display:block; opacity:1;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%,
    rgba(0,0,0,.14) 20%, rgba(0,0,0,.75) 42%, #000 56%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%,
    rgba(0,0,0,.14) 20%, rgba(0,0,0,.75) 42%, #000 56%);}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 26%; opacity:1;}
/* ⚠️濃くしない。文が読めなくなる。上から地の色をかぶせて薄める。 */
/* ⚠️薄めすぎると何の絵か分からない。左と下で消えるので、面そのものは濃いまま */
/* ⚠️横向きのかぶせは薄くする。左へ抜くマスクと二重になると絵が消える。
   残すのは、字を読みやすくするための**ごく薄い**膜だけ。 */
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg,
    rgba(243,246,251,.58) 0%, rgba(243,246,251,.26) 40%,
    rgba(243,246,251,0) 60%, rgba(243,246,251,0) 100%);}
/* ⚠️--pad は「端まで広げる」計算に使う。直接の数字と二重管理しないこと。 */
.hero__in{--pad:26px; max-width:1400px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:40px; align-items:center;}

.kick{margin:0 0 18px; font-size:15.5px; color:var(--ink); letter-spacing:.02em;}
.disp{margin:0 0 26px; font-family:var(--en); line-height:.94;
  font-size:clamp(52px,7.4vw,112px); letter-spacing:-.01em;
  display:flex; gap:.14em; flex-wrap:wrap;}
.disp__s{color:var(--navy);}
/* ⚠️縁取りだけの字。太らせると潰れるので線幅は上げない */
.disp__o{color:transparent; -webkit-text-stroke:2px var(--navy);
  text-stroke:2px var(--navy);}

.lead{margin:0 0 32px; font-size:15.5px; color:var(--sub); line-height:2.1;}

.btns{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  padding:14px 28px; font-size:15px; font-weight:700; letter-spacing:.02em;
  transition:transform .2s, background .2s, color .2s, border-color .2s;}
.btn--f{background:var(--navy-d); color:#fff;}
.btn--f:hover{background:var(--navy);}
.btn--o{border:1.6px solid #C9D3E3; color:var(--navy); background:#fff;}
.btn--o:hover{border-color:var(--navy); }

.feats{list-style:none; margin:0; padding:0; display:flex; gap:34px;
  flex-wrap:wrap;}
/* ⚠️li を flex にすると、見出しと補足が**横に**並んでしまう（見本は縦）。
   絵を左に置き、右の列で2段に積む。 */
.feats li{display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:12px; align-items:center; color:var(--navy-d);}
.feats svg{grid-row:1 / span 2; align-self:center; opacity:.85;}
.feats b{grid-column:2; font-size:13px; letter-spacing:.02em; line-height:1.5;}
.feats span{grid-column:2; font-size:11.5px; color:var(--sub); line-height:1.5;}

/* ── 斜めに並ぶ絵 ──
   ⚠️clip-path は使わない。見た目は切れても場所を取り続け、
     横スクロールが出る（別サイトで実際に踏んだ）。
     skew と overflow:hidden で作る。 */
.hero__r{position:relative;}
/* 🔴2026-09-01：斜めの扇をやめ、**アーチ**にした（タクヤ指示）。
   ⚠️border-radius に大きな値を入れると、幅の半分まで自動で縮められて
     きれいな半円になる。数字で半径を持たない（幅が変わると崩れるため）。
   ⚠️CSSの決まりで、縮小率は**4つの角すべて**に掛かる。
     そのため下の角はほぼ直角になる。アーチなのでそれでよい。 */
.fan{display:flex; gap:14px; align-items:flex-end; padding:0;}
.fan__i{margin:0; flex:1 1 0; min-width:0; height:clamp(320px,35vw,480px);
  overflow:hidden; border-radius:999px 999px 10px 10px;
  box-shadow:0 26px 52px -24px rgba(15,35,70,.6),
             0 0 0 1px rgba(255,255,255,.5) inset;}
/* 真ん中だけ高くして、山の形にする */
.fan__i:nth-child(2){height:clamp(370px,40vw,556px);}
/* ⚠️傾きを外したので、戻すための skew と拡大も外す。
   アーチは上が丸いので、顔が隠れないよう少し下を見せる。 */
.fan__i img{width:100%; height:100%; object-fit:cover;
  object-position:center 32%;}

/* 🔴2026-09-01：点は狭い画面だけ（タクヤ指示）。
   広い画面はアーチが3枚とも出ているので、点が指すものが無い。
   ⚠️下地の絵は点が無くても5秒ごとに入れ替わり続ける。 */
.dots{display:none; gap:9px; justify-content:center; margin-top:24px;}
.dots button{width:9px; height:9px; padding:0; border-radius:50%; border:0;
  background:#C6D0E0; cursor:pointer; transition:background .2s, width .2s;}
.dots button.is-on{background:var(--navy); width:22px; border-radius:99px;}

/* ══ 白い台 ══════════════════════════════ */
.board{padding:0 26px 70px;}
/* 🔴2026-09-01：ABOUT と PLAYLIST を**上下に分けた**（タクヤ指示）。
   横に並べると、どちらも幅が足りず窮屈だった。 */
/* 🔴2026-09-01：白い台の枠をやめた（タクヤ指示）。
   地の上に直に置き、ABOUTだけを濃い箱にして差をつける。 */
.board__in{max-width:1400px; margin:0 auto; background:transparent;
  border-radius:0; box-shadow:none; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:52px;}

.eyebrow{margin:0 0 16px; font-family:var(--en); font-size:11.5px;
  letter-spacing:.16em; color:var(--sub);}
.h2{margin:0 0 20px; font-size:26px; line-height:1.65; letter-spacing:.01em;
  color:var(--navy-d);}
.txt{margin:0 0 28px; font-size:14px; color:var(--sub); line-height:2.15;}
/* ⚠️grid の中に置くと、幅いっぱいまで伸びて横長になる（タクヤ指摘）。
   文字の幅で止める。 */
.more{display:inline-flex; align-items:center; gap:8px; border:1.5px solid #C9D3E3;
  border-radius:999px; padding:12px 26px; font-size:13.5px; font-weight:700;
  color:var(--navy); transition:border-color .2s, background .2s;
  justify-self:start; width:fit-content;}
.more:hover{border-color:var(--navy); background:#F7F9FD;}

/* 上下に分けたので、ABOUTは文と絵を左右に置く */
/* 🔴2026-09-01：ABOUTは**濃い地に白文字**（タクヤ指示）。
   ⚠️--apad は「絵を箱の端まで広げる」計算に使う。数字と二重管理しないこと。
   ⚠️絵の左は透明に抜くので、下の濃い地がそのまま出る。色の指定は要らない。 */
/* ⚠️min-height を入れると、中身より箱が高くなって上下に濃い余白が余る
   （実測で上70px・下71px空いていた）。中身の高さに任せる。 */
.about{--apad:54px; position:relative;
  background:var(--navy-d); color:#fff;
  border-radius:24px; overflow:hidden;
  padding:44px var(--apad);
  display:flex; flex-direction:column; justify-content:center;}
.about .eyebrow{color:rgba(255,255,255,.66);}
.about .h2{color:#fff;}
.about .txt{color:rgba(255,255,255,.78);}
.about .more{color:#fff; background:transparent; border-color:rgba(255,255,255,.34);}
.about .more:hover{color:var(--amber); border-color:var(--amber); background:transparent;}
/* ⚠️文が絵に隠れないよう、必ず絵より前に出す */
.about__t{position:relative; z-index:2; min-width:0; max-width:min(56%,672px);}
/* ⚠️2026-09-02：一度 絵を左・文を右にしたが**元に戻した**（タクヤ指示）。
   絵が右・文が左。抜く向きは 90deg（左へ消える）。 */
.about-fade{position:absolute; top:0; bottom:0; right:0; left:auto;
  width:min(58%,720px); pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.85) 60%, #000 82%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.85) 60%, #000 82%);}
/* ⚠️上下のぼかしは外した（タクヤ指示）。消すのは**左だけ** */
.about-fade img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;}

.pl__hd{display:flex; align-items:baseline; gap:16px; margin-bottom:18px;}
.allx{margin-left:auto; font-size:12.5px; color:var(--sub); white-space:nowrap;
  transition:color .2s;}
.allx:hover{color:var(--navy);}

/* 🔴2026-09-01：どの幅でも**横長・21:9**に統一した（タクヤ指示）。
   ⚠️幅ごとに変えない。素材を 21:9 で作れば、どこも切られない。 */
.pl__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
/* ⚠️16/9 だと縦に大きすぎるというので、さらに平たくした（タクヤ指示） */
.card{position:relative; border-radius:14px; overflow:hidden; display:block;
  aspect-ratio:21/9; background:#0E1A2E;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* ⚠️カードを平たくしたので、下の帯が狭くなって字が読みにくい。濃く・早く始める */
.card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,16,32,0) 20%,rgba(8,16,32,.5) 52%,
             rgba(8,16,32,.9) 100%);}
.card:hover{transform:translateY(-6px);
  box-shadow:0 26px 44px -24px rgba(15,35,70,.6);}
.card__t{position:absolute; left:19px; bottom:42px; z-index:2; color:#fff;
  font-size:19px; font-weight:800; letter-spacing:.01em; line-height:1.25;}
/* ⚠️右下の札と重なる。札のぶんだけ右を空け、長い時は切る */
.card__s{position:absolute; left:19px; right:19px; bottom:18px; z-index:2;
  color:rgba(255,255,255,.8); font-size:13px; line-height:1.45;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* ⚠️残っているのは配信の LIVE だけ。右上に置いて説明の邪魔をしない */
.card__b{position:absolute; right:12px; top:12px; z-index:2;
  background:rgba(255,255,255,.16); color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.06em; padding:4px 8px; border-radius:5px;
  backdrop-filter:blur(3px);}
.card__b--live{background:var(--red);}

/* ══ 下 ══════════════════════════════════ */
/* ══ 音楽 ══════════════════════════════
   ⚠️右下に小さく置く。読む邪魔をしない大きさに留める。 */
.player{position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px 8px 8px; box-shadow:0 18px 40px -22px rgba(15,35,70,.55);
  max-width:calc(100vw - 36px);}
.player__b{flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--navy-d); color:#fff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;}
.player__b:hover{background:var(--navy);}
.player .i-pause{display:none;}
.player.is-on .i-play{display:none;}
.player.is-on .i-pause{display:block;}
.player.is-on .player__b{background:var(--red);}
.player__t{min-width:0; line-height:1.35;}
.player__t b{display:block; font-size:12.5px; color:var(--navy-d);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player__t span{display:block; font-size:10.5px; color:var(--sub);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player__n{flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--navy);
  cursor:pointer; padding:0; display:flex; align-items:center;
  justify-content:center; transition:border-color .2s;}
.player__n:hover{border-color:var(--navy);}

.ft{background:var(--navy-d); color:#fff; padding:52px 26px 34px;}
.ft__in{max-width:1400px; margin:0 auto; text-align:center;}
/* ⚠️土台のロゴを白地にしたので、暗い下地では**白字が消える**（実際に消えた）。
   下では地を透かし、線も字も白にする。 */
.logo--ft{margin-bottom:20px;}
.logo--ft img{height:38px;}
.ft__t{margin:0 0 22px; font-size:13.5px; color:rgba(255,255,255,.72);
  line-height:2;}
.ft__links{display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  font-family:var(--en); font-size:12.5px; letter-spacing:.1em;}
.ft__links a{color:rgba(255,255,255,.85); border-bottom:1px solid transparent;}
.ft__links a:hover{border-bottom-color:rgba(255,255,255,.6);}
.ft__c{margin:26px 0 0; font-size:11.5px; color:rgba(255,255,255,.45);}


/* ══════════════════════════════════════════
   🔴2026-09-01：「全体的にシンプル過ぎ」（タクヤ）を受けた作り込み。
   中身は増やさず、地の質感・厚み・動き・アクセントだけを足す。
   ⚠️どれも控えめに。濃くするつもりが**うるさく**なると本末転倒。
   ══════════════════════════════════════════ */

/* ── 地に奥行きと粒子 ──
   ⚠️body に置いた背景は canvas に伝わり、いちばん下に敷かれる。
     その上・中身の下に敷きたいので z-index は -1。 */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(980px 560px at 10% -10%, rgba(255,255,255,.95), transparent 68%),
    radial-gradient(820px 520px at 92% -4%, rgba(192,123,57,.10), transparent 66%),
    radial-gradient(1100px 820px at 84% 46%, rgba(23,55,107,.075), transparent 70%),
    radial-gradient(760px 520px at 4% 78%, rgba(23,55,107,.05), transparent 72%);}
/* 粒子。ベタ塗りの白さを殺して、紙っぽさを出す */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.55; background-size:170px 170px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");}

/* ── 節の見出しに印 ──
   ⚠️.eyebrow は ABOUT と PLAYLIST だけ。ヒーローの .kick には付けない。 */
.eyebrow{position:relative; padding-left:36px; font-weight:700;}
.eyebrow::before{content:""; position:absolute; left:0; top:.66em; width:26px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--amber), rgba(192,123,57,0));}

/* 見出しをひとまわり大きく、余白を効かせる */
/* ⚠️34pxまで上げたら「寄り添／う、」で割れた。字を戻し、入る幅を広げる。 */
.h2{font-size:clamp(25px,2.05vw,30px); line-height:1.62; margin-bottom:24px;
  letter-spacing:.005em; text-wrap:balance;}

/* ── ヒーロー ── */
.kick{display:inline-flex; align-items:center; gap:10px;
  color:var(--navy-d); font-weight:700;}
.kick::before{content:""; width:22px; height:2px; border-radius:2px;
  background:var(--amber);}

/* 縁取りの字が細くて弱いので、内側にうっすら地を入れて存在感を出す */
.disp__o{-webkit-text-stroke:2.2px var(--navy);}

/* 押せるものは、押せるように見せる */
.btn--f{box-shadow:0 14px 30px -14px rgba(14,37,71,.6);}
.btn--f:hover{transform:translateY(-2px);
  box-shadow:0 20px 38px -14px rgba(14,37,71,.7);}
.btn--o:hover{transform:translateY(-2px); background:#fff;
  box-shadow:0 16px 30px -18px rgba(15,35,70,.45);}

/* 3つの特長を、区切り線のある帯に見せる */
.feats{gap:0; border-top:1px solid var(--line); padding-top:22px;
  flex-wrap:nowrap;}
/* ⚠️左右30pxだと3つが1行に収まらず折り返した。18pxまで詰める */
.feats li{padding:2px 18px; position:relative; min-width:0;}
.feats li + li::before{content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--line);}
.feats li:first-child{padding-left:0;}
.feats svg{color:var(--amber); opacity:1;}
.feats b{color:var(--navy-d);}

/* 扇のうしろに光を置いて、白地から浮かせる */
.hero__r::before{content:""; position:absolute; z-index:0;
  left:6%; right:-4%; top:4%; bottom:14%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(23,55,107,.20), transparent 76%);
  filter:blur(28px);}
.fan{position:relative; z-index:1;}
/* 紙のような細い縁を付けて、3枚を「並べた写真」に見せる */
.fan__i{box-shadow:0 26px 52px -24px rgba(15,35,70,.62),
                   0 0 0 1px rgba(255,255,255,.55) inset;}

.dots button.is-on{background:var(--navy);}
.dots button:hover{background:var(--amber);}

/* ⚠️台の枠と、台の上の線・節の仕切りは外した（台そのものが無くなったため） */

.more{background:#fff;}
.more:hover{background:#fff; border-color:var(--amber); color:var(--amber);}

/* ── カード ── */
.card{box-shadow:0 18px 34px -22px rgba(15,35,70,.5);}
/* ⚠️img に transition を掛ける。card ごと拡大すると隣とぶつかる */
.card img{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.card:hover img{transform:scale(1.07);}
/* 縁を1本入れると、白地の上で輪郭が立つ */
.card::before{content:""; position:absolute; inset:0; z-index:3; border-radius:13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; pointer-events:none;}
.card__t{transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__t{transform:translateY(-3px);}
/* 中央に再生の印。ふだんは出さず、重ねたときだけ浮かせる */
.card__p{position:absolute; left:50%; top:50%; z-index:3;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--navy-d);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.82);
  transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 14px 30px -12px rgba(8,16,32,.7);}
.card:hover .card__p{opacity:1; transform:scale(1);}
/* 重ねたときだけ、下の帯を濃くして字を読みやすくする */
.card::after{transition:opacity .3s;}
.card:hover::after{opacity:.86;}
.allx:hover{color:var(--amber);}

/* ── 足元 ── */
.ft{position:relative; overflow:hidden;}
.ft::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28),
             rgba(192,123,57,.5), rgba(255,255,255,.28), rgba(255,255,255,0));}
.ft::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(780px 340px at 50% -10%, rgba(255,255,255,.10),
             transparent 70%);}
.ft__in{position:relative; z-index:1;}
.ft__links a:hover{color:#fff; border-bottom-color:var(--amber);}

/* ── 出てくる動き ──
   ⚠️「動きを減らす」設定の人には動かさない。 */
[data-rise]{opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),
             transform .8s cubic-bezier(.2,.7,.2,1);}
/* ⚠️ここで opacity:1 と決め打つと、**薄く敷きたいもの**の指定を打ち消す
   （スマホのABOUTの絵が濃いまま出た）。出したあとの濃さは --vis で受ける。 */
[data-rise].is-in{opacity:var(--vis,1); transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-rise]{opacity:1; transform:none; transition:none;}
  .card:hover img{transform:none;}
}

/* ══ 狭い画面 ══════════════════════════════ */
@media (max-width:1180px){
  .nav{gap:22px;}
  /* ⚠️ここで2列に戻していたので、上下に分けた指定が打ち消されていた */
  .board__in{padding:0; gap:44px;}
  /* ⚠️2列は base で指定済み。ここで重ねない */
}
@media (max-width:900px){

  /* 🔴2026-09-01：狭い画面の**背景に敷く絵はやめた**（タクヤ指示）。
     文の裏に絵があると、薄くしても字が読みにくい。
     絵はふつうに1枚として載せる（下の .fan を見ること）。
     ⚠️hero-bg の img は残っているが、ここでは出さない。消すなら HTML ごと。 */
  /* 🔴2026-09-01：狭い画面にも**同じ下地**を敷き直した（タクヤ指示）。
     ⚠️上の絵より薄くする。文が上に乗るので、濃いと読めない。 */
  .hero{position:relative;}
  .hero-bg{display:block;
    -webkit-mask-image:linear-gradient(180deg,
      #000 0%, #000 70%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,
      #000 0%, #000 70%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);}
  .hero-bg picture{opacity:.26;}
  /* かぶせは横向きをやめ、地の色を上から下へ薄くかける */
  .hero::after{display:block;
    background:linear-gradient(180deg,
      rgba(243,246,251,.34) 0%, rgba(243,246,251,.6) 58%, var(--bg) 100%);}
  .hd__in{gap:12px;}
  .nav, .hd__r .ic{display:none;}
  /* ⚠️ナビが消えると押し出す力が無くなり、右に寄らない。
     ここで右へ寄せる（ハンバーガーが右端に来る）。 */
  .hd__r{margin-left:auto;}
  .burger{display:flex; order:9;}
  /* 🔴2026-09-01：狭い画面では、絵を**いちばん上**に置く（タクヤ指示）。
     「心を整える、やさしい音楽を。」より上、横は画面いっぱい、角丸なし。 */
  .hero{padding-top:0;}
  .hero__in{display:flex; flex-direction:column; gap:34px;}
  .hero__r{order:-1;}
  /* ⚠️余白を打ち消して画面の端まで届かせる。数字を直接書くと、
     狭い画面で余白が18pxに変わったときに8pxずつはみ出す（実際にはみ出した）。 */
  .hero__r{margin:0 calc(var(--pad) * -1); width:calc(100% + var(--pad) * 2);}
  /* 🔴2026-09-01：絵はふつうに1枚として載せる（タクヤ指示）。
     ⚠️斜めの扇はこの幅だと潰れる。傾きを外して、横長の1枚に重ねる。
       切り替えは JS が is-on を付け替えるので、そのまま効く。 */
  /* ⚠️枠は 16:9（タクヤ指示）。素材も16:9なので、どこも切られない。 */
  .fan{display:block; position:relative; transform:none; padding:0;
    aspect-ratio:16/9; border-radius:0; overflow:hidden; background:#0E1A2E;
    box-shadow:none;}
  /* ⚠️:nth-child(2) の高さ指定は**こちらより強い**ので、名指しで打ち消す。
     打ち消さないと真ん中の1枚だけ370pxになり、枠からはみ出して切れる。 */
  .fan__i, .fan__i:nth-child(2){position:absolute; inset:0; height:auto;
    transform:none; border-radius:0; box-shadow:none;
    opacity:0; transition:opacity .9s ease;}
  .fan__i.is-on{opacity:1;}
  /* ⚠️傾きを外したので、戻すための skew と拡大も外す。
     付けたままだと絵だけ斜めに歪む。 */
  .fan__i img{transform:none; object-position:center 22%;}
  /* ⚠️点はどの幅でも出さない（タクヤ指示）。
     絵は5秒ごとに勝手に入れ替わる。手で変える手段は無くなる。 */
  .hero__r{margin-top:0;}
  .board__in{padding:0; gap:38px;}
  /* ⚠️「すべてのプレイリストを見る」は折り返さない指定なので、
     狭い画面でそのまま置くと画面からはみ出す（実測186px）。
     行を分けて、折り返しも許す。 */
  .pl__hd{flex-wrap:wrap; gap:4px 14px;}
  .allx{margin-left:0; white-space:normal;}
  /* 🔴2026-09-01：狭い画面では、絵は**文の上にふつうに1枚**（タクヤ指示）。
     裏に敷くのはやめた。薄くしても字にかぶって読みにくかった。 */
  .about{min-height:0; padding-top:0; display:flex; flex-direction:column;
    row-gap:26px;}
  .about__t{max-width:none;}
  /* ⚠️static にしてはいけない。中の img は inset:0 なので、
       基準が .about（節ぜんぶ）に移り、枠から抜け出して文の裏に広がった。
       relative なら流れに乗ったうえで、中の img もここを基準に収まる。 */
  .about-fade{position:relative; inset:auto; width:100%; --vis:1; opacity:1;
    aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#0E1A2E;
    box-shadow:0 20px 40px -24px rgba(15,35,70,.5);
    -webkit-mask-image:none; mask-image:none;}
}
@media (max-width:560px){
  /* ⚠️ここまで狭いと、いちばん長い「勉強・作業用BGM・5本」がまだ入らない。
     札を上に逃がしたうえで、字も少しだけ小さくする。 */
  .card__s{font-size:10.5px;}

  .hd__in{padding:10px 16px;}
  /* 画面が狭いので、曲名は出さず丸だけにする */
  /* ⚠️丸だけにすると**何のボタンか分からない**（タクヤ指摘）。
     字は消さない。狭いぶん小さくして、丸も少し詰める。 */
  .player{right:12px; bottom:12px; padding:6px 14px 6px 6px; gap:9px;}
  .player__b{width:34px; height:34px;}
  .player__t b{font-size:12px;}
  /* ⚠️上の余白を戻すと、絵がヘッダーから26px離れる。0のままにする。 */
  .hero{padding:0 0 46px;}
  .hero__in{--pad:18px;}
  .lead{font-size:14.5px; line-height:2;}
  .btns{gap:10px; margin-bottom:32px;}
  .btn{padding:13px 20px; font-size:14px;}
  /* ⚠️gap を入れると区切り線が行から離れて浮く。狭い画面では入れない */
  .board{padding:0 18px 52px;}
  /* ⚠️プレイリストは横長1列にしたので、2列に戻す指定は消した。
     残しておくと、後ろの指定と打ち消し合って読めなくなる。 */
  .h2{font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
  .live i{animation:none;}
  .card:hover{transform:none;}
  .btn, .card, .ic{transition:none;}
}

/* ── 狭い画面での手当て（作り込みの分） ── */
@media (max-width:900px){
  /* ⚠️特長の縦線は、折り返すと変な位置に出る。横線に替える */
  .feats{display:grid; grid-template-columns:1fr; gap:0; padding-top:16px;}
  .feats li{padding:11px 0;}
  .feats li + li::before{left:0; right:0; top:0; bottom:auto;
    width:auto; height:1px;}
  /* ⚠️台の上の線はもう無い */
  .hero__r::before{display:none;}
}

/* ── 狭い画面のプレイリスト ──
   🔴2026-09-01：2列の縦長だと1枚が小さく、題名も詰まる。
   1列の**横長**にして、絵も字もゆったり見せる（タクヤ指示）。 */
@media (max-width:900px){
  .pl__grid{grid-template-columns:minmax(0,1fr); gap:14px;}
  /* ⚠️枠は全幅 21/9 にそろえた（タクヤ指示）。ここで上書きしない。
     そろえたので、素材も 21:9 で作れば**どこも切られない**。 */
  .card__t{font-size:17px; bottom:38px;}
  .card__s{font-size:12.5px; right:15px;}
  .card__b{top:14px; right:14px;}
}

/* ══════════════════════════════════════════
   🔴2026-09-01：スマホ版の全体調整（タクヤ指示）。
   ⚠️ここは**いちばん最後**。前の指定を上書きする前提で書いている。
     途中に別の @media を差し込まないこと。
   ══════════════════════════════════════════ */
@media (max-width:900px){
  /* ── ヒーロー ── */
  /* 帯のように薄かったので、もう少し高さを出す */
  /* ⚠️16:9 でそろえた。ここで上書きしない */
  .hero__in{gap:26px;}
  .kick{font-size:14.5px;}
  .disp{font-size:clamp(44px,13.5vw,62px); margin-bottom:20px;}
  .lead{margin-bottom:26px;}
  /* ⚠️2つのボタンが幅ちがいで2行に折れて、雑に見えていた。
     幅をそろえて縦に積む。押しやすさも上がる。 */
  .btns{flex-direction:column; align-items:stretch; gap:11px; margin-bottom:30px;}
  .btn{justify-content:center; padding:15px 20px;}

  /* ── 白い台 ── */
  .board__in{gap:34px;}
  /* ⚠️見出しが「寄り添／う、」で割れる。語のまとまりで折る指定を足す。
     対応していない端末では無視されるだけで、崩れはしない。 */
  .h2{font-size:21px; line-height:1.55; word-break:auto-phrase;}
  .txt{font-size:13.5px; line-height:2; margin-bottom:24px;}
  .eyebrow{margin-bottom:12px;}
  .more{padding:13px 22px; font-size:13px;}

  /* 絵は箱の端まで。⚠️上も詰めて、箱の上辺にぴたりと付ける */
  .about-fade{margin:calc(var(--apad) * -1) calc(var(--apad) * -1) 0;
    width:calc(100% + var(--apad) * 2); border-radius:0; aspect-ratio:5/3;}
  .about{--apad:22px; padding:var(--apad); border-radius:18px; row-gap:22px;}

  /* ── プレイリスト ── */
  .pl__hd{margin-bottom:14px;}
  .pl__grid{gap:12px;}
  /* ⚠️枠は全幅 21/9 でそろえた。ここで上書きしない */
  .card__t{font-size:17px; bottom:36px; left:16px;}
  .card__s{font-size:12px; bottom:16px; left:16px; right:16px;}

  /* ── 足元 ── */
  .ft{padding:40px 20px 28px;}
  .ft__t{font-size:13px; line-height:1.95;}

  /* ── 字の大きさをまとめて整える ──
     ⚠️狭い画面では 13px 台が続いて眠い。読む所は上げ、
       ラベル（英字の小見出し）は下げて、差をはっきりさせる。 */
  .kick{font-size:14px;}
  .lead{font-size:15px; line-height:1.95;}
  /* ⚠️PC向けに入れた改行が、狭い画面では変な所で折り返す
     （「…BGMチャンネ／ル。」）。狭い画面では改行を無視して流す。 */
  .lead br{display:none;}
  .feats b{font-size:13.5px;}
  .feats span{font-size:12px;}
  .btn{font-size:14.5px;}
  .eyebrow{font-size:11px; letter-spacing:.13em;}
  .h2{font-size:22px;}
  .txt{font-size:14px; line-height:1.95;}
  .more{font-size:13.5px;}
  .card__s{font-size:12.5px;}
  .allx{font-size:12.5px;}
  .ft__links{font-size:13px;}
  .ft__c{font-size:11px;}
}
@media (max-width:560px){
  .disp{font-size:clamp(40px,13vw,54px);}
  .board{padding:0 14px 46px;}
  .hero__in{--pad:16px;}
}

/* ── 狭い画面の「3つの特長」 ──
   🔴2026-09-01：ぽつんと置かれて間延びしていたので、ひとつの箱にまとめた。
   ⚠️これは最後に置く。前の指定（border-top など）を上書きする前提。 */
@media (max-width:900px){
  .feats{border-top:0; padding:4px 15px;
    background:rgba(255,255,255,.66);
    border:1px solid rgba(226,232,242,.95); border-radius:16px;
    box-shadow:0 16px 32px -28px rgba(15,35,70,.45);}
  .feats li{padding:12px 0; column-gap:13px;}
  /* 区切り線は箱の内側いっぱいに */
  .feats li + li::before{left:0; right:0; top:0; bottom:auto;
    width:auto; height:1px; background:var(--line);}
  /* ⚠️svg の width/height は属性で26。CSSで上書きし、余白ぶんを足して丸にする。
     box-sizing:content-box にしないと、余白のぶん中身が潰れる。 */
  .feats svg{box-sizing:content-box; width:19px; height:19px; padding:8px;
    background:var(--amber-w); border-radius:50%;}
  .feats b{line-height:1.5;}
  .feats span{line-height:1.5;}
  /* 箱にしたぶん、上下の間を詰める */
  .btns{margin-bottom:24px;}
  .hero{padding-bottom:40px;}
}

/* ══════════════════════════════════════════
   🔴2026-09-01：タブレットの調整（タクヤ指示）。
   ⚠️縦持ち(〜900px)は「スマホの指定」がそのまま効いていて、
     幅があるのに1列・幅いっぱいで間延びしていた。
   ⚠️横持ち(901〜1180px)は左の列が狭く、特長の見出しが2行に折れていた。
   ══════════════════════════════════════════ */

/* ── 横持ちタブレット（901〜1180px）── */
@media (min-width:901px) and (max-width:1180px){
  /* 左を広げる。⚠️1fr:1.06fr のままだと特長が3行に折れる（実際に折れた） */
  .hero__in{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:32px;}
  /* ⚠️「集中・作業・リラックスに」が2行に折れる。字と余白を削って1行に収める */
  .feats li{padding:2px 10px;}
  .feats svg{width:22px; height:22px;}
  .feats b{font-size:12.5px;}
  .feats span{font-size:10.5px; letter-spacing:-.01em;}
  .disp{font-size:clamp(48px,6.2vw,72px);}
  .lead{font-size:14.5px;}
  .about{--apad:40px; padding:40px var(--apad);}
  .about__t{max-width:min(52%,520px);}
  .h2{font-size:clamp(23px,2.3vw,27px);}
}

/* ── 縦持ちタブレット（601〜900px）── */
@media (min-width:601px) and (max-width:900px){
  /* ⚠️16:9 でそろえた。ここで上書きしない */
  /* ⚠️1行が長すぎて読みにくい。読む文だけ幅を止める（見出しは止めない） */
  .lead{max-width:34em;}
  .about .txt{max-width:40em;}
  /* ⚠️幅いっぱいの縦積みは、この幅では間延びする。横に並べる */
  .btns{flex-direction:row; align-items:center; gap:14px;}
  .btn{padding:15px 30px; font-size:15px;}
  /* 特長は3つ横に並ぶ。区切りも縦線に戻す */
  .feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    padding:8px 10px;}
  .feats li{padding:14px 14px;}
  .feats li + li::before{left:0; right:auto; top:10px; bottom:10px;
    width:1px; height:auto;}
  .feats svg{width:17px; height:17px; padding:7px;}
  .feats b{font-size:13px;}
  .feats span{font-size:11.5px;}
  /* ABOUTの絵が高すぎたので平たく */
  .about{--apad:34px; padding:34px var(--apad);}
  .about-fade{aspect-ratio:16/7;}
  .h2{font-size:26px;}
  .txt{font-size:14.5px;}
  /* ⚠️1列だとカードが716×358と大きすぎる。2列にする */
  .pl__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
  .card__t{font-size:17px; bottom:38px; left:17px;}
  .card__s{font-size:12px; left:17px; right:17px;}
  /* 見出しと「すべて見る」を1行に戻す（幅は足りる） */
  .pl__hd{flex-wrap:nowrap;}
  .allx{margin-left:auto;}
  .ft{padding:48px 26px 32px;}
}

/* ══════════════════════════════════════════
   🔴2026-09-01：重ねたときの動きを作り替えた（タクヤ指示）。
   ぜんぶ「左から右へ流れる」で揃える。浮かせるのはやめた。
   ⚠️「動きを減らす」設定の人には流さない（いちばん下で止めている）。
   ══════════════════════════════════════════ */

/* ── メニュー：下線が左から伸びる ──
   ⚠️いま見ている所のしるしも同じ線を使う。border-bottom はやめ、
     線を1本の部品にして、伸ばす／伸ばさないで作り分ける。 */
.nav a{border-bottom:0; position:relative;}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);}
.nav a:hover::after{transform:scaleX(1);}
/* いま見ている所は、はじめから引かれている */
.nav a.is-on::after{transform:scaleX(1);}
.nav a.is-on{border-bottom-color:transparent;}

/* ── ボタン：地の色が左から流し込まれる ──
   ⚠️中の字と絵は要素ではない（素の文字）ので、前に出せない。
     代わりに流し込む面を z-index:-1 に置き、isolation で外に漏らさない。 */
.btn, .more{position:relative; isolation:isolate; overflow:hidden;
  transition:color .3s ease, border-color .3s ease;}
.btn::before, .more::before{content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.btn:hover::before, .more:hover::before{transform:scaleX(1);}
/* 浮かせるのはやめる */
.btn--f:hover, .btn--o:hover{transform:none;}

/* ⚠️流し込む色は**白**（タクヤ指示）。白地に白字は消えるので、字は紺に反転させる。
   ⚠️地も薄い色なので、輪郭が無いと白いボタンが溶ける。細い紺の枠を内側に足す。 */
.btn--f::before{background:#fff;}
.btn--f:hover{background:var(--navy-d); color:var(--navy-d);
  box-shadow:0 16px 32px -16px rgba(14,37,71,.5),
             inset 0 0 0 1.6px var(--navy-d);}
.btn--o::before{background:var(--navy-d);}
.btn--o:hover{color:#fff; border-color:var(--navy-d); background:#fff;
  box-shadow:none;}
/* ABOUTは濃い地。白を流し込んで、字を紺に反転させる */
.more::before{background:#fff;}
.about .more:hover{color:var(--navy-d); border-color:#fff; background:transparent;}

/* ── カード：琥珀の線が下を走り、字が右へずれる ── */
.card{transition:box-shadow .3s ease;}
.card:hover{transform:none;
  box-shadow:0 26px 46px -26px rgba(15,35,70,.6);}
.card__t, .card__s{transition:transform .38s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__t, .card:hover .card__s{transform:translateX(6px);}
/* ⚠️::after と ::before はもう使っている（帯と縁）。線は span を借りる。
   .card__p（再生の印）に線を持たせると位置が噛み合わないので、
   card__b（札）でもない .card__t に付ける。 */
/* ⚠️題名の**下**に置くと、すぐ下の説明と重なる（実際に重なった）。上に置く。 */
.card__t::after{content:""; position:absolute; left:0; right:auto;
  top:-12px; bottom:auto;
  height:2px; width:44px; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1) .05s;}
.card:hover .card__t::after{transform:scaleX(1);}
/* 再生の印は、下からすっと上がって出る */
.card__p{transform:translateY(10px) scale(.9);}
.card:hover .card__p{transform:translateY(0) scale(1);}

/* ── 小さいリンク ── */
.allx, .ft__links a{position:relative;}
.allx::after, .ft__links a::after{content:""; position:absolute; left:0; right:0;
  bottom:-3px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);}
.allx:hover::after, .ft__links a:hover::after{transform:scaleX(1);}
.ft__links a{border-bottom:0 !important;}

/* ── ヘッダーの印と配信ボタン ── */
.ic:hover{transform:none; opacity:1; color:var(--red);}
.live{position:relative; isolation:isolate; overflow:hidden;}
/* ⚠️重ねたら濃い赤が左から流れる。地の赤は変えない（下から透ける） */
.live::before{content:""; position:absolute; inset:0; z-index:-1;
  background:#B4231C; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.live:hover::before{transform:scaleX(1);}

/* ── 動きを減らす設定のときは流さない ── */
@media (prefers-reduced-motion: reduce){
  .nav a::after, .btn::before, .more::before, .card__t::after,
  .allx::after, .ft__links a::after, .live::before{transition:none;}
  .card__t, .card__s, .card__p{transition:none;}
}

/* ── 字を替えたことによる手当て ──
   🔴2026-09-01：Arial Black より細く・広いので、太さと間を詰め直す。 */
.disp{font-weight:800; letter-spacing:-.02em;}
.disp__o{-webkit-text-stroke-width:2.6px;}
.eyebrow{font-weight:600;}
.nav{font-weight:600; letter-spacing:.08em;}
.spnav a{font-weight:700;}
.ft__links{font-weight:700;}
.card__t{font-weight:700;}
.h2{font-weight:700;}
.feats b{font-weight:700;}
.btn, .more, .live{font-weight:700;}
/* ⚠️和文は少しだけ太らせないと、この字は細く見える */
.txt, .lead{font-weight:400;}

/* ── ヒーローの題字はロゴ画像 ──
   🔴2026-09-01：文字組みからロゴに差し替え（タクヤ指示）。
   ⚠️.disp に付いていた字の指定（大きさ・字間・縁取り）は、絵になったので効かない。
     大きさは幅で決める。上限を切らないと、広い画面で間延びする。 */
.disp{display:block; margin:0 0 30px; font-size:0; line-height:0;
  letter-spacing:normal;}
.disp img{width:min(100%, 470px); height:auto;}
@media (max-width:1180px){ .disp img{width:min(100%, 400px);} }
@media (max-width:900px){ .disp{margin-bottom:24px;} .disp img{width:min(80%, 360px);} }
@media (max-width:560px){ .disp img{width:min(86%, 300px);} }

/* ══════════════════════════════════════════
   🔴2026-09-01：ヒーローが寂しいというので足した（タクヤ指示）。
   ⚠️どれも控えめに。主役は写真と題字。
   ══════════════════════════════════════════ */

/* ── 下に流れる音の波 ──
   ⚠️下地の絵が下で消えるので、その空いた所を埋める役。 */
/* ⚠️低いと画面の縁で切れて、あるのか無いのか分からない。高さを取る。 */
.wave{position:absolute; left:0; right:0; bottom:0; height:190px; z-index:-1;
  pointer-events:none; overflow:hidden;}
.wave svg{width:200%; height:100%; display:block;}
.wave path{fill:none; stroke-width:1.6px; vector-effect:non-scaling-stroke;}
.wave__a{stroke:rgba(23,55,107,.26); animation:flow 26s linear infinite;}
.wave__b{stroke:rgba(192,123,57,.34); animation:flow 38s linear infinite reverse;}
@keyframes flow{ from{transform:translateX(0);} to{transform:translateX(-720px);} }

/* ⚠️SCROLLの印は外した。文にも絵にも重なって置き場所が無かった */

/* ── アーチをゆっくり動かす ──
   ⚠️広い画面だけ。狭い画面は1枚ずつ入れ替えているので、動かすと酔う。
   ⚠️3枚に同じ動きを付けると機械っぽい。速さと向きをずらす。 */
@media (min-width:901px){
  .fan__i img{animation:breathe 24s ease-in-out infinite alternate;
    will-change:transform;}
  .fan__i:nth-child(2) img{animation-duration:30s; animation-delay:-6s;}
  .fan__i:nth-child(3) img{animation-duration:27s; animation-delay:-13s;}
  @keyframes breathe{
    from{transform:scale(1.0) translateY(0);}
    to{transform:scale(1.07) translateY(-1.5%);}
  }
  /* アーチの足元に影を落として、床に立っているように見せる */
  .fan{position:relative;}
  .fan::after{content:""; position:absolute; left:4%; right:4%; bottom:-26px;
    height:26px; z-index:-1;
    background:radial-gradient(50% 100% at 50% 0%,
      rgba(15,35,70,.28), rgba(15,35,70,0) 72%);}
}

/* ── 狭い画面 ── */
@media (max-width:900px){
  .wave{height:88px;}
}

@media (prefers-reduced-motion: reduce){
  .wave__a, .wave__b, .fan__i img{animation:none;}
}

/* ⚠️アーチの線は外した。
   写真のアーチと重なって、ただの角丸の箱に見えた（実際にそう見えた）。
   ヒーローの賑やかしは 波・スクロールの印・写真のゆっくりした動き で足りる。 */

/* ── ヒーローは1枚（2026-09-02 タクヤ指示）──
   広い画面では扇を出さず、下地の1枚が絵の役をする。
   ⚠️右の列は**空でも場所を残す**。畳むと文が絵の上まで伸びて読めなくなる。 */
@media (min-width:901px){
  .fan{display:none;}
  .hero__r{min-height:520px;}
  .hero__r::before{display:none;}   /* 扇の後ろの光。絵が無いので不要 */
}
/* 狭い画面：下地は薄い敷き物のまま。左へ抜くのは広い画面だけ */
@media (max-width:900px){
  .hero-bg picture{-webkit-mask-image:none; mask-image:none;}
}

/* ── 狭い画面のヒーロー（2026-09-02 タクヤ指示）──
   4枚が入れ替わる。絵に**ロゴが焼き込み済み**なので、h1のロゴは出さない。 */
@media (max-width:900px){
  /* ⚠️下地は出さない。絵にロゴが入っているので、文の裏にも敷くと
     ロゴが二重に見える。上の1枚に任せる。 */
  .hero-bg{display:none;}
  .hero::after{display:none;}
  /* ⚠️h1 は**消さずに隠す**。見出しの構造と読み上げを残すため。
     display:none にすると見出しが無いページになる。 */
  .disp{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
    border:0;}
  /* 題字が消えたぶん、一言と説明の間を詰める */
  .kick{margin-bottom:14px;}
}

/* ── いちばん狭い端末（〜380px）──
   ⚠️320pxでヘッダーが**22pxはみ出していた**（ロゴ＋配信ボタン＋ハンバーガーが
     並びきらない）。プレイヤーとは無関係の、元からあった不具合。
     ⚠️配信ボタンの字を短くし、ロゴとハンバーガーも少し詰める。 */
@media (max-width:380px){
  .hd__in{padding:9px 12px; gap:8px;}
  .logo img{height:28px;}
  .live{padding:6px 10px 6px 11px; gap:7px;}
  .live b{font-size:11.5px; letter-spacing:.1em;}
  .live span{font-size:9px; padding:3px 5px 2px;}
  .burger{width:38px; height:31px; padding:7px 8px;}
  .hd__r{gap:10px;}
}

/* ══════════════════════════════════════════
   🔴2026-09-02：点検で見つけたぶんの手当て。
   ══════════════════════════════════════════ */

/* ── 押しどころが小さすぎた ──
   ⚠️指で押す部分は高さ32px以上ほしい。実測 24〜27px しか無かった。
     見た目は変えず、当たり判定だけ広げる。 */
.allx{padding:6px 0; display:inline-block;}
.ft__links a{padding:6px 2px;}
.ic{padding:5px;}

/* ── 広い画面：3つの特長が絵に飲まれて読めなかった ──
   ⚠️薄い灰色の字が、明るい絵の上に乗って消えていた（Sleep & Chill）。
     字は変えず、下に**淡い霞**を敷いて浮かせる。 */
@media (min-width:901px){
  .feats{position:relative;}
  .feats::before{content:""; position:absolute; z-index:-1;
    left:-18px; right:-28px; top:-10px; bottom:-12px;
    background:linear-gradient(90deg,
      rgba(243,246,251,.92) 0%, rgba(243,246,251,.86) 62%,
      rgba(243,246,251,0) 100%);
    filter:blur(2px); pointer-events:none;}
}