/* PC版（1501px〜1800px）専用CSS - 1500pxレイアウト固定 */
/* 
 * 目的：1501px〜1800pxの画面幅において、常に「1500px表示時と全く同じレイアウト」になるように固定する
 * 注意：1500pxちょうどのときは、このCSSは一切適用されない（既存レイアウトを維持）
 */

@media screen and (min-width: 1501px) {

    /* ========================================
       ページ全体のコンテナ幅を1500pxに固定し中央寄せ
       ======================================== */

    /* ヒーローセクションのコンテンツ部分 */
    .hero__content {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* コンテナ要素（challenge, manifesto, service-section等で使用） */
    .container {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
        box-sizing: border-box !important;
    }

    /* チャレンジセクションのコンテンツ */
    .challenge .container,
    .challenge .challenge__content {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    /* マニフェストセクションのコンテンツ */
    .manifesto .container,
    .manifesto .manifesto__content {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    /* サービスセクション */
    .service-section .container {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    .service-section .service-grid {
        width: 100% !important;
        max-width: 100% !important;
        /* グリッドのカラム幅は1500px基準で維持（既存の%指定をそのまま使用） */
    }

    /* ハイライトセクション */
    .highlight .container {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    /* 実績セクション */
    .works .container {
        width: 1500px !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    /* ========================================
       背景用のフル幅要素は100%幅のままに保つ
       ======================================== */

    /* ヒーローの背景は画面全体を覆う */
    .hero__bg {
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
    }

    /* ヒーローセクション自体も画面幅100%を維持（背景用） */
    .hero {
        width: 100vw !important;
        left: 50% !important;
        margin-left: -50vw !important;
    }

    /* チャレンジセクションの背景動画 */
    .challenge__background {
        width: 100% !important;
    }

    /* サービスセクションの背景 */
    .service-section__bg {
        width: 100% !important;
    }

    /* ハイライトセクションの背景 */
    .highlight__bg {
        width: 100% !important;
    }

    /* 実績セクションの背景 */
    .works__bg {
        width: 100% !important;
    }

    /* ========================================
       グリッドやフレックスのカラム幅を1500px基準で維持
       ======================================== */

    /* マニフェストセクションの左右カラム */
    .manifesto__content {
        /* 既存のgrid-template-columnsやflex-basisを維持 */
        /* 1500px幅を前提に設計されているため、そのまま使用 */
    }

    /* サービスグリッドの3カラム */
    .service-grid {
        /* 既存のgrid-template-columnsを維持 */
        /* 1500px幅を前提に設計されているため、そのまま使用 */
    }

    /* ========================================
       文字サイズ・line-height・余白は変更しない
       ======================================== */
    /* 
     * フォントサイズ、line-height、padding、marginなどは
     * 既存の1500px時の値がそのまま適用されるため、
     * ここでは変更しない
     */

    /* ========================================
       動作確認用コメント
       ======================================== */
    /* 
     * 実装後の確認手順：
     * 
     * 1. ブラウザの横幅をそれぞれ変更して確認：
     *    - 1000px：スマホ〜タブレット用CSSが効いていること（今回の変更の影響を受けていないこと）
     *    - 1200px：横スクロールが発生してもよいが、コンテンツの中身の並び・余白が1500px時と同じ構造になっていること
     *    - 1500px：今回の新規CSSが一切効いておらず、改修前と完全に同じ見た目であること
     *    - 1600px / 1800px：コンテンツ部分の幅は1500pxで固定されており、1500pxのときと全く同じ位置関係・余白・フォントサイズで表示されていること
     * 
     * 2. 特に以下の要素が1500px時とズレていないかを確認：
     *    - .hero のカード群 (.hero__cards .card)
     *    - .scroll-indicator
     *    - .manifesto の左右カラム
     *    - .service-card の3カラム
     * 
     * 3. 背景要素が画面全体を覆っていることを確認：
     *    - .hero__bg
     *    - .challenge__background
     *    - .service-section__bg
     */
}

/* ========================================
   FIX: 1501〜2000px でのセクション高さとレイアウト固定
   - 1500px時と同じレイアウトを中央に固定
   - 各主要セクションを画面いっぱいの高さに近づける
   ======================================== */

:root {
    /* 実際のヘッダー高さに合わせて調整（現在のPCヘッダー想定値） */
    --header-h: 80px;
}

@media screen and (min-width: 1501px) {

    /* A. 主要インナーコンテナを1500px幅で中央固定 */
    .hero__inner,
    .manifesto__content,
    .recruitHero__inner,
    .highlight__content {
        max-width: 1500px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* B. 英語コピー（manifesto__rainbow-text）は1500px時と同じ縦書きデザインを完全再現 */
    .manifesto .manifesto__rainbow-text {
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        font-family: var(--font-en) !important;
        font-size: clamp(40px, 10vw, 75px) !important;
        font-weight: 900 !important;
        line-height: 0.9 !important;
        background: var(--rainbow-gradient) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        color: transparent !important;
        opacity: 0 !important;
        transform: translateX(30px) !important;
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        /* レスポンシブCSSやJSインラインスタイルの影響を無効化 */
        display: block !important;
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
        width: auto !important;
        max-width: none !important;
        text-align: unset !important;
        /* 右端から少しだけ内側に寄せる（1500px時と同じバランスの左寄せ） */
        margin: 0 clamp(16px, 2vw, 32px) 0 0 !important;
        padding: 0 !important;
        rotate: 0deg;
    }

    .manifesto .manifesto__rainbow-text.is-visible {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* C. 各主要セクションを画面いっぱいの高さにする */
    .hero,
    .highlight,
    .challenge,
    .manifesto,
    .service-section,
    .works,
    .recruitHero {
        min-height: calc(100vh - var(--header-h));
        box-sizing: border-box;
    }

    /* recruitHero セクション内で .recruitHero__inner を上下中央に配置（テキストの相対位置はそのまま） */
    .recruitHero {
        display: flex;
        align-items: center;
    }

    /* challenge セクション高さ：style.css の固定 height を上書きして 1501px以上では画面いっぱいに */
    section.challenge {
        height: auto !important;
        min-height: calc(100vh - var(--header-h)) !important;
    }
}