/* ================== RecruitHero / Mobile strict scope (≤1000px) ================== */
@media (max-width: 1000px) {

    /* 1) セクションを1画面内に収める（縦方向） */
    .recruitHero {
        min-height: 100svh;
        /* iOSのアドレスバー対応 */
        display: grid;
        grid-template-rows: auto 1fr auto;
        /* 上：見出し群 / 中：余白 / 下：画像 */
        row-gap: 16px;
        padding: 16px 0 16px;
        /* 全体の上下余白を圧縮 */
    }

    /* セクション全体の視覚位置を下げる（見た目のみ）。他レイアウトに影響しない */
    .recruitHero {
        --nudgeY: 24px;
        /* 下方向へのオフセット量（16〜32pxで調整） */
        min-height: 100svh;
        /* 1画面に収める要件は維持 */
        padding-top: calc(16px + var(--nudgeY));
        padding-bottom: calc(16px - var(--nudgeY));
        /* 上で増やした分だけ下を減らし、総高さは不変 → 他セクションに影響ゼロ */
    }

    .recruitHero__inner {
        width: 100%;
        max-width: none;
        padding: 0 16px;
        /* iPhone視覚 16px 余白 */
        display: grid;
        grid-template-columns: 1fr;
        /* 縦積み */
        gap: 16px;
    }

    /* 2) 見出し・本文・CTAのサイズ圧縮（色や文言は変更しない） */
    .recruitHero__label {
        font-size: 23px;
        margin: 4px 0 8px;
    }

    .recruitHero__copyTitle {
        font-size: 22px;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .recruitHero__copyLead {
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 12px;
    }

    /* 5) 「採用」ボタンを少し小さく（既存のbtn-sweepにのみ） */
    .recruitHero .btn-sweep.btn-size--third {
        padding: 10px 18px !important;
        font-size: 14px !important;
        border-radius: 9999px !important;
    }

    /* 3)(4) 写真：右端接続＋形状完全化＋スライダー可視化 */
    .recruitHero__media {
        order: 3;
        margin: 0;
        /* 他セクションに影響しない */
    }

    /* マスク：上下の丸みが直線化しないよう、半円ピルを厳密指定 */
    .recruitHero__media .recruitHero__mediaCircleMask {
        position: relative;
        overflow: hidden;
        /* 右端を画面右端に接続（他要素は不変） */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        /* 形は"左角丸＋右半円"のピル。上下の丸みを揃えるため楕円半径を高さ依存で作る。 */
        border-radius: 24px 2000px 2000px 24px;
        /* 上左/上右/下右/下左（上下の丸み一致） */
        height: 220px;
        /* 既視感に合わせ固定（必要なら 200〜260pxで微調整） */
        background: #000;
    }

    /* スライダー領域はマスク高さに追従（挙動自体は recruit-hero.css の横スクロールをそのまま使用） */
    .recruitHero__media .heroSlider {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    /* 「採用」ボタンを画面中央に配置 */
    .recruitHero__text {
        text-align: center !important;
    }

    .recruitHero__cta {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* セクション全体の視覚位置を下げる（見た目のみ）。他レイアウトに影響しない */
    .recruitHero {
        --nudgeY: 24px;
        /* 下方向へのオフセット量（16〜32pxで調整） */
        min-height: 100svh;
        /* 1画面に収める要件は維持 */
        padding-top: calc(16px + var(--nudgeY));
        padding-bottom: calc(16px - var(--nudgeY));
        /* 上で増やした分だけ下を減らし、総高さは不変 → 他セクションに影響ゼロ */
    }

    /* 内部コンテンツは視覚的に下へ。transformはレイアウト非干渉なので安全 */
    .recruitHero__inner {
        transform: translateY(var(--nudgeY));
    }

    /* 画像マスク・スライダーの形や高さ・アニメーションには一切触れない */
    .recruitHero__media .recruitHero__mediaCircleMask,
    .recruitHero__media .heroSlider__track {
        /* 既存の border-radius / height / animation を保持 */
    }
}

/* ================== RecruitHero：写真とfooterの間の余白を1/3に縮める（300〜1000px専用） ================== */
@media screen and (min-width: 300px) and (max-width: 1000px) {

    /* セクション自体の上下余白を調整して高さを圧縮 */
    section.recruitHero,
    .recruitHero {
        padding-top: 56px;
        /* 上は現状と同等 or 少しだけ小さめでもOK */
        padding-bottom: 40px !important;
        /* 下の余白をかなり小さく → 現在の約1/3イメージ */
        margin-bottom: 0 !important;
        /* 不要なmarginがあれば全て打ち消す */
    }

    /* 内側コンテナが余白を持っている場合に備えてリセット */
    .recruitHero__inner {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 円形マスクまわりの不要な余白を削る（高さ制御は recruit-hero.css に任せる） */
    .recruitHero__mediaCircleMask {
        margin-bottom: 20px !important;
        /* 余白を最小限だけ残す */
        padding-bottom: 0 !important;
    }
}

/* ================== Desktop safeguard (≥1001px) ================== */
@media (min-width: 1001px) {
    /* 変更禁止：空定義（PCレイアウトは recruit-hero.css 側で制御） */
}

/* ----------------------------------------------------
FIX: recruitHero のタイトル・リード文を
PC（1024px以上）には影響させず、
1023px以下のみフォント縮小＋改行固定
---------------------------------------------------- */
@media (max-width: 1023px) {

    /* 改行固定＆勝手な折り返し防止 */
    .recruitHero__copyTitle,
    .recruitHero__copyLead {
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: normal;
    }

    /* <br> を確実に改行扱いにして固定する */
    .recruitHero__copyTitle br,
    .recruitHero__copyLead br {
        display: block;
        content: "";
    }

    /* フォント縮小（PCの見た目を壊さない範囲で可変） */
    .recruitHero__copyTitle {
        font-size: 3.8vw;
        /* 例：PCと同じ行位置維持しつつ縮む */
        line-height: 1.35;
        /* 既存バランス維持前提 */
    }

    .recruitHero__copyLead {
        line-height: 1.65;
        padding-bottom: 50px;
    }

    /* 確認項目（開発者向けメモ）
       1. PC幅（1024px以上）でタイトルとリード文の見た目が 1px も変わっていないこと。
       2. スマホ幅（iPhone SE/12/14、Android）で
          「自分の人生を本気でぶち上げ、」
          「仲間と共に未来を創ろう。」
          の 2 行が完全に同じ位置で改行されていること。
       3. リード文も PC と全く同じ行構成で表示され、勝手な折り返しが起きていないこと。
       4. 文字サイズだけが縮み、余白・レイアウト・構図が崩れていないこと。 */
}

/* ================================
   RecruitHero 写真スライダー：1023px以下で黒抜けなくカプセル内を写真で埋める
   （PC ≥1024px には一切影響しない）
   ================================ */
/* FIX: 採用セクションのスライダー黒抜け対策（背景色とobject-fit調整） */
@media (max-width: 1023px) {

    /* スライダー周辺の背景を白で統一（黒背景が見えないようにする） */
    .recruitHero__media,
    .recruitHero__mediaCircleMask,
    .recruitHero__media .heroSlider,
    .recruitHero__media .heroSlider__track,
    .recruitHero__media .heroSlider__slide {
        background-color: #ffffff !important;
    }

    /* FIX: recruitHero スライダーの画像高さ0問題（モバイル用高さとobject-fit調整）
       画像はカプセル内をきちんと埋めるように表示（トリミングは許容） */
    .recruitHero__media .heroSlider__slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        background-color: #ffffff;
    }
}

/* FIX: 採用セクション最下部のグレー帯を白背景で統一 */
@media (max-width: 1023px) {
    .recruitHero {
        background-color: #ffffff !important;
        margin-bottom: 0 !important;
        padding-bottom: 40px !important;
    }

    /* 直後セクションの上端も白でつなげる（他セクションへの影響を最小限に） */
    .recruitHero+section {
        background-color: #ffffff !important;
        margin-top: 0 !important;
    }

    /* 確認用メモ：
       - 1024px以上のPC表示で採用セクションのレイアウト・余白が変わっていないこと。
       - PC/モバイル両方でスライダー内の黒抜けが消え、常に写真でカプセルが埋まっていること。
       - 採用セクション最下部までスクロールしたとき、白背景が途切れず続き、
         グレーの帯が見えないこと。 */
}

/* =========================================
   RecruitHero: 300〜559px 完全上書き
   （このブロックをファイルの一番最後に置く）
   ========================================= */
@media (min-width: 300px) and (max-width: 559px) {

    /* セクションを 1画面に＆中央寄せ */
    .recruitHero {
        background: #fff !important;
        /* アドレスバー込みでも見た目1画面分になるよう、small viewport基準に変更 */
        min-height: calc(100svh - var(--header-h, 80px)) !important;
        padding: 32px 0 24px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box;
    }

    /* 中身のブロックを縦方向センター */
    .recruitHero__inner {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        padding: 0 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        row-gap: 20px !important;
    }

    .recruitHero__text {
        max-width: 100%;
        padding-right: 0 !important;
        text-align: center !important;
    }

    /* タイトルを2行固定（<br> 位置のみで改行し、自動折り返しはさせない） */
    .recruitHero__copyTitle {
        font-size: clamp(18px, 5.8vw, 24px);
        line-height: 1.35;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .recruitHero__copyTitle br {
        display: block;
    }

    .recruitHero__cta {
        justify-content: center !important;
    }

    /* 写真ブロックをテキストの下＆中央へ */
    .recruitHero__media {
        order: 2;
        margin-right: 0 !important;
        translate: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* ★ 形：PCと同じ横長の楕円（ピル型）で固定
       端の直線化を防ぐため、左右ともカーブが十分に見える幅に微調整 ★ */
    .recruitHero__mediaCircleMask {
        width: min(86vw, 380px) !important;
        max-width: 380px !important;
        height: auto !important;
        aspect-ratio: 2.3 / 1 !important;
        /* 横長ピル型の比率を固定 */
        border-radius: 9999px !important;
        /* 左右とも丸く見えるよう完全な楕円カーブに */
        overflow: hidden !important;
        margin: 8px auto 0 !important;
        background: #000;
    }

    /* SP幅では左端の白ラインを消して、左右同じカーブに見えるようにする */
    .recruitHero__mediaCircleMask::before {
        content: none !important;
    }

    /* 内部の画像をマスクいっぱいにフィットさせる */
    .recruitHero .heroSlider,
    .recruitHero .heroSlider__track,
    .recruitHero .heroSlider__slide {
        height: 100% !important;
    }

    .recruitHero .heroSlider__slide>img {
        width: auto !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    /* 一番下にグレーが出ないよう背景を白で固定 */
    body,
    #content,
    .site-main {
        background: #fff !important;
    }
}