/*
Theme Name: focus45 nexus
Theme URI: https://example.com/
Author: MizukiIgarashi
Description: 1ページ完結型の採用LPテンプレート。ビジュアルの並びは functions.php の nexus_slides() で管理し、エントリーフォームは Contact Form 7 に対応。GTMのコンテナIDは wp-config.php で案件ごとに指定します。
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: focus45-nexus
*/
/* =========================================================
   focus45 nexus  /  style.css
   1ページ完結型 採用LPテンプレート（静的HTML版：フェーズ1）

   ■ 設計方針
   - PC（1031px〜）は3カラム固定レイアウト。
       左カラム ： キャッチコピー（position:fixed）
       中央カラム： .app（幅480px。ページ本体と一緒に縦スクロール）
       右カラム ： エントリー導線（position:fixed）
     左右は fixed なのでフッターまで固定表示のまま。
   - スクロールは常に「ブラウザ標準・ドキュメント1本」。
     中央カラムを overflow:auto のスクロールコンテナにはしない。
     → こうしないとヒートマップ／スクロール深度が計測できない。
   - 中央カラムは全ブレークポイントで幅480px以下のため、
     中身のレイアウトは「狭いカラム前提」を基本形として書く。
     ブレークポイントで変わるのは外側（左右カラム・CTA・カラム幅）だけ。
   - ダークモード（prefers-color-scheme: dark）には一切追従しない。
   - 白＋薄いグレーのグリッド線背景（.bg-grid）はどのLPでも使い回せる汎用クラス。

   ■ 目次
     00. 変数・リセット
     01. ステージ（3カラム固定レイアウト）
     02. 共通パーツ（見出し／カード／ボタン）
     03. ビジュアルセクション（動画・画像）
     04. スクロール誘導
     05. セクション背景（グリッド線 or 画像）
     06. 募集要項・会社概要
     07. エントリーフォーム
     08. フッター
     09. CTA（募集要項／ENTRY）
     10. ブレークポイント（768px〜／1031px〜）
     11. 動きを減らす設定への配慮
   ========================================================= */


/* =========================================================
   00. 変数・リセット
   ========================================================= */
:root{
    /* カラー：ライトモード固定 */
    --color-text:        #1b1b1f;
    --color-text-weak:   #5b5f66;
    --color-heading:     #111114;
    --color-line:        #e5e7eb;
    --color-bg:          #ffffff;
    --color-bg-soft:     #f7f8fa;
    --color-accent:      #111114;
    --color-error:       #d93025;

    /* 中央カラム */
    --app-width: 480px;
    /* 左右カラムの立ち上がり位置（中央カラムの端から50px外側） */
    --side-offset: calc(var(--app-width) / 2 + 50px);

    /* グリッド線背景（.bg-grid で使用） */
    --grid-color: rgba(17, 17, 20, 0.06);
    --grid-size:  32px;

    /* ステージ（中央カラムの外側）の下地 */
    --stage-bg:   #f1f2f4;
    --stage-ink:  rgba(17, 17, 20, .055);

    /* iOSアドレスバー対策（script.js が実測値を入れる） */
    --vh: 1vh;
    --safe-b: env(safe-area-inset-bottom, 0px);

    --radius: 20px;
}

/* ライトモード固定：OS設定に追従させない */
html{
    color-scheme: light;
}

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

html{
    /* ページ内アンカーをなめらかに */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* ※ scroll-snap は使わない（スワイプ／スライド送りはしない方針） */
}

