@charset "UTF-8";

main {
    padding-top: 6% !important;
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: flex-start; */
    /* gap: 30px; */
    justify-content: space-around;
}

.flex_item {
    width: 30%;
    margin: 10px 0 50px 0;
}
.image_item {
    /* width: 320px; */
    overflow: hidden;     /* はみ出しを隠す */
    border-radius: 12px;  /* 任意 */
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}

.image_item img {
    width: 100%;
    /* height: 260px; */
    display: block;
    transform: scale(1);
    transition: transform .25s ease; /* なめらかに */
    width: calc(100% + 5px); /* 5pxぶん広げる */
  transform: translateX(0px); /* 左へ5px寄せる → 右端5pxが消える */

}
.image_item:hover img{
    transform: scale(1.06); /* 少しズーム */
}

.web {
    width: 90%;
    margin: 10px auto;
}
h1 {
    text-align: center;
}
.ft_bold {
    font-weight: bold;
    font-size: 1.1rem;
    padding-top: 5px;
}
.algin {
    text-align: center;
}

.algin a {
    text-decoration: none;
    color: #4d889f;
    font-weight: bold;
}
@media (max-width: 850px) {
    main {
        padding-top: 10% !important;
    }
    h1 {
        font-size: 1.4rem;
    }
    .flex_item {
        width: 100%
    }
    .flex {
        justify-content: flex-start;
        /* gap: 2.5%; */
    }
    .ft_bold {
        text-align: center;
    }
    .flex_item {
        margin: 0px 0 30px 0;
    }
}