/* ============================================================
   style.css — 東京レジスターズ 共通＋TOP スタイルシート
   ------------------------------------------------------------
   ・前提：tokens.css（変数）を先に読み込む。命名は FLOCSS（l-/c-/p-/u-/is-/js-）。
     規約は DESIGN.md「6.6 CSS実装規約」「6.7 クラス命名規約」を参照。
   ・読込：全ページ共通（inc/header.html が <link> で読む）。
   ・JS連携：main.js（ナビ/スライダー/ティッカー/モーダル）・loader.js（オープニング）。

   ── 目次（FLOCSSレイヤー順。各ブロック先頭の「===== Layer: name =====」見出しと対応）──
   ※ 物理整列済み（DESIGN.md「6.8」）。レイヤー順＝Foundation → Layout → Component → Page → Opening。
   [Foundation]  リセット / html・body / 微細グレイン(body::after) / :root（カラー・グレースケール） / ブレイクポイント方針
   [Layout]      l-header（markupは header.html・CSSなし）/ l-footer / l-rise
   [Component]   c-video-modal / c-ph（プレースホルダ）/ c-gnav（バー＋スクロール状態・色）/ c-hamburger / c-logo /
                 c-overlay / c-ticker / c-section-header / c-slider / c-news-card / c-movie-card / c-player-card / c-pagination
   [Page: TOP]   p-hero / p-news / p-movie / p-players / p-vision / p-homeground / p-partnertown / p-join
   [Page: 下層]  p-news-archive（NEWS一覧：head / breadcrumb / filter。見出しは c-section-header、一覧は p-news__cards--newslist＋c-news-card、ページ送りは c-pagination を流用）
                 p-news-detail / p-partners / p-company / p-privacy / p-terms / p-vision-page（球団理念：statement / message / values）
   [Component]   c-cta / c-breadcrumb（下層共通の行動喚起バンド・パンくず）
   [Opening]     c-opening（is-opening / is-opening-skip / FOUC制御）
   ============================================================ */

/* ===== Foundation: reset / html・body / grain / :root / breakpoints ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scrollbar-gutter: stable;
}

/* 微細グレイン（全面・フィルム/紙の質感・静止）。白ベタののっぺりを抑える */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 140px 140px;
}

/* ============================================================
        カラーパレット（白ベース・2026年6月クライアント確定）
        --bg＝背景の主役（白）／--ink＝テキスト主役（黒・前景）／--pure＝最濃
        ※ グレースケール（--g100〜--g900）は明るいほど数字が大きい並び。
    ============================================================ */
:root {
    --white: #ffffff; /* 背景の主役（白） */
    --surface: #f5f6f7; /* セクション地色（オフホワイト） */
    /* グレースケール：数字が大きいほど濃い（明→暗） */
    --g100: #eef0f2; /* 最も薄い（プレースホルダ地・カード） */
    --g200: #e2e5e9; /* 罫線（薄） */
    --g300: #d2d6db;
    --g400: #b9bfc6;
    --g500: #969ca4;
    --g600: #767c84;
    --g700: #565b62;
    --g800: #34383d;
    --g900: #1a1d21; /* 最も濃い */
    --base: #14171a; /* テキスト主役（基調色・前景の黒） */
    --black: #000000; /* 最濃・アクセント（純黒） */
    --rule: 1px solid #e2e5e9;
    --rule-thin: 1px solid #eef0f2;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--white);
    color: var(--base);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* ════════════════════════════════════════
   フッター（スポンサー → ロゴ+リンク+SNS → コピーライト）
   ════════════════════════════════════════ */
/* ① スポンサーバナー */
.l-footer__sponsors {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(24px, 3.5vw, 44px) clamp(24px, 5vw, 80px);
    border-bottom: var(--rule);
    flex-direction: column;
}

@media (min-width: 769px) {
    .l-footer__sponsors {
        align-items: center;
        gap: clamp(24px, 4vw, 56px);
        flex-direction: row;
    }
}

.l-footer__sponsors-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.l-footer__sponsors-label {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 20px);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--g800);
}

.l-footer__sponsors-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--base);
    text-decoration: none;
    transition: opacity 0.2s;
}

.l-footer__sponsors-more .c-icon {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.l-footer__sponsors-more:hover {
    opacity: 0.6;
}

.l-footer__sponsors-more:hover .c-icon {
    transform: translateX(4px);
}

.l-footer__sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex-direction: row;
}

@media (min-width: 769px) {
    .l-footer__sponsors-grid {
        gap: clamp(12px, 2vw, 24px);
    }
}

.l-footer__sponsor {
    width: calc(50% - 6px);
    aspect-ratio: 400 / 136;
    border: var(--rule);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g700);
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s;
}

@media (min-width: 769px) {
    .l-footer__sponsor {
        width: clamp(140px, 16vw, 200px);
    }
}

.l-footer__sponsor-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.l-footer__sponsor:hover {
    border-color: var(--g500);
}

/* ② ロゴ＋リンク＋SNS */
.l-footer__main {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 80px);
    border-bottom: var(--rule);
    flex-direction: column;
}

@media (min-width: 769px) {
    .l-footer__main {
        align-items: center;
        gap: clamp(24px, 4vw, 56px);
        flex-direction: row;
    }
}

.l-footer__brand {
    display: block;
    flex-shrink: 0;
    order: 1;
    transition: opacity 0.2s;
}

.l-footer__brand:hover {
    opacity: 0.7;
}

@media (min-width: 769px) {
    .l-footer__brand {
        order: 0;
    }
}

.l-footer__logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
}

.l-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.8vw, 24px) clamp(14px, 2vw, 22px);
    order: 3;
}

@media (min-width: 769px) {
    .l-footer__links {
        order: 0;
    }
}

.l-footer__links a {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--g800);
    text-decoration: none;
    transition: color 0.2s;
}

.l-footer__links a:hover {
    text-decoration: underline;
}

/* リンク間の斜線セパレータ（先頭以外の各リンクの前に「/」） */
.l-footer__links a:not(:first-child)::before {
    content: "/";
    display: inline-block; /* hover の下線が斜線にかからないように */
    margin-right: clamp(14px, 2vw, 22px);
    color: var(--g300);
    font-weight: 100;
}

.l-footer__sns {
    margin-left: 0;
    display: flex;
    gap: 20px;
    order: 2;
}

@media (min-width: 769px) {
    .l-footer__sns {
        margin-left: auto;
        order: 0;
    }
}

.l-footer__sns-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s;
}

.l-footer__sns-btn:hover {
    opacity: 0.5;
}

.l-footer__sns-icon {
    display: block;
    width: 36px;
    height: 36px;
}

.l-footer__sns-icon--x {
    width: 26px;
    height: 26px;
}

/* ③ コピーライト */
.l-footer__copyright {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: clamp(14px, 2vw, 20px) clamp(24px, 5vw, 80px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--g700);
    flex-direction: column;
}

@media (min-width: 769px) {
    .l-footer__copyright {
        gap: 16px;
        flex-direction: row;
    }
}

.c-opening__layer {
    position: absolute;
    inset: 0;
}

.c-opening__layer--white {
    z-index: 1;
}

.c-opening__layer--black {
    z-index: 2;
}

.c-opening__half {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.c-opening__layer--white .c-opening__half {
    background: #fff;
}

.c-opening__layer--black .c-opening__half {
    background: #0e1116;
}

/* 右上→左下の対角線で分割（左上の三角／右下の三角）
   ※ op-a の斜辺を数px外側へ広げて隙間（白線）が出ないよう僅かにオーバーラップ */
.c-opening__half--a {
    clip-path: polygon(0 0, calc(100% + 2px) 0, 0 calc(100% + 2px));
}

.c-opening__half--b {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.c-opening__logo {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(300px, 55vw);
    height: auto;
    opacity: 0;
    filter: blur(20px);
}

/* ===== Layout: l-footer ===== */

/* ════════════════════════════════════════
   08 / FOOTER
   ════════════════════════════════════════ */
.l-footer {
    background: #f9f9f9;
    --rule: 1px solid #dfe1e4;
    color: var(--base);
}

/* ===== Layout: l-rise ===== */

/* ヒーローの上にせり上がる前面レイヤー（不透明な白でヒーローを覆う） */
.l-rise {
    position: relative;
    z-index: 1;
    background: var(--white);
}

/* ===== Component: c-icon ===== */

/* SVGスプライト（inc/icons.html）を参照する共通アイコン。
   width/height:1em とすることで、各所の font-size 指定がそのままアイコンの大きさになる
   （旧 Material Symbols フォントと同じ感覚で扱える）。色は fill:currentColor で親の文字色を継承。 */
.c-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: -0.125em;
    line-height: 1;
}

/* ===== Component: c-video-modal ===== */

/* ============================================================
   ブレイクポイント方針（PC/SP 2段＋例外）
     768px        … 主SP境界（タブレット含む全リフローを集約）
     480px        … 小スマホ微調整
     960px        … 例外：グローバルナビ collapse（英字6項目が溢れるため先行）
     1400px       … 例外：ヒーローのティッカー再配置（巨大タイポとの干渉回避・デスクトップ域）
     1600px(min)  … 大画面の微調整
     prefers-reduced-motion … モーション抑制
   ============================================================ */
/* ── VIDEO MODAL ── */
.c-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.c-video-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.c-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.c-video-modal__inner {
    position: relative;
    width: min(90vw, 1100px);
    z-index: 1;
}

.c-video-modal__close {
    position: absolute;
    top: -48px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.c-video-modal__close:hover {
    opacity: 1;
}

.c-video-modal__close .c-icon {
    font-size: 32px;
}

.c-video-modal__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.c-video-modal__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ===== Component: c-ph ===== */

/* ── PLACEHOLDER ── */
.c-ph {
    position: relative;
    background: var(--g100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.c-ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 45%,
            var(--g200) 45%,
            var(--g200) 55%,
            transparent 55%
        ),
        linear-gradient(
            45deg,
            transparent 45%,
            var(--g200) 45%,
            var(--g200) 55%,
            transparent 55%
        );
}

.c-ph__label {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 0.12em;
    color: var(--g500);
    text-align: center;
    padding: 0 16px;
}

.c-ph__desc {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 0.08em;
    color: var(--g500);
    text-align: center;
    padding: 0 20px;
    line-height: 1.6;
}

/* ===== Component: c-gnav ===== */

/* ── GLOBAL NAV ── */
.c-gnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--g200);
}

/* 上限1920px＋中央寄せ。左右ガターはページ内容と共通（clamp(24,5vw,80)）にして
   ロゴ左端とコンテンツ左端を全幅で揃える。1920px超は中央寄せで間延び防止。 */
.c-gnav__inner {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 48px);
    padding: 0 clamp(24px, 5vw, 80px);
    height: 64px;
}

/* SP：SNS追加で右が窮屈なため左右パディングを詰める */
@media (max-width: 768px) {
    .c-gnav__inner {
        padding: 0 clamp(14px, 4vw, 20px);
    }
}

@media (min-width: 769px) {
    .c-gnav__inner {
        height: 84px;
    }
}

.c-gnav__list {
    display: none;
    align-items: center;
    gap: clamp(16px, 2.5vw, 36px);
    list-style: none;
    transition: opacity 0.3s ease;
}

/* インライン英字ナビは幅が足りる時だけ表示（未満はハンバーガーへ集約）。
   項目数8（News/Vision/Company/Hometown/Partners/Recruit/Games/Players）＋
   右側SNS/メール/ハンバーガーがロゴと左右対称のガター内に収まる幅で先行表示。
   スクロールバー(約15px)分も食うため実測で 1480px に設定。 */
@media (min-width: 1480px) {
    .c-gnav__list {
        display: flex;
    }
}

/* Oswald読込前は隠す → 到着後 js-fonts-pending を外してフェードイン（フォールバックのチラ見せ防止）。
   <head> 同期で付与（描画前から非表示）。JS無効/非対応/タイムアウト時は付与されず通常表示。 */
html.js-fonts-pending .c-gnav__list {
    opacity: 0;
}

.c-gnav__list li a {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--g900);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.c-gnav__list li a:hover {
    color: var(--base);
}

/* 下線：中央から左右に広がる */
.c-gnav__list li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.c-gnav__list li a:hover::after {
    transform: scaleX(1);
}

.c-gnav__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .c-gnav__right {
        gap: 20px;
    }
}

.c-gnav__cta {
    text-decoration: none;
    background: var(--base);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

@media (min-width: 769px) {
    .c-gnav__cta {
        width: 50px;
        height: 50px;
    }
}

.c-gnav__cta .c-icon {
    font-size: 22px;
    font-variation-settings: "wght" 100;
}

@media (min-width: 769px) {
    .c-gnav__cta .c-icon {
        font-size: 26px;
    }
}

.c-gnav__cta:hover {
    opacity: 0.75;
}

/* SNS（X / Instagram）を1ブロックに。インスタ側（右）にメールアイコンまでの余白を少し足す */
.c-gnav__sns-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-right: clamp(4px, 1vw, 12px);
}

@media (min-width: 769px) {
    .c-gnav__sns-group {
        gap: 20px;
    }
}

/* SNS（X / Instagram）：丸・ボーダーなしのプレーンアイコン。ナビ文字色に追従（透明時=白／スクロール時=黒） */
.c-gnav__sns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition:
        color 0.3s,
        opacity 0.2s;
}

.c-gnav__sns .c-icon {
    font-size: 18px;
}

@media (min-width: 769px) {
    .c-gnav__sns .c-icon {
        font-size: 20px;
    }
}

.c-gnav__sns:hover {
    opacity: 0.6;
}

/* ── PHASE 1 レスポンシブ ── */
/* グローバルナビ：第2フェーズ追加予定（第1フェーズは非アクティブ表示） */
.c-gnav__list li .c-gnav__soon {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--g500);
    user-select: none;
    display: inline-flex;
    align-items: center;
}

/* スクロール後（白背景）＝黒ロゴを表示 */
.c-gnav.is-scrolled .c-logo__img--white {
    opacity: 0;
}

.c-gnav.is-scrolled .c-logo__img--dark {
    opacity: 1;
}

/* ═══ TOPヒーロー：ヘッダー透明 → スクロールで白 ═══ */
.c-gnav {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition:
        background 0.3s,
        border-color 0.3s,
        backdrop-filter 0.3s,
        transform 0.35s ease;
}

/* 透明ヘッダー時：白文字が明るい写真上でも読めるよう上部に薄いスクリム */
.c-gnav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(14, 17, 22, 0.55) 0%,
        rgba(14, 17, 22, 0.22) 55%,
        rgba(14, 17, 22, 0) 100%
    );
    opacity: 1;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* 白ヘッダー時・メニュー展開時はスクリム不要 */
.c-gnav.is-scrolled::before,
.c-gnav.is-dark::before {
    opacity: 0;
}

/* 退避状態：最上部から少しスクロールした「1スクロール未満」の間は上へ隠す
   （約1スクロールで is-hidden が外れて白ヘッダーがスライドインし、以後は常時表示） */
.c-gnav.is-hidden {
    transform: translateY(-100%);
}

/* ヒーロー上（最上部）＝白文字 */
.c-gnav .c-logo__en {
    color: #fff;
    transition: color 0.3s;
}

.c-gnav .c-gnav__list li a {
    color: #fff;
}

.c-gnav .c-gnav__soon {
    color: rgba(255, 255, 255, 0.55);
}

.c-gnav .c-hamburger span {
    background: #fff;
}

.c-gnav .c-gnav__cta {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition:
        background 0.3s,
        color 0.3s,
        border-color 0.3s;
}

.c-gnav .c-gnav__cta:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

/* スクロール後＝白ヘッダー＋黒文字 */
.c-gnav.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid transparent;
}

.c-gnav.is-scrolled .c-logo__en {
    color: var(--base);
}

.c-gnav.is-scrolled .c-gnav__list li a {
    color: var(--g900);
}

.c-gnav.is-scrolled .c-gnav__soon {
    color: var(--g500);
}

.c-gnav.is-scrolled .c-hamburger span {
    background: var(--base);
}

.c-gnav.is-scrolled .c-gnav__sns {
    color: var(--g900);
}

.c-gnav.is-scrolled .c-gnav__cta {
    color: var(--g800);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.c-gnav.is-scrolled .c-gnav__cta:hover {
    background-color: var(--base);
    border: 1px solid rgba(0, 0, 0, 1);
    color: var(--white);
}

/* メニュー展開中：スクロール済みならナビ全体を非表示 */
.c-gnav.is-dark.is-scrolled {
    opacity: 0;
    pointer-events: none;
}

/* メニュー展開中・ヒーロー上（未スクロール）：白ロゴのみ残す */
.c-gnav.is-dark:not(.is-scrolled) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

.c-gnav.is-dark:not(.is-scrolled) .c-gnav__list,
.c-gnav.is-dark:not(.is-scrolled) .c-gnav__sns-group,
.c-gnav.is-dark:not(.is-scrolled) .c-gnav__cta,
.c-gnav.is-dark:not(.is-scrolled) .c-hamburger {
    opacity: 0;
    pointer-events: none;
}

.c-gnav.is-dark:not(.is-scrolled) .c-logo__img--white {
    opacity: 1;
}

.c-gnav.is-dark:not(.is-scrolled) .c-logo__img--dark {
    opacity: 0;
}

/* ===== Component: c-hamburger ===== */

/* ハンバーガー：2本線・太め・タップ領域を広く */
.c-hamburger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .c-hamburger {
        width: 46px;
        height: 46px;
        gap: 9px;
        flex-shrink: 1;
    }
}

@media (max-width: 768px) {
    .c-hamburger.is-active span {
        width: 24px;
    }
}

@media (max-width: 768px) {
    .c-hamburger.is-active span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
    }
}

@media (max-width: 768px) {
    .c-hamburger.is-active span:nth-child(2) {
        transform: translateY(-5.5px) rotate(-45deg);
    }
}

.c-hamburger:hover {
    opacity: 0.6;
}

.c-hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--base);
    transition:
        transform 0.25s,
        opacity 0.25s,
        width 0.25s;
    transform-origin: center;
}

@media (min-width: 769px) {
    .c-hamburger span {
        width: 40px;
    }
}

/* ===== Component: c-logo ===== */

.c-logo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.c-logo a {
    text-decoration: none;
    color: inherit;
}

/* サイトロゴ：白PNG・黒PNGの2枚を重ね、スクロール状態で切替 */
.c-logo {
    position: relative;
}

.c-logo__img {
    width: clamp(180px, 14vw, 240px);
    height: auto;
    display: block;
    transition: opacity 0.3s;
}

/* SP：SNS追加で右側が窮屈なため、ロゴを少し小さく */
@media (max-width: 768px) {
    .c-logo__img {
        width: clamp(132px, 40vw, 156px);
    }
}

@media (max-width: 768px) {
    .c-logo__en {
        font-size: 15px;
        letter-spacing: 0.08em;
        white-space: normal;
        max-width: 80px;
        line-height: 1.3;
    }
}

@media (max-width: 768px) {
    .c-logo__ja {
        display: none;
    }
}

