@charset "UTF-8";

.img-box {
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* ホバー時の挙動 */
.img-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.img-box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-bottom: none !important;
}

.img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    transition: filter 0.4s ease;
}

.img-box:hover img {
    filter: brightness(1.05);
}


@media screen and (max-width: 767px) {
    .img-box {
        max-width: 100%;
        margin: 20px 0;
    }
}