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

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

    /* マニフェストをフルブリード＋全高化（初見で次セクションを隠す） */
    .manifesto {
        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: 0 !important;
    }

    /* コンテナを縦横センター */
    .manifesto .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(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;
    }

    /* タイトルを左揃え・確実に表示 */
    .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: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }

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

    /* 本文テキストを中央揃え・ブラックカラー・確実に表示 */
    .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: 1 !important;
        visibility: visible !important;
        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;
    }

    /* レインボーテキストを横読み・中央揃え・レインボーカラー・確実に表示 */
    .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: 1 !important;
        visibility: visible !important;
        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: -5px;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        padding-top: 30px;
    }

    .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演出の初期非表示をSPだけ解除（確実に見えるように） */
    .manifesto [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        display: block !important;
    }

    /* マニフェスト要素を確実に表示 */
    .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;
    }
}

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

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

    /* マニフェストをフルブリード＋全高化（初見で次セクションを隠す） */
    .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;
    }

    /* タイトルを左揃え・確実に表示（300〜349pxではやや小さめに調整） */
    .manifesto .manifesto__title {
        font-size: clamp(22px, 7vw, 34px) !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: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }

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

    /* 本文テキストを中央揃え・ブラックカラー・確実に表示（300〜349pxではやや小さめに調整） */
    .manifesto .manifesto__text {
        font-size: clamp(13px, 3.5vw, 17px) !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: 1 !important;
        visibility: visible !important;
        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;
    }

    /* レインボーテキストを横読み・中央揃え・レインボーカラー・確実に表示（300〜349pxではやや小さめに調整） */
    .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, 6vw, 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;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        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(14px, 4.2vw, 17px) !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演出の初期非表示をSPだけ解除（確実に見えるように） */
    .manifesto [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        display: block !important;
    }

    /* マニフェスト要素を確実に表示 */
    .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;
    }
}