/* スマホ・タブレット版（350px〜1000px）専用CSS - ヒーローを全画面化 */
@media (min-width:350px) and (max-width:1200px) {

    /* 横スクロール予防（100vwやフルブリード時の安全策） */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* ヒーローをフルブリード＋全高化（初見で次セクションを隠す） */
    .hero {
        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: 100vh !important;
        min-height: -webkit-fill-available !important;
        /* 新Safari/Chromeでアドレスバー考慮 */
        min-height: 100dvh !important;
        min-height: 100svh !important;
        /* 旧iOS対策のフォールバック兼用 */
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* 背景レイヤーをセクション全体にフィットさせる */
    .hero__bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }

    .bg-grad,
    .bg-rings,
    #kvDots.hero__dots,
    canvas#kvDots {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        /* ここでの100%は100vw */
        height: 100% !important;
        /* ここでの100%は100lvh/100dvh/100svh */
        display: block !important;
        object-fit: cover !important;
    }

    /* テキストを縦横ど真ん中。IOの初期非表示をスマホのみ解除 */
    .hero__content {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* より強力なセレクタで元のCSSを完全に上書き */
    .hero .scroll-indicator,
    .hero__content .scroll-indicator,
    .main .hero .scroll-indicator,
    .main .hero .hero__content .scroll-indicator,
    body .main .hero .scroll-indicator,
    body .main .hero .hero__content .scroll-indicator,
    html body .main .hero .scroll-indicator,
    html body .main .hero .hero__content .scroll-indicator {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: unset !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        max-width: 90vw !important;
    }

    .scroll-indicator [data-ani] {
        /* 交差時演出の初期opacity/transformを解除 */
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ラベル要素も強力なセレクタで上書き */
    .hero .scroll-indicator .label-en,
    .hero__content .scroll-indicator .label-en,
    .main .hero .scroll-indicator .label-en,
    .main .hero .hero__content .scroll-indicator .label-en,
    body .main .hero .scroll-indicator .label-en,
    body .main .hero .hero__content .scroll-indicator .label-en,
    html body .main .hero .scroll-indicator .label-en,
    html body .main .hero .hero__content .scroll-indicator .label-en {
        font-size: clamp(22px, 6vw, 34px) !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin: 0 auto !important;
        color: #000000 !important;
        font-family: "Poppins", system-ui, sans-serif !important;
        letter-spacing: 0.04em !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        inset: unset !important;
    }

    .hero .scroll-indicator .label-jp,
    .hero__content .scroll-indicator .label-jp,
    .main .hero .scroll-indicator .label-jp,
    .main .hero .hero__content .scroll-indicator .label-jp,
    body .main .hero .scroll-indicator .label-jp,
    body .main .hero .hero__content .scroll-indicator .label-jp,
    html body .main .hero .scroll-indicator .label-jp,
    html body .main .hero .hero__content .scroll-indicator .label-jp {
        font-size: clamp(12px, 3.8vw, 16px) !important;
        line-height: 1.6 !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin: 0 auto !important;
        color: rgba(0, 0, 0, .92) !important;
        font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
        letter-spacing: 0.08em !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        inset: unset !important;
    }

    /* 浮遊カードは背景の上・テキストの下（重なり固定） */
    .hero__cards {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        transform: scale(.85);
        transform-origin: center;
        pointer-events: none;
    }

    /* ヒーロー直下セクションの上余白をスマホ時だけゼロに */
    .hero+section,
    .hero+.challenge {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ヘッダーが固定表示でヒーロー上に被さる場合の対策 */
    .hero__content {
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }

    /* ハンバーガー関連のCSSは header.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(20px, 5vw, 32px) !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;
    }
}

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

    /* 横スクロール予防（100vwやフルブリード時の安全策） */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* ヒーローをフルブリード＋全高化（初見で次セクションを隠す） */
    .hero {
        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;
        min-height: 100dvh !important;
        min-height: 100svh !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* 背景レイヤーをセクション全体にフィットさせる */
    .hero__bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }

    .bg-grad,
    .bg-rings,
    #kvDots.hero__dots,
    canvas#kvDots {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* テキストを縦横ど真ん中。IOの初期非表示をスマホのみ解除 */
    .hero__content {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* より強力なセレクタで元のCSSを完全に上書き */
    .hero .scroll-indicator,
    .hero__content .scroll-indicator,
    .main .hero .scroll-indicator,
    .main .hero .hero__content .scroll-indicator,
    body .main .hero .scroll-indicator,
    body .main .hero .hero__content .scroll-indicator,
    html body .main .hero .scroll-indicator,
    html body .main .hero .hero__content .scroll-indicator {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: unset !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        max-width: 90vw !important;
    }

    .scroll-indicator [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ラベル要素も強力なセレクタで上書き（300〜349pxではやや小さめに調整） */
    .hero .scroll-indicator .label-en,
    .hero__content .scroll-indicator .label-en,
    .main .hero .scroll-indicator .label-en,
    .main .hero .hero__content .scroll-indicator .label-en,
    body .main .hero .scroll-indicator .label-en,
    body .main .hero .hero__content .scroll-indicator .label-en,
    html body .main .hero .scroll-indicator .label-en,
    html body .main .hero .hero__content .scroll-indicator .label-en {
        font-size: clamp(20px, 6vw, 32px) !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin: 0 auto !important;
        color: #000000 !important;
        font-family: "Poppins", system-ui, sans-serif !important;
        letter-spacing: 0.04em !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        inset: unset !important;
    }

    .hero .scroll-indicator .label-jp,
    .hero__content .scroll-indicator .label-jp,
    .main .hero .scroll-indicator .label-jp,
    .main .hero .hero__content .scroll-indicator .label-jp,
    body .main .hero .scroll-indicator .label-jp,
    body .main .hero .hero__content .scroll-indicator .label-jp,
    html body .main .hero .scroll-indicator .label-jp,
    html body .main .hero .hero__content .scroll-indicator .label-jp {
        font-size: clamp(11px, 3.5vw, 15px) !important;
        line-height: 1.6 !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin: 0 auto !important;
        color: rgba(0, 0, 0, .92) !important;
        font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
        letter-spacing: 0.08em !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        inset: unset !important;
    }

    /* 浮遊カードは背景の上・テキストの下（重なり固定、300〜349pxではやや小さめに） */
    .hero__cards {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        transform: scale(.8) !important;
        transform-origin: center !important;
        pointer-events: none !important;
    }

    /* ヒーロー直下セクションの上余白をスマホ時だけゼロに */
    .hero+section,
    .hero+.challenge {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ヘッダーが固定表示でヒーロー上に被さる場合の対策 */
    .hero__content {
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }

    /* ハンバーガー関連のCSSは header.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(18px, 5vw, 30px) !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;
    }
}