/* ========================================
   モバイル限定調整 (300px-1000px)
   採用ヒーロー写真とフッターの位置調整
   ======================================== */

@media (max-width: 1000px) {

    /* ========================================
       採用ヒーロー写真ブロックを下げる
       ======================================== */
    .recruitHero__media {
        --recruit-nudge: 24px;
        position: relative;
        transform: translateY(var(--recruit-nudge));
    }

    /* ========================================
       フッター全体を下げる
       ======================================== */
    footer.site-footer {
        --footer-nudge: 40px;
        position: relative;
        transform: translateY(var(--footer-nudge));
    }

    #sf.site-footer {
        --footer-nudge: 40px;
        position: relative;
        transform: translateY(var(--footer-nudge));
    }

    /* ================== RecruitHero：モバイル時の間延ばし＆写真の下げ ================== */
    /* 調整量（必要なら16〜48pxで調整） */
    .recruitHero {
        --text-gap-add: 32px;
        /* テキスト側の"見かけの余白"をさらに増やす */
        --media-nudge: 56px;
        /* 写真（マスク全体）をさらに下にずらす量 */
    }

    /* 1) 紫の領域（テキスト〜写真の間）を広げる：テキストブロックの下端だけ余白を増やす */
    .recruitHero .recruitHero__text {
        position: relative;
        padding-bottom: calc(var(--text-gap-add));
    }

    /* セクション全体の高さは不変にするため、下側のパディングを相殺（他セクション非干渉） */
    .recruitHero {
        padding-bottom: 50px;
    }

    /* 2) 写真（マスク含む）を視覚的に下へ。形・サイズ・スライダーは触らない */
    .recruitHero .recruitHero__media {
        position: relative;
        transform: translateY(var(--media-nudge));
    }

    /* 3) 写真の左側の隙間を排除して画面左端と接続 */
    .recruitHero .recruitHero__media {
        left: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    /* 重要：形状・スライダー関連は上書き禁止（安全ガード） */
    .recruitHero .recruitHero__mediaCircleMask,
    .recruitHero .heroSlider,
    .recruitHero .heroSlider__track,
    .recruitHero .heroSlider__slide,
    .recruitHero .heroSlider__slide img {
        /* width / height / border-radius / overflow / animation を変更しないこと */
    }
}

/* =========================================
   Challenge / vision__text: 300〜549px で改行位置を固定
   （<br> 以外で自動折り返しさせない & フォントサイズで調整）
   ========================================= */
@media (min-width: 300px) and (max-width: 549px) {

    body .main .challenge .vision__text {
        font-size: clamp(9px, 2.6vw, 15px) !important;
        line-height: 1.8 !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;
    }
}

