/* スマホ・タブレット版（350px〜1000px）専用CSS - SP/Tablet専用・強制適用 */
@media (min-width:350px) and (max-width:1310px) {

    /* 横スクロール予防（100vw系の副作用対策） */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* 画面高いっぱい＋フルブリード（親の左右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, 15px) !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演出の初期非表示をSPだけ解除（確実に見えるように） */
    body .main .challenge [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        display: block !important;
        padding-top: 20px;
    }

    /* メッセージボタンを確実に表示 */
    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;
    }

    /* メッセージボタンを確実に表示 */
    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;
    }
}

@media (min-width:350px) and (max-width:1310px) {}

/* スマホ版（300px〜349px）専用CSS - 350〜1000pxと同じレイアウトを維持 */
@media screen and (min-width: 300px) and (max-width: 349px) {

    /* 横スクロール予防（100vw系の副作用対策） */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* 画面高いっぱい＋フルブリード（親の左右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;
        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-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: 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(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;
    }

    /* タイポ最適化（行長・折返し・はみ出し防止、300〜349pxではやや小さめに調整） */
    body .main .challenge .challenge__title-vertical {
        font-size: clamp(20px, 6.5vw, 30px) !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(11px, 3.5vw, 15px) !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(12px, 3.5vw, 15px) !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(14px, 4.2vw, 17px) !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* IO演出の初期非表示をSPだけ解除（確実に見えるように） */
    body .main .challenge [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        display: block !important;
        padding-top: 20px;
    }

    /* メッセージボタンを確実に表示 */
    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;
    }
}