/* ===============================
   スライドショー
=============================== */
.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 {
        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/hero01.webp');
    background-color: #1b5e20;
    animation: slide-animation-01 32s infinite;
}

.img-02 {
    background-image: url('../../images/hero02.webp');
    background-color: #2e7d32;
    animation: slide-animation-02 32s infinite;
}

.img-03 {
    background-image: url('../../images/hero03.webp');
    background-color: #388e3c;
    animation: slide-animation-03 32s infinite;
}

.img-04 {
    background-image: url('../../images/hero04.webp');
    background-color: #43a047;
    animation: slide-animation-04 32s infinite;
}

/* 画像が無い場合のグラデーション表示 */
.img-01:not([style*="background-image"]) { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.img-02:not([style*="background-image"]) { background: linear-gradient(135deg, #2e7d32, #388e3c); }
.img-03:not([style*="background-image"]) { background: linear-gradient(135deg, #388e3c, #43a047); }
.img-04:not([style*="background-image"]) { background: linear-gradient(135deg, #43a047, #66bb6a); }

/* アニメーション */
@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: translate(0, 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); }

/* ===============================
   レスポンシブ
=============================== */
@media (min-width: 768px) {
    .card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (min-width: 1024px) {
    .card-container {
        grid-template-columns: repeat(4, 1fr);
    }
}