/* デザイン F「HOME THEATER」（おうち映画館）：夜の部屋。黒に近いプラム色に、ピンクのネオンと電球色のあかり */
.design-f {
    --bg: #12070f; --ink: #ffe6f4; --pink: #ff4fae; --lav: #b47cff; --amber: #ffb86b; --card: rgba(28, 10, 26, .72); --radius: 22px;
    --shadow: 0 20px 60px rgba(0,0,0,.55);
    background: radial-gradient(90% 70% at 50% 30%, #2a0d26 0%, #12070f 65%) fixed;
}
/* 3D の部屋をクリックできるように：キャンバスがマウスを受け取り、文字のカードだけが上でクリックを受ける */
.design-f .stage { pointer-events: auto; }
.design-f main, .design-f .sec, .design-f .hero { pointer-events: none; }
.design-f .hero-copy, .design-f .spot-card, .design-f .marquee { pointer-events: auto; }
.design-f .drawer { background: rgba(20,8,18,.94); }
.design-f .drawer a { color: #ffe6f4; }
.design-f .nav-plan { color: #ffd1e8; }
.design-f.is-picking .stage { cursor: pointer; }
.design-f .site-header.is-scrolled { background: rgba(18,7,15,.72); }
.design-f .site-logo img { filter: drop-shadow(0 0 10px rgba(255,79,174,.6)); }
.design-f .site-nav a:not(.nav-join) { color: #ffd1e8; }
.design-f .pill-btn { background: linear-gradient(135deg, #ff4fae, #ff8a5c); box-shadow: 0 0 28px rgba(255,79,174,.45); border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.design-f .char-bubble { background: rgba(24,8,22,.88); color: #ffe6f4; border: 1px solid rgba(255,184,107,.55); box-shadow: 0 0 22px rgba(255,79,174,.45); }

/* ローディング：部屋のネオンと同じ文字に、% とピンクのバー */
.design-f .loader { background: radial-gradient(70% 60% at 50% 45%, #2a0d26 0%, #0c0409 70%); color: #ffe6f4; --p: 0; gap: 14px; transition: opacity 1s ease, filter 1s; }
.design-f .loader.is-done { opacity: 0; filter: blur(6px); }
.design-f .loader-sign { margin: 0 0 6px; font: 400 clamp(40px, 7vw, 64px)/1.2 Pacifico, cursive; color: #ffd1e8; text-shadow: 0 0 18px #ff4fae, 0 0 42px rgba(255,79,174,.7); animation: neon 3s ease-in-out infinite; }
@keyframes neon { 45%, 55% { opacity: 1; } 50% { opacity: .75; } }
.design-f .loader-num { margin: 0; font: 700 56px/1 var(--font-en); color: #fff; }
.design-f .loader-num small { font-size: 22px; margin-left: 4px; color: #ff8fcf; }
.design-f .loader-bar { width: min(260px, 64vw); height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.design-f .loader-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, #ff4fae, #ffb86b); box-shadow: 0 0 12px #ff4fae; }
.design-f .loader-note { margin: 4px 0 0; font-weight: 800; letter-spacing: .1em; color: var(--amber); font-size: 14px; }

/* ヒーロー：左側に、映画のタイトルのような文字。右側は部屋とれいきら */
.design-f .hero { display: flex; align-items: center; padding: 0 6vw; }
.design-f .hero-copy { max-width: 470px; padding: 34px 36px; border-radius: 26px; background: linear-gradient(160deg, rgba(28,10,26,.72), rgba(28,10,26,.35)); backdrop-filter: blur(6px); border: 1px solid rgba(255,184,107,.25); }
.design-f .hero-label { margin: 0 0 14px; font: 700 12px var(--font-en); letter-spacing: .3em; color: var(--amber); }
.design-f .hero-title { margin: 0; font: 800 clamp(34px, 3.8vw, 54px)/1.3 var(--font); white-space: nowrap; text-shadow: 0 0 28px rgba(255,79,174,.6); }
.design-f .hero-sub { margin: 18px 0 24px; font-size: 15px; line-height: 1.9; opacity: .9; }
.design-f .hero-hint { margin: 18px 0 0; font-size: 13px; font-weight: 800; color: var(--amber); }
.design-f .hero-hint i, .design-f .spot-hint i { animation: tap 1.6s ease-in-out infinite; display: inline-block; }
@keyframes tap { 50% { transform: translateY(-3px) scale(1.1); } }
.design-f .hero-scroll { color: var(--amber); }

/* 場面ごとの案内のカード。3D の物の邪魔にならないよう、小さく画面の端に */
.design-f .spot { min-height: 190vh; display: block; padding: 50vh 4vw 0; }
.design-f .spot--movie { min-height: 420vh; }
/* 場面のあいだ、カードは画面の下（床のあたり）に細く止まる。3D の物やれいきらにかぶらないように */
.design-f .spot-card { position: sticky; top: calc(100vh - 168px); width: min(600px, 100%); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 18px; padding: 14px 22px 16px; }
.design-f .spot--right .spot-card { margin-left: auto; }
.design-f .spot-card .ttl { grid-column: 1; margin: 0; flex-direction: row; align-items: baseline; gap: 10px; }
.design-f .spot-card .ttl-en { font-size: 34px !important; }
.design-f .spot-no { grid-column: 1; margin: 0; }
.design-f .spot-text { grid-column: 1; margin: 2px 0 0; font-size: 13px; line-height: 1.7; }
.design-f .spot-hint { grid-column: 1; margin: 2px 0 0; }
.design-f .spot-open { grid-column: 2; grid-row: 1 / span 4; }
.design-f .spot-card { border-radius: var(--radius); background: var(--card); backdrop-filter: blur(10px); border: 1px solid rgba(255,79,174,.28); box-shadow: var(--shadow); }
.design-f .spot-no { font: 700 11px var(--font-en); letter-spacing: .35em; color: var(--amber); }
.design-f .spot-card .ttl-en { color: #ffd1e8; text-shadow: 0 0 22px rgba(255,79,174,.75); }
.design-f .spot-card .ttl-ja { color: #ff8fcf; }
.design-f .spot-hint { font-size: 13px; font-weight: 800; color: var(--amber); }
.design-f .spot-open { padding: 11px 24px; font-size: 14px; }

/* マウスを乗せた物の名前（マウスの横に出る） */
.pick-tip { position: fixed; left: 0; top: 0; z-index: 25; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.95); color: #2b1532; font-weight: 800; font-size: 13px; white-space: nowrap; pointer-events: none;
    transform: translate(calc(var(--x, -999px) + 16px), calc(var(--y, -999px) + 14px)); opacity: 0; transition: opacity .2s; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pick-tip.is-show { opacity: 1; }

/* シート（ふつうの一覧）：物をクリックしたとき・「一覧でみる」で開く */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(10,4,9,.55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-panel { position: relative; width: min(1100px, 100%); max-height: 88vh; overflow: auto; overscroll-behavior: contain; padding: 44px 44px 48px; border-radius: 28px; background: rgba(26,10,24,.94); border: 1px solid rgba(255,79,174,.3); box-shadow: 0 30px 90px rgba(0,0,0,.6); transform: translateY(30px) scale(.97); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-close { position: sticky; top: 0; float: right; margin: -20px -20px 0 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.sheet-close:hover { background: var(--pink); }
.sheet .ttl-en { font-size: clamp(40px, 5vw, 72px); color: #ffd1e8; text-shadow: 0 0 22px rgba(255,79,174,.7); }
.sheet .ttl-ja { color: #ff8fcf; }
.sheet .row-title, .sheet .mcard-title, .sheet .lead { color: #ffe6f4; }
.sheet .row-arrow { background: rgba(255,255,255,.12); color: #fff; }
.sheet .plan-card, .sheet .gcard, .sheet .sns-link { background: rgba(255,255,255,.06); border: 1px solid rgba(255,79,174,.25); }
.sheet .plan-card.is-recommended { outline-color: var(--pink); }
.sheet .btn-row { margin-top: 28px; }
/* シートの中の動画は、横に流さず全部並べる（隠れて見えない動画が出ないように） */
.sheet .row-track { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.sheet .mcard { flex: 0 0 calc((100% - 48px) / 4); }
.sheet .row-arrow { display: none; }

/* ページを移るとき：画面が暗くなる（映画の暗転） */
.design-f::after { content: ""; position: fixed; inset: 0; z-index: 60; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s .2s; }
.design-f.is-leaving::after { opacity: 1; }

.design-f .marquee { background: transparent; color: var(--amber); border-block: 1px solid rgba(255,184,107,.35); }
.design-f .marquee--reverse { color: #ff8fcf; }
.design-f .site-footer { color: #ffd1e8; }

/* スマホ：カードは下に小さく。物はタップできるが、一覧のボタンを目立たせる */
@media (max-width: 768px) {
    .design-f .hero-copy { padding: 20px !important; }
    .design-f .hero-hint { font-size: 12px; }
    .design-f .hero-title { white-space: normal; font-size: clamp(30px, 9vw, 40px) !important; }
    /* スマホ：カードは画面の下に小さく止める（見出し・ヒント・ボタンだけ）。上の 3/4 は 3D の部屋 */
    .design-f .spot { min-height: 170vh !important; display: block !important; padding: 70vh 12px 0 !important; }
    .design-f .spot--movie { min-height: 420vh !important; }
    .design-f .spot--live, .design-f .spot--plan, .design-f .spot--shop { min-height: 280vh !important; }
    .design-f .spot-card { position: sticky; top: calc(100svh - 168px); width: 100%; margin: 0 !important; padding: 12px 16px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
    .design-f .spot-no { display: none; }
    .design-f .spot-card .ttl { margin: 0; grid-column: 1; flex-direction: row; align-items: baseline; gap: 8px; }
    .design-f .spot-card .ttl-en { font-size: 26px !important; }
    .design-f .spot-card .ttl-ja { font-size: 11px; }
    .design-f .spot-text { display: none; }
    .design-f .spot-hint { grid-column: 1; margin: 0; font-size: 12px; }
    .design-f .spot-open { grid-column: 2; grid-row: 1 / span 2; padding: 10px 16px; font-size: 13px; }
    .sheet .mcard { flex-basis: calc((100% - 16px) / 2); }
    .sheet { padding: 0; align-items: end; }
    .sheet-panel { max-height: 90vh; border-radius: 24px 24px 0 0; padding: 30px 16px 36px; }
    .sheet-close { margin: -14px -6px 0 0; }
    .pick-tip { display: none; }
}