/* 黒ロゴは白ロゴに重ねて配置（初期は非表示） */
.c-logo__img--dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===== Component: c-overlay ===== */

/* ── OVERLAY バックドロップ ── */
/* ── OVERLAY 右ドロワー（PC） ── */
/* ダイアログ本体は初期フォーカスの受け皿（tabindex="-1"）。器なのでリングは出さない。
   中のリンク・ボタンのフォーカスリングは残す（キーボード操作の手がかりのため）。 */
.c-overlay:focus {
    outline: none;
}

.c-overlay {
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: 100%;
    z-index: 998;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    flex-direction: column;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: none;
}

@media (min-width: 769px) {
    .c-overlay {
        width: min(460px, 100%);
        box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
    }
}

.c-overlay[open] {
    display: flex;
    /* dialogのUA: inset:0; margin:auto を上書き */
    left: auto;
    margin: 0;
}

.c-overlay::backdrop {
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.c-overlay.is-open::backdrop {
    opacity: 1;
}

/* SP はフルスクリーン */
.c-overlay.is-open {
    transform: translateX(0);
    pointer-events: all;
    z-index: 1000;
}

/* 本文ラッパー：残り高さを埋め、内部の .c-overlay__nav をスクロール領域にする */
.c-overlay__body {
    flex: 1;
    min-height: 0; /* flex子のoverflowスクロールを有効化（これが無いとSPで中身をスクロールできない） */
    display: flex;
    flex-direction: column;
}

.c-overlay__header {
    padding: 16px 12px 16px 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
}

@media (min-width: 769px) {
    .c-overlay__header {
        padding: 24px;
    }
}

.c-overlay__logo {
    display: block;
    text-decoration: none;
}

.c-overlay__close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base);
    border-radius: 50%;
    transition: opacity 0.2s;
}

.c-overlay__close:hover {
    opacity: 0.5;
}

.c-overlay__close .c-icon {
    font-size: 28px;
}

@media (min-width: 769px) {
    .c-overlay__close .c-icon {
        font-size: 34px;
    }
}

.c-overlay__logo-img {
    width: clamp(180px, 14vw, 240px);
    height: auto;
    display: block;
}

@media (max-width: 480px) {
    .c-overlay__logo-text {
        font-size: 12px;
        letter-spacing: 0.08em;
    }
}

.c-overlay__search {
    padding: 20px;
    border-bottom: none;
    flex-shrink: 0;
    max-width: 320px;
    margin-inline: auto;
}

@media (min-width: 769px) {
    .c-overlay__search {
        padding: 32px;
        max-width: none;
        margin-inline: 0px;
    }
}

.c-overlay__search-inner {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--g300);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
}

.c-overlay__search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--base);
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    font-family: inherit;
}

.c-overlay__search-input::placeholder {
    color: var(--g500);
}

.c-overlay__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    align-self: stretch;
    background: transparent;
    color: var(--base);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.c-overlay__search-btn .c-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--base);
}

.c-overlay__search-btn:hover {
    opacity: 0.7;
}

/* 検索フォーム＋SNSボタン群の行（中央寄せ） */
.c-overlay__search-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: column;
}

@media (min-width: 769px) {
    .c-overlay__search-row {
        gap: 32px;
    }
}

.c-overlay__search-sns {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

@media (min-width: 769px) {
    .c-overlay__search-sns {
        justify-content: normal;
    }
}

.c-overlay__sns-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.c-overlay__sns-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.c-overlay__sns-btn:hover {
    opacity: 0.7;
}

.c-overlay__nav {
    flex: 1;
    min-height: 0;
    padding: 0 20px 40px;
    border-top: solid 1px var(--g200);
    overflow-y: auto;
    align-content: start;
}

@media (min-width: 481px) {
    .c-overlay__nav {
        padding: 24px 20px 40px;
    }
}

@media (min-width: 769px) {
    .c-overlay__nav {
        padding: 0 32px 60px;
        align-content: normal;
    }
}

.c-overlay__list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.c-overlay__list li {
    border-bottom: 1px solid var(--g200);
}

.c-overlay__list li:first-child {
    border-top: none;
}

.c-overlay__list li a,
.c-overlay__list li .c-overlay__soon {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 1.5em 0;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.c-overlay__list li a:hover {
    transform: translateX(6px);
}

.c-overlay__en {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--base);
    min-width: 100px;
}

@media (min-width: 481px) {
    .c-overlay__en {
        min-width: 120px;
    }
}

@media (min-width: 769px) {
    .c-overlay__en {
        font-size: 20px;
        min-width: 140px;
    }
}

.c-overlay__ja {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--g700);
    gap: 10px;
}

@media (min-width: 769px) {
    .c-overlay__ja {
        font-size: 13px;
        gap: normal;
    }
}

.c-overlay__list li .c-overlay__soon .c-overlay__en {
    color: var(--g400);
}

.c-overlay__list li .c-overlay__soon .c-overlay__ja {
    color: var(--g400);
}

.c-overlay__soon-label {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--g500);
    margin-left: auto;
}

@media (max-width: 768px) {
    .c-overlay__footer {
        padding: 16px 20px 24px;
        flex-wrap: wrap;
        gap: 14px;
    }
}

/* ===== Component: c-ticker ===== */

/* ── HERO NEWS TICKER（左下・横長・ループ） ── */
/* ── 最新ニュース：カードレス＋サムネ（写真に直接のせる） ── */
.c-ticker {
    position: absolute;
    right: clamp(20px, 5vw, 80px);
    /* ホームインジケータ（iPhone等）ぶんを足して下端に張り付かせない。
       非対応環境では env() が 0px にフォールバックし従来どおり 24px。 */
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    text-align: left;
    left: clamp(20px, 5vw, 80px);
}

@media (min-width: 769px) {
    .c-ticker {
        right: auto;
        bottom: clamp(24px, 4vh, 40px);
        width: 560px;
    }
}

@media (min-width: 1401px) {
    .c-ticker {
        right: clamp(20px, 4vw, 64px);
        bottom: clamp(28px, 5vh, 56px);
        align-items: flex-end;
        gap: clamp(8px, 1vw, 12px);
        width: clamp(240px, 26vw, 380px);
        text-align: right;
        left: auto;
    }
}

.c-ticker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.c-ticker__eyebrow {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #fff;
    opacity: 0.95;
    text-align: left;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1401px) {
    .c-ticker__eyebrow {
        font-size: clamp(12px, 1vw, 14px);
    }
}

.c-ticker__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
}

@media (min-width: 1401px) {
    .c-ticker__row {
        justify-content: flex-end;
    }
}

.c-ticker__viewport {
    position: relative;
    flex: 1;
    height: 76px;
    overflow: hidden;
    min-width: 0;
}

@media (min-width: 1401px) {
    .c-ticker__viewport {
        height: clamp(56px, 5.2vw, 76px);
    }
}

.c-ticker__item {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.c-ticker__item.is-active {
    opacity: 1;
    pointer-events: auto;
}

.c-ticker__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.c-ticker__thumb-wrap {
    width: 88px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media (min-width: 769px) {
    .c-ticker__thumb-wrap {
        width: 112px;
        height: 76px;
    }
}

@media (min-width: 1401px) {
    .c-ticker__thumb-wrap {
        width: clamp(84px, 8vw, 112px);
        height: clamp(56px, 5.2vw, 76px);
    }
}

.c-ticker__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}

.c-ticker__item:hover .c-ticker__thumb {
    transform: scale(1.08);
}

.c-ticker__title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.45;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 769px) {
    .c-ticker__title {
        font-size: 15px;
    }
}

@media (min-width: 1401px) {
    .c-ticker__title {
        font-size: clamp(13px, 1.1vw, 15px);
    }
}

.c-ticker__item:hover .c-ticker__title {
    text-decoration: none;
}

.c-ticker__nav {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex-shrink: 0;
}

.c-ticker__nav button {
    width: 26px;
    height: 22px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    transition:
        opacity 0.2s,
        background 0.2s;
}

.c-ticker__nav button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}

/* ===== Component: c-section-header ===== */

/* 前面コンテンツを背景マーキーより上に */
.c-section-header,
.p-news__cards {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-section-header {
    display: flex;
    margin-bottom: clamp(10px, 1.5vw, 16px);
    align-items: flex-start;
    flex-direction: column;
}

@media (min-width: 769px) {
    .c-section-header {
        margin-bottom: clamp(14px, 2vw, 24px);
        align-items: flex-end;
        gap: 30px;
        flex-direction: row;
    }
}

#news .c-section-header {
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
}

@media (min-width: 769px) {
    #news .c-section-header {
        gap: 30px;
    }
}

.c-section-header__title {
    /* 装飾英字タイトル。中身は文字単位SVG（c-svgtext）が基本だが、テキストのまま組む場合も
       Oswald で表示されるよう font-family を指定（SVGグリフは font-family を無視するので無害）。 */
    font-family: var(--font-display);
    font-size: clamp(54px, 8vw, 80px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--base);
}

@media (min-width: 769px) {
    .c-section-header__title {
        font-size: clamp(56px, 9.5vw, 152px);
    }
}

/* セクション英字タイトルの文字単位SVG（Oswald wght600 をアウトライン化＝Webフォント読込に依存せず即表示）。
   1文字＝.c-svgtext__char(inline-block)＞.c-svgtext__glyph。色は currentColor で親(__title 等)の color を継承
   ＝--invert でも白で出る。height:0.95em（viewBox 950u 内のキャップ810u→実0.81em＝フォントのキャップ高に一致）。
   字送りは親の letter-spacing が inline-block 間に効く。せり上がりは main.js の splitChars が各 char を
   inline-block 化して gsap でせり上げ（テキスト版と同じ＝アニメ側は無改修）。他の英字タイトルにも流用可。 */
.c-svgtext__char {
    display: inline-block;
    /* フォント非依存の縦揃え。既定の baseline だと親フォント(Oswald)の読込前後で
       ベースライン位置が変わり、SVG文字が縦にカクッとずれる（FOUT時のジャンプ）。
       bottom（行box下端揃え）で固定し、フォント読込に左右されないようにする。 */
    vertical-align: bottom;
}

/* 語間スペース（幅は文字送り由来で inline style に em 指定）。
   inline-block で非flex親（c-section-header__title 等）でも width を効かせる
   ＝JS無効/reduce-motion で splitChars が走らない場合も語間が潰れない。 */
.c-svgtext__sp {
    display: inline-block;
    vertical-align: bottom;
    flex: 0 0 auto;
}

.c-svgtext__glyph {
    display: block;
    height: 0.95em;
    width: auto;
    fill: currentColor;
}

/* 下層ページ用バリアント：英字タイトルを小さめにしてヘッド高さを抑える
   （TOPのセクション見出しは従来サイズのまま。下層ページのヘッドにのみ付与）。 */
.c-section-header--page {
    margin-bottom: 0;
    /* SPでも英字タイトルと和文ラベルを横並びに（ベース＝SPを row 化）。
       PCは元々 row なので gap だけ下のメディアで従来値(30)に戻す。 */
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    .c-section-header__title {
        font-size: clamp(48px, 8vw, 128px);
    }
}

@media (min-width: 769px) {
    .c-section-header--page {
        gap: 30px;
    }
}

.c-section-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--base);
    margin-left: 0.5em;
    margin-bottom: 0;
    padding-top: 8px; /* SP：英字タイトルと詰まって見えないよう少し余白（全ページ共通） */
}

@media (min-width: 769px) {
    .c-section-header__eyebrow {
        gap: 30px;
        font-size: 16px;
        margin-bottom: 1.5em;
        padding-top: 0; /* PCは従来どおり余白なし */
    }
}

/* SP：下層ヘッド（--page）の和文ラベルを少し上げ、左の大型英字タイトルの下端と視覚的に揃える
   （英字の line-height 1.25 による下余白分を相殺）。斜め棒(::before)も一緒に上がる。 */
@media (max-width: 768px) {
    .c-section-header--page .c-section-header__eyebrow {
        margin-bottom: 0.6em;
    }
}

/* SP縦積みバリアント（再利用可）：SP（≤768px）でのみ英字タイトルと和文ラベルを縦積みにする。
   横並び（--page 等）で和文が窮屈に折り返すのを防ぐ。PC（≥769px）は元のレイアウトのまま。
   ※他ページの黒帯ヘッドでも併用できる汎用クラス。 */
@media (max-width: 768px) {
    .c-section-header--sp-stack {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .c-section-header--sp-stack .c-section-header__eyebrow {
        margin-left: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .c-section-header__eyebrow::before,
    .p-movie__hero-label-eyebrow::before {
        height: 1.5em;
    }
}

/* あしらい：左横の斜めの棒（背景塗り） */
.c-section-header__eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2px;
    height: 2em;
    background: var(--g800);
    transform: skewX(-25deg); /* 斜めに */
    margin-left: 4px;
}

/* 白文字バージョン（暗い背景の上に置く場合） */
.c-section-header--invert .c-section-header__title {
    color: var(--white);
}

.c-section-header--invert .c-section-header__eyebrow {
    color: var(--white);
}

.c-section-header--invert .c-section-header__eyebrow::before {
    background: rgba(255, 255, 255, 0.5);
}

.c-section-header--invert .c-section-header__eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 3px;
    height: 1.6em;
    background: #fff;
    transform: skewX(-25deg);
    margin-left: 4px;
}

@media (max-width: 768px) {
    .c-section-header--invert .c-section-header__eyebrow::before {
        width: 1px;
    }
}

.c-section-header__sub {
    font-size: 16px;
    letter-spacing: 0.06em;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 16px;
}

/* 下層ページ黒帯ヘッド[data-nav-hero]の共通背景。section_bg.jpg は黒基調のため
   ダークオーバーレイは不要（白文字はそのまま可読）。color は読込前/失敗時のフォールバック。
   ページ固有の背景にしたい場合は、そのページのヘッドクラスで background-image を上書きする。 */
[data-nav-hero] {
    background-color: var(--base);
    background-image: url("../images/common/section_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* FOUC対策（下層ページの黒帯ヘッド＝[data-nav-hero] 共通）：
   ヘッド内の見出しはファーストビュー内にあるため、JSがせり上がり開始状態を当てる前に
   一瞬「見えてから消える」チラつきが出る。初期は不可視（レイアウトは保持）にし、
   main.js が開始状態を確定後 or 非演出時（reduce-motion / GSAP未読込）に
   .is-revealed を付けて表示する。news固有ではなく [data-nav-hero] を持つ全ヘッド共通。 */
[data-nav-hero] .c-section-header {
    visibility: hidden;
}

[data-nav-hero] .c-section-header.is-revealed {
    visibility: visible;
}

/* サブ見出しバリアント（セクション内の小見出し＝関連記事など）。
   英字タイトルを TOP より小さく、SPでも英字＋和文を横並び（左＝英字／右＝和文＋斜め棒）。
   明背景に置く想定（--invert は付けない＝濃色テキスト）。 */
.c-section-header--sub {
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.c-section-header--sub .c-section-header__title {
    font-size: clamp(28px, 4vw, 44px);
}

.c-section-header--sub .c-section-header__eyebrow {
    /* 小さい英字タイトルの下端に和文＋斜め棒を合わせる */
    margin-bottom: 0.35em;
}

/* ===== Component: c-slider ===== */

/* ── レスポンシブ ── */
/* 下部コントロール行：共通（.c-slider） */
.c-slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 clamp(24px, 5vw, 80px);
}

.c-slider__arrows {
    display: flex;
    gap: 10px;
}

.c-slider__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--base);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--base);
    padding: 0.85em 1em 0.85em 1.4em;
    transition:
        background 0.25s,
        color 0.25s;
    flex: 1;
}

@media (min-width: 769px) {
    .c-slider__link {
        min-width: 300px;
        font-size: 18px;
        padding: 1em 1.6em 1em 2em;
        flex: 0 1 auto;
    }
}

.c-slider__link .c-icon {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.c-slider__link:hover {
    background: var(--base);
    color: var(--white);
}

.c-slider__link:hover .c-icon {
    transform: translateX(5px);
}

.c-slider__btn {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--g100);
    color: var(--black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        opacity 0.2s;
    font-size: 20px;
}

@media (min-width: 769px) {
    .c-slider__btn {
        width: 60px;
        height: 60px;
        font-size: 13.3333px;
    }
}

.c-slider__btn .c-icon {
    font-size: 28px;
}

.c-slider__btn:not(:disabled):hover {
    background: var(--g200);
}

.c-slider__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.c-slider__btn--invert {
    background: rgba(14, 17, 22, 0.08);
    color: var(--base);
}

.c-slider__btn--invert:not(:disabled):hover {
    background: rgba(14, 17, 22, 0.16);
}

/* ===== Component: c-news-card ===== */

/* PC：2.5枚分の幅 → 3枚目が半分覗き、横に続きがあると分かる */
.c-news-card {
    flex: 0 0 min(calc((100% - 2 * var(--news-gap)) / 2.5), 580px);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.c-news-card {
    -webkit-user-drag: none;
    flex: 0 0 calc((100% - 0.2 * var(--news-gap)) / 1.2);
}

@media (min-width: 481px) {
    .c-news-card {
        flex: 0 0 calc((100% - 1.3 * var(--news-gap)) / 2.3);
    }
}

@media (min-width: 769px) {
    .c-news-card {
        flex: 0 0 min(calc((100% - 2 * var(--news-gap)) / 2.5), 580px);
    }
}

.c-news-card__photo {
    position: relative;
    overflow: hidden;
}

.c-news-card__photo .c-ph {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.c-news-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.c-news-card:hover .c-news-card__img {
    transform: scale(1.07);
}

.c-news-card__new {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--base);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 5px 12px;
}

.c-news-card__cat {
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: var(--black);
    color: var(--white);
    padding: 4px 10px;
}

.c-news-card__date {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: var(--g800);
}

.c-news-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
}

.c-news-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--base);
    /* PC/SPとも2行でまとめ、3行目以降は … で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* meta/title の左右パディング（SP/PC共通）。横スクロール時の右余白などのため。 */
.c-news-card__meta,
.c-news-card__title {
    padding-left: 0.5em;
    padding-right: 2em;
}

.c-news-card:hover .c-news-card__title {
    color: var(--g800);
}

/* 横並びバリアント（ニュース詳細の関連記事など）：左サムネ＋右テキスト。
   meta/title はベースの左右パディングを解除してテキストカラムに合わせる。 */
.c-news-card--horizontal {
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
}

.c-news-card--horizontal .c-news-card__photo {
    flex: 0 0 clamp(120px, 30%, 200px);
}

.c-news-card--horizontal .c-news-card__body {
    flex: 1;
    min-width: 0;
}

.c-news-card--horizontal .c-news-card__meta {
    margin: 0 0 4px; /* SP：下4px */
    padding: 0;
}

@media (min-width: 769px) {
    .c-news-card--horizontal .c-news-card__meta {
        margin-bottom: 8px; /* PC：下8px */
    }
}

.c-news-card--horizontal .c-news-card__title {
    padding: 0;
}

