` と地の文を同じ行に流す。
* 入力欄は wrap が block なので改行され、余白は gap ではなく margin-top で 4px を再現する。 */
/* ⚠️ 詳細度と DOM 構造の2点に注意(2026-07-28 実測):
* 1. 既存の `.sc-contact--cf7 .wpcf7-form > p > label`(0,2,2)が flex を当てているので
* `.sc-space-form-cf7 .wpcf7-form label`(0,2,1)では負ける。
* 2. **`.sc-contact--cf7` と `.sc-space-form-cf7` は同一要素に付いている**
* (``)。子孫セレクタで
* `.sc-contact--cf7 .sc-space-form-cf7` と書くと**一致しない**。複合(スペース無し)にする。
* → `.sc-contact--cf7.sc-space-form-cf7 .wpcf7-form > p > label` = (0,3,2) で勝つ。!important は使わない。 */
.sc-contact--cf7.sc-space-form-cf7 .wpcf7-form > p > label { display: block; }
.sc-contact--cf7.sc-space-form-cf7 .wpcf7-form > p > label > .wpcf7-form-control-wrap { display: block; margin-top: 4px; }
/* ============================================================
* 一覧: Live Events
* ============================================================ */
.sc-space-events {
max-width: 900px; margin-inline: auto;
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 40px var(--sc-space-margin); text-align: center;
}
.sc-space-events__title { font-size: 28px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-space-events__sub { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); max-width: 480px; }
.sc-space-video {
width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin-top: 12px;
border-radius: var(--sc-radius-card); overflow: hidden; background: #4d4d4d;
}
.sc-space-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ============================================================
* 一覧: Community CTA
* ============================================================ */
.sc-space-community {
background: #121212;
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 48px var(--sc-space-margin); text-align: center;
}
.sc-space-community__title { font-size: 28px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-space-community__text { max-width: 720px; font-size: 14px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
.sc-space-community__cta {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 28px;
background: var(--sc-primary); color: var(--sc-white); border-radius: var(--sc-radius-pill);
text-decoration: none; font-size: 16px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-space-community__cta:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); color: var(--sc-white); }
/* ============================================================
* 詳細: Hero / head / assets
* ============================================================ */
/* PC(Figma 1798:6063/1798:6060): ぼかして拡大したコピーを背景に敷き、中央に実寸フォトを重ねる */
.sc-space-single__hero {
position: relative; overflow: hidden; display: flex; justify-content: center;
background: #000; padding: 24px 0;
}
.sc-space-single__hero-bg {
position: absolute; inset: -60px 0; z-index: 0;
background: center/cover no-repeat;
filter: blur(10px); opacity: .4; mix-blend-mode: difference; pointer-events: none;
}
.sc-space-single__hero-img {
position: relative; z-index: 1; width: min(1065px, 92%); aspect-ratio: 1065 / 599;
background: #4d4d4d center/cover no-repeat; border-radius: var(--sc-radius-card);
}
.sc-space-single__head {
max-width: 846px; margin-inline: auto;
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 48px var(--sc-space-margin) 24px; text-align: center;
}
.sc-space-single__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-space-single__desc { font-size: 14px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); }
.sc-space-assets {
max-width: 846px; margin-inline: auto;
display: flex; flex-direction: column; gap: 8px;
padding: 0 var(--sc-space-margin) 24px;
}
.sc-space-assets__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-space-chip {
display: inline-flex; align-items: center; height: 36px; padding: 8px 10px; cursor: pointer;
background: var(--sc-bg-hover-strong); border: 1px solid transparent; border-radius: 54px;
color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.4; white-space: nowrap;
}
/* #162-4: 選択状態は is-active のみ。非選択は枠線、選択は primary 塗り。 */
.sc-space-chip { border-color: var(--sc-border); }
.sc-space-chip:hover { border-color: var(--sc-primary); }
.sc-space-chip.is-active { background: var(--sc-primary); color: var(--sc-fg); border-color: var(--sc-primary); }
/* ★ 親 `.sc-space-assets` を前置きして (0,2,0)。:27 の
* `.sc-space ul, .sc-space-single ul { list-style: none; padding: 0 }`(0,1,1) が単体クラス (0,1,0) の
* padding を食っていた(= #192 と同型。リストがカード端に密着)。root が2つ(.sc-space / .sc-space-single)
* あるので、どちらでも効く親クラスで前置きする。 */
.sc-space-assets .sc-space-assets__list { display: flex; flex-direction: column; gap: 8px; padding: 16px 8px; }
.sc-space-assets__item { font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); }
/* #225: Gear カテゴリが1つだけの室(Recording Studio の Large Iso / Small Iso)は
切替対象が無いので chip(button)ではなく見出しラベル(Figma 4851:73605 / 4851:73534 "Equipment")。 */
.sc-space-assets__label { font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.4; color: var(--sc-fg); }
/* ラベル→1件目 の間隔は Figma 26px-20px=6px。__list の padding-top 16px を 6px に寄せる。 */
.sc-space-assets--single .sc-space-assets__list { padding-top: 6px; }
/* #225: Recording Studio 詳細の 2 室目以降の写真。
1室目はページ hero(全幅+ぼかし背景)を流用し、2室目以降はこの 846px 幅の写真をブロック先頭に置く
(Figma PC 4851:73599 / 4851:73609 = x297 w846 h475.875 = 16:9・radius card。
直前の Gear 一覧末尾からの間隔は list padding-bottom 16px + assets padding-bottom 24px + 24px = 64px)。 */
.sc-space-subroom__media {
max-width: 846px; margin: 24px auto 0;
aspect-ratio: 16 / 9;
background: #4d4d4d center/cover no-repeat;
border-radius: var(--sc-radius-card);
}
/* #225: Figma には「Recording Studio」自体の見出しが無い(3室分のタイトルのみ)。
デザインを崩さずに文書構造(h1)を保つための視覚的非表示。 */
.sc-space-sr {
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;
}
/* #162-2: タブ廃止 → 見出し「Passes & Membership」+ Pass/Rental 行 + Membership 行を常時表示。
カード列(.sc-space-plans)は 848px 中央寄せ(Figma 1723:18431)。行間は 24px(Figma 389-365)。 */
.sc-space-single__plans {
display: flex; flex-direction: column; gap: 24px;
padding: 24px var(--sc-space-margin) 48px;
}
.sc-space-single__plans .sc-space-section__head { margin-bottom: 8px; }
/* ============================================================
* 詳細: SP 追従CTA(Book a Tour)。PC は非表示。
* ============================================================ */
.sc-space-fixedcta { display: none; }
/* ============================================================
* SP (≤1024px)
* ============================================================ */
@media (max-width: 1024px) {
.sc-space, .sc-space-single { --sc-space-margin: 16px; overflow-x: clip; }
.sc-space-hero { min-height: 240px; padding: 32px 16px; } /* Figma SP=240(guardrails §5) */
.sc-space-hero__title { font-size: 32px; }
/* NYC Space Intro: SP も PC と同じ中央寄せ(旧2カラム廃止) */
.sc-space-intro { padding: 48px var(--sc-space-margin); gap: 20px; }
.sc-space-intro__title { font-size: 32px; }
/* 購入セクション(Passes / Membership)の SP 余白・見出し */
.sc-space-buy { padding: 40px var(--sc-space-margin); gap: 24px; }
.sc-space-section__title { font-size: 28px; }
/* Room grid: 1 カラム、隙間ゼロ(Figma 1822:31513) */
.sc-space-rooms__grid { grid-template-columns: 1fr; }
/* #258: 説明文が "..." で見切れる(Galaxy S25 / S10)。
* 原因(360px 幅で実測): カードは `aspect-ratio:16/9` で高さ固定(203px)、説明文は
* `-webkit-line-clamp:2`(39px)。360px では **5 室が 3 行以上必要**になり切れていた
* (Room 3 / 5 / 6 と Recording Studio = 3 行 / **Student Lounge = 6 行**)。
* 412px 幅の端末では 2 行に収まるため再現しなかった。
* さらに **Recording Studio は body 187px > カード 185px で既に 2px はみ出していた**。
* 対策: SP では**高さ固定をやめて内容で伸ばす**(`aspect-ratio` → `min-height`)＋ clamp を 3 行へ。
* 3 行にした理由: Student Lounge の抜粋だけ 232 文字(他室は 65〜100 文字)で、
* 全文表示にすると 1 枚だけ極端に高くなり 1 カラムのリズムが崩れるため。
* ⚠️ **Figma SP は 16:9 固定**。見切れるより伸ばす方を採った(要確認事項として issue に記録)。
* ⚠️ 本来の解は **Student Lounge の抜粋を他室と同程度に短くする**こと(管理画面の抜粋欄で変更可)。
*
* 【#258 追い FB(2026-07-30)】「16:9 を崩すのは可。ただし**全カードの高さは揃えること**」。
* `min-height` だけだと**内容の多い室だけが伸びて 1 枚ずつ高さが変わる**ため、
* グリッド側に `grid-auto-rows: 1fr` を入れて**全行を最も高い行に揃える**
* (高さの決定を「カード個々の内容」から「グリッド全体」へ移す)。
* - `1fr` は親の高さが不定のとき「最大コンテンツに合わせて全行同一」になる挙動を使っている。
* - カードは `align-items: flex-end` なので、余った分は上に付き**テキストは下端で揃う**。
* - **PC には入れない**(PC は `aspect-ratio: 16/9` で既に均一。ここは SP メディアクエリ内)。
* - Recording セクションのグリッドも同じ class を持つので自動的に揃う。 */
.sc-space-rooms__grid { grid-auto-rows: 1fr; }
.sc-space-room { aspect-ratio: auto; min-height: 203px; }
.sc-space-room__desc { -webkit-line-clamp: 3; line-clamp: 3; }
/* SP は 1 列なので #225 の中央寄せは解除(grid-column:2 だと存在しない 2 列目が生えて壊れる) */
.sc-space-rooms__grid > .sc-space-room:last-child:nth-child(3n + 1) { grid-column: auto; }
/* Recording セクション: SP は左右 margin を詰め、カードは全幅 */
.sc-space-rooms--recording { padding: 40px var(--sc-space-margin); gap: 24px; }
.sc-space-rooms__grid--recording { max-width: none; }
.sc-space-tour-band { padding: 32px 23px; }
/* 詳細 Passes & Membership: SP 余白 */
.sc-space-single__plans { padding: 8px var(--sc-space-margin) 40px; gap: 20px; }
/* Plan cards: 1 カラム */
.sc-space-plans { grid-template-columns: 1fr; }
/* フォーム: SP は送信ボタンを全幅48px/18px(#177: 実 CF7 の submit を対象化) */
.sc-space-tour__title { font-size: 28px; }
.sc-space-form-cf7 .wpcf7-form input.wpcf7-submit { width: 100%; min-height: 48px; font-size: 18px; }
/* Events / Community */
.sc-space-events { padding: 32px var(--sc-space-margin); }
.sc-space-community { padding: 32px var(--sc-space-margin); }
/* 詳細 hero: SP はぼかし背景無しでフラット16:9(Figma 1680:14259) */
.sc-space-single__hero { padding: 0; }
.sc-space-single__hero-bg { display: none; }
.sc-space-single__hero-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
/* 詳細 head: SP は左寄せ・24px(Figma 1680:14675) */
.sc-space-single__head { align-items: flex-start; text-align: left; padding: 32px var(--sc-space-margin) 24px; }
.sc-space-single__title { font-size: 24px; }
/* #225: 2室目以降の写真は SP では全幅フラット(Figma SP 4851:73505 / 4851:73523 = w393 h221 = 16:9) */
.sc-space-subroom__media { max-width: none; margin: 0; border-radius: 0; }
/* SP 追従CTA が最終セクションに重ならないよう下部の余白を確保 */
.sc-space-single { padding-bottom: 88px; }
/* SP 追従CTA(下部固定・中央ピル) */
.sc-space-fixedcta {
position: fixed; z-index: 100;
left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 40px; padding: 8px 24px; max-width: calc(100% - 32px);
background: var(--sc-primary); color: var(--sc-white);
border-radius: var(--sc-radius-pill); text-decoration: none; white-space: nowrap;
font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.sc-space-fixedcta i { font-size: 12px; }
.sc-space-fixedcta:hover { color: var(--sc-white); background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }
}
/* #231: Day Pass 予約ウィジェット(SimplyBook.me)の受け皿。
* クリック前は空要素なので余白を作らない。生成後は iframe を全幅で見せる。 */
.sc-space-daypass:empty { display: none; }
.sc-space-daypass { margin-top: 24px; }
.sc-space-daypass iframe { width: 100%; min-height: 720px; border: 0; border-radius: var(--sc-space-card-radius); }
@media (max-width: 767px) {
.sc-space-daypass iframe { min-height: 640px; }
}