.fadeIn {
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
    will-change: transform, opacity;
}

.fadeIn.animated {
    opacity: 1;
}

.fadeInUp {
    transform: translate3d(0, 50px, 0);
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
}

.fadeInUp.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* 例外 */

/* bg-dot と fadeInUp が同じ要素に当たると transform/opacity が新しいスタッキングコンテキストを作り
   ::after の mix-blend-mode が崩れるため、アニメーションを内側の子要素に移す */
.bg-dot.fadeInUp {
    transform: none;
    opacity: 1;
    transition: none;
}

.bg-dot.fadeInUp>* {
    transform: translate3d(0, 50px, 0);
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
}

.bg-dot.fadeInUp.animated>* {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* ==============================
   イラスト アニメーション

   使い方：
   ① セクション要素に下記クラスを組み合わせて付与する
   ② イラストの ::before / ::after を持つ子要素に js-illust-inner を付与する

   【セクション要素に付与するクラス】
   js-illust                   … IntersectionObserverの監視対象（--showを付与）
   illust-char--before         … ::before がキャラ系（popIn→ゆらゆら）
   illust-char--after          … ::after  がキャラ系（popIn→ゆらゆら）
   illust-deco--before         … ::before が葉・花系（opacityフェード）
   illust-deco--after          … ::after  が葉・花系（opacityフェード）

   【子要素に付与するクラス】
   js-illust-inner             … アニメーション対象の ::before / ::after を持つ要素
                                  （section_space 以外の要素にイラストがある場合もここを変えるだけで対応可）

   例：<section class="section_content--news js-illust illust-deco--before illust-char--after">
          <div class="section_space js-illust-inner">
============================== */

/* キーフレーム */

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ゆらゆら：左はじまり */
@keyframes anim0 {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1) rotate(-4deg);
    }

    75% {
        transform: scale(1) rotate(4deg);
    }
}

/* ゆらゆら：右はじまり */
@keyframes anim1 {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1) rotate(4deg);
    }

    75% {
        transform: scale(1) rotate(-4deg);
    }
}

/* ---------- 初期状態 ---------- */

.illust-char--before .js-illust-inner::before {
    opacity: 0;
    transform: scale(0);
}

.illust-char--after .js-illust-inner::after {
    opacity: 0;
    transform: scale(0);
}

/* 葉・花系は mix-blend-mode との干渉を避けるため opacity のみ */
.illust-deco--before .js-illust-inner::before {
    opacity: 0;
    transition: opacity 1s ease;
}

.illust-deco--after .js-illust-inner::after {
    opacity: 0;
    transition: opacity 1s ease;
}

/* ---------- --show 付与で表示 ---------- */

.illust-char--before.--show .js-illust-inner::before {
    animation: popIn 0.6s cubic-bezier(.38, .01, .26, 1.42) both,
        anim0 4s ease-in-out 0.6s infinite;
}

.illust-char--after.--show .js-illust-inner::after {
    animation: popIn 0.6s cubic-bezier(.38, .01, .26, 1.42) both,
        anim1 4s ease-in-out 0.6s infinite;
}

.illust-deco--before.--show .js-illust-inner::before {
    opacity: 1;
}

.illust-deco--after.--show .js-illust-inner::after {
    opacity: 1;
}

/* ---------- 例外：features_item--deco（SP実要素） ---------- */
/* 擬似要素ではなく <img> を持つ実要素のため個別指定 / PCは display:none のため SP のみ対象 */

.features_item--deco {
    opacity: 0;
    transform: scale(0);
}

.section_content--features.--show .features_item--deco {
    animation: popIn 0.6s cubic-bezier(.38, .01, .26, 1.42) both,
        anim0 4s ease-in-out 0.6s infinite;
}