/* SP：横並びカードはテキスト幅が狭いので、タイトルを14px・2行までに（3行目以降は … で省略）。 */
@media (max-width: 768px) {
    .c-news-card--horizontal .c-news-card__title {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* ===== Component: c-movie-card ===== */

.c-movie-card__play {
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    font-size: 30px;
    color: #fff;
    font-variation-settings:
        "FILL" 1,
        "wght" 100;
}

@media (min-width: 769px) {
    .c-movie-card__play {
        bottom: 12px;
        right: 12px;
        font-size: 32px;
    }
}

.c-movie-card {
    flex: 0 0 clamp(220px, 72vw, 300px);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    -webkit-user-drag: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

@media (min-width: 769px) {
    .c-movie-card {
        flex: 0 0 clamp(240px, 24vw, 360px);
    }
}

.c-movie-card img {
    transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.c-movie-card:hover img {
    transform: scale(1.06);
}

.c-movie-card .p-movie__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0) 50%
    );
    pointer-events: none;
}

.c-movie-card__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--base);
    margin-top: 12px;
    /* 2行でまとめ、3行目以降は … で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.c-movie-card__meta {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.c-movie-card:hover .c-movie-card__title {
    color: var(--base);
}

/* ===== Component: c-player-card ===== */

/* ── カード1枚 ── */
.c-player-card {
    flex: 0 0 calc((100% - var(--pl-pad)) / 1.2);
    position: relative;
    overflow: hidden;
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-user-drag: none;
    background: var(--g100);
}

@media (min-width: 481px) {
    .c-player-card {
        flex: 0 0 calc((100% - var(--pl-pad)) / 1.8);
    }
}

@media (min-width: 769px) {
    .c-player-card {
        flex: 0 0 min(calc((100% - var(--pl-pad)) / 3.2), 460px);
    }
}

/* 写真 */
.c-player-card__photo {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.c-player-card:hover .c-player-card__photo {
    transform: scale(1.04) translateX(1%);
}

/* 背面にぼんやり浮かぶ選手番号 */
.c-player-card__num-bg {
    position: absolute;
    bottom: -0.1em;
    right: -0.05em;
    font-family: var(--font-display);
    font-size: clamp(100px, 18vw, 220px);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
    color: rgba(14, 17, 22, 0.05);
    z-index: 2;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.4s;
}

.c-player-card:hover .c-player-card__num-bg {
    opacity: 0.5;
}

/* 下部グラデーションオーバーレイ */
.c-player-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 30%,
        rgba(255, 255, 255, 0) 60%
    );
    opacity: 1;
    transition: opacity 0.4s ease;
}

@media (min-width: 481px) {
    .c-player-card__overlay {
        background: linear-gradient(
            to top right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.6) 45%,
            rgba(255, 255, 255, 0.05) 70%,
            transparent 100%
        );
        opacity: 0.3;
    }
}

.c-player-card:hover .c-player-card__overlay {
    opacity: 1;
}

/* 下端の白100%を常に固定するベース層（hoverで変化しない） */
.c-player-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
}

@media (max-width: 480px) {
    .c-player-card::after {
        display: none;
    }
}

/* テキスト情報 */
.c-player-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 22px)
        clamp(18px, 2.4vw, 28px);
    z-index: 4;
    transform: translateY(4px);
}

.c-player-card__pos {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--base);
    margin-bottom: 6px;
    font-family: var(--font-display);
}

.c-player-card__number {
    font-family: var(--font-display);
    font-size: clamp(60px, 7.5vw, 100px);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--base);
    line-height: 1;
    margin-bottom: 8px;
}

.c-player-card__name-en {
    font-family: var(--font-display);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--base);
    line-height: 1.2;
}

.c-player-card__name-jp {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--base);
    margin-top: 3px;
}

/* ===== Component: c-pagination ===== */
/* ページ送り。現在ページ＝黒丸、前後＝丸枠ボタン（Material Symbols）。数字は Oswald。
   ニュース一覧で使用。p- に依存しないので他ページでも <nav class="c-pagination"> で再利用可。 */
.c-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: clamp(40px, 6vw, 72px);
}

/* 数字（円）。基本は枠なし、ホバーで淡い円。現在ページ＝黒丸。 */
.c-pagination__link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--g700);
    text-decoration: none;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s;
}

.c-pagination__link:hover {
    background: var(--g100);
    color: var(--base);
}

.c-pagination__link.is-current {
    background: var(--base);
    color: var(--white);
}

/* 前後ボタン（丸枠＋アイコン） */
.c-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--g400);
    border-radius: 50%;
    color: var(--base);
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.c-pagination__btn .c-icon {
    font-size: 22px;
}

.c-pagination__btn:hover {
    background: var(--base);
    color: var(--white);
    border-color: var(--base);
}

.c-pagination__btn.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.c-pagination__ellipsis {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--g500);
    padding: 0 2px;
}

/* ===== Page (TOP): p-hero ===== */

/* ════════════════════════════════════════
   OPENING SCENE — HERO
   ════════════════════════════════════════ */
/* ヒーローは sticky で画面に固定＝背景画像が固定される。
   前景（コピー・ティッカー）は JS でスクロールに合わせ上へ流す（固定しない）。 */
/* ベース＝SP：100svh（ツールバー表示時の小さい方の高さ）。
   100vh だとツールバーの裏まで伸び、下端のティッカーが隠れる。
   1行目の 100vh は svh 非対応ブラウザ向けのフォールバック。
   min-height は SP では持たせない（小さい端末で svh を上回ると
   結局ティッカーが画面外へ出るため）。 */
.p-hero {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    z-index: 0;
}

@media (min-width: 769px) {
    .p-hero {
        height: 100vh;
        min-height: 640px;
    }
}

.p-hero__photo {
    position: absolute;
    inset: 0;
}

/* ヒーロー実写真スライドショー（各5秒ズームイン＋クロスフェード・ループ） */
.p-hero__slides {
    position: absolute;
    inset: 0;
}

.p-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.p-hero__slide.is-active {
    opacity: 1;
}

.p-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
    transform: scale(1.02);
    /* ズーム量・速度はJSで制御（退場画像は縮めず拡大を継続したままクロスフェード） */
    transition: transform 7s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .p-hero__slide img {
        transition: none;
        transform: none;
    }
}

/* オーバーレイ：PCは文字のかかる左側だけ暗く・右半分は透過（元画像の明るさ） */
.p-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(12, 14, 18, 0.82) 0%,
        rgba(12, 14, 18, 0.5) 35%,
        rgba(12, 14, 18, 0) 62%
    );
}

@media (max-width: 768px) {
    .p-hero__photo::after {
        background: linear-gradient(
            to top,
            rgba(12, 14, 18, 0.85) 0%,
            rgba(12, 14, 18, 0.5) 42%,
            rgba(12, 14, 18, 0) 72%
        );
    }
}

/* SPは文字のかかる下側だけ暗く・上部は透過（元画像の明るさ） */
/* giant type */
.p-hero__type {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 clamp(20px, 5vw, 80px) clamp(28px, 5vh, 56px);
    pointer-events: none;
    padding-bottom: clamp(200px, 30vh, 280px);
}

@media (min-width: 769px) {
    .p-hero__type {
        padding-bottom: clamp(150px, 22vh, 210px);
    }
}

@media (min-width: 1401px) {
    .p-hero__type {
        padding-bottom: 45px;
    }
}

/* 各行＝文字単位SVGの横並び。overflow:hidden は「1文字ずつ下からせり上がる」ための縦マスク
   （行は全幅なので TOKYO アウトラインの左右ストロークは切らない）。 */
.p-hero__line {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* 1文字＝せり上がりの単位（flex item）。リロード再生時のCSSアニメ／初回オープニングのgsapとも
   この要素を対象に yPercent:115 で動かす（NEWS見出し .c-section-header__title と同パラメータ）。 */
.p-hero__char {
    display: block;
}

.p-hero__sp {
    flex: 0 0 auto;
    /* 幅は文字送り由来で inline style に em 指定 */
}

.p-hero__statement {
    /* font-size は SVG 各文字の高さ基準(em)として継続使用。
       14vw（横幅基準）だけだと「横広・縦低」デバイス（縮小表示ノートPC・横向き端末等）で
       3行が縦に収まらずヘッダー（ロゴ）と重なる。min(14vw, 21vh) で縦が低い画面では
       文字を縮め、ヘッダーとの干渉を防ぐ（縦が十分ある通常デスクトップは 200px 上限で従来どおり）。 */
    font-size: clamp(72px, min(14vw, 21vh), 200px);
    /* 見出しせり上がりの「波の詰まり」＝1文字ごとの開始ずらし量。ここ1か所で調整可
       （loader.js の gsap stagger と揃えること）。各文字は --i（0,1,2…）を持ち delay = --i × これ */
    --hero-stag: 0.03s;
}

/* 見出しはOswaldをアウトライン化したインラインSVG（Webフォント読込に依存せず即表示）。
   viewBox は 950u 縦・字面(キャップ高810u)の上下に70uの余白を内包＝行高0.95em（=950/1000）で
   旧テキストの line-height:0.95 とベースライン間隔が一致し、TOKYO のアウトライン線が
   loaderマスク(.p-hero__line overflow:hidden)で欠けない余白も兼ねる。 */
.p-hero__svg {
    display: block;
    height: 0.95em;
    width: auto;
    fill: #ffffff;
    overflow: visible;
}

/* TOKYO のみ塗り無し＋白アウトライン。stroke-width は user-unit(viewBox単位)＝文字と一緒に拡縮。
   1u = font-size/1000px。SP は太め、PC(文字が約2.8倍大)は細くして見た目の太さを揃える。 */
.p-hero__svg--outline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 18px;
    overflow: visible;
}

@media (min-width: 769px) {
    .p-hero__svg--outline {
        stroke-width: 12px;
    }
}

.p-hero__sub {
    margin-top: 28px;
    font-size: clamp(13px, 1.4vw, 18px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
}

.p-hero__sub-jp {
    display: block;
    margin-left: 0;
    font-size: clamp(15px, 1.5vw, 19px);
    letter-spacing: 0.15em;
    color: #ffffff;
    font-weight: 600;
    margin-top: 6px;
}

@media (min-width: 769px) {
    .p-hero__sub-jp {
        display: inline-block;
        margin-top: 0px;
    }
}

/* 幅1400px以下：右側に置くと巨大タイポと干渉するため、サブコピーの下（最下部・左揃え）へ。
   ニュースが下に回り被らないので、vw縮小は解除して固定サイズに戻す。 */
/* nav overlay on hero */
.p-hero__nav-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(12, 14, 18, 0.55), transparent);
    z-index: 1;
}

/* ===== Page (TOP): p-news ===== */

/* ── RESPONSIVE ── */
/* ════════════════════════════════════════
   PHASE 1 — 追加セクション
   ════════════════════════════════════════ */
/* ── 01 / NEWS ── */
.p-news {
    padding: clamp(107px, 13vw, 187px) clamp(24px, 5vw, 80px)
        clamp(60px, 8vw, 110px);
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .p-news .c-section-header {
        margin-top: -40px;
    }
}

/* 背景マーキー：大型英字が右→左へ無限ループ（コンテンツの背面） */
.p-news__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-news__bg {
        top: clamp(20px, 4.3vw, 80px);
    }
}

.p-news__bg-track {
    display: inline-flex;
    will-change: transform;
    animation: news-bg-scroll 120s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .p-news__bg-track {
        animation: none;
    }
}

/* 背景マーキー＝「TOKYO RESISTARS」の極薄フラットテキスト（Oswald）。
   末尾スペースで繰り返し間隔を確保。横スクロールのループ（4スパン→translateX(-50%)）は
   news-bg-scroll を継続。 */
.p-news__bg-track span {
    font-family: var(--font-display);
    font-size: clamp(64px, 16vw, 200px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(14, 17, 22, 0.045);
}

@keyframes news-bg-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.p-news__cards li {
    display: contents;
}

.p-news__cards {
    --news-gap: 1px;
    --news-pad: clamp(24px, 5vw, 80px); /* セクション横パディングと同値 */
    display: flex;
    gap: var(--news-gap);
    overflow-x: auto;
    /* スナップ無し（慣性後のカクつき防止） */
    /* フルブリード：セクションの横パディングを打ち消し画面端まで広げる。
       左パディングで初期表示時のみ左余白（タイトルと揃える）を確保、
       右は画面端までカードを見せて余白をなくす */
    margin: 0 calc(-1 * var(--news-pad));
    padding: 0 var(--news-pad) clamp(20px, 4vw, 40px);
    scroll-padding-left: var(--news-pad); /* スナップ時も左余白を維持 */
    -webkit-overflow-scrolling: touch;
}

/* スクロールバー非表示 ＋ ドラッグスクロール */
.p-news__cards {
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
}

.p-news__cards::-webkit-scrollbar {
    display: none;
}

.p-news__cards.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* ニュースセクション：slider-controls の padding 上書き（セクションにpadding無し） */
.p-news .c-slider {
    padding: 0;
}

/* ── 一覧ページ用バリアント：横スクロールではなく3カラム折り返し（SP1カラム） ──
   news_list で <ul class="p-news__cards p-news__cards--newslist"> として使用。
   TOPと同じ flex のまま、flex-wrap で折り返す。全 .p-news__cards 定義より後に置き、
   横スクロール用の指定（overflow-x / フルブリード負マージン / grab）を上書きする。
   li は .p-news__cards li{display:contents} のままで、c-news-card が直接 flex 項目になる。 */
.p-news__cards--newslist {
    --nl-gap: 1px; /* 横（列）の隙間。TOP の --news-gap と同じ密着感。カード幅計算にも使用 */
    flex-wrap: wrap;
    gap: clamp(32px, 4vw, 56px) var(--nl-gap); /* 行（縦）は広め／列（横）は1px */
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: auto;
}

/* カード幅：SPは1カラム（全幅）、PCは3カラム（gap2つ分を引いて÷3）。
   c-news-card の横スクロール用 flex 指定を上書きする。 */
.p-news__cards--newslist .c-news-card {
    flex: 0 0 100%;
}

@media (min-width: 769px) {
    .p-news__cards--newslist .c-news-card {
        flex: 0 0 calc((100% - 2 * var(--nl-gap)) / 3);
    }
}

/* ===== Page (TOP): p-movie ===== */

/* ── 02 / VIDEO — Netflix風（ダーク） ── */
.p-movie {
    padding: 0 0 clamp(30px, 5vw, 60px);
    background: #f8f8f8;
    color: var(--base);
    overflow: hidden;
    position: relative;
}

.p-movie__video {
    position: relative;
    overflow: hidden;
}

.p-movie__iframe-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

.p-movie__video img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.p-movie__iframe {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    border: none;
}

.p-movie__video .c-ph {
    width: 100%;
    aspect-ratio: 16/9;
}

.p-movie__hero-wrapper {
    background: #000;
    position: relative;
}

.p-movie__hero-info-box {
    position: relative;
    top: auto;
    transform: none;
    left: 0;
    width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
    padding: 40% 24px 24px;
}

@media (min-width: 769px) {
    .p-movie__hero-info-box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: clamp(24px, 5vw, 80px);
        width: max(min(36%, 480px), 320px);
        padding: 0px;
    }
}

@media (max-width: 768px) {
    .p-movie__hero-info {
        position: static;
        bottom: auto;
        left: auto;
        width: 100%;
        display: block;
        margin-top: 16px;
        transform: none;
    }
}

@media (min-width: 1600px) {
    .p-movie__hero-info {
        bottom: 20%;
    }
}

.p-movie__hero-video-box {
    width: 100%;
    margin-left: 0;
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (min-width: 769px) {
    .p-movie__hero-video-box {
        width: 80vw;
        margin-left: auto;
        position: static;
        inset: auto;
        z-index: auto;
    }
}

@media (max-width: 768px) {
    .p-movie__hero-video-box iframe {
        pointer-events: none;
    }
}

.p-movie__hero-label {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

@media (min-width: 769px) {
    .p-movie__hero-label {
        flex-direction: column;
        align-items: flex-start;
    }
}

.p-movie__hero-label-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 9.5vw, 152px);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-transform: uppercase;
    color: #fff;
}

.p-movie__hero-label-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #fff;
    padding-left: 1em;
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .p-movie__hero-label-eyebrow {
        gap: 30px;
        font-size: 16px;
        margin-left: 0px;
        margin-bottom: 0px;
    }
}

.p-movie__hero-label-eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2px;
    height: 2em;
    background: rgba(255, 255, 255, 0.5);
    transform: skewX(-25deg);
    margin-left: 4px;
}

.p-movie__hero-video {
    width: 100%;
    max-width: 1200px;
    margin-left: 0;
    position: relative;
}

@media (min-width: 769px) {
    .p-movie__hero-video {
        margin-left: auto;
    }
}

.p-movie__hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .p-movie__hero-video::after {
        display: block;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.1) 60%,
            rgba(0, 0, 0, 0.1) 100%
        );
    }
}

.p-movie__hero-link {
    text-decoration: none;
    cursor: pointer;
}

.p-movie__hero-cat {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
}

.p-movie__hero-title-wrap {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

.p-movie__hero-title {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: inherit;
    font-size: clamp(16px, 4.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
}

@media (min-width: 769px) {
    .p-movie__hero-title {
        font-size: clamp(22px, 2vw, 46px);
    }
}

.p-movie__hero-title:hover {
    text-decoration: none;
}

.p-movie__hero-meta {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 14px;
}

.p-movie__hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.8em 1.2em;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.7);
    max-width: none;
    transition:
        background 0.25s,
        color 0.25s,
        border-color 0.25s;
    width: 100%;
}

@media (min-width: 769px) {
    .p-movie__hero-cta {
        display: inline-flex;
        font-size: 18px;
        padding: 1em 1.6em 1em 2em;
        max-width: 300px;
        width: 300px;
    }
}

.p-movie__hero-cta .c-icon {
    font-size: 22px;
    transition: transform 0.25s ease;
}

@media (min-width: 769px) {
    .p-movie__hero-cta .c-icon {
        font-size: 24px;
    }
}

.p-movie__hero-cta:hover,
.p-movie__hero-link:hover .p-movie__hero-cta {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.p-movie__hero-link:hover .p-movie__hero-cta .c-icon {
    transform: translateX(4px);
}

/* Netflix風の行：横スクロール／ホバーで拡大 */
.p-movie__cards {
    --mgap: clamp(8px, 1vw, 14px);
    position: relative;
    z-index: 4;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--mgap);
    overflow-x: auto;
    padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 80px);
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}

.p-movie__cards li {
    display: contents;
}

.p-movie__cards::-webkit-scrollbar {
    display: none;
}

.p-movie__cards.is-dragging {
    cursor: grabbing;
    user-select: none;
}

@media (max-width: 768px) {
    .p-movie__thumb {
        flex-basis: 46%;
    }
}

/* ===== Page (TOP): p-players ===== */

/* ════════════════════════════════════════
   02 / PLAYERS
   ════════════════════════════════════════ */
.p-players {
    position: relative;
    background: var(--white);
    padding: 0 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
}

