/* ===============================
   スライドショー
=============================== */
.hero {
    padding: 20px 0 0 0;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.img-01,
.img-02,
.img-03,
.img-04 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* 中央に固定 */
    transform-origin: center center;
    /* 中心を基準にスケール */
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .slider-container {
        height: 30vh;
    }

    .img-01,
    .img-02,
    .img-03,
    .img-04 {
        /* scale を小さくして遠目に表示 */
        animation: none;
        width: 100%;
        height: 80%;
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
        background-size: cover;
        background-position: center center;
    }
}

/* デスクトップ用スライドアニメーション */
.img-01 {
    background-image: url('../../images/wagyu.webp');
    animation: slide-animation-01 32s infinite;
}

.img-02 {
    background-image: url('../../images/chiken.webp');
    animation: slide-animation-02 32s infinite;
}

.img-03 {
    background-image: url('../../images/kaki.webp');
    animation: slide-animation-03 32s infinite;
}

.img-04 {
    background-image: url('../../images/vegetables.webp');
    animation: slide-animation-04 32s infinite;
}

/* スライドアニメーション */
@keyframes slide-animation-01 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
        transform: scale(1.1);
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-animation-02 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
        transform: scale(1);
    }

    25% {
        opacity: 1;
    }

    45% {
        opacity: 1;
        transform: scale(1.1);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-animation-03 {
    0% {
        opacity: 0;
    }

    45% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: scale(1.1);
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-animation-04 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
        transform: scale(1);
    }

    75% {
        opacity: 1;
    }

    95% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
    }
}


/* ===============================
   フェードイン
=============================== */

/* 初期状態（非表示） */
.fade-in,
.fade-in-2,
.fade-in-3,
.fade-in-4 {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
}

/* 各カードの個別ディレイ */
.fade-in {
    transition-duration: 600ms;
    transition-delay: 0s;
}

.fade-in-2 {
    transition-duration: 600ms;
    transition-delay: 0.2s;
}

.fade-in-3 {
    transition-duration: 600ms;
    transition-delay: 0.4s;
}

.fade-in-4 {
    transition-duration: 600ms;
    transition-delay: 0.6s;
}

/* スクロールイン時の最終状態 */
.scroll-in {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    transform: translate(0, 50px);
}

.fade-in-down {
    transform: translate(0, -50px);
}

.fade-in-left {
    transform: translate(-50px, 0);
}

.fade-in-right {
    transform: translate(50px, 0);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

/* ===============================
   コンテンツ
=============================== */
.content {
    margin-top: 40px;
}


/* ===============================
   レスポンシブ対応
=============================== */
/* ===== タブレット以上で横並び ===== */
@media (min-width: 768px) {
    .site-header .container {
        flex-direction: row;
        align-items: center;
    }

    .site-nav {
        margin-top: 0;
    }

    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site-nav ul {
        margin: 0;
    }

    .hero-text {
        font-size: 1.25rem;
        padding: 25px 40px;
    }

    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 1024px) {
    .hero-text {
        font-size: 1.5rem;
        padding: 30px 50px;
    }

    .content {
        font-size: 1.1rem;
    }
}