@charset "UTF-8";
/* animate.css(110KB)の代替。当サイトで実際に使うのは fadeIn / fadeInLeft / fadeInRight の3種のみ。
   wow.js が付与する .animated と組み合わせて動作する。2026-07-29 板羽
   ベンダープレフィックスは現行ブラウザで不要のため省略(元ファイルは animate.css として残置)。*/

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animated.fadeIn { animation-name: fadeIn; }

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-20%, 0, 0); }
    to   { opacity: 1; transform: none; }
}
.animated.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(20%, 0, 0); }
    to   { opacity: 1; transform: none; }
}
.animated.fadeInRight { animation-name: fadeInRight; }

/* ヒーロー画像用:JS(wow.js)を待たずに CSS だけでフェードインさせる。
   .wow は初期 visibility:hidden になり LCP を遅らせるため、主役画像には使わない */
.fade-in-css {
    animation: fadeIn 1s both;
}

/* スクロール連動の自動フェードイン(top.js が .reveal を付け、可視化時に .is-revealed を足す)。
   JS が動かない環境では .reveal 自体が付かないため、内容が隠れたままにはならない */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    will-change: opacity, transform;
}
.reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* アニメーションだけを止める。transform は解除しないこと:
       .mainvisual_text の translateX(-50%) など「配置のための transform」まで
       打ち消してしまい、中央寄せが崩れる(2026-07-29 実測で確認) */
    .animated,
    .fade-in-css {
        animation: none !important;
        opacity: 1 !important;
    }
}