/* 第1フェーズ：プレイ中写真1枚＋VIEW PLAYERS の誘導ヒーロー */
.p-players__hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--base);
    background-image: url("../images/top/player_bg.webp");
    background-size: cover;
    background-position: center;
    padding: clamp(40px, 5.5vw, 80px) clamp(24px, 5vw, 80px);
}

.p-players__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 10, 14, 0.55),
        rgba(8, 10, 14, 0.2) 45%,
        rgba(8, 10, 14, 0.55)
    );
    pointer-events: none;
}

.p-players__hero-cta {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: transparent;
    padding: 0.95em 1.6em;
    border: 1px solid var(--white);
    transition:
        background 0.25s,
        color 0.25s;
}

/* PC＝右寄せ／SP（ベース）＝左寄せ（モバイルファースト） */
@media (min-width: 769px) {
    .p-players__hero-cta {
        align-self: flex-end;
    }
}

.p-players__hero-cta .c-icon {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.p-players__hero-cta:hover {
    background: var(--white);
    color: var(--base);
}

.p-players__hero-cta:hover .c-icon {
    transform: translateX(5px);
}

/* 第1フェーズ：ボタンの代わりに表示する Coming Soon */
.p-players__hero-soon {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    background: transparent;
    padding: 0.95em 1.6em;
    border: 1px solid var(--white);
    opacity: 0.55;
    cursor: default;
    margin-top: 20px;
}

/* PC＝右寄せ／SP（ベース）＝左寄せ（モバイルファースト） */
@media (min-width: 769px) {
    .p-players__hero-soon {
        align-self: flex-end;
    }
}

/* ── カードストリップ ── */
.p-players__strip {
    --pl-gap: 2px;
    --pl-pad: clamp(24px, 5vw, 80px); /* セクション横パディングと同値 */
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    gap: var(--pl-gap);
    overflow-x: auto;
    scroll-behavior: auto;
    /* フルブリード：セクションの横パディングを打ち消し画面端まで広げる。
       左パディングで初期表示の左余白（タイトルと揃える）を確保、
       右は画面端までカードを見せて余白をなくす（news-cards / movie-cards と同様） */
    margin: 0 calc(-1 * var(--pl-pad)) clamp(20px, 4vw, 40px);
    padding: 0 var(--pl-pad);
    scroll-padding-left: var(--pl-pad);
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.p-players__strip li {
    display: contents;
}

.p-players__strip::-webkit-scrollbar {
    display: none;
}

.p-players__strip.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* controlsエリア */
.p-players .c-slider {
    position: relative;
    z-index: 1;
    /* セクション側に横パディングがあるため、共通の padding を打ち消して二重インセットを防ぐ
       （見出し「Players」と同じ位置に左右を揃える） */
    padding: 0;
}

/* ===== Page (TOP): p-vision ===== */

/* ════════════════════════════════════════
   05 / VISION
   ════════════════════════════════════════ */
.p-vision {
    position: relative;
    overflow: hidden;
}

/* 背景写真（フルブリード） */
.p-vision__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-vision__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-vision__bg .c-ph {
    width: 100%;
    height: 100%;
    min-height: 640px;
}

/* 下部を重点的に暗くし、コンテンツの可読性を確保 */
.p-vision__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, 0.97) 0%,
        rgba(8, 10, 14, 0.75) 30%,
        rgba(8, 10, 14, 0.35) 60%,
        rgba(8, 10, 14, 0.05) 100%
    );
}

/* コンテンツオーバーレイ */
.p-vision__inner {
    position: relative;
    z-index: 10;
    gap: 10vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(40px, 5.5vw, 80px) clamp(24px, 5vw, 80px);
    color: #fff;
    min-height: auto;
}

@media (min-width: 769px) {
    .p-vision__inner {
        min-height: 0px;
    }
}

/* section-header の余白リセット */
.p-vision__section-hd {
    padding: 0;
    margin-bottom: 0;
}

/* 下部エリア */
.p-vision__bottom {
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}

@media (min-width: 769px) {
    .p-vision__bottom {
        margin-top: 0px;
    }
}

.p-vision__headline {
    font-family: var(--font-display);
    font-size: clamp(16px, 10vw, 120px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: clamp(32px, 3.5vw, 52px);
}

@media (min-width: 769px) {
    .p-vision__headline {
        font-size: clamp(56px, 8vw, 124px);
        line-height: 0.88;
    }
}

/* 「TO THE」＝白アウトライン（袋文字） */
.p-vision__headline-outline {
    color: transparent;
    -webkit-text-stroke: 0.8px #fff;
}
@media (min-width: 769px) {
    .p-vision__headline-outline {
        -webkit-text-stroke: 1.5px #fff;
    }
}

/* フッターエリア（仕切り線 + コンテンツ行） */
.p-vision__foot-rule {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

.p-vision__foot-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    flex-direction: column;
}

@media (min-width: 769px) {
    .p-vision__foot-row {
        gap: clamp(24px, 4vw, 60px);
        flex-direction: row;
    }
}

.p-vision__desc {
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    line-height: 2;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.05em;
    flex: 1;
    min-width: 180px;
}

/* CTA */
.p-vision__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 0.9em 1.8em;
    flex-shrink: 0;
    align-self: flex-start;
    white-space: nowrap;
    transition:
        background 0.25s,
        border-color 0.25s;
}

.p-vision__cta .c-icon {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.p-vision__cta:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

.p-vision__cta:hover .c-icon {
    transform: translateX(5px);
}

/* ===== Page (TOP): p-homeground ===== */

/* ── SP ── */
/* ════════════════════════════════════════
   06 / HOME GROUND
   ════════════════════════════════════════ */
.p-homeground {
    position: relative;
    overflow: hidden;
    border-top: var(--rule);
    padding: 48px 24px 28px;
}

@media (min-width: 769px) {
    .p-homeground {
        padding: 100px 80px 48px;
    }
}

.p-homeground__banner {
    margin-inline: -24px;
}
@media (min-width: 769px) {
    .p-homeground__banner {
        margin-inline: 0;
    }
}

.p-homeground__grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 769px) {
    .p-homeground__grid {
        grid-template-columns: 1fr 1fr;
        margin-top: clamp(24px, 3vw, 48px);
    }
}

.p-homeground__left {
    border-right: none;
}

@media (min-width: 769px) {
    .p-homeground__left {
        border-right: var(--rule);
    }
}

.p-homeground__banner-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    height: auto;
}

@media (min-width: 769px) {
    .p-homeground__banner-img {
        aspect-ratio: 21 / 8;
    }
}

.p-homeground__left-body {
    padding: clamp(20px, 2.5vw, 36px) clamp(24px, 4vw, 56px)
        clamp(20px, 2.5vw, 36px) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 0;
}

@media (min-width: 769px) {
    .p-homeground__left-body {
        padding-top: 0;
        padding-right: clamp(24px, 4vw, 56px);
    }
}

.p-homeground__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--g500);
    margin-bottom: 14px;
}

.p-homeground__eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2px;
    height: 1.6em;
    background: var(--g400);
    transform: skewX(-25deg);
}

.p-homeground__headline {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 100px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--base);
    margin-bottom: 20px;
}

.p-homeground__body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--g700);
    letter-spacing: 0.03em;
    margin-bottom: 24px;
}

.p-homeground__cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 24px;
}

.p-homeground__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--base);
    text-decoration: none;
    border: 1px solid var(--base);
    padding: 1em 1.6em 1em 2em;
    transition:
        background 0.25s,
        color 0.25s;
    align-self: flex-start;
}

.p-homeground__cta .c-icon {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.p-homeground__cta:hover {
    background: var(--base);
    color: var(--white);
}

.p-homeground__cta:hover .c-icon {
    transform: translateX(5px);
}

.p-homeground__right {
    display: block;
    flex-direction: column;
}

@media (min-width: 769px) {
    .p-homeground__right {
        display: flex;
        border-top: 0px none rgb(20, 23, 26);
    }
}

.p-homeground__info {
    padding: 0 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
    padding-left: 0;
}

@media (min-width: 769px) {
    .p-homeground__info {
        padding-left: clamp(24px, 3vw, 40px);
    }
}

.p-homeground__info-label {
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--g800);
    margin-bottom: 32px;
    font-weight: 700;
}

.p-homeground__info-item {
    display: flex;
    gap: 16px;
    padding-block: 12px;
    border-top: 1px solid var(--g200);
    letter-spacing: 0.04em;
}

.p-homeground__info-item dt {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--base);
    min-width: 80px;
    padding-top: 2px;
}

.p-homeground__info-item dd {
    font-size: 14px;
    line-height: 1.7;
    color: var(--g800);
}

/* ===== Page (TOP): p-partnertown ===== */

/* ===== PARTNER TOWN BAND（別案：帯型の導線） ===== */
.p-partnertown {
    padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 80px);
    background: var(--white);
    border-top: none;
    padding-top: 0;
}

@media (min-width: 769px) {
    .p-partnertown {
        border-top: var(--rule);
        padding-top: clamp(28px, 4vw, 48px);
    }
}

.p-partnertown__inner {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 769px) {
    .p-partnertown__inner {
        grid-template-columns: 1fr 1fr;
    }
}

.p-partnertown__head {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
    padding-left: clamp(24px, 3vw, 40px);
    background-image: url("../images/top/partnertown_bg.webp");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-partnertown__head {
        padding-left: 0;
    }
}

.p-partnertown__head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--white) 0%,
        rgba(255, 255, 255, 0.85) 35%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
}

.p-partnertown__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(36px, 4.4vw, 52px);
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--base);
}

.p-partnertown__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 769px) {
    .p-partnertown__body {
        padding-left: clamp(24px, 3vw, 40px);
        padding-right: clamp(24px, 3vw, 40px);
    }
}

.p-partnertown__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--g700);
}

/* ===== Page (TOP): p-join ===== */

/* ════════════════════════════════════════
   07 / JOIN THE MOVEMENT
   ════════════════════════════════════════ */
.p-join-scroll {
    height: 280vh;
    border-top: var(--rule);
}

@media (min-width: 769px) {
    .p-join-scroll {
        height: 260vh;
    }
}

.p-join {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: #fff;
}

@media (min-width: 769px) {
    .p-join {
        height: 100vh;
    }
}

.p-join__floating-photos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.p-join__fp {
    position: absolute;
    object-fit: cover;
    border-radius: 4px;
    transform: translateY(160vh);
    will-change: transform;
}

.p-join__fp--1 {
    top: 4%;
    left: -12%;
    width: 38vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--1 {
        top: -8%;
        left: 8%;
        width: 18vw;
    }
}

.p-join__fp--2 {
    top: 24%;
    left: -16%;
    width: 28vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--2 {
        top: 10%;
        left: 2%;
        width: 22vw;
    }
}

.p-join__fp--3 {
    bottom: 38%;
    left: -8%;
    width: 34vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--3 {
        bottom: 26%;
        left: 14%;
        width: 13vw;
    }
}

.p-join__fp--4 {
    top: 6%;
    right: -4%;
    width: 24vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--4 {
        top: 5%;
        right: 17%;
        width: 16vw;
    }
}

.p-join__fp--5 {
    top: 40%;
    right: -18%;
    width: 30vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--5 {
        top: 20%;
        right: 2%;
        width: 24vw;
    }
}

.p-join__fp--6 {
    bottom: 8%;
    right: -3%;
    width: 30vw;
    aspect-ratio: 4/3;
}

@media (min-width: 769px) {
    .p-join__fp--6 {
        bottom: 7%;
        right: 12%;
        width: 20vw;
    }
}

.p-join__content {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px)
        clamp(96px, 16vw, 200px);
    text-align: center;
    padding-bottom: clamp(60px, 12vw, 96px);
}

@media (min-width: 769px) {
    .p-join__content {
        height: 100vh;
        padding-bottom: clamp(96px, 16vw, 200px);
    }
}

.p-join__eyebrow {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--base);
    margin-top: 20px;
}

.p-join__headline {
    font-size: clamp(56px, 9.5vw, 152px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--base);
}

/* 文字SVG化に伴い、2行を行ラッパー span で構造化（旧 `.p-join__headline span` の広いセレクタは
   文字SVGの span にも当たり縦積みになるため廃止）。1行目＝JOIN（大）／2行目＝THE TEAM.（小）。 */
.p-join__headline-line {
    display: block;
}

.p-join__headline-line--sub {
    font-size: clamp(38px, 6.3vw, 100px);
}

.p-join__sub {
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--g900);
    margin-top: 20px;
    line-height: 1.8;
}

.p-join__buttons {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(300px, 72vw);
    margin-bottom: 40px;
}

@media (min-width: 769px) {
    .p-join__buttons {
        margin-top: 36px;
        width: min(360px, 80vw);
        margin-bottom: 0px;
    }
}

.p-join__buttons .p-join__btn {
    width: 100%;
    justify-content: space-between;
}

.p-join__btn {
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.6vw, 16px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--base);
    padding: 14px 20px;
    color: var(--base);
    background: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.25s,
        color 0.25s;
    width: 100%;
}

@media (min-width: 769px) {
    .p-join__btn {
        width: 360px;
    }
}

.p-join__btn-label {
    flex: 1;
    text-align: center;
}

.p-join__btn .c-icon {
    font-size: 18px;
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.p-join__btn:hover {
    background: var(--base);
    color: #fff;
}

.p-join__btn:hover .c-icon {
    transform: translateY(-50%) translateX(4px);
}

.p-join__btn.p-join__btn--primary {
    background: var(--base);
    color: var(--white);
    border-color: var(--base);
    font-weight: 700;
}

.p-join__btn.p-join__btn--primary:hover {
    opacity: 0.75;
}

.p-join__btn.p-join__btn--primary:hover {
    opacity: 0.75;
}

/* ===== Page (下層): p-news-archive ===== */
/* NEWS 一覧ページ本文。ヘッダー／フッターは inc/header.html・footer.html（TOP共通）。
   配色は style.css スキーム（--base＝濃色テキスト／--white＝白背景／--g100最淡〜--g900最濃）。
   フォントサイズは TOP（c-news-card：cat 13px／date 14px／title 15px、c-section-header__eyebrow 13px）を基準に調整。 */

/* ナビ（.c-gnav__inner）と同じグリッド：max-width 1920＋中央寄せ＋共通ガター。
   1920px以下は全幅でTOPと同じ余白、超えたら中央寄せ。左端がロゴと揃う。 */
.p-news-archive {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 80px)
        clamp(60px, 8vw, 110px);
}

/* ── ページヘッダー（黒背景・グローバルナビ下まで回り込み） ──
   body の padding-top は使わず、__head 自身がナビ高さ分の上余白を持つ。
   これで黒背景が固定ナビの下まで入り込み、ナビ（透明時＝白文字）が黒の上に乗る
   ＝TOPヒーローと同じ見え方になる。スクロール切替は data-nav-hero で制御（main.js）。 */
.p-news-archive__head {
    /* 明るめの背景画像の上に横ダークグラデーション（左暗→左80%で透明＝右側を明るく）。
       文字が左に入るため左を暗くして白文字の可読性を確保。グラデーションだけにすると
       画像が消えるので画像URLも併記。size/position/repeat は [data-nav-hero] 共通を継承。
       横パディングは __head-inner 側で（背景は全幅のまま中身だけグリッドに揃える）。
       縦＝SP：固定ナビ64px分＋余白（抑えめ） */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-news-archive__head {
        /* PC：固定ナビ84px分＋余白（抑えめ） */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッダー中身をナビと同じグリッドに（max-width 1920＋共通ガター）：左端がロゴと揃う */
.p-news-archive__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ════════════════════════════════════════
   Page: p-partners（パートナー＆スポンサー一覧）
   黒帯ヘッド＝一覧の __head と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   配色は style.css スキーム（--white=白／--base=濃）で統一。命名＝FLOCSS（p-partners__*）。
   ※本文（リード／区分グループ／CTA）はWF由来の暫定プレースホルダ。本デザイン化時に内容を調整。
   ════════════════════════════════════════ */
.p-partners__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-partners__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-partners__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

.p-partners__intro {
    padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 80px);
    text-align: center;
}

.p-partners__lead {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2;
    color: var(--base);
}

.p-partners__recruit {
    margin-top: clamp(28px, 4vw, 48px);
}

.p-partners__recruit-message {
    max-width: 760px;
    margin: 0 auto clamp(20px, 2.5vw, 28px);
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2;
    color: var(--base);
}

.p-partners__recruit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.7vw, 16px);
    font-weight: 600;
    letter-spacing: 0.1em;
    border: none;
    background: var(--base);
    padding: 1em 1.8em;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s;
}

.p-partners__recruit-btn .c-icon {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.p-partners__recruit-btn:hover {
    background: var(--g800);
}

.p-partners__recruit-btn:hover .c-icon {
    transform: translateX(5px);
}

/* ── 区分グループ（PARTNER / SPONSOR） ── */
.p-partners__group {
    padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 80px);
    border-top: var(--rule);
    text-align: center;
}

.p-partners__group-head {
    margin-bottom: clamp(28px, 4vw, 48px);
}

.p-partners__group-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--base);
}

.p-partners__coming-soon {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--g300);
}

@media (min-width: 769px) {
    .p-partners__coming-soon {
        margin-top: 60px;
    }
}

/* ── グレード（ティア） ── */
.p-partners__tier + .p-partners__tier {
    margin-top: clamp(32px, 4vw, 56px);
}

/* ティア見出し（h3相当）：英字主役の2段組み（Oswald大＋和文小・センター）。
   中身は __tier-en（英字）／__tier-ja（和文）の2スパン。 */
.p-partners__tier-label {
    text-align: center;
    margin-bottom: clamp(20px, 3vw, 28px);
}

.p-partners__tier-en {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(20px, 3.4vw, 40px);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--base);
}

.p-partners__tier-ja {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: 500;
    color: var(--g800);
    margin-top: 8px;
}

/* ── ティア色（ゴールド／シルバー／ブロンズ）──────────────
   サイト全体のモノクロ基調に対する唯一の有彩色。範囲はこの
   ティア見出しだけに限定する（ロゴ枠・本文には広げない）。
   ・英字：濃い→薄い→濃い の3点グラデ（120deg のやや斜め）。
           中央が明るくなり、金属の照りが一本入ったように見える。
   ・和文の下：同系色のカラーバー（幅60px・3px）。細いので
           3点だと変化が潰れる＝濃→淡の2色で敷く。
   色は白背景で沈まないよう彩度を落とした深めのメタリック。
   純金色（#FFD700 等）は白地でほぼ読めないため使わない。 */
.p-partners__tier--gold .p-partners__tier-en,
.p-partners__tier--silver .p-partners__tier-en,
.p-partners__tier--bronze .p-partners__tier-en {
    /* 箱の幅を文字幅ぴったりに縮める。block のままだと箱＝コンテナ
       全幅になり、グラデの端（濃い部分）が文字の外側に外れて単色に
       見えてしまう。中央寄せは text-align ではなく auto マージンで。 */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
}

/* 非対応ブラウザ用のフォールバック（単色）。
   グラデ文字は color:transparent で成立するため、この単色を先に
   置いておかないと非対応環境で文字が消える。 */
