@charset "UTF-8"; /* ===================================================================== HADO ARENA お台場店スペースレンタル LP - 公式テーマ（hado-official-theme）配下で動かす想定 - 公式テーマの CSS が読み込まれた後にカスケード - 公式デザイントークン: 背景 #242424 / アクセント #1ac6d6 / 副 #408bd1 ===================================================================== */ /* 公式テーマの SP フローティングバナー（問い合わせ／LINE 友達追加）はこの LP では出さない。テーマ側のテンプレで配下にも出力されるため、CSS で非表示にする。 */ .space-rental-lp .sp-floating-banner { display: none !important; } .space-rental-lp { /* 公式 body にぶら下げる名前空間。以下の変数は本 LP 内のみ有効。 */ --sr-bg: #242424; --sr-bg-2: #1c1c1c; --sr-bg-mid: #515151; --sr-bg-mid-2: #363636; --sr-surface: #ffffff; --sr-surface-mute: #efefef; --sr-text: #242424; --sr-text-inv: #ffffff; --sr-text-mute: #9b9b9b; --sr-accent: #1ac6d6; --sr-accent-2: #408bd1; --sr-border: rgba(255, 255, 255, 0.08); --sr-border-dark: #e6e6e6; --sr-radius-sm: 4px; --sr-radius: 8px; --sr-radius-lg: 16px; --sr-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); --sr-shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.35); --sr-font: "urw-din", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; background: var(--sr-bg); color: var(--sr-text-inv); font-family: var(--sr-font); line-height: 1.8; letter-spacing: 0.04em; margin: 0; overflow-x: hidden; } .space-rental-lp, .space-rental-lp *, .space-rental-lp *::before, .space-rental-lp *::after { box-sizing: border-box; } .sr-main { display: block; } .sr-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; } /* ---------- パンくず ---------- */ .sr-breadcrumb { padding: 24px 0 0; font-size: 12px; color: var(--sr-text-mute); } .sr-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .sr-breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--sr-text-mute); } .sr-breadcrumb a { color: var(--sr-text-mute); text-decoration: none; } .sr-breadcrumb a:hover { color: var(--sr-accent); } /* ---------- 共通ボタン ---------- */ .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--sr-radius); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s; } .sr-btn--primary { background: var(--sr-accent); color: var(--sr-text); } .sr-btn--primary:hover { background: var(--sr-accent-2); color: var(--sr-text-inv); transform: translateY(-1px); } .sr-btn--ghost { background: transparent; color: var(--sr-text-inv); border: 1px solid rgba(255, 255, 255, 0.35); } .sr-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--sr-text-inv); } .sr-btn--lg { padding: 18px 40px; font-size: 15px; } /* ---------- セクション間バンド ---------- */ .sr-band { height: clamp(220px, 38vw, 360px); background-color: #242424; background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---------- HADO ARENA とは ---------- */ .sr-about { background: var(--sr-bg); color: var(--sr-text-inv); } .sr-about__image { height: clamp(150px, 24vw, 260px); background-color: #242424; background-size: cover; background-position: center top; background-repeat: no-repeat; } .sr-about__inner { margin-top: clamp(-110px, -10vw, -70px); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 44px; padding-bottom: clamp(64px, 8vw, 96px); } .sr-about__label { background: rgba(0, 0, 0, 0.68); padding: 28px 64px 32px; text-align: center; display: inline-flex; flex-direction: column; align-items: center; gap: 14px; } .sr-about__eyebrow { font-size: 12px; letter-spacing: 0.24em; color: var(--sr-text-inv); margin: 0; } .sr-about__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.4; margin: 0; color: var(--sr-text-inv); } .sr-about__divider { display: block; width: 56px; height: 2px; background: var(--sr-accent); } .sr-about__desc { max-width: 640px; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, 0.88); margin: 0; text-align: left; } .sr-about__desc p { margin: 0; } /* ---------- セクション共通 ---------- */ .sr-section { padding: 96px 0; } /* ライト基調セクション（FV と CTA 以外で使う） */ .sr-section--light { --sr-bg: #ffffff; --sr-bg-2: #f7f7f7; --sr-text-inv: #242424; --sr-text-mute: #6b6b6b; --sr-border: #e6e6e6; background: #ffffff; color: var(--sr-text); } .sr-section--light .sr-uses__item { background: #f7f7f7; } .sr-section--light .sr-options__sublist { background: #f7f7f7; } .sr-section--light .sr-fv__lead, .sr-section--light .sr-room__desc { color: #555; } .sr-section--light .sr-cases__dot { background: rgba(0, 0, 0, 0.2); } .sr-section--light .sr-cases__dot:hover { background: rgba(0, 0, 0, 0.4); } .sr-section--light .sr-features__cta .sr-btn--ghost, .sr-section--light .sr-cases__cta .sr-btn--ghost { color: var(--sr-text); border-color: rgba(36, 36, 36, 0.3); } .sr-section--light .sr-features__cta .sr-btn--ghost:hover, .sr-section--light .sr-cases__cta .sr-btn--ghost:hover { background: rgba(0, 0, 0, 0.04); color: var(--sr-text); } .sr-section--light .sr-room__media, .sr-section--light .sr-case__media, .sr-section--light .sr-floormap__spot-media, .sr-section--light .sr-feature__bg { background-image: linear-gradient(135deg, #d0d0d0 0%, #b0b0b0 100%); } .sr-section--light .sr-floormap__image { background: #f7f7f7; } .sr-section--light .sr-uses__item p { color: #6b6b6b; } .sr-options.sr-section--light, .sr-floormap.sr-section--light { background: #ececec; } .sr-section__head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .sr-section__eyebrow { font-size: 12px; letter-spacing: 0.24em; color: var(--sr-accent); margin: 0 0 12px; } .sr-section__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.4; margin: 0 0 16px; } .sr-section__lead { color: var(--sr-text-mute); font-size: 15px; line-height: 2; margin: 0; } /* ---------- 1. FV ---------- */ .sr-fv { position: relative; min-height: clamp(620px, 86vh, 880px); display: flex; align-items: center; padding: 138px 0 96px; overflow: hidden; background: var(--sr-bg); } .sr-fv__media { position: absolute; inset: 0; z-index: 0; } .sr-fv__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .sr-fv__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%); } .sr-fv__inner { position: relative; z-index: 2; } .sr-fv__eyebrow { font-size: 12px; letter-spacing: 0.24em; color: var(--sr-accent); margin: 0 0 24px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .sr-fv__title { font-size: clamp(26px, 4.2vw, 42px); font-weight: 700; line-height: 1.35; margin: 0 0 28px; letter-spacing: 0.04em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); } .sr-fv__lead { font-size: 15px; line-height: 2; max-width: 690px; color: rgba(255, 255, 255, 0.85); margin: 0 0 40px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .sr-fv__cta { display: flex; flex-wrap: wrap; gap: 16px; } .sr-fv__cta .sr-btn { padding-inline: 72px; } /* ---------- 2. 用途 ---------- */ .sr-uses { background: var(--sr-bg-2); } .sr-uses__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; } .sr-uses__item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 28px 20px; text-align: center; } .sr-uses__icon { width: 64px; height: 64px; display: block; margin: 0 auto 16px; object-fit: contain; } .sr-uses__item h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; } .sr-uses__item p { font-size: 12px; color: var(--sr-text-mute); line-height: 1.7; margin: 0; /* 日本語の塊（単語）の途中で折り返さない。塊が幅を超えたときのみ強制折返し。 */ word-break: keep-all; overflow-wrap: anywhere; } .sr-uses__needs { margin-top: 56px; text-align: center; } .sr-uses__needs-title { font-size: 18px; font-weight: 700; margin: 0 0 24px; color: var(--sr-text); padding: 4px 0; background: linear-gradient( 90deg, transparent 0%, rgba(26, 198, 214, 0.22) 25%, rgba(26, 198, 214, 0.22) 75%, transparent 100% ); } .sr-uses__needs-list { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .sr-uses__needs-list li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.7; color: var(--sr-text); } .sr-uses__needs-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sr-accent); font-weight: 700; font-size: 16px; } /* ---------- 3. ルーム ---------- */ .sr-rooms__list { display: flex; flex-direction: column; gap: 80px; } .sr-room { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; color: var(--sr-text-inv); } .sr-room--reverse .sr-room__media { order: 2; } .sr-room__media { aspect-ratio: 4 / 3; background-color: #242424; background-image: linear-gradient(135deg, #242424 0%, #404040 100%); background-size: cover; background-position: center; position: relative; border-radius: 0; overflow: hidden; } .sr-room__media::after { content: "PHOTO"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.4); font-size: 12px; letter-spacing: 0.3em; } .sr-room__media[style*="background-image"]::after { content: none; } .sr-room__body { display: flex; flex-direction: column; gap: 18px; } .sr-room__tag { display: inline-block; align-self: flex-start; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; background: rgba(26, 198, 214, 0.12); color: var(--sr-accent); border-radius: 999px; margin: 0; } .sr-room__title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.4; margin: 0; color: var(--sr-text-inv); } .sr-room__desc { font-size: 15px; line-height: 2; color: rgba(255, 255, 255, 0.75); margin: 0; } .sr-room__spec { margin: 8px 0 0; border-top: 1px solid var(--sr-border); padding-top: 20px; display: grid; gap: 14px; } .sr-room__spec > div { display: flex; flex-direction: column; gap: 3px; } .sr-room__spec dt { color: var(--sr-text-mute); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; margin: 0; white-space: nowrap; } .sr-room__spec dd { font-weight: 600; font-size: 13px; color: var(--sr-text-inv); line-height: 1.6; letter-spacing: 0.02em; margin: 0; } /* ---------- 4. 設備・サービス ---------- */ .sr-facilities__grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 16px; justify-items: center; } .sr-facility { display: flex; align-items: center; justify-content: center; width: 100%; } .sr-facility img { width: 100%; height: auto; max-width: 120px; display: block; } /* ---------- 5. 推しポイント ---------- */ .sr-features { background: var(--sr-bg-mid-2); } .sr-features__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .sr-features__cta { margin-top: 40px; text-align: center; } .sr-feature { position: relative; grid-column: span 2; min-height: 280px; padding: 32px 28px; border-radius: 0; border: 1px solid var(--sr-border); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease; } /* 5枚レイアウト時の下段中央寄せ（PC 3列） */ .sr-features__grid > .sr-feature:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } .sr-feature:hover { transform: translateY(-2px); border-color: var(--sr-accent); } .sr-feature__bg { position: absolute; inset: 0; z-index: -2; background-color: #242424; background-image: linear-gradient(135deg, #242424 0%, #404040 100%); background-size: cover; background-position: center; transition: transform 0.6s ease; } .sr-feature__bg::after { content: "PHOTO"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.18); font-size: 12px; letter-spacing: 0.3em; } .sr-feature__bg[style*="background-image"]::after { content: none; } .sr-feature:hover .sr-feature__bg { transform: scale(1.04); } .sr-feature__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.78) 100%); } .sr-feature__content { position: relative; display: flex; flex-direction: column; gap: 12px; } .sr-feature__num { font-size: 24px; font-weight: 700; color: var(--sr-accent); letter-spacing: 0.08em; line-height: 1; } .sr-feature__title { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 0; } .sr-feature__desc { font-size: 13px; line-height: 2; color: var(--sr-text-mute); margin: 0; } /* ---------- 5. 追加オプション ---------- */ .sr-options__block-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--sr-text-inv); } .sr-options__table-wrap { overflow-x: auto; border-radius: var(--sr-radius); background: var(--sr-surface); color: var(--sr-text); } .sr-options__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; } .sr-options__table thead { background: var(--sr-accent); } .sr-options__table th, .sr-options__table td { padding: 10px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sr-border-dark); line-height: 1.6; } .sr-options__table thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--sr-text); } .sr-options__table tbody tr { transition: background 0.15s ease; } .sr-options__table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.025); } .sr-options__table tbody tr.sr-options__table-group { background: #d0dbdc; } .sr-options__table tbody tr:not(.sr-options__table-group):hover { background: rgba(26, 198, 214, 0.08); } .sr-options__table-group th { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--sr-text); padding: 3px 20px; text-align: left; } .sr-options__table tbody th { font-weight: 700; color: var(--sr-text); width: 32%; } .sr-options__table tbody td { font-weight: 500; color: var(--sr-text); } .sr-options__table tbody td:first-of-type { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; width: 18%; white-space: nowrap; color: var(--sr-text); } .sr-options__table tbody td:last-of-type { color: #6b6b6b; font-size: 13px; } .sr-options__table tbody td:last-of-type:empty::before { content: "—"; color: rgba(0, 0, 0, 0.25); } .sr-options__table tbody tr:last-child th, .sr-options__table tbody tr:last-child td { border-bottom: none; } .sr-options__sublists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } .sr-options__sublist { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 24px 28px; } .sr-options__sublist-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sr-border); color: var(--sr-text-inv); } .sr-options__sublist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--sr-text-inv); } .sr-options__sublist-items li { position: relative; padding-left: 16px; } .sr-options__sublist-items li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--sr-accent); } .sr-options__note { margin: 32px 0 0; font-size: 12px; color: var(--sr-text-mute); text-align: center; line-height: 1.9; } /* ---------- 6. 活用例 ---------- */ .sr-cases { background: var(--sr-bg-2); } .sr-cases__slider { display: flex; align-items: center; gap: 16px; } .sr-cases__carousel { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sr-cases__carousel::-webkit-scrollbar { display: none; } .sr-cases__track { display: flex; gap: 24px; } .sr-cases__track > .sr-case { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; } .sr-cases__nav { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--sr-accent); color: #000; border: none; border-radius: 50%; cursor: pointer; transition: background 0.2s, opacity 0.2s, transform 0.2s; } .sr-cases__nav:hover:not(:disabled) { background: #14b0bf; transform: scale(1.05); } .sr-cases__nav:disabled { opacity: 0.3; cursor: not-allowed; } .sr-cases__nav svg { width: 22px; height: 22px; } .sr-cases__dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; } .sr-cases__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: none; padding: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; } .sr-cases__dot:hover { background: rgba(255, 255, 255, 0.5); } .sr-cases__dot.is-active { background: var(--sr-accent); transform: scale(1.3); } .sr-cases__cta { margin-top: 40px; text-align: center; } .sr-case { background: var(--sr-surface); color: var(--sr-text); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .sr-case__media { aspect-ratio: 16 / 10; background-color: #242424; background-image: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); background-size: cover; background-position: center; position: relative; } .sr-case__media::after { content: "PHOTO"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.35); font-size: 12px; letter-spacing: 0.3em; } .sr-case__media[style*="background-image"]::after { content: none; } .sr-case__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .sr-case__tag { display: block; margin: 0; padding: 14px 16px; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; background: var(--sr-accent); color: #000; text-align: center; line-height: 1.4; } .sr-case__title { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0; color: var(--sr-text); } .sr-case__desc { font-size: 13px; line-height: 1.9; color: #555; margin: 0; } /* ---------- 7. 料金詳細 ---------- */ .sr-pricing__table-wrap { overflow-x: auto; border-radius: var(--sr-radius); background: var(--sr-surface); color: var(--sr-text); } .sr-pricing__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; } .sr-pricing__table thead { background: var(--sr-accent); } .sr-pricing__table th, .sr-pricing__table td { padding: 18px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sr-border-dark); line-height: 1.6; } .sr-pricing__table thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--sr-text); } .sr-pricing__table tbody tr { transition: background 0.15s ease; } .sr-pricing__table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.025); } .sr-pricing__table tbody tr:hover { background: rgba(26, 198, 214, 0.08); } .sr-pricing__table tbody th { font-weight: 700; color: var(--sr-text); } .sr-pricing__table tbody td { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sr-text); } .sr-pricing__table tbody tr:last-child th, .sr-pricing__table tbody tr:last-child td { border-bottom: none; } .sr-pricing__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sr-price-card { background: var(--sr-surface); border: 3px solid var(--sr-accent); padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 18px; } .sr-price-card__name { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.4; color: var(--sr-text); } .sr-price-card__capacity { font-size: 12px; color: var(--sr-text-mute); letter-spacing: 0.04em; margin: 0; } .sr-price-card__rates { margin: 4px 0 0; padding: 18px 0; border-top: 1px solid var(--sr-border-dark); border-bottom: 1px solid var(--sr-border-dark); display: flex; flex-direction: column; gap: 12px; } .sr-price-card__rate { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sr-price-card__rate dt { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--sr-text-mute); } .sr-price-card__rate dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sr-text); letter-spacing: 0; } .sr-price-card__unit { font-size: 11px; font-weight: 600; color: var(--sr-text-mute); margin-left: 4px; letter-spacing: 0.04em; } .sr-price-card__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 12px 20px; background: var(--sr-accent); color: var(--sr-text); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border-radius: var(--sr-radius); transition: background 0.2s ease; } .sr-price-card__cta:hover { background: #14b0bf; } .sr-pricing__note { margin: 24px 0 0; font-size: 12px; color: var(--sr-text-mute); text-align: center; } /* ---------- 8. フロアマップ ---------- */ .sr-floormap { background: var(--sr-bg-2); } .sr-floormap__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: center; } .sr-floormap__image { margin: 0; background: var(--sr-surface); border-radius: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .sr-floormap__image img { width: 100%; height: auto; display: block; } .sr-floormap__note { margin: 0; font-size: 12px; color: var(--sr-text-mute); line-height: 1.7; text-align: center; } .sr-floormap__spots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .sr-floormap__spot { display: flex; flex-direction: column; gap: 8px; } .sr-floormap__spot-media { aspect-ratio: 4 / 3; background-color: #242424; background-image: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); background-size: cover; background-position: center; border-radius: 0; position: relative; } .sr-floormap__spot-media::after { content: "PHOTO"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.3); font-size: 11px; letter-spacing: 0.3em; } .sr-floormap__spot-media[style*="background-image"]::after { content: none; } .sr-floormap__spot-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--sr-text-inv); text-align: center; letter-spacing: 0.04em; } /* ---------- 9. FAQ ---------- */ .sr-faq { background: var(--sr-bg-2); } .sr-faq__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .sr-faq__item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); overflow: hidden; } .sr-faq__item summary { padding: 20px 24px; font-size: 15px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sr-faq__item summary::-webkit-details-marker { display: none; } .sr-faq__item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--sr-accent); line-height: 1; transition: transform 0.2s; } .sr-faq__item[open] summary::after { content: "−"; } .sr-faq__answer { padding: 0 24px 24px; font-size: 13px; line-height: 2; color: var(--sr-text-mute); } /* ---------- 最終 CTA ---------- */ .sr-cta { position: relative; background-color: var(--sr-bg); background-size: cover; background-position: center; background-repeat: no-repeat; padding: clamp(120px, 14vw, 180px) 0; overflow: hidden; } .sr-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 100%); z-index: 0; } .sr-cta__inner { position: relative; z-index: 1; text-align: center; } .sr-cta__title { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; margin: 0 0 16px; line-height: 1.4; } .sr-cta__lead { color: var(--sr-text-mute); font-size: 15px; line-height: 2; max-width: 560px; margin: 0 auto 40px; } .sr-cta__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- レスポンシブ ---------- */ .sp-only { display: none; } @media (max-width: 960px) { .sr-section { padding: 72px 0; } .sr-uses__grid { grid-template-columns: repeat(3, 1fr); } .sr-rooms__list { gap: 56px; } .sr-room { grid-template-columns: 1fr; gap: 24px; } .sr-room--reverse .sr-room__media { order: 0; } .sr-options__sublists { grid-template-columns: 1fr; } .sr-cases__track > .sr-case { flex: 0 0 calc((100% - 24px) / 2); } .sr-floormap__layout { grid-template-columns: 1fr; } .sr-floormap__spots { grid-template-columns: repeat(3, 1fr); } .sr-pricing__cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .sr-facilities__grid { grid-template-columns: repeat(3, 1fr); } .sr-features__grid { grid-template-columns: repeat(4, 1fr); } .sr-features__grid > .sr-feature:nth-child(4):nth-last-child(2) { grid-column: span 2; } /* 5枚レイアウト時：タブレット 2列の最終1個を中央へ */ .sr-features__grid > .sr-feature:nth-child(5):nth-last-child(1) { grid-column: 2 / span 2; } } @media (max-width: 640px) { .sp-only { display: inline; } .sr-container { padding-inline: 20px; } .sr-section { padding: 56px 0; } .sr-section__head { margin-bottom: 40px; } .sr-fv { min-height: 480px; padding: 86px 0 56px; } .sr-fv__cta { flex-direction: column; align-items: stretch; } .sr-uses { padding: 40px 0; } .sr-uses__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .sr-uses__item { padding: 14px 8px 10px; } .sr-uses__icon { width: 32px; height: 32px; margin: 0 auto 8px; } .sr-uses__item h3 { font-size: 13px; margin: 0 0 4px; } .sr-uses__item p { font-size: 11px; line-height: 1.6; } .sr-features__grid { grid-template-columns: 1fr; } .sr-features__grid > .sr-feature, .sr-features__grid > .sr-feature:nth-child(4):nth-last-child(2), .sr-features__grid > .sr-feature:nth-child(5):nth-last-child(1) { grid-column: auto; } .sr-feature { min-height: 240px; padding: 28px 24px; } .sr-cases__track > .sr-case { flex: 0 0 calc(100% - 8px); } .sr-facilities__grid { grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 24px; } .sr-facility img { max-width: 72px; } .sr-cases__nav { width: 40px; height: 40px; } .sr-cases__nav svg { width: 18px; height: 18px; } .sr-cases__slider { gap: 8px; } .sr-pricing__table th, .sr-pricing__table td { padding: 14px 12px; font-size: 13px; } .sr-options__block-title { font-size: 17px; } .sr-options__table { min-width: 0; font-size: 12px; } .sr-options__table th, .sr-options__table td { padding: 8px 10px; font-size: 12px; line-height: 1.5; } .sr-options__table tbody td:first-of-type { font-size: 13px; width: auto; } .sr-options__table tbody th { width: 40%; } .sr-options__table-group th { font-size: 10px; letter-spacing: 0.12em; padding: 4px 10px; } .sr-floormap__spots { grid-template-columns: repeat(2, 1fr); } .sr-options__sublist { padding: 20px 22px; } .sr-faq__item summary { padding: 18px 20px; font-size: 14px; } .sr-cta__buttons { flex-direction: column; } }