body{
    margin: 0;
    background-color: var(--stage-bg);
    color: var(--color-text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Helvetica Neue",
        "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .02em;
    /* ※ overflow:hidden は絶対に付けないこと（計測ツールが深度を取れなくなる） */
}

img, video, picture{ max-width: 100%; }
a{ color: inherit; }

/* キーボード操作時のフォーカスリング */
:focus-visible{
    outline: 2px solid #4f7cff;
    outline-offset: 2px;
}

/* スキップリンク */
.skip-link{
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 10px 16px;
    background: #111;
    color: #fff;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-size: 13px;
}
.skip-link:focus{ left: 0; }


/* =========================================================
   01. ステージ（3カラム固定レイアウト）
   ========================================================= */
/* 中央カラム。高さも overflow も指定しない＝ページ本体と一緒にスクロールする */
.app{
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    background: var(--color-bg);
}

/* 左右カラム。SP・タブレットでは非表示（10. ブレークポイント参照） */
.stage-copy{
    display: none;
    position: fixed;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--color-heading);
    pointer-events: none;
}
.stage-copy-label{
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--color-text-weak);
}
.stage-copy-title{
    display: block;
    font-size: clamp(34px, 3.4vw, 62px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: .01em;
}

.stage-entry{
    /* 1030px以下では display:contents にして、中のCTAだけを画面下の固定ボタンに戻す */
    display: contents;
}
.stage-entry-label,
.stage-entry-lead,
.stage-entry-note{ display: none; }


/* =========================================================
   02. 共通パーツ
   ========================================================= */
.container{
    max-width: var(--app-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section{
    scroll-margin-top: 0;
    padding: 72px 0 80px;
}

.section-head{
    text-align: center;
    margin: 0 0 32px;
}
.section-en{
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--color-text-weak);
}
.section-title{
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 800;
    color: var(--color-heading);
}
.section-lead{
    margin: 0;
    font-size: 14px;
    color: var(--color-text-weak);
}

/* カード：白背景＋うすい枠。グリッド線の上に置いても浮いて見える */
.card{
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(17, 17, 20, .06);
    padding: 26px 20px 30px;
}

.section-cta{
    margin: 32px 0 0;
    text-align: center;
}

/* 塗りボタン（セクション内CTA） */
.btn-solid{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .25s ease, opacity .2s ease;
    box-shadow: 0 10px 24px rgba(17, 17, 20, .22);
}
.btn-solid:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(17, 17, 20, .3);
}
.btn-solid:active{ transform: scale(.97); opacity: .85; }


/* =========================================================
   03. ビジュアルセクション（動画・画像）
   画像1枚＝1セクション。上から下へ縦に積むだけで、
   スナップもスライド送りもしない。
   コンテンツセクション（.section）の間に自由に差し込める。
   ========================================================= */
.section-media{
    position: relative;
    display: block;
    width: 100%;
    background: #000;
    /* 画像同士のすき間を作らない */
    font-size: 0;
    line-height: 0;
}

.section-media img{
    display: block;
    width: 100%;
    height: auto;      /* 原寸比率のまま。切り取らない */
    user-select: none;
    -webkit-user-drag: none;
}

/* FVだけは画面の高さいっぱいに見せる */
.section-media--fv{
    height: 100vh;
    height: 100svh;
    height: calc(var(--vh) * 100);
    overflow: hidden;
}
.section-media--fv .media-video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #000;
}

/* 動画を切らずに全体を見せたい場合は data-fit="contain" を付ける */
.section-media--fv[data-fit="contain"] .media-video{
    object-fit: contain;
}

/* 自動再生がブロックされたときだけ出る再生ボタン */
.video-play-fallback{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .25);
    border: 1.5px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .35),
        inset 0 0 1px rgba(255, 255, 255, .9),
        inset 0 0 20px rgba(255, 255, 255, .15);
    transition: transform .2s ease, background .25s ease;
}
.video-play-fallback::before{
    content: "";
    display: block;
    margin-left: 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}
.video-play-fallback:hover{
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, .12);
}
.video-play-fallback:active{
    transform: translate(-50%, -50%) scale(.95);
    opacity: .8;
}
.section-media.is-video-blocked .video-play-fallback{ display: flex; }


/* =========================================================
   04. スクロール誘導
   ========================================================= */
.scroll-hint{
    position: fixed;
    left: 50%;
    bottom: calc(84px + var(--safe-b));
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    pointer-events: none;
    transition: opacity .3s ease;
}
.scroll-hint.is-hidden{ opacity: 0; }
.scroll-hint-text{
    /* 文字はピルの中央に置く。明るいメディアの上でも読めるよう下地を敷く */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-indent: .24em;   /* 字間の分だけ右に寄るのを打ち消す */
}
.scroll-hint-bar{
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    box-shadow: 0 0 4px rgba(0, 0, 0, .45);
    animation: scroll-hint-move 1.8s ease-in-out infinite;
}
@keyframes scroll-hint-move{
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}


/* =========================================================
   05. セクション背景：白＋薄いグレーのグリッド線
   どのLPでも使い回せる汎用クラス。線の色・間隔は変数で調整する。
     例）<section class="section bg-grid"> … </section>
   ========================================================= */
.bg-grid{
    background-color: var(--color-bg);
    background-image:
        linear-gradient(to right,  var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: 0 0;
    background-repeat: repeat;
}

/* ---------------------------------------------------------
   背景を画像にする場合。
   functions.php の nexus_config() で bg_image にファイル名を入れると
   <body> に .has-bg-image が付き、--bg-image に画像URLが入る。
   空にすれば上のグリッド線に戻る。CSSを編集する必要はない。

   白のレイヤーを重ねているのは、画像の上でも本文が読めるようにするため。
   写真が明るすぎる／暗すぎる場合はこの不透明度（.86）で調整する。
   --------------------------------------------------------- */
.has-bg-image .bg-grid{
    background-color: var(--color-bg);
    background-image:
        linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
        var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}


/* =========================================================
   06. 募集要項・会社概要
   ========================================================= */
/* タブ */
.tab-buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 22px;
}
.tab-button{
    flex: 1 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tab-button:hover{
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: translateY(-1px);
}
.tab-button.is-active{
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(17, 17, 20, .22);
}

.tab-content{ display: none; }
.tab-content.is-active{ display: block; }

/* 定義リスト（募集要項・会社概要で共通）：狭いカラム前提で縦積み */
.recruit-rows{
    display: grid;
    gap: 10px;
    margin: 0;
}
.recruit-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
}
.recruit-term{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-weak);
}
.recruit-desc{
    margin: 0;
    font-size: 16px;
    color: var(--color-text);
    word-break: break-word;
}