.p-partners__tier--gold .p-partners__tier-en {
    color: #8a6a17;
}
.p-partners__tier--silver .p-partners__tier-en {
    color: #5f666e;
}
.p-partners__tier--bronze .p-partners__tier-en {
    color: #7e4e2e;
}

.p-partners__tier--gold .p-partners__tier-en {
    background-image: linear-gradient(
        120deg,
        #806018 0%,
        #b08c2a 50%,
        #806018 100%
    );
}
.p-partners__tier--silver .p-partners__tier-en {
    background-image: linear-gradient(
        120deg,
        #545b62 0%,
        #8d949c 50%,
        #545b62 100%
    );
}
.p-partners__tier--bronze .p-partners__tier-en {
    background-image: linear-gradient(
        120deg,
        #6f4527 0%,
        #9c6b46 50%,
        #6f4527 100%
    );
}

/* 対応ブラウザでは文字色を透過し、背景のグラデを見せる。
   ⚠️ @supports は詳細度を上げないため、上のフォールバック
   （クラス2つ）と同じ詳細度のセレクタで書かないと打ち消せない。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .p-partners__tier--gold .p-partners__tier-en,
    .p-partners__tier--silver .p-partners__tier-en,
    .p-partners__tier--bronze .p-partners__tier-en {
        color: transparent;
    }
}

/* 和文下のカラーバー */
.p-partners__tier--gold .p-partners__tier-label::after,
.p-partners__tier--silver .p-partners__tier-label::after,
.p-partners__tier--bronze .p-partners__tier-label::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 14px auto 0;
}
.p-partners__tier--gold .p-partners__tier-label::after {
    background-image: linear-gradient(100deg, #cda93a 0%, #806018 100%);
}
.p-partners__tier--silver .p-partners__tier-label::after {
    background-image: linear-gradient(100deg, #a8afb6 0%, #545b62 100%);
}
.p-partners__tier--bronze .p-partners__tier-label::after {
    background-image: linear-gradient(100deg, #b8825b 0%, #6f4527 100%);
}

/* ── ロゴ枠：一定幅で折り返し。各グレードは列数で等分し左右端を揃える ── */
.p-partners__logos {
    --gap: clamp(12px, 1.6vw, 22px);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* PC/SP とも中央寄せ */
    gap: var(--gap);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* 枠の比率は全ティア共通＝バナー3:1（400×136／dummy_banner.jpg と一致）。
   ティアの「大きさ」差は 1行あたりの枚数（＝幅）で付ける（比率は変えない）。 */
.p-partners__logo {
    aspect-ratio: 400 / 136;
    max-width: 400px; /* バナー本来サイズ＝幅400px を超えて引き伸ばさない */
    border: var(--rule);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s;
}

.p-partners__logo-link {
    display: block;
    width: 100%;
    height: 100%;
}

.p-partners__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.p-partners__logo:hover {
    border-color: var(--g500);
}

/* 1行あたりの枚数（ベース＝SP）：ゴールド＝1枚（max-width 400px・左寄せ）、シルバー/ブロンズ/スポンサー＝2枚。
   ※配置（SP左／PC中央）は .p-partners__logos の justify-content で制御。 */
.p-partners__logo--gold {
    width: 100%;
}

.p-partners__logo--silver,
.p-partners__logo--bronze,
.p-partners__logo--sponsor {
    width: calc((100% - var(--gap)) / 2);
}

/* PC：ティアごとに枚数を増やしてサイズ差を付ける（ゴールド2／シルバー3／ブロンズ4／スポンサー4） */
@media (min-width: 769px) {
    .p-partners__logo--gold {
        width: calc((100% - var(--gap)) / 2);
    }
    .p-partners__logo--silver {
        width: calc((100% - 2 * var(--gap)) / 3);
    }
    .p-partners__logo--bronze {
        width: calc((100% - 3 * var(--gap)) / 4);
    }
    .p-partners__logo--sponsor {
        width: calc((100% - 3 * var(--gap)) / 4);
    }
}

/* partners の CTA だけ上罫線を付ける（c-cta はデフォルト罫線なし。ページ単位で付与） */
.page-partners .c-cta {
    border-top: var(--rule);
}

/* ===== Component: c-cta ===== */
/* CTA（行動喚起）バンド：白背景カード型・横組み。他ページでも再利用可。
   白ページに白カード＋ライトグレー罫線。左＝大タイポ／右＝コピー＋黒ボタン。
   ベース＝SP（縦積み・左寄せ）／PC＝横並び（space-between）。
   __cta（=c-cta）はバンド枠（余白）。デフォルトは上罫線なし＝必要なページだけ border-top を付ける
   （例：partners は .page-partners .c-cta で付与）。 */
.c-cta {
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 80px);
}

.c-cta__card {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--g300);
    padding: clamp(28px, 6vw, 40px) clamp(24px, 5vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

@media (min-width: 769px) {
    .c-cta__card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(24px, 3vw, 36px);
    }
}

.c-cta__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--g200);
}

.c-cta__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

@media (min-width: 769px) {
    .c-cta__body {
        align-items: flex-end;
        text-align: right;
    }
}

.c-cta__sub {
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--black);
}

/* ボタン：黒背景・ボーダーなしのソリッド（白カード上でしっかり目立たせる）。
   和文ラベル・矢印スライド・四角。ホバーで少し明るい黒に。 */
.c-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: none;
    background: var(--base);
    padding: 1em 1.6em;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.25s,
        color 0.25s;
}

@media (min-width: 769px) {
    .c-cta__btn {
        min-width: 300px;
        font-size: 18px;
    }
}

.c-cta__btn .c-icon {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.c-cta__btn:hover {
    background: var(--g800);
    color: var(--white);
}

.c-cta__btn:hover .c-icon {
    transform: translateX(5px);
}

/* ===== Component: c-breadcrumb ===== */
/* パンくず（再利用コンポーネント）。下層ページの黒帯ヘッド内で使用＝暗背景向けの明るめグレー。
   <nav class="c-breadcrumb"> 内に <a>（リンク）とセパレータ/現在地の <span> を並べる。
   ※ 明背景で使う場合は将来 c-breadcrumb--invert 等の修飾子を追加する。 */
.c-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--g500);
}

.c-breadcrumb a {
    color: var(--g400);
    text-decoration: none;
}

.c-breadcrumb a:hover {
    color: var(--white);
}

.c-breadcrumb span {
    color: var(--g600);
}

/* ════════════════════════════════════════
   Page: p-news-detail（ニュース詳細ヘッド＝黒帯・記事ヒーロー）
   一覧の __head と同じ黒帯を流用。中身＝パンくず → カテゴリ＋日付 → 記事タイトル(h1)。
   [data-nav-hero] 共通背景に左ダークグラデを重ね、白文字の可読性を確保。
   配色は style.css スキーム（--white=白／--base=濃／g数字大=濃）。
   ════════════════════════════════════════ */
.p-news-detail__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.85) 0%,
            rgba(14, 17, 22, 0.35) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(28px, 5vw, 56px);
}

@media (min-width: 769px) {
    .p-news-detail__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-news-detail__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* カテゴリ＋日付 */
.p-news-detail__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(20px, 3vw, 32px);
}

@media (min-width: 769px) {
    /* PC：タイトルと同じ幅で中央寄せ（block を margin-inline:auto でセンタリング） */
    .p-news-detail__meta {
        max-width: 1100px;
        margin-inline: auto;
    }
}

.p-news-detail__cat {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px 14px;
}

.p-news-detail__date {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--g400);
}

/* 記事タイトル（このページ唯一の h1） */
.p-news-detail__title {
    margin-top: clamp(14px, 2vw, 20px);
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--white);
    /* FOUC対策：main.js のブラーフェードインが開始状態を当てる前のチラつき防止。
       motion非実行時（reduce-motion / GSAP未読込）は main.js のフォールバックが
       .is-revealed を付与して表示する。 */
    visibility: hidden;
}

.p-news-detail__title.is-revealed {
    visibility: visible;
}

@media (min-width: 769px) {
    .p-news-detail__title {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 記事本文の器（黒帯ヘッドの下）。本文の体裁は .c-rte 側で管理。 */
.p-news-detail__article {
    /* 上余白は黒帯ヘッド(.p-news-detail__head)が固定ナビ分を確保済みのため通常値。 */
    padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 80px)
        clamp(48px, 6vw, 72px);
}

.p-news-detail__inner {
    max-width: 820px;
    margin: 0 auto;
}

.p-news-detail__visual {
    margin-bottom: clamp(32px, 4vw, 52px);
}

.p-news-detail__visual-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* ════════════════════════════════════════
   Component: c-rte（本文リッチテキスト＝WordPress the_content 想定）
   ニュース本文など WYSIWYG 出力をまとめて整える共通コンポーネント。
   実態はクラシック出力（p＋空段落 <p>&nbsp;</p>＋br＋<p>内 img.align*）。
   見出し/リスト/表/引用/figure は将来ブロックエディタ用の保険。
   ※ 現状 .wf-legacy 内にあり g系/--white は旧スキームで上書き済み。ここでは上書きされない
     意味トークン（--c-ink/--c-muted/--c-line/--c-surface）と明示色のみ使う。
   配色は白×黒モノクロ。ただし本文リンクのみ視認性優先で #3366cc。
   ════════════════════════════════════════ */
.c-rte {
    font-size: 15px; /* SP（ベース） */
    line-height: 2;
    color: var(--c-ink);
    word-wrap: break-word;
}

@media (min-width: 769px) {
    .c-rte {
        font-size: 18px; /* PC */
    }
}

/* フロート画像（align left/right）の回り込み解除 */
.c-rte::after {
    content: "";
    display: block;
    clear: both;
}

/* 段落：下に 1em。上ではなく下に付けるのは、.c-rte に padding/border が無く
   先頭 <p> の margin-top が親の外へ抜けてしまう（親ごと押し下がる）ため。
   下なら .c-rte::after（clear用の空ブロック）が最後の子として受け止め、外に抜けない。
   連続する <p> 同士のマージンは相殺されるので段落間は 0.5em。
   なお本文中の空段落 <p>&nbsp;</p>（クライアントの運用）が入る箇所は
   0.5em ＋ 空pの行高 ＋ 0.5em ぶん広がる。 */
.c-rte p {
    margin: 0 0 0.5em;
}

/* 末尾の 1em は記事ナビとの間で二重の余白になるため詰める。 */
.c-rte > p:last-child {
    margin-bottom: 0;
}

/* リンク：#3366cc＋下線（本文内リンクは視認性優先でモノクロの例外） */
.c-rte a {
    color: #3366cc;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.15s;
}

.c-rte a:hover {
    text-decoration-thickness: 2px;
}

.c-rte strong {
    font-weight: 700;
}
.c-rte em {
    font-style: italic;
}

/* 画像：はみ出し防止＋配置。<p>内・figure内どちらでも効くよう img に直接当てる。
   余白は段落と同じく空pに委譲（専用マージンは付けない）。 */
.c-rte img {
    max-width: 100%;
    height: auto;
}

.c-rte img.aligncenter {
    display: block;
    margin-inline: auto;
}

.c-rte img.alignnone,
.c-rte img.size-full {
    display: block;
}

.c-rte img.alignleft {
    float: left;
    margin: 0.3em 1.2em 0.8em 0;
}

.c-rte img.alignright {
    float: right;
    margin: 0.3em 0 0.8em 1.2em;
}

/* ── 以下は保険（現状クライアント未使用。将来ブロックエディタで入りうる要素） ── */

/* 見出し（本文は h2 始まり） */
.c-rte h2,
.c-rte h3,
.c-rte h4 {
    color: var(--c-ink);
    font-weight: 700;
    line-height: 1.5;
}

.c-rte h2 {
    margin: 2em 0 0.8em;
    padding-left: 0.6em;
    border-left: 5px solid var(--c-ink);
    font-size: clamp(20px, 2.2vw, 28px);
}

.c-rte h3 {
    margin: 1.8em 0 0.6em;
    font-size: clamp(18px, 1.8vw, 24px);
}

.c-rte h4 {
    margin: 1.6em 0 0.5em;
    font-size: clamp(16px, 1.6vw, 20px);
}

/* リスト（素の ul/ol ＋ wp-block-list。リセットで消えた余白・マーカーを復帰） */
.c-rte ul,
.c-rte ol {
    margin: 1.2em 0;
    padding-left: 1.6em;
}

.c-rte ul {
    list-style: disc;
}
.c-rte ol {
    list-style: decimal;
}
.c-rte li {
    margin: 0.4em 0;
}
.c-rte li > ul,
.c-rte li > ol {
    margin: 0.4em 0;
}

/* 引用（blockquote ＋ wp-block-quote）：通常の p と同じ見た目＋斜体のみ。 */
.c-rte blockquote {
    margin: 0;
    font-style: italic;
}

.c-rte blockquote p {
    margin: 0;
}

.c-rte blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: 0.85em;
    font-style: normal;
}

/* figure（画像・テーブル・埋め込み共通）＋キャプション */
.c-rte figure {
    margin: 1.6em 0;
}

.c-rte figcaption,
.c-rte .wp-element-caption,
.c-rte .wp-caption-text {
    margin-top: 0.6em;
    font-size: 0.82em;
    line-height: 1.7;
    color: var(--g800);
    text-align: center;
}

/* テーブル（table ＋ wp-block-table） */
.c-rte table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

.c-rte th,
.c-rte td {
    padding: 0.6em 0.9em;
    border: 1px solid var(--c-line);
    text-align: left;
    vertical-align: top;
}

.c-rte th {
    background: var(--c-surface);
    font-weight: 700;
}

/* 埋め込み（YouTube等。現状本文では未使用だが保険） */
.c-rte iframe {
    max-width: 100%;
}

/* 区切り線（hr ＋ wp-block-separator） */
.c-rte hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--c-line);
}

/* ─── c-rte-youtube（YouTube 埋め込み）──────────────
   TinyMCEカスタムボタンで挿入されるレスポンシブ iframe ラッパー。
   aspect-ratio で 16:9 を維持し、iframe を全面に展開する。 */
.c-rte-youtube {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.6em 0;
}

.c-rte-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── c-rte-btn（本文内ボタンリンク）────────────────
   TinyMCEカスタムボタンで挿入される <a class="c-rte-btn">。
   .c-rte a のリンクスタイル（青テキスト＋下線）を上書き。 */
.c-rte-btn {
    display: inline-block;
    padding: 13px 36px;
    background-color: var(--base);
    color: var(--white) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none !important;
    border: 1px solid var(--base);
    transition:
        background-color 0.2s,
        color 0.2s;
}

.c-rte-btn:hover {
    background-color: transparent;
    color: var(--base) !important;
    text-decoration: none !important;
}
/* ════════════════════════════════════════
   Page: p-news-detail__nav（記事ナビ＝一覧へ戻る）
   トンマナ：モノクロ＋Oswald英字＋ピル型ボーダー。中央寄せ1つだけ。
   ※ .wf-legacy 内のため、上書きされない --c-* トークンと明示色のみ使用。
   ════════════════════════════════════════ */
.p-news-detail__nav {
    /* ホバー時の白文字用に、.wf-legacy が旧スキームで上書きした --white を style.css 値(#fff)へ戻す。 */
    --white: #ffffff;
    max-width: 820px; /* 本文カラム（.p-news-detail__inner）と左右を揃える */
    margin: clamp(40px, 6vw, 72px) auto 0;
    padding-top: clamp(24px, 3vw, 36px);
    /* SP/PC とも1行（前の記事 ｜ 一覧に戻る ｜ 次の記事）。SPは各サイズを詰めて収める。 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 前の記事 / 次の記事：枠なしテキストリンク。中央のピル型ボタンを主役に保つ。 */
.p-news-detail__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--base);
    text-decoration: none;
    font-family: var(--font-body); /* 和文フォント */
    font-size: clamp(14px, 2.1vw, 16px); /* SP14px → PC16px */
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap; /* 折り返さず1行を維持 */
    transition: color 0.25s;
}

.p-news-detail__nav-link .c-icon {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.p-news-detail__nav-link:hover {
    color: var(--g600);
}

.p-news-detail__nav-link--prev:hover .c-icon {
    transform: translateX(-4px); /* 前へ：左矢印が少し左へ */
}

.p-news-detail__nav-link--next:hover .c-icon {
    transform: translateX(4px); /* 次へ：右矢印が少し右へ */
}

/* 前/次が無い記事（先頭・末尾）：要素は残したままグレーアウトし、中央ボタンの位置を保つ。
   マークアップは <a> ではなく <span>（リンクではないため）。値は c-pagination__btn.is-disabled と同一。 */
.p-news-detail__nav-link.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* 中央「一覧に戻る」：テキストを囲むピル型ボーダー（アイコンなし）。
   枠色・ホバーは c-pagination__btn と同じ（nav スコープで --g400/--white を復元済み）。
   SPは前後リンクと同フォントサイズに詰めて1行に収める。 */
.p-news-detail__nav-back {
    flex: 1; /* SP：前後リンクの残り幅いっぱいに伸ばし、1行内の最大幅に */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85em 1.1em;
    border: 1px solid var(--base); /* 枠は基調色 */
    color: var(--base);
    text-decoration: none;
    font-family: var(--font-body); /* 和文フォント */
    font-size: clamp(14px, 2.1vw, 16px); /* SP14px → PC16px */
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition:
        background 0.25s,
        color 0.25s;
}

.p-news-detail__nav-back:hover {
    background: var(--base);
    color: var(--white);
}

@media (min-width: 769px) {
    .p-news-detail__nav-link {
        gap: 6px;
        letter-spacing: 0.04em;
        /* font-size は base の clamp(…,16px) が PC=16px で効く */
    }
    .p-news-detail__nav-link .c-icon {
        font-size: 18px;
    }
    .p-news-detail__nav-back {
        width: 300px; /* PC：中央固定幅（伸ばさない） */
        flex: 0 0 auto;
        padding: 1em 1.5em;
        letter-spacing: 0.08em;
        /* font-size は base の clamp(…,16px) が PC=16px で効く */
    }
}

/* ════════════════════════════════════════
   Page: p-news-detail__related（関連記事）
   c-news-card（--horizontal）で news_list とトンマナ統一。wf-legacy 外＝style.css スキーム。
   本文カラム(820px)と左右を揃える。 */
.p-news-detail__related {
    padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 80px)
        clamp(60px, 8vw, 110px);
    border-top: 1px solid var(--c-line);
}

/* 見出しの見た目は c-section-header--sub が担当。ここは本文カラム(820px)への幅・中央寄せのみ。 */
.p-news-detail__related-head {
    max-width: 820px;
    margin-inline: auto;
}

