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

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
}

.hero-section {
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.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,
button:focus,
a:focus {
    outline: 2px solid #FFC003;
    outline-offset: 2px;
}

.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);
        /* 完全に静止 */
    }
}