に body_class() を付与する ──────────────────────────────────────────────────────────── */ #body_wrap.home #content.l-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; } #body_wrap.home .l-sidebar, #body_wrap.home .c-sidebar, #body_wrap.home .p-mainVisual, #body_wrap.home #post_slider, #body_wrap.home #top_title_area, #body_wrap.home #pickup_banner, #body_wrap.home #breadcrumb { display: none !important; } /* ──────────────────────────────────────────────────────────── SWELL ヘッダー — フロントページのみ暗色化 ──────────────────────────────────────────────────────────── */ #body_wrap.home #header.l-header { background-color: rgba(5, 5, 5, 0.90) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: none !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* スクロール時の固定ヘッダー */ #body_wrap.home #fix_header { background-color: rgba(5, 5, 5, 0.96) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } /* ナビリンク・ロゴ文字を白に */ #body_wrap.home #header a, #body_wrap.home #header .c-gnav__item > a, #body_wrap.home #header .c-gnav__item > span { color: rgba(232, 228, 222, 0.88) !important; } #body_wrap.home #header a:hover { color: #ffffff !important; opacity: 1 !important; } /* SP ハンバーガーアイコン */ #body_wrap.home #header .c-menuBtn__line, #body_wrap.home #header .c-menuBtn__line::before, #body_wrap.home #header .c-menuBtn__line::after { background-color: var(--tz-white) !important; } /* ──────────────────────────────────────────────────────────── ページ全体 ──────────────────────────────────────────────────────────── */ .tz-front { background-color: var(--tz-black); color: var(--tz-white); font-family: var(--tz-font-base); line-height: 1.8; overflow-x: hidden; } /* ──────────────────────────────────────────────────────────── ボタン（セクション共通） ──────────────────────────────────────────────────────────── */ .tz-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--tz-font-base); font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 700; letter-spacing: 0.12em; padding: 14px 36px; border: 2px solid transparent; text-decoration: none !important; cursor: pointer; transition: all 0.2s ease; min-width: 200px; text-align: center; line-height: 1.4; box-sizing: border-box; } .tz-btn--primary { background: var(--tz-red); color: #fff !important; border-color: var(--tz-red); box-shadow: 0 0 24px rgba(192,24,24,0.4), inset 0 1px 0 rgba(255,255,255,0.08); } .tz-btn--primary:hover { background: var(--tz-red-bright); border-color: var(--tz-red-bright); box-shadow: 0 0 40px rgba(238,34,34,0.55); transform: translateY(-1px); color: #fff !important; } .tz-btn--outline { background: transparent; color: var(--tz-white) !important; border-color: rgba(232,228,222,0.4); } .tz-btn--outline:hover { background: rgba(255,255,255,0.05); border-color: var(--tz-teal); color: var(--tz-teal) !important; box-shadow: 0 0 20px rgba(0,200,150,0.2); transform: translateY(-1px); } /* ──────────────────────────────────────────────────────────── セクション共通：アイブロウラベル（英字の小ラベル） PROGRAM / VISITOR GUIDE / EVENT INFO などの見出し上に使用。 ──────────────────────────────────────────────────────────── */ .tz-section-eyebrow { font-family: var(--tz-font-mono); font-size: clamp(0.66rem, 1.4vw, 0.78rem); font-weight: 700; letter-spacing: 0.42em; color: var(--tz-red); text-transform: uppercase; margin: 0 0 0.7em; line-height: 1; } /* ============================================================ ① ヒーロー — フルスクリーン（PC: 1枚背景 / SP: 1枚） ============================================================ */ .tz-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--tz-black); display: flex; flex-direction: column; } /* 環境光グロー */ .tz-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 85%, rgba(110,72,0,0.09) 0%, transparent 46%), radial-gradient(ellipse at 80% 20%, rgba(90,0,0,0.12) 0%, transparent 46%); pointer-events: none; z-index: 1; } /* ── 背景パネル（PC/SP共通で1枚画像） ── */ .tz-hero__panels { position: absolute; inset: 0; z-index: 0; } .tz-hero-panel { position: relative; overflow: hidden; height: 100%; background: linear-gradient(160deg, #140d00, #0a0008); } .tz-hero-panel picture { display: block; width: 100%; height: 100%; } .tz-hero-panel__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* 上下グラデーションオーバーレイ（文字の視認性確保。第3段階でより濃く） */ .tz-hero-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.08) 42%, rgba(0,0,0,0.88) 100% ); pointer-events: none; } /* ── 前景コンテンツ（中央下寄せ） ── */ .tz-hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; min-height: 100vh; min-height: 100svh; padding: 0 var(--tz-gap-h) clamp(64px, 10vw, 100px); box-sizing: border-box; text-align: center; } .tz-hero__copy { max-width: 640px; width: 100%; margin-bottom: clamp(20px, 3vw, 32px); } .tz-hero__date { display: block; font-family: var(--tz-font-mono); font-size: clamp(0.68rem, 1.4vw, 0.82rem); letter-spacing: 0.22em; color: rgba(255,255,255,0.52); margin-bottom: 0.1em; text-shadow: 0 1px 8px rgba(0,0,0,0.95); } .tz-hero__place { display: block; font-family: var(--tz-font-mono); font-size: clamp(0.68rem, 1.4vw, 0.82rem); letter-spacing: 0.22em; color: rgba(255,255,255,0.52); margin-bottom: 0.6em; text-shadow: 0 1px 8px rgba(0,0,0,0.95); } .tz-hero__title { font-family: var(--tz-font-title); font-size: clamp(2.15rem, 8vw, 4.8rem); font-weight: 900; color: #ffffff; letter-spacing: 0.09em; line-height: 1.12; margin-bottom: 0.4em; text-shadow: 0 2px 28px rgba(0,0,0,0.9), 0 0 90px rgba(0,0,0,0.7); } /* タイトル下の赤アクセントライン — ヒーローの存在感を強める */ .tz-hero__title::after { content: ''; display: block; margin: 0.5em auto 0; width: clamp(48px, 8%, 80px); height: 3px; background: linear-gradient(90deg, transparent, var(--tz-red-bright), transparent); box-shadow: 0 0 16px rgba(238,34,34,0.7); } .tz-hero__lead { font-size: clamp(0.95rem, 2.2vw, 1.15rem); color: rgba(255,255,255,0.82); line-height: 1.95; letter-spacing: 0.04em; text-shadow: 0 1px 12px rgba(0,0,0,0.98), 0 0 28px rgba(0,0,0,0.8); margin-top: 0.7em; } .tz-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ヒーロー専用ボタン */ .tz-hero__button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--tz-font-base); font-size: clamp(0.92rem, 2.1vw, 1.08rem); font-weight: 800; letter-spacing: 0.12em; padding: 17px 42px; border: 2px solid transparent; text-decoration: none !important; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; min-width: 220px; text-align: center; line-height: 1.4; box-sizing: border-box; } .tz-hero__button--primary { background: var(--tz-red); color: #fff !important; border-color: var(--tz-red); box-shadow: 0 0 32px rgba(192,24,24,0.65), inset 0 1px 0 rgba(255,255,255,0.08); } .tz-hero__button--primary:hover { background: var(--tz-red-bright); border-color: var(--tz-red-bright); box-shadow: 0 0 48px rgba(238,34,34,0.75); transform: translateY(-2px) scale(1.02); color: #fff !important; } .tz-hero__button--secondary { background: rgba(0,0,0,0.42); color: var(--tz-white) !important; border-color: rgba(232,228,222,0.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .tz-hero__button--secondary:hover { border-color: var(--tz-teal); color: var(--tz-teal) !important; box-shadow: 0 0 16px rgba(0,200,150,0.25); transform: translateY(-1px); } /* ── スクロール誘導 ── */ .tz-hero__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .tz-hero__scroll-label { display: block; font-family: var(--tz-font-mono); font-size: 0.58rem; letter-spacing: 0.32em; color: rgba(255,255,255,0.32); text-transform: uppercase; } .tz-hero__scroll-line { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0.36) 0%, transparent 100%); transform-origin: top center; animation: tz-scroll-drop 1.8s ease-in-out infinite; } @keyframes tz-scroll-drop { 0% { transform: scaleY(0); opacity: 0; } 20% { opacity: 1; } 80% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tz-hero__scroll-line { animation: none; opacity: 0.28; } } /* ============================================================ ② お知らせ投稿 .tz-posts ============================================================ */ .tz-posts { background: #050505; padding: clamp(20px, 3vw, 28px) 0; border-top: 1px solid rgba(192, 24, 24, 0.18); border-bottom: 1px solid rgba(255,255,255,0.05); } .tz-posts__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px clamp(20px, 3vw, 32px); } /* 赤い小ラベル */ .tz-posts__label { font-family: var(--tz-font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.32em; color: var(--tz-red-bright); flex: 0 0 auto; } /* 見出し（帯の中では小さく・控えめに） */ .tz-posts__heading { font-family: var(--tz-font-title); font-size: 0.92rem; font-weight: 700; color: rgba(232,228,222,0.55); letter-spacing: 0.12em; margin: 0; flex: 0 0 auto; } /* リスト：帯の下に1行ずつ、罫線で区切る */ .tz-posts__list { list-style: none; padding: 0; margin: 10px 0 0; flex: 1 1 100%; } .tz-posts__item { border-top: 1px solid rgba(255,255,255,0.05); } .tz-posts__item:first-child { border-top: none; } .tz-posts__link { display: flex; align-items: baseline; gap: clamp(14px, 2.5vw, 28px); padding: 0.7em 8px; text-decoration: none !important; transition: background 0.15s ease, padding-left 0.2s ease; } .tz-posts__link:hover { background: rgba(192,24,24,0.05); padding-left: 16px; } .tz-posts__date { font-family: var(--tz-font-mono); font-size: clamp(0.68rem, 1.2vw, 0.78rem); color: var(--tz-gray-mid); letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0; } .tz-posts__title { font-size: clamp(0.9rem, 1.8vw, 1rem); color: var(--tz-white); line-height: 1.55; letter-spacing: 0.03em; transition: color 0.15s ease; } .tz-posts__link:hover .tz-posts__title { color: var(--tz-teal); } /* フッター：一覧リンク */ .tz-posts__footer { flex: 1 1 100%; text-align: center; margin-top: 14px; } /* ============================================================ ③ プログラムカード .tz-program ============================================================ */ .tz-program { background: var(--tz-black-soft); padding: var(--tz-gap-v) 0; } .tz-program__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-program .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--tz-white); line-height: 1.25; letter-spacing: 0.08em; margin-bottom: 2.2em; display: inline-block; position: relative; text-shadow: 0 0 32px rgba(200,140,0,0.16); } .tz-program .tz-section-title::after { content: ''; display: block; margin-top: 0.5em; height: 3px; width: 64px; background: linear-gradient(90deg, var(--tz-red) 0%, var(--tz-amber) 60%, transparent 100%); } .tz-program__lead { font-size: clamp(0.88rem, 1.8vw, 0.98rem); color: var(--tz-gray-mid); letter-spacing: 0.06em; margin: -1em 0 2.4em; } /* カードグリッド：昼+夜横並び、体育館全幅 */ .tz-program__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); } .tz-program-card--gym { grid-column: 1 / -1; } /* ── カード基本構造 ── */ .tz-program-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .tz-program-card__img { overflow: hidden; flex-shrink: 0; } .tz-program-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease, filter 0.3s ease; } /* 画像未確定時の仮枠（各カラーは派生クラスで上書き） */ .tz-program-card__img-placeholder { display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 17px); } .tz-program-card__img-placeholder span { font-family: var(--tz-font-mono); font-size: 0.62rem; letter-spacing: 0.28em; color: rgba(232,228,222,0.28); text-align: center; } .tz-program-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .tz-program-card__label { display: block; margin: 0 0 0.25em; } .tz-program-card__title { display: block; margin: 0; } .tz-program-card__subtitle { display: block; margin: 0.1em 0 0.9em; } .tz-program-card__text { flex: 1; margin: 0 0 1.2em; line-height: 1.85; } /* メタ情報をラベル（チップ）化し、対象/時間/料金を一目で読み取れるようにする */ .tz-program-card__meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tz-program-card__meta li { display: flex; align-items: center; gap: 7px; padding: 6px 12px; line-height: 1.4; border-radius: 2px; background: rgba(255,255,255,0.045); } /* ════════════════════════════════════════════════ 昼の部カード — 冒険・忍者・金 ════════════════════════════════════════════════ */ .tz-program-card--day { background: linear-gradient(160deg, #0f0c00 0%, #0c0900 100%); border: 1px solid rgba(180,130,20,0.18); border-radius: 0; } /* 上部：金色グラデーション線 */ .tz-program-card--day::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--tz-amber) 20%, var(--tz-amber-light) 50%, var(--tz-amber) 80%, transparent 100%); z-index: 2; } /* 右下：斜め角装飾 */ .tz-program-card--day::after { content: ''; position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; background: linear-gradient(225deg, rgba(200,140,0,0.2) 50%, transparent 50%); pointer-events: none; } .tz-program-card--day:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 26px 64px rgba(140,90,0,0.28); } .tz-program-card--day .tz-program-card__img { aspect-ratio: 4 / 3; } .tz-program-card--day .tz-program-card__img img { filter: brightness(0.78) sepia(0.2); } .tz-program-card--day:hover .tz-program-card__img img { filter: brightness(0.92) sepia(0.08); transform: scale(1.05); } .tz-program-card--day .tz-program-card__img-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 17px), linear-gradient(160deg, #1c1400 0%, #120f00 100%); } .tz-program-card--day .tz-program-card__label { font-family: var(--tz-font-title); font-size: 0.7rem; letter-spacing: 0.38em; color: var(--tz-amber); font-weight: 400; } .tz-program-card--day .tz-program-card__title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 900; color: var(--tz-cream); letter-spacing: 0.08em; line-height: 1.15; text-shadow: 0 0 28px rgba(200,140,0,0.28); } .tz-program-card--day .tz-program-card__subtitle { font-family: var(--tz-font-title); font-size: 0.76rem; color: rgba(200,140,0,0.55); letter-spacing: 0.12em; } .tz-program-card--day .tz-program-card__text { font-size: 0.9rem; color: rgba(210,198,175,0.82); } .tz-program-card--day .tz-program-card__meta { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px solid rgba(180,130,20,0.16); } .tz-program-card--day .tz-program-card__meta li { font-family: var(--tz-font-title); font-size: 0.82rem; color: rgba(200,178,135,0.85); border: 1px solid rgba(180,130,20,0.22); } .tz-program-card--day .tz-program-card__meta li::before { content: '◈'; color: var(--tz-amber); font-size: 0.62rem; flex-shrink: 0; } /* ════════════════════════════════════════════════ 夜の部カード — 管理記録・病院・恐怖 ════════════════════════════════════════════════ */ .tz-program-card--night { background: #060606; border: 1px solid rgba(180,0,0,0.18); border-radius: 0; } /* 上部：赤色グラデーション線 */ .tz-program-card--night::before { content: ''; position: absolute; z-index: 2; top: 0; right: 0; left: 0; height: 2px; padding: 0; background: linear-gradient( 90deg, transparent 0%, rgba(192, 0, 10, 0.78) 20%, var(--tz-red-bright) 50%, rgba(192, 0, 10, 0.78) 80%, transparent 100% ); box-shadow: 0 0 14px rgba(238, 34, 34, 0.24); pointer-events: none; } .tz-program-card--night:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 26px 64px rgba(140,0,0,0.32), 0 0 0 1px rgba(180,0,0,0.3); } .tz-program-card--night .tz-program-card__img { aspect-ratio: 4 / 3; } .tz-program-card--night .tz-program-card__img img { filter: brightness(0.68) contrast(1.12) saturate(0.6); } .tz-program-card--night:hover .tz-program-card__img img { filter: brightness(0.82) contrast(1.05) saturate(0.75); transform: scale(1.04); } .tz-program-card--night .tz-program-card__img-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 17px), linear-gradient(160deg, #0a0000 0%, #050008 100%); } .tz-program-card--night .tz-program-card__label { font-family: var(--tz-font-mono); font-size: 0.62rem; letter-spacing: 0.28em; color: rgba(200,0,0,0.55); text-transform: uppercase; } .tz-program-card--night .tz-program-card__title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 900; color: var(--tz-white); letter-spacing: 0.06em; line-height: 1.15; text-shadow: 0 0 26px rgba(180,0,0,0.3); } .tz-program-card--night .tz-program-card__subtitle { font-family: var(--tz-font-mono); font-size: 0.7rem; color: rgba(150,150,150,0.45); letter-spacing: 0.1em; } .tz-program-card--night .tz-program-card__text { font-size: 0.9rem; color: var(--tz-gray-mid); line-height: 1.9; } .tz-program-card--night .tz-program-card__meta { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px solid rgba(180,0,0,0.14); } .tz-program-card--night .tz-program-card__meta li { font-family: var(--tz-font-mono); font-size: 0.76rem; color: var(--tz-gray-mid); letter-spacing: 0.04em; border: 1px solid rgba(180,0,0,0.22); } .tz-program-card--night .tz-program-card__meta li::before { content: '▌'; color: rgba(200,0,0,0.45); font-size: 0.72rem; flex-shrink: 0; } /* ════════════════════════════════════════════════ 体育館カード — 開放・地域・全員参加 ════════════════════════════════════════════════ */ .tz-program-card--gym { background: #0d0d0d; border: 1px solid rgba(0,200,150,0.1); border-radius: 2px; flex-direction: row; } .tz-program-card--gym:hover { transform: translateY(-5px) scale(1.005); box-shadow: 0 16px 48px rgba(0,200,150,0.16); } .tz-program-card--gym .tz-program-card__img { width: clamp(160px, 34%, 460px); flex-shrink: 0; aspect-ratio: unset; min-height: 200px; } .tz-program-card--gym .tz-program-card__img img { filter: brightness(0.78) saturate(0.75); } .tz-program-card--gym:hover .tz-program-card__img img { filter: brightness(0.92) saturate(0.9); transform: scale(1.04); } .tz-program-card--gym .tz-program-card__img-placeholder { width: 100%; height: 100%; min-height: 200px; background: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 17px), linear-gradient(135deg, #091a12 0%, #0b1210 100%); } .tz-program-card--gym .tz-program-card__body { padding: 28px 30px; justify-content: center; } .tz-program-card--gym .tz-program-card__label { font-size: 0.7rem; letter-spacing: 0.28em; color: var(--tz-teal); font-weight: 400; } .tz-program-card--gym .tz-program-card__title { font-family: var(--tz-font-title); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; color: var(--tz-white); letter-spacing: 0.06em; } .tz-program-card--gym .tz-program-card__subtitle { font-size: 0.78rem; color: rgba(0,200,150,0.45); letter-spacing: 0.1em; } .tz-program-card--gym .tz-program-card__text { font-size: 0.9rem; color: var(--tz-gray-light); } .tz-program-card--gym .tz-program-card__meta { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px solid rgba(0,200,150,0.12); } .tz-program-card--gym .tz-program-card__meta li { font-size: 0.83rem; color: var(--tz-gray-light); border: 1px solid rgba(0,200,150,0.18); } .tz-program-card--gym .tz-program-card__meta li::before { content: '—'; color: var(--tz-teal); font-size: 0.8rem; flex-shrink: 0; } /* ============================================================ ★ INTRO / CONCEPT — 廃校お化け屋敷の世界観を伝える導入 .tz-intro ============================================================ */ .tz-intro { background: #030303; padding: clamp(72px, 13vw, 140px) 0; position: relative; overflow: hidden; text-align: center; } /* 背景の不穏な光（過度にならない程度に） */ .tz-intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(192,24,24,0.1) 0%, transparent 55%); pointer-events: none; } .tz-intro__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-intro .tz-section-eyebrow { display: block; } .tz-intro__title { font-family: var(--tz-font-title); font-size: clamp(1.9rem, 6.5vw, 3.4rem); font-weight: 800; color: var(--tz-white); line-height: 1.4; letter-spacing: 0.06em; margin: 0 0 0.9em; text-shadow: 0 0 40px rgba(192,24,24,0.3); } .tz-intro__body { font-size: clamp(0.92rem, 2vw, 1.05rem); color: rgba(232,228,222,0.68); line-height: 2.1; margin: 0; } /* ============================================================ ★ STORY — 世界観・あらすじ .tz-story ============================================================ */ .tz-story { background: var(--tz-black); padding: var(--tz-gap-v) 0; position: relative; overflow: hidden; } /* 縦書き風アクセント（PCのみ・装飾） */ .tz-story__vertical { display: none; } @media (min-width: 1200px) { .tz-story__vertical { display: block; position: absolute; top: clamp(40px, 6vw, 64px); right: clamp(16px, 3vw, 40px); writing-mode: vertical-rl; text-orientation: upright; font-family: var(--tz-font-title); font-size: 0.95rem; letter-spacing: 0.5em; color: rgba(192,24,24,0.32); margin: 0; z-index: 1; pointer-events: none; } } /* 背景の不穏なグロー */ .tz-story::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 0%, rgba(192,24,24,0.1) 0%, transparent 46%), radial-gradient(ellipse at 90% 100%, rgba(0,0,0,0.5) 0%, transparent 50%); pointer-events: none; } .tz-story__inner { position: relative; z-index: 1; max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-story .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--tz-white); line-height: 1.25; letter-spacing: 0.08em; margin-bottom: 0.6em; display: inline-block; text-shadow: 0 0 32px rgba(192,24,24,0.22); } .tz-story__lead { font-size: clamp(0.92rem, 2vw, 1.05rem); color: rgba(232,228,222,0.72); line-height: 1.95; max-width: 560px; margin-bottom: clamp(48px, 7vw, 80px); } /* ── 各部のストーリー行（交互レイアウト） ── */ .tz-story__rows { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); } .tz-story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; } /* 夜の部は画像を右、テキストを左に反転して視線のリズムを作る */ .tz-story-row--night { direction: rtl; } .tz-story-row--night > * { direction: ltr; } .tz-story-row__visual { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: #0a0a0a; } .tz-story-row__visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .tz-story-row__visual-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(255,255,255,0.02) 23px, rgba(255,255,255,0.02) 24px), repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(255,255,255,0.012) 23px, rgba(255,255,255,0.012) 24px), #0a0a0a; } .tz-story-row__visual-placeholder span { font-family: var(--tz-font-mono); font-size: 0.7rem; letter-spacing: 0.4em; color: rgba(232,228,222,0.22); text-transform: uppercase; } .tz-story-row__label { font-family: var(--tz-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 0.6em; } .tz-story-row__title { font-family: var(--tz-font-title); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; color: var(--tz-white); letter-spacing: 0.06em; line-height: 1.25; margin: 0 0 0.7em; } .tz-story-row__copy { font-size: clamp(0.9rem, 1.9vw, 1rem); color: rgba(232,228,222,0.7); line-height: 2; margin: 0; } /* 昼の部 — 金 */ .tz-story-row--day .tz-story-row__visual { border: 1px solid rgba(180,130,20,0.2); } .tz-story-row--day .tz-story-row__visual img { filter: brightness(0.8) sepia(0.18); } .tz-story-row--day .tz-story-row__label { color: var(--tz-amber); } /* 夜の部 — 赤 */ .tz-story-row--night .tz-story-row__visual { border: 1px solid rgba(180,0,0,0.2); } .tz-story-row--night .tz-story-row__visual img { filter: brightness(0.65) contrast(1.1) saturate(0.6); } .tz-story-row--night .tz-story-row__label { color: var(--tz-red); } /* 体育館 — ティール */ .tz-story-row--gym .tz-story-row__visual { border: 1px solid rgba(0,200,150,0.18); } .tz-story-row--gym .tz-story-row__visual img { filter: brightness(0.85) saturate(0.8); } .tz-story-row--gym .tz-story-row__label { color: var(--tz-teal); } /* ============================================================ ★ GALLERY / VISUAL — 過去開催の記録 .tz-gallery ============================================================ */ .tz-gallery { background: var(--tz-black-soft); padding: var(--tz-gap-v) 0; } .tz-gallery__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-gallery .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.08em; margin-bottom: 0.6em; display: inline-block; } .tz-gallery__lead { font-size: clamp(0.88rem, 1.8vw, 0.98rem); color: var(--tz-gray-mid); margin-bottom: clamp(36px, 6vw, 56px); max-width: 560px; } /* 迫力を出すため、1枚目だけ大きく配置するモザイク風グリッド（JS無効時・JS読み込み前のデフォルト表示。常に縦方向に読める） */ .tz-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(140px, 16vw, 220px); gap: clamp(10px, 1.6vw, 16px); } .tz-gallery__item--0 { grid-column: span 2; grid-row: span 2; } /* ── JSが有効な場合のみ：横スクロール式のスライドショーに変換 ── tz-gallery.js が .is-carousel を付与した場合のみ適用される。 JS無効時はこのルールが一切効かず、上のグリッド表示のまま。 */ .tz-gallery__grid.is-carousel { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: clamp(10px, 1.6vw, 16px); } .tz-gallery__grid.is-carousel::-webkit-scrollbar { display: none; } .tz-gallery__grid.is-carousel .tz-gallery__item, .tz-gallery__grid.is-carousel .tz-gallery__item--0 { grid-column: auto; grid-row: auto; flex: 0 0 min(420px, 78vw); height: clamp(240px, 32vw, 380px); scroll-snap-align: start; } .tz-gallery__item { position: relative; margin: 0; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.06); } .tz-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82) saturate(0.9); transition: transform 0.5s ease, filter 0.3s ease; } .tz-gallery__item:hover img { transform: scale(1.06); filter: brightness(0.95) saturate(1); } .tz-gallery__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255,255,255,0.025) 18px, rgba(255,255,255,0.025) 19px), radial-gradient(ellipse at 50% 50%, rgba(192,24,24,0.06), transparent 65%), #0a0a0a; } .tz-gallery__placeholder span { font-family: var(--tz-font-mono); font-size: 0.6rem; letter-spacing: 0.32em; color: rgba(232,228,222,0.25); } .tz-gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(232,228,222,0.78); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78)); margin: 0; line-height: 1.4; } /* ── カルーセル操作UI（tz-gallery.js が生成） ── */ .tz-gallery__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: clamp(20px, 3vw, 28px); } .tz-gallery__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); color: var(--tz-white); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .tz-gallery__arrow:hover, .tz-gallery__arrow:focus-visible { border-color: var(--tz-red-bright); color: var(--tz-red-bright); background: rgba(192,24,24,0.08); } .tz-gallery__dots { display: flex; gap: 8px; } .tz-gallery__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; padding: 0; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .tz-gallery__dot.is-active { background: var(--tz-red-bright); border-color: var(--tz-red-bright); transform: scale(1.2); } /* ============================================================ ★ CAST / MEMBER — メンバー紹介 .tz-cast ============================================================ */ .tz-cast { background: var(--tz-black); padding: var(--tz-gap-v) 0; border-top: 1px solid rgba(255,255,255,0.05); } .tz-cast__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-cast .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.08em; margin-bottom: 0.6em; display: inline-block; } .tz-cast__lead { font-size: clamp(0.88rem, 1.8vw, 0.98rem); color: var(--tz-gray-mid); margin-bottom: clamp(36px, 6vw, 56px); max-width: 560px; } .tz-cast__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.5vw, 24px); margin-bottom: clamp(36px, 6vw, 56px); } .tz-cast-card { display: block; text-decoration: none !important; background: #0d0d0d; border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .tz-cast-card:hover { border-color: rgba(192,24,24,0.5); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.5); } .tz-cast-card__thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a0a0a; } .tz-cast-card__thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,0,0,0.55) 0%, transparent 55%); pointer-events: none; } .tz-cast-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.3s ease; filter: brightness(0.88) saturate(0.85); } .tz-cast-card:hover .tz-cast-card__img { transform: scale(1.05); filter: brightness(1) saturate(1); } .tz-cast-card__no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 70%, rgba(192,24,24,0.12), transparent 60%), repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(255,255,255,0.02) 22px, rgba(255,255,255,0.02) 23px), #0a0a0a; } .tz-cast-card__no-img span { font-family: var(--tz-font-mono); font-size: 0.56rem; letter-spacing: 0.32em; color: rgba(232,228,222,0.25); text-transform: uppercase; } .tz-cast-card__name { margin: 0; padding: 12px 14px 14px; font-size: 0.92rem; font-weight: 700; color: var(--tz-white); letter-spacing: 0.04em; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); } .tz-cast__empty { font-size: 0.92rem; color: var(--tz-gray-mid); padding: 32px 0; text-align: center; border: 1px dashed rgba(255,255,255,0.12); margin-bottom: clamp(36px, 6vw, 56px); } .tz-cast__footer { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ============================================================ ★ CTA① 運営メンバー募集 .tz-recruit 「見る側から、つくる側へ。」— 大きな余白と一文で印象的に見せる ============================================================ */ .tz-recruit { background: linear-gradient(180deg, #0a0606 0%, #060303 100%); padding: clamp(72px, 12vw, 128px) 0; position: relative; overflow: hidden; text-align: center; border-top: 1px solid rgba(192,24,24,0.15); border-bottom: 1px solid rgba(192,24,24,0.15); } .tz-recruit::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(192,24,24,0.12) 0%, transparent 60%); pointer-events: none; } .tz-recruit__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-recruit__eyebrow { font-family: var(--tz-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4em; color: var(--tz-red-bright); text-transform: uppercase; margin: 0 0 1em; } .tz-recruit__title { font-family: var(--tz-font-title); font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 900; color: var(--tz-white); line-height: 1.35; letter-spacing: 0.05em; margin: 0 0 0.9em; text-shadow: 0 0 40px rgba(192,24,24,0.4); } .tz-recruit__text { font-size: clamp(0.9rem, 2vw, 1rem); color: rgba(232,228,222,0.7); line-height: 2; margin: 0 0 2em; } .tz-recruit__cta { display: flex; justify-content: center; } /* ============================================================ ★ EXPERIENCE — 当日の流れ .tz-experience ============================================================ */ .tz-experience { background: var(--tz-black-soft); padding: var(--tz-gap-v) 0; } .tz-experience__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-experience .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.08em; margin-bottom: 0.6em; display: inline-block; } .tz-experience__lead { font-size: clamp(0.88rem, 1.8vw, 0.98rem); color: var(--tz-gray-mid); margin-bottom: clamp(40px, 6.5vw, 64px); max-width: 560px; } .tz-experience__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.4vw, 28px); position: relative; } /* PC: ステップ同士をつなぐ横線 */ .tz-experience__steps::before { content: ''; position: absolute; top: 1.05em; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(192,24,24,0.35) 10%, rgba(192,24,24,0.35) 90%, transparent); z-index: 0; } .tz-experience-step { position: relative; z-index: 1; } .tz-experience-step__num { display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; margin-bottom: 0.9em; border: 1px solid var(--tz-red); background: var(--tz-black); color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.95rem; font-weight: 700; border-radius: 50%; box-shadow: 0 0 16px rgba(192,24,24,0.3); } .tz-experience-step__title { font-family: var(--tz-font-title); font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.05em; margin: 0 0 0.5em; line-height: 1.4; } .tz-experience-step__text { font-size: 0.86rem; color: var(--tz-gray-light); line-height: 1.85; margin: 0; } /* ============================================================ ③ お知らせ .tz-news — 掲示板・警告 ============================================================ */ .tz-news { background: #0a0a08; padding: clamp(44px, 8vw, 76px) 0; position: relative; overflow: hidden; } /* 上部：警告テープ風ストライプ */ .tz-news::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient( 90deg, var(--tz-red) 0px, var(--tz-red) 20px, #000000 20px, #000000 40px ); opacity: 0.75; } /* 左側：赤縦ライン */ .tz-news::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tz-red); opacity: 0.55; } .tz-news__inner { position: relative; z-index: 1; max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } /* 見出し：スタンプ風 */ .tz-news .tz-section-title { font-family: var(--tz-font-title); font-size: clamp(0.85rem, 2vw, 1.05rem); font-weight: 700; letter-spacing: 0.35em; color: var(--tz-red-bright); border: 2px solid var(--tz-red); display: inline-block; padding: 6px 20px; margin-bottom: 1.5em; background: rgba(192,24,24,0.06); line-height: 1.5; } .tz-news__content { padding-left: 16px; border-left: 1px solid rgba(200,0,0,0.18); } .tz-news__content p { color: var(--tz-gray-light); font-size: clamp(0.9rem, 2vw, 1rem); line-height: 1.95; margin-bottom: 0.8em; } .tz-news__content p:last-child { margin-bottom: 0; } .tz-news__content strong { color: var(--tz-white); } .tz-news__content a { color: var(--tz-teal); text-decoration: underline; } .tz-news__content a:hover { color: var(--tz-white); } /* ============================================================ ⑥ チケット案内 .tz-ticket ============================================================ */ .tz-ticket { background: linear-gradient(180deg, #0e0000 0%, #060000 100%); padding: var(--tz-gap-v) 0; position: relative; overflow: hidden; border-top: 1px solid rgba(180,0,0,0.2); } /* 背景グロー（強化） */ .tz-ticket::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(190,0,0,0.26) 0%, transparent 62%); pointer-events: none; } .tz-ticket__inner { position: relative; z-index: 1; max-width: var(--tz-w); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--tz-gap-h); box-sizing: border-box; text-align: center; } /* TICKET ラベル */ .tz-ticket__eyebrow { font-family: var(--tz-font-mono); font-size: 0.62rem; letter-spacing: 0.42em; color: var(--tz-red); margin-bottom: 0.5em; } /* 見出し */ .tz-ticket__heading { font-family: var(--tz-font-title); font-size: clamp(1.9rem, 5.5vw, 3.1rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.1em; margin-bottom: 0.65em; display: inline-block; position: relative; text-shadow: 0 0 36px rgba(192,24,24,0.3); } .tz-ticket__heading::after { content: ''; display: block; margin-top: 0.4em; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--tz-red) 20%, var(--tz-red-bright) 50%, var(--tz-red) 80%, transparent 100%); } /* リード文 */ .tz-ticket__lead { font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: rgba(232,228,222,0.78); line-height: 1.88; margin-bottom: 2em; } /* 3つのポイント */ .tz-ticket__points { list-style: none; padding: 0; margin: 0 auto 2.2em; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; } .tz-ticket__point { display: flex; align-items: center; gap: 8px; background: rgba(192,24,24,0.1); border: 1px solid rgba(192,24,24,0.32); padding: 11px 20px; font-size: clamp(0.82rem, 1.6vw, 0.92rem); font-weight: 700; color: var(--tz-white); letter-spacing: 0.04em; line-height: 1.4; } .tz-ticket__point-mark { color: var(--tz-red); font-size: 0.55rem; flex-shrink: 0; } /* 本文 */ .tz-ticket__text { font-size: clamp(0.88rem, 1.7vw, 0.98rem); color: var(--tz-gray-light); line-height: 1.9; margin: 0 auto 0.7em; max-width: 640px; } /* 補足注記 */ .tz-ticket__note { font-size: clamp(0.72rem, 1.3vw, 0.8rem); color: var(--tz-gray-mid); margin: 0 auto 2.4em; line-height: 1.7; } /* CTAボタン — チケット導線を最優先で目立たせる */ .tz-ticket__cta .tz-btn--primary { min-width: 280px; padding: 18px 48px; font-size: clamp(1rem, 2.4vw, 1.15rem); animation: tz-ticket-pulse 2.6s ease-in-out infinite; } @keyframes tz-ticket-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(192,24,24,0.4), inset 0 1px 0 rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 48px rgba(238,34,34,0.65), inset 0 1px 0 rgba(255,255,255,0.08); } } @media (prefers-reduced-motion: reduce) { .tz-ticket__cta .tz-btn--primary { animation: none; } } /* ============================================================ ⑦⑧⑨ ご来場前のご案内 .tz-info ============================================================ */ .tz-info { background: var(--tz-black-soft); padding: var(--tz-gap-v) 0; border-top: 1px solid rgba(255,255,255,0.04); } .tz-info__inner { max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } /* 見出し（他セクションと統一しつつサイズを強化） */ .tz-info__heading { font-family: var(--tz-font-title); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.1em; margin-bottom: 1.8em; padding-left: 18px; position: relative; line-height: 1.3; } .tz-info__heading::before { content: ''; position: absolute; left: 0; top: 0.08em; bottom: 0.08em; width: 4px; background: linear-gradient(180deg, var(--tz-red-bright), var(--tz-red)); box-shadow: 0 0 12px rgba(192,24,24,0.5); } /* 3カードグリッド */ .tz-info__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 24px); } /* カード */ .tz-info__card { background: #0d0d0d; border: 1px solid rgba(255,255,255,0.06); border-top: 2px solid rgba(255,255,255,0.1); padding: clamp(26px, 4.5vw, 40px) clamp(20px, 3vw, 28px); display: flex; flex-direction: column; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .tz-info__card:hover { border-color: rgba(192,24,24,0.4); border-top-color: var(--tz-red); box-shadow: 0 14px 40px rgba(0,0,0,0.5); transform: translateY(-4px); } /* カードアイコン */ .tz-info__card-icon { width: 50px; height: 50px; margin-bottom: 1.3em; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(192,24,24,0.4); background: rgba(192,24,24,0.08); color: var(--tz-red); font-family: var(--tz-font-title); font-size: 1.2rem; flex-shrink: 0; letter-spacing: 0; border-radius: 50%; transition: box-shadow 0.25s ease; } .tz-info__card:hover .tz-info__card-icon { box-shadow: 0 0 22px rgba(192,24,24,0.4); } /* カードタイトル */ .tz-info__card-title { font-family: var(--tz-font-title); font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.06em; margin-bottom: 0.8em; line-height: 1.3; } /* カード本文 */ .tz-info__card-text { font-size: clamp(0.85rem, 1.6vw, 0.92rem); color: var(--tz-gray-light); line-height: 1.85; margin-bottom: 1.6em; flex: 1; } /* カード内ボタン：カード幅いっぱい */ .tz-info__card .tz-btn { width: 100%; min-width: unset; font-size: clamp(0.8rem, 1.5vw, 0.88rem); padding: 13px 16px; margin-top: auto; } /* ============================================================ ④ CTA .tz-cta ============================================================ */ .tz-cta { padding: var(--tz-gap-v) 0; background: linear-gradient(180deg, #0e0000 0%, #090000 100%); border-top: 1px solid rgba(180,0,0,0.15); position: relative; overflow: hidden; } /* 斜め光の演出（強化） */ .tz-cta::before { content: ''; position: absolute; top: -50%; left: 28%; width: 44%; height: 200%; background: linear-gradient(180deg, transparent, rgba(190,0,0,0.09), transparent); transform: rotate(28deg); pointer-events: none; } .tz-cta__inner { position: relative; z-index: 1; max-width: var(--tz-w); margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } /* 締めのセクションらしく、枠で囲んで印象を強める */ .tz-cta__box { text-align: center; max-width: 680px; margin: 0 auto; padding: clamp(40px, 7vw, 64px) clamp(24px, 5vw, 48px); border: 1px solid rgba(192,24,24,0.22); background: radial-gradient(ellipse at 50% 0%, rgba(192,24,24,0.07), transparent 65%); } .tz-cta__eyebrow { font-family: var(--tz-font-mono); font-size: clamp(0.64rem, 1.4vw, 0.74rem); font-weight: 700; letter-spacing: 0.4em; color: var(--tz-red); text-transform: uppercase; margin: 0 0 0.8em; } .tz-cta__title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; color: var(--tz-white); letter-spacing: 0.07em; margin-bottom: 0.5em; text-shadow: 0 0 32px rgba(192,24,24,0.28); } .tz-cta__text { font-size: clamp(0.92rem, 2vw, 1.05rem); color: var(--tz-gray-light); margin-bottom: 2.2em; line-height: 1.9; } .tz-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* ============================================================ ★ CTA② 協賛募集＆お問い合わせ（フッター直前の最終導線） .tz-final-cta ============================================================ */ .tz-final-cta { background: linear-gradient(180deg, #100303 0%, #050000 100%); padding: clamp(72px, 12vw, 120px) 0; position: relative; overflow: hidden; text-align: center; border-top: 2px solid rgba(192,24,24,0.3); } .tz-final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(192,24,24,0.16) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(192,24,24,0.1) 0%, transparent 50%); pointer-events: none; } .tz-final-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 var(--tz-gap-h); box-sizing: border-box; } .tz-final-cta__eyebrow { font-family: var(--tz-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.36em; color: var(--tz-red-bright); text-transform: uppercase; margin: 0 0 1em; } .tz-final-cta__title { font-family: var(--tz-font-title); font-size: clamp(1.7rem, 5.5vw, 2.7rem); font-weight: 800; color: var(--tz-white); line-height: 1.45; letter-spacing: 0.05em; margin: 0 0 0.8em; text-shadow: 0 0 32px rgba(192,24,24,0.32); } .tz-final-cta__text { font-size: clamp(0.9rem, 2vw, 1rem); color: rgba(232,228,222,0.65); line-height: 1.95; margin: 0 0 2em; } .tz-final-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* ──────────────────────────────────────────────────────────── .tz-reveal の段差表示（カードグリッドを少しずつ遅延させる） tz-ui.js の IntersectionObserver と組み合わせて使用。 ──────────────────────────────────────────────────────────── */ .tz-program-card.tz-reveal:nth-child(2) { transition-delay: 0.1s; } .tz-program-card.tz-reveal:nth-child(3) { transition-delay: 0.2s; } .tz-info__card.tz-reveal:nth-child(2) { transition-delay: 0.1s; } .tz-info__card.tz-reveal:nth-child(3) { transition-delay: 0.2s; } .tz-story-row.tz-reveal:nth-child(2) { transition-delay: 0.08s; } .tz-story-row.tz-reveal:nth-child(3) { transition-delay: 0.16s; } .tz-gallery__item.tz-reveal:nth-child(2) { transition-delay: 0.06s; } .tz-gallery__item.tz-reveal:nth-child(3) { transition-delay: 0.12s; } .tz-gallery__item.tz-reveal:nth-child(4) { transition-delay: 0.18s; } .tz-gallery__item.tz-reveal:nth-child(5) { transition-delay: 0.24s; } .tz-gallery__item.tz-reveal:nth-child(6) { transition-delay: 0.3s; } .tz-cast-card.tz-reveal:nth-child(2) { transition-delay: 0.08s; } .tz-cast-card.tz-reveal:nth-child(3) { transition-delay: 0.16s; } .tz-cast-card.tz-reveal:nth-child(4) { transition-delay: 0.24s; } .tz-experience-step.tz-reveal:nth-child(2) { transition-delay: 0.08s; } .tz-experience-step.tz-reveal:nth-child(3) { transition-delay: 0.16s; } .tz-experience-step.tz-reveal:nth-child(4) { transition-delay: 0.24s; } .tz-experience-step.tz-reveal:nth-child(5) { transition-delay: 0.32s; } .tz-info__card.tz-reveal:nth-child(4) { transition-delay: 0.3s; } /* ============================================================ レスポンシブ — タブレット (max-width: 900px) ============================================================ */ @media (max-width: 900px) { /* プログラムカード：縦積み */ .tz-program__cards { grid-template-columns: 1fr; } .tz-program-card--gym { grid-column: 1; flex-direction: column; } .tz-program-card--gym .tz-program-card__img { width: 100%; aspect-ratio: 16 / 9; min-height: unset; } /* STORY：画像とテキストを縦積みに（夜の部の反転も解除） */ .tz-story-row, .tz-story-row--night { grid-template-columns: 1fr; direction: ltr; } /* GALLERY：2カラムに圧縮、先頭タイルの強調は維持 */ .tz-gallery__grid { grid-template-columns: repeat(2, 1fr); } /* CAST：2カラム */ .tz-cast__grid { grid-template-columns: repeat(2, 1fr); } /* EXPERIENCE：2カラム・接続線は非表示 */ .tz-experience__steps { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px); } .tz-experience__steps::before { display: none; } /* ご来場前のご案内：1カラム */ .tz-info__cards { grid-template-columns: 1fr; } } /* ============================================================ レスポンシブ — スマホ (max-width: 767px) ============================================================ */ @media (max-width: 767px) { /* SP 画像は全面で object-position を調整 */ .tz-hero-panel .tz-hero-panel__image { object-position: center center; } } /* ============================================================ レスポンシブ — 小型スマホ (max-width: 599px) ============================================================ */ @media (max-width: 599px) { /* ヒーロー CTA：縦並び・全幅タップ */ .tz-hero__cta { flex-direction: column; } .tz-hero__button { width: 100%; min-width: unset; padding: 16px 20px; } /* CTA ボタン */ .tz-cta__btns { flex-direction: column; align-items: center; } .tz-btn { width: 100%; max-width: 320px; min-width: unset; } /* チケットポイント：縦並び */ .tz-ticket__points { flex-direction: column; align-items: stretch; } .tz-ticket__point { justify-content: center; } /* ご来場前カード内ボタン：全幅 */ .tz-info__card .tz-btn { width: 100%; max-width: unset; } /* GALLERY：極小画面は1カラムに（先頭タイルの強調は解除） */ .tz-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 50vw, 260px); } .tz-gallery__item--0 { grid-column: span 1; grid-row: span 1; } /* CAST：極小画面は1カラム */ .tz-cast__grid { grid-template-columns: 1fr; } .tz-cast-card__thumb { aspect-ratio: 16 / 10; } /* EXPERIENCE：極小画面は1カラム縦並び */ .tz-experience__steps { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================ アクセシビリティ ============================================================ */ .tz-front a:focus-visible, .tz-front button:focus-visible { outline: 2px solid var(--tz-teal); outline-offset: 3px; border-radius: 2px; } /* ============================================================ Phase 1 — Header / Hero / News / Intro visual refresh ============================================================ */ .tz-front { background: radial-gradient(circle at 12% 0%, rgba(192, 24, 24, 0.18), transparent 34rem), radial-gradient(circle at 88% 20%, rgba(95, 0, 20, 0.16), transparent 30rem), linear-gradient(180deg, #020202 0%, #080606 38%, #030303 100%); } #body_wrap.home #header.l-header { background: linear-gradient(180deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 0, 0, 0.9) 100%) !important; border-bottom-color: rgba(238, 34, 34, 0.24) !important; } #body_wrap.home #fix_header { background-color: rgba(4, 4, 4, 0.98) !important; border-bottom-color: rgba(238, 34, 34, 0.26) !important; } .tz-hero { min-height: 100vh; min-height: 100svh; isolation: isolate; } .tz-hero::before { background: radial-gradient(circle at 14% 24%, rgba(238, 34, 34, 0.18), transparent 28rem), radial-gradient(circle at 82% 14%, rgba(192, 24, 24, 0.16), transparent 24rem), linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.72) 100%); z-index: 1; } .tz-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(192, 24, 24, 0.42) 0 1px, transparent 1px 100%), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.96) 100%); background-size: 96px 100%, 100% 100%; opacity: 0.32; mix-blend-mode: screen; } .tz-hero-panel { background: radial-gradient(circle at 20% 24%, rgba(192, 24, 24, 0.22), transparent 28rem), linear-gradient(145deg, #160303 0%, #020202 62%, #0b0000 100%); } .tz-hero-panel__image { filter: brightness(0.54) contrast(1.16) saturate(0.82); transform: scale(1.025); object-position: center center; } .tz-hero-panel::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.76) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, transparent 36%, rgba(0, 0, 0, 0.98) 100%); } .tz-hero__inner { width: min(100%, 1320px); margin: 0 auto; align-items: flex-start; justify-content: center; text-align: left; padding: clamp(104px, 13vh, 150px) clamp(22px, 5vw, 72px) clamp(74px, 10vh, 118px); } .tz-hero__copy { max-width: min(840px, 100%); margin: 0; } .tz-hero__kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(18px, 3vw, 26px); color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: clamp(0.68rem, 1.1vw, 0.82rem); font-weight: 700; letter-spacing: 0.34em; line-height: 1.3; text-transform: uppercase; text-shadow: 0 0 18px rgba(238, 34, 34, 0.42); } .tz-hero__kicker::before { content: ''; width: clamp(34px, 5vw, 72px); height: 1px; background: linear-gradient(90deg, var(--tz-red-bright), transparent); box-shadow: 0 0 12px rgba(238, 34, 34, 0.65); } .tz-hero__date { display: inline-flex; margin: 0 0 clamp(12px, 2vw, 20px); padding: 7px 12px; border: 1px solid rgba(238, 34, 34, 0.42); background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.84); letter-spacing: 0.14em; } .tz-hero__title { margin: 0; font-size: clamp(3.2rem, 10.4vw, 7.5rem); line-height: 0.92; letter-spacing: 0.025em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 0 52px rgba(192, 24, 24, 0.28); } .tz-hero__title span { display: block; } .tz-hero__title span + span { margin-top: 0.06em; color: rgba(255, 255, 255, 0.92); } .tz-hero__title span span { display: inline; font-size: .75em; } .tz-hero__title::after { margin: clamp(20px, 3vw, 30px) 0 0; width: min(230px, 48vw); height: 2px; background: linear-gradient(90deg, var(--tz-red-bright), rgba(238, 34, 34, 0.2), transparent); } .tz-hero__lead { max-width: 680px; margin: clamp(18px, 3vw, 28px) 0 0; color: rgba(255, 255, 255, 0.84); font-size: clamp(1rem, 1.8vw, 1.26rem); line-height: 2; letter-spacing: 0.04em; } .tz-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; } .tz-hero__meta-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; min-width: min(100%, 250px); } .tz-hero__meta dt { color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; } .tz-hero__meta dd { margin: 0; color: rgba(232, 228, 222, 0.86); font-size: clamp(0.88rem, 1.4vw, 1rem); font-weight: 700; letter-spacing: 0.05em; } .tz-hero__cta { justify-content: flex-start; margin-top: clamp(28px, 4vw, 44px); } .tz-hero__button { border-radius: 999px; min-width: 230px; padding: 17px 32px; } .tz-hero__button--primary { background: linear-gradient(90deg, #900b0b 0%, var(--tz-red) 58%, #f23131 100%); border-color: rgba(238, 34, 34, 0.78); } .tz-hero__button--secondary { background: rgba(0, 0, 0, 0.48); border-color: rgba(232, 228, 222, 0.32); } .tz-hero__scroll { left: auto; right: clamp(18px, 4vw, 58px); bottom: clamp(20px, 4vh, 42px); transform: none; } .tz-posts { position: relative; padding: 0; background: linear-gradient(90deg, rgba(70, 0, 0, 0.56), rgba(5, 5, 5, 0.96) 28%, rgba(5, 5, 5, 0.98) 100%); border-top: 1px solid rgba(238, 34, 34, 0.42); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .tz-posts::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tz-red-bright); box-shadow: 0 0 18px rgba(238, 34, 34, 0.68); } .tz-posts__inner { max-width: 1320px; min-height: 86px; padding: 16px clamp(20px, 5vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 28px); } .tz-posts__label { padding: 7px 10px; border: 1px solid rgba(238, 34, 34, 0.44); background: rgba(192, 24, 24, 0.12); font-size: 0.66rem; line-height: 1; } .tz-posts__heading { display: none; } .tz-posts__list { margin: 0; display: grid; gap: 0; } .tz-posts__item { border-top: 1px solid rgba(255, 255, 255, 0.055); } .tz-posts__item:first-child { border-top: none; } .tz-posts__link { padding: 0.42em 0; } .tz-posts__link:hover { padding-left: 10px; background: linear-gradient(90deg, rgba(192, 24, 24, 0.13), transparent); } .tz-posts__title { color: rgba(232, 228, 222, 0.88); } .tz-posts__link:hover .tz-posts__title { color: #fff; } .tz-posts__footer { margin: 0; flex: initial; text-align: right; } .tz-posts__footer .tz-btn { min-width: auto; padding: 10px 18px; border-width: 1px; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.09em; } .tz-intro { min-height: clamp(560px, 78vh, 820px); padding: clamp(86px, 12vw, 150px) 0; text-align: left; background: radial-gradient(circle at 78% 14%, rgba(192, 24, 24, 0.2), transparent 28rem), linear-gradient(180deg, #030303 0%, #090505 52%, #020202 100%); } .tz-intro::before { background: linear-gradient(90deg, rgba(238, 34, 34, 0.16) 0 1px, transparent 1px 100%), radial-gradient(ellipse at 20% 10%, rgba(192, 24, 24, 0.16), transparent 44%); background-size: 112px 100%, 100% 100%; opacity: 0.38; } .tz-intro__inner { max-width: 1320px; min-height: 420px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr); align-items: center; gap: clamp(34px, 7vw, 96px); padding: 0 clamp(22px, 5vw, 72px); } .tz-intro__text { position: relative; z-index: 1; } .tz-intro__title { max-width: 900px; margin-bottom: clamp(20px, 3vw, 34px); font-size: clamp(2.55rem, 7vw, 5.6rem); line-height: 1.05; letter-spacing: 0.025em; } .tz-intro__lead { max-width: 760px; margin: 0 0 1.15em; color: rgba(255, 255, 255, 0.9); font-family: var(--tz-font-title); font-size: clamp(1.12rem, 2.6vw, 1.72rem); line-height: 1.8; letter-spacing: 0.05em; } .tz-intro__body { max-width: 720px; color: rgba(232, 228, 222, 0.7); font-size: clamp(0.96rem, 1.8vw, 1.08rem); line-height: 2.15; } .tz-intro__visual { position: relative; min-height: clamp(320px, 42vw, 540px); border: 1px solid rgba(232, 228, 222, 0.14); background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px), radial-gradient(circle at 50% 22%, rgba(192, 24, 24, 0.22), transparent 46%), linear-gradient(160deg, #100404 0%, #030303 72%); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.035); font-size: 0; overflow: hidden; } .tz-intro__visual::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(238, 34, 34, 0.18); } .tz-intro__visual::after { content: ''; position: absolute; inset: 0; /*background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82)), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);*/ opacity: 0.5; } .tz-intro__visual span, .tz-intro__visual small { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); font-family: var(--tz-font-mono); text-align: center; white-space: nowrap; } .tz-intro__visual span { top: 48%; color: rgba(232, 228, 222, 0.4); font-size: clamp(0.78rem, 1.3vw, 0.95rem); font-weight: 700; letter-spacing: 0.34em; } .tz-intro__visual small { top: calc(48% + 34px); color: rgba(238, 34, 34, 0.58); font-size: 0.62rem; letter-spacing: 0.2em; } @media (max-width: 900px) { .tz-hero__inner { justify-content: flex-end; padding-bottom: clamp(86px, 13vh, 132px); } .tz-posts__inner { grid-template-columns: auto 1fr; } .tz-posts__list, .tz-posts__footer { grid-column: 1 / -1; } .tz-posts__footer { text-align: left; } .tz-intro__inner { grid-template-columns: 1fr; } .tz-intro__visual { min-height: clamp(220px, 58vw, 360px); } } @media (max-width: 599px) { .tz-hero__inner { text-align: left; padding: clamp(92px, 15vh, 118px) 20px clamp(82px, 12vh, 108px); } .tz-hero__kicker { display: flex; width: 100%; font-size: 0.62rem; letter-spacing: 0.18em; } .tz-hero__title { font-size: clamp(2.7rem, 17vw, 3.6rem); line-height: 0.96; letter-spacing: 0.02em; } .tz-hero__lead { font-size: 0.94rem; line-height: 1.85; } .tz-hero__meta { display: grid; gap: 8px; } .tz-hero__meta-item { grid-template-columns: 58px 1fr; } .tz-hero__cta { width: 100%; } .tz-hero__button { min-width: 0; } .tz-hero__scroll { right: 18px; } .tz-posts__inner { min-height: unset; padding: 18px 20px 20px; } .tz-posts__link { display: grid; gap: 3px; } .tz-intro { min-height: unset; padding: 78px 0 86px; } .tz-intro__inner { padding: 0 20px; gap: 30px; } .tz-intro__title { font-size: clamp(2.05rem, 11vw, 3.2rem); line-height: 1.18; } .tz-intro__lead { font-size: 1.05rem; line-height: 1.85; } .tz-intro__body { font-size: 0.94rem; line-height: 2; } } /* ============================================================ Phase 2 — Program / Story / Experience / Ticket / Gallery ============================================================ */ .tz-front .tz-btn, .tz-hero__button, .tz-link-arrow { gap: 0.65em; } .tz-front .tz-btn::after, .tz-hero__button::after, .tz-link-arrow::after { content: '→'; display: inline-block; flex: 0 0 auto; font-family: var(--tz-font-mono); line-height: 1; transform: translateX(0); transition: transform 0.18s ease; } .tz-front .tz-btn:hover::after, .tz-front .tz-btn:focus-visible::after, .tz-hero__button:hover::after, .tz-hero__button:focus-visible::after, .tz-link-arrow:hover::after, .tz-link-arrow:focus-visible::after { transform: translateX(4px); } .tz-btn--ghost { background: rgba(255, 255, 255, 0.035); color: var(--tz-white) !important; border-color: rgba(232, 228, 222, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .tz-btn--ghost:hover, .tz-btn--ghost:focus-visible { color: #fff !important; border-color: rgba(238, 34, 34, 0.58); background: rgba(192, 24, 24, 0.16); box-shadow: 0 0 22px rgba(192, 24, 24, 0.24); } .tz-link-arrow { display: inline-flex; align-items: center; color: var(--tz-red-bright) !important; font-family: var(--tz-font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-decoration: none !important; text-transform: uppercase; } .tz-link-arrow:hover, .tz-link-arrow:focus-visible { color: #fff !important; } .tz-section-head { max-width: 780px; margin-bottom: clamp(38px, 6vw, 70px); } .tz-section-head .tz-section-title { margin-bottom: 0.42em; } .tz-program { background: radial-gradient(circle at 18% 0%, rgba(192, 24, 24, 0.14), transparent 32rem), linear-gradient(180deg, #050303 0%, #090707 48%, #030303 100%); border-top: 1px solid rgba(238, 34, 34, 0.12); } .tz-program__inner, .tz-story__inner, .tz-experience__inner, .tz-ticket__inner, .tz-gallery__inner { max-width: 1320px; } .tz-program .tz-section-title, .tz-story .tz-section-title, .tz-experience .tz-section-title, .tz-gallery .tz-section-title { font-size: clamp(2.2rem, 6.6vw, 5.4rem); line-height: 1.02; letter-spacing: 0.03em; } .tz-program__lead, .tz-story__lead, .tz-experience__lead, .tz-gallery__lead { max-width: 720px; color: rgba(232, 228, 222, 0.7); font-size: clamp(0.96rem, 1.7vw, 1.08rem); line-height: 2; margin: 0; } .tz-program__cards { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr); align-items: stretch; } .tz-program-card { min-height: 100%; border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%), #070707; } .tz-program-card--gym { min-height: clamp(260px, 24vw, 340px); } .tz-program-card__img { margin: 24px 0 0 0; background: #080808; } .tz-program-card--day .tz-program-card__img, .tz-program-card--night .tz-program-card__img { aspect-ratio: 16 / 10; } .tz-program-card__img-placeholder { position: relative; width: 100%; min-height: 100%; flex-direction: column; overflow: hidden; } .tz-program-card__img-placeholder::before, .tz-story-row__visual-placeholder::before, .tz-gallery__placeholder::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(232, 228, 222, 0.1); pointer-events: none; } .tz-program-card__img-placeholder::after, .tz-story-row__visual-placeholder::after, .tz-gallery__placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px); opacity: 0.44; pointer-events: none; } .tz-program-card__img-placeholder span, .tz-story-row__visual-placeholder span, .tz-gallery__placeholder span { position: relative; z-index: 1; } .tz-program-card__img-placeholder small, .tz-story-row__visual-placeholder small, .tz-gallery__placeholder small { position: relative; z-index: 1; display: block; margin-top: 10px; color: rgba(238, 34, 34, 0.52); font-family: var(--tz-font-mono); font-size: 0.58rem; letter-spacing: 0.22em; } .tz-program-card__body { padding: clamp(24px, 3.8vw, 42px); } .tz-program-card__title { font-size: clamp(2rem, 4vw, 3.35rem); } .tz-program-card--gym .tz-program-card__title { font-size: clamp(1.45rem, 2.6vw, 2.1rem); } .tz-program-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 1.25em; } .tz-program-card__facts div { padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); } .tz-program-card__facts dt { color: rgba(232, 228, 222, 0.44); font-family: var(--tz-font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; margin-bottom: 4px; } .tz-program-card__facts dd { margin: 0; color: var(--tz-white); font-size: 0.82rem; font-weight: 700; line-height: 1.45; } .tz-program-card .tz-btn { align-self: flex-start; min-width: 0; margin-top: auto; padding: 12px 20px; font-size: 0.82rem; } .tz-story { background: radial-gradient(circle at 82% 8%, rgba(192, 24, 24, 0.17), transparent 30rem), linear-gradient(180deg, #030303 0%, #0b0505 52%, #020202 100%); } .tz-story__rows { gap: clamp(50px, 8vw, 94px); } .tz-story-row { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); } .tz-story-row--night { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); } .tz-story-row__visual { margin: 0; min-height: clamp(260px, 31vw, 430px); box-shadow: 0 28px 76px rgba(0, 0, 0, 0.46); } .tz-story-row__visual-placeholder { position: relative; flex-direction: column; } .tz-story-row__text { max-width: 620px; } .tz-story-row__title { font-size: clamp(1.8rem, 4.2vw, 3.15rem); } .tz-story-row__copy { margin-bottom: 1.55em; } .tz-story__footer { margin-top: clamp(38px, 6vw, 70px); } .tz-experience { background: linear-gradient(180deg, #080606 0%, #030303 100%); border-top: 1px solid rgba(255, 255, 255, 0.055); } .tz-experience__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); } .tz-experience__steps::before { top: 34px; left: 4%; right: 4%; background: linear-gradient(90deg, transparent, rgba(238, 34, 34, 0.46), transparent); } .tz-experience-step { padding: clamp(18px, 2.4vw, 26px); border: 1px solid rgba(255, 255, 255, 0.075); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), #090909; } .tz-experience-step::after { content: '→'; position: absolute; top: 26px; right: clamp(-21px, -1.6vw, -12px); color: rgba(238, 34, 34, 0.62); font-family: var(--tz-font-mono); font-size: 1.25rem; } .tz-experience-step:last-child::after { content: none; } .tz-experience-step__num { width: 42px; height: 42px; margin-bottom: 1.25em; } .tz-ticket { background: radial-gradient(circle at 72% 10%, rgba(238, 34, 34, 0.22), transparent 28rem), linear-gradient(135deg, #160202 0%, #060000 58%, #020202 100%); } .tz-ticket__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.72fr); align-items: center; gap: clamp(34px, 6vw, 82px); text-align: left; } .tz-ticket__heading { font-size: clamp(2.6rem, 7.2vw, 6.2rem); line-height: 1.02; letter-spacing: 0.04em; } .tz-ticket__heading::after { margin-right: auto; margin-left: 0; } .tz-ticket__lead { max-width: 700px; } .tz-ticket__text { max-width: 700px; margin-left: 0; margin-right: 0; } .tz-ticket__cta { margin-top: clamp(26px, 4vw, 42px); } .tz-ticket__panel { margin: 0; padding: clamp(24px, 4vw, 40px); border: 1px solid rgba(238, 34, 34, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)), rgba(0, 0, 0, 0.32); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42); } .tz-ticket__panel div { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .tz-ticket__panel div:first-child { padding-top: 0; border-top: none; } .tz-ticket__panel div:last-child { padding-bottom: 0; } .tz-ticket__panel dt { color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 6px; } .tz-ticket__panel dd { margin: 0; color: rgba(232, 228, 222, 0.9); font-size: clamp(0.94rem, 1.6vw, 1.08rem); font-weight: 700; line-height: 1.7; } .tz-gallery { background: radial-gradient(circle at 12% 8%, rgba(192, 24, 24, 0.14), transparent 28rem), linear-gradient(180deg, #030303 0%, #0a0808 100%); } .tz-gallery__grid { grid-auto-rows: clamp(190px, 18vw, 280px); } .tz-gallery__grid.is-carousel .tz-gallery__item, .tz-gallery__grid.is-carousel .tz-gallery__item--0 { flex-basis: min(520px, 82vw); height: clamp(280px, 34vw, 440px); } .tz-gallery__item { border-color: rgba(232, 228, 222, 0.1); background: #080808; } .tz-gallery__placeholder { position: relative; flex-direction: column; background: radial-gradient(circle at 50% 18%, rgba(192, 24, 24, 0.22), transparent 46%), linear-gradient(160deg, #100303 0%, #040404 76%); } .tz-gallery__controls { justify-content: flex-end; margin-top: 22px; } .tz-gallery__arrow { border-radius: 999px; font-family: var(--tz-font-mono); font-size: 1.3rem; } .tz-gallery__arrow:hover, .tz-gallery__arrow:focus-visible { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .tz-front .tz-btn::after, .tz-hero__button::after, .tz-link-arrow::after, .tz-gallery__arrow { transition: none; } .tz-front .tz-btn:hover::after, .tz-front .tz-btn:focus-visible::after, .tz-hero__button:hover::after, .tz-hero__button:focus-visible::after, .tz-link-arrow:hover::after, .tz-link-arrow:focus-visible::after { transform: none; } } @media (max-width: 900px) { .tz-program__cards, .tz-story-row, .tz-story-row--night, .tz-ticket__inner { grid-template-columns: 1fr; } .tz-story-row--night { direction: ltr; } .tz-experience__steps { grid-template-columns: 1fr; } .tz-experience__steps::before { display: none; } .tz-experience-step::after { top: auto; right: auto; left: 28px; bottom: -24px; transform: rotate(90deg); } .tz-ticket__inner { text-align: left; } } @media (max-width: 599px) { .tz-program .tz-section-title, .tz-story .tz-section-title, .tz-experience .tz-section-title, .tz-gallery .tz-section-title, .tz-ticket__heading { font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1.12; } .tz-program-card__facts { grid-template-columns: 1fr; } .tz-program-card .tz-btn, .tz-ticket__cta .tz-btn { width: 100%; } .tz-story-row__visual { min-height: clamp(210px, 62vw, 320px); } .tz-ticket__panel { padding: 22px; } .tz-gallery__controls { justify-content: center; } } /* ============================================================ Phase 3 — Cast / Visitor Guide / CTA Finale ============================================================ */ .tz-cast { position: relative; overflow: hidden; background: radial-gradient(circle at 18% 0%, rgba(192, 24, 24, 0.18), transparent 36%), linear-gradient(180deg, #070707 0%, #100606 58%, #070303 100%); } .tz-cast::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); pointer-events: none; } .tz-cast__inner, .tz-info__inner, .tz-recruit__inner, .tz-final-cta__inner { position: relative; z-index: 1; } .tz-cast .tz-section-head { max-width: 760px; } .tz-cast .tz-section-title { font-size: 4.25rem; line-height: 1.05; letter-spacing: 0.04em; margin-bottom: 0.28em; } .tz-cast__lead { color: rgba(232, 228, 222, 0.76); line-height: 1.9; max-width: 680px; } .tz-cast__grid { align-items: stretch; } .tz-cast-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%), #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.11); color: var(--tz-white); } .tz-cast-card::before { content: ''; position: absolute; inset: 0; border-top: 3px solid rgba(238, 34, 34, 0.68); pointer-events: none; } .tz-cast-card__thumb { aspect-ratio: 3 / 4; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tz-cast-card__no-img { flex-direction: column; gap: 8px; background: radial-gradient(circle at 50% 24%, rgba(238, 34, 34, 0.16), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 45%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px), #080808; } .tz-cast-card__no-img span, .tz-cast-card__no-img small { position: relative; z-index: 1; font-family: var(--tz-font-mono); text-transform: uppercase; } .tz-cast-card__no-img span { color: rgba(232, 228, 222, 0.64); font-size: 0.68rem; letter-spacing: 0.28em; } .tz-cast-card__no-img small { color: rgba(238, 34, 34, 0.72); font-size: 0.58rem; letter-spacing: 0.22em; } .tz-cast-card__body { display: grid; gap: 8px; padding: 18px 18px 20px; } .tz-cast-card__role { margin: 0; color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .tz-cast-card__name { margin: 0; padding: 0; border-top: 0; color: var(--tz-white); font-size: 1.2rem; line-height: 1.35; text-align: left; } .tz-cast-card__copy { margin: 0; color: rgba(232, 228, 222, 0.66); font-size: 0.9rem; line-height: 1.75; } .tz-cast-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .tz-cast-card__more::after { content: '→'; transition: transform 0.18s ease; } .tz-cast-card:hover .tz-cast-card__more::after, .tz-cast-card:focus-visible .tz-cast-card__more::after { transform: translateX(4px); } .tz-cast__footer { justify-content: flex-start; } .tz-info { position: relative; background: linear-gradient(180deg, #0b0b0b 0%, #111 100%); } .tz-info__lead { max-width: 680px; margin: 0 0 40px; color: rgba(232, 228, 222, 0.7); line-height: 1.9; } .tz-info__cards { align-items: stretch; } .tz-info__card { position: relative; min-height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%), #101010; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid rgba(238, 34, 34, 0.55); } .tz-info__card-mark { margin: 0 0 22px; color: rgba(238, 34, 34, 0.72); font-family: var(--tz-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; } .tz-info__card .tz-link-arrow { margin-top: auto; color: var(--tz-white); } .tz-recruit { text-align: left; background: radial-gradient(circle at 82% 42%, rgba(238, 34, 34, 0.2), transparent 34%), linear-gradient(135deg, #100303 0%, #050505 54%, #150606 100%); } .tz-recruit__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr); align-items: center; gap: 48px; max-width: var(--tz-w); } .tz-recruit__title { font-size: 4.55rem; line-height: 1.12; } .tz-recruit__text { max-width: 620px; } .tz-recruit__cta { justify-content: flex-start; } .tz-recruit__panel { padding: 30px; background: rgba(0, 0, 0, 0.34); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42); } .tz-recruit__panel p { margin: 0 0 18px; color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; } .tz-recruit__panel ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .tz-recruit__panel li { display: flex; align-items: center; gap: 10px; color: rgba(232, 228, 222, 0.84); font-weight: 700; } .tz-recruit__panel li::before { content: ''; width: 8px; height: 8px; background: var(--tz-red-bright); box-shadow: 0 0 16px rgba(238, 34, 34, 0.62); flex: 0 0 auto; } .tz-final-cta { background: radial-gradient(circle at 50% 0%, rgba(238, 34, 34, 0.2), transparent 36%), linear-gradient(180deg, #090202 0%, #050000 100%); } .tz-final-cta__inner { max-width: var(--tz-w); } .tz-final-cta__head { max-width: 760px; margin: 0 auto 42px; text-align: center; } .tz-final-cta__title { font-size: 3.7rem; line-height: 1.16; } .tz-final-cta__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .tz-final-cta-card { display: flex; flex-direction: column; min-height: 100%; padding: 34px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 42%), rgba(8, 8, 8, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); text-align: left; } .tz-final-cta-card__label { margin: 0 0 18px; color: var(--tz-red-bright); font-family: var(--tz-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; } .tz-final-cta-card__title { margin: 0 0 14px; color: var(--tz-white); font-family: var(--tz-font-title); font-size: 1.55rem; line-height: 1.35; } .tz-final-cta-card__text { flex: 1; margin: 0 0 26px; color: rgba(232, 228, 222, 0.68); line-height: 1.9; } @media (prefers-reduced-motion: reduce) { .tz-cast-card__more::after { transition: none; } .tz-cast-card:hover .tz-cast-card__more::after, .tz-cast-card:focus-visible .tz-cast-card__more::after { transform: none; } } @media (max-width: 1024px) { .tz-cast .tz-section-title { font-size: 3.2rem; } .tz-recruit__title, .tz-final-cta__title { font-size: 3rem; } } @media (max-width: 900px) { .tz-recruit__inner, .tz-final-cta__cards { grid-template-columns: 1fr; } .tz-recruit__inner { gap: 32px; } .tz-cast__footer { justify-content: center; } } @media (max-width: 599px) { .tz-cast .tz-section-title, .tz-recruit__title, .tz-final-cta__title { font-size: 2.25rem; line-height: 1.18; } .tz-cast-card__thumb { aspect-ratio: 4 / 5; } .tz-cast-card__body, .tz-final-cta-card, .tz-recruit__panel { padding: 22px; } .tz-cast__footer, .tz-recruit__cta, .tz-final-cta-card .tz-btn { width: 100%; } .tz-cast__footer .tz-btn, .tz-recruit__cta .tz-btn, .tz-final-cta-card .tz-btn { width: 100%; } } /* ============================================================ Polish Pass — contrast / rhythm / CTA clarity ============================================================ */ .tz-front { --tz-surface: rgba(18, 18, 18, 0.88); --tz-surface-raised: rgba(25, 24, 23, 0.94); --tz-surface-soft: rgba(255, 255, 255, 0.045); --tz-border-soft: rgba(255, 255, 255, 0.13); --tz-border-strong: rgba(238, 34, 34, 0.38); --tz-copy: rgba(232, 228, 222, 0.82); --tz-copy-muted: rgba(232, 228, 222, 0.66); --tz-shadow-deep: 0 24px 70px rgba(0, 0, 0, 0.5); --tz-shadow-red: 0 0 34px rgba(192, 24, 24, 0.28); } .tz-front :where(.tz-section-eyebrow, .tz-posts__label, .tz-hero__kicker, .tz-hero__date, .tz-ticket__eyebrow, .tz-recruit__eyebrow, .tz-final-cta__eyebrow, .tz-footer-cta__label) { letter-spacing: 0; } .tz-front :where(.tz-program, .tz-story, .tz-experience, .tz-ticket, .tz-gallery, .tz-cast, .tz-info, .tz-cta, .tz-final-cta) { position: relative; } .tz-front :where(.tz-program, .tz-experience, .tz-gallery, .tz-info)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.45; pointer-events: none; mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .tz-front :where(.tz-program__inner, .tz-story__inner, .tz-experience__inner, .tz-ticket__inner, .tz-gallery__inner, .tz-cast__inner, .tz-info__inner, .tz-cta__inner, .tz-final-cta__inner) { position: relative; z-index: 1; } .tz-section-head { margin-bottom: 46px; padding-top: 4px; } .tz-section-head .tz-section-eyebrow, .tz-front .tz-section-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--tz-red-bright); font-weight: 800; text-transform: uppercase; } .tz-section-head .tz-section-eyebrow::before, .tz-front .tz-section-eyebrow::before { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, var(--tz-red-bright), transparent); box-shadow: 0 0 14px rgba(238, 34, 34, 0.46); } .tz-section-head .tz-section-title, .tz-front :where(.tz-section-title, .tz-info__heading, .tz-ticket__heading) { line-height: 1.18; text-wrap: balance; text-shadow: 0 0 26px rgba(192, 24, 24, 0.24); } .tz-front :where(.tz-program__lead, .tz-story__lead, .tz-experience__lead, .tz-gallery__lead, .tz-cast__lead, .tz-info__lead, .tz-ticket__lead, .tz-ticket__text, .tz-recruit__text, .tz-final-cta__text) { color: var(--tz-copy); } .tz-front :where(.tz-btn, .tz-hero__button) { min-height: 48px; gap: 10px; padding: 14px 22px; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .tz-front :where(.tz-btn::after, .tz-hero__button::after, .tz-link-arrow::after) { font-size: 1.05em; margin-left: 4px; } .tz-front :where(.tz-btn--primary, .tz-hero__button--primary) { border-color: rgba(255, 77, 77, 0.75); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%), linear-gradient(90deg, #8f0909 0%, #c01818 58%, #f13232 100%); box-shadow: 0 0 24px rgba(192, 24, 24, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .tz-front :where(.tz-btn--outline, .tz-btn--ghost, .tz-hero__button--secondary) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%), rgba(0, 0, 0, 0.28); border-color: rgba(255, 255, 255, 0.24); color: var(--tz-white) !important; } .tz-front :where(.tz-btn:hover, .tz-btn:focus-visible, .tz-hero__button:hover, .tz-hero__button:focus-visible) { transform: translateY(-1px); } .tz-link-arrow { min-height: 34px; align-items: center; color: var(--tz-red-bright); font-weight: 800; } .tz-hero::before { background: radial-gradient(circle at 28% 36%, rgba(192, 24, 24, 0.25), transparent 34%), linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.64) 42%, rgba(0, 0, 0, 0.34) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.82) 100%); } .tz-hero__copy { max-width: 840px; padding: 22px 0; } .tz-hero__title { color: #fff8f0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.58), 0 0 28px rgba(192, 24, 24, 0.4); } .tz-hero__lead { max-width: 700px; color: rgba(255, 250, 242, 0.9); font-size: 1.05rem; line-height: 1.95; } .tz-hero__meta { background: rgba(0, 0, 0, 0.34); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--tz-shadow-deep); } .tz-hero__meta dd { color: rgba(255, 250, 242, 0.96); font-size: 1rem; } .tz-hero__cta { gap: 14px; } .tz-hero__button { min-width: 210px; justify-content: center; } .tz-hero__scroll { opacity: 0.72; } .tz-hero__scroll-label { color: rgba(232, 228, 222, 0.78); } .tz-hero__scroll-line { background: linear-gradient(180deg, var(--tz-red-bright), rgba(238, 34, 34, 0.18)); } .tz-program { background: radial-gradient(circle at 12% 0%, rgba(192, 24, 24, 0.18), transparent 30%), linear-gradient(180deg, #121111 0%, #080808 100%); } .tz-program-card, .tz-experience-step, .tz-info__card, .tz-cast-card, .tz-final-cta-card, .tz-ticket__panel { border-color: var(--tz-border-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.062), transparent 46%), var(--tz-surface); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36); } .tz-program-card:hover, .tz-experience-step:hover, .tz-info__card:hover, .tz-cast-card:hover { border-color: var(--tz-border-strong); box-shadow: var(--tz-shadow-deep), var(--tz-shadow-red); } .tz-program-card__title { color: #fff8f0; line-height: 1.22; } .tz-program-card__subtitle { color: rgba(232, 228, 222, 0.78); } .tz-program-card__text { color: var(--tz-copy); font-size: 0.98rem; } .tz-program-card__facts { border-color: rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), rgba(0, 0, 0, 0.22); } .tz-program-card__facts dt { color: rgba(238, 34, 34, 0.9); } .tz-program-card__facts dd { color: #fff8f0; font-size: 0.96rem; } .tz-program-card__img, .tz-story-row__visual, .tz-gallery__item, .tz-cast-card__thumb { background: #111; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(238, 34, 34, 0.12), 0 16px 42px rgba(0, 0, 0, 0.36); } .tz-program-card__img-placeholder, .tz-story-row__visual-placeholder, .tz-gallery__placeholder, .tz-cast-card__no-img { background: radial-gradient(circle at 50% 30%, rgba(238, 34, 34, 0.18), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px), #101010; } .tz-program-card__img-placeholder span, .tz-story-row__visual-placeholder span, .tz-gallery__placeholder span, .tz-cast-card__no-img span { color: rgba(255, 250, 242, 0.72); text-shadow: 0 0 18px rgba(238, 34, 34, 0.24); } .tz-program-card__img-placeholder small, .tz-story-row__visual-placeholder small, .tz-gallery__placeholder small, .tz-cast-card__no-img small { color: rgba(238, 34, 34, 0.86); } .tz-program-card--gym { opacity: 1; } .tz-story { background: radial-gradient(circle at 80% 16%, rgba(192, 24, 24, 0.18), transparent 30%), linear-gradient(155deg, #060202 0%, #120606 48%, #060606 100%); } .tz-story::before { opacity: 0.72; } .tz-story__vertical { color: rgba(238, 34, 34, 0.12); } .tz-story-row { gap: 46px; padding: 20px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.034), transparent); border: 1px solid rgba(255, 255, 255, 0.08); } .tz-story-row__text { padding: 8px 0; } .tz-story-row__title { color: #fff8f0; font-size: 1.75rem; line-height: 1.28; } .tz-story-row__copy { color: var(--tz-copy); font-size: 1rem; line-height: 2; } .tz-experience { background: radial-gradient(circle at 50% 0%, rgba(192, 24, 24, 0.14), transparent 30%), linear-gradient(180deg, #101010 0%, #090909 100%); } .tz-experience-step { min-height: 230px; padding: 30px 24px; } .tz-experience-step:nth-child(even) { transform: translateY(18px); } .tz-experience-step__num { width: 54px; height: 54px; border-color: rgba(238, 34, 34, 0.72); background: radial-gradient(circle at 50% 28%, rgba(238, 34, 34, 0.24), transparent 62%), #080808; color: #fff8f0; box-shadow: 0 0 20px rgba(238, 34, 34, 0.26); } .tz-experience-step__title { color: #fff8f0; font-size: 1.28rem; } .tz-experience-step__text { color: var(--tz-copy); } .tz-ticket { background: radial-gradient(circle at 22% 30%, rgba(238, 34, 34, 0.24), transparent 32%), linear-gradient(135deg, #140303 0%, #070707 58%, #120202 100%); } .tz-ticket__inner { border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.062), transparent 42%), rgba(0, 0, 0, 0.28); box-shadow: var(--tz-shadow-deep); } .tz-ticket__heading { color: #fff8f0; } .tz-ticket__panel div { padding: 18px 0; } .tz-ticket__panel dt { color: rgba(238, 34, 34, 0.92); } .tz-ticket__panel dd { color: rgba(255, 250, 242, 0.92); line-height: 1.7; } .tz-ticket__cta .tz-btn { min-width: 260px; } .tz-gallery { background: radial-gradient(circle at 84% 4%, rgba(192, 24, 24, 0.16), transparent 28%), linear-gradient(180deg, #101010 0%, #070707 100%); } .tz-gallery__item { overflow: hidden; background: #101010; } .tz-gallery__caption { color: rgba(255, 250, 242, 0.82); background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72)); } .tz-gallery__arrow { min-width: 44px; min-height: 44px; background: rgba(0, 0, 0, 0.34); border-color: rgba(255, 255, 255, 0.2); } .tz-cast-card__img { min-height: 100%; } .tz-cast-card__body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.18)); } .tz-cast-card__name { color: #fff8f0; font-size: 1.22rem; } .tz-cast-card__copy { color: var(--tz-copy-muted); } .tz-cast__footer .tz-btn { min-width: 190px; } .tz-info__card { padding: 30px 26px; } .tz-info__card-title { color: #fff8f0; font-size: 1.28rem; } .tz-info__card-text { color: var(--tz-copy); } .tz-info__card .tz-link-arrow { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .tz-recruit__panel, .tz-final-cta-card { border-color: rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), transparent 44%), rgba(9, 9, 9, 0.86); } .tz-recruit__title, .tz-final-cta__title { color: #fff8f0; text-shadow: 0 0 30px rgba(192, 24, 24, 0.32), 0 2px 0 rgba(0, 0, 0, 0.36); } .tz-final-cta-card__title { color: #fff8f0; } .tz-final-cta-card .tz-btn { align-self: flex-start; } @media (max-width: 900px) { .tz-section-head { margin-bottom: 34px; } .tz-story-row { padding: 16px; gap: 24px; } .tz-experience-step:nth-child(even) { transform: none; } .tz-ticket__cta .tz-btn, .tz-final-cta-card .tz-btn { width: 100%; } } @media (max-width: 599px) { .tz-hero__copy { padding: 12px 0; } .tz-hero__lead, .tz-story-row__copy, .tz-program-card__text, .tz-info__card-text, .tz-experience-step__text { font-size: 0.94rem; line-height: 1.85; } .tz-hero__meta { padding: 14px; } .tz-front :where(.tz-btn, .tz-hero__button) { width: 100%; min-height: 50px; padding: 14px 18px; } .tz-section-head .tz-section-eyebrow::before, .tz-front .tz-section-eyebrow::before { width: 24px; } .tz-program-card, .tz-experience-step, .tz-info__card, .tz-final-cta-card { padding-left: 20px; padding-right: 20px; } .tz-program-card__facts { gap: 8px; } .tz-story-row__title, .tz-cast-card__name, .tz-info__card-title, .tz-experience-step__title { font-size: 1.18rem; } .tz-ticket__inner { padding: 28px 20px; } } /* ============================================================ Refinement Pass — spacing / wide sections / manual gallery ============================================================ */ .tz-section-head { max-width: 780px; margin-bottom: clamp(50px, 6vw, 78px); } .tz-section-head--wide { max-width: min(1120px, 100%); } .tz-section-head--wide .tz-section-title { max-width: 1080px; } .tz-section-head--wide > :where( .tz-program__lead, .tz-experience__lead, .tz-gallery__lead, .tz-cast__lead ) { max-width: 760px; } .tz-front :where( .tz-program, .tz-experience, .tz-gallery, .tz-cast, .tz-info ) { padding-block: clamp(104px, 10vw, 156px); } .tz-front :where( .tz-ticket, .tz-recruit, .tz-cta, .tz-final-cta ) { padding-block: clamp(92px, 9vw, 138px); } .tz-posts__inner { min-height: 96px; padding-top: 20px; padding-bottom: 20px; } .tz-intro { padding-block: clamp(112px, 13vw, 176px); } .tz-intro__inner { gap: clamp(48px, 7vw, 104px); } .tz-program__cards { gap: clamp(24px, 3vw, 40px); } .tz-experience__steps { margin-top: 6px; } .tz-ticket__inner { gap: clamp(44px, 6vw, 86px); } .tz-ticket__content > :last-child, .tz-ticket__panel > :last-child { margin-bottom: 0; } .tz-gallery__inner { max-width: none; padding-inline: clamp(20px, 3vw, 56px); } .tz-gallery .tz-section-head { max-width: 1320px; margin-right: auto; margin-left: auto; } .tz-gallery .tz-section-head--wide > .tz-gallery__lead { max-width: 780px; } .tz-gallery__grid { gap: clamp(16px, 2vw, 28px); } .tz-gallery__grid.is-carousel { gap: clamp(18px, 2.2vw, 32px); overscroll-behavior-inline: contain; scroll-padding-inline: 0; padding-bottom: 8px; } .tz-gallery__grid.is-carousel .tz-gallery__item, .tz-gallery__grid.is-carousel .tz-gallery__item--0 { flex: 0 0 min(1120px, 82vw); height: clamp(400px, 48vw, 680px); } .tz-gallery__item { border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(238, 34, 34, 0.1), 0 28px 80px rgba(0, 0, 0, 0.48); } .tz-gallery__item::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(238, 34, 34, 0.16); pointer-events: none; } .tz-gallery__placeholder { background: radial-gradient(circle at 24% 26%, rgba(238, 34, 34, 0.2), transparent 32%), linear-gradient(145deg, rgba(255, 255, 255, 0.065), transparent 38%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px), linear-gradient(160deg, #150505 0%, #060606 72%); } .tz-gallery__placeholder::before { inset: clamp(18px, 2.2vw, 34px); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 30px rgba(192, 24, 24, 0.08); } .tz-gallery__placeholder span { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.24); color: rgba(255, 250, 242, 0.8); font-size: clamp(0.68rem, 1vw, 0.84rem); } .tz-gallery__caption { padding: 28px 24px 20px; font-size: clamp(0.78rem, 1vw, 0.9rem); line-height: 1.6; } .tz-gallery__controls { max-width: 1320px; margin: 30px auto 0; padding-inline: 2px; } .tz-gallery__arrow { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } .tz-gallery__dot { width: 10px; height: 10px; } .tz-cast__grid { gap: clamp(20px, 2.4vw, 32px); margin-bottom: clamp(44px, 5vw, 68px); } .tz-cast-card { border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(238, 34, 34, 0.08), 0 22px 64px rgba(0, 0, 0, 0.42); } .tz-cast-card__thumb { position: relative; aspect-ratio: 3 / 4; isolation: isolate; } .tz-cast-card__thumb::before { content: 'CAST'; position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.52); color: rgba(255, 250, 242, 0.84); font-family: var(--tz-font-mono); font-size: 0.58rem; font-weight: 800; line-height: 1; } .tz-cast-card--sample .tz-cast-card__thumb::before { content: 'MEMBER'; } .tz-cast-card__thumb::after { z-index: 1; background: linear-gradient(180deg, rgba(192, 24, 24, 0.08), transparent 34%), linear-gradient(to top, rgba(8, 0, 0, 0.72) 0%, transparent 58%); } .tz-cast-card__img { object-position: center 24%; filter: brightness(0.9) saturate(0.82) contrast(1.06); } .tz-cast-card__body { gap: 10px; padding: 24px 22px 26px; } .tz-cast-card__role { padding-bottom: 9px; border-bottom: 1px solid rgba(238, 34, 34, 0.22); } .tz-cast-card__name { font-size: clamp(1.2rem, 1.8vw, 1.42rem); } .tz-cast-card__copy { font-size: 0.94rem; line-height: 1.85; } .tz-cast__footer { justify-content: flex-start; } .tz-cast__footer .tz-btn { min-width: 220px; } .tz-recruit__inner { gap: clamp(44px, 6vw, 82px); } .tz-cta__box { max-width: 780px; padding: clamp(48px, 6vw, 78px) clamp(26px, 5vw, 58px); } .tz-final-cta { padding-bottom: clamp(112px, 11vw, 164px); } .tz-front :where(.tz-btn, .tz-hero__button, .tz-link-arrow)::after { margin-left: 8px; font-size: 1.1em; } .tz-front :where(.tz-btn:hover, .tz-btn:focus-visible, .tz-hero__button:hover, .tz-hero__button:focus-visible, .tz-link-arrow:hover, .tz-link-arrow:focus-visible)::after { transform: translateX(3px); } @media (max-width: 900px) { .tz-front :where( .tz-program, .tz-experience, .tz-gallery, .tz-cast, .tz-info, .tz-ticket, .tz-recruit, .tz-cta, .tz-final-cta ) { padding-block: clamp(78px, 11vw, 108px); } .tz-section-head, .tz-section-head--wide { max-width: 820px; margin-bottom: clamp(38px, 6vw, 52px); } .tz-intro { padding-block: clamp(88px, 12vw, 118px); } .tz-gallery__grid.is-carousel .tz-gallery__item, .tz-gallery__grid.is-carousel .tz-gallery__item--0 { flex-basis: min(760px, 86vw); height: clamp(340px, 58vw, 520px); } .tz-cast__grid { gap: 24px; } } @media (max-width: 599px) { .tz-posts__inner { min-height: 0; padding-top: 22px; padding-bottom: 24px; } .tz-front :where( .tz-program, .tz-experience, .tz-gallery, .tz-cast, .tz-info, .tz-ticket, .tz-recruit, .tz-cta, .tz-final-cta ) { padding-block: 74px; } .tz-intro { padding-block: 82px 88px; } .tz-section-head, .tz-section-head--wide { margin-bottom: 36px; } .tz-program__cards { gap: 22px; } .tz-gallery__inner { padding-inline: 18px; } .tz-gallery__grid.is-carousel { gap: 14px; } .tz-gallery__grid.is-carousel .tz-gallery__item, .tz-gallery__grid.is-carousel .tz-gallery__item--0 { flex-basis: 86vw; height: clamp(300px, 72vw, 430px); } .tz-gallery__caption { padding: 24px 18px 16px; } .tz-gallery__controls { justify-content: center; gap: 16px; margin-top: 24px; } .tz-cast__grid { grid-template-columns: 1fr; max-width: 430px; margin-right: auto; margin-left: auto; } .tz-cast-card__body { padding: 22px 20px 24px; } .tz-cast__footer { justify-content: center; } .tz-cast__footer .tz-btn { min-width: 0; } .tz-final-cta { padding-bottom: 92px; } } /* ============================================================ Layout fixes — hero scroll / heading line breaks ============================================================ */ .tz-front { --tz-hero-header-offset: 73px; } .tz-hero__scroll { bottom: calc(clamp(20px, 4vh, 42px) + var(--tz-hero-header-offset)); } .tz-cast .tz-section-head--wide { max-width: min(1120px, 100%); } .tz-cast__title { display: flex !important; flex-wrap: nowrap; align-items: baseline; gap: 0 0.18em; width: 100%; } .tz-cast__title > span { white-space: nowrap; } .tz-final-cta__head--wide { max-width: min(1120px, 100%); } .tz-final-cta__title { text-wrap: balance; } .tz-final-cta__title-line { display: block; } .tz-final-cta__title-line--question { white-space: nowrap; } .tz-final-cta__text { max-width: 760px; margin-right: auto; margin-left: auto; } @media (max-width: 1023px) { .tz-front { --tz-hero-header-offset: 49px; } } @media (max-width: 599px) { .tz-hero__inner { transform: translateY(-44px); } .tz-hero__scroll { right: 20px; /*bottom: calc(var(--tz-hero-header-offset) + 82px);*/ flex-direction: row; gap: 10px; } .tz-hero__scroll-line { width: 34px; height: 1px; background: linear-gradient(90deg, var(--tz-red-bright), rgba(238, 34, 34, 0.18)); animation: none; } .tz-cast__title { flex-direction: column; align-items: flex-start; gap: 0.08em 0; } .tz-final-cta__head--wide { max-width: 100%; } .tz-final-cta__title-line--question { white-space: normal; } .tz-final-cta__title-line--question > span { display: block; white-space: nowrap; } } /* ============================================================ PC atmosphere — abandoned school architectural frame ============================================================ */ @media (min-width: 1024px) { .tz-front { position: relative; isolation: isolate; } .tz-front::before { content: ''; position: fixed; z-index: 6; inset: var(--tz-hero-header-offset) 0 0; pointer-events: none; background: linear-gradient(90deg, transparent 0, transparent calc(4vw - 1px), rgba(238, 34, 34, 0.22) 4vw, transparent calc(4vw + 1px), transparent calc(9vw - 1px), rgba(255, 255, 255, 0.055) 9vw, transparent calc(9vw + 1px), transparent calc(91vw - 1px), rgba(255, 255, 255, 0.055) 91vw, transparent calc(91vw + 1px), transparent calc(96vw - 1px), rgba(238, 34, 34, 0.2) 96vw, transparent calc(96vw + 1px) ), repeating-linear-gradient( 180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 72px ), linear-gradient( 76deg, transparent 0 49.88%, rgba(238, 34, 34, 0.055) 49.94% 50.06%, transparent 50.12% 100% ), linear-gradient( 104deg, transparent 0 49.88%, rgba(255, 255, 255, 0.032) 49.94% 50.06%, transparent 50.12% 100% ); opacity: 0.74; -webkit-mask-image: linear-gradient( 90deg, #000 0%, rgba(0, 0, 0, 0.94) 8%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.94) 92%, #000 100% ); mask-image: linear-gradient( 90deg, #000 0%, rgba(0, 0, 0, 0.94) 8%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.94) 92%, #000 100% ); } .tz-front::after { content: 'OLD SCHOOL / TSURUGA / 2026'; position: fixed; z-index: 7; top: 50%; right: 13px; transform: translateY(-50%); writing-mode: vertical-rl; color: rgba(255, 250, 242, 0.2); font-family: var(--tz-font-mono); font-size: 0.58rem; font-weight: 700; line-height: 1; letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 0 14px rgba(238, 34, 34, 0.28); pointer-events: none; } .tz-front > section:not(.tz-hero):not(.tz-posts) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 -1px 0 rgba(238, 34, 34, 0.06); } } /* ============================================================ CAST refinement — unified photography / richer member data ============================================================ */ .tz-cast-card { display: flex; flex-direction: column; min-height: 100%; border-color: rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%), linear-gradient(145deg, #151111 0%, #080808 72%); } .tz-cast-card::before, .tz-cast-card--sample .tz-cast-card__thumb::before { content: none; } .tz-cast-card__thumb { flex: 0 0 auto; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(238, 34, 34, 0.12), 0 18px 44px rgba(0, 0, 0, 0.38); } .tz-cast-card__thumb::after { background: linear-gradient(180deg, rgba(72, 0, 0, 0.16), transparent 30%), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px), linear-gradient(to top, rgba(10, 0, 0, 0.78) 0%, transparent 48%); opacity: 0.74; } .tz-cast-card__img { transform: scale(1.015); object-position: center 30%; filter: grayscale(0.12) sepia(0.08) brightness(0.82) contrast(1.1) saturate(0.78); } .tz-cast-card:hover .tz-cast-card__img, .tz-cast-card:focus-visible .tz-cast-card__img { transform: scale(1.045); filter: grayscale(0) sepia(0.04) brightness(0.94) contrast(1.08) saturate(0.92); } .tz-cast-card__badge { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(3, 3, 3, 0.72); color: rgba(255, 250, 242, 0.88); font-family: var(--tz-font-mono); font-size: 0.58rem; font-weight: 800; line-height: 1; letter-spacing: 0.12em; box-shadow: 0 0 18px rgba(192, 24, 24, 0.2); } .tz-cast-card__no-img { position: relative; overflow: hidden; background: linear-gradient(90deg, transparent 49.8%, rgba(238, 34, 34, 0.2) 50%, transparent 50.2%), linear-gradient(180deg, transparent 49.8%, rgba(238, 34, 34, 0.14) 50%, transparent 50.2%), radial-gradient(circle at 50% 50%, rgba(238, 34, 34, 0.18), transparent 28%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px), linear-gradient(145deg, #160707 0%, #070707 70%); } .tz-cast-card__no-img::before { content: ''; position: absolute; inset: 15%; border: 1px solid rgba(255, 255, 255, 0.12); transform: rotate(45deg); } .tz-cast-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 220px; padding: 24px 22px 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 52%), rgba(3, 3, 3, 0.4); } .tz-cast-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(238, 34, 34, 0.22); } .tz-cast-card__role { margin: 0; padding: 0; border: 0; font-size: 0.66rem; line-height: 1.4; } .tz-cast-card__teams { display: flex; flex-wrap: wrap; gap: 5px; } .tz-cast-card__teams span { padding: 4px 7px; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 250, 242, 0.62); font-size: 0.62rem; line-height: 1; } .tz-cast-card__name { font-family: var(--tz-font-title); font-size: clamp(1.28rem, 1.8vw, 1.55rem); line-height: 1.3; } .tz-cast-card__copy { color: rgba(255, 250, 242, 0.72); font-size: 0.92rem; line-height: 1.8; } .tz-cast-card__more { width: 100%; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 0.7rem; letter-spacing: 0.08em; } .tz-cast-card:hover, .tz-cast-card:focus-visible { transform: translateY(-3px); } .tz-cast__footer { display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 38px); width: 100%; padding-top: 8px; } .tz-cast__footer::before { content: 'VIEW ALL CAST'; display: flex; align-items: center; gap: 16px; color: rgba(255, 250, 242, 0.34); font-family: var(--tz-font-mono); font-size: 0.62rem; font-weight: 700; line-height: 1; letter-spacing: 0.2em; } .tz-cast__footer::before { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 13px; } @media (max-width: 599px) { .tz-cast-card__body { min-height: 0; } .tz-cast-card__img { object-position: center 26%; } .tz-cast__footer { grid-template-columns: 1fr; } .tz-cast__footer::before { justify-content: center; text-align: center; } }