.p-news-detail__related-list {
    list-style: none;
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

/* 関連リスト内はタイトルに対してカテゴリラベルが目立つので、小さめ＆字間0に揃える。 */
.p-news-detail__related-list .c-news-card__cat {
    font-size: 12px;
    letter-spacing: 0;
}

/* ── フィルター（年・カテゴリーのプルダウン） ──
   モバイルファースト：SPでは2つを横並び（等幅）で必ず1行に収める。PCで余裕のある値に戻す。 */
.p-news-archive__filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

@media (min-width: 769px) {
    .p-news-archive__filter {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* SP：flexで等幅に分け、min-width:0 で枠内に収める */
.p-news-archive__select-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

@media (min-width: 769px) {
    .p-news-archive__select-wrap {
        flex: 0 0 auto;
    }
}

.p-news-archive__select-wrap::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--base);
    border-bottom: 1.5px solid var(--base);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

@media (min-width: 769px) {
    .p-news-archive__select-wrap::after {
        right: 16px;
    }
}

/* 先頭アイコン（Material Symbols）。select はネイティブ要素で中にアイコンを
   置けないため、wrap 左に重ねて select の左パディングで逃がす。 */
.p-news-archive__select-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: var(--g700);
    pointer-events: none;
    transition: color 0.2s;
}

@media (min-width: 769px) {
    .p-news-archive__select-icon {
        left: 14px;
        font-size: 20px;
    }
}

.p-news-archive__select-wrap:hover .p-news-archive__select-icon {
    color: var(--base);
}

.p-news-archive__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: transparent;
    border: 1px solid var(--g400);
    border-radius: 5px;
    color: var(--g900);
    font-size: 13px;
    font-weight: 700;
    padding: 11px 24px 11px 32px;
    cursor: pointer;
    font-family: inherit;
    transition:
        border-color 0.2s,
        color 0.2s;
}

@media (min-width: 769px) {
    .p-news-archive__select {
        width: auto;
        font-size: 15px;
        /* 縦16px×2＋ボーダー2＋文字≒17 ＝ 高さ約50px。左はアイコンと詰める */
        padding: 16px 52px 16px 42px;
    }
}

.p-news-archive__select:hover {
    border-color: var(--base);
    color: var(--base);
}

.p-news-archive__select:focus {
    outline: none;
    border-color: var(--base);
}

.p-news-archive__select option {
    background: var(--surface);
    color: var(--base);
}

/* 一覧は TOP の p-news__cards を流用し、--newslist で3カラム折り返しに上書き
   （定義は p-news ブロック内 .p-news__cards--newslist 参照）。 */

/* ページネーションは再利用コンポーネント c-pagination（Component層）に切り出し。 */

/* ════════════════════════════════════════
   Page: p-company（会社概要）
   黒帯ヘッド＝news_list / partners と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝会社概要テーブル → 運営母体（親会社）紹介 → CTA（c-cta 共通）。
   配色は style.css スキーム（--white=白／--base=濃／g数字大=濃）。命名＝FLOCSS（p-company__*）。
   ════════════════════════════════════════ */
.p-company__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-company__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-company__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── 会社概要テーブル ── */
.p-company__profile {
    padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 80px);
}

.p-company__inner {
    max-width: 980px;
    margin: 0 auto;
}

.p-company__table {
    width: 100%;
}

/* 1行＝ラベル(dt)＋内容(dd)。ベース＝SP：縦積み（dtの上にdd）。PCで横並びに。 */
.p-company__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: clamp(16px, 2.5vw, 20px) 0;
    border-bottom: var(--rule);
}

.p-company__row:first-child {
    border-top: var(--rule);
}

@media (min-width: 769px) {
    .p-company__row {
        grid-template-columns: 200px 1fr;
        gap: clamp(16px, 3vw, 40px);
    }
}

.p-company__row dt {
    font-family: var(--font-display);
    font-size: clamp(13px, 1.4vw, 15px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g600);
    padding-top: 2px;
}

.p-company__row dd {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.8;
    color: var(--base);
}

/* テーブル内リンク（株主＝親会社サイト等）：モノクロ基調。下線は付けず、
   末尾の open_in_new アイコン（別ウィンドウで開く・TOPの公式YouTubeと同じ表現）＋ホバーで薄く。 */
.p-company__row dd a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--base);
    text-decoration: none;
    transition: color 0.2s;
}

.p-company__row dd a .c-icon {
    font-size: 1.1em;
}

.p-company__row dd a:hover {
    color: var(--g600);
}

/* ── 運営母体・親会社グループ（信頼の可視化） ──
   フルブリードの左右2分割：左50%＝写真（cell いっぱいを cover で表示・余白なし）／右50%＝本文。
   親（__parent）からは横パディングを外し、本文側（__parent-body）で内側パディングを取る。 */
.p-company__parent {
    /* border-top なし（profile セクションとの間に区切り線を入れない）。 */
    /* SP：全幅ベタ付けではなく左右に共通ガターを設ける。 */
    padding-inline: clamp(24px, 5vw, 80px);
}

@media (min-width: 769px) {
    /* PC：フルブリードだと主張が強いため max-width で囲って中央寄せ（左右paddingは外す）。 */
    .p-company__parent {
        /* 980px未満では上下セクションと同じ左右ガター clamp(24,5vw,80) を確保し、
           980px以上では従来どおり最大980px中央寄せ（フルブリードのままガター0にしない）。 */
        width: min(980px, calc(100% - clamp(48px, 10vw, 160px)));
        margin-inline: auto;
        padding-inline: 0;
    }
}

/* ベース＝SP：1カラム（写真→本文）。PCで2カラム横並び（写真｜本文）。
   align-items: stretch（gridの既定）で左写真cellを本文の高さまで伸ばし、写真を cover で敷き詰める。 */
.p-company__parent-inner {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 769px) {
    .p-company__parent-inner {
        grid-template-columns: 1fr 2fr;
        align-items: stretch;
    }
}

/* 左：写真。PCは本文の高さいっぱいを cover。SPは1:1（幅は最大600px）。
   余白・レターボックスを作らない。 */
.p-company__parent-photo {
    position: relative;
    overflow: hidden;
}

/* ベース＝SP：1:1（正方形）。写真素材の比率に合わせ、SPではトリミング
   なしで見せる。幅は最大600pxで頭打ちにし、超えたら中央寄せ
   （間延び防止／画像の必要サイズ抑制）。 */
.p-company__parent-photo .c-ph,
.p-company__parent-photo img {
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}

@media (min-width: 769px) {
    /* PC：本文（__parent-body）の高さに合わせて伸ばし、cover で覆う。 */
    .p-company__parent-photo .c-ph,
    .p-company__parent-photo img {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* 実写真を入れたとき：枠いっぱいを cover（中央基準） */
.p-company__parent-photo img {
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 右：本文。親の横パディングを外したぶん、本文側で内側パディングを取る。
   ごく薄いグレー背景で写真とのコントラストをわずかに付ける。 */
.p-company__parent-body {
    padding: clamp(18px, 3vw, 44px) clamp(20px, 3vw, 40px);
    background: #f9f9f9;
}

/* GROUP/運営母体 見出しの下余白を company だけ詰める（共通 --sub は変えない）。 */
.p-company__parent-body .c-section-header--sub {
    margin-bottom: clamp(8px, 1.5vw, 14px);
}

/* 運営母体ブロックの英字タイトルは共通 --sub より一段小さく（company 内のみ） */
.p-company__parent-body .c-section-header__title {
    font-size: clamp(24px, 3.2vw, 36px);
}

@media (min-width: 769px) {
    .p-company__parent-body {
        /* 写真と高さが揃うので、本文を縦中央に配置 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 縦パディングを詰めて本文高さを抑え、写真をワイド（低め）に見せる */
        padding-top: clamp(16px, 2vw, 28px);
        padding-bottom: clamp(16px, 2vw, 28px);
    }
}

.p-company__parent-title {
    font-size: clamp(16px, 2.4vw, 20px); /* SP16px → PC20px */
    font-weight: 600;
    line-height: 1.5;
    color: var(--base);
    margin-top: clamp(10px, 1.4vw, 14px);
}

.p-company__parent-lead {
    font-size: clamp(13px, 1.4vw, 14px); /* SP13px → PC14px */
    line-height: 1.8;
    color: var(--g800);
    margin-top: clamp(12px, 1.8vw, 16px);
}

/* PC：タイトル前後の余白を詰めて運営母体ブロックを低く */
@media (min-width: 769px) {
    .p-company__parent-title {
        margin-top: 6px;
    }

    .p-company__parent-lead {
        margin-top: 8px;
    }
}

/* ════════════════════════════════════════
   Page: p-hometown（あきる野・青梅との取り組み）
   黒帯ヘッド＝company / partners と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝リード → 連携協定 → 取り組み・実績（左右交互・主役）→ 企業版ふるさと納税フロー
   → これまでの歩み → 関連ニュース → CTA（c-cta 共通）。
   配色は style.css スキーム（--white=白／--base=濃／g数字大=濃）。命名＝FLOCSS（p-hometown__*）。
   ════════════════════════════════════════ */
.p-hometown__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-hometown__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-hometown__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── ステートメント（フルブリード写真背景＋大型和文タイポ） ── */
.p-hometown__statement {
    position: relative;
    overflow: hidden;
}

.p-hometown__statement-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-hometown__statement-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.5);
}

.p-hometown__statement-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, 0.78) 0%,
        rgba(8, 10, 14, 0.5) 32%,
        rgba(8, 10, 14, 0.15) 62%,
        rgba(8, 10, 14, 0.02) 100%
    );
}

.p-hometown__statement-inner {
    position: relative;
    z-index: 10;
    color: #fff;
    padding: clamp(120px, 22vw, 180px) clamp(24px, 5vw, 80px)
        clamp(100px, 18vw, 160px);
    visibility: hidden;
}

@media (min-width: 769px) {
    .p-hometown__statement-inner {
        padding-top: clamp(80px, 12vw, 160px);
        padding-bottom: clamp(72px, 10vw, 140px);
    }
}

.p-hometown__statement-inner.is-revealed {
    visibility: visible;
}

.p-hometown__statement-headline {
    font-size: clamp(36px, 9vw, 72px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
}

.p-hometown__statement-lead {
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #fff;
    margin-top: clamp(28px, 4vw, 44px);
}

/* ── セクション共通：縦余白＋罫線。横パディングは __inner 側で取る（vision の mission と同じフルブリード方式）── */
.p-hometown__partnership,
.p-hometown__furusato,
.p-hometown__related {
    padding: clamp(48px, 7vw, 90px) 0;
    border-top: var(--rule);
}

/* 取り組みも同様 */
.p-hometown__initiatives {
    padding: clamp(48px, 7vw, 90px) 0;
    border-top: var(--rule);
}

/* 内側コンテナ：ナビ・mission と同じ 1920px グリッドで全幅に近く使う */
.p-hometown__inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* Partnership / Initiatives / Furusato の見出しは vision（mission/values）と同じ大型 c-section-header。
   PCのみ英字タイトルを縮小（clamp(48px,6.5vw,96px)＝vision と同値）。SP は base サイズのまま。 */
@media (min-width: 769px) {
    .p-hometown__partnership .c-section-header__title,
    .p-hometown__initiatives .c-section-header__title,
    .p-hometown__furusato .c-section-header__title,
    .p-hometown__related .c-section-header__title {
        font-size: clamp(48px, 6.5vw, 96px);
    }
}

/* セクション見出し直下のリード文 */
.p-hometown__section-lead {
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 2.1;
    letter-spacing: 0.03em;
    color: var(--g800);
    margin-bottom: clamp(36px, 4vw, 44px);
}

/* ── PARTNER TOWN アンカーブロック ── */
.p-hometown__partnertown {
    padding-top: clamp(40px, 6vw, 72px);
    border-top: var(--rule);
}

.p-hometown__partnertown-header {
    margin-bottom: clamp(16px, 2vw, 24px);
}

.p-hometown__partnertown-en {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--base);
    margin: 0;
}

.p-hometown__partnertown-title {
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--g500);
    margin: 6px 0 0;
}

.p-hometown__partnertown-lead {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.8;
    color: var(--g800);
    margin: 0 0 clamp(24px, 3vw, 36px);
}

.p-hometown__partnertown-cities {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 24px);
    max-width: 480px;
}

.p-hometown__partnertown-city {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 1.5vw, 14px);
    border: 1px solid #e2e5e9;
}

.p-hometown__partnertown-crest {
    flex-shrink: 0;
    width: clamp(40px, 5vw, 56px);
    height: clamp(40px, 5vw, 56px);
}

.p-hometown__partnertown-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.p-hometown__partnertown-city-en {
    font-family: var(--font-display);
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g500);
    margin: 0;
}

.p-hometown__partnertown-city-ja {
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 700;
    color: var(--base);
    margin: 4px 0 0;
}

/* ── 01 連携協定：2市カード（写真上・テキスト下） ── */
.p-hometown__pacts {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
}

@media (min-width: 769px) {
    .p-hometown__pacts {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .p-hometown__pact:nth-child(2) {
        border-left: none;
    }
}

.p-hometown__pact {
    border: var(--rule);
    background: var(--white);
}

.p-hometown__pact-photo {
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.p-hometown__pact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-hometown__pact-content {
    padding: clamp(20px, 3vw, 32px);
}

/* 市章＋市名 横並び */
.p-hometown__pact-head {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: 12px;
}

.p-hometown__pact-crest {
    flex-shrink: 0;
    width: clamp(60px, 8vw, 80px);
    aspect-ratio: 1 / 1;
    background: var(--white);
    border: var(--rule);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.p-hometown__pact-crest img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.p-hometown__pact-en {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--g500);
}

.p-hometown__pact-city {
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--base);
    margin-top: 2px;
}

.p-hometown__pact-meta {
    font-size: clamp(13px, 1.4vw, 15px);
    letter-spacing: 0.04em;
    color: var(--g600);
    margin-top: 10px;
}

.p-hometown__pact-text {
    font-size: clamp(14px, 1.7vw, 17px);
    font-weight: 600;
    line-height: 1.95;
    color: var(--g800);
    margin-top: 10px;
}

/* ── 02 取り組み・実績：左右交互（写真｜本文） ── */
.p-hometown__initiative-list {
    list-style: none;
    max-width: 1920px;
    margin: clamp(8px, 2vw, 20px) auto 0;
    padding: 0 clamp(24px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 8vw, 64px);
}
@media (min-width: 769px) {
    .p-hometown__initiative-list {
        gap: clamp(40px, 6vw, 80px);
    }
}

.p-hometown__initiative {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
}

@media (min-width: 769px) {
    .p-hometown__initiative {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    /* 偶数番（02・04）は写真を右に＝本文を左に。1px gap でなく交互レイアウト。 */
    .p-hometown__initiative:nth-child(even) .p-hometown__initiative-photo {
        order: 2;
    }
}

.p-hometown__initiative-photo {
    overflow: hidden;
}

.p-hometown__initiative-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    display: block;
}

.p-hometown__initiative-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(64px, 10vw, 120px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #e7e7e7;
    /* 桁(0/1)はSVG化で c-svgtext__char=inline-block(atomic inline)になり、
       桁間にソフト改行機会が生じる。狭いflexアイテム化で「01」が縦に割れるのを防ぐ。 */
    white-space: nowrap;
}

.p-hometown__initiative-label {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}
@media (min-width: 769px) {
    .p-hometown__initiative-label {
        display: contents;
    }
}

.p-hometown__initiative-title {
    font-size: clamp(20px, 2.8vw, 34px);
    font-weight: 700;
    line-height: 1.45;
    color: var(--base);
}
@media (min-width: 769px) {
    .p-hometown__initiative-title {
        margin-top: 10px;
    }
}

.p-hometown__initiative-text {
    font-size: clamp(14px, 1.5vw, 15px);
    line-height: 2;
    color: var(--g800);
    margin-top: 8px;
}
@media (min-width: 769px) {
    .p-hometown__initiative-text {
        margin-top: 18px;
    }
}

/* ── 03 企業版ふるさと納税の仕組み：3ステップ＋矢印 ── */
.p-hometown__flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 1.5vw, 16px);
}

@media (min-width: 769px) {
    .p-hometown__flow {
        flex-direction: row;
        align-items: stretch;
        padding-top: 30px;
    }
}

.p-hometown__step {
    flex: 1;
    border: var(--rule);
    background: var(--white);
    padding: clamp(16px, 3vw, 34px);
    text-align: center;
    position: relative;
}
@media (min-width: 769px) {
    .p-hometown__step {
        padding-top: 60px;
    }
}

.p-hometown__step-num {
    position: absolute;
    top: -12px;
    left: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f0f0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--g400);
}