/* ================== STEP1：300〜350px専用のレイアウト調整ブロック ================== */
/* responsive-overrides-300-349.css を上書きするため、詳細度を上げて!importantを使用 */
@media screen and (min-width: 300px) and (max-width: 350px) {

    /* まずは横スクロールを完全に封じる */
    html,
    body,
    .main {
        overflow-x: hidden !important;
    }

    /* 1. 挑戦セクション（挑戦の舞台は〜） */
    /* 350〜1000px時と同じレイアウトを実装（responsive-challenge-350-1000.css と同じスタイル） */

    /* 画面高いっぱい＋フルブリード（親の左右paddingやmax-widthを無効化） */
    body .main .challenge.challenge {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        /* 画面いっぱいに見せつつ、iOSのアドレスバー変動にも追従させる */
        height: 100svh !important;
        min-height: 100svh !important;
        min-height: -webkit-fill-available !important;
        max-height: 100svh !important;
        overflow: hidden !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
    }

    /* 背景動画を全面カバー（video/poster/img いずれもOK） */
    body .main .challenge .challenge__background {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }

    body .main .challenge .challenge__background video,
    body .main .challenge .challenge__background img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* オーバーレイは全面に（可読性キープ） */
    body .main .challenge .challenge__overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }

    /* コンテナを縦横センター。端の欠け防止に左右16pxの安全余白 */
    body .main .challenge .container {
        position: relative !important;
        z-index: 2 !important;
        height: 100% !important;
        max-height: 100svh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-inline: 16px !important;
        padding-top: max(20px, env(safe-area-inset-top)) !important;
        padding-bottom: max(100px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* 中身を中央配置。長文でもはみ出さず収まる幅に制限 */
    body .main .challenge .challenge__content {
        width: min(92vw, 680px) !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        row-gap: clamp(12px, 2.5vw, 20px) !important;
        text-align: center !important;
        overflow: visible !important;
        overscroll-behavior: contain;
        min-height: auto !important;
        max-height: 90vh !important;
        padding-bottom: 20px !important;
    }

    /* 左右カラムを中央寄せに統一 */
    body .main .challenge .challenge__left,
    body .main .challenge .challenge__right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* タイポ最適化（行長・折返し・はみ出し防止） */
    body .main .challenge .challenge__title-vertical {
        font-size: clamp(22px, 6.2vw, 32px) !important;
        line-height: 1.4 !important;
        letter-spacing: .02em !important;
        margin: 0 !important;
        text-wrap: balance;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(8px, 2vw, 16px) !important;
    }

    body .main .challenge .challenge__subtitle.en {
        font-size: clamp(12px, 3.6vw, 16px) !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        max-width: 68ch !important;
        text-align: center !important;
        color: #1478FF !important;
        font-weight: 500 !important;
        padding-top: 15px;
    }

    body .main .challenge .vision__text {
        font-size: clamp(13px, 3.8vw, 16px) !important;
        line-height: 1.8 !important;
        margin: 0 !important;
        max-width: 72ch !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.95) !important;
        padding-inline: 2px !important;
    }

    /* タイトル行の個別設定 */
    body .main .challenge .challenge__title-line {
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CTAボタンは必ず中央に見える位置で */
    body .main .challenge .challenge__cta {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 20px !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    body .main .challenge .challenge__cta .btn-sweep {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        min-width: 180px !important;
        padding: 16px 32px !important;
        margin: 0 auto !important;
        font-size: clamp(15px, 4.5vw, 18px) !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* IO演出はアニメーションを有効化（is-inviewクラスが付いた時にフェードイン） */
    /* アニメーション無効化の設定を削除し、scroll-fade-animation.cssの設定を尊重 */

    /* メッセージボタンを確実に表示 */
    body .main .challenge .challenge__cta,
    body .main .challenge .challenge__cta *,
    body .main .challenge .btn-sweep,
    body .main .challenge .btn-sweep * {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        position: relative !important;
        z-index: 999 !important;
    }

    /* ボタンラベルも確実に表示 */
    body .main .challenge .btn-sweep__label {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* ごく稀に上位のtransform/perspectiveでセンターがズレる場合の対策 */
    body .main .challenge.challenge {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 2. マニフェストセクション（恐れるな、人生をぶち上げろ。） */
    /* 350〜1000px時と同じレイアウトを実装（responsive-manifesto-350-1000.css と同じスタイル） */

    /* マニフェストをフルブリード＋全高化（初見で次セクションを隠す） */
    .manifesto {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* コンテナを縦横センター */
    .manifesto .container {
        position: relative !important;
        z-index: 2 !important;
        height: 100% !important;
        max-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-inline: 16px !important;
        padding-top: max(20px, env(safe-area-inset-top)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* マニフェストコンテンツを中央配置 */
    .manifesto .manifesto__content {
        width: min(92vw, 680px) !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        row-gap: clamp(16px, 3vw, 24px) !important;
        text-align: center !important;
        overflow: visible !important;
        overscroll-behavior: contain;
        min-height: auto !important;
        max-height: 90vh !important;
        padding-bottom: 20px !important;
    }

    /* 左側コンテンツを左揃えに復元 */
    .manifesto .manifesto__left {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        row-gap: clamp(12px, 2.5vw, 20px) !important;
    }

    /* タイトルを左揃え（アニメーションはscroll-fade-animation.cssで制御） */
    .manifesto .manifesto__title {
        font-size: clamp(24px, 6.5vw, 36px) !important;
        line-height: 1.3 !important;
        letter-spacing: .02em !important;
        margin: 0 !important;
        text-align: left !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: clamp(6px, 1.5vw, 12px) !important;
        /* opacity と visibility は scroll-fade-animation.css で制御 */
        position: relative !important;
        z-index: 10 !important;
    }

    /* タイトル行の個別設定 */
    .manifesto .manifesto__title-line {
        display: block !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 本文テキストを中央揃え・ブラックカラー（アニメーションはscroll-fade-animation.cssで制御） */
    .manifesto .manifesto__text {
        font-size: clamp(14px, 3.8vw, 18px) !important;
        line-height: 1.8 !important;
        margin: 0 auto !important;
        max-width: 72ch !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        color: #000000 !important;
        white-space: pre-wrap !important;
        padding-inline: 2px !important;
        /* opacity と visibility は scroll-fade-animation.css で制御 */
        display: block !important;
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
    }

    /* 右側レインボーテキストを中央配置 */
    .manifesto .manifesto__right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-top: clamp(20px, 4vw, 32px) !important;
    }

    /* レインボーテキストを横読み・中央揃え・レインボーカラー（アニメーションはscroll-fade-animation.cssで制御） */
    .manifesto .manifesto__rainbow-text {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        background: linear-gradient(92deg, #ff6b6b, #ffd166, #06d6a0, #118ab2, #9b5de5) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        font-size: clamp(22px, 5.5vw, 34px) !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        text-shadow: none !important;
        /* opacity と visibility は scroll-fade-animation.css で制御 */
        position: relative !important;
        z-index: 10 !important;
    }

    /* CTAボタンを中央配置・間隔を広げる */
    .manifesto .manifesto__cta {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: clamp(24px, 5vw, 40px) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .manifesto .manifesto__cta .btn-sweep {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        min-width: 180px !important;
        padding: 16px 32px !important;
        margin: 0 auto !important;
        font-size: clamp(15px, 4.5vw, 18px) !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* ボタンラベルも確実に表示 */
    .manifesto .btn-sweep__label {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* 背景の三角形を元の大きさとアニメーションに復元 */
    .manifesto::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 400px !important;
        height: 400px !important;
        background: linear-gradient(45deg, rgba(255, 107, 107, 0.15), rgba(6, 214, 160, 0.15), rgba(255, 209, 102, 0.15), rgba(17, 138, 178, 0.15), rgba(155, 93, 229, 0.15)) !important;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
        z-index: 0 !important;
        opacity: 0.8 !important;
        animation: triangleFloat 6s ease-in-out infinite !important;
    }

    /* 三角形の浮遊アニメーション */
    @keyframes triangleFloat {

        0%,
        100% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }

        25% {
            transform: translate(-50%, -50%) rotate(2deg) scale(1.05);
        }

        50% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
        }

        75% {
            transform: translate(-50%, -50%) rotate(-2deg) scale(1.05);
        }
    }

    /* マニフェスト直下セクションの上余白をスマホ時だけゼロに */
    .manifesto+section,
    .manifesto+.service-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* IO演出はアニメーションを有効化（is-inviewクラスが付いた時にフェードイン） */
    /* アニメーション無効化の設定を削除し、scroll-fade-animation.cssの設定を尊重 */

    /* マニフェスト要素を確実に表示 */
    .manifesto .manifesto__title,
    .manifesto .manifesto__text,
    .manifesto .manifesto__rainbow-text,
    .manifesto .manifesto__cta {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* 3. 事業紹介カード（赤・青のカード群） */
    /* カードのデザインは元のまま維持するため、レイアウト（余白・配置）のみ調整 */

    .service-section {
        padding-inline: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 48px !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }

    .service-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* カードのデザイン（border-radius、overflow、画像スタイルなど）は既存CSSに任せる */
    /* .service-card, .service-card__inner, .service-card__image img のスタイルは削除 */
}