/* デザイン B「MY ROOM」：パステルのお部屋。クリーム地に、ピンク・水色・ラベンダー */
.design-b {
    --bg: #fff7f1; --ink: #5a3a4a; --pink: #ff6fa8; --card: rgba(255,255,255,.88); --radius: 30px;
    --shadow: 0 16px 40px rgba(255,111,168,.18); --font-big: "Mochiy Pop One", "Fredoka", sans-serif;
    background: radial-gradient(90% 70% at 70% 30%, #ffe4f0 0%, #fff7f1 50%, #eaf6ff 100%) fixed;
}

/* ローディング：お部屋のドア。読み込み終わると左右に開く */
.design-b .loader { background: transparent; color: var(--pink); --p: 0; }
.design-b .loader-door { position: absolute; inset: 0; display: flex; }
.design-b .loader-door span { position: relative; flex: 1; background: repeating-linear-gradient(90deg, #ffc9de 0 40px, #ffd8e8 40px 80px); transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.design-b .loader-door span:first-child { border-right: 6px solid #fff; }
.design-b .loader-door span:last-child { border-left: 6px solid #fff; }
.design-b .loader-door span:first-child::after { content: ""; position: absolute; right: 40px; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #ffd36e; box-shadow: 0 3px 0 #e8b84a; }
.design-b .loader-num { position: relative; z-index: 1; font-family: var(--font-big); color: #fff; text-shadow: 0 4px 0 #ff8fc0; }
.design-b .loader-num::after { content: ""; display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, #fff calc(var(--p) * 100%), rgba(255,255,255,.35) 0); }
.design-b .loader-note { position: relative; z-index: 1; margin: 0; color: #fff; font-weight: 800; }
.design-b .loader.is-done .loader-door span:first-child { transform: translateX(-100%); }
.design-b .loader.is-done .loader-door span:last-child { transform: translateX(100%); }
.design-b .loader.is-done .loader-num, .design-b .loader.is-done .loader-note { opacity: 0; transition: opacity .3s; }

/* ヒーロー：左にふきだしのような大きな文字、右にお部屋 */
.design-b .hero { display: flex; align-items: center; padding: 0 6vw; }
.design-b .hero-copy { max-width: 520px; padding: 40px 44px; border-radius: 40px; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.design-b .hero-label { margin: 0 0 8px; font-weight: 800; color: var(--pink); }
.design-b .hero-title { margin: 0; font: 400 clamp(40px, 5vw, 68px)/1.25 var(--font-big); color: var(--ink); }
.design-b .hero-title .ch:nth-child(3n) { color: var(--pink); }
.design-b .hero-sub { margin: 14px 0 22px; font-weight: 700; }
.design-b .hero-scroll { color: var(--pink); }

/* セクション：カードを片側に寄せる。見出しはポップな字で、ステッカー風 */
.design-b .sec { min-height: 110vh; display: flex; align-items: center; }
.design-b .sec-inner { width: 100%; padding: 0 5vw; }
.design-b .sec--movie .sec-inner, .design-b .sec--plan .sec-inner, .design-b .sec--sns .sec-inner { padding-left: 40vw; }
.design-b .sec--live .sec-inner, .design-b .sec--shop .sec-inner { padding-right: 40vw; }
.design-b .ttl-en { font: 400 clamp(48px, 6vw, 88px)/1 var(--font-big); color: #fff; -webkit-text-stroke: 3px var(--pink); paint-order: stroke fill; text-shadow: 6px 6px 0 #ffd0e3; }
.design-b .ttl-ja { color: var(--pink); }
.design-b .rows { padding: 26px; border-radius: 36px; background: rgba(255,255,255,.8); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.design-b .feature { border: 6px solid #fff; box-shadow: var(--shadow); }
.design-b .profile { grid-template-columns: 1fr; }
.design-b .profile-visual { display: none; }
.design-b .profile-card { border: 4px dashed #ffc2da; }
.design-b .plans { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.design-b .plan-card, .design-b .gcard, .design-b .sns-link { border: 4px solid #fff; }
.design-b .marquee { background: #ff9ccf; }
.design-b .marquee--reverse { background: #8fd3ff; color: #fff; }
.design-b .char-bubble { color: var(--pink); border: 3px solid #ffc2da; }
.design-b .site-footer { background: rgba(255,255,255,.6); }

/* ナイトモード（右下のボタン）。夜の背景は上に重ねた層をふわっと出す（グラデーションは直接なめらかに変えられないため） */
.mode-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.9); color: var(--pink); font: 800 13px var(--font); box-shadow: var(--shadow); cursor: pointer; transition: background .6s, color .6s; }
.mode-icon { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #ffd36e 45%, #ffe9a8 46%); box-shadow: 0 0 12px #ffd36e; transition: background .6s, box-shadow .6s, transform .6s; }
.is-night .mode-toggle { background: rgba(30,14,40,.9); color: #ffe6f4; }
.is-night .mode-icon { background: radial-gradient(circle at 34% 34%, transparent 42%, #fff1b8 43%); box-shadow: 0 0 14px rgba(255,241,184,.8); transform: rotate(-20deg); }
.design-b::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s;
    background: radial-gradient(90% 70% at 70% 30%, #3a1a45 0%, #1a0d24 55%, #0d0a1f 100%); }
.design-b.is-night::before { opacity: 1; }
.design-b.is-night { --ink: #ffe6f4; --card: rgba(36,16,44,.8); --shadow: 0 18px 50px rgba(0,0,0,.45); }
.design-b.is-night .drawer { background: rgba(20,8,18,.94); }   /* 文字が明るくなるので、メニューの背景も暗く（ひみつのお部屋と同じ） */
.design-b.is-night .hero-copy, .design-b.is-night .rows { background: rgba(36,16,44,.75); }
.design-b.is-night .hero-title { color: #ffe6f4; }
.design-b.is-night .ttl-en { text-shadow: 0 0 18px rgba(255,111,168,.6); }
.design-b.is-night .plan-card, .design-b.is-night .gcard, .design-b.is-night .sns-link { border-color: rgba(255,255,255,.12); }
.design-b.is-night .char-bubble { background: #2a1236; color: #ffe6f4; border-color: #6a3a7a; }
.design-b.is-night .site-header.is-scrolled { background: rgba(26,13,36,.75); }
.design-b.is-night .site-footer { background: rgba(26,13,36,.6); }
.design-b.is-night .row-arrow { background: rgba(255,255,255,.12); color: #fff; }
.design-b .hero, .design-b .sec, .design-b .site-footer, .design-b .marquee { transition: color .6s; }

@media (max-width: 768px) {
    .mode-toggle { right: 10px; bottom: 10px; padding: 6px 12px 6px 6px; font-size: 11px; }
    .mode-icon { width: 24px; height: 24px; }
    .design-b.is-night .hero-copy { background: rgba(36,16,44,.85); }
    .design-b .hero-copy { background: rgba(255,255,255,.85); }
    .design-b .hero-title { line-height: 1.3; }
}

/* ひみつのお部屋への扉：マウスを乗せると指のカーソル。開けて入るときは、ふわっとピンクの白に */
.design-b.is-door, .design-b.is-door * { cursor: pointer; }
.design-b::after { content: ""; position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at 30% 50%, #fff 0%, #ffe3f0 60%, #ffc2de 100%); opacity: 0; pointer-events: none; transition: opacity .6s; }
.design-b.is-leaving::after { opacity: 1; }
/* 扉へ向かうあいだは、文字やカードを消して部屋だけを見せる */
.design-b main, .design-b .site-header, .design-b .design-switch, .design-b .mode-toggle { transition: opacity .5s; }
.design-b.is-entering main, .design-b.is-entering .site-header, .design-b.is-entering .design-switch, .design-b.is-entering .mode-toggle { opacity: 0; pointer-events: none; }

/* スマホ：動画の一覧は 1 段ずつのカードにして、段のあいだを空ける（スクロールの途中で、れいきらが見えるように） */
@media (max-width: 768px) {
    .design-b .rows { padding: 0 !important; background: none !important; box-shadow: none; backdrop-filter: none; gap: 0; }
    .design-b .vblock { margin-top: 62svh !important; padding: 16px; border-radius: 26px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
    .design-b .vblock:first-child { margin-top: 30svh !important; }
    .design-b .vgrid > :nth-child(n+5) { display: none; }   /* スマホは各段 4 本まで（カードが長いと、れいきらが映る場所がなくなる。続きは「すべて見る」） */
    .design-b #MOVIE, .design-b #PLAN { padding-bottom: 34svh !important; }   /* 最後のボタンのあとを空けて、次の場面でボタンがれいきらの顔にかからないように */
    .design-b.is-night .vblock { background: rgba(36,16,44,.82); }
}
.design-b.is-arriving::after { opacity: 1; transition: none; }
.design-b.is-arriving .loader { z-index: 61; }