/* =====================================
   index.css
   トップページ専用
===================================== */

/* =====================================
   Features
===================================== */

.feature-section{
    background:
        linear-gradient(
            to bottom,
            #f7f7f5,
            #ffffff
        );
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.5rem;
}

.feature-card{
    text-align:center;

    padding:2.5rem;

    background:#fff;

    border-radius:20px;

    box-shadow:
        0 6px 24px rgba(0,0,0,0.06);

    transition:0.3s;
}

/* .feature-card:hover{
    transform:translateY(-8px);
} */

.feature-card i{
    font-size:3rem;
    color:var(--primary);
    margin-bottom:1rem;
}

.feature-card h3{
    margin-bottom:1rem;
    color:var(--primary-dark);
}

.feature-card p{
    line-height:1.8;
}

/* =====================================
   News
===================================== */

.news-section{
    padding:100px 0;

    background:
        linear-gradient(
            to bottom,
            #f5f7f6,
            #ffffff
        );
}

.news-list{
    display:flex;
    flex-direction:column;

    gap:1rem;

    margin-top:40px;

    max-height:450px;

    overflow-y:auto;

    padding-right:10px;
}

/* Scroll Bar */

.news-list::-webkit-scrollbar{
    width:8px;
}

.news-list::-webkit-scrollbar-track{
    background:#eeeeee;
    border-radius:999px;
}

.news-list::-webkit-scrollbar-thumb{
    background:#2e7d32;
    border-radius:999px;
}

/* Card */

.news-item{
    display:grid;

    grid-template-columns:
        180px
        1fr
        24px;

    align-items:center;

    gap:1rem;

    background:#fff;

    padding:1.2rem 1.5rem;

    border-radius:18px;

    text-decoration:none;

    color:inherit;

    border-left:4px solid transparent;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.05);

    transition:all 0.25s ease;
}

.news-item:hover{
    transform:translateY(-3px);

    border-left:
        4px solid var(--primary);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.08);
}

.news-date{
    width:180px;

    text-align:center;

    background:
        rgba(46,125,50,0.12);

    color:var(--primary);

    font-size:0.85rem;

    font-weight:600;

    padding:0.45rem 0.9rem;

    border-radius:999px;
}

.news-title{
    color:#333;

    font-weight:500;

    line-height:1.7;

    transition:color 0.25s ease;
}

.news-arrow{
    color:var(--primary);

    font-size:1rem;

    font-weight:700;

    opacity:0.7;

    transition:0.25s;
}

.news-item:hover .news-title{
    color:var(--primary);

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:4px;
}

.news-item:hover .news-arrow{
    transform:translateX(4px);
}

.news-static{
    cursor:default;
}

.news-static:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.08);
}

.news-static:hover .news-title{
    color:#333;
    text-decoration:none;
}

.news-static:hover .news-arrow{
    transform:none;
}

/* =====================================
   Video
===================================== */

.video-section{
    background:
        linear-gradient(
            to bottom,
            #f5f7f6,
            #ffffff
        );
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}

.video-card{
    background:#fff;

    border-radius:20px;

    padding:1rem;

    box-shadow:
        0 6px 24px rgba(0,0,0,0.06);
}

.video-grid iframe{
    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:16px;
}

/* =====================================
   Responsive
===================================== */

@media (max-width:900px){

    .feature-grid,
    .video-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){

    .feature-grid{
        gap:1.5rem;
    }

    .feature-card{
        padding:2rem;
    }

    .news-section{
        padding:80px 0;
    }

    .news-item{
        grid-template-columns:1fr;
        gap:0.8rem;
    }

    .news-date{
        width:fit-content;
    }

    .news-arrow{
        display:none;
    }

    .video-grid{
        gap:1.5rem;
    }
}