@charset "UTF-8"; /* ========================================================================== 高石超花火2026 LP デザイントークン（design.md §5）—— 装飾の出どころはすべてここに固定する ========================================================================== */ :root { /* ビューポート高さの“凍結値”。既定は 100vh（全ブラウザ対応）だが、 トップページの ゲートが読み込み時の innerHeight を px で上書きし、 アドレスバー/アプリ内ブラウザのバー開閉（＝高さのみの変化）では更新しない。 これで LINE 等のアプリ内ブラウザでも、バー開閉時にヒーロー等が伸縮・再切り取り されずガタつかない（回転＝幅変化のときだけ再計測）。 */ --vhlock: 100vh; /* カラー：夜空の墨紺をベースに、花火の多色性を金・朱・青白の3色で */ --ink: #121b2c; /* 夜のベース。「真っ黒」でなく花火に照らされた夜の紺（旧#070b14から明度引き上げ） */ --ink-deep: #070b14; /* プリローダーの濃密な暗闇・グラデーションの最深部専用 */ --ink-2: #1a2942; /* 一段明るい紺。背景リズム（濃淡の交互）用。昼へは転ばず夜のまま */ --surface: #1b2740; /* 情報カードの面。背景より一段明るく浮かせる */ --surface-2: #243352; /* 表ヘッダーなど、さらに一段明るい面 */ --washi: #f2ede3; --washi-dim: rgba(242, 237, 227, 0.74); /* 補足情報専用の減光文字（本文には使わない） */ --gold: #e8b44a; --vermilion: #d9432e; --vermilion-deep: #c43a26; /* CTA地色。washi文字とのコントラスト4.5:1確保用の派生シェード */ --kiku: #9fc8e8; /* 「当日のご案内」＝和紙の栞（実務情報を刷り物に反転）。夜空の中に一枚の紙を挟む。 昼夕への明転ではなく“紙の面”＝素材のコントラスト。墨/金/朱のパレット内で完結 */ --paper: #ece2cd; /* 生成りの和紙地（暖色寄りのアイボリー。純白にしない） */ --paper-ink: #292420; /* 墨（やや温かい）。本文・見出し */ --paper-ink-dim: rgba(41, 36, 32, 0.62); /* 補足文字 */ --paper-gold: #7d5a12; /* 箔押し／古金。紙上でも4.5:1を確保するアクセント・リンク */ --paper-line: rgba(41, 36, 32, 0.16); /* 紙上の淡い罫 */ --paper-card: #f6efe1; /* 和紙帯の上に浮かせる設問カード。地(--paper)より一段明るい生成り */ --paper-card-line: rgba(41, 36, 32, 0.1); /* カードの淡い縁取り */ /* 一日の時間経過（design.md §5 2026-07-22改訂）: 昼・夕の時間帯パレット */ --hiru-sky: #bcd4e4; /* 昼の空色（夜からの転換の入口） */ --hiru-haze: #f0ede4; /* 昼の靄・生成りの白（昼パートの地色） */ --sumi: #232b36; /* 墨色（昼パートのテキスト） */ --yuyake: #c0662a; /* 夕焼けの金茶 */ --akane: #8e3120; /* 茜（夕パートの主地色） */ --akane-deep: #571d12; /* 暮れ際の深茜 */ /* 区切りは余白と濃淡で作る（禁止事項: ヘアライン多用）。 下記はスキップボタン下線などインタラクティブ要素の輪郭専用 */ --line-strong: rgba(242, 237, 227, 0.45); /* タイポグラフィ */ --font-mincho: "Shippori Mincho B1", "Zen Old Mincho", "Hiragino Mincho ProN", serif; --font-num: "Zen Old Mincho", "Shippori Mincho B1", serif; /* 大数字は900ウェイト */ --font-kaisei: "Kaisei Tokumin", "Shippori Mincho B1", "Hiragino Mincho ProN", serif; /* ゲートカードの主見出し（800） */ --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 角丸は最小限（丸すぎるUIは祭りの品格を損なう）。この2種で固定し他の値は使わない */ --radius-s: 2px; --radius-m: 4px; } /* -------------------------------------------------------------------------- リセット・ベース -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--ink); /* 夜空：フラット単色で終わらせない微弱なradial */ background-image: radial-gradient( 120% 90% at 50% 0%, #1a2740 0%, var(--ink) 62% ); color: var(--washi); font-family: var(--font-mincho); font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* キーボードフォーカス可視 */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ========================================================================== プリローダー「題字→タグライン→一発の花火→同じ夜が動き出す」 導火線は廃止（2026-07-23レビュー）。文字を読ませるゆっくりした尺(約4.8s+スキップ) 1拍目 0.1-1.2s : 濃密な暗闇に題字(大)が墨の滲みで結像。光暈・火の粉・輪の気配 2拍目 1.4-3.4s : タグラインが点り、読ませる 3拍目 3.4s- : 花火が一発開き、光の減衰と同時に背景透過で夜のヒーローへ ========================================================================== */ /* プリローダーは既定で非表示。初回訪問のみ の同期スクリプトが html.preload-on を「初回ペイント前に」付与して表示する（＝サイトが一瞬見えてから プリローダーになる“ちらつき”を防ぐ）。2回目以降はクラスが付かず即サイト表示 */ .preloader { --stage-w: min(56vw, 720px); /* 題字はビューポート幅の50-60%（モバイル80vw） */ position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: var(--ink-deep); transition: background-color 0.9s ease; } html.preload-on .preloader { display: grid; } html.preload-on { overflow: hidden; /* プリローダー表示中はスクロール禁止（初回ペイント前から効かせる） */ } /* 一発の花火の減衰と同時に、背景が透けて「同じ夜」のヒーローへ */ .preloader.is-open { background-color: transparent; pointer-events: none; } .preloader__stage { transition: opacity 0.45s ease; /* 文字は先に消し、開花の光だけを残して受け渡す */ } .preloader.is-open .preloader__stage { opacity: 0; } @media (max-width: 700px) { .preloader { --stage-w: 80vw; } } .preloader__stage { position: relative; display: grid; justify-items: center; row-gap: clamp(24px, calc(var(--vhlock) * 0.044), 42px); width: var(--stage-w); } /* 光暈（題字の周りの金の気配）は撤去＝「ふわっと黄色く光る」演出をやめる。モーションは維持 */ .preloader__halo { display: none; } @keyframes halo-in { to { opacity: 1; } } /* 火の粉の気配：ゆっくり明滅しながら漂う数粒 */ .preloader__embers { position: absolute; top: 40%; left: 50%; width: 2px; height: 2px; border-radius: 50%; /* 火の粉は白（金は使わない）。ふわっと浮遊するモーションは維持 */ box-shadow: -190px -120px 0 1px rgba(242, 237, 227, 0.5), 170px -80px 0 0 rgba(242, 237, 227, 0.36), -120px 90px 0 0 rgba(242, 237, 227, 0.32), 220px 60px 0 1px rgba(242, 237, 227, 0.42), 40px -170px 0 0 rgba(255, 255, 255, 0.38), -260px 10px 0 0 rgba(242, 237, 227, 0.28); opacity: 0; animation: ember-float 5.2s ease-in-out 0.8s infinite alternate; } @keyframes ember-float { 0% { opacity: 0.15; transform: translateY(4px); } 100% { opacity: 0.6; transform: translateY(-10px); } } /* 題字：墨の滲みでゆっくり結像（読ませる尺） */ .preloader__logo { position: relative; width: 100%; } /* 花火の輪（元制作者の意匠）：題字の背後でゆっくり開き続ける */ .preloader__ring { position: absolute; top: 50%; left: 50%; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; border: 1px solid rgba(242, 237, 227, 0.8); border-radius: 50%; opacity: 0; transform: scale(0.15); pointer-events: none; animation: fireworks-ring 2.8s ease-out 1.2s infinite; } .preloader__logo img { width: 100%; font-family: var(--font-mincho); font-weight: 900; font-size: clamp(2rem, 8vw, 3.2rem); color: var(--washi); animation: logo-bleed 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } @keyframes logo-bleed { from { opacity: 0; filter: blur(18px); transform: scale(1.04); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: scale(1); } } /* タグライン：題字が結像してから静かに点り、開花まで約2秒読ませる */ .preloader__tagline { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 3vw, 1.6rem); letter-spacing: 0.18em; color: var(--washi); white-space: nowrap; opacity: 0; animation: tagline-in 0.8s ease 1.4s both; } @keyframes tagline-in { to { opacity: 1; } } /* 3拍目：暗闇の中で花火が一発開く（白の芯→白の縁。金は使わない）。全画面の白閃光は使わない */ /* 白い丸の閃光（花火の開花）は撤去。ヒーローへのクロスフェード時に25,000発の 上へ白丸がほわっと残るのを嫌ったため、プリローダー側から完全に消す。 花火の意匠は題字背後の輪（.preloader__ring）で担う。 */ .preloader__shell { display: none; } @keyframes shell-open { 0% { transform: translate(-50%, -50%) scale(0.15); opacity: 0; } 14% { opacity: 0.95; } 55% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.32); opacity: 0; } } /* 開花後に夜空全体がふわっと暖色に光る演出は撤去（「ふわっと黄色く光る」をやめる）。 花火が開くモーション（.preloader__shell）は維持する */ .preloader__shell-glow { display: none; } @keyframes glow-fade { 0% { opacity: 0; } 20% { opacity: 0.85; } 100% { opacity: 0; } } /* ========================================================================== ヘッダー（ヒーローに重ねる帯なし・透過） ========================================================================== */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; /* ロゴ（高さ55px）とナビ（42px）を上端で揃えると中心が6.6pxずれるため中央で揃える */ align-items: center; justify-content: space-between; padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 48px); } .site-header__logo img { width: clamp(150px, 22vw, 230px); height: auto; } .site-header__date { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.8rem, 1.4vw, 0.95rem); letter-spacing: 0.14em; line-height: 1; padding-top: 0.5em; color: var(--washi); } .site-header__date span { margin-left: 0.7em; font-size: 0.72em; letter-spacing: 0.3em; color: var(--gold); } /* ========================================================================== 背景レイヤー：動画はヒーロー内だけに収める（固定背景ステージは廃止）。 以降のセクションは夜の紺の面（body背景と同色）。固定背景がないので 旧z-index回避策（main/footerのz-index:1・負z-index対策）は不要になった。 ========================================================================== */ main { position: relative; } /* 各セクションは既定で夜の紺の面（自前の背景を持つ節はそれで上書き） */ main > section, main > .photo-band { background-color: var(--ink); } /* ========================================================================== §1 HERO ========================================================================== */ .hero { position: relative; min-height: calc(var(--vhlock) * 1); min-height: calc(var(--vhlock) * 1); display: flex; flex-direction: column; /* 上=主情報 / 下=4バナー帯（動画の上に浮かぶ） */ isolation: isolate; /* 背景レイヤーの重なり事故防止 */ overflow: hidden; /* 動画が出せない環境でも必ずposter相当が見えるフォールバック */ background: var(--ink-deep) url("/assets/movie/hero-yume-poster.webp") center / cover no-repeat; } /* 動画はヒーロー内の背面レイヤー（固定ではない＝スクロールで流れ去る） */ .hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; /* スマホでアドレスバーが隠れて表示領域が伸びても、動画は常に「最大時の高さ」を覆う。 これがないと height:100% が伸びて cover が切り直され＝画面が拡大するように見えてガタつく */ min-height: var(--vhlock); object-fit: cover; /* PCでは画角をやや上へ（下側を多めに切る） */ object-position: center 62%; background: var(--ink-deep) url("/assets/movie/hero-yume-poster.webp") center / cover no-repeat; } /* 暗幕：全面は薄く、文字域（左・下）だけ局所的に濃く。大玉の見せ場を殺さない */ .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(18, 27, 44, 0.42) 0%, rgba(18, 27, 44, 0.06) 26%, rgba(18, 27, 44, 0.3) 58%, rgba(18, 27, 44, 0.5) 80%, rgba(18, 27, 44, 0.42) 100% ), radial-gradient( 58% 52% at 24% 60%, rgba(7, 11, 20, 0.58) 0%, transparent 70% ); } .hero__inner { position: relative; z-index: 2; /* 動画(0)・暗幕(1)より前面 */ width: 100%; flex: 1 1 auto; /* 主情報が上部を占め、4バナー帯を下端へ押し出す */ display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); align-items: end; padding: 0 clamp(18px, 4vw, 48px) clamp(18px, calc(var(--vhlock) * 0.03), 34px); } /* ---- 主情報（左） ---- */ .hero__title { margin-top: clamp(14px, calc(var(--vhlock) * 0.024), 26px); font-family: var(--font-mincho); line-height: 1; } .hero__title-label { display: block; font-size: clamp(1.9rem, 5.4vw, 3.3rem); /* 従来の倍以上。25,000発と一体の見出しに */ font-weight: 800; letter-spacing: 0.22em; color: var(--gold); } .hero__title-num { display: block; margin-top: 0.08em; margin-left: -0.04em; /* 数字の視覚的な左端を揃える */ font-family: var(--font-num); font-weight: 900; font-size: clamp(4.4rem, 16.5vw, 10.5rem); letter-spacing: -0.015em; /* トラッキング詰め：数字自体をビジュアルに */ color: var(--washi); text-shadow: 0 0 60px rgba(232, 180, 74, 0.22); /* 金の微弱グロー */ } .hero__title-unit { margin-left: 0.06em; font-size: 0.3em; font-weight: 800; font-family: var(--font-mincho); letter-spacing: 0.06em; color: var(--gold); /* 差し色は数字の単位に */ } /* ---- 日時ブロック：半券様式。日付を見出し級に、詳細は破線(ミシン目)の右に ---- */ .hero__date { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px); margin-top: clamp(22px, calc(var(--vhlock) * 0.034), 34px); } .hero__date-main { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.65rem, 5vw, 2.9rem); line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .hero__date-dow { margin-left: 0.35em; font-family: var(--font-mincho); font-weight: 800; font-size: 0.42em; letter-spacing: 0.1em; vertical-align: 0.16em; color: var(--washi-dim); } .hero__date-detail { display: grid; gap: 0.4em; padding-left: clamp(16px, 2.4vw, 26px); border-left: 1px dashed rgba(242, 237, 227, 0.42); /* 半券のミシン目 */ } .hero__date-times { display: flex; gap: 1.4em; } .hero__date-time { font-family: var(--font-num); font-weight: 900; font-size: clamp(0.95rem, 2vw, 1.1rem); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .hero__date-time small { margin-right: 0.5em; font-family: var(--font-mincho); font-weight: 500; font-size: 0.72em; letter-spacing: 0.14em; color: var(--washi-dim); } .hero__date-time small:last-child { margin-right: 0; margin-left: 0.4em; } .hero__date-place { font-size: clamp(0.78rem, 1.7vw, 0.85rem); font-weight: 500; letter-spacing: 0.14em; } @media (max-width: 480px) { .hero__date { flex-direction: column; align-items: flex-start; gap: 12px; } .hero__date-detail { padding-left: 0; padding-top: 12px; border-left: none; border-top: 1px dashed rgba(242, 237, 227, 0.42); } } /* ---- CTA：唯一のコンバージョン導線。1つに絞る ---- */ .hero__cta-area { margin-top: clamp(30px, calc(var(--vhlock) * 0.05), 48px); /* ボタンが動画に埋もれないよう余白を厚く */ } /* 区画種別の小併記（767px以下でボタンラベルを短縮した時だけ表示） */ .hero__cta-note { display: none; } .hero__cta { display: inline-block; padding: 1.05em 2.1em; background: var(--vermilion-deep); border: 1px solid rgba(242, 237, 227, 0.28); border-radius: var(--radius-m); color: var(--washi); font-weight: 700; font-size: clamp(0.9rem, 2vw, 1rem); letter-spacing: 0.08em; line-height: 1.4; white-space: nowrap; /* 動詞の途中で改行させない */ text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease; } @media (max-width: 767px) { .hero__cta-note { display: block; margin-bottom: 10px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; color: var(--washi-dim); } /* ラベルは「有料観覧席を予約する」に短縮 */ .hero__cta-kubun { display: none; } } .hero__cta:hover { background: var(--vermilion); border-color: rgba(242, 237, 227, 0.5); } /* ---- ヒーロー入場演出（1回だけ / JS無効時は即・完成状態） ---- */ .hero__main > * { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } body.is-ready .hero__main > * { opacity: 1; transform: none; } body.is-ready .hero__main > :nth-child(2) { transition-delay: 0.08s; } body.is-ready .hero__main > :nth-child(3) { transition-delay: 0.16s; } body.is-ready .hero__main > :nth-child(4) { transition-delay: 0.24s; } /* JSが動かない環境の保険：演出を捨てて完成状態で見せる */ html:not(.js-ready) .hero__main > * { opacity: 1 !important; transform: none !important; } /* ========================================================================== §2 NEWS帯：情報告知の帯。CTAと違い静かに・密に（役割で変調） ========================================================================== */ .news-bar { background: var(--surface); } .news-bar__inner { width: min(92vw, 1080px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em 2em; padding: clamp(16px, calc(var(--vhlock) * 0.026), 22px) 0; } .news-bar__title { font-family: var(--font-mincho); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.34em; color: var(--gold); white-space: nowrap; } .news-bar__item { font-size: clamp(0.8rem, 1.7vw, 0.88rem); letter-spacing: 0.06em; line-height: 1.8; } /* ========================================================================== §3 INTRO：育てていく花火（物語の拍。導入は広く取る） ========================================================================== */ .intro { padding: clamp(88px, calc(var(--vhlock) * 0.14), 150px) 0 clamp(72px, calc(var(--vhlock) * 0.11), 120px); } .intro__inner { width: min(92vw, 1080px); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(34px, calc(var(--vhlock) * 0.06), 56px); } /* 追加の見出し（横組み）。縦書きの上に、この節の主題として置く */ .intro__head { margin: 0; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.65rem, 4.6vw, 2.7rem); letter-spacing: 0.06em; line-height: 1.5; color: #fff; } /* 縦書き見出し（理念の情感）。墨紺の余白の中に立てる */ .intro__title { writing-mode: vertical-rl; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.45rem, 4vw, 2.05rem); letter-spacing: 0.22em; line-height: 2; justify-self: start; margin: 0; } .intro__body { display: grid; gap: clamp(26px, calc(var(--vhlock) * 0.044), 40px); } .intro__copy { max-width: 34em; font-size: clamp(0.9rem, 1.9vw, 0.98rem); line-height: 2.2; } .intro__photo img { width: min(100%, 560px); border-radius: var(--radius-m); } /* ---- 55%進捗メーター：入視時に1回だけ伸びる ---- */ .intro__meter { max-width: 720px; } /* パーセント表示の頭上余白（バーの先端に乗るため） */ .intro__meter-gauge { padding-top: clamp(3rem, 7vw, 3.8rem); } .intro__meter-track { position: relative; height: 10px; background: rgba(242, 237, 227, 0.12); border-radius: var(--radius-s); } .intro__meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; /* 入視(.is-in)で55%へ。ラベルが先端に乗るため transform でなく width を動かす */ background: linear-gradient(90deg, rgba(232, 180, 74, 0.45), var(--gold)); border-radius: var(--radius-s); box-shadow: 0 0 16px rgba(232, 180, 74, 0.35); /* 火薬の金の微弱グロー */ transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; } [data-reveal].is-in .intro__meter-fill, html:not(.js-ready) .intro__meter-fill { width: 55%; } /* 55% の数字はバー先端の頭上に。バーが伸び切ってから点る */ .intro__meter-percent { position: absolute; right: 0; bottom: calc(100% + 12px); transform: translateX(50%); font-family: var(--font-num); font-weight: 900; font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1; letter-spacing: 0.01em; color: var(--gold); opacity: 0; transition: opacity 0.5s ease 1.35s; } .intro__meter-percent small { margin-left: 0.08em; font-size: 0.5em; font-weight: 900; } [data-reveal].is-in .intro__meter-percent, html:not(.js-ready) .intro__meter-percent { opacity: 1; } .intro__meter-scale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.9em; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--washi-dim); } .intro__meter-scale strong { margin: 0 0.3em; font-family: var(--font-num); font-weight: 900; font-size: 1.25em; letter-spacing: 0.02em; color: var(--washi); font-variant-numeric: tabular-nums; } .intro__meter-note { margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 28px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.92rem, 2vw, 1.05rem); letter-spacing: 0.12em; } /* ---- 年次の打ち上げ数を伸ばす棒グラフ（2026＝実線・朱 / 2027以降＝予定・斜線 / 2032＝目標45,000・金）。 入視で下から伸びる＝「育てていく」を可視化 ---- */ .grow { margin-top: clamp(24px, calc(var(--vhlock) * 0.04), 40px); } .grow__bars { position: relative; display: flex; align-items: flex-end; gap: clamp(4px, 1.4vw, 14px); padding-top: clamp(26px, calc(var(--vhlock) * 0.04), 40px); /* 棒の上に載る数値のための余白 */ } .grow__bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* 棒の描画領域＝固定高さ。棒の高さはこの領域に対する％＝比率が正確、下面も揃う */ .grow__plot { width: 100%; height: clamp(190px, calc(var(--vhlock) * 0.3), 280px); display: flex; align-items: flex-end; justify-content: center; } .grow__col { position: relative; width: min(100%, 48px); height: 0; border-radius: 3px 3px 0 0; background: rgba(242, 237, 227, 0.2); transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .grow.is-in .grow__col { height: var(--h); } html:not(.js-ready) .grow__col { height: var(--h); transition: none; } /* 左から順に「グッと」立ち上がる（年を追って上がっていく） */ .grow__bar:nth-child(1) .grow__col { transition-delay: 0.05s; } .grow__bar:nth-child(2) .grow__col { transition-delay: 0.14s; } .grow__bar:nth-child(3) .grow__col { transition-delay: 0.23s; } .grow__bar:nth-child(4) .grow__col { transition-delay: 0.32s; } .grow__bar:nth-child(5) .grow__col { transition-delay: 0.41s; } .grow__bar:nth-child(6) .grow__col { transition-delay: 0.50s; } .grow__bar:nth-child(7) .grow__col { transition-delay: 0.59s; } .grow__bar--now .grow__col { background: var(--vermilion); } .grow__bar--goal .grow__col { background: var(--gold); } .grow__bar--plan .grow__col { background: repeating-linear-gradient(45deg, rgba(242, 237, 227, 0.26) 0 5px, rgba(242, 237, 227, 0.11) 5px 10px); } .grow__num { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; white-space: nowrap; font-family: var(--font-num); font-weight: 900; font-size: clamp(0.68rem, 1.6vw, 0.98rem); color: var(--washi-dim); } .grow__num small { font-family: var(--font-mincho); font-size: 0.68em; margin-left: 0.1em; } .grow__bar--now .grow__num { color: #fff; } .grow__bar--goal .grow__num { color: var(--gold); font-size: clamp(0.8rem, 1.9vw, 1.15rem); } .grow__yr { margin-top: clamp(8px, calc(var(--vhlock) * 0.014), 14px); min-height: 2.9em; /* 今回/目標の2行ラベルと高さを揃え、棒の下面を揃える（ガタつき防止） */ font-family: var(--font-gothic); font-weight: 700; font-size: clamp(0.72rem, 1.5vw, 0.86rem); color: var(--washi); line-height: 1.3; } .grow__yr small { display: block; margin-top: 0.2em; font-size: 0.82em; font-weight: 700; color: var(--washi-dim); } .grow__bar--now .grow__yr small { color: var(--vermilion); } .grow__bar--goal .grow__yr small { color: var(--gold); } .grow__note { margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 30px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.92rem, 2vw, 1.05rem); letter-spacing: 0.08em; line-height: 1.9; color: var(--washi); } .grow__note b { color: var(--gold); font-weight: 900; } .grow__plannote { display: block; margin-top: 0.4em; font-family: var(--font-gothic); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--washi-dim); } @media (prefers-reduced-motion: reduce) { .grow__col { transition: none; height: var(--h); } } /* ---- デスクトップ：縦書き見出しを右に立てる非対称2カラム ---- */ @media (min-width: 800px) { .intro__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 8vw, 110px); } /* 左：見出し→継承→本文→グラフ（縦） ／ 右：縦書きが全高を貫く */ .intro__head { grid-column: 1; grid-row: 1; } .heritage { grid-column: 1; grid-row: 2; } /* 縦書き見出しは「横組み見出し＋継承」の脇にだけ立てる。 本文とグラフの横まで伸ばすと、その2つが器の78%（実測839/1080px）に痩せて 右に240pxの空白が残り、ブロック全体が左に寄って見えていた。 */ .intro__title { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0.2em; } /* 本文・グラフは器の全幅を使う */ .intro__body { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } /* 説明文と写真を左右に。写真が全幅をまたいで下に落ちると、 器の右半分が空いて「左に寄っている」ように見える */ .intro__copy { grid-column: 1; max-width: none; } .intro__photo { grid-column: 2; margin: 0; } .intro__photo img { width: 100%; height: auto; } .intro__meter, .grow { grid-column: 1 / -1; grid-row: 4; } } /* ========================================================================== 一日の物語：スクロール=時間経過（夜→昼→夕→夜） 背景転換は縦グラデーション（各セクションの開始色=直前の終了色） ========================================================================== */ .story__inner { width: min(92vw, 1080px); margin: 0 auto; } /* ---- 時間帯見出し（漢字一字 + 筆線 + 見出し + 補助文） ---- */ .time-head { display: flex; align-items: center; gap: clamp(18px, 3.4vw, 36px); } .time-head__kanji { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(4rem, 11vw, 6.2rem); line-height: 1; } /* 筆の掠れ線（様式のある線。design.md §5「線の様式」） */ .time-head__body::before { content: ""; display: block; width: clamp(90px, 14vw, 150px); height: 8px; margin-bottom: 0.75em; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat left center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat left center / contain; } .time-head__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.3rem, 3.2vw, 1.85rem); letter-spacing: 0.12em; line-height: 1.7; } .time-head__note { margin-top: 0.6em; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.22em; } /* ---- 昼：明るい空色〜生成りへ転換。文字は墨色に反転 ---- */ .story--day { background: linear-gradient( 180deg, var(--ink) 0%, #31506c 9%, var(--hiru-sky) 22%, #dfe7e7 36%, var(--hiru-haze) 50% ); color: var(--sumi); padding: clamp(220px, calc(var(--vhlock) * 0.32), 380px) 0 clamp(72px, calc(var(--vhlock) * 0.1), 110px); } .story--day .time-head__kanji { color: var(--sumi); } /* 昼の筆線は朱（墨の紙面に朱の一筆） */ .story--day .time-head__body::before { background: var(--vermilion-deep); } .story--day .time-head__note { color: rgba(35, 43, 54, 0.66); } .story__lead { max-width: 34em; margin-top: clamp(26px, calc(var(--vhlock) * 0.044), 40px); font-size: clamp(0.9rem, 1.9vw, 0.98rem); line-height: 2.2; } .story__block { display: grid; gap: clamp(20px, 3.4vw, 40px); margin-top: clamp(40px, calc(var(--vhlock) * 0.066), 64px); align-items: center; } @media (min-width: 760px) { .story__block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* 交互に写真の左右を入れ替えて単調にしない */ .story__block--bbq .story__block-text { order: 2; } } .story__block-title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: 0.12em; } .story__points { list-style: none; display: grid; gap: 0.85em; margin-top: 1.4em; } .story__points li { display: flex; align-items: baseline; gap: 0.8em; font-size: clamp(0.86rem, 1.8vw, 0.93rem); line-height: 1.9; } .story__points li span { flex: 0 0 auto; font-family: var(--font-mincho); font-weight: 800; color: var(--vermilion-deep); } .story__photo img { width: 100%; border-radius: var(--radius-m); } .story__catch { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.3rem); letter-spacing: 0.1em; line-height: 2.1; } /* ---- 全幅写真帯（文字なし・実写のみ） ---- */ .photo-band { margin: 0; } .photo-band img { display: block; width: 100%; height: clamp(260px, calc(var(--vhlock) * 0.46), 480px); object-fit: cover; } /* ---- 夕：生成り→茜〜金→暮れ際→夜へ ---- */ .story--dusk { background: linear-gradient( 180deg, var(--hiru-haze) 0%, #e5c795 12%, var(--yuyake) 30%, var(--akane) 56%, var(--akane-deep) 80%, var(--ink) 100% ); color: var(--washi); padding: clamp(200px, calc(var(--vhlock) * 0.3), 360px) 0 clamp(160px, calc(var(--vhlock) * 0.24), 300px); } .story--dusk .time-head__kanji { color: var(--washi); } .story--dusk .time-head__note { color: var(--washi-dim); } .story__copy { max-width: 32em; font-size: clamp(0.9rem, 1.9vw, 0.98rem); line-height: 2.2; margin-bottom: clamp(20px, calc(var(--vhlock) * 0.034), 30px); } .story__block--stalls .story__photo--wide img { border-radius: var(--radius-m); } /* ---- 夜：墨紺へ回帰。18:09 と 25,000発の見せ場 ---- */ .story--night { padding: clamp(88px, calc(var(--vhlock) * 0.13), 150px) 0 0; } .story--night .time-head__kanji { color: var(--gold); } .story--night .time-head__note { color: var(--washi-dim); } /* 数字の見せ場：周囲の余白を倍増して孤立させる（design.md §5 メリハリ） */ .story__night-num { text-align: center; padding: clamp(110px, calc(var(--vhlock) * 0.18), 220px) 24px clamp(110px, calc(var(--vhlock) * 0.18), 200px); line-height: 1; } .story__night-label { display: block; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.9rem, 2.2vw, 1.2rem); letter-spacing: 0.34em; color: var(--gold); } .story__night-count { display: block; margin-top: 0.25em; font-family: var(--font-num); font-weight: 900; font-size: clamp(4rem, 14vw, 8.5rem); letter-spacing: -0.015em; color: var(--washi); text-shadow: 0 0 70px rgba(232, 180, 74, 0.22); } .story__night-count small { margin-left: 0.08em; font-family: var(--font-mincho); font-weight: 800; font-size: 0.28em; letter-spacing: 0.06em; color: var(--gold); } /* ========================================================================== §導入（1カラム・センター）＋特徴（2カラム交互）＋全幅写真帯。 書体はサイト統一の明朝。背景は夜のまま濃淡（--ink / --ink-2）で動かす。 ========================================================================== */ /* ---- 導入：規模を明朝の見出しで。25,000発は本文中の強調に降ろす ---- */ /* 導入：花火写真を背景（パララックス維持）に、大見出し＋説明文を重ねる。写真の下に規模比較・三つの楽しみ方 */ .lead { position: relative; overflow: hidden; background: var(--ink); } .lead__media { position: relative; width: 100%; min-height: clamp(500px, calc(var(--vhlock) * 0.9), 840px); /* 見出し＋説明文が乗る高さ */ display: flex; align-items: center; overflow: hidden; } .lead__parallax { position: absolute; inset: -14% 0; /* 上下に伸ばしてパララックスでも端が出ない */ z-index: 0; will-change: transform; } .lead__parallax img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } .lead__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 11, 20, 0.5) 0%, rgba(7, 11, 20, 0.18) 32%, rgba(7, 11, 20, 0.58) 100%), radial-gradient(120% 78% at 50% 58%, rgba(7, 11, 20, 0.52), transparent 72%); } .lead__overlay { position: relative; z-index: 2; width: min(92%, 900px); margin: 0 auto; text-align: center; padding: clamp(40px, calc(var(--vhlock) * 0.08), 96px) 0; } .lead__title { margin: 0; line-height: 1.28; color: #fff; font-family: var(--font-mincho); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72); } .lead__big { display: block; font-weight: 800; color: #fff; font-size: clamp(2.5rem, 6.8vw, 4.7rem); letter-spacing: 0.02em; white-space: nowrap; } .lead__sub { display: block; font-weight: 700; color: #fff; font-size: clamp(1.4rem, 3.6vw, 2.5rem); letter-spacing: 0.02em; white-space: nowrap; } .lead__desc { margin: clamp(20px, calc(var(--vhlock) * 0.036), 36px) auto 0; max-width: 30em; font-family: var(--font-mincho); font-weight: 600; font-size: clamp(0.98rem, 2.1vw, 1.24rem); line-height: 2; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82); } /* 25,000発＝白くふわっと光る（元サイト cho-hanabi.com の about-heading-glow を再現） */ .lead__num { font-weight: 900; font-size: 1.35em; color: #fff; animation: lead-num-glow 2.4s ease-in-out infinite; } @keyframes lead-num-glow { 0%, 100% { text-shadow: 0 0 0 hsla(0, 0%, 100%, 0), 0 2px 10px rgba(0, 0, 0, 0.82); } 45%, 55% { text-shadow: 0 0 8px hsla(0, 0%, 100%, 0.95), 0 0 18px hsla(0, 0%, 100%, 0.75), 0 0 32px hsla(0, 0%, 100%, 0.5), 0 2px 10px rgba(0, 0, 0, 0.82); } } @media (prefers-reduced-motion: reduce) { .lead__num { animation: none; text-shadow: 0 0 16px rgba(255, 255, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.82); } } /* 写真の下：三つの楽しみ方（導入セクションの締め） */ .lead__ways { background: var(--ink); margin: 0; padding: clamp(28px, calc(var(--vhlock) * 0.05), 60px) clamp(20px, 5vw, 40px) clamp(44px, calc(var(--vhlock) * 0.08), 96px); text-align: center; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.1rem, 2.9vw, 1.7rem); letter-spacing: 0.04em; line-height: 1.7; color: var(--washi); } .lead__ways-em { color: #fff; font-weight: 800; } .lead__ways-br { display: none; } @media (max-width: 560px) { .lead__ways-br { display: inline; } } /* 特徴①〜⑤（ジグザグ）の入口の見出し */ .feat-intro { background: var(--ink-2); padding: clamp(52px, calc(var(--vhlock) * 0.1), 120px) clamp(16px, 4vw, 48px) 0; } .feat-intro__inner { width: min(94vw, 1080px); margin: 0 auto; } .feat-intro__title { margin: 0; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 2.8rem); letter-spacing: 0.06em; line-height: 1.35; color: #fff; } /* 見出し左端の花火イラスト（原サイトの花火マーク）＝朱の festive アクセント */ .feat-intro__mark { flex: none; width: clamp(1.5rem, 3.8vw, 2.4rem); height: clamp(1.5rem, 3.8vw, 2.4rem); background: var(--vermilion); -webkit-mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; } .feat-intro__text { display: inline-block; } /* スクロールで見え込んだ時、太い線画が左からすっと引かれる（意識させる） */ .feat-intro__underline { display: block; width: clamp(200px, 42vw, 460px); height: clamp(6px, 0.9vw, 10px); margin: clamp(16px, calc(var(--vhlock) * 0.024), 26px) 0 0; background: var(--vermilion); transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .feat-intro.is-in .feat-intro__underline { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .feat-intro__underline { transition: none; transform: scaleX(1); } } /* ---- 特徴①〜⑤：2カラム左右交互。テキスト側に「ラベル＋大きな見出し＋本文」をドンと。 見出しは列幅で迫力を出す（画面幅いっぱいの巨大見出しは廃止）。一段明るい紺の面 ---- */ .feat2 { background: var(--ink-2); overflow: hidden; padding: clamp(20px, calc(var(--vhlock) * 0.04), 40px) clamp(16px, 4vw, 48px) clamp(48px, calc(var(--vhlock) * 0.09), 108px); } .feat2__item { width: min(94vw, 1080px); margin: 0 auto; padding: clamp(30px, calc(var(--vhlock) * 0.05), 60px) 0; } /* 対象の席を色違いのチップで個別表示（見出しの上）。本文を読む前に「どの席向けか」が一目で分かる */ .feat2__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(12px, calc(var(--vhlock) * 0.018), 18px); } .feat2__chip { display: inline-block; padding: 0.34em 1em; font-size: clamp(0.74rem, 1.7vw, 0.86rem); font-weight: 800; letter-spacing: 0.05em; border-radius: 999px; /* 横丸 */ border: 1px solid transparent; } /* 特別観覧席＝金／有料観覧席＝青白。2色で席の違いが一目で分かる */ .feat2__chip--special { color: #2e1c08; background: var(--gold); border-color: var(--gold); } .feat2__chip--paid { color: #0b1522; background: #8fb9df; border-color: #8fb9df; } .feat2__row { width: 100%; margin: 0 auto; display: grid; gap: clamp(22px, 4vw, 52px); align-items: center; } .feat2__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); } /* ①＝2枚（主＝上・従＝下）。横長素材なので 2:1 で並べる */ .feat2__photo--stack { display: grid; gap: clamp(10px, 1.6vw, 16px); } .feat2__photo--stack img { aspect-ratio: 2 / 1; } /* ③＝区画レイアウトの図面。写真ではないので切り抜かず全体を見せる（明るい面に載せる） */ .feat2__photo--figure { background: #f6f3ec; border-radius: var(--radius-m); padding: clamp(14px, 2.4vw, 26px); } .feat2__photo--figure img { aspect-ratio: auto; object-fit: contain; max-height: calc(var(--vhlock) * 0.56); border-radius: 0; } /* ③注記：本文より小さいが読める大きさ */ .feat2__note { margin: 0.7em 0 0; font-size: clamp(0.74rem, 1.5vw, 0.82rem); line-height: 1.7; color: var(--washi-dim); } /* 見出し＝テキスト側にドンと。列幅で迫力を出す（明朝・白） */ .feat2__head { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(2rem, 5.6vw, 3.5rem); letter-spacing: 0.03em; line-height: 1.18; color: #fff; } .feat2__lead { margin-top: clamp(10px, calc(var(--vhlock) * 0.018), 16px); font-weight: 700; font-size: clamp(1.02rem, 2.4vw, 1.28rem); line-height: 1.7; color: var(--washi); } .feat2__desc { margin-top: clamp(10px, calc(var(--vhlock) * 0.016), 14px); font-size: clamp(0.9rem, 1.9vw, 0.98rem); line-height: 2.1; color: var(--washi); } /* ④の補足（無料エリアにも屋台）＝本文より小さく、ただし読める */ .feat2__subnote { margin-top: clamp(8px, calc(var(--vhlock) * 0.014), 12px); font-size: clamp(0.78rem, 1.6vw, 0.86rem); line-height: 1.7; color: var(--washi-dim); } @media (min-width: 760px) { .feat2__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } /* 交互：奇数項目は写真を右／テキストを左へ入れ替える */ .feat2__item--rev .feat2__text { order: 1; } .feat2__item--rev .feat2__media { order: 2; } } /* スマホ（1カラム）：まず文字（チップ＋見出し＋本文）→次に画像の順に読ませる */ @media (max-width: 759px) { .feat2__text { order: 1; } .feat2__media { order: 2; } } /* ---- 全幅の写真帯（背景リズムの区切り。夜のトーンのまま＝花火の実写） ---- */ /* 帯はパララックス。器で切り取り、中の画像を上下に余らせて動かす。 余らせないと、動かした端に隙間が出る。 */ .band { margin: 0; position: relative; overflow: hidden; height: clamp(200px, calc(var(--vhlock) * 0.34), 400px); } .band img { display: block; position: absolute; left: 0; /* 必要な余白 = (画面高/2 + 帯高/2) × 係数。帯高は画面高の0.34なので 余白率 ≒ 1.97 × 係数。係数0.16なら片側31.5%。余裕を見て40%取る。 */ top: -40%; width: 100%; height: 180%; object-fit: cover; object-position: center 42%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .band img { top: 0; height: 100%; transform: none !important; } } /* ========================================================================== §規模の比較グラフ（データビジュアライゼーション）。紺の面に 白・金・朱のみ（多色グラデ全廃）。 花火が開く放射状バースト＝左は小さく短い/右は大きく多い。半径比 約3.2倍＝面積比 約10倍。 ========================================================================== */ .scale { background: var(--ink); overflow: hidden; padding: clamp(28px, calc(var(--vhlock) * 0.05), 58px) clamp(20px, 5vw, 48px) clamp(30px, calc(var(--vhlock) * 0.055), 62px); /* 余白を詰める */ } .scale__inner { width: min(94vw, 960px); margin: 0 auto; text-align: center; } .scale__title { font-weight: 800; font-size: clamp(1.35rem, 4.4vw, 2.5rem); letter-spacing: 0.04em; line-height: 1.5; color: var(--washi); } .scale__x { color: var(--vermilion); font-size: 1.4em; padding: 0 0.06em; } /* 「約10倍」を朱で強調 */ .scale__charts { margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 38px); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(24px, 7vw, 80px); } .scale__viz { display: flex; align-items: center; justify-content: center; min-height: clamp(178px, 45vw, 280px); /* 大バーストの直径ぶんを確保し、小バーストは中央に */ } /* 花火バースト（SVG）。半径比を保って両方を拡縮＝規模差が一目で分かる */ .scale__fw { height: auto; display: block; transform-origin: center; } .scale__fw--small { width: clamp(48px, 12vw, 76px); } .scale__fw--big { width: clamp(182px, 46vw, 288px); } /* 入視でふわっと開く（1回・控えめ） */ .scale__viz .scale__fw { transform: scale(0.72); opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; } .scale__inner.is-in .scale__viz .scale__fw { transform: scale(1); opacity: 1; } .scale__cap { margin-top: clamp(12px, calc(var(--vhlock) * 0.024), 20px); } .scale__num { display: block; font-weight: 800; font-size: clamp(1rem, 2.8vw, 1.5rem); color: var(--washi); } .scale__num--hl { color: var(--gold); font-size: clamp(1.3rem, 4vw, 2rem); } /* 25,000発を金で */ .scale__name { display: block; margin-top: 0.3em; font-size: clamp(0.78rem, 1.9vw, 0.95rem); color: var(--washi-dim); } @media (prefers-reduced-motion: reduce) { .scale__viz .scale__fw { transition: none; transform: scale(1); opacity: 1; } } /* ========================================================================== §打ち上げ会場マップ（独立セクション）＋ライトボックス ========================================================================== */ .venue { background: var(--ink); padding: clamp(56px, calc(var(--vhlock) * 0.11), 120px) clamp(20px, 5vw, 48px) clamp(56px, calc(var(--vhlock) * 0.11), 120px); } .venue__inner { width: min(94vw, 1040px); margin: 0 auto; } .vmap { margin-top: clamp(24px, calc(var(--vhlock) * 0.045), 44px); } /* 白い図面は紺のマット（余白）＋影で載せる。金の額縁・枠線は使わない（実用情報エリア） */ .vmap__thumb { position: relative; display: block; width: 100%; padding: clamp(10px, 1.8vw, 20px); border: none; border-radius: 0; overflow: hidden; background: var(--ink); box-shadow: 0 18px 44px rgba(7, 11, 20, 0.4); cursor: zoom-in; } .vmap__thumb img { display: block; width: 100%; height: auto; } /* 黒地で作画された図をそのまま置くとき用。枠・余白・影を外して直置きにする （既定の padding＋ink 地だと、図の黒より明るい縁が出てフチに見える） */ .vmap__thumb--flush { padding: 0; background: transparent; box-shadow: none; } /* 会場マップ見出しの金の筆線も消す（実用情報エリアは金なし） */ .venue .sec-head::before { display: none; } /* 節見出しは中央寄せに揃える（ゲートカードの節と同じ扱い） */ .sec-head { align-items: center; text-align: center; } /* 打ち上げ会場マップの見出しは中央寄せ */ .venue .sec-head { align-items: center; text-align: center; max-width: none; } .vmap__zoom { position: absolute; right: 12px; bottom: 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--washi); background: rgba(7, 11, 20, 0.72); padding: 0.4em 0.9em; border-radius: 4px; } .vmap__actions { margin-top: clamp(14px, calc(var(--vhlock) * 0.024), 20px); display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; } .vmap__pdf, .vmap__more { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; } .vmap__pdf { color: var(--gold); } .vmap__more { color: var(--washi); } /* ライトボックス（拡大表示。スマホはピンチズーム可＝overflow:auto + touch-action） 2026-08-17 改訂: ・幕は墨紺 rgb(7,11,20)。不透明度は 0.97 まで上げたが背後が完全に消えて硬く見えたため 0.78 に下げ、backdrop-filter の blur(6px) と併用する。 ＝背後のページはぼんやり残り、輪郭はぼけて主役の画像に視線が集まる。 実測（1440px・幕だけの領域の平均輝度）: 0.70→14.90 / 0.78→13.97 / 0.85→12.54。 ぼかしは開いている間だけ掛ける（閉じている間は none にして常時の描画コストを持たない）。 ・画像の四周に余白を取り、閉じるボタンは画像の右上の外側へ出す ・出入りは opacity のフェードのみ（拡大・スライドはしない）。display 切替では フェードできないので visibility＋opacity で持つ ・角丸・影・グラデーションは使わない */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(7, 11, 20, 0.78); overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pinch-zoom; opacity: 0; visibility: hidden; transition: opacity .24s linear, visibility .24s linear; /* 上は閉じるボタンの逃げ、左右下は画像の余白 */ padding: calc(env(safe-area-inset-top) + clamp(56px, 6vw, 76px)) clamp(16px, 4vw, 56px) calc(env(safe-area-inset-bottom) + clamp(24px, 4vw, 56px)); } /* ぼかしは開いている間だけ。閉じている間に掛けると合成レイヤを常時持つことになる */ .lightbox.is-open { opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox__img { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; } /* 閉じるボタン＝金の細い×。円形の地・太い枠は使わない。 main.js が入れる「×」の文字は隠し、1pxの線2本で描く（UIの記号。作画ではない） */ .lightbox__close { position: fixed; top: calc(env(safe-area-inset-top) + clamp(14px, 1.6vw, 22px)); right: clamp(16px, 4vw, 56px); z-index: 1; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: none; color: transparent; font-size: 0; line-height: 0; cursor: pointer; } .lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 1px; background: var(--gold); } .lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); } .lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .lightbox__close:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; } @media (hover: hover) { .lightbox__close:hover::before, .lightbox__close:hover::after { background: var(--vermilion); } } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } } /* ========================================================================== §観覧席の比較表（観覧席のご案内内）。3席を一目で。狭幅は .table-scroll で横スクロール ========================================================================== */ /* ①〜⑤の結論・まとめ：席ごとの違いを一覧で見せる導入見出し＋比較表 */ .feat2-summary { background: var(--ink); padding: clamp(36px, calc(var(--vhlock) * 0.08), 84px) clamp(20px, 5vw, 40px) clamp(40px, calc(var(--vhlock) * 0.08), 88px); } .feat2-summary__head { max-width: min(92vw, 1000px); margin: 0 auto; text-align: center; font-family: var(--font-mincho, "Shippori Mincho B1", serif); font-weight: 600; font-size: clamp(1.4rem, 4.4vw, 2.5rem); line-height: 1.5; letter-spacing: 0.04em; color: var(--washi); } .feat2-summary__br { display: none; } @media (max-width: 560px) { .feat2-summary__br { display: inline; } } /* ========================================================================== §観覧席の比較表（リニューアル）：列見出しは席バッジで統一・行追加・購入導線を内包。 金の構造装飾なし・文字大きめ。スマホはカード化せず「表のまま横スライド」。 skin A=紙の表 / B=線を消す（本体はA案で確定。比較用ページは本番から撤去済み） ========================================================================== */ .seatcmp { position: relative; margin: clamp(28px, calc(var(--vhlock) * 0.05), 52px) auto 0; max-width: min(96vw, 1000px); } /* スマホ：横スライドできることを透かしで案内。オーバーフロー時のみ表示・スライドで消える（JS制御） */ .seatcmp__hint { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; padding: 0.5em 0.95em; font-family: var(--font-gothic); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: rgba(7, 11, 20, 0.6); border: 1px solid rgba(242, 237, 227, 0.28); border-radius: 999px; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity 0.35s ease; } .seatcmp__hint-arrow { display: inline-block; margin-left: 0.4em; animation: seatcmp-hint-nudge 1.4s ease-in-out infinite; } @keyframes seatcmp-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .seatcmp.is-scrollable .seatcmp__hint { display: block; } .seatcmp.is-slid .seatcmp__hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { .seatcmp__hint-arrow { animation: none; } } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; } .seatcmp__table { width: 100%; min-width: 680px; /* これ未満は横スライド（スマホもカードにせず表のまま） */ table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: clamp(0.95rem, 2vw, 1.08rem); /* 現状より明確に大きく */ } .seatcmp__corner { width: 26%; border: none; background: transparent; } .seatcmp__seat { width: 24.6%; } /* 3席の列幅を均等に */ .seatcmp__table th, .seatcmp__table td { padding: clamp(14px, 1.9vw, 20px) clamp(10px, 1.4vw, 16px); text-align: center; vertical-align: middle; line-height: 1.55; } .seatcmp__table thead th { padding-top: clamp(16px, 2.2vw, 22px); padding-bottom: clamp(14px, 2vw, 20px); } .seatcmp__table tbody th { text-align: left; font-family: var(--font-gothic); font-weight: 700; font-size: 0.92em; line-height: 1.4; } .seatcmp__table small { display: block; margin-top: 0.35em; font-size: 0.76em; font-weight: 400; line-height: 1.6; } .seatcmp__table .is-yes { font-weight: 800; font-size: 1.3em; } .seatcmp__table .is-na { font-weight: 700; font-size: 1.15em; } .seatcmp__go { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } /* 席バッジ（列見出し。サイト内で表記統一。無料は新規＝中立の淡色で下位を表す） */ .seatbadge { display: inline-block; padding: 0.36em 1.05em; font-family: var(--font-gothic); font-size: clamp(0.76rem, 1.7vw, 0.92rem); font-weight: 800; letter-spacing: 0.03em; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .seatbadge--special { background: var(--gold); color: #2e1c08; border-color: #cf9c33; } .seatbadge--paid { background: #8fb9df; color: #0b1522; border-color: #6f9ec9; } .seatbadge--free { background: #cfd3d6; color: #2a2f36; border-color: #b0b6ba; } /* ---- B案「線を消す」：紺基調・縦罫なし・横は極細ヘアラインのみ・列は濃淡・全体を影で浮かせる ---- */ .seatcmp--b .table-scroll { background: var(--ink-2); box-shadow: 0 26px 54px rgba(3, 6, 12, 0.6); } .seatcmp--b .seatcmp__table th, .seatcmp--b .seatcmp__table td { color: var(--washi); border-bottom: 1px solid rgba(242, 237, 227, 0.08); } .seatcmp--b .seatcmp__table tbody tr:last-child th, .seatcmp--b .seatcmp__table tbody tr:last-child td { border-bottom: none; } .seatcmp--b .seatcmp__table tbody th { color: var(--washi-dim); } .seatcmp--b .seatcmp__table small { color: var(--washi-dim); } .seatcmp--b .seatcmp__table .is-yes { color: #fff; } .seatcmp--b .seatcmp__table .is-na { color: rgba(242, 237, 227, 0.36); } .seatcmp--b .seatcmp__vipcell, .seatcmp--b .seatcmp__table thead th:nth-child(2) { background: rgba(255, 255, 255, 0.055); } .seatcmp--b .seatcmp__go { color: #fff; } /* ---- A案「紙の表」：生成りの面＋墨色。夜空の上に印刷物が置かれたように深い影で浮かせる ---- */ .seatcmp--a .table-scroll { background: #f1ece0; box-shadow: 0 34px 66px rgba(3, 6, 12, 0.66), 0 6px 16px rgba(3, 6, 12, 0.4); } .seatcmp--a .seatcmp__table th, .seatcmp--a .seatcmp__table td { color: #292420; border-bottom: 1px solid rgba(41, 36, 32, 0.12); } .seatcmp--a .seatcmp__table tbody tr:last-child th, .seatcmp--a .seatcmp__table tbody tr:last-child td { border-bottom: none; } .seatcmp--a .seatcmp__table tbody th { color: rgba(41, 36, 32, 0.62); } .seatcmp--a .seatcmp__table small { color: rgba(41, 36, 32, 0.6); } .seatcmp--a .seatcmp__table .is-yes { color: #292420; } .seatcmp--a .seatcmp__table .is-na { color: rgba(41, 36, 32, 0.3); } /* 特別観覧席の列＝面の色で強調（金は使わない・少し濃い生成り） */ .seatcmp--a .seatcmp__vipcell, .seatcmp--a .seatcmp__table thead th:nth-child(2) { background: #e7ddc6; } .seatcmp--a .seatcmp__go { color: var(--vermilion-deep); } /* 開発用「仮」印。本番は build 側で一切出力しない（要素ごと生成されない） */ .dev-prov { display: inline-block; margin-top: 0.7em; font-family: var(--font-mincho); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #ffd6cf; background: rgba(217, 67, 46, 0.22); border: 1px dashed rgba(217, 67, 46, 0.7); padding: 0.2em 0.7em; border-radius: 3px; } /* ========================================================================== 共通見出し様式 sec-head（筆線 + 見出し + 補助文。design.md §5） ========================================================================== */ /* 見出しの装飾は持たせない。 「見出しの上に筆線」も「下に金の短い横線」も、この大会固有の理由が言えず、 どのサイトにもある“セクションタイトルのアクセント”の型だった。 見出しは書体・級数・余白だけで立てる。 */ 見出しの上に筆線／下に金の横線、の2流儀が混在していて、 補助文の無い節（よくあるご質問）では上の線だけが宙に浮いて意味不明に見えていた。 下の金の短い横線（ゲートカード・継承の節と同じ）に揃える。 */ .sec-head::before { display: none; } /* 節見出しは中央寄せに揃える（ゲートカードの節と同じ扱い） */ .sec-head { align-items: center; text-align: center; } .sec-head__unused::before { content: ""; display: block; width: clamp(80px, 12vw, 130px); height: 7px; margin-bottom: 0.9em; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat left center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat left center / contain; } .sec-head__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.35rem, 3.4vw, 1.9rem); letter-spacing: 0.14em; } .sec-head__note { margin-top: 0.6em; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.22em; color: var(--washi-dim); } /* ========================================================================== 観覧席：3枚の格（特別 > 一般 > 無料）。差は面積と装飾で ========================================================================== */ .seats { padding: clamp(88px, calc(var(--vhlock) * 0.13), 150px) 0; } .seats__inner { width: min(92vw, 900px); margin: 0 auto; } /* 金の枠・赤ボタンは廃止。横の極細罫＋文字サイズで三席の階層を示す（特別＞有料＞無料） */ .seats__list { display: grid; gap: 0; margin-top: clamp(30px, calc(var(--vhlock) * 0.054), 52px); } .seats__item { padding: clamp(22px, calc(var(--vhlock) * 0.04), 40px) 0; border-top: 1px solid rgba(242, 237, 227, 0.13); } .seats__item:last-child { border-bottom: 1px solid rgba(242, 237, 227, 0.13); } .seats__rank { font-family: var(--font-mincho); font-weight: 800; letter-spacing: 0.08em; line-height: 1.35; color: #fff; } .seats__item--primary .seats__rank { font-size: clamp(1.7rem, 4.6vw, 2.5rem); } .seats__item--secondary .seats__rank { font-size: clamp(1.3rem, 3.3vw, 1.75rem); } .seats__item--tertiary .seats__rank { font-size: clamp(1.08rem, 2.6vw, 1.35rem); color: var(--washi); } .seats__benefit { margin-top: 0.55em; font-size: clamp(0.9rem, 1.9vw, 1.02rem); letter-spacing: 0.04em; line-height: 1.95; color: var(--washi); } .seats__item--tertiary .seats__benefit { color: var(--washi-dim); font-size: clamp(0.86rem, 1.8vw, 0.94rem); } .seats__more { margin-top: clamp(12px, calc(var(--vhlock) * 0.02), 18px); } .seats__more a { display: inline-block; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.95rem, 2vw, 1.08rem); letter-spacing: 0.06em; color: #fff; text-decoration: underline; text-underline-offset: 6px; } .seats__more a:hover { color: var(--kiku); } /* モバイル：CTAラベル短縮（ヒーローと同パターン） */ @media (max-width: 699px) { .cta-kubun { display: none; } .finale__cta { white-space: nowrap; } } /* ========================================================================== §8 ACCESS ========================================================================== */ /* アクセス：白背景でメリハリ（周囲の紺の中で1バンドだけ白＝AI感回避）。見出し中央、 白黒Googleマップ(全幅にしない・表示専用)、下に「大阪中心部から主なアクセス」を紺パネルで 目立たせ車・電車を横並び。参考サイトのシンプルさ（余白・枠なし）を基準に */ .access { padding: clamp(72px, calc(var(--vhlock) * 0.12), 140px) 0; background: #ffffff; color: var(--ink); } .access__inner { width: min(92vw, 860px); margin: 0 auto; } .access__title { text-align: center; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 2.6rem); letter-spacing: 0.16em; color: var(--ink); } .access__place { margin-top: clamp(8px, calc(var(--vhlock) * 0.014), 14px); text-align: center; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.88rem, 2vw, 1.02rem); letter-spacing: 0.08em; color: var(--ink); } /* 白黒Googleマップ：全幅にしない・中央。iframeは pointer-events:none で表示専用＝ スクロールを妨げない。操作は「Googleマップで開く」から */ .access__map { position: relative; width: min(100%, 720px); margin: clamp(28px, calc(var(--vhlock) * 0.05), 52px) auto 0; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e9e9; } .access__map-frame { width: 100%; height: 100%; border: 0; display: block; /* 通常の色付きマップ（白黒は寂しいとの判断で撤去）。既定の赤ピンがそのまま出る */ pointer-events: none; } .access__map-open { position: absolute; right: 10px; bottom: 10px; padding: 0.5em 1em; font-size: clamp(0.76rem, 1.6vw, 0.86rem); font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(18, 27, 44, 0.9); text-decoration: none; } .access__map-open:hover { background: var(--ink); } /* 最寄駅からのアクセス（白地・紺パネルの前）。3路線を静かに列挙 */ .access__stations { margin-top: clamp(26px, calc(var(--vhlock) * 0.046), 48px); } .access__stations-title { text-align: center; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.3rem); letter-spacing: 0.1em; color: var(--ink); } /* ご来場の駅の下に置く混雑緩和のお願い（東羽衣駅一本化 2026-09-01）。 */ .access__stations-note { max-width: 620px; /* 上の駅リスト（罫線）と横幅を揃える */ margin: clamp(10px, 1.6vw, 14px) auto 0; text-align: center; font-family: var(--font-mincho); font-size: clamp(0.82rem, 2vw, 0.9rem); line-height: 1.9; color: var(--ink); } .access__stations-list { list-style: none; max-width: 620px; margin: clamp(14px, calc(var(--vhlock) * 0.024), 24px) auto 0; border-top: 1px solid rgba(18, 27, 44, 0.14); } .access__station { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "line walk" "name walk"; align-items: center; column-gap: clamp(12px, 2.4vw, 22px); padding: clamp(13px, calc(var(--vhlock) * 0.022), 18px) clamp(2px, 1vw, 10px); border-bottom: 1px solid rgba(18, 27, 44, 0.14); } .access__station-line { grid-area: line; font-weight: 700; font-size: clamp(0.72rem, 1.5vw, 0.8rem); letter-spacing: 0.05em; color: var(--vermilion); } .access__station-name { grid-area: name; margin-top: 0.15em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.02rem, 2.5vw, 1.32rem); letter-spacing: 0.04em; line-height: 1.35; color: var(--ink); } .access__station-walk { grid-area: walk; justify-self: end; text-align: right; font-weight: 700; font-size: clamp(0.78rem, 1.7vw, 0.92rem); line-height: 1.4; color: var(--ink); } /* 大阪中心部から主なアクセス：紺パネルで目立たせ、車と電車を横並び */ .access__osaka { margin-top: clamp(32px, calc(var(--vhlock) * 0.06), 64px); padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px); background: var(--ink); color: var(--washi); } .access__osaka-title { text-align: center; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.4rem); letter-spacing: 0.1em; color: #fff; } .access__ways { display: grid; gap: clamp(16px, 2.6vw, 28px); margin-top: clamp(22px, calc(var(--vhlock) * 0.036), 38px); } @media (min-width: 680px) { .access__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .access__way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2.2vw, 20px); } .access__way-icon { width: clamp(42px, 5.6vw, 56px); height: auto; } .access__way-name { font-weight: 700; font-size: clamp(0.9rem, 2vw, 1.02rem); letter-spacing: 0.03em; line-height: 1.4; color: #fff; } .access__way-line { margin-top: 0.3em; font-size: clamp(0.72rem, 1.5vw, 0.8rem); letter-spacing: 0.05em; color: var(--washi-dim); } .access__way-time { font-family: var(--font-num); font-weight: 700; font-size: clamp(0.78rem, 1.6vw, 0.88rem); color: #fff; white-space: nowrap; } .access__way-time strong { font-weight: 900; font-size: clamp(1.8rem, 4.8vw, 2.4rem); margin: 0 0.06em; } .access__osaka-note { margin-top: clamp(18px, calc(var(--vhlock) * 0.03), 26px); font-size: clamp(0.74rem, 1.5vw, 0.82rem); line-height: 1.8; color: var(--washi-dim); } /* 詳細リンク（白背景なので濃色） */ .access__more { margin-top: clamp(28px, calc(var(--vhlock) * 0.05), 52px); text-align: center; } .access__more a { color: var(--ink); font-weight: 700; font-size: clamp(0.9rem, 1.9vw, 1rem); letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 6px; } .access__more a:hover { color: var(--vermilion-deep); } /* 下記の .access__route* は詳細ページ /access（page-access.html）専用。トップの新アクセスでは未使用 */ .access__routes { display: grid; gap: clamp(16px, 2.6vw, 24px); margin-top: clamp(28px, calc(var(--vhlock) * 0.046), 44px); max-width: 880px; } @media (min-width: 700px) { .access__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .access__route { display: flex; gap: clamp(16px, 2.4vw, 24px); padding: clamp(20px, 3vw, 30px); background: var(--surface); border-radius: var(--radius-m); } .access__route-way { flex: 0 0 auto; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--gold); letter-spacing: 0.1em; } .access__route-name { font-weight: 700; font-size: clamp(0.92rem, 2vw, 1rem); letter-spacing: 0.06em; } .access__route-line { margin-top: 0.3em; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--washi-dim); } .access__route-time { margin-top: 0.7em; font-size: 0.85rem; color: var(--washi); } .access__route-time strong { margin: 0 0.12em; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1; color: var(--washi); } .access__route-time small { font-size: 0.85em; } /* ========================================================================== §9 FAQ 抜粋（details/summary） ========================================================================== */ .faq { padding: clamp(72px, calc(var(--vhlock) * 0.11), 120px) 0; } .faq__inner { width: min(92vw, 840px); margin: 0 auto; } .faq__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.35rem, 3.4vw, 1.9rem); letter-spacing: 0.14em; } .faq__list { display: grid; gap: clamp(10px, calc(var(--vhlock) * 0.016), 14px); margin-top: clamp(26px, calc(var(--vhlock) * 0.044), 40px); } /* 項目の区切りは背景の濃淡で */ .faq__item { background: var(--surface); border-radius: var(--radius-m); } .faq__q { position: relative; padding: 1.1em 3em 1.1em 1.3em; font-weight: 700; font-size: clamp(0.96rem, 2vw, 1.06rem); letter-spacing: 0.05em; line-height: 1.8; cursor: pointer; list-style: none; /* 既定の三角マーカーを消す */ } .faq__q::-webkit-details-marker { display: none; } /* 開閉印：＋が45度回って×に（英語ラベル・矢印を使わない） */ .faq__q::after { content: "＋"; position: absolute; right: 1.1em; top: 50%; transform: translateY(-50%); font-family: var(--font-mincho); font-weight: 500; color: var(--gold); transition: transform 0.25s ease; } .faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); } .faq__a { padding: 0 1.3em 1.3em; font-size: clamp(0.9rem, 1.85vw, 0.99rem); line-height: 2; color: var(--washi); } .faq__more { margin-top: clamp(24px, calc(var(--vhlock) * 0.04), 36px); } /* 2026-08-28: 行き先の違う導線が2本になった（よくあるご質問／注意事項）。 狭い画面では縦に積む。 */ .faq__more { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em clamp(20px, 4vw, 40px); } .faq__more a { color: var(--gold); font-weight: 700; font-size: clamp(0.88rem, 1.8vw, 0.95rem); letter-spacing: 0.08em; text-underline-offset: 5px; } .faq__more a:hover { color: var(--washi); } /* ========================================================================== §10 FINALE：第二の花火（Canvas）+ 最終CTA ========================================================================== */ .finale { position: relative; /* 実写背景を外したぶん、高さを 0.88 → 0.58 に詰める。 写真が無い面で画面高の9割を取ると、ただの空白として読まれるため。 */ min-height: calc(var(--vhlock) * 0.58); display: grid; place-items: center; padding: clamp(64px, calc(var(--vhlock) * 0.1), 110px) 24px; isolation: isolate; overflow: hidden; background: var(--ink-deep); } /* 静止画（花火）＝透過窓・Canvasの代わり。上下に少しはみ出させ、パララックスの ズレでも端が出ないようにする（緩やかに動く静止画） */ /* 花火の実写背景は撤去（2026-08-12）。すぐ下のフッターのイラスト夜景で 花火が上がるため、実写の花火とイラストの花火が縦に二重になっていた。 ここは墨紺の面だけにして、下のイラストへ一続きの夜として渡す。 */ .finale__bg { display: none; } /* 文字の可読性を担保する暗幕（上下を夜に溶かす） */ .finale__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, var(--ink) 0%, rgba(7, 11, 20, 0.62) 22%, rgba(7, 11, 20, 0.62) 78%, var(--ink) 100% ); } .finale__inner { position: relative; z-index: 2; text-align: center; } .finale__tagline { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.82rem, 1.9vw, 0.95rem); letter-spacing: 0.34em; color: var(--washi-dim); } .finale__title { margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 30px); font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.7rem, 5.4vw, 3rem); letter-spacing: 0.14em; line-height: 1.9; } .finale__cta-area { margin-top: clamp(34px, calc(var(--vhlock) * 0.056), 52px); } .finale__cta { display: inline-block; padding: 1.15em 2.6em; background: var(--vermilion-deep); border: 1px solid rgba(242, 237, 227, 0.28); border-radius: var(--radius-m); color: var(--washi); font-weight: 700; font-size: clamp(0.92rem, 2vw, 1.05rem); letter-spacing: 0.08em; line-height: 1.4; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease; } .finale__cta:hover { background: var(--vermilion); border-color: rgba(242, 237, 227, 0.5); } @media (min-width: 700px) { .finale__br { display: none; /* デスクトップは1行で */ } } /* ========================================================================== フッター：公式サイトの奥付 顔(題字+開催情報) → 運営体制/ご案内/お問い合わせの3段組 → 最下帯(©+規約) ========================================================================== */ .site-footer { /* 直前の .finale（下端 --ink）から色を割らずに続ける。 一段沈めた別色にすると、帯の手前に別の色の帯ができて境目が出る。 */ background: var(--ink); border-top: 0; /* 上パディングは持たない。ここに余白があると finale と夜景の帯の間に フッターの地色だけの帯（実測63px）が挟まり、色が割れて見える。 */ padding-top: 0; } /* 余白は帯の下＝奥付側に置く */ .site-footer__face { padding-top: clamp(40px, calc(var(--vhlock) * 0.065), 68px); } /* ---- 奥付の顔：題字 + 開催日 + 会場 ---- */ .site-footer__face { width: min(92vw, 1080px); margin: 0 auto; display: grid; gap: 20px; justify-items: start; padding-bottom: clamp(30px, calc(var(--vhlock) * 0.05), 44px); } .site-footer__logo img { width: min(210px, 52vw); } /* 目標グラフィック（原サイト素材）をロゴの下に小さく置く */ .site-footer__logo .site-footer__goal { display: block; width: min(150px, 34vw); height: auto; margin-top: clamp(12px, calc(var(--vhlock) * 0.02), 18px); opacity: 0.9; } .site-footer__face-date { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1; letter-spacing: 0.02em; color: var(--washi); font-variant-numeric: tabular-nums; } .site-footer__face-dow { margin-left: 0.35em; font-family: var(--font-mincho); font-weight: 800; font-size: 0.45em; vertical-align: 0.16em; color: var(--washi-dim); } .site-footer__face-meta { margin-top: 0.5em; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--washi); } @media (min-width: 800px) { .site-footer__face { grid-template-columns: auto 1fr; align-items: end; gap: clamp(28px, 4vw, 48px); } .site-footer__face-info { justify-self: end; text-align: right; } } /* ---- 3段組（運営体制 / ご案内 / お問い合わせ）。区切りは濃淡 ---- */ .site-footer__inner { width: min(92vw, 1080px); margin: 0 auto; display: grid; gap: clamp(30px, calc(var(--vhlock) * 0.05), 44px); padding: clamp(28px, calc(var(--vhlock) * 0.046), 40px) 0 clamp(40px, calc(var(--vhlock) * 0.066), 64px); background: linear-gradient( 90deg, rgba(242, 237, 227, 0.14), transparent 340px ) no-repeat top left / 100% 1px; } @media (min-width: 800px) { /* 均等3列はコーポレートサイトの初期値そのもの。幅の違う2列＋全幅のリンク行にして 「問い合わせが主・運営が従・サイト内リンクは最下」という順位を幅と位置で示す */ .site-footer__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 52px); } .site-footer__nav { grid-column: 1 / -1; } } .site-footer__head { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; color: var(--gold); } /* 運営体制の段組み */ .site-footer__org-list { display: grid; gap: 0.75em; margin-top: 1em; } .site-footer__org-row { display: flex; gap: 1.2em; align-items: baseline; } .site-footer__org-row dt { flex: 0 0 5.4em; font-family: var(--font-mincho); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; white-space: nowrap; color: var(--washi-dim); } .site-footer__org-row dd { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.9rem, 1.9vw, 0.98rem); letter-spacing: 0.1em; line-height: 2; color: var(--washi); } /* 名義ロゴが入る行。ロゴの高さがあるので baseline ではなく縦中央で揃える。 ⚠️ dd も flex にすること。inline-flex のままだと、中の画像に文字のベースラインが無く ボックスの**底辺**でベースラインが合成されるため、ロゴの隣の「高石市」だけが持ち上がり、 後ろに続く「／ 高石商工会議所」が一段下がって**2行に折り返したように見える** （実測 2026-08-28: dd は1行 259px のままなのに高さ56pxで段差が出ていた）。 */ .site-footer__org-row--logo { align-items: center; } .site-footer__org-row--logo dd { display: flex; flex-wrap: wrap; align-items: center; /* 2026-08-31: ロゴ同士の間の「／」を廃止（白濱の指示）。区切り文字の代わりに チップ間の余白で並べる。 */ gap: clamp(16px, 3vw, 30px); } /* 2026-08-28: 後援の名義は「ロゴを上・名前を下」に積む（白濱の指示）。 ロゴが線の細い記念ロゴで、54pxの横並びでは何が描いてあるか読めなかった。 */ .site-footer__org-name { display: inline-flex; flex-direction: column; align-items: center; gap: 0.45em; line-height: 1.5; } /* 支給ロゴは原色（黒の線画＋白地）のまま使う＝自治体ロゴを改変しない。 暗いフッターの上では白いチップとして置く。内側余白と正方形化は画像に 焼き込み済みなので、ここでは角の処理と表示サイズだけ持つ。 */ .site-footer__org-logo { flex: 0 0 auto; display: block; /* 54px では線画の中身が読めなかったので大きくする。原寸300px。 角丸は外した（このサイトは角丸を使わない）。 */ width: clamp(88px, 13vw, 120px); height: auto; } .site-footer__links { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 0.55em 1.9em; } .site-footer__links a { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--washi); text-decoration: none; } .site-footer__links a:hover { color: var(--gold); } .site-footer__contact-text { margin-top: 1em; max-width: 34em; font-size: 0.88rem; line-height: 2; color: var(--washi); } .site-footer__contact-text a { color: var(--gold); text-underline-offset: 4px; } /* ---- 最下帯：© + 規約 ---- */ .site-footer__band { background: #081020; padding: 18px 0; } .site-footer__band-inner { width: min(92vw, 1080px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; } .site-footer__copy { flex: 1 0 100%; margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--washi-dim); } .site-footer__band-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; } .site-footer__band-links a { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--washi-dim); text-decoration: none; } .site-footer__band-links a:hover { color: var(--gold); } /* ========================================================================== 下層ページ共通コンポーネント（/access /faq /news /legal /404） ========================================================================== */ .access-map, .access-routes, .access-pending, .news-list, .legal { width: min(92vw, 840px); margin: 0 auto; padding: clamp(24px, calc(var(--vhlock) * 0.044), 44px) 0; } /* よくあるご質問：カテゴリごとに全幅の帯にし、夜の紺と生成りの和紙を 交互に敷いてリズムを出す（2026-09-01）。帯は全幅、中身は従来幅で中央寄せ。 */ .faq-group { width: 100%; padding: clamp(44px, calc(var(--vhlock) * 0.08), 84px) 0; } .faq-group__inner { width: min(92vw, 840px); margin: 0 auto; } /* 明るい帯（和紙）。文字・罫・カードを紙のパレットへ反転する。 */ .faq-group--light { background: var(--paper); color: var(--paper-ink); } .faq-group--light .section-title { color: var(--paper-ink); } .faq-group--light .section-title { border-bottom-color: rgba(125, 90, 18, 0.4); } .faq-group--light .faq-sub { color: var(--paper-gold); border-bottom-color: rgba(125, 90, 18, 0.34); } .faq-group--light .faq__item { background: var(--paper-card); border: 1px solid var(--paper-card-line); } .faq-group--light .faq__q { color: var(--paper-ink); } .faq-group--light .faq__q::after { color: var(--paper-gold); } .faq-group--light .faq__no { color: var(--paper-gold); } .faq-group--light .faq__a { color: var(--paper-ink); } .faq-group--light .faq__a a { color: var(--paper-gold); } .news-list { padding-bottom: clamp(56px, calc(var(--vhlock) * 0.09), 100px); } .access-pending, .legal:last-of-type { padding-bottom: clamp(56px, calc(var(--vhlock) * 0.09), 100px); } /* ---- 地図（アスペクト比固定・全幅） ---- */ .access-map__frame { aspect-ratio: 16 / 9; background: var(--surface); border-radius: var(--radius-m); overflow: hidden; } .access-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2); /* 地図の彩度をトーンに寄せる */ } /* 読み込み前のファサード */ .js-map-facade { display: grid; place-content: center; row-gap: 1.2em; text-align: center; } .access-map__facade-place { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.15rem); letter-spacing: 0.2em; color: var(--washi); } .access-map__load { appearance: none; background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.28); border-radius: var(--radius-m); padding: 0.9em 2em; color: var(--washi); font-family: var(--font-mincho); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.14em; cursor: pointer; transition: background-color 0.25s ease; } .access-map__load:hover { background: var(--surface-2); } .access-map__external { margin-left: 1.2em; color: var(--gold); text-underline-offset: 4px; } .access-map__address { margin-top: 0.9em; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--washi-dim); } .access-notes { list-style: none; margin-top: clamp(18px, calc(var(--vhlock) * 0.03), 26px); max-width: 40em; } .access-notes li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; font-size: 0.88rem; line-height: 2; color: var(--washi); } .access-notes li::before { content: "・"; position: absolute; left: 0; color: var(--gold); } /* ---- 準備中パネル ---- */ .pending-panel { padding: clamp(32px, calc(var(--vhlock) * 0.06), 56px) clamp(20px, 4vw, 40px); background: var(--surface); border-radius: var(--radius-m); text-align: center; } .pending-panel__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.15rem); letter-spacing: 0.14em; } .pending-panel__text { margin-top: 0.9em; font-size: 0.86rem; line-height: 2; color: var(--washi); } .pending-panel__text a { color: var(--gold); text-underline-offset: 4px; } /* ---- FAQページ：回答内リンク ---- */ .faq__a a { color: var(--gold); text-underline-offset: 4px; } /* ---- お知らせ ---- */ .news-article { padding: clamp(22px, calc(var(--vhlock) * 0.036), 32px) 0; } /* 記事の区切りも濃淡で（枠線を引かない） */ .news-article + .news-article { background: linear-gradient( 90deg, rgba(242, 237, 227, 0.12), transparent 320px ) no-repeat top left / 100% 1px; } .news-article__date { font-family: var(--font-num); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--gold); font-variant-numeric: tabular-nums; } .news-article__title { margin-top: 0.5em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.25rem); letter-spacing: 0.1em; line-height: 1.8; } .news-article__body { margin-top: 0.9em; max-width: 40em; font-size: 0.9rem; line-height: 2.1; color: var(--washi); } /* お知らせ本文の下に置く外部リンク（url を持つ記事） */ .news-article__link { margin-top: 0.7em; font-size: 0.9rem; line-height: 1.9; } .news-article__link a { color: var(--gold); text-underline-offset: 4px; } /* ---- 特商法・プライバシーポリシー ---- */ .legal__table { display: grid; } .legal__row { display: grid; gap: 0.4em 2em; padding: 1.1em 1.2em; } /* 行の縞は濃淡で */ .legal__row:nth-child(odd) { background: var(--surface); } @media (min-width: 700px) { .legal__row { grid-template-columns: 14em 1fr; } } .legal__row dt { font-weight: 700; font-size: 0.88rem; letter-spacing: 0.08em; } .legal__row dd { font-size: 0.9rem; line-height: 1.9; color: var(--washi); } .legal__body { max-width: 40em; font-size: 0.9rem; line-height: 2.1; } .legal__body p { margin-bottom: 1em; color: var(--washi); } .legal__sub { margin: 1.8em 0 0.7em; font-family: var(--font-mincho); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.1em; } .legal__date { margin-top: 2em; font-size: 0.8rem; color: var(--washi-dim); } /* ---- 404 ---- */ .not-found { padding-bottom: clamp(72px, calc(var(--vhlock) * 0.12), 130px); } .not-found__links { display: flex; flex-wrap: wrap; gap: 1em 2.4em; margin-top: clamp(24px, calc(var(--vhlock) * 0.04), 36px); } .not-found__links a { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-underline-offset: 5px; } /* ========================================================================== スクロール表出（後続セクション用の共通クラス：1回だけフェードイン） ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* 縦書き見出しなど、右から静かに寄る変種（全部同じfade-upにしない） */ [data-reveal="side"] { transform: translateX(22px); } [data-reveal].is-in, html:not(.js-ready) [data-reveal] { opacity: 1; transform: none; } /* ========================================================================== 共通ヘッダー拡張（ナビ）・フッターナビ ========================================================================== */ .site-header__logo a { display: block; } .site-header__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; /* 中の要素が1つでも縦中央に置く */ gap: 10px; } /* PC（1025px以上）は横並びナビだけを使う。ハンバーガーの器は高さ0でも gap の分だけ場所を取り、ナビを上へ押し上げてロゴと中心がずれるため消す。 */ @media (min-width: 1025px) { .site-header__side { gap: 0; } .site-menu-wrap { display: none; } } .site-header__nav { display: flex; align-items: center; gap: clamp(1.5em, 2.6vw, 2.5em); } .site-header__nav a { position: relative; font-family: var(--font-mincho); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.2em; text-indent: 0.2em; /* letter-spacing の右余白ぶんを視覚中央へ寄せる */ color: var(--washi); text-decoration: none; padding-bottom: 0.55em; transition: color 0.25s ease; } /* ホバー：サイト共通の「金の筆線」（sec-head と同じ様式線）が中央から開く＝装飾の出どころを統一 */ .site-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10'%3E%3Cpath d='M1 6.2C22 2.4 44 8.2 66 5.4 92 2 118 7.6 143 4.2c6-.8 12-.4 16-1.1l-.4 2.1c-9 1.2-16 .9-27 1.9-22 2-44-2.4-66 .2C45 9.6 22 5.4 1 8Z'/%3E%3C/svg%3E") no-repeat center / contain; transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; } .site-header__nav a:hover, .site-header__nav a:focus-visible { color: var(--gold); } .site-header__nav a:hover::after, .site-header__nav a:focus-visible::after { transform: scaleX(1); opacity: 0.95; } /* ナビ右端の目立つCTA「特別観覧席 先行予約」＝朱のボタン（共通の筆線ホバーは無効化） */ .site-header__nav a.site-header__cta { padding: 0.6em 1.35em; margin-left: clamp(0.4em, 1vw, 1em); background: var(--vermilion-deep); color: #fff; /* ページ内の他要素（カード枠・ボタン・画像・表）が直角なので、ここだけ丸めない。 外側の赤いグローも撤去（押せることを伝えていない＝意味のない装飾） */ border-radius: 0; font-family: var(--font-gothic); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.06em; text-indent: 0; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .site-header__nav a.site-header__cta::after { display: none; } .site-header__nav a.site-header__cta:hover, .site-header__nav a.site-header__cta:focus-visible { color: #fff; background: var(--vermilion); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(196, 58, 38, 0.5); } /* モバイル/タブレット：横並びナビを畳んで三本線アイコン＋ドロップダウンに集約 （PC=1025px以上は横並びナビのまま。切替は 1024px） */ .site-menu-wrap { position: relative; } .site-header__menu-btn { display: none; /* PC(1025px以上)では非表示。タブレット/モバイルで inline-flex */ align-items: center; justify-content: center; width: 44px; /* タップ領域44px以上 */ height: 44px; padding: 0; appearance: none; background: none; border: none; color: var(--washi); cursor: pointer; } /* 細線の三本線 → ×（0.2sで変化） */ .hamburger { position: relative; display: block; width: 24px; height: 15px; } .hamburger span { position: absolute; left: 0; display: block; width: 100%; height: 1.5px; /* 細線 */ border-radius: 1px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 6.75px; } .hamburger span:nth-child(3) { top: 13.5px; } .js-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) { top: 6.75px; transform: rotate(45deg); } .js-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; } .js-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); } @media (max-width: 1024px) { .site-header__nav { display: none; } .site-header__menu-btn { display: inline-flex; } } /* アイコン直下に落ちるコンパクトなドロップダウン（墨紺＋blur・右寄せ）。 視線と指の移動距離を最小にするため全画面展開はしない */ .site-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 95; min-width: 216px; padding: 8px; background: rgba(11, 19, 34, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(232, 180, 74, 0.28); border-radius: var(--radius-m); box-shadow: 0 16px 44px rgba(7, 11, 20, 0.55); /* 閉状態（0.2sで開閉。スクロールロックはしない） */ opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .site-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* JS無効時のフォールバック（ボタンが機能しないため畳んだまま） */ .site-menu[hidden] { display: none; } .site-menu__nav { display: grid; gap: 0; } .site-menu__nav a { position: relative; display: flex; align-items: center; min-height: 48px; /* タップ領域48px以上 */ padding: 0 1.15em 0 1.35em; font-family: var(--font-mincho); font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; color: var(--washi); text-decoration: none; border-radius: var(--radius-s); white-space: nowrap; } /* 項目の区切りはごく淡い一本線（余白＋濃淡で構造を示す） */ .site-menu__nav a + a::before { content: ""; position: absolute; top: 0; left: 1.15em; right: 1.15em; height: 1px; background: rgba(242, 237, 227, 0.09); } /* ホバー：金の細い縦筋を左に灯す（栞のインデックスのように） */ .site-menu__nav a::after { content: ""; position: absolute; left: 0.5em; top: 50%; width: 2px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height 0.22s ease; } .site-menu__nav a:hover, .site-menu__nav a:focus-visible { background: rgba(242, 237, 227, 0.08); color: var(--gold); } .site-menu__nav a:hover::after, .site-menu__nav a:focus-visible::after { height: 1.5em; } /* ドロップダウン内の「特別観覧席 先行予約」＝朱の目立つボタン */ .site-menu__nav a.site-menu__cta { justify-content: center; margin-top: 10px; background: var(--vermilion-deep); color: #fff; font-family: var(--font-gothic); font-weight: 800; letter-spacing: 0.06em; border-radius: var(--radius-m); } .site-menu__nav a.site-menu__cta::before { display: none; } .site-menu__nav a.site-menu__cta::after { display: none; } .site-menu__nav a.site-menu__cta:hover, .site-menu__nav a.site-menu__cta:focus-visible { background: var(--vermilion); color: #fff; } @media (prefers-reduced-motion: reduce) { .site-menu { transition: opacity 0.2s ease, visibility 0.2s; transform: none; } .site-menu.is-open { transform: none; } .hamburger span { transition: none; } } /* ========================================================================== サブページ共通（/plans 系） ヘッダーはヒーロー用に絶対配置のため、サブページは main 上部に逃げを取る ========================================================================== */ .page-sub main { padding-top: clamp(110px, calc(var(--vhlock) * 0.16), 160px); } .page-head { width: min(92vw, 1080px); margin: 0 auto; padding-bottom: clamp(36px, calc(var(--vhlock) * 0.06), 64px); } .page-head__place { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; color: var(--washi-dim); } .page-head__back { color: var(--washi-dim); text-decoration: none; } .page-head__back:hover { color: var(--gold); } .page-head__title { margin-top: 0.5em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.9rem, 5.4vw, 3rem); letter-spacing: 0.1em; line-height: 1.3; } .page-head__lead { margin-top: 1.2em; max-width: 34em; font-size: clamp(0.88rem, 1.8vw, 0.95rem); } /* サンプル明示（実データ差し替えまで各ページに置く） */ .notice-sample { display: inline-block; margin-top: 1.6em; padding: 0.5em 1em; background: rgba(217, 67, 46, 0.14); border-radius: var(--radius-s); color: #eb8a7c; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; } .section-title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: 0.1em; margin-bottom: clamp(20px, calc(var(--vhlock) * 0.034), 32px); } /* ---- 観覧席番付（/plans ハブ）：格の差は面積と装飾で ---- */ .banzuke { width: min(92vw, 900px); margin: 0 auto; padding: clamp(28px, calc(var(--vhlock) * 0.05), 48px) 0; } .banzuke__list { display: grid; gap: clamp(16px, calc(var(--vhlock) * 0.026), 24px); margin-top: clamp(26px, calc(var(--vhlock) * 0.044), 40px); } .banzuke__card { border-radius: var(--radius-s); } /* VVIP：最上位。金の二重線・最大面積 */ .banzuke__card--vvip { position: relative; padding: clamp(40px, calc(var(--vhlock) * 0.066), 68px) clamp(26px, 5vw, 56px); background: radial-gradient( 120% 140% at 50% 0%, rgba(232, 180, 74, 0.1) 0%, transparent 55% ), var(--surface); border: 2px solid var(--gold); } .banzuke__card--vvip::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(232, 180, 74, 0.45); border-radius: var(--radius-s); pointer-events: none; } /* VIP：太い金線1本 */ .banzuke__card--vip { padding: clamp(30px, calc(var(--vhlock) * 0.05), 48px) clamp(24px, 4.4vw, 48px); background: var(--surface); border-left: 3px solid var(--gold); } /* 一般：控えめ */ .banzuke__card--general { padding: clamp(24px, calc(var(--vhlock) * 0.04), 36px) clamp(22px, 4vw, 44px); background: var(--surface); border-left: 2px solid rgba(232, 180, 74, 0.4); } /* ---- 番付＝格の階段：頂点(FIRE)は一枚で最大、以下は並べて中位・下位に ---- */ .banzuke__row { display: grid; gap: clamp(14px, 2.2vw, 22px); margin-top: clamp(14px, 2.2vw, 22px); } @media (min-width: 720px) { .banzuke__row--2 { grid-template-columns: 1fr 1fr; } .banzuke__row--3 { grid-template-columns: repeat(3, 1fr); } } /* 頂点＝最高峰の一席。面積・余白・級数で別格に（金の二重線は--vvipから継承） */ .banzuke__card--apex { padding: clamp(44px, calc(var(--vhlock) * 0.08), 84px) clamp(28px, 6vw, 72px); } .banzuke__card--apex .banzuke__name { font-size: clamp(2rem, 7vw, 3.1rem); } .banzuke__crown { font-family: var(--font-mincho); font-size: 0.72rem; letter-spacing: 0.34em; color: var(--gold); margin-bottom: 0.9em; } .banzuke__crown::before { content: "― "; } /* VIP＝コンパクト（3枚並び）：金の左線は残し、面積と級数を落として下位に */ .banzuke__card--compact { padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 30px); } .banzuke__card--compact .banzuke__name { font-size: clamp(1.15rem, 2.4vw, 1.42rem); } .banzuke__card--compact .banzuke__for { margin-top: 0.7em; font-size: clamp(0.82rem, 1.7vw, 0.9rem); line-height: 1.85; } .banzuke__card--compact .banzuke__facts { margin-top: clamp(14px, 2vw, 20px); gap: 0.8em 1.6em; } .banzuke__card--compact .banzuke__num { font-size: clamp(1.1rem, 2.4vw, 1.4rem); } .banzuke__card--compact .banzuke__cta-area { margin-top: clamp(16px, 2.2vw, 24px); } .banzuke__card--compact .banzuke__cta { padding: 0.8em 1.7em; font-size: 0.86rem; } .banzuke__rank { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.3em; color: var(--gold); } .banzuke__name { margin-top: 0.4em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 1.8rem); letter-spacing: 0.14em; } .banzuke__card--vvip .banzuke__name { font-size: clamp(1.6rem, 4.4vw, 2.3rem); } .banzuke__card--general .banzuke__name { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.1rem, 2.8vw, 1.35rem); letter-spacing: 0.14em; } /* ベネフィット：「誰のためか」 */ .banzuke__for { margin-top: 0.9em; font-size: clamp(0.88rem, 1.9vw, 0.96rem); letter-spacing: 0.06em; line-height: 2; color: var(--washi); } .banzuke__facts { display: flex; flex-wrap: wrap; gap: 1em clamp(24px, 4vw, 44px); margin-top: clamp(18px, calc(var(--vhlock) * 0.03), 26px); } .banzuke__fact dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; color: var(--washi-dim); } .banzuke__fact dd { margin-top: 0.35em; font-size: 0.9rem; line-height: 1.8; } .banzuke__num { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .banzuke__num small { margin-left: 0.5em; font-family: var(--font-mincho); font-weight: 400; font-size: 0.6em; letter-spacing: 0.06em; color: var(--washi-dim); } /* 1人あたり換算＝見せ場（金） */ .banzuke__num--per { color: var(--gold); } .banzuke__cta-area { margin-top: clamp(22px, calc(var(--vhlock) * 0.036), 32px); } .banzuke__cta { display: inline-block; padding: 0.95em 2.4em; background: var(--vermilion-deep); border: 1px solid rgba(242, 237, 227, 0.28); border-radius: var(--radius-m); color: var(--washi); font-weight: 700; font-size: clamp(0.88rem, 1.9vw, 0.98rem); letter-spacing: 0.12em; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease; } .banzuke__cta:hover { background: var(--vermilion); border-color: rgba(242, 237, 227, 0.5); } .banzuke__free { padding: 0.4em 0.2em; font-size: clamp(0.8rem, 1.8vw, 0.88rem); letter-spacing: 0.08em; color: var(--washi-dim); } /* ---- 個別ページ：誰のためか ---- */ .page-head__rank { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.3em; color: var(--gold); } .page-head__for { margin-top: 0.9em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.2rem); letter-spacing: 0.1em; line-height: 2; } /* ---- 全プラン比較 ---- */ .compare { width: min(92vw, 1080px); margin: 0 auto; padding: clamp(28px, calc(var(--vhlock) * 0.05), 48px) 0 clamp(48px, calc(var(--vhlock) * 0.08), 80px); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; } .compare__caption { caption-side: top; text-align: left; margin-bottom: 0.9em; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--washi-dim); } .compare__table th, .compare__table td { padding: 1em 1.1em; text-align: left; white-space: nowrap; } /* 行の区切りも罫線でなく濃淡の縞で */ .compare__table thead tr { background: var(--surface-2); } .compare__table thead th { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; color: var(--washi); } .compare__table tbody tr:nth-child(odd) { background: var(--surface); } .compare__table tbody th a { font-weight: 700; color: var(--washi); text-underline-offset: 4px; } .compare__table tbody th a:hover { color: var(--gold); } .compare__num { font-variant-numeric: tabular-nums; } /* ---- プラン個別 ---- */ .plan-detail > section { width: min(92vw, 840px); margin: 0 auto; padding: clamp(24px, calc(var(--vhlock) * 0.044), 44px) 0; } .plan-detail .page-head { width: min(92vw, 840px); } .plan-price__grid { display: grid; gap: clamp(18px, 3vw, 32px); align-items: end; } @media (min-width: 700px) { .plan-price__grid { grid-template-columns: auto 1fr; } } .plan-price__total { line-height: 1; } .plan-price__num { font-family: var(--font-num); font-weight: 900; font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: 0.01em; } .plan-price__label { display: block; margin-top: 0.8em; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--washi-dim); } /* 価格の再定義（design.md §3）: 1人あたりを見せ場に */ .plan-price__per { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--washi); } .plan-price__per-num { display: block; margin-top: 0.3em; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.9rem, 5.4vw, 2.6rem); line-height: 1.1; letter-spacing: 0.01em; color: var(--gold); } .plan-price__per-label { display: block; margin-top: 0.5em; font-size: 0.74rem; color: var(--washi-dim); } .plan-facts { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 34px); margin-top: clamp(22px, calc(var(--vhlock) * 0.036), 34px); } .plan-facts__item { display: flex; align-items: baseline; gap: 0.7em; } .plan-facts__item dt { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; color: var(--washi-dim); } .plan-facts__item dd { font-weight: 700; font-size: 1rem; } .plan-layout__figure img { width: min(100%, 480px); border-radius: var(--radius-m); } .plan-layout__caption { margin-top: 0.9em; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--washi-dim); } .plan-layout__placeholder { padding: clamp(44px, calc(var(--vhlock) * 0.09), 90px) 24px; background: var(--surface); border-radius: var(--radius-m); text-align: center; font-family: var(--font-mincho); font-weight: 500; letter-spacing: 0.12em; color: var(--washi-dim); } .plan-list { list-style: none; } .plan-list li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; } .plan-list li::before { content: "・"; position: absolute; left: 0; } .plan-list--notes li { color: var(--washi); font-size: 0.9rem; } .plan-cta { text-align: center; padding-bottom: clamp(56px, calc(var(--vhlock) * 0.09), 100px); } .plan-cta__note { margin-top: 1.2em; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--washi-dim); } /* ========================================================================== prefers-reduced-motion：動画は止めてposter、演出は全停止 ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .preloader, .preloader * { animation: none !important; transition: none !important; } /* 光過敏への配慮：開花の光も省略（そもそもプリローダー自体スキップされる） */ .preloader__shell, .preloader__shell-glow { display: none; } .hero__main > *, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* メーター・比較バーは伸ばさず最初から満了状態で見せる */ .intro__meter-fill, .intro__meter-percent { transition: none !important; } /* 移植した意匠アニメも停止し、完成状態で見せる */ .fw-point__icon::before, .fw-point__icon::after, .intro__title::before, .intro__title::after, .preloader__ring { animation: none !important; } .fw-point__icon::before { opacity: 1; transform: scale(1); } .fw-point__icon::after { width: 1.9285714286em; opacity: 1; } } .nowrap { white-space: nowrap; } /* ========================================================================== /video-test（内部確認用）：ヒーロー動画候補の比較 ========================================================================== */ .video-test { width: min(92vw, 900px); margin: 0 auto; padding: clamp(24px, calc(var(--vhlock) * 0.044), 44px) 0 clamp(56px, calc(var(--vhlock) * 0.09), 100px); display: grid; gap: clamp(32px, calc(var(--vhlock) * 0.054), 52px); } .video-test__name { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: 0.1em; } .video-test__note { margin: 0.6em 0 1em; font-size: 0.88rem; color: var(--washi); } .video-test__item video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-m); } .video-test__meta { margin-top: 0.7em; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--washi-dim); } /* ========================================================================== 元制作者の意匠移植（design-inventory.md 保存指定） 動きの数値は現行サイト style-main.min.css から忠実に移植。色のみ現行トーン ========================================================================== */ /* ---- 花火マークの箇条書き（ぽんと弾む→線がすっと伸びる） ---- */ .fw-point { display: flex; align-items: center; gap: 0.9em; } .fw-point__icon { position: relative; flex: 0 0 auto; width: 2.1em; height: 2.1em; } /* マーク本体：元PNGの形をマスクに使い、金に染める */ .fw-point__icon::before { content: ""; position: absolute; inset: 0; background: var(--gold); -webkit-mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; opacity: 0; transform: scale(0); transform-origin: center; } /* 火花の線：アイコンから文字へ向かって伸びる */ .fw-point__icon::after { content: ""; position: absolute; top: 50%; left: 58%; width: 0; height: 1px; background: rgba(242, 237, 227, 0.75); transform: translateY(-50%); transform-origin: left center; opacity: 0; } /* 元の動きを忠実に再現（0.7s / cubic-bezier(0.22,1.4,0.36,1) / 過重で1.25倍→0.9倍→1) */ @keyframes fw-mark { 0% { opacity: 0; transform: scale(0); filter: brightness(1); } 55% { opacity: 1; transform: scale(1.25); filter: brightness(1.8) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); } 75% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } } @keyframes fw-line { 0% { width: 0; opacity: 0; } 15% { opacity: 1; } 100% { width: 1.9285714286em; opacity: 1; } } [data-reveal].is-in .fw-point__icon::before { animation: fw-mark 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) var(--fw-delay, 0s) forwards; } [data-reveal].is-in .fw-point__icon::after { animation: fw-line 0.45s ease-out calc(var(--fw-delay, 0s) + 0.5s) forwards; } /* 元と同じく1項目ずつ時間差で弾む */ .fw-point:nth-child(1) { --fw-delay: 0s; } .fw-point:nth-child(2) { --fw-delay: 0.12s; } .fw-point:nth-child(3) { --fw-delay: 0.24s; } .fw-point:nth-child(4) { --fw-delay: 0.36s; } .fw-point:nth-child(5) { --fw-delay: 0.48s; } .fw-point:nth-child(6) { --fw-delay: 0.6s; } /* 昼パート（明るい地）では朱に染め、線は墨 */ .story--day .fw-point__icon::before { background: var(--vermilion-deep); } .story--day .fw-point__icon::after { background: rgba(35, 43, 54, 0.5); } /* fw-list：既存の「・」を外す */ .fw-list li::before { content: none; } .fw-list li { padding-left: 0; margin-bottom: 0.8em; } /* JS無効・reduced-motion：完成状態で静止表示 */ html:not(.js-ready) .fw-point__icon::before { opacity: 1; transform: scale(1); } html:not(.js-ready) .fw-point__icon::after { width: 1.9285714286em; opacity: 1; } /* ---- FAQの質問行頭：小さな花火マーク（静的） ---- */ .faq__q::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.55em; vertical-align: -0.2em; background: var(--gold); -webkit-mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; mask: url("/assets/img/fireworks-mark.webp") no-repeat center / contain; } /* ---- 花火の輪（見出しの周りで輪が広がる。2.8s無限・0.35sずれの二重） ---- */ @keyframes fireworks-ring { 0% { transform: scale(0.15); opacity: 0; box-shadow: 0 0 0 hsla(0, 0%, 100%, 0), inset 0 0 0 hsla(0, 0%, 100%, 0); } 12% { opacity: 1; } 35% { opacity: 0.9; box-shadow: 0 0 10px hsla(0, 0%, 100%, 0.9), 0 0 22px hsla(0, 0%, 100%, 0.55), inset 0 0 8px hsla(0, 0%, 100%, 0.65); } 70% { transform: scale(1); opacity: 0; box-shadow: 0 0 18px hsla(0, 0%, 100%, 0.2), 0 0 35px hsla(0, 0%, 100%, 0.1), inset 0 0 12px hsla(0, 0%, 100%, 0.1); } 100% { transform: scale(1); opacity: 0; } } /* INTRO縦書き見出し：先頭の文字あたりから輪が広がる */ .intro__title { position: relative; } .intro__title::before, .intro__title::after { content: ""; position: absolute; top: 0.55em; left: 50%; border: 1px solid var(--washi); border-radius: 50%; opacity: 0; transform: scale(0.15); transform-origin: center; pointer-events: none; will-change: transform, opacity, box-shadow; } .intro__title::before { width: 5.2142857143em; height: 5.2142857143em; margin: -2.6071428572em 0 0 -2.6071428572em; } .intro__title::after { width: 6.0714285714em; height: 6.0714285714em; margin: -3.0357142857em 0 0 -3.0357142857em; } .intro__title.is-in::before { animation: fireworks-ring 2.8s ease-out infinite; } .intro__title.is-in::after { animation: fireworks-ring 2.8s ease-out 0.35s infinite; } /* プリローダー：題字の背後でも同じ輪がゆっくり開く */ .preloader__logo { position: relative; } .preloader__ring { position: absolute; top: 50%; left: 50%; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; border: 1px solid rgba(242, 237, 227, 0.8); border-radius: 50%; opacity: 0; transform: scale(0.15); pointer-events: none; animation: fireworks-ring 2.8s ease-out 1.1s infinite; } /* ---- 二重円バッジ（元:「声」アイコン）→ 時間帯の漢字に応用 ---- */ .time-head__kanji { position: relative; } .time-head__kanji::before, .time-head__kanji::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(242, 237, 227, 0.34); pointer-events: none; } .time-head__kanji::before { width: 1.24em; height: 1.24em; } .time-head__kanji::after { width: 1.42em; height: 1.42em; } .story--day .time-head__kanji::before, .story--day .time-head__kanji::after { border-color: rgba(35, 43, 54, 0.32); } /* ---- 番付: クラス見出し・プラン名の読み・キャッチ（公式資料準拠） ---- */ .banzuke__class-head { margin-top: clamp(18px, calc(var(--vhlock) * 0.03), 26px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.9rem, 2vw, 1rem); letter-spacing: 0.22em; color: var(--washi-dim); } .banzuke__class-head:first-child { margin-top: 0; } .banzuke__yomi { margin-left: 0.7em; white-space: nowrap; /* 読み(エクスプレス/パノラマ)を語中で折らない */ font-family: var(--font-mincho); font-weight: 500; font-size: 0.5em; letter-spacing: 0.2em; color: var(--washi-dim); } .banzuke__catch { margin-top: 0.7em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.98rem, 2.2vw, 1.15rem); letter-spacing: 0.1em; color: var(--gold); } .banzuke__card--general .table-scroll { margin-top: clamp(16px, calc(var(--vhlock) * 0.026), 22px); } .page-head__yomi { margin-left: 0.6em; font-family: var(--font-mincho); font-weight: 500; font-size: 0.4em; letter-spacing: 0.22em; color: var(--washi-dim); } .page-head__catch { margin-top: 0.8em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: 0.1em; color: var(--gold); } .page-head__source { margin-top: 1.4em; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--washi-dim); } /* 価格未公開時の表示 */ .banzuke__tba { margin-top: 0.35em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.15rem); letter-spacing: 0.12em; color: var(--gold); } /* ========================================================================== 会場マップ（対話型。座標はSVG viewBox 1722x630 に対する実測値） ========================================================================== */ .venue-map { width: min(92vw, 1080px); margin: 0 auto; padding: clamp(28px, calc(var(--vhlock) * 0.05), 48px) 0; } /* モバイルは横スクロールで原寸感を保つ（タップ目標を潰さない） */ .venue-map__scroll { margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 30px); overflow-x: auto; -webkit-overflow-scrolling: touch; } .venue-map__wrap { position: relative; min-width: 900px; } .venue-map__wrap img { width: 100%; height: auto; display: block; border-radius: var(--radius-s); } .venue-map__overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .vm { cursor: pointer; outline: none; } /* 当たり判定用の不可視円（タップ目標44px相当を確保） */ .vm-hit { fill: transparent; } /* 円スポット（VVIP）：金の輪 + 微弱な面 */ .vm-spot { fill: rgba(232, 180, 74, 0.14); stroke: var(--gold); stroke-width: 2.5; transition: fill 0.25s ease, stroke-width 0.25s ease; } /* 区画ポリゴン（VIP）：焼き込みの色枠の上に、光る輪郭を重ねる */ .vm-area { fill: rgba(242, 237, 227, 0.08); stroke: rgba(242, 237, 227, 0.85); stroke-width: 2.5; stroke-linejoin: round; transition: fill 0.25s ease, stroke 0.25s ease; } /* 中心の光点：クリックできることを光で伝える */ .vm-dot { fill: #fff3d8; filter: drop-shadow(0 0 6px rgba(255, 236, 190, 0.9)); } /* 鼓動する光（ポインター）。花火の輪と同じ呼吸 */ .vm-pulse { fill: none; stroke: rgba(255, 240, 200, 0.9); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: vm-pulse 2.4s ease-out infinite; } .vm:nth-of-type(2n) .vm-pulse { animation-delay: 0.8s; } .vm:nth-of-type(3n) .vm-pulse { animation-delay: 1.5s; } @keyframes vm-pulse { 0% { transform: scale(0.55); opacity: 0; } 18% { opacity: 0.95; } 75% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* ラベルチップ */ .vm-chip rect { fill: rgba(7, 11, 20, 0.82); stroke: rgba(232, 180, 74, 0.65); stroke-width: 1.5; transition: stroke 0.25s ease, fill 0.25s ease; } .vm-chip text { fill: var(--washi); font-family: var(--font-mincho); font-size: 22px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle; } /* ホバー/フォーカス：輪郭と面を強め、チップを金に */ .vm:hover .vm-spot, .vm:focus-visible .vm-spot { fill: rgba(232, 180, 74, 0.3); stroke-width: 4; } .vm:hover .vm-area, .vm:focus-visible .vm-area { fill: rgba(232, 180, 74, 0.22); stroke: var(--gold); } .vm:hover .vm-chip rect, .vm:focus-visible .vm-chip rect { stroke: var(--gold); fill: rgba(7, 11, 20, 0.95); } .vm:focus-visible .vm-spot, .vm:focus-visible .vm-area { stroke: var(--kiku); } .venue-map__note { margin-top: 1em; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--washi-dim); } @media (prefers-reduced-motion: reduce) { .vm-pulse { animation: none; opacity: 0.5; transform: scale(1); } } /* ========================================================================== ヒーロー ポスター型 C案（確認用 /hero-c1 /hero-c2） 序列: 25,000発(主役) > 日付・場所(同格の準主役) > 時刻(脇役) > CTA ========================================================================== */ .hero-poster .hero { align-items: center; padding-top: clamp(76px, calc(var(--vhlock) * 0.11), 120px); /* ヘッダー題字との呼吸 */ } .hero-poster .hero__inner { justify-items: center; padding-bottom: clamp(44px, calc(var(--vhlock) * 0.07), 76px); } .hero-poster .hero__main { display: flex; flex-direction: column; align-items: center; text-align: center; } /* 暗幕: センター配置に合わせ、radialを中央下寄りへ(左右は花火を見せる) */ .hero-poster .hero__scrim { background: linear-gradient( 180deg, rgba(18, 27, 44, 0.34) 0%, rgba(18, 27, 44, 0.05) 26%, rgba(18, 27, 44, 0.22) 60%, var(--ink) 100% ), radial-gradient( 54% 48% at 50% 64%, rgba(7, 11, 20, 0.58) 0%, transparent 72% ); } /* 主役: 西日本最大級(小・字間広め) + 25,000発(特大) */ .hero-poster .hero__title-label { font-size: clamp(1rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: 0.52em; text-indent: 0.52em; /* 字間による右ズレをセンターに戻す */ } .hero-poster .hero__title-num { margin-left: 0; font-size: clamp(4.6rem, 17vw, 11rem); } /* 金の様式線(C1)。C2は帯の上下線に役割を譲る */ .hero-poster .hero__rule { display: block; width: clamp(56px, 8vw, 92px); height: 2px; background: var(--gold); margin: clamp(18px, calc(var(--vhlock) * 0.03), 28px) 0 clamp(16px, calc(var(--vhlock) * 0.026), 24px); } /* 準主役: 日付と場所を同格の大きさで */ .hero-poster .hero__when-date { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.7rem, 4.8vw, 2.6rem); line-height: 1.15; letter-spacing: 0.02em; color: var(--washi); font-variant-numeric: tabular-nums; } .hero-poster .hero__when-date small { margin-left: 0.3em; font-family: var(--font-mincho); font-weight: 800; font-size: 0.44em; vertical-align: 0.18em; letter-spacing: 0.1em; color: var(--washi-dim); } .hero-poster .hero__when-place { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.5rem, 4.2vw, 2.3rem); line-height: 1.3; letter-spacing: 0.16em; text-indent: 0.16em; color: var(--washi); } /* 脇役: 時刻は最小の一行 */ .hero-poster .hero__times { margin-top: clamp(14px, calc(var(--vhlock) * 0.022), 20px); font-size: clamp(0.76rem, 1.7vw, 0.85rem); font-weight: 500; letter-spacing: 0.2em; color: var(--washi-dim); } .hero-poster .hero__cta-area { margin-top: clamp(28px, calc(var(--vhlock) * 0.046), 44px); } /* ---- C1: ポスターの版面(縦一本・静的) ---- */ .hero-c1 .hero__when { display: flex; flex-direction: column; align-items: center; gap: 0.3em; } .hero-c1 .hero__when-sep { display: none; } /* ---- C2: 公演の幕(一枚看板の帯) ---- */ .hero-c2 .hero__rule { display: none; } .hero-c2 .hero__when { display: flex; align-items: baseline; gap: 0.85em; margin-top: clamp(20px, calc(var(--vhlock) * 0.034), 30px); padding: 0.55em 1.7em; /* 帯の上下に細い様式線(公演看板の様式) */ border-top: 1px solid rgba(232, 180, 74, 0.65); border-bottom: 1px solid rgba(232, 180, 74, 0.65); } .hero-c2 .hero__when-sep { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(1.1rem, 3vw, 1.6rem); color: rgba(232, 180, 74, 0.8); } /* 380px: C2の帯は縦積みに(帯線は維持)。序列は崩さない */ @media (max-width: 480px) { .hero-c2 .hero__when { flex-direction: column; align-items: center; gap: 0.25em; padding: 0.7em 1.2em; } .hero-c2 .hero__when-sep { display: none; } } /* ========================================================================== ヒーロー最終形（確認用 /hero-final） 確定: 純白・明朝・ロゴセンター上部。トグルは「不揃いの組み(控えめ/大胆)」のみ。 縦柱「西日本最大級の花火。」= 一枚の書として設計(全文字同サイズにしない)。 ========================================================================== */ .visually-hidden { 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; } /* 大見出しの改行制御：意味のまとまり（句読点で切る等）を1語として扱い不自然な折返しを防ぐ。 inline-block ではなく nowrap のみ＝行内で語群単位に折返す */ .jpnb { white-space: nowrap; } .hero-final-page .hero { align-items: center; padding-top: clamp(72px, calc(var(--vhlock) * 0.1), 116px); } .hero-final-page .hero__scrim { background: linear-gradient( 180deg, rgba(18, 27, 44, 0.4) 0%, rgba(18, 27, 44, 0.12) 30%, rgba(18, 27, 44, 0.16) 62%, var(--ink) 100% ); } .hero-final-page .hero__inner { padding-bottom: clamp(40px, calc(var(--vhlock) * 0.065), 72px); } .hero-final { position: relative; width: 100%; min-height: calc(var(--vhlock) * 0.58); display: flex; flex-direction: row; /* 縦柱（左）＋数字（右）を横並び＝縦表示を全幅で維持 */ align-items: center; justify-content: center; gap: clamp(8px, 2.6vw, 40px); } /* ========================================================================== 縦柱「西日本最大級の花火。」= 一枚の書（不揃いの組み） 2列（右: 西日本最大級 / 左: の花火。）。強調字を大きく、助詞・句点を小さく。 ========================================================================== */ .hero-final__pillar { position: static; /* 絶対配置をやめ、数字と横並びの列に（縦表示を維持したまま重なり回避） */ margin: 0; flex: none; display: flex; flex-direction: row-reverse; /* 日本語縦書き: 1列目を右に */ align-items: flex-start; gap: clamp(0px, 0.2vw, 4px); /* 2行の行間を詰めて一枚の書の密度を上げる */ /* 柱の基準サイズ。個々の文字は em 比率で不揃いにする（ヒーロー高いっぱい） */ font-size: clamp(1.7rem, calc(var(--vhlock) * 0.07), 5.1rem); font-family: "Shippori Mincho B1", "Zen Old Mincho", serif; font-weight: 800; line-height: 1; color: #fff; /* 極太に見せる: 同色ストロークを極細加算（paint-orderで外側に） */ -webkit-text-stroke: 0.6px #fff; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(7, 11, 20, 0.92), 0 2px 10px rgba(7, 11, 20, 0.6); } .hero-final__col { writing-mode: vertical-rl; text-orientation: upright; } /* 各列に局所座布団（縦長・羽ぼかし） */ .hero-final__col { position: relative; } .hero-final__col::before { content: ""; position: absolute; inset: -0.15em -0.28em; z-index: -1; background: radial-gradient( 54% 58% at 50% 50%, rgba(7, 11, 20, 0.46) 0%, rgba(7, 11, 20, 0.24) 58%, transparent 82% ); } /* 文字の階調（em比率）。b要素で1字ずつ制御。 注: vertical-rl では block は横方向に流れるため inline-block で縦に積む */ .hero-final__pillar b { display: inline-block; font-weight: 800; font-style: normal; } /* 不揃いの組み（控えめ確定）: サイズ差を穏やかに。 大胆版は writing-mode × transform で崩壊リスクがあり廃案（Playbook Part 11）。 縦組みに transform の小細工は入れない */ .hero-final__pillar b.lg { font-size: 1.15em; } .hero-final__pillar b.md { font-size: 1em; } .hero-final__pillar b.sm { font-size: 0.72em; margin: 0.1em 0; /* 助詞は上下にわずかな呼吸 */ } /* 句点: 行末の呼吸として、上にひと呼吸空けて小さく置く */ .hero-final__pillar b.dot { font-size: 0.58em; margin-top: 0.12em; } /* ========================================================================== 中央: 純白の彫刻数字 25,000発（カンマ・桁詰めの再設計） ========================================================================== */ .hero-final__center { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-final__head { margin: 0; line-height: 1; } .hero-final__num { display: inline-flex; align-items: flex-end; font-family: var(--font-num); font-weight: 900; font-size: clamp(4.9rem, 18.5vw, 12.5rem); line-height: 0.9; letter-spacing: 0; /* 詰めは桁ごとに個別調整するため0に */ font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(7, 11, 20, 0.85), 0 3px 14px rgba(7, 11, 20, 0.65), 0 8px 40px rgba(7, 11, 20, 0.5); } /* 桁: 光学的に詰めて数字全体を一つの塊に */ .hero-final__num .d { font-weight: 900; font-style: normal; margin-left: -0.035em; } .hero-final__num .d:first-child { margin-left: 0; } /* カンマ: 装飾要素として設計（小さく・少し持ち上げ・前後を強く詰める） */ .hero-final__num .comma { font-weight: 900; font-style: normal; font-size: 0.62em; align-self: flex-end; margin: 0 -0.1em 0 -0.13em; transform: translateY(-0.12em); /* ベースラインをわずかに上げて数字の呼吸に */ } /* 「発」= 同じ白で塊に従属（右下・バッジ化しない） */ .hero-final__hatsu { margin-left: 0.14em; padding-bottom: 0.16em; font-family: var(--font-mincho); font-weight: 800; font-size: 0.24em; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 10px rgba(7, 11, 20, 0.7); } /* ---- 日付・場所（整然とした明朝で、柱の書と質感を分ける） ---- */ .hero-final__info { position: relative; margin-top: clamp(18px, calc(var(--vhlock) * 0.03), 30px); padding: clamp(14px, calc(var(--vhlock) * 0.022), 22px) clamp(20px, 4vw, 44px) clamp(18px, calc(var(--vhlock) * 0.028), 28px); } .hero-final__info::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient( 66% 66% at 50% 54%, rgba(7, 11, 20, 0.6) 0%, rgba(7, 11, 20, 0.36) 58%, transparent 85% ); } .hero-final__when { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.18em; } .hero-final__date { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.8rem, 4.6vw, 2.7rem); line-height: 1.1; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(7, 11, 20, 0.9), 0 2px 10px rgba(7, 11, 20, 0.6); } .hero-final__sat { margin-left: 0.4em; font-family: var(--font-num); font-weight: 900; font-size: 0.42em; letter-spacing: 0.22em; vertical-align: 0.32em; color: var(--kiku); } .hero-final__place { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: 0.16em; text-indent: 0.16em; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(7, 11, 20, 0.9), 0 2px 10px rgba(7, 11, 20, 0.6); } .hero-final__times { position: relative; z-index: 1; margin-top: clamp(10px, calc(var(--vhlock) * 0.018), 16px); font-size: clamp(0.92rem, 2.2vw, 1.12rem); /* 認識しやすく拡大 */ font-weight: 600; letter-spacing: 0.16em; color: #fff; /* 白ではっきり */ text-shadow: 0 1px 4px rgba(7, 11, 20, 0.9), 0 0 2px rgba(7, 11, 20, 0.8); } /* ---- ヒーローの後援表記（2026-08-28）---- 日付ブロックの直下。金の細いヘアライン1本＋一行だけ。 座布団・枠・グラデーション・box-shadow は使わない。 文字は花火の映像の上に乗るので、可読性のためテキストシャドウだけ許可 （すぐ上の .hero-final__times と同じ指定を流用する＝新しい見た目を作らない）。 大きさは日付（clamp(1.8rem,4.6vw,2.7rem)）の4割前後に抑える。 ヘアラインの幅は --hero-rule-w で切り替えられる（短い中央寄せを採用）。 */ .hero-final__support { position: relative; z-index: 1; margin-top: clamp(14px, calc(var(--vhlock) * 0.024), 22px); padding-top: clamp(12px, calc(var(--vhlock) * 0.02), 18px); font-family: var(--font-mincho); font-weight: 600; /* 2026-08-28: 白濱の指示で「大阪・浜寺公園」と同じ大きさ・白に変更。 上限（2.25rem）と可変（4vw）は .hero-final__place と同値。 **下限だけ 1.5rem → 1.2rem に下げてある**。同値のままだと380pxで 「後援：高石市／高石商工会議所」15文字が2行に折り返すため （折り返すと格が落ちる＝1行維持は本人指定）。 */ font-size: clamp(1.2rem, 4vw, 2.25rem); letter-spacing: 0.14em; text-indent: 0.14em; line-height: 1.4; white-space: nowrap; color: #fff; text-shadow: 0 1px 4px rgba(7, 11, 20, 0.9), 0 0 2px rgba(7, 11, 20, 0.8); } .hero-final__support::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--hero-rule-w, clamp(56px, 12vw, 84px)); height: 1px; /* 2026-08-28: 金 → 白（白濱の指示）。文字と同じ白にして、濃さだけ落とす。 */ background: #fff; opacity: .55; } .hero-final__cta-area { margin-top: clamp(28px, calc(var(--vhlock) * 0.044), 44px); } /* ---- ロゴ: センター上部で確定 ---- */ .hero-final-page .site-header { justify-content: center; } .hero-final-page .site-header__side { position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(18px, 4vw, 48px); align-items: flex-end; } /* 最上部ではロゴを影で浮かせる（白フチ付きカラーロゴのまま） */ .hero-final-page[data-scroll="top"] .site-header__logo img { filter: drop-shadow(0 2px 6px rgba(7, 11, 20, 0.85)) drop-shadow(0 0 18px rgba(7, 11, 20, 0.5)); } /* ---- スクロール時のグローバルヘッダー固定 ---- */ .hero-final-page[data-scroll="scrolled"] .site-header { position: fixed; top: 0; left: 0; right: 0; justify-content: space-between; background: rgba(11, 19, 34, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding-top: clamp(10px, 1.6vw, 16px); padding-bottom: clamp(10px, 1.6vw, 16px); box-shadow: 0 1px 0 rgba(232, 180, 74, 0.35); transition: background-color 0.3s ease; } .hero-final-page[data-scroll="scrolled"] .site-header__side { position: static; } .hero-final-page[data-scroll="scrolled"] .site-header__logo img { width: clamp(120px, 16vw, 170px); } /* ---- ファーストビューではグローバルナビ（メニュー/ハンバーガー）を出さない。 スクロールしたら現れる（ロゴは残す） ---- */ .hero-final-page .site-header__side { transition: opacity 0.3s ease, visibility 0.3s ease; } .hero-final-page[data-scroll="top"] .site-header__side { opacity: 0; visibility: hidden; pointer-events: none; } /* ---- 確認用トグル（不揃いの組みのみ・ラボ専用） ---- */ .hf-controls { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(11, 19, 34, 0.94); border: 1px solid rgba(232, 180, 74, 0.4); border-radius: 4px; font-family: var(--font-mincho); } .hf-controls p { margin: 0 0 2px; font-size: 0.64rem; letter-spacing: 0.14em; color: var(--washi-dim); } .hf-controls button { appearance: none; padding: 0.5em 0.9em; background: rgba(242, 237, 227, 0.08); border: 1px solid rgba(242, 237, 227, 0.24); border-radius: 3px; color: var(--washi); font-size: 0.74rem; letter-spacing: 0.06em; cursor: pointer; } .hf-controls button:hover { background: rgba(242, 237, 227, 0.16); } /* ---- 1320px以下: 縦柱(縦組み)は中央の数字群と重なるため、横組み2行に折る （西日本最大級の / 花火。）。切替点は交差判定の実測で決定 （縦柱が呼吸を保てる最小幅≈1262px、安全マージン込み1320px）---- */ /* 760〜900px（タブレット＝3枚バナーが横並びの幅）：縦柱も「縦組み」のまま維持。 数字と柱のサイズを詰めて横並び＆重なり回避（3枚横並び ⟺ 柱は縦、を一致させる） */ @media (min-width: 760px) and (max-width: 900px) { .hero-final { gap: clamp(6px, 2.4vw, 20px); } .hero-final__pillar { font-size: clamp(1.5rem, 8vw, 3rem); } .hero-final__num { font-size: clamp(3rem, 15.5vw, 6.4rem) !important; } } /* スマホ（759px以下＝バナーが縦積みになる幅）：縦柱を横組み2行にして数字の「上」に 大きく配置し主役に。「西日本最大級／の花火。」→ その下に 25,000発 */ @media (max-width: 759px) { .hero-final { flex-direction: column; gap: clamp(8px, calc(var(--vhlock) * 0.02), 18px); } .hero-final__pillar { flex-direction: column; /* 2列を上下2行に */ align-items: center; gap: 0; font-size: clamp(2rem, 10.5vw, 3.4rem); /* スマホで目立つ大きさ */ line-height: 1.06; } .hero-final__col { writing-mode: horizontal-tb; text-orientation: mixed; white-space: nowrap; } .hero-final__num { font-size: clamp(3.2rem, 19vw, 6rem) !important; } } @media (prefers-reduced-motion: reduce) { .hero-final-page[data-scroll="scrolled"] .site-header { transition: none; } } /* 3枚横並びは「券の文字が認識できる」下限まで下げる（実測でタブレット760pxまで可読）。 cqw基準の文字はバナー幅に比例するため、3列でも比率は保たれ小さくなるだけ＝下限で切替 */ @media (min-width: 760px) { /* バナーをもっと上へ（下の余白を大きく＝動画がバナー下により広く見える）＋左右の余裕 */ .hero-band { padding: clamp(14px, calc(var(--vhlock) * 0.03), 34px) clamp(20px, 4vw, 80px) clamp(80px, calc(var(--vhlock) * 0.17), 190px); } } /* 760〜825px（狭いタブレット）：3列だと券が低くキャッチ（コンテナ246px以下で自動的に畳まれる）は 隠れるが、券名＝大きな明朝はしっかり認識できる。券の縦をわずかに伸ばし、券名＋イラストで凛と見せる */ @media (min-width: 760px) and (max-width: 825px) { } /* スマホ（759px以下）：3枚横並びは券の文字が潰れるため縦積み。 全幅の巨大バナーは中がスカスカなので券サイズに抑えて中央寄せ＋縦を詰める */ @media (max-width: 759px) { } /* バナーが狭いとき（スマホ2列や小さめPCの4列）は詳細文を畳み、 券名＋イラスト＋バッジ/帯のコンパクト表示にする（自幅で判定＝コンテナクエリ） */ @container (max-width: 246px) { } /* スマホ＝3枚縦積みの存在感が強すぎるので、縦をやや詰めて主張を抑える（横幅は広いまま） */ @media (max-width: 680px) { } @media (prefers-reduced-motion: reduce) { } /* ========================================================================== §2 お知らせ（ニュースブロック）— 明るい和紙パネルで背景に溶かさずくっきり ========================================================================== */ .news2 { position: relative; z-index: 2; background: var(--ink); padding: clamp(40px, calc(var(--vhlock) * 0.07), 82px) clamp(18px, 4vw, 40px); } .news2__inner { width: min(100%, 940px); margin: 0 auto; background: #f5f1e8; /* 角丸はここだけの例外になっていたので直角へ。影も落とす（面の反転で十分区別できる） */ border-radius: 0; padding: clamp(22px, 3.4vw, 40px) clamp(20px, 3.4vw, 44px); } .news2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: clamp(12px, calc(var(--vhlock) * 0.02), 20px); padding-bottom: 0.7em; border-bottom: 2px solid rgba(35, 43, 54, 0.16); } .news2__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 1.8rem); letter-spacing: 0.1em; color: var(--sumi); } .news2__all { font-family: var(--font-mincho); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--vermilion-deep); text-decoration: none; white-space: nowrap; } .news2__all:hover { text-decoration: underline; } .news2__list { display: block; } .news2__item + .news2__item { border-top: 1px solid rgba(35, 43, 54, 0.13); } .news2__link { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6em 1em; padding: clamp(12px, calc(var(--vhlock) * 0.018), 18px) 0; text-decoration: none; } .news2__date { font-family: var(--font-num); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: #7a6636; } .news2__cat { justify-self: start; font-family: var(--font-mincho); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; color: #fff; background: var(--vermilion-deep); padding: 0.28em 0.7em; border-radius: 0; } .news2__headline { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(0.9rem, 2.4vw, 1.02rem); line-height: 1.5; color: var(--sumi); } .news2__link:hover .news2__headline { color: var(--vermilion-deep); } @media (max-width: 560px) { .news2__link { grid-template-columns: auto auto; } .news2__headline { grid-column: 1 / -1; } } /* ========================================================================== §2.5 PR動画（YouTubeファサード） ========================================================================== */ .prv { position: relative; z-index: 2; overflow: hidden; /* 再生前イラスト額装のはみ出しを塞ぐ＝横スクロール防止 */ background: var(--ink); padding: clamp(28px, calc(var(--vhlock) * 0.05), 64px) clamp(18px, 4vw, 40px) clamp(56px, calc(var(--vhlock) * 0.1), 110px); text-align: center; } .prv__inner { width: min(100%, 1180px); margin: 0 auto; } /* イラスト額装を地に、動画サムネイルはその「空き中央」に収める（額装の比率＝生成画像1376:768） */ .prv__stage { position: relative; width: 100%; aspect-ratio: 1376 / 768; } /* 再生前のイラスト額装（画像生成）。墨紺の地がセクションに溶け、四隅・周縁の花火/車/観覧席が動画を額装 */ .prv__ornament { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; pointer-events: none; } .prv__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.6rem); letter-spacing: 0.08em; line-height: 1.2; color: var(--washi); } .prv__lead { margin-top: 0.8em; font-size: clamp(0.85rem, 2.4vw, 1rem); letter-spacing: 0.04em; color: var(--washi-dim); } .prv__frame { position: absolute; left: 50%; top: 53%; /* 花火が上に寄るぶん動画を少し下げ、額装の空き中央に収める */ transform: translate(-50%, -50%); z-index: 1; /* イラスト額装(z0)より前面 */ width: 70%; /* 額装内の動画を少し大きく */ aspect-ratio: 16 / 9; /* ページ内の他要素（カード・ボタン・お知らせ枠・表）が全て直角なので合わせる */ border-radius: 0; overflow: hidden; cursor: pointer; border: 1px solid rgba(232, 180, 74, 0.3); box-shadow: 0 24px 60px rgba(3, 6, 12, 0.6); } @media (max-width: 900px) { .prv__frame { width: 80%; top: 52%; } } @media (max-width: 600px) { .prv__frame { width: 92%; top: 50%; } } /* スマホ：額装イラストを画面いっぱいに寄せる（左右の余白と下の死に空間を詰めて大きく）。 .prv は overflow:hidden なので全幅でも横スクロールしない。縦paddingはpx固定でバー開閉無関係 */ @media (max-width: 600px) { .prv { padding: 22px clamp(4px, 1.6vw, 12px) 32px; } .prv__inner { width: 100%; } } .prv__poster { width: 100%; height: 100%; object-fit: cover; display: block; } .prv__scrim { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(7, 11, 20, 0.12), rgba(7, 11, 20, 0.5)); transition: background 0.25s ease; } .prv__frame:hover .prv__scrim { background: radial-gradient(60% 60% at 50% 50%, rgba(7, 11, 20, 0.02), rgba(7, 11, 20, 0.38)); } /* 再生ボタン＝三角のみ（円は廃止）。白い三角＋影で、動画上でも再生と分かる。 */ .prv__play { position: absolute; inset: 0; margin: auto; z-index: 2; width: clamp(72px, 10vw, 118px); height: clamp(72px, 10vw, 118px); display: grid; place-content: center; border: none; border-radius: 0; background: none; /* 丸を塗らない＝三角だけ */ color: #fff; /* 三角＝白 */ cursor: pointer; filter: drop-shadow(0 3px 11px rgba(0, 0, 0, 0.78)); /* 影で視認性（円なしでも読める） */ transition: transform 0.2s ease, filter 0.2s ease; } .prv__play svg { width: 100%; height: 100%; margin: 0; } /* 三角を大きく主役に */ .prv__frame:hover .prv__play, .prv__frame:focus-within .prv__play { transform: scale(1.12); /* ホバー/タップで浮き上がる */ filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.85)); } .prv__frame iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; } /* ========================================================================== §PLANS 特別観覧席・対話型会場マップ（夜の航空写真） 枠座標は data/aerial-shapes.json（ユーザー実測）→ build.mjs が生成。 ========================================================================== */ .amap-sec { width: min(94vw, 1240px); margin: 0 auto; padding: clamp(28px, calc(var(--vhlock) * 0.05), 48px) 0 0; } .amap-scroll { margin-top: clamp(20px, calc(var(--vhlock) * 0.036), 32px); border-radius: var(--radius-s); overflow: hidden; } .amap { position: relative; width: 100%; background: var(--ink-deep); } .amap__base { display: block; width: 100%; height: auto; } .amap svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* エリア（クリック可能） */ .amap__area { cursor: pointer; outline: none; } .amap__glow, .amap__core, .amap__fill { transition: opacity 0.25s ease, stroke-width 0.25s ease; } /* クリックできる印＝枠がゆっくり呼吸する（打ち上げ等の非クリックは静止） */ @keyframes amap-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .amap__area .amap__glow { stroke-width: 11; animation: amap-breathe 2.2s ease-in-out infinite; } .amap__area:hover .amap__glow, .amap__area:focus-visible .amap__glow, .amap.has-active .amap__area .amap__glow { animation: none; } .amap__launch { opacity: 0.72; } @media (prefers-reduced-motion: reduce) { .amap__area .amap__glow { animation: none; } } .amap__area:hover .amap__glow, .amap__area:focus-visible .amap__glow { opacity: 0.9; stroke-width: 11; } .amap__area:focus-visible .amap__core { stroke-width: 3.4; } /* 選択中：他エリアを沈めて対象だけ残す（フォーカスモード） */ .amap.has-active .amap__area:not(.is-active) .amap__glow { opacity: 0.14; } .amap.has-active .amap__area:not(.is-active) .amap__core { opacity: 0.3; } .amap.has-active .amap__area:not(.is-active) .amap__fill { opacity: 0.25; } .amap.has-active .amap__label:not(.is-active) { opacity: 0.3; } .amap.has-active .amap__area.is-active .amap__glow { opacity: 1; stroke-width: 11; } /* ラベル：クローズアップ画像と同じ「黒フチなし・自色グロー」のセリフ */ .amap__label { font-family: Georgia, "Times New Roman", var(--font-mincho), serif; font-weight: 700; letter-spacing: 0.09em; cursor: pointer; transition: opacity 0.25s ease; } .amap__label--launch { font-family: var(--font-mincho); cursor: default; } .amap__label--fast { filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8)) drop-shadow(0 0 9px #ff5a8c) drop-shadow(0 0 22px rgba(255,90,140,.53)); } .amap__label--lounge { filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8)) drop-shadow(0 0 9px #ffbe3c) drop-shadow(0 0 22px rgba(255,190,60,.53)); } .amap__label--panorama { filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8)) drop-shadow(0 0 9px #5aa0ff) drop-shadow(0 0 22px rgba(90,160,255,.53)); } .amap__label--drum, .amap__label--fire, .amap__label--express { filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8)) drop-shadow(0 0 9px #ff3c32) drop-shadow(0 0 22px rgba(255,60,50,.53)); } .amap__label--launch { filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8)) drop-shadow(0 0 9px #c9932a) drop-shadow(0 0 22px rgba(201,147,42,.53)); } /* スマホ：横スクロールで原寸感を保つ（ラベルが潰れない下限900px） */ .amap-hint { display: none; } @media (max-width: 700px) { /* マップは全体を一望（横スライド廃止）。縮小で読めないSVG文字と ラベル用の引き出し線は隠す（線だけ宙に残る事故防止）。 エリア選択は色枠タップ+下の一覧ボタンが担う */ .amap svg text, .amap svg line { display: none; } } /* エリア一覧（地図が読めない人の導線・地図と相互ハイライト） */ .amap-list { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; margin-top: clamp(16px, calc(var(--vhlock) * 0.026), 24px); } .amap-list__btn { appearance: none; cursor: pointer; padding: 0.62em 1.4em; background: transparent; border: 1px solid rgba(242, 237, 227, 0.24); border-radius: 0; color: var(--washi); font-family: Georgia, "Times New Roman", var(--font-mincho), serif; font-weight: 700; font-size: clamp(0.78rem, 1.7vw, 0.9rem); letter-spacing: 0.1em; transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .amap-list__btn:hover { border-color: var(--acol, var(--washi)); } .amap-list__btn.is-active { border-color: var(--acol, var(--washi)); color: var(--acol, var(--washi)); box-shadow: 0 0 14px color-mix(in srgb, var(--acol, #fff) 35%, transparent), inset 0 0 10px color-mix(in srgb, var(--acol, #fff) 12%, transparent); } /* ---- エリア詳細パネル＝ティーザー。エリア色(--acol)がマップから流れ込む ---- */ /* ライトボックス型：画面全体がそのエリアの世界に切り替わる */ .apanel-wrap { position: fixed; inset: 0; z-index: 90; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(3, 6, 12, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .apanel-wrap.is-open { display: block; } .apanel { --acol: #e8b44a; --alab: #f2ede3; position: relative; width: min(92vw, 720px); /* 生のvhは使わない（アプリ内ブラウザのバー開閉で再計算されガタつくため）＝--vhlockへ凍結 */ margin: clamp(20px, calc(var(--vhlock) * 0.06), 64px) auto clamp(40px, calc(var(--vhlock) * 0.08), 80px); padding: clamp(30px, 5vw, 56px) clamp(22px, 4.4vw, 56px); background: radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--acol) 12%, transparent) 0%, transparent 55%), #101a2e; border: 1px solid color-mix(in srgb, var(--acol) 42%, transparent); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 44px color-mix(in srgb, var(--acol) 18%, transparent); /* 出現の振付：暗幕の上に1枚のカードが浮かび上がる */ opacity: 0; transform: translateY(18px) scale(0.975); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .apanel.is-open { opacity: 1; transform: none; } .apanel > * { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .apanel.is-open > * { opacity: 1; transform: none; } .apanel.is-open > :nth-child(2) { transition-delay: 0.08s; } .apanel.is-open > :nth-child(3) { transition-delay: 0.16s; } .apanel.is-open > :nth-child(4) { transition-delay: 0.24s; } .apanel.is-open > :nth-child(5) { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .apanel, .apanel > * { transition: none; opacity: 1; transform: none; } } .apanel__head { display: flex; align-items: baseline; gap: 1em; } .apanel__rank { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.3em; color: var(--acol); } .apanel__units { margin-left: 1.4em; letter-spacing: 0.14em; color: var(--washi-dim); } .apanel__close { appearance: none; margin-left: auto; padding: 0.2em 0; background: none; border: none; border-bottom: 1px solid rgba(242, 237, 227, 0.35); color: var(--washi-dim); font-family: var(--font-mincho); font-size: 0.8rem; letter-spacing: 0.22em; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; } .apanel__close:hover { color: var(--washi); border-color: var(--washi); } .apanel__name { margin-top: 0.5em; font-family: Georgia, "Times New Roman", var(--font-mincho), serif; font-weight: 700; font-size: clamp(2rem, 5.4vw, 3rem); letter-spacing: 0.05em; color: var(--alab); text-shadow: 0 0 18px color-mix(in srgb, var(--acol) 55%, transparent); } .apanel__catch { margin-top: 0.5em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: 0.08em; } .apanel__media { margin-top: clamp(18px, 3vw, 26px); } .apanel__media img { width: 100%; height: auto; display: block; border: 1px solid color-mix(in srgb, var(--acol) 30%, transparent); box-shadow: 0 14px 44px rgba(2, 5, 10, 0.55); } .apanel__cta-area { margin-top: clamp(24px, 3.8vw, 36px); } .apanel__cta { display: inline-block; padding: 1em 2.6em; background: var(--vermilion-deep); border: none; border-radius: 0; color: var(--washi); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.9rem, 2vw, 1rem); letter-spacing: 0.14em; text-decoration: none; transition: background-color 0.25s ease, box-shadow 0.25s ease; } .apanel__cta:hover { background: var(--vermilion); box-shadow: 0 0 22px color-mix(in srgb, var(--acol) 40%, transparent); } .apanel__cta--line { background: transparent; border: 1px solid color-mix(in srgb, var(--acol) 65%, transparent); color: var(--alab); } .apanel__cta--line:hover { background: color-mix(in srgb, var(--acol) 12%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--acol) 40%, transparent); } .apanel__note { max-width: 46em; font-size: clamp(0.84rem, 1.8vw, 0.92rem); line-height: 2; letter-spacing: 0.05em; color: var(--washi); margin-bottom: 1.2em; } .apanel__note b { color: var(--alab); font-weight: 700; } /* ---- 目的からの逆引き：和紙（生成り）に反転して見せ方を変える ---- */ .fitmap { width: 100%; margin-top: clamp(48px, 8vw, 88px); padding: clamp(48px, 8vw, 88px) 0 clamp(56px, 9vw, 96px); background: var(--washi); color: #1c2433; } .fitmap .section-title { width: min(94vw, 860px); margin: 0 auto; color: #1c2433; } .fitmap__list { list-style: none; width: min(94vw, 860px); margin: clamp(22px, 3.6vw, 34px) auto 0; border-top: 1px solid rgba(28, 36, 51, 0.22); } .fitmap__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em 1.6em; padding: clamp(16px, 2.6vw, 22px) 0.2em; border-bottom: 1px solid rgba(28, 36, 51, 0.22); } .fitmap__q { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.92rem, 2vw, 1.05rem); letter-spacing: 0.06em; color: #1c2433; } .fitmap__pair { display: flex; gap: 1.2em; flex-wrap: wrap; } .fitmap__a { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(0.95rem, 2.1vw, 1.1rem); letter-spacing: 0.08em; color: var(--vermilion-deep); text-decoration: none; border-bottom: 1px solid rgba(196, 58, 38, 0.45); padding-bottom: 0.15em; transition: color 0.25s ease, border-color 0.25s ease; } .fitmap__a:hover { color: #1c2433; border-color: #1c2433; } .fitmap__a small { margin-left: 0.7em; font-family: var(--font-mincho); font-weight: 500; font-size: 0.72em; letter-spacing: 0.1em; color: #5a6472; } /* ---- 個別プランページ：世界観ヒーロー＋誠実なCTA状態 ---- */ .plan-hero { width: min(94vw, 1080px); margin: clamp(10px, 2vw, 20px) auto 0; } .plan-hero img { width: 100%; height: auto; display: block; border: 1px solid color-mix(in srgb, var(--acol, #e8b44a) 30%, transparent); box-shadow: 0 14px 44px rgba(2, 5, 10, 0.55); } .plan-cta__box { width: min(94vw, 760px); margin: 0 auto; padding: clamp(26px, 4.4vw, 40px) clamp(20px, 4vw, 40px); background: radial-gradient(120% 100% at 18% 0%, color-mix(in srgb, var(--acol, #e8b44a) 8%, transparent) 0%, transparent 55%), var(--ink-deep); text-align: left; } .plan-cta__lead { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: 0.08em; } .plan-cta__lead b { color: color-mix(in srgb, var(--acol, #e8b44a) 70%, #fff); } .plan-cta__sub { margin-top: 0.9em; font-size: clamp(0.84rem, 1.8vw, 0.92rem); line-height: 2; letter-spacing: 0.05em; color: var(--washi); } .plan-cta__sub a { color: var(--gold); } .plans-others { width: min(94vw, 900px); margin: 0 auto; padding: clamp(8px, 1.6vw, 14px) 0 0; } .apanel__for { margin-top: clamp(16px, 2.6vw, 22px); max-width: 46em; font-size: clamp(0.88rem, 1.9vw, 0.96rem); line-height: 2; letter-spacing: 0.05em; } .apanel__spec { margin-top: 0.8em; font-size: clamp(0.8rem, 1.7vw, 0.88rem); letter-spacing: 0.1em; color: var(--washi-dim); } .apanel__variants { margin-top: 0.4em; font-size: clamp(0.8rem, 1.7vw, 0.88rem); letter-spacing: 0.08em; color: var(--washi-dim); } .apanel__note a { color: var(--gold); } /* ライトボックス内：そのエリアを指す光るシェブロン（エリア色・ゆるく上下） */ .apanel__media { position: relative; } .apanel__point { position: absolute; width: clamp(38px, 6vw, 54px); transform: translate(-50%, -100%); animation: apoint-bob 2s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--acol)) drop-shadow(0 0 16px color-mix(in srgb, var(--acol) 60%, transparent)); } .apanel__point svg { display: block; width: 100%; height: auto; } .apanel__point path { stroke: var(--alab); } @keyframes apoint-bob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% + 7px)); } } @media (prefers-reduced-motion: reduce) { .apanel__point { animation: none; } } /* ---- /plans ヒーロー型ヘッダー（夜景航空写真を敷く） ---- */ .phero { position: relative; isolation: isolate; padding: clamp(140px, 22vw, 230px) 0 clamp(56px, 9vw, 96px); background: var(--ink-deep) url("/assets/img/plans-aerial/aerial-full.webp") center 32% / cover no-repeat; } .phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,11,20,.82) 0%, rgba(7,11,20,.35) 45%, rgba(18,27,44,.92) 88%, var(--ink) 100%); } .phero__inner { width: min(94vw, 1080px); margin: 0 auto; } .phero__place { font-size: clamp(0.76rem, 1.7vw, 0.86rem); letter-spacing: 0.22em; color: var(--washi-dim); } .phero__title { margin-top: 0.4em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: 0.14em; text-shadow: 0 0 30px rgba(232, 180, 74, 0.25); } .phero__lead { margin-top: 1em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.98rem, 2.3vw, 1.2rem); letter-spacing: 0.08em; line-height: 2; } .phero__note { margin-top: 1.4em; font-size: clamp(0.74rem, 1.6vw, 0.82rem); letter-spacing: 0.08em; color: var(--washi-dim); } /* ---- 無料観覧エリアページ（明るい和紙基調で差別化） ---- */ .free-page main { background: var(--washi); color: #1c2433; } .free-head { width: min(94vw, 900px); margin: 0 auto; padding: clamp(110px, 16vw, 170px) 0 clamp(20px, 4vw, 36px); } .free-head__place { font-size: clamp(0.76rem, 1.7vw, 0.86rem); letter-spacing: 0.22em; color: #5a6472; } .free-head__title { margin-top: 0.4em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.14em; color: #1c2433; } .free-head__lead { margin-top: 1em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.95rem, 2.2vw, 1.15rem); letter-spacing: 0.07em; line-height: 2.1; color: #1c2433; } .free-map { width: min(94vw, 1080px); margin: clamp(20px, 4vw, 36px) auto 0; } .free-map figure { position: relative; } .free-map img { width: 100%; height: auto; display: block; border: 1px solid rgba(28, 36, 51, 0.2); } .free-map__mark { position: absolute; width: clamp(38px, 6vw, 54px); transform: translate(-50%, -100%); animation: apoint-bob 2s ease-in-out infinite; filter: drop-shadow(0 0 6px #f2ede3) drop-shadow(0 0 16px rgba(242, 237, 227, 0.6)); } .free-map__mark svg { display: block; width: 100%; height: auto; } .free-map__mark path { stroke: #ffffff; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .free-map__cap { margin-top: 0.8em; font-size: clamp(0.76rem, 1.7vw, 0.84rem); letter-spacing: 0.08em; color: #5a6472; } .free-body { width: min(94vw, 760px); margin: 0 auto; padding: clamp(30px, 5vw, 52px) 0 clamp(64px, 10vw, 110px); } .free-body p { font-size: clamp(0.9rem, 2vw, 1rem); line-height: 2.2; letter-spacing: 0.06em; } .free-body p + p { margin-top: 1.2em; } .free-body a { color: var(--vermilion-deep); } @media (prefers-reduced-motion: reduce) { .free-map__mark { animation: none; } } /* 無料ページは和紙基調＝共通の「section=紺」既定を打ち消す */ .free-page main > section { background-color: transparent; } /* 無料ページ・公園マップ（実測範囲のオーバーレイ） */ .fmap { position: relative; } .fmap img { width: 100%; height: auto; display: block; border: 1px solid rgba(28, 36, 51, 0.2); } .fmap svg { position: absolute; inset: 0; width: 100%; height: 100%; } .fmap text { font-family: var(--font-mincho); letter-spacing: 0.08em; } /* 無料ページ：開催情報・アクセス・案内 */ .free-sec-title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.2rem, 2.8vw, 1.6rem); letter-spacing: 0.12em; color: #1c2433; } .free-info { width: min(94vw, 760px); margin: 0 auto; padding-top: clamp(36px, 6vw, 60px); } .free-info__list { margin-top: clamp(14px, 2.4vw, 22px); border-top: 1px solid rgba(28, 36, 51, 0.22); } .free-info__row { display: flex; gap: 1.6em; padding: clamp(12px, 2vw, 16px) 0.2em; border-bottom: 1px solid rgba(28, 36, 51, 0.22); } .free-info__row dt { flex: 0 0 9em; font-weight: 700; letter-spacing: 0.08em; color: #3a4250; font-size: clamp(0.84rem, 1.9vw, 0.94rem); } .free-info__row dd { font-size: clamp(0.88rem, 2vw, 0.98rem); letter-spacing: 0.05em; line-height: 1.9; } .free-info__note { margin-top: 1em; font-size: clamp(0.8rem, 1.8vw, 0.88rem); line-height: 2; color: #5a6472; } .free-info__note a, .free-body a { color: var(--vermilion-deep); } .free-body .free-sec-title { margin-bottom: 0.8em; } .free-cross { margin-top: clamp(26px, 4vw, 40px); padding: clamp(20px, 3.4vw, 30px); background: rgba(28, 36, 51, 0.05); border-left: 3px solid var(--vermilion-deep); } .free-cross__lead { font-family: var(--font-mincho); font-weight: 800; letter-spacing: 0.1em; margin-bottom: 0.5em; } @media (max-width: 560px) { .free-info__row { flex-direction: column; gap: 0.2em; } } /* 協賛規約 */ .terms { width: min(94vw, 760px); margin: 0 auto; padding: clamp(20px, 4vw, 36px) 0 clamp(64px, 10vw, 110px); } .terms h2 { margin-top: 2em; font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.15rem); letter-spacing: 0.08em; } .terms p, .terms li { margin-top: 0.8em; font-size: clamp(0.86rem, 1.9vw, 0.94rem); line-height: 2.1; letter-spacing: 0.04em; } .terms ol { padding-left: 1.6em; } /* スマホ: マップは全体俯瞰、選択は大きなエリアボタン（2列・エリア色つき） */ @media (max-width: 700px) { .amap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .amap-list__btn { padding: 1.05em 0.6em; font-size: 0.95rem; border-left: 4px solid var(--acol, var(--washi)); text-align: left; padding-left: 1em; } } /* FAQ カテゴリ：ジャンプナビ＋カテゴリの区切りを明確に */ .faq-nav { width: min(92vw, 760px); margin: clamp(20px, 4vw, 32px) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .faq-nav { grid-template-columns: repeat(4, 1fr); } } .faq-nav__btn { display: block; padding: 0.9em 0.5em; text-align: center; border: 1px solid rgba(242, 237, 227, 0.28); color: var(--washi); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.8rem, 1.8vw, 0.9rem); letter-spacing: 0.08em; text-decoration: none; transition: border-color 0.25s ease, color 0.25s ease; } .faq-nav__btn:hover { border-color: var(--gold); color: var(--gold); } .faq-group { scroll-margin-top: 90px; } .faq-group .section-title { padding-bottom: 0.5em; border-bottom: 1px solid rgba(232, 180, 74, 0.45); } /* 下層ページ末尾の共通CTA（行き止まり解消） */ .subcta { width: min(92vw, 720px); margin: 0 auto; padding: clamp(36px, 6vw, 60px) 0 clamp(48px, 8vw, 80px); text-align: center; } .subcta__lead { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1rem, 2.3vw, 1.25rem); letter-spacing: 0.1em; margin-bottom: 1.2em; } .subcta__btn { display: inline-block; margin: 0.4em 0.5em; padding: 0.9em 2em; border: 1px solid rgba(242, 237, 227, 0.35); color: var(--washi); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(0.85rem, 1.9vw, 0.95rem); letter-spacing: 0.1em; text-decoration: none; transition: border-color 0.25s ease, background-color 0.25s ease; } .subcta__btn:hover { border-color: var(--washi); } .subcta__btn--primary { background: var(--vermilion-deep); border-color: transparent; } .subcta__btn--primary:hover { background: var(--vermilion); } .free-page .subcta__btn { color: #1c2433; border-color: rgba(28,36,51,.4); } /* アンカー着地時に固定ヘッダーで見出しが隠れない（全アンカー共通） */ main [id] { scroll-margin-top: 96px; } /* 特商法・プラポリの表組み */ .legal-dl dl, .legal-dl-inline { border-top: 1px solid rgba(242,237,227,.16); } .legal-dl dt, .legal-dl-inline dt { margin-top: 1.1em; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); font-size: clamp(0.84rem,1.8vw,0.92rem); } .legal-dl dd, .legal-dl-inline dd { margin-top: 0.3em; font-size: clamp(0.86rem,1.9vw,0.94rem); line-height: 2; } .terms a { color: var(--gold); } /* 打ち上げエリアのスマホ用一行ラベル（PCでは従来の2行を使用） */ .amap__label--launch-m { display: none; font-family: var(--font-mincho); font-weight: 700; letter-spacing: 0.1em; filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 9px #c9932a); } @media (max-width: 700px) { .amap svg text.amap__label--launch-m { display: block; } } /* タッチ端末: バナーのhover演出を無効化（iOSの「1タップ目=ホバー」で 2度押しが必要になる事故の解消。演出はポインタ環境のみ） */ @media (hover: none) { /* iOSの「1タップ目=ホバー」による二度押しを根絶： タッチではhoverの視覚変化を完全ゼロにする（透明な::afterのtransform変化も 「変化」と判定されるため、スイープ自体を排除し、transitionも止める） */ .site-header__nav a.site-header__cta:hover { background: var(--vermilion-deep); } } /* ダブルタップズーム待ちを無効化（リンク/ボタンの反応を即時に） */ a, button { touch-action: manipulation; } /* ============================================================ VVIP限定ページ（/plans-vvip） /plans と同じ様式のまま、金の二重罫と余白で「格」を出す ============================================================ */ .vhero__mark { margin: 0 0 6px; color: var(--gold, #e8b44a); font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(0.95rem, 2.6vw, 1.15rem); letter-spacing: 0.42em; } .phero--vvip .phero__note { color: rgba(232, 180, 74, 0.78); } .vlist { padding: clamp(40px, calc(var(--vhlock) * 0.08), 88px) clamp(16px, 5vw, 48px) 0; } .vlist__grid { display: grid; gap: clamp(22px, 3.4vw, 40px); max-width: 1180px; margin: 0 auto; } @media (min-width: 900px) { .vlist__grid { grid-template-columns: repeat(3, 1fr); } } .vcard { position: relative; padding: clamp(26px, 3.4vw, 40px) clamp(20px, 2.8vw, 32px) clamp(24px, 3vw, 34px); background: radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--acol) 13%, transparent) 0%, transparent 58%), #101a2e; } /* 金の二重罫＝特別観覧席バナーと同じ額装の作法 */ .vcard__frame { position: absolute; inset: 0; border: 1px solid rgba(232, 180, 74, 0.5); pointer-events: none; } .vcard__frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(232, 180, 74, 0.24); } .vcard__rank { margin: 0 0 10px; color: var(--gold, #e8b44a); font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.34em; } .vcard__name { margin: 0 0 12px; color: var(--washi, #f2ede3); font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 2.05rem); line-height: 1.24; letter-spacing: 0.04em; } .vcard__yomi { display: block; margin-top: 6px; color: var(--washi-dim, #9aa7b8); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; } .vcard__catch { margin: 0 0 10px; color: var(--alab, #f2ede3); font-family: "Shippori Mincho B1", serif; font-size: 1.02rem; line-height: 1.85; } .vcard__for, .vcard__variants { margin: 0 0 10px; color: var(--washi-dim, #9aa7b8); font-size: 0.88rem; line-height: 1.9; } .vcard__facts { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(242, 237, 227, 0.14); } .vcard__fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(242, 237, 227, 0.07); } .vcard__fact dt { color: var(--washi-dim, #9aa7b8); font-size: 0.82rem; letter-spacing: 0.06em; } .vcard__fact dd { margin: 0; color: var(--washi, #f2ede3); font-size: 0.95rem; text-align: right; } .vcard__fact dd small { margin-left: 2px; color: var(--washi-dim, #9aa7b8); font-size: 0.74rem; } .vcard__note { margin: 16px 0 0; color: var(--washi-dim, #9aa7b8); font-size: 0.78rem; line-height: 1.85; } .vcard__note a { color: var(--gold, #e8b44a); } .vcard__cta { display: block; margin-top: 16px; padding: 14px 18px; background: var(--vermilion-deep, #c43a26); color: var(--washi, #f2ede3); font-family: "Shippori Mincho B1", serif; font-size: 1rem; letter-spacing: 0.08em; text-align: center; text-decoration: none; } .vcard__cta:hover { background: #d9432e; } /* ========================================================================== 2026-08-11 再構成：2枚ゲート / 序列表 / カテゴリページ / VVIP解錠 新しい装飾は足さない（design.md §5）。面＝--surface、線＝既存の淡い罫、 強調＝金は「貸切側の額」1箇所のみ。角丸は既存の直角基調に合わせて0。 ========================================================================== */ /* ---- 2枚ゲートカード＝メインオファー（TOP / /plans 冒頭） ---- 器の考え方：花火大会の「番組表（番付）」の様式を借りる。 ・題字は帯（一段明るい面）に載せ、上に筆の掠れ線＋小さな標題を置く ＝サイト共通の見出し様式（design.md §5 sec-head）と同じ文法 ・外周は金の二重罫。design.md が「格の表現」として明示的に許可している線 （どのサイトにもある1pxの囲みは使わない。あれは何の理由も言えない） ・角丸・影・グロー・グラデーションは使わない ---- */ .gcards { padding: clamp(48px, calc(var(--vhlock) * 0.09), 104px) clamp(18px, 4vw, 48px); text-align: center; /* 節全体を中央寄せに */ } .gcards__inner { width: min(100%, 1240px); margin: 0 auto; } .gcards__head { font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.6rem, 5.2vw, 2.5rem); letter-spacing: .1em; line-height: 1.5; color: var(--washi); margin: 0 0 clamp(26px, 3.8vw, 44px); } /* 見出し直下の一行。番号を振らずに「並列の二択」であることを言い切る */ .gcards__sub { font-family: var(--font-mincho); font-size: clamp(.92rem, 2.5vw, 1.06rem); letter-spacing: .16em; line-height: 1.9; color: var(--washi-dim); margin: -.6em 0 clamp(26px, 3.8vw, 44px); } /* スマホでは2枚を隙間なく密着させる。離して積むと「独立した2枚のカード」に、 密着させると「1つの選択」に見える。茜と藍が接する境界線そのものが二択の表明になる。 */ .gcards__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0; align-items: stretch; } @media (min-width: 760px) { .gcards__grid { gap: clamp(18px, 2.4vw, 30px); } } @media (min-width: 760px) { .gcards__grid { grid-template-columns: 1fr 1fr; } } /* 二つのプランは「地色そのもの」で区別する。 貸切＝茜（夕）、観覧席＝夜の藍。どちらも design.md の時間帯パレットに由来があり、 ラベルを読まなくても別物だと分かる。囲みの罫は持たせない（色で足りる）。 */ .gcard { position: relative; display: flex; flex-direction: column; text-align: left; border: 0; padding: 0; color: #fff; } .gcard--kashikiri { background: var(--akane); } .gcard--seat { background: #1d3c5c; } /* 題字の帯：一段明るい面に載せ、番組表の「見出し欄」に見せる */ .gcard__head { position: relative; padding: clamp(24px, 3.2vw, 34px) clamp(20px, 2.8vw, 34px) clamp(18px, 2.4vw, 24px); } /* 呼び分けの札。地色の上に白でベタ抜き */ .gcard__label { display: inline-block; margin: 0 0 .9em; padding: 5px 13px; background: #fff; font-family: var(--font-gothic); font-weight: 900; font-size: clamp(.72rem, 1.9vw, .8rem); letter-spacing: .18em; } .gcard--kashikiri .gcard__label { color: var(--akane); } .gcard--seat .gcard__label { color: #1d3c5c; } .gcard__title { font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.4rem, 4.6vw, 2rem); line-height: 1.42; letter-spacing: .04em; color: #fff; margin: 0; } /* 写真：大1（主役）＋小2の非対称。両カードで同じ組み方 */ .gcard__stage { display: grid; grid-template-columns: 1.62fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "big s1" "big s2"; gap: 4px; background: rgba(255,255,255,.18); aspect-ratio: 1.9; margin: 0; } .gcard__shot { position: relative; overflow: hidden; background: rgba(0,0,0,.25); height: 100%; } .gcard__shot--big { grid-area: big; } .gcard__shot--s1 { grid-area: s1; } .gcard__shot--s2 { grid-area: s2; } .gcard__shot img { width: 100%; height: 100%; object-fit: cover; } .gcard__shot--soon { display: grid; place-items: center; background: rgba(0,0,0,.34); } .gcard__soon { font-family: var(--font-mincho); font-size: clamp(.62rem, 1.7vw, .78rem); color: rgba(255,255,255,.8); text-align: center; line-height: 1.6; padding: 0 .4em; } .gcard__stage .is-cropleft img { object-position: left center; transform: scale(1.35); transform-origin: left center; } .gcard__desc { margin: clamp(20px, 2.8vw, 30px) clamp(20px, 2.8vw, 34px) 0; font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2; color: rgba(255,255,255,.94); } .gcard__desc b { font-weight: 700; font-size: 1.08em; color: #fff; } .gcard__areas { display: flex; align-items: center; gap: .6em; margin: clamp(8px, 1.2vw, 14px) clamp(20px, 2.8vw, 34px) clamp(26px, 3.6vw, 40px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.82rem, 2.1vw, .9rem); letter-spacing: .04em; color: #fff; } .gcard__btn { margin: auto clamp(20px, 2.8vw, 34px) clamp(22px, 2.8vw, 32px); display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px clamp(28px, 5vw, 56px); background: #fff; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.95rem, 2.6vw, 1.05rem); letter-spacing: .06em; text-decoration: none; } .gcard--kashikiri .gcard__btn { color: var(--akane); } .gcard--seat .gcard__btn { color: #1d3c5c; } .gcard__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 759px) { .gcard__stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "big big" "s1 s2"; aspect-ratio: auto; } .gcard__shot--big { aspect-ratio: 1.9; } .gcard__shot--s1, .gcard__shot--s2 { aspect-ratio: 1.5; } } /* ---- 全5カテゴリの序列表 ---- */ .rank { padding: 0 clamp(18px, 4vw, 48px) clamp(48px, calc(var(--vhlock) * 0.09), 104px); } .rank__inner { width: min(100%, 1080px); margin: 0 auto; } .rank__head { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.1rem, 3.2vw, 1.45rem); color: var(--washi); margin: 0 0 clamp(14px, 2.4vw, 22px); } .rank__table { width: 100%; border-collapse: collapse; color: var(--washi); font-size: 0.92rem; } .rank__table th, .rank__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(242, 237, 227, 0.14); white-space: nowrap; } /* 塗りのヘッダー行はフレームワーク既定の見た目になるため外し、細い罫と余白で示す */ .rank__table thead th { background: none; font-weight: 700; color: var(--washi-dim); border-bottom-color: rgba(242, 237, 227, 0.34); } .rank__grouphead th { background: rgba(242, 237, 227, 0.06); font-family: var(--font-mincho); font-weight: 700; color: var(--washi-dim); } .rank__name { font-family: var(--font-mincho); font-weight: 700; } .rank__link { color: var(--washi); text-decoration: none; border-bottom: 1px solid rgba(242, 237, 227, 0.4); } .rank__bbq { text-align: center; font-size: 1.05rem; } .rank__price { font-family: var(--font-mincho); } .rank__row--soon td, .rank__row--soon th { color: var(--washi-dim); } /* ---- カテゴリページ共通 ---- */ .cat-main { padding-bottom: clamp(40px, 8vw, 88px); } .cat-belong { margin: 0; padding: clamp(12px, 2.2vw, 18px) clamp(18px, 4vw, 48px); background: var(--surface-2); color: var(--washi); font-size: 0.92rem; line-height: 1.6; } .cat-belong--kashikiri { border-bottom: 1px solid rgba(232, 180, 74, 0.5); } .cat-head { padding: clamp(34px, 6vw, 72px) clamp(18px, 4vw, 48px) clamp(20px, 3vw, 34px); } .cat-head__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.8rem, 7vw, 3rem); color: var(--washi); margin: 0 0 0.4em; } .cat-head__lead { color: var(--washi-dim); line-height: 1.9; margin: 0; max-width: 42em; } .cat-sec-title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--washi); margin: 0 0 clamp(16px, 2.6vw, 26px); } .cat-feats, .cat-plans, .cat-soon, .cat-free { padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 48px); } .cat-free p { color: var(--washi-dim); line-height: 1.95; max-width: 42em; } .cat-free a, .cat-plans__note a, .cat-soon__more a { color: var(--gold); } .cat-plans__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 24px); } @media (min-width: 900px) { .cat-plans__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .pcard { background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); padding: clamp(20px, 3vw, 30px); } .pcard__name { font-family: var(--font-mincho); font-weight: 800; font-size: 1.4rem; color: var(--washi); margin: 0 0 0.3em; } .pcard__yomi { font-size: 0.72rem; font-weight: 500; color: var(--washi-dim); margin-left: 0.6em; } .pcard__catch { color: var(--gold); font-family: var(--font-mincho); margin: 0 0 0.8em; } .pcard__for, .pcard__variants { color: var(--washi-dim); font-size: 0.9rem; line-height: 1.85; margin: 0 0 1em; } .pcard__facts { margin: 0 0 clamp(16px, 2.4vw, 22px); } .pcard__fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(242, 237, 227, 0.12); } .pcard__fact dt { color: var(--washi-dim); font-size: 0.85rem; } .pcard__fact dd { margin: 0; color: var(--washi); font-family: var(--font-mincho); text-align: right; } .pcard__fact dd small { font-size: 0.72rem; color: var(--washi-dim); } .pcard__cta { display: block; text-align: center; padding: 14px 18px; background: var(--vermilion-deep); color: var(--washi); font-family: var(--font-mincho); text-decoration: none; } .cat-plans__note { color: var(--washi-dim); font-size: 0.85rem; line-height: 1.8; margin-top: clamp(16px, 2.4vw, 24px); } .cat-soon__lead, .cat-soon__sale, .cat-soon__more { color: var(--washi-dim); line-height: 1.9; max-width: 42em; } .cat-soon__panel { display: grid; place-items: center; min-height: clamp(180px, 30vw, 300px); margin: clamp(20px, 3vw, 30px) 0; border: 1px dashed rgba(242, 237, 227, 0.28); } .cat-soon__panel-text { color: var(--washi-dim); font-family: var(--font-mincho); margin: 0; } .cat-cross { padding: 0 clamp(18px, 4vw, 48px); } .cat-cross__link { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); color: var(--washi); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; } .cat-cross__lead { font-size: 0.85rem; color: var(--washi-dim); } .cat-cross__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 1.35rem); } @media (prefers-reduced-motion: reduce) { .cat-cross__link { transition: none; } .cat-cross__link:hover, .cat-cross__link:focus-visible { transform: none; } } /* ---- 解錠画面 ---- 🚨 2026-08-21: ここは `.cat-main` だけを隠していたが、**錠が付く4ページ（/plans/vvip/ と 個別3枚）は `
`** で、セレクタが一度も当たっていなかった。 錠は最初の1画面に出るだけで、**その裏をスクロールすると本文が全部読めた** （実測: 本番でページ高11,927px・End キーで11,027pxまで動き、¥970,000 が読めた）。 VVIPページを VIP の部品で作り直した時（be4332f）に main のクラスが変わり、 ここが追随していなかった。**クラス名に依存しない `body > main` で押さえる**。 あわせてスクロール自体も止める（錠の裏が動かせる時点で錠の意味がない）。 */ html.is-locked body > main, html.is-locked .cat-main, html.is-locked .site-footer { display: none; } html.is-locked, html.is-locked body { overflow: hidden; height: 100%; } .vlock { display: none; } html.is-locked .vlock { display: grid; place-items: center; min-height: calc(var(--vhlock) * 0.7); padding: clamp(24px, 6vw, 60px) clamp(18px, 4vw, 48px); } .vlock__form { width: min(100%, 380px); display: grid; gap: 12px; } .vlock__lead { color: var(--washi-dim); font-family: var(--font-mincho); margin: 0; } .vlock__label { color: var(--washi); font-size: 0.85rem; } .vlock__input { padding: 12px 14px; background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.28); color: var(--washi); font-size: 1rem; } .vlock__go { padding: 12px 18px; background: var(--vermilion-deep); border: 0; color: var(--washi); font-family: var(--font-mincho); font-size: 1rem; cursor: pointer; } .vlock__msg { min-height: 1.4em; margin: 0; color: var(--washi-dim); font-size: 0.85rem; } /* 限定ページへの入口の印（現在はヘッダー右上の1か所だけ） */ .vvlink { margin-left: 0.9em; color: rgba(242, 237, 227, 0.34); font-family: var(--font-mincho); font-size: 0.78rem; letter-spacing: -0.14em; text-decoration: none; } /* 序列表：狭幅は横スクロールでなくカード化（列見出しは td の data-label で補う）。 6列×nowrap のままだとスマホ・タブレットで表が画面外にはみ出し、存在に気づけないため。 実測で 768px でも溢れたため、表のままにするのは 900px 以上に限る */ @media (max-width: 1199px) { .rank__table, .rank__table tbody, .rank__table tr, .rank__table th, .rank__table td { display: block; } .rank__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rank__table th, .rank__table td { white-space: normal; border-bottom: 0; padding: 6px 0; } .rank__group { margin-bottom: 18px; } .rank__grouphead th { padding: 8px 12px; background: rgba(242, 237, 227, 0.06); } .rank__table tbody tr:not(.rank__grouphead) { padding: 14px 14px 16px; margin-top: 10px; background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); } .rank__name { font-size: 1.08rem; padding-bottom: 10px !important; } .rank__table td { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(242, 237, 227, 0.1); } .rank__table td::before { content: attr(data-label); color: var(--washi-dim); font-size: 0.82rem; flex: none; } .rank__bbq { text-align: right; } } /* ゲートカード直下の無料観覧エリアの一行。 帯全体をリンクにせず、タップ領域は「無料観覧エリア」の語だけにする。 カード2枚と競わせないため、上の間隔を広く取り、面や囲みは持たせない。 */ .gfree { /* 罫線は置かない（下に1行しかなく、何と何を区切るのか示せないため）。 間隔だけでカード群と分ける。 */ margin: clamp(14px, 1.8vw, 20px) 0 clamp(40px, 5.4vw, 72px); padding: 0 clamp(18px, 3vw, 30px); color: var(--washi); font-size: clamp(.88rem, 2.3vw, 1rem); line-height: 1.9; } .gfree__link { color: var(--washi); text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 1px; text-underline-offset: .28em; } /* ---- 全5カテゴリの序列表 ---- */ .rank { padding: 0 clamp(18px, 4vw, 48px) clamp(48px, calc(var(--vhlock) * 0.09), 104px); } .rank__inner { width: min(100%, 1080px); margin: 0 auto; } .rank__head { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.1rem, 3.2vw, 1.45rem); color: var(--washi); margin: 0 0 clamp(14px, 2.4vw, 22px); } .rank__table { width: 100%; border-collapse: collapse; color: var(--washi); font-size: 0.92rem; } .rank__table th, .rank__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(242, 237, 227, 0.14); white-space: nowrap; } /* 塗りのヘッダー行はフレームワーク既定の見た目になるため外し、細い罫と余白で示す */ .rank__table thead th { background: none; font-weight: 700; color: var(--washi-dim); border-bottom-color: rgba(242, 237, 227, 0.34); } .rank__grouphead th { background: rgba(242, 237, 227, 0.06); font-family: var(--font-mincho); font-weight: 700; color: var(--washi-dim); } .rank__name { font-family: var(--font-mincho); font-weight: 700; } .rank__link { color: var(--washi); text-decoration: none; border-bottom: 1px solid rgba(242, 237, 227, 0.4); } .rank__bbq { text-align: center; font-size: 1.05rem; } .rank__price { font-family: var(--font-mincho); } .rank__row--soon td, .rank__row--soon th { color: var(--washi-dim); } /* ---- カテゴリページ共通 ---- */ .cat-main { padding-bottom: clamp(40px, 8vw, 88px); } .cat-belong { margin: 0; padding: clamp(12px, 2.2vw, 18px) clamp(18px, 4vw, 48px); background: var(--surface-2); color: var(--washi); font-size: 0.92rem; line-height: 1.6; } .cat-belong--kashikiri { border-bottom: 1px solid rgba(232, 180, 74, 0.5); } .cat-head { padding: clamp(34px, 6vw, 72px) clamp(18px, 4vw, 48px) clamp(20px, 3vw, 34px); } .cat-head__title { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.8rem, 7vw, 3rem); color: var(--washi); margin: 0 0 0.4em; } .cat-head__lead { color: var(--washi-dim); line-height: 1.9; margin: 0; max-width: 42em; } .cat-sec-title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--washi); margin: 0 0 clamp(16px, 2.6vw, 26px); } .cat-feats, .cat-plans, .cat-soon, .cat-free { padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 48px); } .cat-free p { color: var(--washi-dim); line-height: 1.95; max-width: 42em; } .cat-free a, .cat-plans__note a, .cat-soon__more a { color: var(--gold); } .cat-plans__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 24px); } @media (min-width: 900px) { .cat-plans__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .pcard { background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); padding: clamp(20px, 3vw, 30px); } .pcard__name { font-family: var(--font-mincho); font-weight: 800; font-size: 1.4rem; color: var(--washi); margin: 0 0 0.3em; } .pcard__yomi { font-size: 0.72rem; font-weight: 500; color: var(--washi-dim); margin-left: 0.6em; } .pcard__catch { color: var(--gold); font-family: var(--font-mincho); margin: 0 0 0.8em; } .pcard__for, .pcard__variants { color: var(--washi-dim); font-size: 0.9rem; line-height: 1.85; margin: 0 0 1em; } .pcard__facts { margin: 0 0 clamp(16px, 2.4vw, 22px); } .pcard__fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(242, 237, 227, 0.12); } .pcard__fact dt { color: var(--washi-dim); font-size: 0.85rem; } .pcard__fact dd { margin: 0; color: var(--washi); font-family: var(--font-mincho); text-align: right; } .pcard__fact dd small { font-size: 0.72rem; color: var(--washi-dim); } .pcard__cta { display: block; text-align: center; padding: 14px 18px; background: var(--vermilion-deep); color: var(--washi); font-family: var(--font-mincho); text-decoration: none; } .cat-plans__note { color: var(--washi-dim); font-size: 0.85rem; line-height: 1.8; margin-top: clamp(16px, 2.4vw, 24px); } .cat-soon__lead, .cat-soon__sale, .cat-soon__more { color: var(--washi-dim); line-height: 1.9; max-width: 42em; } .cat-soon__panel { display: grid; place-items: center; min-height: clamp(180px, 30vw, 300px); margin: clamp(20px, 3vw, 30px) 0; border: 1px dashed rgba(242, 237, 227, 0.28); } .cat-soon__panel-text { color: var(--washi-dim); font-family: var(--font-mincho); margin: 0; } .cat-cross { padding: 0 clamp(18px, 4vw, 48px); } .cat-cross__link { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); color: var(--washi); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; } .cat-cross__lead { font-size: 0.85rem; color: var(--washi-dim); } .cat-cross__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 1.35rem); } @media (prefers-reduced-motion: reduce) { .cat-cross__link { transition: none; } .cat-cross__link:hover, .cat-cross__link:focus-visible { transform: none; } } /* ---- 解錠画面 ---- 🚨 2026-08-21: ここは `.cat-main` だけを隠していたが、**錠が付く4ページ（/plans/vvip/ と 個別3枚）は `
`** で、セレクタが一度も当たっていなかった。 錠は最初の1画面に出るだけで、**その裏をスクロールすると本文が全部読めた** （実測: 本番でページ高11,927px・End キーで11,027pxまで動き、¥970,000 が読めた）。 VVIPページを VIP の部品で作り直した時（be4332f）に main のクラスが変わり、 ここが追随していなかった。**クラス名に依存しない `body > main` で押さえる**。 あわせてスクロール自体も止める（錠の裏が動かせる時点で錠の意味がない）。 */ html.is-locked body > main, html.is-locked .cat-main, html.is-locked .site-footer { display: none; } html.is-locked, html.is-locked body { overflow: hidden; height: 100%; } .vlock { display: none; } html.is-locked .vlock { display: grid; place-items: center; min-height: calc(var(--vhlock) * 0.7); padding: clamp(24px, 6vw, 60px) clamp(18px, 4vw, 48px); } .vlock__form { width: min(100%, 380px); display: grid; gap: 12px; } .vlock__lead { color: var(--washi-dim); font-family: var(--font-mincho); margin: 0; } .vlock__label { color: var(--washi); font-size: 0.85rem; } .vlock__input { padding: 12px 14px; background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.28); color: var(--washi); font-size: 1rem; } .vlock__go { padding: 12px 18px; background: var(--vermilion-deep); border: 0; color: var(--washi); font-family: var(--font-mincho); font-size: 1rem; cursor: pointer; } .vlock__msg { min-height: 1.4em; margin: 0; color: var(--washi-dim); font-size: 0.85rem; } /* 限定ページへの入口の印（現在はヘッダー右上の1か所だけ） */ .vvlink { margin-left: 0.9em; color: rgba(242, 237, 227, 0.34); font-family: var(--font-mincho); font-size: 0.78rem; letter-spacing: -0.14em; text-decoration: none; } /* 序列表：狭幅は横スクロールでなくカード化（列見出しは td の data-label で補う）。 6列×nowrap のままだとスマホ・タブレットで表が画面外にはみ出し、存在に気づけないため。 実測で 768px でも溢れたため、表のままにするのは 900px 以上に限る */ @media (max-width: 1199px) { .rank__table, .rank__table tbody, .rank__table tr, .rank__table th, .rank__table td { display: block; } .rank__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rank__table th, .rank__table td { white-space: normal; border-bottom: 0; padding: 6px 0; } .rank__group { margin-bottom: 18px; } .rank__grouphead th { padding: 8px 12px; background: rgba(242, 237, 227, 0.06); } .rank__table tbody tr:not(.rank__grouphead) { padding: 14px 14px 16px; margin-top: 10px; background: var(--surface); border: 1px solid rgba(242, 237, 227, 0.16); } .rank__name { font-size: 1.08rem; padding-bottom: 10px !important; } .rank__table td { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(242, 237, 227, 0.1); } .rank__table td::before { content: attr(data-label); color: var(--washi-dim); font-size: 0.82rem; flex: none; } .rank__bbq { text-align: right; } } /* 旧・無料帯（帯全体をブロックリンクにし矢印を置く方式）は 2026-08-11 に廃止。 タップ領域は「無料観覧エリア」の語だけにした（定義は上方の .gfree / .gfree__link）。 */ /* ---- §物語（TOPのみ・フッター直前）。継承の経緯を静かに置く。 画像なし・装飾なし・墨紺地に白文字・明朝見出し（design.md §5） ---- */ /* 継承の経緯の見出し。ゲートカードの節見出しと同じ型（Kaisei 800・金の短い横線）。 カードのCSSを書き換えた際に巻き添えで消えていたので復旧する。 */ .heritage__title { font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.25rem, 3.6vw, 1.75rem); letter-spacing: .08em; line-height: 1.55; color: var(--washi); margin: 0 0 clamp(18px, 2.6vw, 28px); } /* 継承の経緯。独立セクションではなく「みんなで育てる花火」の節の中に置く （文脈上、育てる話の前段にあたるため）。 */ .heritage { margin: clamp(30px, 4.4vw, 60px) 0 clamp(38px, 5.4vw, 72px); } /* 親の padding だけだと 380 で左端に張り付くため、inner 側でも横余白を確保する */ /* 見出し(.intro__head)と同じ measure に揃える。720pxのままだと 同じ器の中に 839 / 720 / 399 と3種類の幅が並び、右側の空きが揃わない */ .heritage__inner { width: min(100%, 840px); } .heritage__body { font-size: clamp(.92rem, 2.4vw, 1rem); line-height: 2.15; color: var(--washi); margin: 0 0 1.4em; } .heritage__body:last-child { margin-bottom: 0; } /* ========================================================================== フッター最上部の帯：浜寺公園から西を望む夜景 手前＝浜寺公園の松林／中景＝浜寺水路と台船／遠景＝工業地帯の煙突。 色は墨紺の濃淡＋金＋菊青白（朱はCTA専用なので使わない）。 ========================================================================== */ .skyline { position: relative; width: 100%; line-height: 0; overflow: hidden; /* 直前の .finale は下端が --ink で終わる。そこから夜空へ、 下端はフッターの地色(#0b1322)へ送り、上下のブロックと途切れさせない */ background: linear-gradient(180deg, var(--ink) 0%, #0d1526 30%, #080f1c 72%, var(--ink) 100%); } /* 下端をフッターの地色に溶かす（松林の黒とフッター紺の段差を消す） */ .skyline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* 松の足元だけを奥付の地色へ送る。広くかけると松が溶けて近景が消える */ height: 9%; background: linear-gradient(180deg, rgba(18, 27, 44, 0) 0%, rgba(18, 27, 44, .92) 100%); pointer-events: none; } /* 高さは幅に比例させる。固定高さ＋slice だと、幅が広がるほど上（＝花火）が切れる。 狭い画面だけ min-height を効かせ、そこでは左右がトリミングされる（縦は切れない）。 */ .skyline__svg { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 300; min-height: 190px; } /* 遠景の工業地帯：奥ほど明るい墨紺 */ .sk__far rect, .sk__far circle { fill: #1c2c47; } .sk__stack path { fill: #16233a; } .sk__beacon { fill: var(--gold); opacity: .9; animation: skBeacon 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skBeacon { 0%,100% { opacity: .2; } 50% { opacity: 1; } } .sk__lamp { fill: var(--gold); opacity: .8; animation: skLamp 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__lamp--kiku { fill: var(--kiku); } @keyframes skLamp { 0%,100% { opacity: .3; } 45% { opacity: 1; } } /* 中景：浜寺水路 */ .sk__sea { fill: #0a1426; } .sk__refl rect { fill: var(--gold); opacity: .18; animation: skRefl 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skRefl { 0%,100% { opacity: .08; } 50% { opacity: .3; } } .sk__wave { fill: rgba(159, 200, 232, .1); animation: skWave 5s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skWave { 0%,100% { opacity: .35; } 50% { opacity: .9; } } /* 台船 */ .sk__barge rect { fill: #0a1220; } .sk__bargehull { fill: #121d31 !important; } .sk__bargerefl { fill: rgba(232, 180, 74, .16); animation: skRefl 4s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__bargelight { fill: var(--gold) !important; animation: skLamp 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); } /* 手前：浜寺公園の松林（いちばん暗く落として近景にする） */ .sk__pine path, .sk__pine rect { fill: #03060e; } /* タコの滑り台。松より一段明るくして、松林に埋もれないようにする */ .sk__taco path, .sk__taco rect { fill: #0d1626; } /* 花火：台船の上から拍を持って上がる */ .sk__fw--gold line, .sk__fw--gold circle { stroke: var(--gold); fill: var(--gold); } .sk__fw--kiku line, .sk__fw--kiku circle { stroke: var(--kiku); fill: var(--kiku); } .sk__fw--washi line, .sk__fw--washi circle { stroke: var(--washi); fill: var(--washi); } .sk__fw line { stroke-width: 1.15; stroke-linecap: round; } .sk__rise { fill: var(--gold); transform-box: fill-box; transform-origin: center bottom; animation: skRise var(--dur, 7s) linear infinite; animation-delay: var(--d, 0s); } .sk__fw--kiku .sk__rise { fill: var(--kiku); } .sk__fw--washi .sk__rise { fill: var(--washi); } @keyframes skRise { 0% { transform: scaleY(0); opacity: 0; } 4% { transform: scaleY(.06); opacity: .9; } 15% { transform: scaleY(1); opacity: .5; } 18% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } } .sk__burst { transform-box: fill-box; transform-origin: center; animation: skBurst var(--dur, 7s) ease-out infinite; animation-delay: var(--d, 0s); } @keyframes skBurst { 0%, 16% { transform: scale(.05); opacity: 0; } 21% { transform: scale(1); opacity: 1; } 36% { transform: scale(1.13); opacity: .55; } 50%,100% { transform: scale(1.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sk__lamp, .sk__refl rect, .sk__wave, .sk__beacon, .sk__bargelight, .sk__bargerefl, .sk__rise, .sk__burst { animation: none; } .sk__rise { opacity: 0; } .sk__burst { transform: scale(1); opacity: 1; } .sk__lamp, .sk__beacon, .sk__bargelight { opacity: .85; } .sk__refl rect { opacity: .18; } .sk__wave { opacity: .6; } .sk__bargerefl { opacity: .16; } } /* ---- 「高石超花火とは」＝見出しの上に置く小さな標題（.lead）---- 隅に浮かせた金の小ラベルは、どのサイトにもある“eyebrow”の型で、 置き場所も見出しと無関係だった。サイト共通の見出し様式（design.md §5＝ 「筆の掠れ線 + 見出し」）に合わせ、見出しと同じ組の中に納める。 ---- */ /* サイト共通の筆の掠れ線（sec-head と同じマスク＝装飾の出どころを揃える） */ /* 段落。1行空け相当の余白で区切る */ .lead__p { display: block; } .lead__p + .lead__p { margin-top: 1.6em; } /* 強調は太さのみ。色は変えない */ .lead__desc b { font-weight: 700; } /* ---- 「圧倒的」の透かし（.scale の無地部分・縦組み）---- 写真の上には置かない。墨紺の余白に縦組みで巨大に。 writing-mode で縦組みにする（transform 回転は使わない）。 ---- */ .scale { position: relative; } .scale__wm { position: absolute; /* 縦組みでは「高さ」が行の長さになる。折り返しの真因は級数ではなく、 absolute + top で使える高さが削られていたこと（節900px − 上端72px = 828px、 6字を1列に収める上限は 828/6 ≒ 138px なのに 11vw=158px を指定していた）。 上端を詰めて使える高さを増やし、級数を上限近くまで戻す。 */ top: 10px; /* 右端で字が断ち切られないよう、必ず内側に収める */ right: clamp(16px, 4vw, 72px); z-index: 0; margin: 0; writing-mode: vertical-rl; /* 折り返すと最後の1字だけが次の列に落ちる。必ず1列に収める */ white-space: nowrap; /* Kaisei Tokumin は筆の丸みが残り、この語には柔らかすぎた（「可愛い」）。 縦太横細・ウロコの鋭い見出し明朝へ。godzilla-movie.jp のヒーロー右の 縦組みコピーと同系の骨格（あちらは画像だがゴシックではなく重い明朝）。 Zen Old Mincho 900 は大数字用に既に読み込んでいるので追加リクエストは増えない。 */ font-family: "Zen Old Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight: 900; /* 6字を1列に収めたうえで、セクション高さの7割前後に収まる級数 */ font-size: min(clamp(4.6rem, 9.2vw, 7.4rem), calc(var(--vhlock) * 0.12)); line-height: 1; letter-spacing: .06em; color: #fff; opacity: .13; /* 明朝の細い横画が飛ばないよう .11 から微増 */ pointer-events: none; user-select: none; } .scale__inner { position: relative; z-index: 1; } /* 追加本文 */ .scale__body { margin-top: clamp(30px, 4.4vw, 56px); text-align: left; max-width: 44em; margin-left: auto; margin-right: auto; } .scale__p { margin: 0; font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .scale__p + .scale__p { margin-top: 1.6em; } .scale__p b { font-weight: 700; } /* 微強調：太字のみ */ .scale__p .scale__em { font-size: 1.16em; } /* 最強調：太字＋級数アップ。色は変えない */ @media (max-width: 759px) { /* スマホでも入れる。本文の可読性を守るため、本文より後ろ（z-index 0）に置き、 右端に寄せて本文と重なる面積を減らす。級数は画面幅なりに大きく取る。 */ /* スマホは見出しが全幅に伸びるため、透かしを見出しの下から始める（重なりの解消） */ /* スマホでは右に置くと花火のイラスト（大きい方）に重なる。左へ寄せる。 あわせて図全体を右へずらし、透かしの列（左100px前後）を空ける。 */ .scale__wm { display: block; font-size: min(clamp(3.6rem, 26vw, 7rem), calc(var(--vhlock) * 0.098)); opacity: .1; top: 17%; right: auto; left: 4px; } .scale__charts { padding-left: clamp(70px, 22vw, 96px); } } /* ---- お知らせ（主導線の直後の独立した節）＝会場に貼られた和紙の紙 ---- 背景に溶かさず、紙として枠で囲う。囲みは金の二重罫（design.md §5 が 「格の表現」として許す線）。紙＝実務情報という文法はアクセス／FAQ の栞と揃っている。 ---- */ .news-sec { padding: clamp(20px, 3vw, 40px) clamp(18px, 4vw, 48px) clamp(48px, calc(var(--vhlock) * 0.08), 92px); } .hnews { position: relative; width: min(100%, 940px); margin: 0 auto; background: var(--paper); color: var(--paper-ink); /* 金の二重罫で囲う。外側の細線は擬似要素 */ border: 2px solid var(--gold); padding: clamp(26px, 3.6vw, 40px) clamp(24px, 4vw, 44px) clamp(22px, 3vw, 34px); } .hnews::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(125, 90, 18, .45); pointer-events: none; } .hnews > * { position: relative; z-index: 1; } /* 見出しは枠の外・中央寄せ。「一覧へ」は枠の下・右端に置く（.hnews__foot） */ .hnews__head { display: flex; align-items: center; justify-content: center; gap: .6em; width: min(100%, 940px); margin: 0 auto clamp(14px, 1.8vw, 20px); font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.24rem, 3.4vw, 1.72rem); letter-spacing: .24em; color: #fff; } .hnews__seal { flex: none; display: block; width: 20px; height: 20px; background: var(--vermilion-deep); } .hnews__foot { width: min(100%, 940px); margin: clamp(12px, 1.6vw, 18px) auto 0; text-align: right; } .hnews__more { font-size: .86rem; letter-spacing: .08em; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; } .hnews__more:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } .hnews__list { list-style: none; margin: 0; padding: 0; } .hnews__item { display: flex; align-items: baseline; gap: 1.4em; padding: clamp(13px, 1.8vw, 18px) 0; min-width: 0; } .hnews__item + .hnews__item { border-top: 1px solid var(--paper-line); } .hnews__date { flex: none; font-family: var(--font-num); font-weight: 700; font-size: clamp(.82rem, 2vw, .9rem); letter-spacing: .04em; color: var(--paper-gold); } .hnews__link { min-width: 0; flex: 1; display: block; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.95rem, 2.5vw, 1.1rem); line-height: 1.75; color: var(--paper-ink); text-decoration: none; } .hnews__link:focus-visible { outline: 1px solid var(--paper-ink); outline-offset: 2px; } .hero-wrap { position: relative; } @media (max-width: 559px) { .hnews__item { flex-direction: column; gap: .2em; } } /* ========================================================================== フッター最上部の帯：浜寺公園から西を望む夜景 手前＝浜寺公園の松林／中景＝浜寺水路と台船／遠景＝工業地帯の煙突。 色は墨紺の濃淡＋金＋菊青白（朱はCTA専用なので使わない）。 ========================================================================== */ .skyline { position: relative; width: 100%; line-height: 0; overflow: hidden; /* 直前の .finale は下端が --ink で終わる。そこから夜空へ、 下端はフッターの地色(#0b1322)へ送り、上下のブロックと途切れさせない */ background: linear-gradient(180deg, var(--ink) 0%, #0d1526 30%, #080f1c 72%, var(--ink) 100%); } /* 下端をフッターの地色に溶かす（松林の黒とフッター紺の段差を消す） */ .skyline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* 松の足元だけを奥付の地色へ送る。広くかけると松が溶けて近景が消える */ height: 9%; background: linear-gradient(180deg, rgba(18, 27, 44, 0) 0%, rgba(18, 27, 44, .92) 100%); pointer-events: none; } /* 高さは幅に比例させる。固定高さ＋slice だと、幅が広がるほど上（＝花火）が切れる。 狭い画面だけ min-height を効かせ、そこでは左右がトリミングされる（縦は切れない）。 */ .skyline__svg { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 300; min-height: 190px; } /* 遠景の工業地帯：奥ほど明るい墨紺 */ .sk__far rect, .sk__far circle { fill: #1c2c47; } .sk__stack path { fill: #16233a; } .sk__beacon { fill: var(--gold); opacity: .9; animation: skBeacon 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skBeacon { 0%,100% { opacity: .2; } 50% { opacity: 1; } } .sk__lamp { fill: var(--gold); opacity: .8; animation: skLamp 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__lamp--kiku { fill: var(--kiku); } @keyframes skLamp { 0%,100% { opacity: .3; } 45% { opacity: 1; } } /* 中景：浜寺水路 */ .sk__sea { fill: #0a1426; } .sk__refl rect { fill: var(--gold); opacity: .18; animation: skRefl 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skRefl { 0%,100% { opacity: .08; } 50% { opacity: .3; } } .sk__wave { fill: rgba(159, 200, 232, .1); animation: skWave 5s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skWave { 0%,100% { opacity: .35; } 50% { opacity: .9; } } /* 台船 */ .sk__barge rect { fill: #0a1220; } .sk__bargehull { fill: #121d31 !important; } .sk__bargerefl { fill: rgba(232, 180, 74, .16); animation: skRefl 4s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__bargelight { fill: var(--gold) !important; animation: skLamp 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); } /* 手前：浜寺公園の松林（いちばん暗く落として近景にする） */ .sk__pine path, .sk__pine rect { fill: #03060e; } /* タコの滑り台。松より一段明るくして、松林に埋もれないようにする */ .sk__taco path, .sk__taco rect { fill: #0d1626; } /* 花火：台船の上から拍を持って上がる */ .sk__fw--gold line, .sk__fw--gold circle { stroke: var(--gold); fill: var(--gold); } .sk__fw--kiku line, .sk__fw--kiku circle { stroke: var(--kiku); fill: var(--kiku); } .sk__fw--washi line, .sk__fw--washi circle { stroke: var(--washi); fill: var(--washi); } .sk__fw line { stroke-width: 1.15; stroke-linecap: round; } .sk__rise { fill: var(--gold); transform-box: fill-box; transform-origin: center bottom; animation: skRise var(--dur, 7s) linear infinite; animation-delay: var(--d, 0s); } .sk__fw--kiku .sk__rise { fill: var(--kiku); } .sk__fw--washi .sk__rise { fill: var(--washi); } @keyframes skRise { 0% { transform: scaleY(0); opacity: 0; } 4% { transform: scaleY(.06); opacity: .9; } 15% { transform: scaleY(1); opacity: .5; } 18% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } } .sk__burst { transform-box: fill-box; transform-origin: center; animation: skBurst var(--dur, 7s) ease-out infinite; animation-delay: var(--d, 0s); } @keyframes skBurst { 0%, 16% { transform: scale(.05); opacity: 0; } 21% { transform: scale(1); opacity: 1; } 36% { transform: scale(1.13); opacity: .55; } 50%,100% { transform: scale(1.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sk__lamp, .sk__refl rect, .sk__wave, .sk__beacon, .sk__bargelight, .sk__bargerefl, .sk__rise, .sk__burst { animation: none; } .sk__rise { opacity: 0; } .sk__burst { transform: scale(1); opacity: 1; } .sk__lamp, .sk__beacon, .sk__bargelight { opacity: .85; } .sk__refl rect { opacity: .18; } .sk__wave { opacity: .6; } .sk__bargerefl { opacity: .16; } } /* ---- 「高石超花火とは」＝見出しの上に置く小さな標題（.lead）---- 隅に浮かせた金の小ラベルは、どのサイトにもある“eyebrow”の型で、 置き場所も見出しと無関係だった。サイト共通の見出し様式（design.md §5＝ 「筆の掠れ線 + 見出し」）に合わせ、見出しと同じ組の中に納める。 ---- */ /* サイト共通の筆の掠れ線（sec-head と同じマスク＝装飾の出どころを揃える） */ /* 段落。1行空け相当の余白で区切る */ .lead__p { display: block; } .lead__p + .lead__p { margin-top: 1.6em; } /* 強調は太さのみ。色は変えない */ .lead__desc b { font-weight: 700; } /* ---- 「圧倒的」の透かし（.scale の無地部分・縦組み）---- 写真の上には置かない。墨紺の余白に縦組みで巨大に。 writing-mode で縦組みにする（transform 回転は使わない）。 ---- */ .scale { position: relative; } .scale__wm { position: absolute; /* 縦組みでは「高さ」が行の長さになる。折り返しの真因は級数ではなく、 absolute + top で使える高さが削られていたこと（節900px − 上端72px = 828px、 6字を1列に収める上限は 828/6 ≒ 138px なのに 11vw=158px を指定していた）。 上端を詰めて使える高さを増やし、級数を上限近くまで戻す。 */ top: 10px; /* 右端で字が断ち切られないよう、必ず内側に収める */ right: clamp(16px, 4vw, 72px); z-index: 0; margin: 0; writing-mode: vertical-rl; /* 折り返すと最後の1字だけが次の列に落ちる。必ず1列に収める */ white-space: nowrap; /* Kaisei Tokumin は筆の丸みが残り、この語には柔らかすぎた（「可愛い」）。 縦太横細・ウロコの鋭い見出し明朝へ。godzilla-movie.jp のヒーロー右の 縦組みコピーと同系の骨格（あちらは画像だがゴシックではなく重い明朝）。 Zen Old Mincho 900 は大数字用に既に読み込んでいるので追加リクエストは増えない。 */ font-family: "Zen Old Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight: 900; /* 6字を1列に収めたうえで、セクション高さの7割前後に収まる級数 */ font-size: min(clamp(4.6rem, 9.2vw, 7.4rem), calc(var(--vhlock) * 0.12)); line-height: 1; letter-spacing: .06em; color: #fff; opacity: .13; /* 明朝の細い横画が飛ばないよう .11 から微増 */ pointer-events: none; user-select: none; } .scale__inner { position: relative; z-index: 1; } /* 追加本文 */ .scale__body { margin-top: clamp(30px, 4.4vw, 56px); text-align: left; max-width: 44em; margin-left: auto; margin-right: auto; } .scale__p { margin: 0; font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .scale__p + .scale__p { margin-top: 1.6em; } .scale__p b { font-weight: 700; } /* 微強調：太字のみ */ .scale__p .scale__em { font-size: 1.16em; } /* 最強調：太字＋級数アップ。色は変えない */ @media (max-width: 759px) { /* スマホでも入れる。本文の可読性を守るため、本文より後ろ（z-index 0）に置き、 右端に寄せて本文と重なる面積を減らす。級数は画面幅なりに大きく取る。 */ /* スマホは見出しが全幅に伸びるため、透かしを見出しの下から始める（重なりの解消） */ /* スマホでは右に置くと花火のイラスト（大きい方）に重なる。左へ寄せる。 あわせて図全体を右へずらし、透かしの列（左100px前後）を空ける。 */ .scale__wm { display: block; font-size: min(clamp(3.6rem, 26vw, 7rem), calc(var(--vhlock) * 0.098)); opacity: .1; top: 17%; right: auto; left: 4px; } .scale__charts { padding-left: clamp(70px, 22vw, 96px); } } /* ========================================================================== フッター最上部の帯：浜寺公園から西を望む夜景 手前＝浜寺公園の松林／中景＝浜寺水路と台船／遠景＝工業地帯の煙突。 色は墨紺の濃淡＋金＋菊青白（朱はCTA専用なので使わない）。 ========================================================================== */ .skyline { position: relative; width: 100%; line-height: 0; overflow: hidden; /* 直前の .finale は下端が --ink で終わる。そこから夜空へ、 下端はフッターの地色(#0b1322)へ送り、上下のブロックと途切れさせない */ background: linear-gradient(180deg, var(--ink) 0%, #0d1526 30%, #080f1c 72%, var(--ink) 100%); } /* 下端をフッターの地色に溶かす（松林の黒とフッター紺の段差を消す） */ .skyline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* 松の足元だけを奥付の地色へ送る。広くかけると松が溶けて近景が消える */ height: 9%; background: linear-gradient(180deg, rgba(18, 27, 44, 0) 0%, rgba(18, 27, 44, .92) 100%); pointer-events: none; } /* 高さは幅に比例させる。固定高さ＋slice だと、幅が広がるほど上（＝花火）が切れる。 狭い画面だけ min-height を効かせ、そこでは左右がトリミングされる（縦は切れない）。 */ .skyline__svg { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 300; min-height: 190px; } /* 遠景の工業地帯：奥ほど明るい墨紺 */ .sk__far rect, .sk__far circle { fill: #1c2c47; } .sk__stack path { fill: #16233a; } .sk__beacon { fill: var(--gold); opacity: .9; animation: skBeacon 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skBeacon { 0%,100% { opacity: .2; } 50% { opacity: 1; } } .sk__lamp { fill: var(--gold); opacity: .8; animation: skLamp 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__lamp--kiku { fill: var(--kiku); } @keyframes skLamp { 0%,100% { opacity: .3; } 45% { opacity: 1; } } /* 中景：浜寺水路 */ .sk__sea { fill: #0a1426; } .sk__refl rect { fill: var(--gold); opacity: .18; animation: skRefl 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skRefl { 0%,100% { opacity: .08; } 50% { opacity: .3; } } .sk__wave { fill: rgba(159, 200, 232, .1); animation: skWave 5s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes skWave { 0%,100% { opacity: .35; } 50% { opacity: .9; } } /* 台船 */ .sk__barge rect { fill: #0a1220; } .sk__bargehull { fill: #121d31 !important; } .sk__bargerefl { fill: rgba(232, 180, 74, .16); animation: skRefl 4s ease-in-out infinite; animation-delay: var(--d, 0s); } .sk__bargelight { fill: var(--gold) !important; animation: skLamp 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); } /* 手前：浜寺公園の松林（いちばん暗く落として近景にする） */ .sk__pine path, .sk__pine rect { fill: #03060e; } /* タコの滑り台。松より一段明るくして、松林に埋もれないようにする */ .sk__taco path, .sk__taco rect { fill: #0d1626; } /* 花火：台船の上から拍を持って上がる */ .sk__fw--gold line, .sk__fw--gold circle { stroke: var(--gold); fill: var(--gold); } .sk__fw--kiku line, .sk__fw--kiku circle { stroke: var(--kiku); fill: var(--kiku); } .sk__fw--washi line, .sk__fw--washi circle { stroke: var(--washi); fill: var(--washi); } .sk__fw line { stroke-width: 1.15; stroke-linecap: round; } .sk__rise { fill: var(--gold); transform-box: fill-box; transform-origin: center bottom; animation: skRise var(--dur, 7s) linear infinite; animation-delay: var(--d, 0s); } .sk__fw--kiku .sk__rise { fill: var(--kiku); } .sk__fw--washi .sk__rise { fill: var(--washi); } @keyframes skRise { 0% { transform: scaleY(0); opacity: 0; } 4% { transform: scaleY(.06); opacity: .9; } 15% { transform: scaleY(1); opacity: .5; } 18% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } } .sk__burst { transform-box: fill-box; transform-origin: center; animation: skBurst var(--dur, 7s) ease-out infinite; animation-delay: var(--d, 0s); } @keyframes skBurst { 0%, 16% { transform: scale(.05); opacity: 0; } 21% { transform: scale(1); opacity: 1; } 36% { transform: scale(1.13); opacity: .55; } 50%,100% { transform: scale(1.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sk__lamp, .sk__refl rect, .sk__wave, .sk__beacon, .sk__bargelight, .sk__bargerefl, .sk__rise, .sk__burst { animation: none; } .sk__rise { opacity: 0; } .sk__burst { transform: scale(1); opacity: 1; } .sk__lamp, .sk__beacon, .sk__bargelight { opacity: .85; } .sk__refl rect { opacity: .18; } .sk__wave { opacity: .6; } .sk__bargerefl { opacity: .16; } } /* ---- 「高石超花火とは」＝見出しの上に置く小さな標題（.lead）---- 隅に浮かせた金の小ラベルは、どのサイトにもある“eyebrow”の型で、 置き場所も見出しと無関係だった。サイト共通の見出し様式（design.md §5＝ 「筆の掠れ線 + 見出し」）に合わせ、見出しと同じ組の中に納める。 ---- */ .lead__eyebrow { display: flex; flex-direction: column; align-items: center; gap: .8em; margin: 0 0 clamp(14px, 2vw, 22px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.76rem, 2vw, .88rem); letter-spacing: .34em; text-indent: .34em; /* 字間ぶんの右寄りを打ち消して光学中央に */ color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); } /* サイト共通の筆の掠れ線（sec-head と同じマスク＝装飾の出どころを揃える） */ /* 段落。1行空け相当の余白で区切る */ .lead__p { display: block; } .lead__p + .lead__p { margin-top: 1.6em; } /* 強調は太さのみ。色は変えない */ .lead__desc b { font-weight: 700; } /* ---- 「圧倒的」の透かし（.scale の無地部分・縦組み）---- 写真の上には置かない。墨紺の余白に縦組みで巨大に。 writing-mode で縦組みにする（transform 回転は使わない）。 ---- */ .scale { position: relative; } .scale__wm { position: absolute; /* 縦組みでは「高さ」が行の長さになる。折り返しの真因は級数ではなく、 absolute + top で使える高さが削られていたこと（節900px − 上端72px = 828px、 6字を1列に収める上限は 828/6 ≒ 138px なのに 11vw=158px を指定していた）。 上端を詰めて使える高さを増やし、級数を上限近くまで戻す。 */ top: 10px; /* 右端で字が断ち切られないよう、必ず内側に収める */ right: clamp(16px, 4vw, 72px); z-index: 0; margin: 0; writing-mode: vertical-rl; /* 折り返すと最後の1字だけが次の列に落ちる。必ず1列に収める */ white-space: nowrap; /* Kaisei Tokumin は筆の丸みが残り、この語には柔らかすぎた（「可愛い」）。 縦太横細・ウロコの鋭い見出し明朝へ。godzilla-movie.jp のヒーロー右の 縦組みコピーと同系の骨格（あちらは画像だがゴシックではなく重い明朝）。 Zen Old Mincho 900 は大数字用に既に読み込んでいるので追加リクエストは増えない。 */ font-family: "Zen Old Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight: 900; /* 6字を1列に収めたうえで、セクション高さの7割前後に収まる級数 */ font-size: min(clamp(4.6rem, 9.2vw, 7.4rem), calc(var(--vhlock) * 0.12)); line-height: 1; letter-spacing: .06em; color: #fff; opacity: .13; /* 明朝の細い横画が飛ばないよう .11 から微増 */ pointer-events: none; user-select: none; } .scale__inner { position: relative; z-index: 1; } /* 追加本文 */ .scale__body { margin-top: clamp(30px, 4.4vw, 56px); text-align: left; max-width: 44em; margin-left: auto; margin-right: auto; } .scale__p { margin: 0; font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .scale__p + .scale__p { margin-top: 1.6em; } .scale__p b { font-weight: 700; } /* 微強調：太字のみ */ .scale__p .scale__em { font-size: 1.16em; } /* 最強調：太字＋級数アップ。色は変えない */ @media (max-width: 759px) { /* スマホでも入れる。本文の可読性を守るため、本文より後ろ（z-index 0）に置き、 右端に寄せて本文と重なる面積を減らす。級数は画面幅なりに大きく取る。 */ /* スマホは見出しが全幅に伸びるため、透かしを見出しの下から始める（重なりの解消） */ /* スマホでは右に置くと花火のイラスト（大きい方）に重なる。左へ寄せる。 あわせて図全体を右へずらし、透かしの列（左100px前後）を空ける。 */ .scale__wm { display: block; font-size: min(clamp(3.6rem, 26vw, 7rem), calc(var(--vhlock) * 0.098)); opacity: .1; top: 17%; right: auto; left: 4px; } .scale__charts { padding-left: clamp(70px, 22vw, 96px); } } /* ヒーローとニュースBOXの共通の基準。PCの絶対配置はこれを基準にする */ .hero-wrap { position: relative; } /* PCでBOXを右下に置くため、ヒーロー主情報の下に居場所を空ける。 かつて4バナー帯が使っていたのと同じ手当て（.hero__inner の下余白で押し上げる）。 これをしないと、主情報は中央〜右まで広がっているのでBOXと必ず重なる （実測: 1024〜1600px の全幅・高さ720/820/900 で縦横とも衝突していた）。 */ @media (min-width: 1024px) { /* 掲示をヒーロー外へ移したので、居場所の確保は不要になった */ .hero-final-page .hero__inner { padding-bottom: clamp(40px, calc(var(--vhlock) * 0.065), 72px); } } /* 右下への絶対配置を 1024px 以上に限る理由： 768〜1023px はヒーローの主情報（日付・場所・打ち上げ時刻）が中央寄せで広い幅を占め、 右下に320pxの器を置くと必ず重なる（実測で .hero-final__when と .hero-final__times に衝突）。 「日付表記と重ならないこと」を優先し、この帯では掲示を下に流す。 実装は上の「ヒーロー内の掲示」ブロックの @media (min-width: 1024px) にある。 */ /* ---- SNSはアイコンリンク（テキストではなく標で示す） ---- */ .site-footer__sns { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; } .site-footer__snslink { display: grid; place-items: center; width: 44px; /* タップ領域 */ height: 44px; color: var(--washi); border: 1px solid rgba(242, 237, 227, 0.3); } .site-footer__snslink svg { width: 21px; height: 21px; display: block; } .site-footer__snslink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .site-footer__org-note { margin-left: .4em; font-size: .82em; color: var(--washi-dim); } /* タブレット幅（760〜1100px）の透かし。本文カラム(960px)の外側の余白が透かしの幅に 足りず、見出しの実グリフと重なっていた（実測 760px で 67×37px、900px で 80×44px）。 スマホと同じく見出しの下から始め、節の高さ内に収まる級数へ落とす。 */ @media (min-width: 760px) and (max-width: 1100px) { .scale__wm { top: clamp(80px, 11%, 130px); font-size: min(clamp(3.6rem, 9vw, 6.2rem), calc(var(--vhlock) * 0.09)); } } /* ========================================================================== /plans/vip/ と /plans/vip//（2026-08-12 全面再構築） 基調＝墨紺地 × 金ヘアライン × 白文字。 金線は「札・カードの枠」と「比較表の外枠」の2箇所だけに使う （見出し下の短線は、統一元である .gcards__head から撤去済みのため持たせない）。 角丸・影・グラデ・発光はすべて使わない。 余白は3段階で差をつける: 節間 (--vgap-sec) > 見出しと本文 (--vgap-head) > 本文内。 ========================================================================== */ .vip-main { --vgap-sec: clamp(64px, calc(var(--vhlock) * 0.115), 132px); --vgap-head: clamp(26px, 3.2vw, 44px); --vpad-x: clamp(18px, 5vw, 56px); --vmax: 1080px; background: var(--ink); } /* ---- ハーフヒーロー ---- */ .vhero { position: relative; display: flex; align-items: flex-end; height: clamp(320px, calc(var(--vhlock) * 0.56), 620px); overflow: hidden; } .vhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* スクリムは墨紺の単色べた。グラデは使わない */ .vhero__scrim { position: absolute; inset: 0; background: rgba(18, 27, 44, .62); } .vhero__inner { position: relative; width: min(100%, var(--vmax)); margin: 0 auto; padding: 0 var(--vpad-x) clamp(28px, 4vw, 52px); } /* 背景写真の最も明るい画素に対し 82%白では CR 4.21（実測）で基準未達だった。純白で 5.36 */ .vhero__crumbs { font-size: .74rem; letter-spacing: .12em; color: #fff; } .vhero__crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .38); padding-bottom: 1px; } .vhero__sep { padding: 0 .5em; opacity: .6; } .vhero__tag { margin: clamp(14px, 2vw, 22px) 0 0; } /* 写真の上に区画色を直に置くと、明るい画素に対して CR 2.63〜4.06（実測）で基準未達。 タグ自身に墨紺の地を敷き、背景写真の明暗に左右されないようにする。 */ .vhero__tag .ptag { background: rgba(11, 17, 30, .86); } .vhero__title { margin: clamp(12px, 1.8vw, 20px) 0 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(2.1rem, 6.4vw, 3.9rem); letter-spacing: .08em; line-height: 1.24; color: #fff; } .vhero__yomi { display: block; margin-top: .5em; font-family: var(--font-mincho); font-weight: 700; font-size: .3em; letter-spacing: .3em; color: rgba(255, 255, 255, .8); } .vhero__lead { margin: clamp(10px, 1.4vw, 16px) 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.96rem, 2.5vw, 1.18rem); letter-spacing: .06em; line-height: 1.9; color: #fff; } /* ---- 節の器と見出し ---- */ .vsec { padding: var(--vgap-sec) var(--vpad-x) 0; } .vsec:last-of-type { padding-bottom: var(--vgap-sec); } /* 節ごとに役割で変調する。特徴＝この頁の本体なので前を最も大きく空け、 比較表とマップは対で読ませるので間を詰め、申込は独立させる。 */ .vsec--feats { padding-top: clamp(78px, calc(var(--vhlock) * 0.145), 168px); } /* 見出しも役割で級数を変える。特徴＝この頁の本体、申込＝小さな締め。 */ .vsec--feats .vsec__title { font-size: clamp(1.66rem, 5.2vw, 2.62rem); } .vsec--cta .vsec__title { font-size: clamp(1.18rem, 3.4vw, 1.5rem); } .vsec--perks { padding-top: clamp(56px, calc(var(--vhlock) * 0.10), 116px); } .vsec--map { padding-top: clamp(40px, calc(var(--vhlock) * 0.062), 72px); } .vsec--cta { padding-top: clamp(78px, calc(var(--vhlock) * 0.145), 168px); } .vsec--facts, .vsec--inc { padding-top: clamp(48px, calc(var(--vhlock) * 0.082), 96px); } .vsec--sibs { padding-top: clamp(78px, calc(var(--vhlock) * 0.145), 168px); } .vsec__head { width: min(100%, var(--vmax)); margin: 0 auto var(--vgap-head); text-align: center; } .vsec__title { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.42rem, 4.4vw, 2.15rem); letter-spacing: .1em; line-height: 1.5; color: #fff; } .vsec__note { margin: .9em 0 0; font-size: clamp(.86rem, 2.2vw, .94rem); letter-spacing: .08em; color: #fff; } /* 節の補助文のうち一文だけを立てる（優先枠引き継ぎ制度の「入手が難しくなる」の一文）。 2026-08-17 変更: 級数を上げると後続文と行が揃わず不自然だったため、 級数は前後の文と完全に同一（font-size を指定しない）にして、金＋太字だけで立てる。 縁取り・発光・グラデーションは使わない（design.md §5）。 */ .vsec__note-em { font-weight: 700; color: var(--gold); } /* 実務セクション（区画図・基本情報・注意事項・他プラン）は本文の見出しであって 節の看板ではない。左寄せ・小さくして、看板見出しと役割差をつける。 */ /* 2026-08-21: 左揃え→中寄せ。下層ページの見出しは --util（小さめ）と素の .vsec__head （大きめ・中寄せ）が混在しており、1ページの中で左・左・中央・左…と揃いが乱れていた （白濱の指摘）。大きさの差だけで階層を出し、揃えは中央で統一する。 影響は下層11ページ・40箇所（VVIP個別3・VIP個別3・VVIPトップ・VIPトップ・ BBQ・実行委員会・仮設置のテストページ）。 */ .vsec__head--util { text-align: center; width: min(100%, 720px); margin-bottom: clamp(16px, 2vw, 24px); } .vsec__head--util .vsec__title { font-size: clamp(1.14rem, 3.2vw, 1.36rem); letter-spacing: .14em; color: #fff; } .vsec--lots .vsec__head--util { width: min(100%, var(--vmax)); } /* ---- 3 特典：金のヘアライン枠＋墨紺地＋直角 ---- */ .vperks { width: min(100%, var(--vmax)); margin: 0 auto; display: grid; gap: clamp(16px, 2.4vw, 26px); align-items: start; } @media (min-width: 760px) { .vperks { grid-template-columns: 1fr 1fr; } } .vperk { border: 1px solid var(--gold); background: var(--ink-2); padding: clamp(22px, 3.4vw, 38px); } .vperk__head { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.06rem, 3vw, 1.34rem); letter-spacing: .08em; line-height: 1.6; color: #fff; } .vperk__prov { display: inline-block; margin: .9em 0 0; padding: 3px 10px; background: rgba(232, 180, 74, .16); font-size: .68rem; letter-spacing: .16em; color: var(--gold); } .vperk__body { margin: 1.1em 0 0; font-size: clamp(.86rem, 2.3vw, .93rem); line-height: 2.05; color: var(--washi); } .vperk__note { margin: 1em 0 0; font-size: .78rem; line-height: 1.9; color: var(--washi-dim); } /* ---- 4 比較表：外枠だけ金。1人あたりを最大の数字にする ---- */ /* 表が枠からはみ出さないよう、器の側で受け止める（実測 1440px で右に約65pxはみ出していた） */ .vcmp { width: min(100%, var(--vmax)); margin: 0 auto; border: 1px solid var(--gold); overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 器に入りきらない幅では横スクロールになる。気づけるよう右端に合図を出す */ .vcmp__hint { display: none; } @media (max-width: 833px) { .vcmp__hint { display: block; width: min(100%, var(--vmax)); margin: 0 auto .7em; font-family: var(--font-mincho); font-size: .8rem; letter-spacing: .08em; color: #fff; } } .vcmp__table { width: 100%; border-collapse: collapse; } .vcmp__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .vcmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .vcmp__table th, .vcmp__table td { padding: clamp(14px, 2vw, 20px) clamp(9px, 1.1vw, 15px); text-align: left; vertical-align: middle; } .vcmp__table thead th { background: var(--surface-2); font-family: var(--font-mincho); font-weight: 700; font-size: .76rem; letter-spacing: .12em; color: var(--washi); white-space: nowrap; } .vcmp__table tbody tr + tr { border-top: 1px solid rgba(242, 237, 227, .16); } .vcmp__table tbody th { font-weight: 400; } .vcmp__yomi { display: block; margin-top: .5em; font-family: var(--font-mincho); font-size: .7rem; letter-spacing: .2em; color: var(--washi-dim); } .vcmp__table td { font-family: var(--font-num); font-size: clamp(.86rem, 2.2vw, .96rem); color: var(--washi); } /* 金額と定員は語中で折り返さない。¥440,000〜/¥490,000 のように行末で切る */ /* 2026-08-21: 上2行は data-th を出力していないため一度も効いていなかった。削除。 代わりに、スマホでラベル列を中身なりに詰める。この表は左のラベル列が 固定的に幅を取り、本文側が1行3〜4字まで潰れていた（実測 390pxで ラベル列138px／プラン列147px）。ラベルは日本語なので語中で折らない。 */ @media (max-width: 700px) { .vcmp__table tbody th { width: 1%; white-space: normal; word-break: keep-all; padding-left: clamp(8px, 2vw, 12px); padding-right: clamp(8px, 2vw, 12px); } .vcmp__table tbody th .vcmp__sub { display: block; margin-top: .2em; } } /* 1人あたり＝この表で最も大きい数字 */ .vcmp__per { font-size: clamp(1.24rem, 3.6vw, 1.72rem) !important; font-weight: 700; color: #fff; white-space: nowrap; } /* 価格未公開の間は「価格は近日発表」という空データが最も強い階層に立ってしまう。 pricePublic が true になったら自動でこの打ち消しが外れる。 */ .vcmp__per--tba { font-size: clamp(.86rem, 2.2vw, .96rem) !important; font-weight: 400; color: var(--washi); } .vcmp__go { width: 1%; white-space: nowrap; } .vcmp__link { display: inline-block; padding: 12px 4px; font-family: var(--font-mincho); font-weight: 700; font-size: .82rem; letter-spacing: .08em; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); } .vcmp__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .vcmp__note { width: min(100%, var(--vmax)); margin: clamp(12px, 1.8vw, 18px) auto 0; font-size: .86rem; line-height: 1.9; letter-spacing: .06em; color: #fff; } /* プランタグ＝券の消印。金ヘアライン枠＋明朝。全タグ同形 */ .ptag { display: inline-block; padding: 5px 11px; border: 0; background: rgba(232, 180, 74, .16); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.74rem, 2vw, .84rem); letter-spacing: .14em; line-height: 1.5; color: var(--gold); white-space: nowrap; } /* 区画ごとの識別色は会場マップ（data/aerial-shapes.json のオーバーレイ）と同じ値を使う。 地図で見た色が、そのままタグの色として頁の中を歩く。 */ .ptag--fast { background: rgba(255, 90, 140, .18); color: #ff9cba; } .ptag--lounge { background: rgba(255, 190, 60, .18); color: #ffd58a; } .ptag--panorama { background: rgba(90, 160, 255, .20); color: #a7c8ff; } /* エリア通し番号のバッジ（ヒーロータグの先頭）。金地で番号を出す。 */ .ptag--no { margin-right: .5em; background: rgba(232, 180, 74, .18); color: var(--gold); font-family: var(--font-num); } .vhero__tag .ptag--no { background: rgba(232, 180, 74, .16); } /* 番号バッジは、隣のエリア名バッジと同じ色に揃える（番号と名前を同色に）。 VVIPの名前バッジは既定＝金なので ptag--no（金）と元々一致。VIPだけ色が付くので合わせる。 */ .vhero__tag:has(.ptag--fast) .ptag--no { background: rgba(255, 90, 140, .18); color: #ff9cba; } .vhero__tag:has(.ptag--lounge) .ptag--no { background: rgba(255, 190, 60, .18); color: #ffd58a; } .vhero__tag:has(.ptag--panorama) .ptag--no { background: rgba(90, 160, 255, .20); color: #a7c8ff; } /* 兄弟カードの番号も、名前バッジ（ptag）と同色に */ .vsib--fast .vsib__no { color: #ff9cba; } .vsib--lounge .vsib__no { color: #ffd58a; } .vsib--panorama .vsib__no { color: #a7c8ff; } /* 特徴の見出し上に並べる小さい方 */ .ptag--sm { padding: 3px 9px; font-size: clamp(.68rem, 1.8vw, .76rem); letter-spacing: .1em; } .feat2__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 clamp(12px, 1.8vw, 18px); } /* ---- ボタン：朱べた面・白文字・直角・高さ48px以上 ---- */ .vbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; background: var(--vermilion-deep); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.84rem, 2.2vw, .92rem); letter-spacing: .1em; color: #fff; text-decoration: none; } .vbtn--lg { width: 100%; min-height: 56px; } .vbtn--go { min-height: 56px; padding: 14px 28px; } /* 監査: 車区画とバス区画は重みが違うのに同じ朱ベタ2枚だった。 バス側（該当者が限られる）は面を持たせず、枠だけの副次ボタンにする。 */ .vbtn--sub { background: transparent; border: 1px solid var(--washi-dim); color: var(--washi); } /* 一覧内の副次リンク。最終CTA（朱ベタ）と同じ強さで鳴らさない */ .vbtn--ghost { background: transparent; border: 1px solid var(--washi-dim); color: var(--washi); min-height: 44px; padding: 10px 18px; } .vbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* 900px未満は表をカード化（/plans の序列表と同じ手法） */ /* 含まれるもの（3行共通のrowspanセル）はカード化と両立しないので、 900px未満では列を落とし、表の下に1行の注記として出す */ .vcmp__note--inc { display: none; } /* ---- 5 マップ ---- */ .vsec--map .amap-sec { padding: 0; } .vsec--map .amap-list { margin-top: clamp(18px, 2.6vw, 28px); } .vsec--map .amap-list__btn { text-decoration: none; color: #fff; } .vsec--map .vsec__head--util { width: min(100%, var(--vmax)); } /* 「会場での位置」の節：2つの地図と、その導入文の幅を揃える（2026-08-21 白濱の指摘）。 上の地図（.zoom-wrap）は器なりに広がり、下の地図（.amap-sec）は min(94vw, 1240px) だったため、幅が食い違っていた。実測: 1440で1328/1240、1024で922/963、390で351/367。 下の地図の器に合わせて統一する。導入文も同じ幅にして左端を通す。 */ .vsec--map .zoom-wrap, .vsec--map .amap-sec, .vsec--map .vcmp__note { width: min(94vw, 1240px); margin-left: auto; margin-right: auto; } /* ---- 6 申込導線 ---- */ .vcta { width: min(100%, 720px); margin: 0 auto; } .vcta__lead { margin: 0 0 clamp(20px, 2.8vw, 30px); font-family: var(--font-mincho); font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .vcta__act { margin: 0; } .vcta__note { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: .8rem; line-height: 2; color: var(--washi-dim); } .vcta__note a, .vapply__note a, .fallnote a, .vinc__list a, .trust__body a, .notes__list a, .notes__after a, .legal-dl dd a, .vinc__list .pnt__lblink { color: var(--gold); text-underline-offset: 4px; } /* ---- 個別ページ ---- */ /* --lots-max は「その絵の原寸」。切り出した絵を原寸より大きく引き伸ばさないための 上限で、指定が無ければ従来どおり --vmax。夜景CGは原版が1392pxしかなく、 FIRE/DRUMを切り分けると772px/740pxになるため、1080pxまで伸ばすと甘くなる。 */ .vlots { width: min(100%, var(--lots-max, var(--vmax))); margin: 0 auto; } .vlots img { display: block; width: 100%; height: auto; } .vlots__cap { margin-top: 1em; font-size: .84rem; line-height: 1.9; color: #fff; } /* 図の拡大は文字リンクで開く（画像そのものは押さない）。 button は color を継がないので明示する。既定のままだと墨紺の地に黒文字で、 実測 rgb(0,0,0)＝事実上見えなかった。金にして「押せる」ことも同時に示す。 */ .vlots__cap .pnt__lblink { color: var(--gold); } /* 黒地の作画は、ページの地色（墨紺）と境目が分からない。金のヘアラインで縁を示す （枠の作法は .pfacts__fig と同じ）。押せる印ではないので細く・薄く。 */ .vlots--framed img { border: 1px solid rgba(232, 180, 74, .45); } /* 全周＋横罫のグリッドは汎用スペック表の描画そのものだった（監査指摘）。 外枠だけ残し、行の区切りは余白で取る。 */ .vfacts { width: min(100%, 620px); margin: 0 auto; border: 1px solid var(--gold); padding: clamp(18px, 2.8vw, 28px) clamp(18px, 2.8vw, 30px); } .vfacts__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4em; } .vfacts__row + .vfacts__row { margin-top: clamp(13px, 2vw, 18px); } .vfacts__row dt { flex: 0 0 auto; font-family: var(--font-mincho); font-weight: 700; font-size: .78rem; letter-spacing: .12em; color: var(--washi-dim); } .vfacts__row dd { margin: 0; text-align: right; font-family: var(--font-num); font-size: clamp(.9rem, 2.3vw, 1rem); color: var(--washi); } .vfacts__approx { font-family: var(--font-mincho); font-size: .5em; letter-spacing: .06em; margin-right: .2em; vertical-align: .28em; color: var(--washi-dim); } .vfacts__per { font-size: clamp(1.3rem, 4vw, 1.75rem) !important; font-weight: 700; color: #fff !important; } .vinc { width: min(100%, 720px); margin: 0 auto; } .vinc__lead { margin: 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.92rem, 2.4vw, 1.02rem); line-height: 2; color: var(--washi); } .vinc__list { margin: clamp(18px, 2.4vw, 26px) 0 0; padding-left: 1.3em; } .vinc__list li { font-size: clamp(.86rem, 2.3vw, .93rem); line-height: 2.05; color: var(--washi); } .vinc__list--notes { margin-top: 1.4em; } .vinc__list--notes li { color: var(--washi-dim); font-size: .82rem; } /* 人数カウントの計算例（2026-08-17 3例）。3列に並べるぶんだけ器を広げる。 3列グリッドは特典の .merits__list を流用（860px以上で3列・未満は1列＝縦積み）。 例の中の見出し・式・結論は .vinc__lead / .vinc__list / --notes をそのまま使う。 枠は既存の .vfacts（金のヘアライン＋余白・直角）を各箱に付けて使う＝新規クラスなし。 */ .vinc--counts { width: min(100%, var(--vmax)); } /* 「カウントの数え方」の箱だけは全幅。例のグリッドと左右を揃えて上下の階層に見せる （.vfacts の既定は 620px 幅なので、この文脈でだけ広げる） */ .vinc--counts > .vfacts { width: 100%; margin: clamp(16px, 2.2vw, 24px) 0 0; } .vinc--counts > .vfacts .vinc__list { margin-top: clamp(10px, 1.4vw, 14px); } /* 数え方（定義）と計算例（適用）の間を空けて段を分ける */ .vinc--counts > .vfacts + .vcounts { margin-top: clamp(20px, 2.8vw, 32px); } /* 例の見出しは金。数え方の見出しは白のまま＝2つの階層の差になる */ .vcounts .vinc__lead { color: var(--gold); } /* 見出し→式→結論の3段に、それぞれ余白を持たせる（枠の中で窮屈にしない） */ .vcounts .vinc__list { margin-top: clamp(12px, 1.6vw, 16px); } .vcounts .vinc__list--notes { margin-top: clamp(13px, 1.8vw, 18px); } /* 計算式は数字を読み取る行なので数字用の書体にする（結論の行は本文のまま） */ .vcounts .vinc__list:not(.vinc__list--notes) li { font-family: var(--font-num); } /* 例の箱の中の ul は li の入れ子になるため、既定だと2階層目の白丸になる。 「数え方」の箱（div直下のul）と同じ黒丸に揃える。 */ .vcounts .vinc__list { list-style-type: disc; } .vapply { width: min(100%, 720px); margin: 0 auto; } /* 比較表の直後・個別ページ最下部に置く申込ボタンの並び（2026-08-22）。 ボタン自体は既存の .vbtn。横に並べるためのグリッドだけ。狭い画面は縦積み。 */ .applyrow { list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0; display: grid; gap: clamp(10px, 1.4vw, 14px); } @media (min-width: 760px) { .applyrow { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .applyrow .vbtn { width: 100%; } /* 比較表の申込ボタン行の上に置く1行。ボタン群に対して1つだけ。 */ .vcmp__micro { text-align: center; font-family: var(--font-gothic); font-size: .78rem; letter-spacing: .16em; color: var(--washi-dim); padding-bottom: 0 !important; } .vcmp__gorow th, .vcmp__gorow td { border-top: 0; } .vapply__row { margin: 0; display: grid; gap: .8em; } .vapply__row + .vapply__row { margin-top: clamp(22px, 3vw, 32px); } .vapply__desc { font-size: .82rem; line-height: 1.9; color: var(--washi-dim); } .vapply__note { margin: clamp(22px, 3vw, 32px) 0 0; font-size: .8rem; line-height: 2; color: var(--washi-dim); } .vsibs { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 720px); display: grid; gap: 12px; } @media (min-width: 620px) { .vsibs { grid-template-columns: 1fr 1fr; } } /* 監査: 枠付きカードの中にさらに枠付きの札＝カード・イン・カードだった。 札（＝全ページ共通の形）を残し、カード側の枠を外して余白で区切る。 */ .vsib { display: block; padding: clamp(16px, 2.4vw, 22px) 0; text-decoration: none; } .vsib__catch { display: block; margin-top: .9em; font-family: var(--font-mincho); font-size: .84rem; line-height: 1.8; color: var(--washi); } .vsib:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* 「BBQ開始までの流れ」だけ背景に会場写真を敷く（2026-08-18）。 紺一色がページの最後まで続いて単調だったため、中ほどで一度だけ地を変える。 全幅は 100vw ではなく calc(50% - 50vw)（スクロールバー分の横スクロールを出さない）。 高さは --vhlock 由来ではなく中身なりに伸ばす＝バー開閉で切り直されない。 写真の上に白い札を置くので暗幕は濃く取り、写真は「気配」に留める。 */ .vsec--flow { position: relative; isolation: isolate; padding-block: clamp(40px, 5vw, 72px); } .bflowbg { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; z-index: -1; } /* パララックスの余白は「最大ずれ × 1.15」で取る。 最大ずれ = (画面高/2 + 節高/2) × 係数。係数0.20・節高844・画面高900なら ±175px。 上下200pxずつ確保する。以前は片側60pxしか無く、端が見えるうえ動きも小さかった。 素材は2400px幅にしてあるので、この余白でもPC1440pxで拡大されない（実測0.98）。 */ .bflowbg img { position: absolute; left: 0; top: -200px; width: 100%; height: calc(100% + 400px); object-fit: cover; object-position: center 45%; will-change: transform; } /* 暗幕。上下は紺へ完全に沈めて、隣の節との境目を作らない */ .bflowbg::after { content: ""; position: absolute; inset: 0; /* 見出しは白なので上だけ濃く沈める。札は白地で写真に負けないので、 中ほどは暗幕を薄くして写真を見せる（0.86だと写真がほぼ消えていた）。 */ /* 挿絵は元から墨紺基調なので、暗幕はごく薄くてよい。上だけ少し沈めて 白い見出しを守り、あとは絵をそのまま見せる。 */ background: linear-gradient(to bottom, var(--ink) 0%, rgba(18, 27, 44, .72) 9%, rgba(18, 27, 44, .22) 30%, rgba(18, 27, 44, .22) 82%, var(--ink) 100%); } @media (prefers-reduced-motion: reduce) { .bflowbg img { transform: none !important; } } /* VIPページ内のマップ：角丸を殺す（このページ群は直角で統一）。 2026-08-18: 狭い画面で横スクロール（overflow-x:auto ＋ .amap{width:900px}）に していたのをやめた。器が流れるとその中の .zoom__ui も一緒に流れ、実測380pxで 右へ269px 出て押せなくなっていた。区画のタップ領域は、同じ900px相当まで 初期倍率で寄せることで確保する（JS: READABLE=900）。 */ .vsec--map .amap-scroll { border-radius: 0; } /* ========================================================================== VIP マスターv3 対応（2026-08-12）：比較表の追加列・金の点表記・来場手段の2択 ========================================================================== */ /* 主観指標の5段階。星や絵文字は使わず、金と白の点の対比だけで示す */ .dots { letter-spacing: .16em; font-size: .84rem; color: var(--gold); white-space: nowrap; } /* 比較表：追加した「区画数」「含まれるもの」「花火の迫力」 */ .vcmp__units { display: block; margin-top: .45em; font-family: var(--font-mincho); font-size: .7rem; letter-spacing: .1em; color: var(--washi-dim); } /* 3区画とも同一の内容なので rowspan で1セルに畳む＝「共通である」ことを表の構造で言う */ .vcmp__inc { font-family: var(--font-mincho); font-size: .78rem !important; line-height: 1.9; color: var(--washi-dim) !important; max-width: 15em; vertical-align: middle; border-left: 1px solid rgba(242,237,227,.16); } .vcmp__inc-note { display: block; margin-bottom: .7em; font-size: .72rem; letter-spacing: .12em; color: var(--gold); } .vcmp__inc-li { display: block; } .vcmp__inc-li + .vcmp__inc-li { margin-top: .35em; } .vcmp__src { display: block; margin-top: .4em; font-weight: 400; font-size: .62rem; letter-spacing: .06em; color: var(--washi-dim); } .vcmp__pow { white-space: nowrap; } .vcmp__note b { color: var(--washi); font-weight: 700; } /* 来場手段の2択。価格・定員が同じで申込先だけ違うので、 2つの商品ではなく1つの区画の2つの入口として並べる */ .vapply__price { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.2; color: #fff; } .vapply__per { display: block; margin-top: .6em; font-family: var(--font-mincho); font-weight: 400; font-size: .82rem; letter-spacing: .06em; color: var(--washi-dim); } .vapply__lead { margin: clamp(14px, 2vw, 20px) 0 clamp(20px, 2.8vw, 28px); font-family: var(--font-mincho); font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .vapply__lead b { color: #fff; } .vchoice { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 20px); } @media (min-width: 680px) { .vchoice { grid-template-columns: 1fr 1fr; } } .vchoice__item { border: 1px solid rgba(242, 237, 227, .26); padding: clamp(16px, 2.4vw, 22px); display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 16px); } .vchoice__item .vbtn { margin-top: auto; } .vchoice__name { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.02rem, 2.8vw, 1.18rem); letter-spacing: .08em; color: #fff; } .vchoice__detail { display: block; margin-top: .55em; font-family: var(--font-mincho); font-weight: 400; font-size: .78rem; letter-spacing: .04em; color: var(--washi-dim); } .vchoice__price { margin: .9em 0 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.24rem, 3.4vw, 1.5rem); color: #fff; } .vchoice__per { display: block; margin-top: .35em; font-family: var(--font-mincho); font-weight: 400; font-size: .76rem; letter-spacing: .06em; color: var(--washi-dim); } .vchoice__note { margin: .9em 0 clamp(18px, 2.4vw, 24px); font-size: .78rem; line-height: 1.9; color: var(--washi-dim); flex: 1; } .vchoice__item .vbtn { width: 100%; } /* ========================================================================== VIP 特徴・特典を企画書P3/P4の版面に合わせる（2026-08-12 改訂） ・背景の花火は「固定」。動くのは上に載る写真とテキストだけ。 背景を節の高さまで引き伸ばすと元画像(1568x908)が2〜3倍に拡大されて荒れるため、 画面サイズに固定して等倍付近で使う。 ・見出しは金の明朝文字＋金のヘアライン枠（企画書P4の「POINT」ブロックの型）。 採番だけは使わない（丸数字・算用数字とも禁止のため）。 ========================================================================== */ .vsec--feats { position: relative; overflow: hidden; background: #0a1018; } /* clip-path で内側の position:fixed をこの節に閉じ込める＝背景だけが固定される。 background-attachment:fixed は iOS で効かないため使わない。 */ .vsec__bg { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; } .vsec__bg img { position: fixed; /* LINE等のアプリ内ブラウザでバーが開閉するとビューポート高が変わる。 --vhlock は凍結値なので伸びず、そのままだと下端に隙間が出てガタつく。 上下に80pxずつ余らせて、バーの高さ変化を吸収する。 */ top: -80px; left: 0; width: 100%; height: calc(var(--vhlock) + 160px); object-fit: cover; object-position: center 42%; } .vsec__scrim { position: absolute; inset: 0; z-index: 0; background: rgba(6, 10, 17, .84); pointer-events: none; } .vsec--feats > *:not(.vsec__bg):not(.vsec__scrim) { position: relative; z-index: 1; } /* ---- 特徴＝企画書P4の「POINT」ブロックを2カラムで ---- 金の1px枠が「見出し＋本文＋写真」を囲う。左テキスト・右画像で固定。 スマホはテキスト先行・写真は下。 */ .pnts { width: min(100%, var(--vmax)); margin: 0 auto; display: grid; gap: clamp(26px, 3.2vw, 40px); } .pnt { margin-top: clamp(14px, 1.6vw, 18px); } /* バッジが上にはみ出すぶん */ .pnt__row { display: grid; grid-template-columns: 1fr; align-items: stretch; border: 1px solid var(--gold); background: rgba(6, 10, 17, .74); } @media (min-width: 760px) { .pnt__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(290px, 28vw, 380px); } .pnt__media { min-height: 0; overflow: hidden; } .pnt__media--figure { max-height: clamp(290px, 28vw, 380px); } } @media (max-width: 759px) { .pnt__media { order: 2; } .pnt__text { order: 1; } } .pnt__text { padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 32px); } /* 見出し行：バッジは枠の左上に食い込ませる */ .pnt__head { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 16px); margin: 0; } .pnt__badge { flex: none; display: grid; place-items: center; width: clamp(50px, 5.2vw, 60px); padding: 5px 0 7px; margin: calc(-1 * clamp(34px, 3.8vw, 44px)) 0 0 calc(-1 * clamp(21px, 2.7vw, 33px)); border: 1px solid var(--gold); background: rgba(14, 10, 3, .96); line-height: 1; align-self: flex-start; } .pnt__badge-label { font-family: var(--font-gothic); font-weight: 900; font-size: clamp(.52rem, 1.3vw, .6rem); letter-spacing: .08em; color: var(--gold); } .pnt__badge-num { font-family: var(--font-num); font-weight: 900; font-size: clamp(2rem, 4.6vw, 2.6rem); line-height: 1; color: var(--gold); -webkit-text-stroke: .02em var(--gold); } .pnt__title { font-family: var(--font-num); font-weight: 900; font-size: clamp(1.3rem, 3.4vw, 1.8rem); letter-spacing: .04em; line-height: 1.35; color: var(--gold); -webkit-text-stroke: .018em var(--gold); } .pnt__lead { margin: clamp(16px, 2vw, 22px) 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.5vw, 1.14rem); line-height: 1.9; letter-spacing: .03em; color: #fff; } .pnt__desc { margin: .85em 0 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.1vw, .95rem); line-height: 2.05; color: #fff; } .pnt__note { margin: .9em 0 0; font-size: .8rem; line-height: 1.9; color: #fff; } .pnt__media { margin: 0; display: grid; align-self: stretch; } .pnt__media img { width: 100%; height: 100%; min-height: clamp(200px, 24vw, 280px); object-fit: cover; display: block; } .pnt__media--figure { background: #f6f3ec; padding: clamp(14px, 2vw, 24px); place-items: center; } .pnt__media--figure img { height: auto; max-height: 100%; width: auto; max-width: 100%; min-height: 0; object-fit: contain; } .pnt__soon { display: grid; place-items: center; margin: 0; min-height: clamp(200px, 24vw, 280px); background: rgba(255, 255, 255, .04); font-family: var(--font-mincho); font-size: .84rem; letter-spacing: .18em; color: #fff; } /* ---- 優先販売特典（企画書の「優先販売特典」ページの型）---- 金枠のパネル → 金の見出し＋白の説明 → MERIT 1〜3 の3列。 各列は 金地のMERITバッジ／暗地＋金枠の見出し箱（金の線画＋見出し）／白の本文。 */ .merits { width: min(100%, var(--vmax)); margin: 0 auto; border: 1px solid var(--gold); background: rgba(6, 10, 17, .74); padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3vw, 40px) clamp(30px, 4vw, 48px); } .merits + .merits { margin-top: clamp(20px, 2.6vw, 30px); } .merits__head { display: flex; align-items: center; gap: .6em; margin: 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.34rem, 3.8vw, 2rem); letter-spacing: .06em; line-height: 1.45; color: var(--gold); -webkit-text-stroke: .016em var(--gold); } .merits__lead { margin: clamp(16px, 2.2vw, 22px) 0 0; font-family: var(--font-mincho); font-size: clamp(.92rem, 2.3vw, 1rem); line-height: 2.05; color: #fff; } .merits__note { margin: 1em 0 0; font-size: .8rem; line-height: 1.9; color: #fff; } .merit__inline-icon { flex: none; width: clamp(24px, 3vw, 30px); height: auto; color: var(--gold); } .merits__list { list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 34px); } @media (min-width: 860px) { .merits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .merit { display: flex; flex-direction: column; } /* 金地に濃色の札。見出し箱の左上に載せる */ .merit__badge { align-self: flex-start; display: flex; align-items: baseline; gap: .45em; margin: 0; padding: 3px 10px 4px; background: var(--gold); color: #1a1204; font-family: var(--font-gothic); font-weight: 900; line-height: 1.2; } .merit__badge span { font-size: clamp(.56rem, 1.4vw, .66rem); letter-spacing: .1em; } .merit__badge b { font-family: var(--font-num); font-size: clamp(.9rem, 2.2vw, 1.02rem); } .merit__title { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: clamp(14px, 2vw, 20px) clamp(12px, 1.8vw, 18px); border: 1px solid var(--gold); background: rgba(20, 14, 4, .8); font-family: var(--font-num); font-weight: 900; font-size: clamp(1.3rem, 3.6vw, 1.72rem); letter-spacing: .08em; line-height: 1.3; color: #fff; } .merit__icon { flex: none; width: clamp(34px, 4.4vw, 46px); height: auto; color: var(--gold); } .merit__body { margin: clamp(14px, 1.8vw, 18px) 0 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 2; color: #fff; } .merit__body--gold { color: var(--gold); } .merit__tail { color: #fff; } .vperk__prov { display: inline-block; margin: clamp(14px, 2vw, 18px) 0 0; padding: 3px 10px; background: rgba(232, 180, 74, .16); font-size: .7rem; letter-spacing: .16em; color: var(--gold); } .vsec--perks { position: relative; background: #0a1018; } /* ========================================================================== VIP マスターv3 対応（2026-08-12）：比較表の追加列・金の点表記・来場手段の2択 ========================================================================== */ /* 主観指標の5段階。星や絵文字は使わず、金と白の点の対比だけで示す */ .dots { letter-spacing: .16em; font-size: .84rem; color: var(--gold); white-space: nowrap; } /* 比較表：追加した「区画数」「含まれるもの」「花火の迫力」 */ .vcmp__units { display: block; margin-top: .45em; font-family: var(--font-mincho); font-size: .7rem; letter-spacing: .1em; color: var(--washi-dim); } /* 3区画とも同一の内容なので rowspan で1セルに畳む＝「共通である」ことを表の構造で言う */ .vcmp__inc { font-family: var(--font-mincho); font-size: .78rem !important; line-height: 1.9; color: var(--washi-dim) !important; max-width: 15em; vertical-align: middle; border-left: 1px solid rgba(242,237,227,.16); } .vcmp__inc-note { display: block; margin-bottom: .7em; font-size: .72rem; letter-spacing: .12em; color: var(--gold); } .vcmp__inc-li { display: block; } .vcmp__inc-li + .vcmp__inc-li { margin-top: .35em; } .vcmp__src { display: block; margin-top: .4em; font-weight: 400; font-size: .62rem; letter-spacing: .06em; color: var(--washi-dim); } .vcmp__pow { white-space: nowrap; } .vcmp__note b { color: var(--washi); font-weight: 700; } /* 来場手段の2択。価格・定員が同じで申込先だけ違うので、 2つの商品ではなく1つの区画の2つの入口として並べる */ .vapply__price { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.2; color: #fff; } .vapply__per { display: block; margin-top: .6em; font-family: var(--font-mincho); font-weight: 400; font-size: .82rem; letter-spacing: .06em; color: var(--washi-dim); } .vapply__lead { margin: clamp(14px, 2vw, 20px) 0 clamp(20px, 2.8vw, 28px); font-family: var(--font-mincho); font-size: clamp(.9rem, 2.4vw, 1rem); line-height: 2.05; color: var(--washi); } .vapply__lead b { color: #fff; } .vchoice { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 20px); } @media (min-width: 680px) { .vchoice { grid-template-columns: 1fr 1fr; } } .vchoice__item { border: 1px solid rgba(242, 237, 227, .26); padding: clamp(16px, 2.4vw, 22px); display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 16px); } .vchoice__item .vbtn { margin-top: auto; } .vchoice__name { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.02rem, 2.8vw, 1.18rem); letter-spacing: .08em; color: #fff; } .vchoice__detail { display: block; margin-top: .55em; font-family: var(--font-mincho); font-weight: 400; font-size: .78rem; letter-spacing: .04em; color: var(--washi-dim); } .vchoice__price { margin: .9em 0 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.24rem, 3.4vw, 1.5rem); color: #fff; } .vchoice__per { display: block; margin-top: .35em; font-family: var(--font-mincho); font-weight: 400; font-size: .76rem; letter-spacing: .06em; color: var(--washi-dim); } /* 送迎費（区画料金と別の財布）。価格の直下に置き、**行頭の「別途」で切り分ける**。 区画価格より小さく金で、内訳ではなく「もう1つの支払い」だと分かるようにする。 合計額は出さない（送迎費はバス会社へ直接＝足した額は実在しない）。 ⚠️ .vchoice__* はCSS内に同じ定義が2組ある（6927- と 7145-）。後ろが勝つので ここは **後ろの組**（1回だけ）に足す。両方に足すと二重管理になる。 */ /* 区画名の頭に付く丸数字。会場全体図・区画図と同じ番号なので、図と申込欄を 突き合わせられる。**色はそのエリアの色**（--pc）にする（2026-08-21 白濱の指摘）。 金だと3エリアとも同じ色で、地図・表の色分けと結びつかず目に入ってこなかった。 FAST #ff5a8c ／ LOUNGE #ffbe3c ／ PANORAMA #5aa0ff（地図と同じ値）。 */ .vchoice__no { margin-right: .4em; color: inherit; /* 番号は隣のエリア名（白）と同色に */ font-family: var(--font-num); font-weight: 700; font-size: 1.15em; vertical-align: -.04em; } /* 表の行頭に置く番号。行の見出しは細字なので、番号だけ色と太さで立てる。 */ .vcmp__rowno { margin-right: .45em; color: var(--pc, var(--gold)); font-family: var(--font-num); font-weight: 700; font-size: 1.15em; } /* 比較表の見出しに添える番号。エリア名の上に小さく置き、名前より前に出さない。 VIPは区画単位の番号が2つ並ぶ（乗用車＋バス）ので、字間を詰めておく。 */ .vcmp__no { display: inline; margin: 0 .12em 0 0; font-family: var(--font-num); font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; color: var(--pc, var(--washi-dim)); vertical-align: baseline; } /* 金色の「◯◯の詳細」ボタン内の番号は、ボタン文字と同じ濃色・同サイズに（淡色だと金地で読めない）。 */ .vcmp__go .vcmp__no { color: #1a1204; font-size: 1em; margin-right: .2em; } .vchoice__extra { margin: .85em 0 0; padding-top: .8em; border-top: 1px solid rgba(232, 180, 74, .28); font-family: var(--font-gothic); font-weight: 700; font-size: .78rem; letter-spacing: .06em; line-height: 1.7; color: var(--gold); } .vchoice__eg { display: block; margin-top: .35em; font-family: var(--font-num); font-weight: 400; font-size: .82rem; letter-spacing: .02em; color: var(--washi); } .vchoice__note { margin: .9em 0 clamp(18px, 2.4vw, 24px); font-size: .78rem; line-height: 1.9; color: var(--washi-dim); flex: 1; } .vchoice__item .vbtn { width: 100%; } /* ========================================================================== VIP 特徴・特典を企画書P3/P4の版面に合わせる（2026-08-12 改訂） ・背景の花火は「固定」。動くのは上に載る写真とテキストだけ。 背景を節の高さまで引き伸ばすと元画像(1568x908)が2〜3倍に拡大されて荒れるため、 画面サイズに固定して等倍付近で使う。 ・見出しは金の明朝文字＋金のヘアライン枠（企画書P4の「POINT」ブロックの型）。 採番だけは使わない（丸数字・算用数字とも禁止のため）。 ========================================================================== */ .vsec--feats { position: relative; overflow: hidden; background: #0a1018; } /* clip-path で内側の position:fixed をこの節に閉じ込める＝背景だけが固定される。 background-attachment:fixed は iOS で効かないため使わない。 */ .vsec__bg { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; } .vsec__bg img { position: fixed; /* LINE等のアプリ内ブラウザでバーが開閉するとビューポート高が変わる。 --vhlock は凍結値なので伸びず、そのままだと下端に隙間が出てガタつく。 上下に80pxずつ余らせて、バーの高さ変化を吸収する。 */ top: -80px; left: 0; width: 100%; height: calc(var(--vhlock) + 160px); object-fit: cover; object-position: center 42%; } .vsec__scrim { position: absolute; inset: 0; z-index: 0; background: rgba(6, 10, 17, .84); pointer-events: none; } .vsec--feats > *:not(.vsec__bg):not(.vsec__scrim) { position: relative; z-index: 1; } /* ---- 優先販売特典（企画書の「優先販売特典」ページの型）---- 金枠のパネル → 金の見出し＋白の説明 → MERIT 1〜3 の3列。 各列は 金地のMERITバッジ／暗地＋金枠の見出し箱（金の線画＋見出し）／白の本文。 */ .merits { width: min(100%, var(--vmax)); margin: 0 auto; border: 1px solid var(--gold); background: rgba(6, 10, 17, .74); padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3vw, 40px) clamp(30px, 4vw, 48px); } .merits + .merits { margin-top: clamp(20px, 2.6vw, 30px); } .merits__head { display: flex; align-items: center; gap: .6em; margin: 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.34rem, 3.8vw, 2rem); letter-spacing: .06em; line-height: 1.45; color: var(--gold); -webkit-text-stroke: .016em var(--gold); } .merits__lead { margin: clamp(16px, 2.2vw, 22px) 0 0; font-family: var(--font-mincho); font-size: clamp(.92rem, 2.3vw, 1rem); line-height: 2.05; color: #fff; } .merits__note { margin: 1em 0 0; font-size: .8rem; line-height: 1.9; color: #fff; } .merit__inline-icon { flex: none; width: clamp(24px, 3vw, 30px); height: auto; color: var(--gold); } .merits__list { list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 34px); } @media (min-width: 860px) { .merits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .merit { display: flex; flex-direction: column; } /* 金地に濃色の札。見出し箱の左上に載せる */ .merit__badge { align-self: flex-start; display: flex; align-items: baseline; gap: .45em; margin: 0; padding: 3px 10px 4px; background: var(--gold); color: #1a1204; font-family: var(--font-gothic); font-weight: 900; line-height: 1.2; } .merit__badge span { font-size: clamp(.56rem, 1.4vw, .66rem); letter-spacing: .1em; } .merit__badge b { font-family: var(--font-num); font-size: clamp(.9rem, 2.2vw, 1.02rem); } .merit__title { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: clamp(14px, 2vw, 20px) clamp(12px, 1.8vw, 18px); border: 1px solid var(--gold); background: rgba(20, 14, 4, .8); font-family: var(--font-num); font-weight: 900; font-size: clamp(1.3rem, 3.6vw, 1.72rem); letter-spacing: .08em; line-height: 1.3; color: #fff; } .merit__icon { flex: none; width: clamp(34px, 4.4vw, 46px); height: auto; color: var(--gold); } .merit__body { margin: clamp(14px, 1.8vw, 18px) 0 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 2; color: #fff; } .merit__body--gold { color: var(--gold); } .merit__tail { color: #fff; } .vperk__prov { display: inline-block; margin: clamp(14px, 2vw, 18px) 0 0; padding: 3px 10px; background: rgba(232, 180, 74, .16); font-size: .7rem; letter-spacing: .16em; color: var(--gold); } .vsec--perks { position: relative; background: #0a1018; } /* 比較表：級数が小さすぎたので一段上げる */ .vcmp__table thead th { font-size: clamp(.8rem, 2vw, .88rem); } .vcmp__table td { font-size: clamp(.94rem, 2.4vw, 1.06rem); } .vcmp__inc { font-size: clamp(.84rem, 2.1vw, .9rem) !important; width: 9.5em; } .vcmp__inc-note { font-size: .78rem; } .vcmp__yomi { font-size: .76rem; } .vcmp__units { font-size: .78rem; } .vcmp__link { font-size: .9rem; } .dots { font-size: 1rem; } .ptag { font-size: clamp(.8rem, 2.1vw, .9rem); } /* 比較表：金額の幅と「約」 */ .vcmp__approx { font-family: var(--font-mincho); font-size: .5em; letter-spacing: .06em; margin-right: .25em; vertical-align: .28em; color: var(--washi-dim); } /* マップ：押せることを常時わかるようにする（ホバーの無い端末が前提） ・区画の中央に「詳細を見る」の札を必ず出す ・カーソルは pointer、フォーカス時は札と枠が明るくなる 矢印・絵文字は使わない（design.md §5） */ .vsec--map .amap__area, .vsec--map .amap-sec a { cursor: pointer; } .amap__cta text { font-family: var(--font-mincho); font-weight: 700; } .amap__cta rect, .amap__cta text { transition: opacity .25s ease; } .vsec--map .amap-sec a:hover .amap__fill, .vsec--map .amap-sec a:focus-visible .amap__fill { fill-opacity: 1.6; } .vsec--map .amap-sec a:focus-visible .amap__core { stroke-width: 4; } .vsec--map .amap-sec a:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .amap__cta rect, .amap__cta text { transition: none; } } /* ========================================================================== 3区画のちがい（選ぶための節）／比較表の作り直し（2026-08-12） ========================================================================== */ .vsec--areas { background: var(--ink-2); } .areas { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); display: grid; gap: clamp(18px, 2.4vw, 26px); } @media (min-width: 880px) { .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .area { display: flex; flex-direction: column; border: 1px solid var(--gold); background: rgba(6, 10, 17, .74); padding: clamp(20px, 2.6vw, 28px); } /* 区画ごとの識別色は会場マップと同じ値。上端に太めの線で置く */ .area { border-top-width: 4px; } .area--fast { border-top-color: #ff5a8c; } .area--lounge { border-top-color: #ffbe3c; } .area--panorama { border-top-color: #5aa0ff; } .area__pos { margin: 0; font-family: var(--font-mincho); font-size: .8rem; letter-spacing: .18em; color: #fff; } .area__name { margin: .8em 0 0; } .area__catch { margin: clamp(14px, 1.8vw, 18px) 0 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.12rem, 3vw, 1.34rem); letter-spacing: .04em; line-height: 1.5; color: var(--gold); } .area__desc { margin: clamp(10px, 1.4vw, 14px) 0 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 2; color: #fff; } .area__facts { margin: clamp(16px, 2vw, 20px) 0 0; display: grid; gap: .6em; } .area__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; } .area__facts dt { font-family: var(--font-mincho); font-size: .8rem; letter-spacing: .1em; color: #fff; } .area__facts dd { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.14rem); color: #fff; } .area__approx { font-family: var(--font-mincho); font-size: .58em; letter-spacing: .06em; margin-right: .2em; vertical-align: .26em; color: #fff; } .area__exit { margin: clamp(14px, 1.8vw, 18px) 0 clamp(18px, 2.2vw, 24px); padding: .7em .9em; background: rgba(232, 180, 74, .12); font-family: var(--font-mincho); font-size: .84rem; line-height: 1.8; color: #fff; } .area .vbtn { margin-top: auto; width: 100%; } .areas__exit-note { width: min(100%, var(--vmax)); margin: clamp(20px, 2.6vw, 28px) auto 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.2vw, .96rem); line-height: 2; color: #fff; } .areas__exit-note b { color: var(--gold); font-weight: 700; } /* 金のボタン（詳細を見る）。朱ベタは「申し込む」だけに残す */ .vbtn--gold { background: var(--gold); color: #1a1204; border: 0; } .vbtn--gold:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* 比較表：価格を乗用車／バスの2列に分け、含まれるもの・迫力の列は廃止 */ .vcmp__sub { display: block; margin-top: .45em; font-family: var(--font-mincho); font-size: .76rem; font-weight: 400; letter-spacing: .06em; color: #fff; } .vcmp__table td { color: #fff; } .vcmp__table thead th { color: #fff; } .vcmp__yomi, .vcmp__units { color: #fff; } .vcmp__approx { color: #fff; } .vcmp__go .vbtn--gold { min-height: 48px; padding: 12px 20px; } /* ========================================================================== 比較表を「プランが列」の横並びに一本化（2026-08-12） 3区画のちがいのカードと価格表が同じことを2度言っていたため統合した。 ========================================================================== */ .vcmp { width: min(100%, var(--vmax)); margin: 0 auto; border: 1px solid var(--gold); overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 器に入りきらない幅では横スクロールになる。気づけるよう右端に合図を出す */ .vcmp__hint { display: none; } @media (max-width: 833px) { .vcmp__hint { display: block; width: min(100%, var(--vmax)); margin: 0 auto .7em; font-family: var(--font-mincho); font-size: .8rem; letter-spacing: .08em; color: #fff; } } .vcmp__table { width: 100%; border-collapse: collapse; } .vcmp__caption, .vcmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .vcmp__table th, .vcmp__table td { padding: clamp(12px, 1.6vw, 18px) clamp(9px, 1.05vw, 14px); text-align: left; vertical-align: top; color: #fff; border-bottom: 1px solid rgba(242, 237, 227, .16); } .vcmp__table tbody tr:last-child th, .vcmp__table tbody tr:last-child td { border-bottom: 0; } /* 見出し列（項目名）。横スクロールしても残す */ .vcmp__table tbody th { position: sticky; left: 0; /* 項目名の列は内容ぶんだけ。残りを3プランで等分し、比較する側を広く取る */ width: 1%; background: var(--surface-2); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.8rem, 1.9vw, .88rem); letter-spacing: .08em; white-space: nowrap; } .vcmp__table thead th { background: var(--surface-2); vertical-align: bottom; } .vcmp__table thead th:first-child { position: sticky; left: 0; z-index: 1; } .vcmp__plan { width: 27%; border-bottom: 3px solid transparent; white-space: nowrap; } /* 比較表ヘッダーは「番号＋英字＋よみ」を1行・改行なしで並べる（白濱の指示 2026-08-30）。 ピンク/黄/青のチップ線と色付き下線は撤去し、色は文字（.vcmp__no/.vcmp__en/.vcmp__yomi2）へ移した。 */ .vcmp__pos { display: block; margin-top: .6em; font-family: var(--font-mincho); font-weight: 400; font-size: .78rem; letter-spacing: .12em; color: #fff; } .vcmp__sub { display: block; margin-top: .4em; font-family: var(--font-mincho); font-weight: 400; font-size: .72rem; letter-spacing: .04em; color: #fff; } .vcmp__table td { font-family: var(--font-num); font-size: clamp(.94rem, 2.2vw, 1.06rem); } .vcmp__catch { font-family: var(--font-num) !important; font-weight: 900; font-size: clamp(1rem, 2.4vw, 1.16rem) !important; line-height: 1.5; color: var(--gold) !important; } .vcmp__for { font-family: var(--font-mincho) !important; font-size: clamp(.84rem, 2vw, .9rem) !important; line-height: 1.9; } .vcmp__exit { font-family: var(--font-mincho) !important; font-size: clamp(.84rem, 2vw, .9rem) !important; line-height: 1.9; } .vcmp__per { font-size: clamp(1.24rem, 3.2vw, 1.6rem) !important; font-weight: 700; white-space: nowrap; } .vcmp__approx { font-family: var(--font-mincho); font-size: .5em; letter-spacing: .06em; margin-right: .25em; vertical-align: .28em; color: #fff; } .vcmp__go .vbtn--gold { width: 100%; min-height: 48px; padding: 12px 14px; font-size: clamp(.8rem, 1.9vw, .88rem); } /* 地図の **上** に置く導入。下側用の余白ではなく、下に空ける。 2枚の地図（押せない全体図／押せる選択用）で説明が入れ替わらないよう、 それぞれの地図の直前に置くために使う。 */ /* 上下を非対称にする。上（＝前の地図）から離し、下（＝説明する地図）に近づける。 等間隔だと、直前の地図のキャプションに読める（2枚の地図が並ぶ /plans/vvip/ で実測）。 */ .vcmp__note--lead { margin: clamp(38px, 4.8vw, 62px) auto clamp(14px, 1.8vw, 20px) !important; } /* 見出しの直後に来るときは、見出しの下余白があるので上は空けない */ .vsec__head + .vcmp__note--lead { margin-top: 0 !important; } /* 導入の直後に地図が来るときは、地図側が持っている「見出しとの間の余白」を外す。 外さないと .amap-sec の padding-top（48px）＋ .amap-scroll の margin-top（32px）が そのまま乗り、導入文と地図が100px近く離れて別物に見える（実測）。 */ .vcmp__note--lead + .zoom-wrap { margin-top: 0; } .vcmp__note--lead + .amap-sec { padding-top: 0; } .vcmp__note--lead + .amap-sec .amap-scroll, .vcmp__note--lead + .zoom-wrap .amap-scroll { margin-top: 0; } .vcmp__note { width: min(100%, var(--vmax)); margin: clamp(14px, 1.8vw, 20px) auto 0; font-family: var(--font-mincho); font-size: clamp(.86rem, 2.1vw, .94rem); line-height: 2; color: #fff; } .vcmp__note b { color: var(--gold); font-weight: 700; } .ptag { font-size: clamp(.8rem, 2.1vw, .9rem); } /* マップ：札をやめ、ピンと明滅する枠で「押せる」を伝える */ .amap__pin { pointer-events: none; } .vsec--map .amap__glow { animation: amapPulse 2.4s ease-in-out infinite; } .vsec--map .amap__area--lounge .amap__glow { animation-delay: .35s; } .vsec--map .amap__area--panorama .amap__glow { animation-delay: .7s; } @keyframes amapPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vsec--map .amap__glow { animation: none; opacity: .8; } } /* ---- 比較表の詰め（中央寄せ／幅の詰まり対策） ---- */ /* 一言で済むもの（区画数・価格・1人あたり）は上下中央。文章は左上のまま */ .vcmp__mid { vertical-align: middle !important; } .vcmp__catch { vertical-align: middle !important; } /* 中間幅（タブレット）で列が潰れて折り返しが崩れるのを防ぐ。 min-width を下回ったら器の中で横スクロールさせる。 */ .vcmp__table { min-width: 620px; } .vcmp__table td, .vcmp__table thead th { min-width: 7.2em; } .vcmp__table tbody th { min-width: 0; } /* ---- 個別ページ：基本情報＝VIPの表と同じ組み＋区画図 ---- */ .pfacts { width: min(100%, var(--vmax)); margin: 0 auto; display: grid; gap: clamp(20px, 2.6vw, 32px); align-items: start; } /* 基本情報の右に現地の様子を並べる（2026-08-26）。独立した節を1つ減らして、 表と写真を1画面で見比べられるようにする。狭い画面は縦積み。 */ @media (min-width: 860px) { .pfacts--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .pfacts__fig figcaption b { display: block; margin-bottom: .35em; font-weight: 700; letter-spacing: .12em; color: #1c1611; } .pfacts__side > .pfacts__fig + .pfacts__fig { margin-top: clamp(14px, 1.8vw, 20px); } @media (min-width: 900px) { .pfacts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } .pfacts__table { border: 1px solid var(--gold); overflow-x: auto; } .pfacts__t { min-width: 0; table-layout: fixed; width: 100%; } .pfacts__t td, .pfacts__t th { min-width: 0; } /* 席種名の長い項目（例「⑦ プラチナピクニックボックス（駐車場なし）」）を改行禁止にすると 項目列が1行分まで広がって値列が潰れる。列幅を固定し、項目は2〜3行で折り返す。 */ .pfacts__t tbody th { width: 36%; white-space: normal; overflow-wrap: anywhere; } .pfacts__fig { margin: 0; border: 1px solid var(--gold); background: #f6f3ec; padding: clamp(14px, 2vw, 22px); } .pfacts__fig img { display: block; width: 100%; height: auto; } .pfacts__fig figcaption { margin-top: .9em; font-family: var(--font-mincho); font-size: .8rem; line-height: 1.8; color: #3a3128; } /* ---- 含まれるもの：4カラムのビジュアル ---- */ .incs { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 860px) { .incs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .inc { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--gold); background: rgba(6, 10, 17, .74); padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 18px); } .inc__icon { display: block; color: var(--gold); } .inc__icon svg { width: clamp(34px, 4.4vw, 44px); height: auto; display: block; } .inc__name { margin: clamp(12px, 1.6vw, 16px) 0 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(.96rem, 2.3vw, 1.1rem); letter-spacing: .04em; line-height: 1.4; color: var(--gold); } .inc__note { margin: .7em 0 0; font-family: var(--font-mincho); font-size: clamp(.78rem, 1.9vw, .84rem); line-height: 1.85; color: #fff; } /* ========================================================================== 限定ページの招待状の様式（2026-08-12） ========================================================================== */ /* ---- 入口の印。ラベル・説明・下線なし。見た目は小さく、当たりは44px四方以上 ---- */ /* ---- VVIP：地色は墨紺よりさらに深い準黒紺。真っ黒にはしない ---- */ :root { --ink-vv: #060911; --ink-vv-2: #0b1120; } .vv-body { background: var(--ink-vv); } /* 解錠直後の一拍。三行の組みは下の .vvcurtain__* で決める（ここで span をまとめて 指定すると個別指定より詳細度が高くなり、中央のVVIPまで小文字と同じ大きさになる） */ .vvcurtain { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: clamp(26px, 4vw, 46px); background: var(--ink-vv); animation: vvCurtain 3.6s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; } @keyframes vvCurtain { 0%, 74% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } html.is-locked .vvcurtain { display: none; } @media (prefers-reduced-motion: reduce) { .vvcurtain { display: none; } } /* ---- ヒーロー ---- */ /* 日付・会場を第一面に置く（招待状として機能させる） */ /* ---- 節 ---- */ /* ---- 特徴：章をめくる縦組み ---- */ /* 含まれるもの */ /* ---- 特典 ---- */ .vvmerits { background: none; border: 0; padding: 0; } .vvmerits .merits__head, .vvmerits .merits__lead { max-width: 46em; margin-left: auto; margin-right: auto; } /* ---- 比較表 ---- */ /* 表計算の格子に見えないよう、区切りは横罫だけにする */ .vbtn--line { background: transparent; border: 1px solid var(--gold); color: var(--gold); } /* ---- 区画図 ---- */ /* ---- 申込 ---- */ /* ---- VVIP 監査2巡目の反映（2026-08-12） ---- */ /* ヘッダーの朱ボタンは招待状の面に合わない。この頁だけ出さない */ .vv-body .site-header__cta { display: none; } /* ボタンは1系統に統一。飽和した黄ベタではなく、静かな金の枠 */ /* 特徴・特典：右3分の1が空くのをやめ、2列で読ませる */ @media (min-width: 900px) { } /* ========================================================================== ぴあ側の販売前（piaSalesStatus = "pre_sale"）の見え方（2026-08-12） カードBはボタンを朱の帯に置き換え、カード全体のリンク挙動を止める。 ========================================================================== */ /* ボタンの位置に置き換える朱の帯。角丸・影・グラデは使わない */ .gcard__band { margin: 0; padding: clamp(13px, 1.8vw, 17px) clamp(14px, 2vw, 20px); background: var(--vermilion-deep); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.82rem, 2.2vw, .92rem); letter-spacing: .06em; line-height: 1.7; color: #fff; text-align: center; } /* 販売前のカードはホバー反応もカーソル変化もさせない */ .gcard--soon, .gcard--soon * { cursor: default; } .gcard--soon .gcard__shot img { transform: none !important; } /* 序列表の注記（リンクの代わり） */ .rank__soon { display: block; margin-top: .5em; font-family: var(--font-mincho); font-weight: 400; font-size: .78rem; letter-spacing: .04em; line-height: 1.7; color: var(--washi); } /* ========================================================================== フッターのイラストに置く「VV」＝ご案内を受けた方への入口（2026-08-12） 左の花火が密集するあたりに重ねる。LINEで「VVを押してください」と伝える前提。 ========================================================================== */ .site-footer__sky { position: relative; } .vvsky { position: absolute; left: 15%; top: 46%; display: grid; place-items: center; width: 48px; height: 48px; font-family: var(--font-num); font-weight: 900; font-size: .82rem; letter-spacing: .1em; text-indent: .1em; /* 知っている人だけが見つけられる濃さ。近づくと少しだけ明るくなる */ color: rgba(232, 180, 74, .34); text-decoration: none; transition: color .3s ease; } .vvsky:hover, .vvsky:focus-visible { color: rgba(232, 180, 74, .85); } .vvsky:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } @media (max-width: 759px) { .vvsky { left: 13%; top: 42%; font-size: .74rem; } } @media (prefers-reduced-motion: reduce) { .vvsky { transition: none; } } /* マップ下の一覧に並べる VV */ /* 一覧の他のボタンが持つ枠を継がせない。VVは印であってボタンではない。 */ .amap-list__btn--vv { border: 0 !important; background: none; box-shadow: none !important; color: rgba(232, 180, 74, .42) !important; letter-spacing: .1em; } .amap-list__btn--vv:hover, .amap-list__btn--vv:focus-visible { border: 0 !important; color: rgba(232, 180, 74, .9) !important; } .amap-list__btn--vv:focus-visible { outline: 1px solid rgba(232, 180, 74, .6); outline-offset: 2px; } /* ========================================================================== VVIP：特徴（記事＋画像の6項目）と解錠演出（2026-08-12） VIPの .pnt と同じ骨格。地色・枠・余白だけをVVIP規格（黒金）にする。 ========================================================================== */ @media (min-width: 760px) { } /* 解錠直後の演出（2案。data/site.json の vvip.curtain で切替） 三行はまとめて --vv-shift だけ動かす。この値は main.js が 「幕が上がった先のヒーロー見出しの中心」から実測して入れる。 JSが動かなければ 0 のまま＝画面中央に出る（従来どおり）。 */ .vvcurtain__top, .vvcurtain__mark, .vvcurtain__bottom { transform: translateY(var(--vv-shift, 0px)); } .vvcurtain__top, .vvcurtain__bottom { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(.66rem, 1.9vw, .8rem); letter-spacing: .46em; text-indent: .46em; color: rgba(232, 180, 74, .72); animation: vvSide 3.6s ease forwards; } .vvcurtain__bottom { animation-delay: .1s; } @keyframes vvSide { 0%,7% { opacity: 0; } 20%,74% { opacity: 1; } 100% { opacity: 0; } } /* 中央に VVIP だけを浮かび上がらせ、そのまま本編へ渡す。 ヒーローの見出しと同じ位置・同じ組みなので、消えたあとも視線が動かない。 */ .vvcurtain__mark { font-family: var(--font-num); font-weight: 900; font-size: clamp(2.6rem, 9vw, 5.4rem); letter-spacing: .22em; text-indent: .22em; line-height: 1.1; color: var(--gold); animation: vvMark 3.6s cubic-bezier(.3, 0, .2, 1) forwards; } @keyframes vvMark { 0% { opacity: 0; filter: blur(14px); text-shadow: none; } 24% { opacity: 1; filter: blur(0); text-shadow: 0 0 26px rgba(232,180,74,.75), 0 0 70px rgba(232,180,74,.35); } 74% { opacity: 1; filter: blur(0); text-shadow: 0 0 26px rgba(232,180,74,.75), 0 0 70px rgba(232,180,74,.35); } 100% { opacity: 1; filter: blur(0); text-shadow: none; } } /* ---- VVIP 監査（1巡）の反映：写真・図版を黒金の地に馴染ませる ---- */ /* 図版が純白のまま紺の上に直に乗り、ページで最も明るい面になっていた。 暗い台紙の中に置き、原色の注記を少し落ち着かせる。 */ /* POINTの写真は昼・夜が混ざって明度が2段違っていた。1組として読めるところまで落とす。 */ /* カードが純黒、ページ地が紺で三層に見えていた。カードの地を持たせず枠だけにする。 */ /* ========================================================================== 横スクロールする器の合図（2026-08-13・全ページ共通の作法に統一） 文章で「横にスクロールできます」と書くのをやめ、器の右端に うっすらとした影と山形の印を出す。1度でも動かしたら消える。 ※ design.md §5 の「矢印禁止」はスクロールを促す下向き矢印の話。 ここは操作の可否を示す最小の記号として、山形1つだけを使う。 ========================================================================== */ [data-hscroll] { position: relative; } [data-hscroll]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(38px, 8vw, 56px); pointer-events: none; opacity: 0; transition: opacity .35s ease; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2.5 2.5 L9.5 10 L2.5 17.5' fill='none' stroke='%23e8b44a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 18px, linear-gradient(90deg, rgba(6, 10, 17, 0), rgba(6, 10, 17, .78)); } [data-hscroll].is-scrollable::after { opacity: 1; } [data-hscroll].is-scrolled::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { [data-hscroll]::after { transition: none; } } /* 紙面の上（アクセス等の白い表）では影の色を紙に合わせる */ .page-sub .table-scroll[data-hscroll]::after, .pfacts__table[data-hscroll]::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2.5 2.5 L9.5 10 L2.5 17.5' fill='none' stroke='%23e8b44a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 18px, linear-gradient(90deg, rgba(6, 10, 17, 0), rgba(6, 10, 17, .6)); } /* ヒーローの背景写真をやめたVIPページ用の面。花火を敷かず、 深い墨紺に金の細い横罫だけで格を出す（高級感は情報量の少なさで作る）。 */ .vhero--plain { background: var(--ink-deep); } .vhero--plain .vhero__scrim { background: linear-gradient(180deg, rgba(232,180,74,.05), transparent 42%), var(--ink-deep); } .vhero__label { margin: 0 0 clamp(14px, 1.8vw, 20px); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.8rem, 2.1vw, .9rem); letter-spacing: .28em; color: var(--gold); } /* ヘッダーはページ名を中央に大きく。約束の一行はその下に添える。 */ .vhero--plain { align-items: center; text-align: center; } .vhero--plain .vhero__inner { padding-bottom: clamp(28px, 4vw, 52px); } .vhero--plain .vhero__crumbs { justify-content: center; display: flex; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 34px); } .vhero--plain .vhero__title { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .16em; text-indent: .16em; line-height: 1.3; } .vhero__catch { margin: clamp(20px, 2.6vw, 30px) 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.7vw, 1.24rem); letter-spacing: .08em; line-height: 2; color: #fff; } .vhero--plain::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, var(--vmax)); height: 1px; background: rgba(232,180,74,.42); } @media (max-width: 640px) { .vhero__br { display: none; } } /* 比較表の見出し：会場マップのラベルと同じ書体に揃える */ .vcmp__en { display: inline; font-family: Georgia, "Times New Roman", var(--font-mincho), serif; font-weight: 700; font-size: clamp(1.06rem, 2.8vw, 1.28rem); letter-spacing: .1em; color: var(--gold); } .vcmp__yomi2 { display: inline; margin: 0 0 0 .6em; font-family: var(--font-mincho); font-weight: 400; font-size: .78rem; letter-spacing: .12em; color: #fff; } .vcmp__sub b { color: #fff; font-weight: 700; } /* 販売前のカードBは帯がボタンの位置に入るので、下端まで押し下げてカードAと足並みを揃える */ .gcard__band { margin-top: auto; } .gcard__desc { margin-bottom: clamp(14px, 2vw, 20px); } /* 航空写真の位置図はページの黒金にそのまま馴染むので、台紙も補正も持たせない。 白い詳細図（CAD）だけは従来どおり暗い台紙に載せ、彩度を落として置く。 */ /* ========================================================================== 2026-08-13 の調整 ========================================================================== */ /* スマホでカードが密着していたのを少し離す */ @media (max-width: 759px) { .gcards__grid { gap: 14px; } } /* PCで2枚の「写真と文章の境目」を揃える。見出しの行数が違っても写真の開始位置が合う */ /* 2枚のカードの「見出し／写真／本文／ボタン」の各段を、カードをまたいで揃える。 見出しの行数が違っても写真の上端が一致する。min-height では幅によって 揃わない箇所が出た（実測 1440で9px、900で45pxのズレ）ため subgrid にした。 */ @media (min-width: 760px) { .gcards__grid { grid-template-rows: auto auto auto auto; align-items: stretch; } .gcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; } /* 中身は **上揃え**。下揃えにすると、題字が2行の左カードだけ札が押し上げられ、 2枚の札と題字の1行目が 45px ずれる（1440/1366/900/800/760で実測）。 写真・本文・ボタンの段は上の subgrid が揃えるので、下揃えにする理由はもう無い。 余る高さは題字の下＝ベタ塗りの中に落ちるので目に見えない。 */ .gcard__head { display: flex; flex-direction: column; justify-content: flex-start; } } /* subgrid が使えない場合の保険 */ @supports not (grid-template-rows: subgrid) { @media (min-width: 760px) { .gcard__head { min-height: clamp(150px, 15vw, 210px); } } } /* お知らせの見出しを他の節（アクセス／よくあるご質問）と同じ様式に。朱の印は外す */ .hnews__seal { display: none; } .hnews__head.sec-head__title { display: block; width: min(100%, 940px); margin: 0 auto clamp(14px, 1.8vw, 20px); font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.35rem, 3.4vw, 1.9rem); letter-spacing: .14em; color: #fff; text-align: center; } /* 後援：「／」の前後を開け、（調整中）は直前の名称に寄せる */ .site-footer__org-sep { padding: 0 .5em; } .site-footer__org-note { margin-left: .1em; } /* 名前の前に置く注記（例:（調整中）高石商工会議所）。左の余白は要らない */ .site-footer__org-note--pre { margin-left: 0; margin-right: .1em; } /* VIP比較表：見出しを会場マップの区画色に */ .vcmp__en { color: var(--pc, var(--gold)) !important; } .vcmp__yomi2 { color: var(--pc, #fff) !important; opacity: .85; } /* 表の文字は読みやすさ優先で真っ白に（--washi の生成り白をやめる） */ .vcmp__table, .vcmp__table th, .vcmp__table td, .vcmp__sub, .vcmp__units, .vcmp__approx, .vcmp__note, .vcmp__exit, .vcmp__for { color: #fff; } .vcmp__sub b { color: #fff; } /* VVIPのヒーローの一行を大きく */ /* VVIP固有の節は最上段。ブラックカードの手触りに寄せて、二重の金罫で囲う */ /* VIPと同じ6項目の図面は切り抜かず全体を見せる */ /* VVIPページのマップ一覧では「VV」を出さない（すでにそのページにいるため） */ /* 紺地に白の明朝は細いと縁が青みがかって見える（アンチエイリアス）。 実測では純白 RGB(255,255,255) だが、太さを一段上げて読みやすくする。 */ .vcmp__table td, .vcmp__for, .vcmp__exit, .vcmp__sub, .vcmp__note { font-weight: 500; } /* 冒頭のVVIP固有ブロック：1項目を2カラム（左＝文／右＝数字） */ /* マップ下の一覧に、地図と同じ区画色を入れて対応が分かるようにする */ .amap-list__btn { border-color: color-mix(in srgb, var(--acol, rgba(242,237,227,.24)) 55%, transparent); } /* ---- 個別ページ下部の選択肢（3区画） ---- */ .vsibs { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); display: grid; gap: clamp(14px, 1.8vw, 20px); } @media (min-width: 860px) { .vsibs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vsib { display: flex; flex-direction: column; border: 1px solid rgba(242, 237, 227, .26); border-top-width: 4px; background: rgba(6, 10, 17, .55); padding: 0; } .vsib--fast { border-top-color: #ff5a8c; } .vsib--lounge { border-top-color: #ffbe3c; } .vsib--panorama { border-top-color: #5aa0ff; } .vsib__link { display: flex; flex-direction: column; height: 100%; padding: clamp(18px, 2.4vw, 26px); text-decoration: none; } .vsib--current { padding: clamp(18px, 2.4vw, 26px); } /* いま見ているページだけ沈める */ .vsib--current { background: rgba(0, 0, 0, .62); border-color: rgba(242, 237, 227, .12); } .vsib--current .vsib__name, .vsib--current .vsib__catch, .vsib--current .vsib__desc, .vsib--current .vsib__meta { opacity: .34; } .vsib__name { margin: 0; } .vsib__catch { margin: clamp(12px, 1.6vw, 16px) 0 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.5; color: var(--gold); } .vsib__desc { margin: .8em 0 0; font-family: var(--font-mincho); font-weight: 500; font-size: clamp(.82rem, 2vw, .88rem); line-height: 1.95; color: #fff; } .vsib__meta { margin: .9em 0 clamp(16px, 2vw, 20px); font-family: var(--font-num); font-size: .84rem; color: #fff; } .vsib__approx { font-family: var(--font-mincho); font-size: .74em; margin-right: .15em; } .vsib__go { display: block; margin-top: auto; padding: 11px 12px; background: var(--gold); color: #1a1204; font-family: var(--font-mincho); font-weight: 700; font-size: .84rem; letter-spacing: .1em; text-align: center; } .vsib__now { margin: auto 0 0; padding: 11px 12px; border: 1px dashed rgba(242, 237, 227, .3); font-family: var(--font-mincho); font-size: .8rem; letter-spacing: .1em; text-align: center; color: rgba(255, 255, 255, .64); } /* ぴあの3エリア。VIPの兄弟導線と同じ部品を使うが、VIPは区画色の上罫で見分ける のに対し、ぴあは会場全体図と同じ丸数字が見分けの手がかりなので、番号を名前の 頭に置く（色は増やさない）。3枚を横に並べる列指定だけ足す。 */ @media (min-width: 760px) { .vsibs--pia { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vsibs--pia .vsib__name { font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.02rem, 2.6vw, 1.14rem); letter-spacing: .06em; line-height: 1.5; color: #fff; } .vsib__no { margin-right: .3em; font-family: var(--font-num); font-weight: 700; letter-spacing: -.02em; } .vsibs--pia .vsib__catch { font-size: clamp(1.14rem, 3vw, 1.3rem); } .vsib__tax { margin-left: .5em; font-family: var(--font-mincho); font-weight: 400; font-size: .58em; letter-spacing: .1em; color: var(--washi-dim); } .vsibs--pia .vsib__desc { color: var(--washi); } .vsibs--pia .vsib__meta { color: var(--washi-dim); } /* 席種ごとの購入ボタン＋その下の一行。applyrow は本来ボタンだけを並べる。 */ .applyrow--buy > li { display: flex; flex-direction: column; } /* ボタンだけだと、この位置で価格が見えない（価格は上の表にしかなかった）。 番号・席種名・価格をボタンの真上に置いて、押す前に確かめられるようにする。 */ .applyrow--buy .applyrow__seat { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0 0 .7em; padding-bottom: .6em; border-bottom: 1px solid rgba(242, 237, 227, .14); } .applyrow--buy .offer__micro { margin-top: .7em; } .vsib__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* 冒頭の2カラム：左＝小見出しと一行、右＝本文 */ /* ========================================================================== 育てる花火（トップのフッター限定・2026-08-13） すべて [data-grow] の下に閉じてあるので、他ページのフッターには一切効かない。 色は design.md のトークン内（金・和紙・菊の青白）。朱は使わない。 ========================================================================== */ [data-grow] { cursor: pointer; touch-action: manipulation; } .gw { pointer-events: none; } /* 堤防の人影。少しだけ揺れる（呼吸くらい） */ .gw__p path, .gw__p circle { fill: #020509; } .gw__p { animation: gwSway 5.2s ease-in-out var(--d, 0s) infinite; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes gwSway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } } /* 屋台。灯りだけ明滅する */ .gw__s rect { fill: #060b14; } .gw__slamp { fill: var(--gold); animation: gwLamp 3.4s ease-in-out infinite; } @keyframes gwLamp { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* タップで上がる花火。既定の花火と同じ組み立て */ .gw__f--gold line, .gw__f--gold circle { stroke: var(--gold); fill: var(--gold); } .gw__f--kiku line, .gw__f--kiku circle { stroke: var(--kiku); fill: var(--kiku); } .gw__f--washi line, .gw__f--washi circle { stroke: var(--washi); fill: var(--washi); } .gw__f line { stroke-width: 1.15; stroke-linecap: round; } .gw__rise { fill: var(--gold); opacity: 0; animation: gwRise .52s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes gwRise { 0% { opacity: .9; transform: scaleY(0); } 70% { opacity: .9; } 100% { opacity: 0; transform: scaleY(1); } } .gw__rise { transform-box: fill-box; transform-origin: 50% 100%; } .gw__burst { opacity: 0; transform: scale(.12); transform-box: fill-box; transform-origin: 50% 50%; animation: gwBurst 4.4s cubic-bezier(.12, .75, .3, 1) .5s forwards; } /* 連打で空が埋まるよう、開いたあとの「残り」を長く取る。 開ききるまでは今までどおりの速さで、そこから先をゆっくり落とす。 */ @keyframes gwBurst { 0% { opacity: 0; transform: scale(.12); } 7% { opacity: 1; transform: scale(.86); } 20% { opacity: .95; transform: scale(1); } 58% { opacity: .72; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.08); } } /* 段階が上がると自動の花火も密になる */ [data-grow][data-stage="2"] .sk__fw { animation-duration: 4.9s; } [data-grow][data-stage="3"] .sk__fw { animation-duration: 4.2s; } [data-grow][data-stage="4"] .sk__fw, [data-grow][data-stage="5"] .sk__fw { animation-duration: 3.4s; } /* フィナーレ以降：工場の灯りを全点灯、空をわずかに明るく */ [data-grow][data-stage="4"] .sk__lamp, [data-grow][data-stage="5"] .sk__lamp { opacity: 1; animation: none; } [data-grow][data-stage="4"] .sk__beacon, [data-grow][data-stage="5"] .sk__beacon { opacity: 1; } [data-grow][data-stage="4"] .skyline__svg, [data-grow][data-stage="5"] .skyline__svg { background: #101a2e; } /* 特別演出中の静止 */ [data-grow][data-hold] .sk__fw, [data-grow][data-hold] .sk__lamp, [data-grow][data-hold] .sk__beacon, [data-grow][data-hold] .sk__wave, [data-grow][data-hold] .sk__refl rect, [data-grow][data-hold] .gw__p, [data-grow][data-hold] .gw__slamp { animation-play-state: paused; } /* 100発目の一文。グラデ・発光・縁取りは使わず、透過のフェードだけ */ .gw__word { font-family: var(--font-kaisei), var(--font-mincho), serif; font-weight: 800; font-size: 44px; letter-spacing: .18em; fill: var(--gold); opacity: 0; animation: gwWordIn 1.5s ease forwards; } .gw__word--out { animation: gwWordOut 1.6s ease forwards; } @keyframes gwWordIn { to { opacity: 1; } } @keyframes gwWordOut { from { opacity: 1; } to { opacity: 0; } } /* 動きを減らす設定：花火は上げない。人影と屋台は静止したまま増える */ @media (prefers-reduced-motion: reduce) { .gw__p, .gw__slamp, .gw__burst, .gw__rise, .gw__word { animation: none !important; } .gw__burst { opacity: 1; transform: scale(1); } .gw__word { opacity: 1; } } /* ========================================================================== VVIPページ 整流（2026-08-13） ヒーロー確定コピー／特徴の通し番号撤去／特典を「打ち上げの岸へ」の文法へ／ VVIP＋VIPの合体比較表／マップ下ボタンの金・朱 ※ここはファイル末尾。同名セレクタの取りこぼしで古い指定に負けないよう最後に置く ========================================================================== */ /* ---- ヒーロー：確定コピーの2行組み（純白・明朝・装飾なし） ---- */ /* ---- 特徴：番号の箱を外し、見出しの級数と余白で項目を分ける ---- */ /* ---- 特典：「打ち上げの岸へ」と同じ静かな縦積み ---- */ /* ---- マップ下の一覧：合体表と同じ格（VVIP＝金の枠／VIP＝朱のベタ面） ---- */ /* ---- 申込：価格の暫定注記 ---- */ /* 合体表は列＝項目ではなく行＝エリア。列見出し表の器（幅・1列目の面）を引き継ぐと 1列目だけ別の板に見えるので、このページの幅と地色に合わせ直す。 1列目の固定自体は残す（狭い画面で横に送ってもエリア名が消えない） */ /* 1列目の固定は残すが、地色は「表の背後にある面」と同じにする。 var(--ink-vv)（ページの地）だと節の地 var(--ink) と食い違い、 1列目と見出し行だけ別の板に見えていた（実測 #060911 と #121b2c）。 */ /* ========================================================================== VVIP 監査（2026-08-13 2巡目）の反映 基準＝「打ち上げの岸へ」（金の枠／静かな縦積み／本文は純白／金は見出しと強調だけ） ※マップの区画色・比較表のエリア名の色・VVIP金/VIP朱のボタンは指示どおりの意匠のため残す ========================================================================== */ /* 1) 地色が3種類あった（節=#121b2c ／ 打ち上げの岸へ=#04070d ／ ページ=#060911）。 節の境目に横一直線の段差が出ていたので、ページの地 --ink-vv に統一する。 解錠の幕も同じ --ink-vv なので、幕が上がったあとの地続きにもなる。 */ /* 2) マップのラベルと一覧ボタンだけ Georgia で、同じ「FIRE」が節をまたいで別書体だった */ /* 3) 特典の本文が一文まるごと金だった（「譲渡可能」は右カラム全文）。 /* 4) 「全区画に含まれるもの」だけブラウザ既定の黒丸が出ていた（他のリストは全て none） */ /* ========================================================================== 育てる花火：動きを減らす設定の端末での見え方（2026-08-13） 以前は prefers-reduced-motion で花火も一文も出さず、iOSの「視差効果を減らす」が ONの端末（LINEのアプリ内ブラウザ含む）ではタップしても何も起きなかった。 出すものは同じにして、動き（立ち上る筋・開く拡大・揺れ・明滅）だけを止める。 ========================================================================== */ [data-grow][data-reduced] .gw__rise { display: none; } /* 立ち上る筋は動きそのもの */ [data-grow][data-reduced] .gw__burst { opacity: 1; transform: none; animation: gwHold 5s linear forwards; /* 開いた形のまま置いて消す */ } @keyframes gwHold { 0%, 62% { opacity: 1; } 100% { opacity: 0; } } [data-grow][data-reduced] .gw__p { animation: none; } /* 人影の揺れを止める */ [data-grow][data-reduced] .gw__slamp { animation: none; opacity: 1; } [data-grow][data-reduced] .gw__word { animation: none; opacity: 1; } /* ========================================================================== VVIP 比較表を「列＝エリア」に戻す（2026-08-13） VIPページの表と同じ型。VVIP 3列が先に見え、右へ送るとVIP 3列が続く。 カード縦積みへの変形はやめ、スマホも同じ横スワイプ1本に統一する。 ========================================================================== */ /* 列幅は固定。table-layout:fixed は表の幅が auto だと効かない（幅の計算が auto レイアウトに落ちる）ため、列幅の合計を明示する。 1440: 118 + 3×250 = 868 ≤ 器1018 → VVIP 3列が入り、4列目が見切れて続きが分かる。 ※列数(6)を式に持たせている。エリアを増減したらここも直す。 */ /* VVIPとVIPの境目に一本だけ金の縦線を入れて、章の変わり目を示す */ /* マップ・ボタンと対応させる色票 */ /* ---- VVIPだけの特典（見出しが主・本文1行が従。2×2） ---- */ 同じ強さ＋高い詳細度で上書きする（2×2にするのはこの節だけ） */ @media (min-width: 720px) { } @media (min-width: 720px) { /* 2×2。上段2枚の間に横罫が入らないようにする */ } /* ---- エリアの選び方（3行だけ） ---- */ /* ---- マップ下ボタン：VVIP＝濃い朱で3つ同色／VIP＝マップの区画色 ---- 文字色は地色ごとにコントラスト実測で選ぶ（黄・青・桃は黒、朱は白）。 実測: #C43A26/白 5.28 ／ #ff5a8c/黒 6.47 ／ #ffbe3c/黒 11.57 ／ #5aa0ff/黒 7.22 */ /* ========================================================================== VVIPページ（2026-08-13 全面共用化） セクションの見た目は /plans/vip/ の部品（.vsec / .pnts / .merits / .vcmp / .vsibs / .vhero）をそのまま使う。ここに書くのは以下だけ: 1) body.vv-body での地色の差し替え 2) 比較表の全セル罫（VVIP・VIP 両ページに同じ値で入れる＝タスク7-2） 3) マップ下リンクのブラケット型グループ表記（.amap-grps / .amap-grp / .amap-grp__label ＝新規3クラス。個々のリンクに VVIP/VIP と書かずに 群を示すための最小の器） ========================================================================== */ /* 1) 地色だけ一段落とす。部品の形・余白・書体には触れない */ .vv-body { background: var(--ink-vv); } .vv-body .vip-main > section { background-color: var(--ink-vv); } .vv-body .vsec--feats .vsec__bg { opacity: .5; } /* 2) 比較表の全セル罫。両ページで完全に同じ値（色・太さ）を使う */ .vcmp__table th, .vcmp__table td { border-right: 1px solid rgba(232, 180, 74, .28); border-bottom: 1px solid rgba(232, 180, 74, .28); } .vcmp__table tr > *:last-child { border-right: 0; } .vcmp__table tbody tr:last-child > * { border-bottom: 0; } .vcmp__table thead th { border-bottom-color: rgba(232, 180, 74, .5); } /* 列見出しの色票。マップの区画色・下のリンクの色と揃える印 */ /* 3) マップ下リンクのグループ表記 */ .amap-grps { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(18px, 2.4vw, 28px); } @media (min-width: 900px) { .amap-grps { grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 44px); } } .amap-grp .amap-list { margin-top: 0; } .amap-grp__label { position: relative; margin: 0; padding-top: 11px; border-top: 1px solid rgba(232, 180, 74, .5); text-align: center; } .amap-grp__label span { font-family: var(--font-mincho); font-weight: 700; font-size: .68rem; letter-spacing: .34em; text-indent: .34em; color: rgba(232, 180, 74, .9); } /* マップ下リンクの文字色は、マップの区画線の色（--acol）と同じにする。 これで「地図の色 → リンクの色 → 表の列見出しの色票」が一本で追える。 地 #060911 に対する実測: #ff3c32 5.63 ／ #ff7a3c 7.68 ／ #ff5a8c 6.72 ／ #ffbe3c 12.02 ／ #5aa0ff 7.50（すべて4.5:1以上）。 ※この行は VIP・VVIP 両ページの .vsec--map に等しく効く（部品を分けない）。 */ .vsec--map .amap-list__btn { color: var(--acol, #fff) !important; } .vsec--map .amap-list__btn:hover, .vsec--map .amap-list__btn:focus-visible { background: color-mix(in srgb, var(--acol) 14%, transparent); } /* ========================================================================== 入口の印（.vvmark）。ヘッダー右上で使っているため vv で始まっても消さない。 ========================================================================== */ .vvmark { margin: 0; padding: clamp(46px, 6vw, 78px) 0 clamp(30px, 4vw, 46px); text-align: center; background: var(--ink); } .vvmark__hit { display: inline-grid; place-items: center; width: 48px; height: 48px; color: rgba(232, 180, 74, .5); text-decoration: none; transition: color .35s ease; } .vvmark__hit:hover, .vvmark__hit:focus-visible { color: rgba(232, 180, 74, .92); } .vvmark__hit:focus-visible { outline: 1px solid rgba(232, 180, 74, .6); outline-offset: 2px; } .vvmark__ico { width: 20px; height: 20px; display: block; } .vvmark__kanji { font-family: var(--font-kaisei); font-weight: 800; font-size: 1.05rem; line-height: 1; } .vvmark__sign { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mincho); font-weight: 700; font-size: .8rem; letter-spacing: .1em; } .vvmark__sign i { display: block; width: 14px; height: 1px; background: currentColor; } @media (prefers-reduced-motion: reduce) { .vvmark__hit { transition: none; } } /* ========================================================================== 特典カードの箱の高さを揃える（2026-08-13） .merit は flex の縦積みなので、見出し箱の高さが文字数で変わり、 隣どうしで下端がずれていた（実測: 1行の箱 68px ／ 2行の箱 116px）。 グリッドの行を親から継いで（subgrid）、見出し箱と本文の高さを列間で揃える。 VIP・VVIP どちらの .merits__list にも同じ規則で効く（部品を分けない）。 ========================================================================== */ /* subgrid で行を共有させると、本文が1段のカードと2段のカードで グリッドの行数が合わず、2段目が1段目に重なった（実測で確認）。 箱そのものに2行ぶんの下限を持たせて揃える方式にする。 ※列が並ぶ 860px 以上でだけ効かせる（1列のときは揃える相手がいない） */ @media (min-width: 860px) { .merit__title { min-height: 4.2em; } } /* 4項目のときは3列だと最後の1つが取り残される。2×2に組む （クラスを増やさず、項目数そのもので判定する） */ @media (min-width: 860px) { .merits__list:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== VVIPのファーストビュー（2026-08-13） 解錠の幕で出した「VVIP」を置き去りにして、まわりのページだけが 入れ替わったように見せる。そのため h1 の組みは .vvcurtain__mark と 同じ値（書体・級数・字間・行送り・色）。位置は main.js が幕の方を 実測で重ねるので、ここでは触らない。 追加クラスは .vhero--vv と .vhero__eyebrow の2つだけ。 ========================================================================== */ .vhero--vv { height: clamp(520px, calc(var(--vhlock) * 0.94), 900px); align-items: center; text-align: center; background: var(--ink-vv); } /* 写真は沈める。金の字を主役にするため、地は招待状の黒に寄せる */ .vhero--vv .vhero__img { opacity: .34; object-position: center 38%; } .vhero--vv .vhero__scrim { background: radial-gradient(120% 78% at 50% 46%, rgba(232, 180, 74, .10), transparent 62%), linear-gradient(180deg, rgba(6, 9, 17, .72), rgba(6, 9, 17, .5) 42%, var(--ink-vv) 96%); } /* 二重の金罫で囲う＝招待状の体裁。角の装飾や影は足さない */ .vhero--vv::before, .vhero--vv::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(232, 180, 74, .42); } .vhero--vv::before { inset: clamp(14px, 2.2vw, 30px); } .vhero--vv::after { inset: clamp(20px, 3vw, 40px); border-color: rgba(232, 180, 74, .18); } .vhero--vv .vhero__inner { width: min(100%, var(--vvmax, 1020px)); padding-bottom: 0; } /* 絶対配置にすると .vhero__inner（中央寄せ）が基準になり、見出しに重なった。 流し込みのまま上に置き、間を大きく取る。 */ .vhero--vv .vhero__crumbs { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 clamp(30px, 4.4vw, 58px); color: rgba(255, 255, 255, .55); } .vhero--vv .vhero__crumbs a { border-bottom-color: rgba(255, 255, 255, .24); } /* 幕の上段と同じ組み。幕が上がったあとも同じ字がそこに残って見える */ .vhero__eyebrow { margin: 0 0 clamp(22px, 3vw, 34px); font-family: var(--font-mincho); font-weight: 500; font-size: clamp(.66rem, 1.9vw, .8rem); letter-spacing: .46em; text-indent: .46em; color: rgba(232, 180, 74, .72); } /* ここが幕の VVIP と同じ組み（.vvcurtain__mark と同値） */ .vhero--vv .vhero__title { font-family: var(--font-num); font-weight: 900; font-size: clamp(2.6rem, 9vw, 5.4rem); letter-spacing: .22em; text-indent: .22em; line-height: 1.1; color: var(--gold); } .vhero--vv .vhero__catch { margin: clamp(26px, 3.4vw, 40px) 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.02rem, 2.9vw, 1.4rem); letter-spacing: .1em; line-height: 1.9; color: #fff; } .vhero--vv .vhero__lead { margin: clamp(16px, 2.2vw, 24px) auto 0; max-width: 32em; font-family: var(--font-mincho); font-weight: 500; font-size: clamp(.86rem, 2.2vw, .96rem); line-height: 2.05; color: rgba(255, 255, 255, .88); } .vhero--vv .vhero__meta { margin: clamp(30px, 4vw, 46px) 0 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(.8rem, 2.1vw, .92rem); letter-spacing: .18em; color: rgba(232, 180, 74, .86); } .vhero--vv .vhero__meta span { font-family: var(--font-mincho); font-size: .8em; margin-left: .35em; } /* ========================================================================== 販売前の観覧席カード（2026-08-14） 「申し込みボタンができる」と分かるようボタンの形は出し、その上に チケットぴあの赤帯を斜めに掛けて押せないことを示す。 ボタンは （リンクではない）＋ pointer-events:none で二重に無効化。 追加クラス: .gcard__soonwrap / .gcard__btn--off / .gcard__band--sash ========================================================================== */ /* 器はカード幅いっぱい＋切り取りを自前で持つ（カード側は切ってくれず、 帯が隣のカードまで伸びていた）。器に上下の余白を持たせると top:50% が ボタン中心からずれるので、余白は左右とボタンの外側だけに置く。 */ .gcard__soonwrap { position: relative; margin: auto 0 clamp(22px, 2.8vw, 32px); /* 切るのは左右だけ。overflow:hidden だと器の高さ＝ボタンの高さなので、 斜めに掛けた帯の上下の角まで切り落とされてしまう。 inset() の上下を負にして縦方向は切らない。 */ clip-path: inset(-240px 0 -240px 0); /* clip-path は見た目を切るだけで、はみ出した分は文書幅に残る（実測で 768/390 に横スクロールが出た）。カード側で横方向だけ切って幅を止める。 */ pointer-events: none; } .gcard__soonwrap .gcard__btn--off { margin: 0 clamp(20px, 2.8vw, 34px); } /* ボタンの形はそのまま。押せないことは色の沈みで示す（形は変えない） */ .gcard__btn--off { /* 「ここにボタンができる」と分かる程度には出す。押せないことは帯が担う */ background: rgba(255, 255, 255, .82); color: rgba(29, 60, 92, .5) !important; } /* 赤帯を斜めに。カードより広く取って両端を切り、たすき掛けに見せる */ /* たすきは少し透かして、下のボタンの形が抜けて見えるようにする。 上下に金の細線を1本ずつ入れて「掛けてある帯」に見せる（面だけだと札に見える）。 白文字は下の面と合成後の色に対して 5.0:1 以上を実測で確保している。 */ .gcard__band--sash { position: absolute; left: -14%; right: -14%; top: 50%; transform: translateY(-50%) rotate(-5.5deg); transform-origin: center; /* 白文字とのコントラスト実測: 白ボタンの上 6.87:1 ／ カード地の上 8.99:1。 10%透かして下のボタンの形が抜けて見える程度に留める。 */ background: rgba(150, 32, 20, .9); border-top: 1px solid rgba(232, 180, 74, .55); border-bottom: 1px solid rgba(232, 180, 74, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); letter-spacing: .1em; } @media (prefers-reduced-motion: reduce) { .gcard__band--sash { transition: none; } } /* 3択カードで meta 行が無い場合、本文とボタンが密着していた。 本文が最後の段落になるときだけ下に余白を置く（meta があるときは従来どおり）。 */ .vsib__catch:last-of-type { margin-bottom: clamp(16px, 2.2vw, 24px); } /* 斜めの帯が文書幅を押し広げないよう、カードで横だけ切る（縦は切らない）。 overflow-x:clip はスクロール器を作らないので、中の位置指定に影響しない。 */ .gcard { overflow-x: clip; } /* ========================================================================== 新規ページ（BBQ・実行委員会・顧問）— 2026-08-17 器と部品はVIP個別ページのものをそのまま使っている。ここに足すのは 既存クラスでは表せない2つだけ: .inc__icon--photo … 顧問の顔写真を .inc__icon の枠に収める（線画アイコン用の 枠を写真用に転用するため。写真が無い間は「準備中」を中央に） .vapply__row … 申込節の器にボタンを1本だけ置くときの行（既存の .vchoice は価格つきの2択用で、ここでは重すぎる） ========================================================================== */ .inc__icon--photo { display: grid; place-items: center; width: clamp(96px, 22vw, 140px); height: clamp(96px, 22vw, 140px); margin: 0 auto; background: var(--ink-deep); border: 1px solid rgba(232, 180, 74, .3); overflow: hidden; } .inc__icon--photo img { width: 100%; height: 100%; object-fit: cover; } .inc__icon--photo .rank__soon { margin: 0; color: rgba(242, 237, 227, .6); } .vapply__row { margin: clamp(20px, 2.6vw, 28px) 0 0; } .vapply__row .vbtn { width: min(100%, 420px); } /* ---- ご案内を受けた方への入口（ヘッダー版）2026-08-17 ---- VIPページ最下部からヘッダー（ハンバーガーの隣）へ移設した。 見えるのは「VV」の2文字だけ。タップ領域は44px四方を透明で確保する。 既存の .vvmark / .vvmark__hit を使い、頭に置くための修飾だけ足す。 */ /* 元の .vvmark はページ最下部に置く前提で、上下に大きな padding と地色を 持っている（そのままだと header 内に黒い帯が出て、VVも下にずれる）。 頭に置く版では、その2つを打ち消す。 */ .vvmark--head { margin: 0; padding: 0; background: none; display: flex; align-items: center; align-self: center; } .vvmark--head .vvmark__hit { width: 44px; height: 44px; color: rgba(232, 180, 74, .62); } .vvmark--head .vvmark__hit:hover, .vvmark--head .vvmark__hit:focus-visible { color: rgba(232, 180, 74, .95); } .vvmark__vv { font-family: var(--font-num); font-weight: 900; font-size: .82rem; letter-spacing: .08em; line-height: 1; } /* VVはハンバーガー（SP）／ナビ（PC）の「隣」に置く。 .site-header__side は縦積みだったため、そのままだと下に回り込んでいた。 中身は実質2つ（PCはナビ＋VV、SPはVV＋ハンバーガー。他方は display:none）なので、 横並びに変えても段は増えない。 */ .site-header__side { flex-direction: row; align-items: center; } /* TOPのヘッダーは側を絶対配置し align-items:flex-end で右端に寄せている。 横並びにしたことで、その flex-end が「下端揃え」ではなく効いてVVが浮いた。 TOPでも中央で揃える。 */ .hero-final-page .site-header__side { align-items: center; } /* ---- 貸切BBQ区画カードのホバー（2026-08-17）---- 既存のホバー仕様に合わせる: translateY(-2px) の浮きと 0.2s。 影・グロー・グラデは使わない。矢印は持っていないので、 ボタンの面をわずかに起こして「押せる」ことだけを伝える。 観覧席カード（販売前）は .gcard--soon で無効のまま。 */ .gcard--kashikiri { transition: transform 0.2s ease; } @media (hover: hover) { .gcard--kashikiri:hover { transform: translateY(-2px); } .gcard--kashikiri:hover .gcard__btn { transform: translateY(-1px); } } .gcard--kashikiri .gcard__btn { transition: transform 0.2s ease, background-color 0.2s ease; } .gcard--kashikiri:focus-within { transform: translateY(-2px); } /* 販売前のカードは動かさない（押せないため） */ .gcard--soon, .gcard--soon:hover { transform: none !important; } @media (prefers-reduced-motion: reduce) { .gcard--kashikiri, .gcard--kashikiri .gcard__btn { transition: none; } .gcard--kashikiri:hover, .gcard--kashikiri:focus-within { transform: none; } } /* ---- タップの初動を待たせない（2026-08-17）---- iOS Safari（LINEのアプリ内ブラウザ含む）は touch-action 未指定のリンクで 「ダブルタップかどうか」を最大300ms待ってから click を発火する。 その間にもう一度触ると1回目が捨てられ、「1回目が効かず2回目で反応する」 症状になる。manipulation を指定するとダブルタップズームを諦めて即発火する。 ピンチズームは残るので、拡大できなくなる副作用はない。 */ a, button, [role="button"], .gcard, .vbtn, .amap-list__btn, .site-header__cta, .site-menu__cta { touch-action: manipulation; } /* タッチ端末ではホバーの浮きを起こさない。:hover が1回目のタップで発火する 端末があり、その分だけ要素が動いて指が外れることがある。 */ @media (hover: none), (pointer: coarse) { .gcard--kashikiri:hover, .gcard--kashikiri:focus-within { transform: none; } .gcard--kashikiri:hover .gcard__btn { transform: none; } } /* ---- フッターのSNSアイコン（2026-08-17）---- 墨紺の地に和紙色の線画だったため、どのSNSか判別できなかった。 各社の公式配色をそのまま使う（色の改変・加工はしない）: LINE … 公式グリーン #06C755 の地に白のグリフ（アプリアイコンと同じ配色） X … 暗い背景では白、が公式指定。白地に黒のグリフ（公式ロゴの黒） Instagram … 公式グラデーションの地に白のグリフ タップ領域は44px四方を維持（既存の .site-footer__snslink のまま）。 */ .site-footer__snslink[data-sns] { border: 0; border-radius: 8px; color: #fff; } .site-footer__snslink[data-sns="line"] { background: #06C755; } .site-footer__snslink[data-sns="x"] { background: #FFFFFF; color: #000000; } .site-footer__snslink[data-sns="instagram"] { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); } .site-footer__snslink[data-sns]:hover, .site-footer__snslink[data-sns]:focus-visible { filter: brightness(1.08); } /* 特徴の箇条書き（4層構成の4層目）。既存の .vinc__list の組みを流用する */ .pnt__desc.vinc__list { margin-top: .9em; padding-left: 1.2em; } .pnt__desc.vinc__list li { font-size: clamp(.86rem, 2.2vw, .94rem); line-height: 1.95; } /* ---- 箇条書きの小見出し（2026-08-17 4層化）---- 「見出し→コピー→説明文→箇条書き」の4層で、説明文と箇条書きの境目を示すためだけの見出し。 様式は .pnt__lead（明朝・太）を流用して1段小さくする。新しい装飾は足さない。 色は金にして、白の本文（.pnt__desc）とラベルであることを区別する。 */ .pnt__listhead { margin: clamp(15px, 1.9vw, 21px) 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.92rem, 2.3vw, 1.02rem); line-height: 1.75; letter-spacing: .03em; color: var(--gold); } /* 小見出しが付くときは、直後の箇条書きの上の空きを詰める（見出しと束に見せる） */ .pnt__listhead + .pnt__desc.vinc__list { margin-top: .5em; } /* ---- 写真枠の高さを6項目でそろえる（2026-08-17 4層化）---- 4層にして本文量が項目ごとに違うため、放っておくと行の高さ＝写真の高さが 378〜481pxまでばらけた（写真は object-fit:cover で行の高さに追従するため）。 grid の行を 1fr にすると、高さ未指定のグリッドでは全行が最も高い行にそろう。 :has(.pnt__media) で写真つきの節だけに効かせる ＝写真を持たない「優先枠引き継ぎ制度」（同じ .pnts）には影響させない。 2カラムになる760px以上だけが対象。それ未満は写真が本文の下に積まれる別の組み。 */ @media (min-width: 760px) { .pnts:has(.pnt__media) { grid-auto-rows: 1fr; } .pnts:has(.pnt__media) > .pnt > .pnt__row { height: 100%; } } /* ---- スマホの詰め（2026-08-17 4層化）---- 層が1つ増えて1項目が縦に伸びたため、行間・級数は変えずに層の間の余白だけ詰める。 文章は削らない（design.md の「余白を惜しまない」を壊さない範囲の微調整）。 */ @media (max-width: 759px) { .pnt__lead { margin-top: 13px; } p.pnt__desc { margin-top: .7em; } .pnt__listhead { margin-top: 12px; } .pnt__listhead + .pnt__desc.vinc__list { margin-top: .4em; } .pnt__note { margin-top: .7em; } .pnt__text { padding: 18px 20px 20px; } } /* 箇条書き内の拡大表示リンク（出演者一覧）。button を文字リンクの見た目に戻すだけ。 色は下の .vinc__list a と同じ指定を共用する。 */ .pnt__lblink { padding: 0; border: 0; background: none; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .pnt__lblink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ========================================================================== 地図の拡大・縮小（2026-08-17） 横スライドをやめ、その場でズームして見る。器は既存の .amap-scroll のまま、 中身を .zoom__inner でくるんで transform を掛ける。 追加クラス: .zoom / .zoom__ui / .zoom__btn / .zoom__level / .zoom__inner .vmark / .vmark__i（会場全体マップのエリア札） ========================================================================== */ /* 2026-08-18: ズームUIは器（.zoom＝はみ出しを切る枠）の外側に出す。 中に置くと、器がスクロールした時にUIも一緒に流れて画面外へ出てしまう。 */ .zoom-wrap { position: relative; } .zoom { position: relative; overflow: hidden; } .zoom .zoom__inner { transform-origin: 50% 50%; will-change: transform; } .zoom[data-zoomed="1"] .zoom__inner { cursor: grab; } .zoom[data-zoomed="1"]:active .zoom__inner { cursor: grabbing; } .zoom__ui { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; background: rgba(6, 9, 17, .78); border: 1px solid rgba(232, 180, 74, .4); } .zoom__btn { min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; border: 1px solid rgba(242, 237, 227, .3); color: var(--washi); font-family: var(--font-mincho); font-size: .84rem; line-height: 1; cursor: pointer; } .zoom__btn--reset { font-size: .74rem; } .zoom__btn:hover, .zoom__btn:focus-visible { border-color: var(--gold); color: var(--gold); } .zoom__level { min-width: 3.4em; text-align: center; font-family: var(--font-num); font-size: .78rem; color: var(--washi); } @media (max-width: 560px) { .zoom__ui { right: 6px; top: 6px; gap: 4px; padding: 4px 6px; } .zoom__btn { min-width: 44px; padding: 0 6px; } .zoom__level { min-width: 3em; font-size: .72rem; } } /* 「二本指で動かせます」の一度きりの案内。指で操作する端末で、地図が画面に 入った最初の一度だけ出て、1.2秒かけて消える。JSが data-on を付け外しする。 */ .zoom__hint { position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%); padding: 7px 14px; background: rgba(6, 9, 17, .82); border: 1px solid rgba(232, 180, 74, .5); font-family: var(--font-mincho); font-size: .78rem; line-height: 1; letter-spacing: .04em; color: var(--gold); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s ease, visibility 0s linear 1.2s; } .zoom__hint[data-on] { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .zoom__hint { transition-duration: .01ms, 0s; } } /* 会場全体マップのエリア札。位置は data/venue-areas.json の実測% */ /* .vmark / .vmark__i / .vmark__i--fire（会場全体マップに重ねていた札）は 2026-08-17 にマークアップごと撤去した。下敷き画像に同じ文字が焼き込まれており 二重掲載だったため。復活させる場合は git 履歴から戻す。 */ /* ========================================================================== BBQページ（/plans/vip/bbq/）2026-08-18 新規はこの2つの組みだけ: ① .bset … この案件で唯一の白背景。「お品書きの札」の位置づけで、 純白＋金のヘアライン＋直角。緑・クリーム・ベージュは使わない。 墨紺基調のページに白い札が1枚置かれている見え方にする。 ② .bflow … 当日の流れ。番号は「STEP 1」表記（丸数字は使わない）。 左の金の縦線で6段を1本につなぐ。 持ち込み・大切なご案内・FAQ・CTAは既存クラス（.vfacts / .merits__list / .faq__* / .vbtn）をそのまま使っている。 ========================================================================== */ /* BBQセット（2026-08-18に作り直し）。 旧版は「白カード＋金の枠＋中央に自作コンロ線画」だった。やめた理由は3つ。 ①線画が製図でしかなく、炭も火も湯気もない＝BBQの魅力を何も語らない ②紺地に金枠の白カードは、この案件固有の理由が言えない装飾（＝量産の型） ③カードの中にさらに白帯が入る入れ子になっていた 代わりに「網の上に何が乗るか」の実写を大きく置く。これは装飾ではなく、 手ぶらで来てよいことの証拠。写真を左に寄せ、品目は右に組んで軸をずらす。 */ .bset { width: min(100%, var(--vmax)); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 44px); align-items: start; } /* 写真を先に、大きく。文字と1:1に割らず、写真側を広く取って非対称にする */ @media (min-width: 760px) { .bset { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .bset__fig { margin: 0; position: relative; } .bset__fig img { display: block; width: 100%; height: auto; } /* 生成した挿絵なので、実物と取り違えられないよう必ず断る。 絵の中に焼き込まず、絵の外の小さな活字で置く（絵を汚さない） */ .bset__ref { margin-top: .7em; font-size: .74rem; letter-spacing: .08em; color: var(--washi-dim, rgba(242, 237, 227, .62)); } .bset__note { margin: clamp(14px, 1.8vw, 20px) 0 0; font-size: .78rem; line-height: 1.9; color: var(--washi-dim, rgba(242, 237, 227, .62)); } .bset__body { padding-top: clamp(2px, 1vw, 10px); } /* 品目の前に置く一行。見出しの繰り返しにならないよう、約束の言い切りにする */ .bset__cap { margin: 0 0 clamp(14px, 1.8vw, 20px); font-family: var(--font-mincho); font-size: clamp(1rem, 2.6vw, 1.16rem); line-height: 1.7; color: var(--gold); } .bset__list { list-style: none; margin: 0; padding: 0; } .bset__list li { padding-left: 0; font-size: clamp(.9rem, 2.3vw, 1rem); line-height: 2.05; color: var(--washi); } .bset__list li + li { margin-top: .5em; } /* 2026-08-18: 行頭の短い金罫を廃止。同じ意匠を1ページで6用途に使い回しており、 線が「意味を持つ印」ではなく「とりあえずの装飾」になっていた。 品目の列挙は字下げと行間だけで読める。金の線は ①STEP札の左帯 ②持ち込み可否の上罫 の2用途にだけ残す。 */ /* 2026-08-18: この節だけ見出しを左寄せにしていたのをやめた。1節だけ軸を ずらすと「揃え忘れ」に見える。単調さは写真・地色・列数の変化で断つ。 */ /* 持ち込みの2列（2026-08-18）。金枠の箱2つを並べる型をやめ、上罫1本で分けた。 「できること／できないこと」は対比が読めればよく、箱で囲う理由がない。 不可の側だけ罫を朱にして、記号（○×）を使わずに違いを示す。 */ .bpair { list-style: none; } .bpair__col { padding-top: clamp(14px, 1.8vw, 20px); border-top: 2px solid rgba(232, 180, 74, .55); background: none; border-right: 0; border-bottom: 0; border-left: 0; } .bpair__col--no { border-top-color: rgba(196, 58, 38, .75); } /* 大切なご案内（2026-08-18）。金枠の箱をやめ、朱の細い縦罫だけで立てる。 注意書きは面積で主張させず、位置と色で気づかせる。 */ .bnote { width: min(100%, 720px); margin: 0 auto; padding: clamp(4px, 1vw, 8px) 0 clamp(4px, 1vw, 8px) clamp(16px, 2.4vw, 26px); border-left: 2px solid var(--vermilion-deep); } /* 車でのご入場の締切（2026-08-21）。器は .bnote のまま、罫を金に替えるだけ。 金は会場・時刻まわりで既に使っている色で、「読み落とすと困る」の合図になる。 朱（.bnote 既定）は BBQの火の注意で使っているので、意味を分けるために変える。 新しい形（箱・影・角丸）は作らない。 */ .bnote--gold { border-left-color: var(--gold); } /* 表の「開場」の行に出す締切の一言。詳しい理由は下の .bnote--gold が受けるので、 ここは時刻だけを金で置く（読む順が 開場 → 締切 → 理由 になる）。 */ .vcmp__sub--alert { color: var(--gold); font-weight: 700; } .bnote__mark { margin: 0; font-family: var(--font-gothic); font-weight: 700; font-size: clamp(.9rem, 2.3vw, 1rem); letter-spacing: .06em; line-height: 1.7; color: var(--gold); } .bnote__body { margin: .55em 0 0; font-size: clamp(.84rem, 2.1vw, .9rem); line-height: 1.95; color: var(--washi); } /* 基本情報の表の下に置くので、表との間を空ける */ .pfacts + .bnote { margin-top: clamp(20px, 2.6vw, 30px); } /* BBQ開始までの流れ（2026-08-18に作り直し）。 紺地に金の縦線1本で6段をつなぐ形だったが、段の切れ目が読めず、 どこからどこまでが1ステップか分からなかった。**段ごとに札にして分ける。** 地色は紺ではなく **和紙（--paper 生成り）**。この案件はTOPのアクセス以降で すでに「夜（紺）→紙（生成り）→夜」の反転を使っており、紙は既存の語彙。 紺地に金枠の箱を足すのではなく、面そのものを替えるので量産の型にならない。 1列に積まず、広い画面では2列に組んで縦の間延びも殺す。 */ .bflow { list-style: none; width: min(100%, var(--vmax)); margin: 0 auto; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 18px); } /* 3列＝STEP1〜3／注記／STEP4〜6 でぴたりと2段に収まる。2列だと STEP3 と STEP6 の右が空いて不揃いな段が2つできる（注記が行を分けるため）。 */ @media (min-width: 660px) { .bflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .bflow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bflow__item { position: relative; background: #fff; padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px); /* 札の左に1本だけ古金の帯を通す。枠で四方を囲わない（囲うと箱の反復になる） */ border-left: 3px solid var(--paper-gold); } .bflow__num { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(.72rem, 1.8vw, .8rem); letter-spacing: .16em; color: var(--paper-gold); } /* 見出しはVIPページのポイント見出し（.pnt__title）と同じ字面にそろえる。 紙の上なので色だけ古金に替える（紺地用の --gold は白地で 2.1:1 しかない） */ /* VIPポイント見出しと同じ書体・太さ（Zen Old Mincho 900）。**色だけは同じに できない**——VIPは紺地に金で光るが、白地に金（#7d5a12）は沈んで目に入らなかった （2026-08-18実測 20.16px/古金）。白地では墨が最も強い。金は番号にだけ残す。 */ .bflow__t { margin: .28em 0 0; font-family: var(--font-num); font-weight: 900; font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: .03em; line-height: 1.4; color: var(--paper-ink); -webkit-text-stroke: .02em var(--paper-ink); } .bflow__d { margin: .55em 0 0; font-size: clamp(.86rem, 2.2vw, .93rem); line-height: 2.05; color: var(--paper-ink); } /* STEP3とSTEP4の間の一行。札ではないので紙地にせず、行間に置く注意書きとして扱う。 2列組みのときは行いっぱいに渡す。 */ .bflow__mid { margin: 0; padding: clamp(6px, 1.2vw, 10px) 0; text-align: center; font-size: clamp(.82rem, 2.1vw, .88rem); line-height: 1.95; color: var(--washi-dim); } @media (min-width: 660px) { .bflow__mid { grid-column: 1 / -1; } } /* 冒頭の位置づけ（2026-08-18）。「このBBQはどの区画の話か」を先に言う。 箱で囲わず、上下の細い罫だけで区切る。 */ .bwhere { width: min(100%, 820px); margin: 0 auto; } .bwhere__lead { margin: 0 0 clamp(16px, 2vw, 24px); font-family: var(--font-mincho); font-size: clamp(1.02rem, 2.8vw, 1.24rem); line-height: 1.8; color: var(--washi); } .bwhere__lead b { color: var(--gold); font-weight: 700; } .bwhere__list { list-style: none; margin: clamp(14px, 1.8vw, 20px) 0 0; padding: 0; } .bwhere__list li { padding-left: 0; font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 2.05; color: var(--washi); } .bwhere__note { margin: clamp(12px, 1.6vw, 18px) 0 0; font-size: .78rem; line-height: 1.9; color: var(--washi-dim); } /* 持ち込みの可否は「絵 → 見出し → 品目」の順で、左右2列に並べて対比させる。 絵に○×や禁止マークは足さない（記号を重ねると図が騒がしくなる）。 可否の別は、列の上に通した罫の色（金＝可／朱＝不可）と見出しの言葉が担う。 */ .bpair__fig { display: block; width: 100%; height: auto; margin: clamp(12px, 1.6vw, 18px) 0; } .bpair__ref { width: min(100%, var(--vmax)); margin: clamp(10px, 1.4vw, 14px) auto 0; font-size: .74rem; letter-spacing: .08em; color: var(--washi-dim); } /* 2つ並びのときは2列にする（既存の4つ＝2×2の規則と同じ考え方）。 監査指摘: 項目数の違う箱が同じ高さに引き伸ばされていたので、中身に合わせる */ @media (min-width: 860px) { .merits__list:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } /* 写真枠を持たない特徴（優先枠引き継ぎ制度など）は、文章を1カラムいっぱいに */ .pnt__row:not(:has(.pnt__media)) .pnt__text { grid-column: 1 / -1; max-width: none; } /* ========================================================================== 比較表のスワイプ誘導（2026-08-18）／VIP・VVIP共用 表の右端に「続きの気配」の縦帯を重ね、中央に「スライドできます」＋細い山括弧を置く。 帯は地色（墨紺 6,9,17）と同系のグラデーションのみ。金・白のグラデーションは使わない。 表の構造・セル・罫線には触れず、スクロール器の外側に absolute で重ねるだけ。 帯は pointer-events:none なので、指の操作は一切妨げない。 横スクロールが実際に起きている表だけ、ビューポートに入った時に main.js が is-on を付ける。 触れた（touchstart / scroll）時点で is-off にして 0.3s で消し、以後は出さない。 ※「スライドできます」は縦組みにしている。帯の幅が48〜64pxで、8文字を横組みでは 収められないため。縦組みなら帯に収まり、表の上に文字がかぶらない。 山括弧は縦組みの流れの「次」＝文字の下に置く。 ========================================================================== */ .tblhint { position: relative; } .tblhint__veil { position: absolute; top: 1px; right: 1px; bottom: 1px; width: clamp(48px, 14vw, 64px); pointer-events: none; display: grid; place-items: center end; padding-right: clamp(8px, 2.4vw, 14px); opacity: 0; transition: opacity .3s linear; /* 文字が載る位置（帯の中ほどから右）を十分に沈める。ここが薄いと表のセルが透けて読めない */ background: linear-gradient(to right, rgba(6, 9, 17, 0) 0%, rgba(6, 9, 17, .55) 18%, rgba(6, 9, 17, .94) 40%, rgba(6, 9, 17, 1) 56%, rgba(6, 9, 17, 1) 100%); } .tblhint.is-on .tblhint__veil { opacity: 1; } .tblhint.is-off .tblhint__veil { opacity: 0; } .tblhint__in { display: grid; justify-items: center; gap: .5em; animation: tblhint-breathe 2.4s ease-in-out infinite; } .tblhint__t { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-mincho); font-weight: 400; font-size: clamp(.62rem, 1.7vw, .72rem); letter-spacing: .18em; line-height: 1; color: var(--gold); } .tblhint__c { font-family: var(--font-mincho); font-weight: 400; font-size: clamp(.62rem, 1.7vw, .72rem); line-height: 1; color: var(--gold); } @keyframes tblhint-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .9; } } @media (prefers-reduced-motion: reduce) { .tblhint__in { animation: none; opacity: .8; } } /* 顧問・アドバイザー・相談役（2026-08-18に作り直し）。 区分ごとに段を分けて縦に3ブロック並べていたが、4名しかいないので間延びした。 1つの格子にまとめ、区分は各札の肩に小さく置く。広い画面でも2列のままにして 写真を大きく見せる（4人なら2列×2段でぴたりと収まる）。 */ .advs, .cmems { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 節の中身が「準備中」1語のときは、他の節と同じく中央に置く（左端に寄ると 本文が欠けたように見える） */ .rank__soon--c { text-align: center; } /* 「組織の概要」は表が1つだけ。左端に寄ると節だけ軸がずれるので他の節と同じく中央へ */ .vsec--facts .pfacts__table { width: min(100%, 720px); margin-inline: auto; } /* 実行委員会の問い合わせ節も中央へ。文が1行＋ボタン1つだけで、左寄せだと ページの最後で軸がずれて終わる（他の節はすべて中央） */ .vsec--committee-cta .vapply { text-align: center; } .vsec--committee-cta .vapply__row { display: flex; justify-content: center; } @media (min-width: 860px) { .advs, .cmems { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); } } /* 区分は肩書きではなく所属の格。小さく、金の細い罫の上に置く */ .inc__grp { margin: 0 0 .8em; font-family: var(--font-mincho); font-size: clamp(.72rem, 1.9vw, .8rem); letter-spacing: .16em; color: var(--gold); } /* 顔写真は縦3:4。既存の .inc__icon は正方形前提なので、写真のときだけ縦長にする */ .inc__icon--photo { aspect-ratio: 3 / 4; width: 100%; height: auto; overflow: hidden; } .inc__icon--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 追従バー .scta（2026-08-19。TOPのみ）— 細い1行の帯 経緯: 1版目＝紺地＋金文字／2版目＝クリーム地／3版目＝半券（ミシン目・切り欠き）。 3版目は「形に理由を持たせる」に寄りすぎて飾りの多い変わった帯になった。 4版目は **足さずに削る**。要素は文言・ボタン・閉じるの3つだけ。 ・地は青みを抜いた墨（#14161c）。紺＋金でもクリームでもない ・文言は白の明朝を大きく（PC 22px）。小さな符号や但し書きを添えない ・1行に収める。狭い画面は短い方の文言に差し替える（縮めて小さくしない） 高さは vh 由来を持たない（アプリ内ブラウザのバー開閉で動かない）。 ========================================================================== */ .scta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #14161c; border-top: 1px solid rgba(242, 237, 227, .16); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform .46s cubic-bezier(.22, .61, .27, 1), opacity .34s ease, visibility 0s linear .46s; } .scta[data-on] { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .46s cubic-bezier(.22, .61, .27, 1), opacity .34s ease .04s, visibility 0s; } @media (prefers-reduced-motion: reduce) { .scta { transition: opacity .01ms, visibility 0s; transform: none; } .scta[data-on] { transition: opacity .01ms, visibility 0s; } } .scta__inner { position: relative; width: min(92vw, 1000px); margin: 0 auto; min-height: 68px; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); padding: 10px 44px 10px 0; /* 右は×の逃げ */ } /* 文言＝この帯の主役。白の明朝で大きく、1行で置く */ .scta__main { margin: 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.36rem); letter-spacing: .04em; line-height: 1.4; color: #fff; white-space: nowrap; } .scta__sp { display: none; } .scta__btn { flex: 0 0 auto; white-space: nowrap; } /* 閉じる＝細い×2本。行の中に割り込ませず右端に逃がす */ .scta__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; } .scta__close::before, .scta__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 1px; background: rgba(242, 237, 227, .55); transition: background .2s ease; } .scta__close::before { transform: translate(-50%, -50%) rotate(45deg); } .scta__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .scta__close:hover::before, .scta__close:hover::after, .scta__close:focus-visible::before, .scta__close:focus-visible::after { background: #fff; } .scta__close:focus-visible { outline: 1px solid rgba(242,237,227,.7); outline-offset: -6px; } /* 狭い画面: 文言を短い方へ差し替える。字は小さくしない */ @media (max-width: 780px) { .scta__pc { display: none; } .scta__sp { display: inline; } } @media (max-width: 599px) { .scta__inner { width: calc(100% - 16px); gap: 10px; min-height: 60px; padding: 9px 32px 9px 0; } .scta__main { font-size: 1rem; } .scta__btn { padding: 11px 12px; font-size: .82rem; } .scta__close { width: 32px; height: 32px; } } /* 360px級は文言・ボタン・×を合わせても幅が足りない。文字を落とすのは最後にして、 先にボタンと×の余白から削る（実測で1行に収まるまで詰めた） */ @media (max-width: 400px) { .scta__inner { gap: 8px; padding-right: 28px; } .scta__main { font-size: .94rem; } .scta__btn { padding: 10px 10px; font-size: .78rem; } .scta__close { width: 28px; height: 28px; } } @media (max-width: 340px) { .scta__main { font-size: .88rem; } .scta__btn { font-size: .74rem; padding: 9px 8px; } } /* ========================================================================== 無料観覧エリア /free/（2026-08-19 作り直し） ⚠️ このページは紺ではなく **和紙（生成り #f2ede3・文字 #1c2433）の明るいページ**。 紺地用に作った既存クラス（.vinc__lead / .vinc__list / .bpair / .free-note）を そのまま使うと var(--washi) の文字が生成り地に溶けて**完全に読めなくなる** （2026-08-19 実測: color も背景も rgb(242,237,227)）。 このページ側で文字色・罫色を紙用に上書きする。 節ごとに幅を変えて縦の単調さを断つ（地図＝広く／表と本文＝本文幅に絞る）。 ========================================================================== */ .free-sec { width: min(92vw, 1080px); margin: 0 auto; padding-top: clamp(48px, 6vw, 92px); } /* 本文・表の節は読める幅まで絞る。地図の節だけ広いままにして落差を作る */ .free-sec--narrow > *:not(.free-sec-title) { width: min(100%, 680px); margin-inline: auto; } .free-sec--map { padding-top: clamp(32px, 4vw, 56px); } .free-note { margin: clamp(14px, 1.8vw, 20px) auto 0; font-size: clamp(.86rem, 2.2vw, .93rem); line-height: 2; color: #1c2433; } /* 車で来られないことは曖昧にしない。朱の縦罫で読み飛ばさせない */ .free-note--car { padding-left: clamp(14px, 2vw, 20px); border-left: 2px solid #b02f1c; } /* できること／有料エリアのみ の2列。紺地用の .bpair を紙の上に置くための上書き */ .free-page .bpair__col { border-top-color: rgba(125, 90, 18, .6); } .free-page .bpair__col--no { border-top-color: rgba(196, 58, 38, .8); } .free-page .bpair__col .vinc__lead { color: #1c2433; } .free-page .bpair__col .vinc__list li { color: #1c2433; } .free-li__d { display: block; margin-top: .3em; font-size: .82rem; line-height: 1.9; color: rgba(28, 36, 51, .68); } /* 決まり次第ご案内すること。「準備中」を装飾で誤魔化さず、素の箇条書きで並べる */ .free-pending { list-style: none; margin: 0 auto; padding: 0; } .free-pending li { padding: .75em 0; border-bottom: 1px solid rgba(28, 36, 51, .16); font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 1.8; color: #1c2433; } .free-pending li:first-child { border-top: 1px solid rgba(28, 36, 51, .16); } .free-actions { margin: clamp(18px, 2.4vw, 26px) auto 0; } /* カテゴリページの開場時刻（2026-08-20）。既存の .cat-sec-title と同じ様式で、 枠は持たせず罫だけで区切る。枠ごとに時刻が違うエリア（プラチナ・特別席）用。 */ .cat-door { width: min(92vw, 720px); margin: 0 auto; padding-top: clamp(32px, 4vw, 56px); } .cat-door__list { margin: clamp(14px, 2vw, 20px) 0 0; } .cat-door__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: .85em 0; border-bottom: 1px solid rgba(242, 237, 227, .16); } .cat-door__row:first-child { border-top: 1px solid rgba(242, 237, 227, .16); } .cat-door__row dt { font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 1.7; color: var(--washi); } .cat-door__row dd { margin: 0; flex: none; font-family: var(--font-num); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--washi); } .cat-door__note { margin: clamp(12px, 1.6vw, 16px) 0 0; font-size: .82rem; line-height: 1.9; color: var(--washi-dim); } /* ========================================================================== 【仮設置】申込フォーム埋め込みの検証ページ /test/form/（2026-08-20） 検証が終わったらこのブロックごと削除する。 設計: **枠で囲うのをやめ、画面いっぱいの明るい帯にしてフォームを乗せる。** 枠で囲うと「黒地 → 金枠 → 薄グレー → 白カード」の4層入れ子になり、 どう余白を調整しても貼り込みに見えた（監査指摘）。帯にすると白い面は "浮いた板"ではなく"ページの一区画"になり、**フォーム自身の下余白も 帯の余白として自然に見える**（＝枠との隙間が消える）。 サイトは既にTOPのアクセス以降・/free/ で「夜→紙→夜」の反転を使っており新語彙ではない。 ⚠️ iframe は別オリジンで中身の高さを取得できない。**実測値の固定**しかない。 select-type 側の実測（2026-08-20）: iframe幅 496px以上 → 1272px（720pxでは1229px）／ 481〜495 → 1314 480以下 → 1405 ／ 349 → 1425 ／ 320 → 1476 幅の上限は720px。1080pxまで広げると入力欄が間延びする。サイトの本文幅と同値。 ========================================================================== */ .tf-notice { width: min(92vw, 720px); margin: 0 auto; padding: clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px); border-left: 2px solid var(--vermilion-deep); font-size: clamp(.84rem, 2.1vw, .9rem); line-height: 1.9; color: var(--washi); } /* ---- 申込の帯。画面いっぱいの明るい面。枠は持たせない ---- 見出し「お申し込み」も **この帯の中** に入れる（2026-08-21 白濱の指摘）。 以前は見出しだけ暗い節に残っていたため、 ・上の節と地色が同じで見出しが溶けて見えない ・見出しとフォームが別々の箱に見える の2つが同時に起きていた。地色が変わる境目そのものが章の切れ目になり、 見出しからフォームまでが1つの面に載る。 */ .tf-band { /* 全幅は 100vw ではなく calc(50% - 50vw)（スクロールバー分の横スクロールを出さない） */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; margin-top: clamp(48px, 6vw, 88px); padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); /* select-type 側の地色と同じにして、フォームと帯の境目を消す。 ⚠️ `.vv-body .vip-main > section` が背景を墨紺で塗るので特異度で負ける。 このページの帯は section なので、同じ強さのセレクタで上書きする。 */ background: #f6f6f6; } .vv-body .vip-main > section.tf-band { background-color: #f6f6f6; } .tf-band__inner { width: min(92vw, 720px); margin: 0 auto; } /* 帯の中の見出し。字は墨。中央揃え・大きさは他の節の見出し（.vsec__title）のまま＝ このページだけの見出し様式は作らない。 */ .tf-head { width: 100%; margin-bottom: clamp(26px, 3.4vw, 40px); } .tf-title { color: #292420; } /* 入力の直前に金額を再掲する。97万円を決める瞬間に金額が視界にないのを避ける。 帯は明るいので、ここだけ文字色を墨に置き換える */ .tf-price { margin: 0 0 clamp(22px, 3vw, 34px); padding-bottom: .85em; border-bottom: 1px solid rgba(41, 36, 32, .18); font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.95rem, 2.4vw, 1.08rem); letter-spacing: .06em; color: #292420; } .tf-price__yen { display: inline-block; margin-left: .8em; font-family: var(--font-num); font-weight: 900; font-size: 1.5em; letter-spacing: .01em; } .tf-price__sub { display: block; margin-top: .6em; font-family: var(--font-gothic); font-weight: 400; font-size: .74rem; letter-spacing: .08em; color: rgba(41, 36, 32, .66); } /* 枠も影も角丸も持たせない。帯と同色なので、フォームは面の続きとして見える。 地色は必ず敷く: iframe が描画される前や、別プロセス描画の合成の都合で 下地が黒く出ることがある（実測: 敷かないと iframe の余白部が rgb(0,0,0) になった）。 */ .tf-embed { margin: 0; background: #f6f6f6; } .tf-embed__frame { display: block; width: 100%; /* 高さは **先方の文書の高さぴったり** に合わせる。余らせてはいけない。 先方の body は中身の高さまでしか塗られず、余った分は html（透明）→ iframe（透明）と抜けて **黒く出る**（実測 rgb(0,0,0)）。 iframe 要素にも親にも地色を敷いたが、別プロセス描画のため効かなかった。 ＝「余白を足して安全側に倒す」が使えないので、実測値ちょうどで切る。 検証メッセージで中身が伸びた時だけ内部スクロールが出るが、黒帯よりはよい。 先方の文書高さの実測（2026-08-20）: iframe幅 600〜720 → 1229 ／ 496〜599 → 1272 ／ 481〜495 → 1314 ≦480 → 1405 ／ 349 → 1425 ／ 320 → 1476 */ height: 1229px; /* iframe幅 600〜720 */ border: 0; background: #f6f6f6; } @media (max-width: 651px) { .tf-embed__frame { height: 1272px; } } /* iframe幅 496〜599 */ @media (max-width: 538px) { .tf-embed__frame { height: 1314px; } } /* iframe幅 481〜495 */ @media (max-width: 522px) { .tf-embed__frame { height: 1405px; } } /* iframe幅 412〜480 */ @media (max-width: 400px) { .tf-embed__frame { height: 1425px; } } /* iframe幅 350〜368 */ @media (max-width: 379px) { .tf-embed__frame { height: 1476px; } } /* iframe幅 330〜349 */ @media (max-width: 349px) { .tf-embed__frame { height: 1499px; } } /* iframe幅 294〜329 */ .tf-fallback { margin: clamp(4px, 1vw, 10px) 0 0; font-size: clamp(.8rem, 2vw, .85rem); line-height: 1.9; color: rgba(41, 36, 32, .66); } .tf-fallback a { color: #b02f1c; } /* ========================================================================== 押せる／押せないの見た目を揃える（2026-08-22） 実測で「cursor:pointer だが押せない要素」と「押せるのに装飾が無いリンク」が 混在していた。クリックできるものの基準が読み手に伝わっていない状態だった。 ========================================================================== */ /* ① 押せないのに指カーソルが出ていたもの。TOPの動画枠は再生の操作を持たず、 スカイラインは装飾。VVIP個別ページの地図は「押せない全体図（static）」。 */ .prv__frame, .prv__poster, .prv__scrim, .skyline { cursor: default; } .amap__area[aria-hidden="true"], .amap__area[aria-hidden="true"] polygon, .amap-sec .amap__area:not([data-area]):not(:has(a)) { cursor: default; } .amap__label:not([data-area]) { cursor: default; } /* ② 押せるのに装飾が無かったリンク。既存の文字リンク（.pnt__lblink）と同じ 下線・オフセットに揃える。色はそれぞれの文脈の色を継ぐ。 */ .hnews__link, .hnews__more, .access__map-open { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(242, 237, 227, .45); } .hnews__link:hover, .hnews__more:hover, .access__map-open:hover { text-decoration-color: currentColor; } /* ヒーロー直下の1行帯。節ではなく帯なので、上下の余白は節より詰める。 */ .hbar { margin-top: clamp(22px, 3vw, 34px); margin-bottom: clamp(4px, 1vw, 10px); } .hbar .bnote__mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em 1em; } .hbar__go { color: inherit; white-space: nowrap; } /* ---- 2026-08-22 監査対応 ---- ① 申込ボタンの並びは高さを揃える。ラベル長の違いで背が変わると、 「テンプレを置いただけ」の印象になる。 */ .applyrow .vbtn { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; } /* ② 表のスワイプ誘導とフェードが、本文とボタンに重なっていた。 誘導は表の外・上に出し、フェードはボタン行には掛けない。 */ .vcmp__gorow td, .vcmp__go { position: relative; z-index: 2; } /* ③ ヒーロー直下の帯：「（税込）」が括弧の途中で折れていた。 */ .hbar .bnote__mark > * , .hbar__go { white-space: nowrap; } /* 【仮実装】ぴあ3エリアのページ（2026-08-22）。 席割り図は**白地**なので、黒地の図に付けている金の細罫は付けない。 */ .piamap img { border: 0; background: #fff; } .piamap + .piamap { margin-top: clamp(20px, 2.6vw, 30px); } /* 現地写真は2枚並べる。1枚のときは幅いっぱい。 */ .piaphotos { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); display: grid; gap: clamp(12px, 1.8vw, 20px); } @media (min-width: 760px) { .piaphotos:has(li + li) { grid-template-columns: 1fr 1fr; } } .piaphotos .vlots { width: 100%; } /* STEPの但し書き（2026-08-22）。本文より一段落として、札の中で従属して見せる。 */ .bflow__note { margin: .7em 0 0; font-family: var(--font-gothic); font-size: .76rem; line-height: 1.85; color: rgba(41, 36, 32, .7); } /* BBQセットの数量の但し書き（2026-08-22）。「上の絵と異なる場合があります」より 実務上の重みが大きいので、同じ .bset__note でも1段強くする。 */ .bset__note--lead { color: var(--washi); } /* よくあるご質問の番号（2026-08-22）。質問文より前に出さない大きさ・色にする。 行頭には既存の花火マーク（.faq__q::before）があるので、その次に置く。 */ .faq__no { margin-right: .6em; font-family: var(--font-num); font-weight: 700; font-size: .92em; letter-spacing: .04em; color: var(--gold); } /* TOPのカードの番号（2026-08-22）。見出しと同じ大きさだと数字が主役になるので、 一回り小さく・字間を詰めて、見出しの頭に添える。 */ .gcard__no { margin-right: .28em; font-family: var(--font-num); font-size: .86em; letter-spacing: -.02em; } /* 【仮実装】ぴあ3エリアのカテゴリページ（2026-08-22）。 3列カードはやめ、**1エリア＝1行の帯**にした。席割り図が横長で、 正方形のカードに入れると中身が読めないため（超最前列は2400x420）。 罫は金のヘアライン1本だけ。枠で囲わず、行と行のあいだを罫で分ける。 */ .piarows { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); } .piarow { padding: clamp(24px, 3.2vw, 40px) 0; border-top: 1px solid rgba(232, 180, 74, .28); } .piarow:last-child { border-bottom: 1px solid rgba(232, 180, 74, .28); } @media (min-width: 860px) { .piarow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; } } /* 白地＋金枠の「図の額縁」はやめた。中身がCAD図から写真に変わったので額縁は不要で、 紺地に金の細枠は DESIGN-GUIDE が挙げるAI感の型そのもの。 比率を固定するのは3行の高さを揃えるため（旧: 図の比率が 2000x1697 / 2000x1268 / 2400x402 とばらばらで、行の高さが 554 / 439 / 381px になっていた）。 */ .piarow__fig { margin: 0; display: grid; gap: 4px; aspect-ratio: 4 / 3; } .piarow__fig--split { grid-template-columns: 1fr 1fr; } /* 縦積みになる幅では、4:3の絵が画面の高さを食いすぎて1行しか視界に入らない （768px で1行940px＝ほぼ1画面）。横長にして、隣の行が視界に入る高さに抑える。 */ @media (max-width: 859px) { .piarow__fig { aspect-ratio: 16 / 9; } } .piarow__fig img { display: block; width: 100%; height: 100%; object-fit: cover; } .piarow__body { display: flex; flex-direction: column; } @media (max-width: 859px) { .piarow__body { margin-top: clamp(16px, 2.4vw, 22px); } } /* 番号はエリア名と同じ色。金にすると名前と切れて見える（白濱の指摘）。 */ /* 番号はエリア名と同じ行に置く。別行にすると番号だけが見出しに見え、 3枚並べたときに「⑥⑦／プラチナエリア」と2行に割れて比較しづらい。 */ .piarow__no { margin-right: .3em; font-family: var(--font-num); letter-spacing: -.02em; } .piarow__name { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.24rem, 3.4vw, 1.6rem); letter-spacing: .06em; line-height: 1.45; color: #fff; } .piarow__pos { display: block; margin-top: .5em; font-family: var(--font-mincho); font-weight: 500; font-size: .8rem; letter-spacing: .16em; color: var(--washi-dim); } .piarow__spec { margin: clamp(16px, 2.2vw, 22px) 0 0; } .piarow__spec > div { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: .8em; padding: .55em 0; } .piarow__spec > div + div { border-top: 1px solid rgba(242, 237, 227, .14); } .piarow__spec dt { font-family: var(--font-mincho); font-size: .78rem; letter-spacing: .14em; color: var(--washi-dim); align-self: center; } .piarow__spec dd { margin: 0; font-family: var(--font-num); font-size: clamp(.9rem, 2.3vw, 1rem); line-height: 1.75; color: var(--washi); } .piarow__tax { margin-left: .6em; font-family: var(--font-mincho); font-size: .68em; letter-spacing: .1em; color: var(--washi-dim); } .piarow__btn { margin-top: clamp(18px, 2.4vw, 24px); align-self: start; min-height: 52px; } /* 席種は「席種：⑥…／⑦…」の一文だったが、名前が長く2行に折り返して 3エリアの比較が崩れていた。1席種＝1行にして、名前と価格を両端に置く。 */ .piaseats { list-style: none; margin: clamp(14px, 1.8vw, 18px) 0 0; padding: 0; } .piaseat { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .5em 0; border-top: 1px solid rgba(242, 237, 227, .14); } .piaseat__name { font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(.9rem, 2.3vw, .98rem); letter-spacing: .04em; line-height: 1.5; color: #fff; } .piaseat__no { margin-right: .3em; font-family: var(--font-num); font-weight: 700; letter-spacing: -.02em; } .piaseat__price { flex: none; font-family: var(--font-num); font-weight: 700; font-size: clamp(.94rem, 2.4vw, 1.04rem); color: var(--washi); } @media (max-width: 859px) { .piarow__btn { width: 100%; } } /* 地図の一覧ボタンに付く通し番号（2026-08-22）。エリア名より前に出さない大きさで、 その区画の色（--acol）に合わせる。地図のラベル側は SVG の text なので文字だけ。 */ .amap-list__no { margin-right: .4em; font-family: var(--font-num); font-size: .9em; letter-spacing: -.02em; color: var(--acol, var(--gold)); } /* 席種のオファーカード（2026-08-22）。 ⚠️ 最初は「紺地＋金の1px枠」で組んだが、これは DESIGN-GUIDE が名指しで挙げている AI感の型そのもの（紺に金枠）だった。**枠と地色をやめ、写真を主役にする。** 区切りは情報行の細い罫だけ。書体・級数は VIP の申込カード（.vchoice__*）に揃える。 */ .offers { list-style: none; margin: 0 auto; padding: 0; width: min(100%, var(--vmax)); display: grid; gap: clamp(28px, 4vw, 56px); } @media (min-width: 760px) { .offers { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .offer { display: flex; flex-direction: column; } /* 見出しが先頭に来た（2026-08-26）。画像は1〜2枚。2枚目はその席種だけが光るエリア図。 */ .offer > .offer__name { margin-bottom: clamp(14px, 1.8vw, 18px); } .offer__fig + .offer__fig { margin-top: clamp(10px, 1.4vw, 14px); } .offer__fig { margin: 0; overflow: hidden; } .offer__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .offer__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2.4vw, 26px) 0 0; } /* 番号は名前と同じ行・同じ色。別行にすると番号が見出しに見える。 */ .offer__name { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.02rem, 2.8vw, 1.18rem); letter-spacing: .08em; line-height: 1.6; color: #fff; } .offer__no { margin-right: .3em; font-family: var(--font-num); letter-spacing: -.02em; } .offer__price { margin: .9em 0 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.24rem, 3.4vw, 1.5rem); color: #fff; } .offer__unit { display: block; margin-top: .35em; font-family: var(--font-mincho); font-weight: 400; font-size: .5em; letter-spacing: .06em; color: var(--washi-dim); } .offer__spec { margin: clamp(16px, 2.2vw, 22px) 0 clamp(22px, 3vw, 30px); } /* ラベルが長くなった（区画／最大・一人最小単価・座席イメージ）。4.2emだと2行に折れる。 */ .offer__spec > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: .8em; padding: .55em 0; } .offer__spec > div { border-top: 1px solid rgba(242, 237, 227, .14); } /* 注記が付く行（定員の数え方）は2行になるので、ラベルは中央ではなく上に寄せる。 */ .offer__spec dt { font-family: var(--font-mincho); font-size: .76rem; letter-spacing: .14em; color: var(--washi-dim); align-self: start; padding-top: .18em; } .offer__spec dd { margin: 0; font-family: var(--font-num); font-size: clamp(.88rem, 2.2vw, .96rem); line-height: 1.75; color: var(--washi); } .offer__btn { margin-top: 0; width: 100%; min-height: 56px; } .offer__btn.is-soon { display: inline-flex; align-items: center; justify-content: center; cursor: default; } .offer__micro { margin: .75em 0 0; text-align: center; font-family: var(--font-gothic); font-size: .74rem; letter-spacing: .1em; line-height: 1.7; color: var(--washi-dim); } .offer__spec + .offer__btn { margin-top: auto; } /* ぴあ画面で選ぶ番号の案内。申込ボタンの直前に置き、番号は本文より大きく金で出す。 案内とボタンが1セットに見えるよう間隔を詰める。角丸・影・絵文字は使わない。 */ .pia-guide { margin: 0 0 .55em; font-family: var(--font-gothic); font-size: clamp(.8rem, 2.1vw, .86rem); line-height: 1.85; color: var(--washi); } .pia-guide__no { color: var(--gold); font-family: var(--font-num); font-weight: 700; font-size: 1.5em; letter-spacing: -.02em; } /* カード内では従来ボタンが下端に来ていた（.offer__spec + .offer__btn の auto）。 案内を挟んだので、その余白吸収を案内側へ移し、案内＋ボタンをまとめて下端に置く。 */ .offer__spec + .pia-guide { margin-top: auto; } .pia-guide + .vbtn { margin-top: 0; } /* ============================================================ 仮設置: /test/line-assets/ の見出しまわり（2026-08-24） LINEカルーセル素材の採否を決めるためのサンプルページ専用。 本採用が決まったら、このブロックとページごと消す。 ============================================================ */ .la-note { width: min(100%, var(--vmax)); margin: 0 auto clamp(18px, 2.4vw, 26px); font-family: var(--font-mincho); font-size: clamp(.88rem, 2.2vw, .95rem); line-height: 2; color: var(--washi); } .la-note b { color: var(--gold); } .la-verdict { width: min(100%, var(--vmax)); margin: clamp(18px, 2.4vw, 26px) auto 0; padding: .9em 1.1em; font-family: var(--font-mincho); font-size: clamp(.85rem, 2.1vw, .92rem); line-height: 1.95; color: var(--washi); } .la-verdict b { margin-right: .5em; } .la-verdict--yes { border-left: 3px solid var(--gold); background: rgba(232, 180, 74, .08); } .la-verdict--yes b { color: var(--gold); } .la-verdict--no { border-left: 3px solid var(--vermilion-deep); background: rgba(196, 58, 38, .1); } .la-verdict--no b { color: #ff8f7a; } .la-row { list-style: none; width: min(100%, var(--vmax)); margin: clamp(16px, 2vw, 22px) auto 0; padding: 0; display: grid; gap: clamp(14px, 1.8vw, 20px); } @media (min-width: 760px) { .la-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } /* 区画図は横長2.18。半分の幅に入れると区画番号が読めないので1列で積む。 */ @media (min-width: 760px) { .la-row--wide { grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 30px); } } .la-solo { width: min(100%, 420px); margin: 0 auto; } .la-shot { margin: 0; } .la-shot img { display: block; width: 100%; height: auto; } .la-shot figcaption { margin-top: .7em; font-family: var(--font-gothic); font-size: .72rem; letter-spacing: .08em; line-height: 1.7; color: var(--washi-dim); } .la-src { display: block; margin-top: .5em; font-family: var(--font-gothic); font-size: .72rem; letter-spacing: .08em; color: var(--washi-dim); } .la-warn { width: min(100%, var(--vmax)); margin: clamp(20px, 2.6vw, 28px) auto 0; padding: clamp(16px, 2vw, 22px); border: 1px solid rgba(196, 58, 38, .5); } .la-warn p { margin: 0 0 1em; font-family: var(--font-mincho); font-size: clamp(.85rem, 2.1vw, .92rem); line-height: 1.95; color: var(--washi); } .la-warn b { color: #ff8f7a; } .la-tbl-wrap { overflow-x: auto; } .la-tbl { width: 100%; min-width: 480px; } .la-tbl th, .la-tbl td { padding: .6em .8em; border-top: 1px solid rgba(242, 237, 227, .16); font-family: var(--font-num); font-size: clamp(.8rem, 2vw, .88rem); text-align: left; color: var(--washi); } .la-tbl thead th { font-family: var(--font-mincho); font-size: .76rem; letter-spacing: .1em; color: var(--washi-dim); border-top: 0; } /* 説明文と写真を左右に並べる（超最前列の「席になる堤防の階段」）。器は基本情報と同じ .pfacts--split。 */ .pfacts__lead { margin: 0; font-family: var(--font-mincho); font-size: clamp(.9rem, 2.3vw, 1rem); line-height: 2.1; color: var(--washi); } /* 「このエリアについて」（2026-08-27）。 **1つの器の中を2カラムに**する。左が文章、右が写真。 器は1枚なので真ん中に線も隙間も入らず、写真は器の縁までいっぱいに出す （紺地の箱を2つ並べる形はやめた。白濱の指摘: AI感が万歳）。 地色は生成りに寄せない（クリームはAI感）。ほぼ白の #f7f5f1。 金は使わず、罫は墨の細線だけ。角丸・影・グラデーションなし。 */ .pabout { width: min(100%, var(--vmax)); margin: 0 auto; background: #f7f5f1; border: 1px solid rgba(18, 27, 44, .14); color: #1c1611; display: grid; overflow: hidden; } @media (min-width: 860px) { .pabout { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); } .pabout__body { order: 1; } .pabout__fig { order: 2; } } .pabout__fig { margin: 0; } .pabout__fig img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; } @media (max-width: 859px) { .pabout__fig img { aspect-ratio: 16 / 9; min-height: 0; } } .pabout__body { padding: clamp(24px, 3.4vw, 44px); } .pabout__lead { margin: 0; font-family: var(--font-mincho); font-size: clamp(.96rem, 2.5vw, 1.08rem); line-height: 2.15; color: #1c1611; } .pabout__seats { list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: clamp(22px, 2.6vw, 26px) 0 0; border-top: 1px solid rgba(18, 27, 44, .16); display: grid; gap: clamp(18px, 2.2vw, 24px); } .pabout__name { margin: 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(.98rem, 2.6vw, 1.06rem); letter-spacing: .05em; line-height: 1.6; color: #1c1611; } .pabout__no { margin-right: .35em; font-family: var(--font-num); font-weight: 700; letter-spacing: -.02em; } .pabout__desc { margin: .5em 0 0; font-family: var(--font-mincho); font-size: clamp(.85rem, 2.2vw, .9rem); line-height: 1.95; color: #4b4239; } /* エリアの位置と席種の配置。2枚の図を左右に。超最前列の図は横長なので縦積み。 */ .plots { width: min(100%, var(--vmax)); margin: 0 auto; display: grid; gap: clamp(18px, 2.4vw, 30px); align-items: start; } @media (min-width: 860px) { .plots--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .plots__fig { margin: 0; } .plots__fig img { display: block; width: 100%; height: auto; border: 1px solid rgba(242, 237, 227, .2); } .plots__fig figcaption { margin-top: .8em; font-family: var(--font-mincho); font-size: clamp(.8rem, 2.1vw, .86rem); line-height: 1.9; color: var(--washi-dim); } .plots__fig figcaption b { color: var(--gold); } .plots__fig figcaption .pnt__lblink { margin-left: .6em; } /* 図面は切らずに全体を見せる（区画の寸法図など）。 */ .offer__fig--fit { background: #f7f5f1; } .offer__fig--fit img { object-fit: contain; } /* 席種カードの説明文。 */ .offer__lead { margin: 0 0 clamp(16px, 2vw, 20px); font-family: var(--font-mincho); font-size: clamp(.86rem, 2.2vw, .93rem); line-height: 2; color: var(--washi); } /* 席種カードの仕様表に付く注記（定員の数え方など）。 */ .offer__specnote { display: block; margin-top: .4em; font-family: var(--font-mincho); font-size: .78em; line-height: 1.75; color: var(--washi-dim); } /* 概要の2段落目（超最前列の「堤防の階段です」の説明）。 */ .pabout__lead--2 { margin-top: 1.2em; } /* エリアの位置の図の下に置く席種の説明（2026-08-27）。 カードの反復にしない。丸数字を大きく置き、上の細罫だけで区切る。 金は使わず、枠も塗りもつけない（DESIGN-GUIDE のAI感の型を避ける）。 */ .pseats { list-style: none; width: min(100%, var(--vmax)); margin: clamp(28px, 3.4vw, 44px) auto 0; padding: 0; display: grid; gap: clamp(20px, 2.6vw, 30px); } @media (min-width: 760px) { .pseats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); } } .pseats li { padding-top: clamp(14px, 1.8vw, 18px); border-top: 1px solid rgba(242, 237, 227, .28); } .pseats__no { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1; letter-spacing: -.02em; color: var(--washi-dim); } .pseats__name { margin: .5em 0 0; font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.02rem, 2.7vw, 1.14rem); letter-spacing: .06em; color: #fff; } .pseats__desc { margin: .6em 0 0; font-family: var(--font-mincho); font-size: clamp(.85rem, 2.2vw, .92rem); line-height: 2; color: var(--washi); } /* 堤防の現地写真。帯に4枚詰めると小さすぎて何も分からなかったので、大きく2枚並べる。 */ .pbank { list-style: none; width: min(100%, var(--vmax)); margin: clamp(22px, 2.8vw, 32px) auto 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); } @media (min-width: 760px) { .pbank { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pbank figure { margin: 0; } .pbank img { display: block; width: 100%; height: auto; border: 1px solid rgba(242, 237, 227, .2); } .pbank figcaption { margin-top: .7em; font-family: var(--font-mincho); font-size: clamp(.8rem, 2.1vw, .86rem); line-height: 1.9; color: var(--washi-dim); } /* ============================================================ 注意事項 /notes/（2026-08-27） 規約（.terms）と同じ読み物の組み。新しい様式は作らない。 ============================================================ */ .notes { width: min(100%, 860px); margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(18px, 4vw, 28px) 0; } .notes:last-of-type { padding-bottom: clamp(56px, 7vw, 96px); } .notes__title { margin: 0 0 clamp(16px, 2vw, 22px); padding-bottom: .6em; border-bottom: 1px solid rgba(232, 180, 74, .5); font-family: var(--font-kaisei); font-weight: 800; font-size: clamp(1.24rem, 3.4vw, 1.5rem); letter-spacing: .08em; color: #fff; } .notes__lead { margin: 0 0 clamp(18px, 2.4vw, 26px); font-family: var(--font-mincho); font-size: clamp(.92rem, 2.4vw, 1rem); line-height: 2.1; color: var(--washi); } .notes__h3 { margin: clamp(26px, 3.2vw, 36px) 0 .8em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.98rem, 2.6vw, 1.08rem); letter-spacing: .12em; color: var(--gold); } .notes__glead { margin: 0 0 .8em; font-family: var(--font-mincho); font-size: clamp(.86rem, 2.2vw, .92rem); line-height: 2; color: var(--washi-dim); } .notes__list { list-style: none; margin: 0; padding: 0; } .notes__list li { padding: .85em 0; border-top: 1px solid rgba(242, 237, 227, .16); font-family: var(--font-mincho); font-size: clamp(.88rem, 2.3vw, .95rem); line-height: 2.05; color: var(--washi); } .notes__list li:first-child { border-top: 0; } .notes__list b { display: block; margin-bottom: .25em; font-weight: 700; color: #fff; } .notes__table { margin: 0 0 clamp(20px, 2.6vw, 28px); border: 1px solid var(--gold); overflow-x: auto; } .notes__after { margin: clamp(18px, 2.2vw, 24px) 0 0; font-family: var(--font-mincho); font-size: clamp(.86rem, 2.2vw, .92rem); line-height: 2; color: var(--washi-dim); } /* 返金基準書（/refund/）の箇条書き（・）・番号リスト（§6）・署名、適用対象の表の列幅。 正本の「・」「1.」を字面として出し、ぶら下げインデントで折返しを揃える（既存の級数・色に合わせる）。 */ .rdoc-ul, .rdoc-ol { list-style: none; margin: .4em 0 0; padding: 0; } .rdoc-ul li, .rdoc-ol li { padding: .35em 0 0; padding-left: 1.5em; text-indent: -1.5em; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.3vw, .95rem); line-height: 2.05; color: var(--washi); } .notes__sign { margin: clamp(24px, 3vw, 34px) 0 0; text-align: right; font-family: var(--font-mincho); font-size: clamp(.9rem, 2.3vw, .98rem); letter-spacing: .1em; color: var(--washi); } .refund-apply { min-width: 520px; } .refund-apply col:nth-child(1) { width: 9%; } .refund-apply col:nth-child(2) { width: 62%; } .refund-apply col:nth-child(3) { width: 29%; } .refund-apply th[scope="row"] { white-space: nowrap; } /* 申込導線に添える一文（花火の落下物）。 2026-08-27: 隣の「※マイクロバスの送迎費用は…」「お申込みには協賛規約への同意が…」と 見た目が違い、これだけ別扱いに見えていた（白濱の指摘）。実測の差は 幅 1080px対720px（外にはみ出していた）／文字 13.76px対12.8px／ リンク色 生成り対金。**.vapply__note と同じ値に揃える。** 申込節の外（ぴあの席種カードの下など）で使うときは器の幅が無いので、 そこだけ --vmax で受ける。 */ .fallnote { width: min(100%, var(--vmax)); margin: clamp(22px, 3vw, 32px) auto 0; font-size: .8rem; line-height: 2; color: var(--washi-dim); } /* 申込節の中では .vapply__note と同じ器に入るので、幅の指定を打ち消して隣に揃える。 申込節の外（ぴあの席種カードの下など）では --vmax のまま。 */ .vapply .fallnote { width: auto; margin-left: 0; margin-right: 0; } /* 実行委員会の会社名リンク。目立たせない＝色は本文のまま、下線だけ（2026-08-27）。 */ .cmem__link { color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; } .cmem__link:hover { text-decoration-thickness: 2px; } .cmem__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* よくあるご質問の小分類（有料観覧席のエリア別。2026-08-27）。 カテゴリ見出し（.section-title）より一段小さく、金の細罫だけで区切る。 */ .faq-sub { width: min(100%, 860px); margin: clamp(30px, 3.6vw, 44px) auto clamp(12px, 1.6vw, 18px); padding: 0 clamp(18px, 4vw, 28px) .6em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(1.08rem, 3vw, 1.3rem); letter-spacing: .12em; line-height: 1.6; color: var(--gold); border-bottom: 1px solid rgba(232, 180, 74, .32); } .faq-group .faq-sub:first-of-type { margin-top: clamp(18px, 2.2vw, 26px); } /* 協賛規約の入れ子リスト（第12条の払戻し割合）。番号は原文の（1）（2）（3）に合わせる。 */ /* 号の見出し「（1）」。絶対配置で 1.4em しか確保しておらず、実幅 2.71em の マーカーが本文に 19.6px 重なっていた（2026-08-28 実測）。 flex にしてマーカーの幅を自動で取る。桁が増えても（10）以降も重ならない。 */ .terms__sub { margin: .6em 0 .2em; padding-left: 1.4em; list-style: none; counter-reset: tsub; } .terms__sub li { display: flex; counter-increment: tsub; } .terms__sub li::before { content: "（" counter(tsub) "）"; flex: 0 0 auto; } /* ========================================================================== 信頼情報（TOP・最終CTAの直後／フッターの直前） 新しい見た目は作っていない。値はすべて既存からの流用: ・器の余白と幅 … .venue / .venue__inner と同じ ・金のヘアライン … .vcmp / .vfacts / .pfacts__table と同じ 1px solid var(--gold) ・箱の内側の余白 … .vfacts と同じ ・小見出し（金） … .notes__h3 と同じ（上マージンだけ項目の区切りに合わせる） ・本文（生成り） … .notes__list li と同じ ・項目の区切り罫 … .notes__list li と同じ rgba(242,237,227,.16) ・本文中のリンク … .vapply__note a と同じ指定を共用（上の行に追記） 地色は直前の .finale と同じ --ink-deep。ここで色を割ると、finale と フッターの夜景の帯のあいだに別色の帯ができる（.site-footer の注記と同じ理由）。 ========================================================================== */ .trust { background: var(--ink-deep); padding: clamp(56px, calc(var(--vhlock) * 0.11), 120px) clamp(20px, 5vw, 48px) clamp(56px, calc(var(--vhlock) * 0.11), 120px); } .trust__inner { width: min(94vw, 1040px); margin: 0 auto; } /* 見出しの折り返し位置を決める。狭い画面で自然に折ると「…いただくた／めに」と 語の途中で割れる（実測380px）。作法は .finale__br と同じ。 */ @media (min-width: 700px) { .trust__br { display: none; } } .trust__box { width: min(100%, 620px); margin: clamp(24px, calc(var(--vhlock) * 0.045), 44px) auto 0; border: 1px solid var(--gold); padding: clamp(18px, 2.8vw, 28px) clamp(18px, 2.8vw, 30px); } .trust__item + .trust__item { margin-top: clamp(18px, 2.4vw, 26px); padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid rgba(242, 237, 227, .16); } .trust__h3 { margin: 0 0 .8em; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(.98rem, 2.6vw, 1.08rem); letter-spacing: .12em; color: var(--gold); } .trust__body { margin: 0; font-family: var(--font-mincho); font-size: clamp(.88rem, 2.3vw, .95rem); line-height: 2.05; color: var(--washi); } /* 実行委員会の写真札（/about/committee/）。列組みは顧問（.advs）と同じ指定を 共用する（スマホ2列・860px以上で4列）。2026-08-27にいったん5列にしたが、 「アドバイザーと同じ配置に」の指示で戻した。5名なので4列では5枚目が次の行に 1枚だけ並ぶ。 役職は「副実行委員長・総合プロデューサー」のように長さがまちまちなので、 2行ぶんの高さを確保して写真の頭を揃える（確保しないと札ごとに写真の位置がずれる）。 */ .cmems .inc__grp { min-height: calc(2 * 1.5em); display: flex; align-items: flex-end; justify-content: center; line-height: 1.5; } /* ===== TOP・注意事項の「ご来場前に必ずご確認ください」ブロック（2026-09-02）===== 金のヘアライン1pxで囲む。角丸・影・朱なし。見出し金・本文白。 */ .notice-must { width: min(92vw, 900px); margin: clamp(40px, 6vw, 72px) auto 0; } .notice-must__inner { border: 1px solid rgba(232, 180, 74, .55); padding: clamp(20px, 3.4vw, 34px) clamp(13px, 3.2vw, 40px); background: rgba(11, 17, 30, .35); } .notice-must__title { margin: 0 0 clamp(14px, 2vw, 20px); font-family: var(--font-mincho); font-weight: 800; font-size: clamp(1.02rem, 2.6vw, 1.3rem); letter-spacing: .08em; color: var(--gold); } .notice-must__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(9px, 1.5vw, 13px); } .notice-must__list li { position: relative; padding-left: .95em; font-size: clamp(.72rem, 2vw, .95rem); line-height: 1.65; color: var(--washi); } .notice-must__list li::before { content: "・"; position: absolute; left: 0; color: var(--gold); } .notice-must__more { margin: clamp(15px, 2.2vw, 22px) 0 0; } .notice-must__more a { color: var(--gold); font-weight: 700; font-size: clamp(.84rem, 1.8vw, .92rem); letter-spacing: .06em; text-underline-offset: 5px; } .notes__mustlist { margin-top: clamp(10px, 1.6vw, 16px); } /* 申込導線ボタン（VIP/VVIPの「◯◯を申し込む」「◯◯へ進む」等）：番号付きで長くなり 折り返して不揃いになるのを防ぐ。横paddingを詰め・級数をやや下げ・等高・中央寄せ。 */ .applyrow .vbtn { height: 100%; padding-left: 12px; padding-right: 12px; font-size: clamp(.8rem, 1.85vw, .92rem); line-height: 1.4; text-align: center; } /* VIPの乗用車/バスタイプ全体区画図（企画書P14相当）。2枚並べ・モバイルは縦積み。 */ .vlots-types { display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(14px, 2vw, 22px); } @media (min-width: 760px) { .vlots-types { grid-template-columns: 1fr 1fr; } }