@media (min-width: 769px) {
    .p-hometown__step-num {
        left: 0;
        right: 0;
        top: -32px;
        margin-inline: auto;
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

.p-hometown__step-label {
    font-size: clamp(15px, 1.4vw, 15px);
    letter-spacing: 0.1em;
    color: var(--g600);
}

.p-hometown__step-title {
    font-size: clamp(20px, 2vw, 22px);
    font-weight: 800;
    line-height: 1.5;
    color: var(--base);
    margin-top: 8px;
}

.p-hometown__step-text {
    font-size: clamp(15px, 1.4vw, 15px);
    line-height: 1.8;
    color: var(--g800);
    margin-top: 10px;
}

/* 矢印（c-icon の arrow_forward）：SP＝下向き（90度回転）／PC＝右向き。
   align-self:center で SP（縦並び）は横中央・PC（横並び）は縦中央に揃える。 */
.p-hometown__flow-arrow {
    align-self: center;
    color: var(--g500);
    font-size: 30px;
    transform: rotate(90deg);
}

@media (min-width: 769px) {
    .p-hometown__flow-arrow {
        transform: none;
        font-size: clamp(34px, 3.5vw, 44px);
        padding: 0 4px;
    }
}

/* 補足注記（フロー図・タイムラインの「確定後に掲載」） */
.p-hometown__note {
    font-size: clamp(11px, 1.2vw, 12px);
    color: var(--g500);
    margin-top: clamp(16px, 2vw, 22px);
}

/* ── 04 関連ニュース：一覧は p-news__cards--newslist（3カラム）を流用。more リンクのみ追加 ── */
/* 直後の c-cta が上パディングを持つため、related の下余白は詰めて二重の空きを防ぐ。 */
.p-hometown__related {
    padding-bottom: clamp(4px, 1.5vw, 16px);
}

.p-hometown__related-more {
    margin-top: clamp(28px, 4vw, 40px);
    text-align: right;
}

/* ════════════════════════════════════════
   Page: p-privacy（プライバシーポリシー）
   黒帯ヘッド＝company / partners と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝法務テキスト（主題見出し → リード → 区分ブロック）。1カラム・最大820px中央。
   配色は style.css スキーム（--white=白／--base=濃／g数字大=濃）。命名＝FLOCSS（p-privacy__*）。
   ════════════════════════════════════════ */
.p-privacy__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-privacy__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-privacy__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── 本文（法務テキスト） ── */
.p-privacy__body {
    padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 80px)
        clamp(64px, 9vw, 130px);
}

.p-privacy__inner {
    max-width: 820px;
    margin: 0 auto;
}

/* ページ主題の再掲（h2）：下罫線で導入を締める。 */
.p-privacy__title {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.6;
    color: var(--base);
    padding-bottom: clamp(20px, 3vw, 28px);
    border-bottom: var(--rule);
}

.p-privacy__lead {
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
    margin-top: clamp(28px, 4vw, 40px);
}

/* 区分ブロック（取得・利用／第三者提供 など） */
.p-privacy__block {
    margin-top: clamp(36px, 5vw, 56px);
}

/* 小見出し（h3）：左の縦罫で区分を示す。 */
.p-privacy__block-title {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 700;
    color: var(--base);
    padding-left: 14px;
    border-left: 3px solid var(--base);
    margin-bottom: 16px;
}

.p-privacy__text {
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
}

/* 箇条書き（terms と同型）。マーカーはグレーで控えめに。 */
.p-privacy__list {
    margin-top: 1em;
    padding-left: 1.4em;
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
}

.p-privacy__list--ordered {
    list-style: decimal;
}

.p-privacy__list--unordered {
    list-style: disc;
}

.p-privacy__list-item {
    margin-top: 0.4em;
    padding-left: 0.3em;
}

.p-privacy__list-item::marker {
    color: var(--g800);
}

/* 本文中のリンク（段落・リスト内の <a>）。terms と同じ＝本文色＋下線・ホバーで薄く。 */
.p-privacy__text a,
.p-privacy__list-item a {
    color: var(--base);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: color 0.2s;
}

.p-privacy__text a:hover,
.p-privacy__list-item a:hover {
    color: var(--g600);
}

/* ブロック内の小見出し（h4）。block-title（h3）より一段小さく、区分のラベルとして使う。 */
.p-privacy__subtitle {
    font-size: clamp(15px, 1.7vw, 16px);
    font-weight: 700;
    color: var(--base);
    margin-top: 1.6em;
    margin-bottom: 0.4em;
}

/* 補足注記（※〜）。本文より小さく薄いグレー。 */
.p-privacy__note {
    font-size: clamp(12px, 1.5vw, 13px);
    line-height: 1.9;
    color: var(--g600);
    margin-top: 0.5em;
}

/* 連絡先・責任者などの情報枠。薄グレー地＋罫線で本文から区別。 */
.p-privacy__contact {
    margin-top: 1em;
    padding: clamp(16px, 2.5vw, 22px) clamp(16px, 2.5vw, 24px);
    background: var(--surface);
    border: var(--rule);
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 2;
    color: var(--g800);
}

.p-privacy__contact-name {
    font-weight: 700;
    color: var(--base);
}

.p-privacy__contact-line {
    margin-top: 0.1em;
}

/* 電話・メールのリンクは本文色＋下線に留める（原色は使わずモノクロ基調を維持）。
   terms の本文中リンク（.p-terms__text a）と同じ扱い。 */
.p-privacy__contact-line a {
    color: var(--base);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease;
}

.p-privacy__contact-line a:hover {
    color: var(--g600);
}

/* 制定日：本文末に右寄せ・薄グレーで控えめに。 */
.p-privacy__date {
    margin-top: clamp(36px, 5vw, 56px);
    text-align: right;
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--g800);
}

/* ════════════════════════════════════════
   Page: p-terms（利用規約）
   黒帯ヘッド＝privacy / company / partners と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝法務テキスト（主題見出し → リード →〔原稿支給後〕区分ブロック）。1カラム・最大820px中央。
   構造は p-privacy と同型（原稿支給時に p-terms__block／__block-title／__text で展開できる）。
   命名＝FLOCSS（p-terms__*）。
   ════════════════════════════════════════ */
.p-terms__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。
       縦＝SP：固定ナビ64px分＋余白。横は __head-inner 側で取る（背景は全幅）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-terms__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-terms__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── 本文（法務テキスト） ── */
.p-terms__body {
    padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 80px)
        clamp(64px, 9vw, 130px);
}

.p-terms__inner {
    max-width: 820px;
    margin: 0 auto;
}

/* ページ主題の再掲（h2）：下罫線で導入を締める。 */
.p-terms__title {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.6;
    color: var(--base);
    padding-bottom: clamp(20px, 3vw, 28px);
    border-bottom: var(--rule);
}

.p-terms__lead {
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
    margin-top: clamp(28px, 4vw, 40px);
}

/* 区分ブロック（原稿支給後に展開・privacy と同型） */
.p-terms__block {
    margin-top: clamp(36px, 5vw, 56px);
}

/* 小見出し（h3）：左の縦罫で区分を示す。 */
.p-terms__block-title {
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 700;
    color: var(--base);
    padding-left: 14px;
    border-left: 3px solid var(--base);
    margin-bottom: 16px;
}

.p-terms__text {
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
}

/* 段落が続くとき（__text を縦に複数並べる）の間隔 */
.p-terms__text + .p-terms__text {
    margin-top: 1.2em;
}

/* 箇条書き（ul＝丸／ol＝番号）。条文内の項目列挙に使う。 */
.p-terms__list {
    margin-top: 1em;
    padding-left: 1.4em;
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 2.1;
    color: var(--g800);
}

.p-terms__list--ordered {
    list-style: decimal;
}

.p-terms__list--unordered {
    list-style: disc;
}

.p-terms__list-item {
    margin-top: 0.4em;
    padding-left: 0.3em;
}

.p-terms__list-item::marker {
    color: var(--g800);
}

/* 手打ちのカッコ番号〔(1)(2)…〕の子リスト（条文の枝番）。
   原稿が番号を持つため中黒（●）を消し、「(1)」自体を番号として見せる。
   ハンギングインデントで折り返し行を本文位置に揃える。親 li（番号付き）の下に入れ子で使う。 */
.p-terms__sublist {
    list-style: none;
    margin-top: 0.6em;
    padding-left: 0.5em;
}

.p-terms__sublist .p-terms__list-item {
    padding-left: 2.2em;
    text-indent: -2.2em;
}

/* 本文中のリンク（段落・リスト内の <a>）。下線＋濃色で「押せる」と分かる見せ方。
   モノクロ基調に合わせ news_detail のような原色は使わず、本文色＋下線でホバーで薄く。 */
.p-terms__text a,
.p-terms__list-item a {
    color: var(--base);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: color 0.2s;
}

.p-terms__text a:hover,
.p-terms__list-item a:hover {
    color: var(--g600);
}

/* 第6条のお問い合わせ導線ボタン。背景透過・黒文字黒枠、ホバーで黒地反転（白文字）。
   404 の p-notfound__btn--ghost と同系（こちらは背景 transparent）。 */
.p-terms__contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 2.6em auto 0;
    padding: 14px 40px;
    background: transparent;
    color: var(--base);
    border: 1px solid var(--base);
    font-family: var(--font-body);
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}

.p-terms__contact-btn:hover {
    background: var(--base);
    color: var(--white);
}

/* ════════════════════════════════════════
   Page: p-vision-page（球団理念）
   黒帯ヘッド＝company / privacy / terms と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝経営理念ステートメント（フルブリード写真＋大型タイポ）→ メッセージ（ナラティブ）
   → 行動指針（5つの価値観・番号付きエディトリアル）→ CTA（c-cta 共通）。
   ※ TOP のティーザー p-vision とは別名前空間（衝突回避）。配色は style.css スキーム。命名＝FLOCSS（p-vision-page__*）。
   ════════════════════════════════════════ */
.p-vision-page__head {
    /* section_bg.jpg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-vision-page__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-vision-page__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── 経営理念ステートメント（フルブリード写真背景＋大型タイポ） ── */
.p-vision-page__statement {
    position: relative;
    overflow: hidden;
}

.p-vision-page__statement-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-vision-page__statement-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* FOUC対策：JSが暗さを当てる前に明るい画像が一瞬見えるのを防ぐため、初期からやや暗く。
       演出時は gsap.fromTo の開始値(0.5)と一致するのでチラつかない。
       reduce-motion／GSAP未読込時は main.js のフォールバックで brightness(1) に戻す。 */
    filter: brightness(0.5);
}

/* 下部を重点的に暗くし、白文字の可読性を確保（TOP p-vision と同じ意図） */
.p-vision-page__statement-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, 0.97) 0%,
        rgba(8, 10, 14, 0.78) 32%,
        rgba(8, 10, 14, 0.4) 62%,
        rgba(8, 10, 14, 0.1) 100%
    );
}

.p-vision-page__statement-inner {
    position: relative;
    z-index: 10;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* SP（ベース）：下のミッションとの間に白い余白が出ないよう、上下に高さを持たせる */
    padding: clamp(150px, 28vw, 220px) clamp(24px, 5vw, 80px)
        clamp(140px, 26vw, 210px);
    /* FOUC対策：JSが開始状態（autoAlpha:0）を当てる前にテキストが一瞬見えるのを防ぐ。
       初期は不可視（レイアウト保持）。main.js が is-revealed を付けて表示する
       （演出時＝子をGSAPが制御／reduce-motion・GSAP未読込時＝そのまま表示）。 */
    visibility: hidden;
}

/* PC：上下パディングは従来値に戻す（広げるのは SP のみ。左右はベース据え置き） */
@media (min-width: 769px) {
    .p-vision-page__statement-inner {
        padding-top: clamp(96px, 16vw, 200px);
        padding-bottom: clamp(88px, 13vw, 170px);
    }
}

.p-vision-page__statement-inner.is-revealed {
    visibility: visible;
}

.p-vision-page__statement-headline {
    font-family: var(--font-display);
    font-size: clamp(48px, 13vw, 88px);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

@media (min-width: 769px) {
    .p-vision-page__statement-headline {
        font-size: clamp(72px, 9vw, 150px);
        line-height: 0.88;
    }
}

/* 「TO THE」＝白アウトライン（袋文字） */
.p-vision-page__statement-headline-outline {
    color: transparent;
    -webkit-text-stroke: 0.8px #fff;
}

@media (min-width: 769px) {
    .p-vision-page__statement-headline-outline {
        -webkit-text-stroke: 1.5px #fff;
    }
}

/* 経営理念の主文（タグライン） */
.p-vision-page__statement-lead {
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #fff;
    margin-top: clamp(28px, 4vw, 44px);
}

/* 補足文 */
.p-vision-page__statement-text {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.9);
    margin-top: clamp(14px, 2vw, 18px);
}

/* ── ミッション（理念のステートメント＋画像エリア） ── */
.p-vision-page__mission {
    position: relative;
    overflow: hidden;
    /* SP（ベース）：上下パディングを抑えめに */
    padding: clamp(44px, 9vw, 72px) 0;
}

/* PC：上下パディングは従来値を維持（抑えるのは SP のみ） */
@media (min-width: 769px) {
    .p-vision-page__mission {
        padding: clamp(80px, 11vw, 150px) 0;
    }
}

/* PC：ミッション／バリューズの英字タイトルを共通サイズより小さく
   （このページの mission / values 内のみ。TOP 等の c-section-header には影響させない）。 */
@media (min-width: 769px) {
    .p-vision-page__mission .c-section-header__title,
    .p-vision-page__values .c-section-header__title {
        font-size: clamp(48px, 6.5vw, 96px);
    }
}

/* 画像エリア。SP＝本文の下に全幅で配置。高さは aspect-ratio で抑える（重なり・オーバーレイなし）。
   PC（≥769px）＝右半分に絶対配置し、左の白フェードで文字を重ねる。 */
.p-vision-page__mission-bg {
    display: none;
    width: 100%;
    margin-top: clamp(28px, 7vw, 44px);
    aspect-ratio: 3 / 2;
}

.p-vision-page__mission-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (min-width: 769px) {
    .p-vision-page__mission-bg {
        display: block;
        position: absolute;
        /* PC：右半分パネル。横幅・上下の高さを少し詰めて画像を小さく見せる */
        top: clamp(64px, 7vw, 100px);
        right: 0;
        bottom: clamp(64px, 7vw, 100px);
        left: auto;
        width: 42%;
        margin-top: 0;
        aspect-ratio: auto;
        z-index: 0;
    }

    .p-vision-page__mission-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.4) 32%,
            rgba(255, 255, 255, 0) 62%
        );
    }
}

/* 見出し・本文をサイト共通グリッド（max-width 1920＋共通ガター）に乗せ、Values と左端をそろえる（左揃え）。
   画像より前面（z-index:1）に置いて文字を画像の上に重ねる。 */
.p-vision-page__mission-inner {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

.p-vision-page__mission-text {
    font-size: clamp(20px, 2.8vw, 34px);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--base);
    max-width: 1000px;
}

/* 大きなステートメント文の下に続く、噛み砕いた本文（読みやすい本文サイズ・読み幅を絞る） */
.p-vision-page__mission-body {
    margin-top: clamp(24px, 3.5vw, 40px);
    max-width: 760px;
}

.p-vision-page__mission-desc {
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 2.1;
    letter-spacing: 0.03em;
    color: var(--g900);
}

.p-vision-page__mission-desc + .p-vision-page__mission-desc {
    margin-top: 1.4em;
}

/* ── 行動指針（5つの価値観・横スクロールの縦長カード） ──
   スクロールダウンでトラックが横移動（GSAP pin＋scrub・main.js）。1→5を必ず通過。
   GSAP未読込／reduce-motion 時は .values-stage のネイティブ横スクロール（overflow-x:auto）にフォールバック。 */
.p-vision-page__values {
    /* SP（ベース）：ミッションエリアと上下パディングを揃える */
    padding: clamp(44px, 9vw, 72px) 0;
    background: var(--surface);
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-vision-page__values {
        /* PC：上は従来値を維持、下はピン横スクロールのため 0 */
        padding-top: clamp(48px, 6vw, 80px);
        padding-bottom: 0;
    }
}

/* 見出しはサイト共通グリッド（max-width 1920＋共通ガター）に乗せ、ロゴ・本文と左端を揃える。
   見出し下の余白は詰める（このページのValues特有）＝下に続くカードとの開きを無くす。 */
.p-vision-page__values-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
    /* SP：カードと近すぎないよう少し空ける（PCでは下の @media で 0 に詰める） */
    margin-bottom: clamp(16px, 4vw, 24px);
}

@media (min-width: 769px) {
    .p-vision-page__values-inner {
        margin-bottom: 0;
    }
}

/* Values の見出し（共通 c-section-header）の余白を 0 に＝このページのValuesだけに効くスコープ指定。 */
.p-vision-page__values .c-section-header {
    margin: 0;
    padding: 0;
}

/* 見出し下のリード文（mission-desc と同スタイル）。見出しと密着しないよう margin-top を付与。
   長文が間延びしないよう読み幅を絞る。 */
.p-vision-page__values-lead {
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 2.1;
    letter-spacing: 0.03em;
    color: var(--g900);
    margin-top: clamp(8px, 1.5vw, 14px);
    max-width: 760px;
}

/* ステージ：ベース(SP)＝普通のブロック（カードは縦積み・スクロールしない）。
   PC（≥769px）：100vh の横スクロール・ビューポート（main.js が pin＋scrub。フォールバックはネイティブ横スクロール）。 */
@media (min-width: 769px) {
    .p-vision-page__values-stage {
        display: flex;
        align-items: center;
        height: 100vh;
        min-height: 600px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .p-vision-page__values-stage::-webkit-scrollbar {
        display: none;
    }
}

/* トラック：ベース(SP)＝縦積み（1カラム）。PC＝横一列（GSAPで x 移動／フォールバックはネイティブ横スクロール）。 */
.p-vision-page__values-track {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 clamp(24px, 5vw, 80px);
    will-change: transform;
}

@media (min-width: 769px) {
    .p-vision-page__values-track {
        flex-direction: row;
        align-items: stretch;
        gap: 1px;
        width: max-content;
    }
}

/* カード：背景画像。ベース(SP)＝全幅・縦積み（高さは横スクロール時より約1/4低く）。PC＝縦長・固定幅で横並び。 */
.p-vision-page__value {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: clamp(236px, 38vh, 315px);
    overflow: hidden;
    background: var(--g900);
}

@media (min-width: 769px) {
    .p-vision-page__value {
        width: clamp(480px, 43vw, 640px);
        height: clamp(560px, 82vh, 820px);
    }
}

.p-vision-page__value-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-vision-page__value-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

.p-vision-page__value:hover .p-vision-page__value-bg img {
    transform: scale(1.05);
}

/* 下を重点に暗くして白文字の可読性を確保 */
.p-vision-page__value-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* SP（ベース）：下部は暗いまま（テキストの可読性）、上〜中部を明るめに（画像をより見せる） */
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, 0.9) 0%,
        rgba(8, 10, 14, 0.42) 42%,
        rgba(8, 10, 14, 0.1) 72%,
        rgba(8, 10, 14, 0) 100%
    );
}

/* PC：従来のグラデーション（上もやや暗め）を維持 */
@media (min-width: 769px) {
    .p-vision-page__value-overlay {
        background: linear-gradient(
            to top,
            rgba(8, 10, 14, 0.92) 0%,
            rgba(8, 10, 14, 0.6) 38%,
            rgba(8, 10, 14, 0.2) 66%,
            rgba(8, 10, 14, 0.05) 100%
        );
    }
}

.p-vision-page__value-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(22px, 2.4vw, 30px);
    color: #fff;
}

/* 番号とタイトルを1行に：番号左／タイトル右、下端そろえ。 */
.p-vision-page__value-head {
    display: flex;
    align-items: flex-end;
    gap: clamp(18px, 2.4vw, 28px);
    /* SP（ベース）：下余白を抑えめに */
    margin-bottom: 12px;
}

/* PC：下余白は従来の 28px を維持 */
@media (min-width: 769px) {
    .p-vision-page__value-head {
        margin-bottom: 28px;
    }
}

/* 番号：タイトルの右横に大きく配置（約2倍サイズ＋やや高めの不透明度で目立たせる）。 */
.p-vision-page__value-num {
    font-family: var(--font-display);
    font-size: clamp(56px, 6vw, 84px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.p-vision-page__value-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-vision-page__value-en {
    font-family: var(--font-display);
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.7);
}

.p-vision-page__value-ja {
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
    color: #fff;
}

.p-vision-page__value-text {
    font-size: clamp(16px, 1.9vw, 18px);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #fff;
}

.p-vision-page__value-desc {
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #fff;
    margin-top: 10px;
}

/* ════════════════════════════════════════
   Page: p-recruit（採用・募集）
   黒帯ヘッド＝partners / company / hometown と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）。
   本文＝リード＋目次タイル → 募集ブロック（左右交互・hometown の取り組み実績と同型）→ CTA（c-cta 共通）。
   配色は style.css スキーム（--white=白／--base=濃）。命名＝FLOCSS（p-recruit__*）。
   ※黒帯ヘッド英字・CTA英字はまずテキストで組む（後で c-svgtext で文字単位SVG化）。
   ════════════════════════════════════════ */
.p-recruit__head {
    /* section_bg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。横は __head-inner 側で取る。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-recruit__head {
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-recruit__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── イントロ（リード＋目次タイル） ── */
.p-recruit__intro {
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 80px)
        clamp(28px, 7.4vw, 48px);
}

.p-recruit__intro-inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* リードは p-partners__lead と同じデザイン（中央寄せ・max-width760・line-height2・通常ウェイト）。
   partners は中央寄せを親 __intro から受けるが、recruit は目次タイルも内包するためリード単体に持たせる。 */
.p-recruit__lead {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2;
    text-align: center;
    color: var(--base);
}

/* 目次：ボタンではなく縦罫区切り（案A）。上下の罫線は無し、縦ラインのみ（左外枠＋列間＋右外枠）。
   各列は英字→和文→▼をセンター積み。SP/PC とも常に3カラム1行。
   幅は flex で組み、各 li のクラス（--volunteer 等）で個別調整できるようにする。 */
.p-recruit__index {
    list-style: none;
    display: flex; /* grid→flex：各列の幅を li のクラス（flex-grow）で調整できるように */
    max-width: 820px; /* ニュース記事・募集ブロックと同じ可読幅 */
    margin: clamp(40px, 6vw, 64px) auto 0; /* 上余白＋左右中央寄せ */
    border-left: var(--rule); /* 左外枠（縦ラインのみ・上下罫線なし） */
}

/* li＝列。既定は等幅（flex:1 1 0）。各列の右罫（列間＋最終列＝右外枠）でセル高さ揃え。 */
.p-recruit__index-item {
    display: flex;
    flex: 1 1 0;
    border-right: var(--rule);
}

/* ボランティアだけ少し広く（文言が他より長いため）。 */
.p-recruit__index-item--volunteer {
    flex-grow: 1.3;
}

.p-recruit__index-tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 4px;
    padding: 0 clamp(6px, 1.5vw, 16px);
    text-decoration: none;
    color: var(--base);
}

