/* 300〜349px専用のオーバーライドCSS
   添付スクリーンショット通りのレイアウトを再現します。
   351px以上には一切影響しません。
*/
@media screen and (min-width: 300px) and (max-width: 349px) {

    /* 共通：横スクロール防止 */
    html,
    body {
        overflow-x: hidden;
    }

    .main {
        overflow-x: hidden;
    }

    /* 1枚目：ヒーローセクション（添付スクショ通りの中央配置） */

    /* 既存CSSを上書きするため、詳細度を上げて!importantを使用 */
    html body .main .hero,
    body .main .hero,
    .main .hero,
    .hero {
        /* iOSのアドレスバー変動にも追従させつつ、見た目は1画面分を維持 */
        min-height: 100svh !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        padding-inline: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    html body .main .hero .hero__bg,
    body .main .hero .hero__bg,
    .main .hero .hero__bg,
    .hero__bg {
        min-height: 100vh !important;
    }

    /* 既存の詳細度の高いセレクタを上書き（中央配置） */
    html body .main .hero .hero__content,
    body .main .hero .hero__content,
    .main .hero .hero__content,
    .hero__content {
        position: relative !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* 縦方向中央寄せ */
        align-items: center !important;
        /* 横方向中央寄せ */
        text-align: center !important;
        gap: 24px !important;
        padding: 0 16px !important;
        width: 100% !important;
        inset: unset !important;
        z-index: 3 !important;
    }

    html body .main .hero .hero__cards,
    body .main .hero .hero__cards,
    .main .hero .hero__cards,
    .hero__cards {
        transform: none !important;
        /* 必要なら縮小を解除してスクショに近づける */
        transform-origin: center top !important;
    }

    /* 既存の詳細度の高いセレクタを上書き（scroll-indicator：中央揃え） */
    html body .main .hero .scroll-indicator,
    html body .main .hero .hero__content .scroll-indicator,
    body .main .hero .scroll-indicator,
    body .main .hero .hero__content .scroll-indicator,
    .main .hero .scroll-indicator,
    .main .hero .hero__content .scroll-indicator,
    .hero .scroll-indicator,
    .hero__content .scroll-indicator,
    .scroll-indicator {
        display: grid !important;
        row-gap: 6px !important;
        text-align: center !important;
        /* スクショのように中央揃え */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: unset !important;
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
        gap: 6px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .scroll-indicator .label {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 既存の詳細度の高いセレクタを上書き（label-en：中央揃え） */
    html body .main .hero .scroll-indicator .label-en,
    html body .main .hero .hero__content .scroll-indicator .label-en,
    body .main .hero .scroll-indicator .label-en,
    body .main .hero .hero__content .scroll-indicator .label-en,
    .main .hero .scroll-indicator .label-en,
    .main .hero .hero__content .scroll-indicator .label-en,
    .hero .scroll-indicator .label-en,
    .hero__content .scroll-indicator .label-en,
    .scroll-indicator .label-en {
        font-size: clamp(22px, 7vw, 30px) !important;
        /* スクショの文字サイズ感に合わせる */
        line-height: 1.2 !important;
        font-weight: 900 !important;
        text-align: center !important;
        /* 中央揃え */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 既存の詳細度の高いセレクタを上書き（label-jp：中央揃え） */
    html body .main .hero .scroll-indicator .label-jp,
    html body .main .hero .hero__content .scroll-indicator .label-jp,
    body .main .hero .scroll-indicator .label-jp,
    body .main .hero .hero__content .scroll-indicator .label-jp,
    .main .hero .scroll-indicator .label-jp,
    .main .hero .hero__content .scroll-indicator .label-jp,
    .hero .scroll-indicator .label-jp,
    .hero__content .scroll-indicator .label-jp,
    .scroll-indicator .label-jp {
        font-size: clamp(12px, 3.8vw, 16px) !important;
        line-height: 1.7 !important;
        font-weight: 600 !important;
        text-align: center !important;
        /* 中央揃え */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 2枚目：挑戦フィールド（動画背景＋見出し中央＋ボタン） */

    /* 既存CSSを上書きするため、詳細度を上げて!importantを使用 */
    body .main .challenge.challenge,
    .main .challenge.challenge,
    .challenge {
        padding-inline: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }

    body .main .challenge .challenge__background video,
    body .main .challenge .challenge__background img,
    .challenge__background video,
    .challenge__background img {
        object-fit: cover !important;
        width: 100% !important;
        min-height: 320px !important;
        /* 夜景が縦にしっかり出るように */
    }

    .challenge__overlay {
        /* 既存のオーバーレイをそのまま活かす。特に変更が不要なら何も書かなくてよい */
    }

    body .main .challenge .challenge__content,
    .challenge__content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* 縦中央寄せイメージ */
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
        max-width: 100% !important;
    }

    body .main .challenge .challenge__left,
    body .main .challenge .challenge__right,
    .challenge__left,
    .challenge__right {
        width: 100% !important;
    }

    .challenge__title-wrap {
        margin-bottom: 8px !important;
    }

    body .main .challenge .challenge__title-vertical,
    .challenge__title-vertical {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.25 !important;
    }

    body .main .challenge .challenge__title-line,
    .challenge__title-line {
        display: block !important;
    }

    body .main .challenge .challenge__subtitle.en,
    .challenge__subtitle.en {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-top: 4px !important;
    }

    body .main .challenge .vision__text {
        font-size: clamp(9px, 2.6vw, 13px) !important;
        line-height: 1.8 !important;
        margin-top: 8px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        padding-inline: 4px !important;
    }

    body .main .challenge .vision__text br {
        display: block;
    }

    body .main .challenge .challenge__cta,
    .challenge__cta {
        margin-top: 16px !important;
        display: flex !important;
        justify-content: center !important;
    }

    body .main .challenge .challenge__cta .btn-sweep.btn-size--third,
    .challenge__cta .btn-sweep.btn-size--third {
        min-width: 200px !important;
        max-width: 260px !important;
        width: 70% !important;
        text-align: center !important;
    }

    /* 3枚目：マニフェスト（添付スクショ通り） */

    /* 既存CSSを上書きするため、詳細度を上げて!importantを使用 */
    .manifesto {
        padding-inline: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }

    .manifesto .manifesto__content,
    .manifesto__content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: flex-start !important;
    }

    .manifesto .manifesto__left,
    .manifesto .manifesto__right,
    .manifesto__left,
    .manifesto__right {
        width: 100% !important;
    }

    /* 見出しは左寄せ（スクショ通り） */
    .manifesto .manifesto__title,
    .manifesto__title {
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    .manifesto .manifesto__title-line,
    .manifesto__title-line {
        display: block !important;
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.15 !important;
    }

    .manifesto .manifesto__text,
    .manifesto__text {
        font-size: 13px !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    .manifesto .manifesto__cta,
    .manifesto__cta {
        margin-top: 16px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .manifesto .manifesto__cta .btn-sweep.btn-size--third,
    .manifesto__cta .btn-sweep.btn-size--third {
        min-width: 200px !important;
        max-width: 260px !important;
        width: 70% !important;
        text-align: center !important;
    }

    /* レインボーテキストは下部中央揃えでスクショのように */
    .manifesto .manifesto__rainbow-text,
    .manifesto__rainbow-text {
        font-size: clamp(18px, 6vw, 24px) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    /* --- challengeとmanifestoのつなぎ用の最終調整（スクショ通りの位置関係にする） --- */

    /* 挑戦セクションの下端を少し広くとる */
    body .main .challenge.challenge,
    .main .challenge.challenge,
    .challenge {
        padding-bottom: 64px !important;
        /* 300〜349pxでは下余白を少し大きめにして区切り感を出す */
    }

    body .main .challenge .challenge__content,
    .challenge__content {
        margin-bottom: 0 !important;
        /* 余計な余白があればリセット */
    }

    /* マニフェストセクションの上端位置をスクショ通りに整える */
    .manifesto {
        margin-top: 0 !important;
        /* まず margin をリセット */
        padding-top: 48px !important;
        /* 上部の空きで「挑戦」との距離を調整 */
        padding-bottom: 56px !important;
        /* ここは既存値に合わせてもOK */
        padding-inline: 16px !important;
        box-sizing: border-box !important;
    }

    .manifesto .manifesto__content,
    .manifesto__content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: flex-start !important;
    }

    /* 見出しブロック：添付スクショ通り左寄せ＋大きめ */
    .manifesto .manifesto__title,
    .manifesto__title {
        margin: 0 0 12px 0 !important;
        text-align: left !important;
        /* 左寄せ固定 */
    }

    .manifesto .manifesto__title-line,
    .manifesto__title-line {
        display: block !important;
        font-size: clamp(24px, 8vw, 32px) !important;
        line-height: 1.2 !important;
    }

    /* 見出し直上の「恐れるな、」行の行間もきれいに */
    .manifesto .manifesto__title-line:first-child,
    .manifesto__title-line:first-child {
        margin-bottom: 4px !important;
    }

    /* 本文は少し下げて、見出しから間をとる */
    .manifesto .manifesto__text,
    .manifesto__text {
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    /* Aboutボタンは中央寄せで、本文のすぐ下に */
    .manifesto .manifesto__cta,
    .manifesto__cta {
        margin-top: 16px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .manifesto .manifesto__cta .btn-sweep.btn-size--third,
    .manifesto__cta .btn-sweep.btn-size--third {
        min-width: 200px !important;
        max-width: 260px !important;
        width: 70% !important;
        text-align: center !important;
    }

    /* レインボーテキストは最下部中央に、添付スクショと同じ印象で */
    .manifesto .manifesto__rainbow-text,
    .manifesto__rainbow-text {
        margin-top: 16px !important;
        font-size: clamp(16px, 5.8vw, 22px) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* ▼ recruitHero（採用ヒーロー）の下余白をさらに縮める調整（300〜1000px専用） ▼ */
@media screen and (min-width: 300px) and (max-width: 1000px) {

    /* セクションの底の余白をさらに圧縮（写真とfooterの間の空白） */
    /* responsive-mobile-adjustments-300-1000.css の padding-bottom: calc(clamp(64px, 12vw, 120px) - var(--text-gap-add)) を上書き */
    section.recruitHero,
    .recruitHero {
        padding-bottom: 0 !important;
        /* 10pxから0pxにさらに縮小 */
        margin-bottom: 0 !important;
    }

    /* テキストブロックの下余白を削除（responsive-mobile-adjustments-300-1000.css の padding-bottom: calc(var(--text-gap-add)) を上書き） */
    .recruitHero .recruitHero__text,
    .recruitHero__text {
        padding-bottom: 0 !important;
        /* 32pxの余白を削除 */
    }

    /* 内側コンテナの下余白も圧縮 */
    .recruitHero__inner {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 円形マスク画像周りの余白が原因で高さが伸びているのでさらに縮める */
    .recruitHero__mediaCircleMask {
        margin-bottom: 0 !important;
        /* 5pxから0pxに縮小 */
        padding-bottom: 0 !important;
    }

    /* 写真ブロック全体の下余白も圧縮 */
    /* responsive-mobile-adjustments-300-1000.css の transform: translateY(var(--media-nudge)) を上書き */
    .recruitHero .recruitHero__media,
    .recruitHero__media {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        /* 56px下への移動を削除 */
    }

    /* heroSliderが高さを押し広げるケースを抑える */
    .heroSlider,
    .heroSlider__track {
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .heroSlider__slide img {
        max-height: 240px !important;
        /* 260pxから240pxに少し縮小（画像は適度なサイズを維持） */
        object-fit: cover !important;
    }
}