/* =========================================================
   07. エントリーフォーム
   ※フェーズ2で Contact Form 7 に置き換えるとき、
     .form-row / .form-label / .form-control / .badge の
     クラス名をそのままCF7側のHTMLに書けば見た目は維持される。
   ========================================================= */
.entry-form{
    display: grid;
    gap: 18px;
}

.form-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-heading);
}

.badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.badge-required{ background: #ff4b4b; color: #fff; }
.badge-optional{ background: #e9ecf1; color: #555; }

.form-control{
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font-size: 16px; /* iOSで入力時に拡大されないよう16px以上にする */
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color: #a3a9b1; }
.form-control:focus{
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, .15);
}
textarea.form-control{ min-height: 130px; resize: vertical; }

select.form-control{
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23999'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* ラジオ・チェックボックス */
.form-options{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.form-options label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.form-options label:hover{
    background: #edf1ff;
    border-color: #4f7cff;
}
.form-options input[type="radio"],
.form-options input[type="checkbox"]{
    accent-color: var(--color-accent);
    margin: 0;
}

/* 個人情報同意 */
.form-row-agree{
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
}
.form-agree{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.form-agree input[type="checkbox"]{
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
    margin: 0;
}
.form-agree span{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* エラー表示 */
.form-error{
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-error);
}
.form-control.is-invalid{
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

/* 送信ボタン */
.form-row-submit{
    margin-top: 8px;
    align-items: center;
}
.form-submit{
    appearance: none;
    width: 100%;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    padding: 16px 24px;
    background: var(--color-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(17, 17, 20, .22);
}
.form-submit:hover{
    transform: translateY(-2px);
    background: #fff;
    color: var(--color-accent);
}
.form-submit:active{ transform: scale(.98); opacity: .9; }

.recaptcha-notice{
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.7;
    color: #6b6f76;
    text-align: center;
}

/* 送信完了パネル */
.form-done{
    text-align: center;
    padding: 20px 0 8px;
}
.form-done-icon{
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 30px;
    line-height: 64px;
}
.form-done-title{
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-heading);
}
.form-done-text{ margin: 0 0 16px; font-size: 14px; }
.form-done-note{
    margin: 0;
    font-size: 12px;
    color: var(--color-text-weak);
}


/* =========================================================
   08. フッター（中央カラムの中）
   ========================================================= */
.site-footer{
    padding: 28px 20px calc(120px + var(--safe-b)); /* 下部固定CTAに隠れない余白 */
    background: var(--color-accent);
    color: #fff;
    text-align: center;
}
.site-footer-copy{
    margin: 0;
    font-size: 12px;
    letter-spacing: .06em;
}


/* =========================================================
   09. CTA（募集要項／ENTRY）
   どのスクロール位置からでも押せるよう常時表示する。
   見た目は元テーマのガラス調ピルを踏襲。
   基本形（〜767px）はENTRYが画面下中央のピル、募集要項が右下の丸ボタン。
   ========================================================= */
.fp-cta{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    pointer-events: none;
}
.fp-cta .btn{ pointer-events: auto; }

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    text-shadow:
        0 0 4px rgba(0, 0, 0, .45),
        0 0 8px rgba(0, 0, 0, .35),
        0 0 12px rgba(0, 0, 0, .25);
    background: rgba(0, 0, 0, .25);
    border: 1.5px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .35),
        inset 0 0 1px rgba(255, 255, 255, .9),
        inset 0 0 20px rgba(255, 255, 255, .15);
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover{
    background: rgba(255, 255, 255, .18);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, .45),
        inset 0 0 1px rgba(255, 255, 255, 1),
        inset 0 0 28px rgba(255, 255, 255, .25);
}
.btn:active{ opacity: .8; }

/* ENTRY：画面下中央のピル */
.btn-entry{
    position: fixed;
    left: 50%;
    bottom: calc(18px + var(--safe-b));
    transform: translateX(-50%);
    height: 46px;
    padding: 0 52px;
}
.btn-entry:hover{ transform: translateX(-50%) translateY(-3px); }
.btn-entry:active{ transform: translateX(-50%) scale(.96); }

/* 募集要項：右下の丸ボタン */
.btn-recruit{
    position: fixed;
    right: 12px;
    bottom: calc(12px + var(--safe-b));
    width: 62px;
    height: 62px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
}
.btn-recruit:hover{ transform: translateY(-3px); }
.btn-recruit:active{ transform: scale(.96); }

/* 白背景セクションの上に来たとき（JSが .is-on-light を付ける） */
.fp-cta.is-on-light .btn{
    background: rgba(17, 17, 20, .92);
    border-color: rgba(17, 17, 20, .92);
    text-shadow: none;
    box-shadow: 0 10px 24px rgba(17, 17, 20, .22);
}
.fp-cta.is-on-light .btn:hover{
    background: #000;
    border-color: #000;
    box-shadow: 0 16px 32px rgba(17, 17, 20, .3);
}


/* =========================================================
   10. ブレークポイント
       〜767px   ： 中央カラムが画面いっぱい（基本形）
       768〜1030 ： 中央カラム480px。左右カラムは出さない
       1031px〜  ： 3カラム固定レイアウト
   ========================================================= */
@media (min-width: 768px){
    .app{
        width: var(--app-width);
        box-shadow: 0 0 80px rgba(17, 17, 20, .18);
    }

    /* ステージの下地（中央カラムの外側）。控えめな幾何パターン */
    body{
        background-image: var(--bg-image);
        background-attachment: fixed;
    }

    /* CTAは画面下中央の横並びに */
    .fp-cta{
        left: 50%;
        right: auto;
        bottom: calc(24px + var(--safe-b));
        transform: translateX(-50%);
        display: flex;
        gap: 12px;
    }
    .btn-entry,
    .btn-recruit{
        position: static;
        transform: none;
        width: auto;
        height: 54px;
        padding: 0 34px;
        border-radius: 999px;
        font-size: 15px;
    }
    .btn-entry:hover,
    .btn-recruit:hover{ transform: translateY(-3px); }
    .btn-entry:active,
    .btn-recruit:active{ transform: scale(.96); }

    .site-footer{ padding-bottom: calc(110px + var(--safe-b)); }
    .scroll-hint{ bottom: calc(96px + var(--safe-b)); }
}

@media (min-width: 1031px){
    /* --- 左カラム --- */
    .stage-copy{
        display: block;
        right: calc(50% + var(--side-offset));
        text-align: right;
    }

    /* --- 右カラム --- */
    .stage-entry{
        display: block;
        position: fixed;
        top: 50%;
        left: calc(50% + var(--side-offset));
        z-index: 60;
        width: min(300px, calc(50vw - var(--side-offset) - 24px));
        min-width: 210px;
        transform: translateY(-50%);
    }
    .stage-entry-label{
        display: block;
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .22em;
        color: var(--color-text-weak);
    }
    .stage-entry-lead{
        display: block;
        margin: 0 0 22px;
        font-size: clamp(17px, 1.4vw, 21px);
        font-weight: 700;
        line-height: 1.7;
        color: var(--color-heading);
    }
    .stage-entry-note{
        display: block;
        margin-top: 14px;
        font-size: 11px;
        font-weight: 700;
        font-style: normal;
        letter-spacing: .18em;
        color: var(--color-text-weak);
        text-align: right;
    }

    /* CTAは右カラムの中に収める（固定配置はやめて通常の積み上げに） */
    .fp-cta{
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        display: grid;
        gap: 14px;
        pointer-events: auto;
    }
    .btn-entry,
    .btn-recruit{
        position: static;
        transform: none;
        width: 100%;
        height: 60px;
        padding: 0 24px;
        border-radius: 999px;
        font-size: 16px;
    }

    /* 右カラムの下地は明るいので、ガラス調ではなく黒ベタで固定する
       （形・文字は同じまま。ガラス調は暗いメディアの上でしか読めないため） */
    .fp-cta .btn,
    .fp-cta.is-on-light .btn{
        background: var(--color-accent);
        border-color: var(--color-accent);
        text-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 12px 28px rgba(17, 17, 20, .22);
    }
    .fp-cta .btn:hover,
    .fp-cta.is-on-light .btn:hover{
        transform: translateY(-3px);
        background: #000;
        border-color: #000;
        box-shadow: 0 18px 36px rgba(17, 17, 20, .3);
    }

    .site-footer{ padding-bottom: 32px; }
    .scroll-hint{ bottom: 32px; }
}


/* =========================================================
   11. 「視差効果を減らす」設定への配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .scroll-hint-bar{ animation: none; }
    *{ transition-duration: .01ms !important; }
}