.p-recruit__index-en {
    font-family: var(--font-display);
    font-size: clamp(18px, 4.8vw, 28px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--base);
}

.p-recruit__index-jp {
    font-size: clamp(12px, 2.6vw, 15px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--g600);
}

.p-recruit__index-arrow {
    line-height: 0;
    color: var(--base);
    height: clamp(10px, 2.6vw, 20px);
}

.p-recruit__index-arrow .c-icon {
    font-size: clamp(16px, 3vw, 20px);
    transform: rotate(90deg); /* 下向き＝ページ内ジャンプ */
    transition: transform 0.2s;
}

/* ホバーで矢印を下へスライド（rotate空間ではX+方向＝画面下）。 */
.p-recruit__index-tile:hover .p-recruit__index-arrow .c-icon {
    transform: rotate(90deg) translateX(4px);
}

/* ── 募集ブロック（縦積み・全幅の帯で区切り） ──
   .p-recruit__jobs は帯（section）を縦に並べるだけのラッパー（全幅）。
   各 section が「全幅の帯」＝背景色＋パディングを持ち、中身は max-width 1100px で中央寄せ。
   背景は交互（staff=surface／volunteer=白／player=surface）で区切りを明示する。 */
.p-recruit__jobs {
    display: flex;
    flex-direction: column;
}

/* 縦積み（見出し → 写真 → 本文）。左右交互はやめ、視線を上→下の一定リズムに。
   section 自体は全幅の帯。中身は下の child 指定で 1100px に絞り中央寄せ。 */
.p-recruit__job {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 24px);
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 80px);
    scroll-margin-top: 80px; /* アンカージャンプ時に固定ナビ(SP64px)へ潜らない */
}

/* 背景色で区切り：奇数番（staff=1・player=3）に薄グレー、偶数番（volunteer=2）は白のまま。 */
.p-recruit__job:nth-child(odd) {
    background: var(--surface);
}

/* 帯の中身（見出し・写真・本文）は 1100px に絞って中央寄せ。 */
.p-recruit__job > .c-section-header,
.p-recruit__job > .p-recruit__job-photo,
.p-recruit__job > .p-recruit__job-body {
    width: 100%;
    max-width: 1100px;
}

/* 見出しの既定下マージンは消し、縦間隔は flex の gap に一本化。 */
.p-recruit__job > .c-section-header {
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .p-recruit__job {
        scroll-margin-top: 100px; /* PCナビ84px分 */
    }
    /* vision の mission/values と同様、PCで英字タイトルを縮小（他ページには不干渉）。 */
    .p-recruit__job .c-section-header__title {
        font-size: clamp(48px, 6.5vw, 96px);
    }
}

.p-recruit__job-photo {
    overflow: hidden;
}

.p-recruit__job-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1; /* イメージ写真＝横長バナー比率（1200×400）。object-fit:cover で中央トリミング表示 */
    object-fit: cover;
    object-position: center;
    display: block;
}

.p-recruit__job-title {
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--base);
}

.p-recruit__job-desc {
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 500;
    line-height: 2;
    color: var(--g800);
    margin-top: clamp(14px, 2vw, 20px);
}

.p-recruit__job-tbd {
    color: var(--g500);
    font-style: italic;
}

/* 募集要項テーブル：SP縦積み（dt→dd）／PC＝130px 1fr 横並び */
.p-recruit__job-table {
    margin-top: clamp(22px, 3vw, 28px);
}

.p-recruit__job-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
    border-bottom: var(--rule);
    font-size: 15px; /* dt/dd 共通の文字サイズ（親で指定）。SP15px／PC16px */
}

.p-recruit__job-row:first-child {
    border-top: var(--rule);
}

@media (min-width: 769px) {
    .p-recruit__job-row {
        grid-template-columns: 130px 1fr;
        gap: clamp(16px, 2vw, 28px);
        padding: 16px 0;
        font-size: 16px;
    }
}

.p-recruit__job-row dt {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--g800);
    padding-top: 2px;
}

.p-recruit__job-row dd {
    line-height: 1.9;
    color: var(--base);
}

.p-recruit__job-ul {
    margin: 0;
    padding-left: 1.1em;
}

.p-recruit__job-ul li {
    margin-bottom: 6px;
}

.p-recruit__job-ul li:last-child {
    margin-bottom: 0;
}

/* 各ブロックのCTAボタン：黒ソリッド＋矢印スライド（和文ラベル＝本文フォント）。
   メインの導線なので c-cta ボタンより高さを出した大きめサイズ。SP＝左寄せ／PC＝中央寄せ。 */
.p-recruit__job-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(24px, 3vw, 32px);
    font-size: 15px; /* SP */
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--base);
    color: var(--white);
    border: 1px solid var(--base);
    padding: 20px; /* SP：上下左右20px */
    width: 100%; /* SP：全幅 */
    min-width: 320px;
    text-decoration: none;
    transition:
        background 0.25s,
        color 0.25s;
}

@media (min-width: 769px) {
    .p-recruit__job-btn {
        width: fit-content; /* SPの100%を上書き＝内容幅に */
        min-width: 400px; /* 大きめCTA */
        margin-left: auto;
        margin-right: auto; /* PCは中央寄せ */
        padding: 32px; /* PC：上下左右32px */
        font-size: 16px; /* PC */
    }
}

.p-recruit__job-btn .c-icon {
    font-size: 20px;
    transition: transform 0.25s ease;
}

.p-recruit__job-btn:hover {
    background: var(--g800);
}

.p-recruit__job-btn:hover .c-icon {
    transform: translateX(5px);
}

/* ===== Opening: c-opening + FOUC control ===== */

body.is-opening {
    overflow: hidden;
    pointer-events: none;
}

/* ── オープニング演出（黒/白の2枚カーテンが上下に割れて退場） ── */
.c-opening {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* オープニング中：ヒーローは白地状態（写真・見出し・ティッカーを非表示）→ 黒分割後に段階的に出現 */
.p-hero {
    background: #fff;
}

body.is-opening .p-hero__photo {
    opacity: 0;
    filter: blur(22px);
}

body.is-opening .p-hero__type {
    opacity: 0;
}

body.is-opening .c-ticker {
    opacity: 0;
}

/* セッション内2回目以降：オープニングをスキップ（描画前から黒カーテンを消し、ヒーローを即表示） */
html.is-opening-skip .c-opening {
    display: none;
}

html.is-opening-skip body.is-opening {
    overflow: visible;
    pointer-events: auto;
}

html.is-opening-skip body.is-opening .p-hero__photo {
    opacity: 1;
    filter: none;
}

html.is-opening-skip body.is-opening .p-hero__type,
html.is-opening-skip body.is-opening .c-ticker {
    opacity: 1;
}

/* リロード/再訪時の見出し再生：本編オープニングは出さず「THIS IS〜」を1文字ずつせり上げる。
   gsap非依存の純CSSアニメ＝<head> 同期で付く is-hero-replay をトリガに、各文字(.p-hero__char)を
   下→定位置へスライド。TOP NEWS見出し（.c-section-header__title）と同パラメータ＝yPercent115相当・
   0.8s・power3.out・1文字0.05sずらし（stagger は各文字の inline --d）。
   描画前から from 状態（下に隠れる）で始まり（fill:both）、JS/gsap の有無やタブ非アクティブに関係なく
   必ず to（translateY:0＝表示）に着地する＝「隠れたまま出ない」事故が起きない。 */
@keyframes p-hero-rise {
    from {
        transform: translateY(115%);
    }
    to {
        transform: translateY(0);
    }
}

html.is-hero-replay .p-hero__char {
    animation: p-hero-rise 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay: calc(var(--i, 0) * var(--hero-stag, 0.03s));
}

/* 保険：reduce-motion 時はアニメ無し（<head> 側でも付与をスキップするが念のため即表示） */
@media (prefers-reduced-motion: reduce) {
    html.is-hero-replay .p-hero__char {
        animation: none;
    }
}

/* ════════════════════════════════════════
   Page: p-contact（お問い合わせ）
   黒帯ヘッド＝privacy / terms / company と同じ（[data-nav-hero] 共通背景＋左ダークグラデ）を流用。
   本文＝リード ＋ お問い合わせフォーム（Snow Monkey Forms 設置想定）。1カラム・最大760px中央。
   配色は style.css スキーム（--white=白／--base=濃／g数字大=濃）。命名＝FLOCSS（p-contact__*）。
   ════════════════════════════════════════ */
.p-contact__head {
    /* section_bg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ。横は __head-inner 側で取る。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-contact__head {
        /* PC：固定ナビ84px分＋余白 */
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

/* ヘッド中身をナビと同じグリッド（max-width 1920＋共通ガター）に：左端がロゴと揃う */
.p-contact__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

/* ── 本文 ── */
.p-contact__body {
    padding: clamp(42px, 6vw, 72px) clamp(24px, 5vw, 80px)
        clamp(64px, 9vw, 130px);
}

.p-contact__inner {
    max-width: 760px;
    margin: 0 auto;
}

.p-contact__lead {
    font-size: clamp(15px, 1.8vw, 18px); /* p-recruit__lead と統一 */
    line-height: 2.1;
    color: var(--g800);
    margin-bottom: clamp(40px, 5vw, 60px);
}

/* ── フォーム（Snow Monkey Forms 設置想定） ── */
.p-contact__form {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 34px);
}

/* 1行＝ラベル＋入力。モバイルファースト：SP＝縦積み／PC＝200px 1fr 横並び。 */
.p-contact__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 769px) {
    .p-contact__row {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: clamp(12px, 2vw, 32px);
        align-items: start;
    }
}

.p-contact__label {
    font-size: clamp(14px, 1.7vw, 16px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--base);
}

@media (min-width: 769px) {
    .p-contact__label {
        padding-top: 13px; /* 入力欄の1行目テキストにラベルを揃える */
    }
}

.p-contact__req {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600; /* 親（label=600／consent=400）に依存せず太さを統一 */
    letter-spacing: 0.08em;
    color: #e2552b; /* 注意・必須（DESIGN §3 機能色） */
    vertical-align: middle;
}

@media (min-width: 769px) {
    .p-contact__req {
        font-size: 14px; /* PCはSP（12px）より少し大きく */
    }
}

/* 任意マーク（必須と同寸法・色だけグレー） */
.p-contact__optional {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--g500);
    vertical-align: middle;
}

@media (min-width: 769px) {
    .p-contact__optional {
        font-size: 14px;
    }
}

/* 補足テキスト（aria-describedby 紐付け）：入力欄の下に小さく */
.p-contact__help {
    margin-top: 8px;
    font-size: clamp(12px, 1.4vw, 13px);
    line-height: 1.7;
    color: var(--g600);
}

.p-contact__help--center {
    text-align: center;
}

/* エラー文（送信時に該当項目だけ赤字で表示）。aria-live="polite" でATにも通知。
   通常は空＝:empty で詰めて非表示。実装（SMF/JS）が文言を挿入すると赤字で出る。 */
.p-contact__error {
    margin-top: 6px;
    font-size: clamp(12px, 1.4vw, 13px);
    line-height: 1.7;
    font-weight: 600;
    color: #e2552b; /* 注意・エラー（DESIGN §3 機能色） */
}

.p-contact__error:empty {
    display: none;
}

.p-contact__error--center {
    text-align: center;
}

.p-contact__field {
    width: 100%;
}

.p-contact__field input,
.p-contact__field select,
.p-contact__field textarea {
    width: 100%;
    /* select の矢印（背景画像）を focus で消さないよう background-color を使う（shorthand は不可） */
    background-color: var(--white);
    border: 1px solid var(--g300);
    border-radius: 0;
    color: var(--base);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 16px;
    transition:
        border-color 0.2s,
        background-color 0.2s;
}

.p-contact__field textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.8;
}

/* セレクトは appearance:none ＋ 自前の下向きシェブロン（モノクロ） */
.p-contact__field select {
    appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%2314171a'%3E%3Cpath d='M480-360 280-560h400z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 22px;
}

.p-contact__field input::placeholder,
.p-contact__field textarea::placeholder {
    color: var(--g500);
}

.p-contact__field input:focus,
.p-contact__field select:focus,
.p-contact__field textarea:focus {
    outline: none;
    border-color: var(--base);
    background-color: var(--surface);
}

/* プライバシー同意（fieldset／legend は視覚的に隠す＝social a11y）。
   fieldset の既定の枠・余白・min-width をリセットしてレイアウトを素のブロックに戻す。 */
.p-contact__consent {
    border: 0;
    padding: 0;
    margin: clamp(12px, 2vw, 20px) 0 0;
    min-width: 0;
}

/* チェック＋テキストの行（中央寄せ） */
.p-contact__consent-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    font-size: clamp(13px, 1.5vw, 14px);
    color: var(--base);
}

.p-contact__consent-row input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--base);
}

.p-contact__consent-row a {
    color: var(--base);
    text-decoration: underline;
}

/* 送信ボタン：c-cta__btn に揃えた英字ソリッド（黒地・白文字・矢印スライド）。 */
.p-contact__submit-wrap {
    text-align: center;
    margin-top: clamp(20px, 3vw, 32px);
}

.p-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    background: var(--base);
    color: var(--white);
    border: 1px solid var(--base);
    font-family: var(--font-body); /* 日本語ボタン＝本文フォント */
    font-size: clamp(15px, 1.6vw, 16px); /* SP=15px／PC上限を18→16pxに */
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 17px 48px;
    cursor: pointer;
    transition: background 0.2s;
}

.p-contact__submit .c-icon {
    font-size: 18px; /* アイコンは 1em 連動＝ボタン文字サイズに依存するため固定18pxにする */
    transition: transform 0.2s ease;
}

.p-contact__submit:hover {
    background: var(--g800);
}

.p-contact__submit:hover .c-icon {
    transform: translateX(4px);
}

/* ════════════════════════════════════════
   p-contact-thanks（お問い合わせ 送信完了）
   黒帯ヘッドは contact（p-contact__head）を流用。本文だけ完了メッセージに差し替え。
   1カラム・最大760px中央・テキスト中央寄せ。配色は style.css スキーム。
   ════════════════════════════════════════ */
.p-contact-thanks__body {
    padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 80px)
        clamp(72px, 10vw, 140px);
}

.p-contact-thanks__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* チェックマーク（i-check_circle を c-icon で・1em連動なので font-size でサイズ指定） */
.p-contact-thanks__mark {
    font-size: clamp(64px, 10vw, 88px);
    color: var(--base);
    margin-bottom: clamp(20px, 3vw, 28px);
}

.p-contact-thanks__title {
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--base);
}

.p-contact-thanks__lead {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2.1;
    color: var(--g800);
    margin-top: clamp(20px, 3vw, 28px);
}

.p-contact-thanks__note {
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1.9;
    color: var(--g800);
    margin-top: clamp(24px, 3.5vw, 36px);
    text-align: left; /* __inner の中央寄せを打ち消す（スマホで中央寄せだと違和感） */
}

.p-contact-thanks__actions {
    margin-top: clamp(40px, 5vw, 60px);
}

/* トップへ戻る：contact の送信ボタン（p-contact__submit）と同系の黒地ソリッド。
   アイコンなし（テキストのみ）＝白黒ミニマルに合わせ、矢印の方向誤読も回避。 */
.p-contact-thanks__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    background: var(--base);
    color: var(--white);
    border: 1px solid var(--base);
    font-family: var(--font-body);
    font-size: clamp(15px, 1.6vw, 16px); /* SP=15px／PC上限を18→16pxに */
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 17px 48px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.p-contact-thanks__home:hover {
    background: var(--g800);
}

/* ════════════════════════════════════════
   p-notfound（404 ページが見つかりません）
   共通 data-nav-hero パターンの黒帯ヘッド＋中央寄せの本文。
   配色は style.css スキーム。命名＝FLOCSS（p-notfound__*）。
   ════════════════════════════════════════ */
.p-notfound__head {
    /* section_bg（[data-nav-hero] 共通）の上に左暗→右80%で透明の横グラデ（contact 等と同値）。 */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 17, 22, 0.8) 0%,
            rgba(14, 17, 22, 0) 80%
        ),
        url("../images/common/section_bg.webp");
    padding: calc(64px + clamp(10px, 3vw, 20px)) 0 clamp(18px, 3vw, 30px);
}

@media (min-width: 769px) {
    .p-notfound__head {
        padding-top: calc(84px + clamp(16px, 2.5vw, 32px));
    }
}

.p-notfound__head-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}

.p-notfound__body {
    padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 80px)
        clamp(72px, 10vw, 140px);
}

.p-notfound__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.p-notfound__title {
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--base);
}

.p-notfound__lead {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2.1;
    color: var(--g800);
    margin-top: clamp(20px, 3vw, 28px);
}

/* 導線ボタン：SP＝縦積み／PC＝横並び中央。 */
.p-notfound__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: clamp(40px, 5vw, 60px);
}

@media (min-width: 769px) {
    .p-notfound__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* 既定＝黒地ソリッド（contact-thanks の home と同系）。 */
.p-notfound__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    background: var(--base);
    color: var(--white);
    border: 1px solid var(--base);
    font-family: var(--font-body);
    font-size: clamp(
        15px,
        1.6vw,
        16px
    ); /* SP=15px据え置き／PC上限を18→16pxに */
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 17px 48px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s;
}

.p-notfound__btn:hover {
    background: var(--g800);
}

/* ゴースト＝白地・黒枠（副導線）。ホバーで黒地反転。 */
.p-notfound__btn--ghost {
    background: var(--white);
    color: var(--base);
}

.p-notfound__btn--ghost:hover {
    background: var(--base);
    color: var(--white);
}