@charset "utf-8";

/* ==================================================
   【全デバイス共通】
   読み込み後、即発動するアニメーション（メインビジュアル用など）
   もしスマホでこれも消したい場合は、下のメディアクエリの中に移動してください。
================================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUpAnime 1.0s ease-out forwards;
}

@keyframes fadeInUpAnime {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 時間調整クラス */
.duration-15 { animation-duration: 1.5s; }
.duration-20 { animation-duration: 2.0s; }



/* ==================================================
   スクロール連動アニメーション
================================================== */


    /* --- 基本のフェードアップ（準備状態） --- */
    .js-scroll-fade {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.0s ease-out, transform 1.0s ease-out;
    }

    /* --- 左からスライド（準備状態） --- */
    .js-fade-left {
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }

    /* --- 右からスライド（準備状態） --- */
    .js-fade-right {
        opacity: 0;
        transform: translateX(50px);
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }

    /* --- 画面に入って「is-active」がついた時の動き（共通） --- */
    .js-scroll-fade.is-active,
    .js-fade-left.is-active,
    .js-fade-right.is-active {
        opacity: 1;
        transform: translate(0, 0); /* 上下のズレも左右のズレも0に戻す */
    }

    /* --- 従来の遅延クラス --- */
    .delay-02 { transition-delay: 0.2s; }
    .delay-04 { transition-delay: 0.4s; }
    .delay-06 { transition-delay: 0.6s; }
    .delay-08 { transition-delay: 0.8s; }
    .delay-10 { transition-delay: 1.0s; }
    .delay-12 { transition-delay: 1.2s; }

    /* ==================================================
    PC専用の設定（769px以上）
    ================================================== */
    @media (min-width: 769px) {
        /* PCの時だけ効く遅延クラス */
        .pc-delay-00 { transition-delay: 0s !important; }
        .pc-delay-02 { transition-delay: 0.2s !important; }
        .pc-delay-04 { transition-delay: 0.4s !important; }
        .pc-delay-06 { transition-delay: 0.6s !important; }
        .pc-delay-08 { transition-delay: 0.8s !important; }
        .pc-delay-10 { transition-delay: 1.0s !important; }
    }

    /* ==================================================
    スマホ専用の設定（768px以下）
    ================================================== */
    @media (max-width: 768px) {
    
    /* 1. 全体のアニメーション時間を 1.0s → 0.7s に短縮 */
    /* さらに、ease-out から「スッと入ってピタッと止まる」高級な緩急に変更 */
    .js-scroll-fade {
        transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .js-fade-left, 
    .js-fade-right {
        transition: opacity 0.95s cubic-bezier(0.25, 1, 0.5, 1), transform 0.95s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 2. 順番に出す時の「待ち時間」も、スマホに合わせて半分に短縮！ */
    /* これをやらないと、スマホで画面が真っ白な時間が長くなってしまいます */
    .delay-02 { transition-delay: 0.15s; }
    .delay-04 { transition-delay: 0.3s; }
    .delay-06 { transition-delay: 0.45s; }
    .delay-08 { transition-delay: 0.6s; }
    .delay-10 { transition-delay: 0.75s; }
    .delay-12 { transition-delay: 0.9s; }

    /* 3. スマホの時だけ効く遅延クラス（今回追加分） */
    /* ※スマホのスクロール感に合わせて、少し早めのテンポ感（0.15s刻み）に調整しています */
    .sp-delay-00 { transition-delay: 0s !important; }
    .sp-delay-02 { transition-delay: 0.15s !important; }
    .sp-delay-04 { transition-delay: 0.3s !important; }
    .sp-delay-06 { transition-delay: 0.45s !important; }
    .sp-delay-08 { transition-delay: 0.6s !important; }
    .sp-delay-10 { transition-delay: 0.75s !important; }

}