:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Noto Sans JP",
        Meiryo,
        sans-serif;
    color: #333333;
}

/* p {
    font-family: "Times New Roman", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;
} */

main>section:nth-child(2n) {
    background-color: white;
}

main>section:nth-child(2n+3) {
    background-color: #f4f5f7;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1B365D;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
} */

/* .skip-link:focus {
    top: 0;
} */

/* input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid #FFC003;
    outline-offset: 2px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
} */

/* OSの設定で「視覚効果を減らす」を選択している場合 */
@media (prefers-reduced-motion: reduce) {

    /* スムーズスクロールを無効化 */
    html {
        scroll-behavior: auto !important;
    }

    /* fade-in や大きくスライドする要素を抑制 */
    .fade-in,
    #mobile-menu,
    .transform,
    [class*="duration-"] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* 色の変化（hover）などは残す */
    .btn,
    a {
        transition-property: color, background-color, border-color !important;
        transition-duration: 100ms !important;
    }

    /* フェードイン要素は最初から表示 */
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

.animate-custom-bounce {
    animation: customBounce 3s forwards;
    /* アニメーション全体の時間は3秒。終了後に最後の状態を維持 */
}

@keyframes customBounce {

    /* 1回目のバウンド (約0秒～1.0秒) */
    0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    10% {
        /* 0.3秒地点 */
        transform: translateY(-40%);
        /* 大きく跳ねるように値を大きく */
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    20% {
        /* 0.6秒地点 */
        transform: translateY(0);
        /* 着地 */
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    /* 2回目のバウンド (約0.6秒～1.8秒) */
    25% {
        /* 0.75秒地点 */
        transform: translateY(-25%);
        /* 少し小さく跳ねるように値を大きく */
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    40% {
        /* 1.2秒地点 */
        transform: translateY(0);
        /* 着地 */
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    /* 3回目のバウンド (約1.2秒～2.4秒) */
    45% {
        /* 1.35秒地点 */
        transform: translateY(-15%);
        /* さらに小さく跳ねるように値を大きく */
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    60% {
        /* 1.8秒地点 */
        transform: translateY(0);
        /* 着地 */
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    /* 4回目のバウンド (約1.8秒～2.7秒) - 非常に小さく、最後の着地に向けて */
    65% {
        /* 1.95秒地点 */
        transform: translateY(-8%);
        /* 非常に小さく跳ねるように値を大きく */
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    80% {
        /* 2.4秒地点 */
        transform: translateY(0);
        /* 最終的な着地 */
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    /* 最後の停止状態 */
    100% {
        /* 3.0秒地点 */
        transform: translateY(0);
        /* 完全に静止 */
    }
}