.anshin_btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* アイテムを水平方向に中央寄せにする */

}

.initialHide{
    display: none;
}

.centered {
    text-align: center;
}

.button {
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    display: inline-block;
    padding-right: 0px; /* 右側にパディングを追加 */
}

.button:after {
    display: block;
    content: "";
    width: 1.5vw; /* ビューポートの幅に対するパーセンテージに設定 */
    height: 1.5vw; /* ビューポートの幅に対するパーセンテージに設定 */
    min-width: 15px;
    min-height: 15px;
    background-image: url('/images/other/arrow_down.png');
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 100;
    transform: translateY(-50%);
    transition: transform 0.3s ease-in-out;
}

.button:hover:after {
    transform: translateY(-50%) rotate(360deg); /* ホバー時に360度回転 */
}

p img {
    transition: transform 0.3s ease-in-out; /* 拡大のアニメーションを追加 */
}

p:hover img {
    transform: scale(1.03); /* ホバー時に1.1倍に拡大 */
}


.hako {
    flex: 0 0 18%; /* flex-growを0に設定して、アイテムが空間を埋めるのを防ぐ */
    margin: 1%;
    box-sizing: border-box;
}

.hako img {
    width: auto;
    height: auto;
    width: 200px;
    height: auto;
    object-fit:contain
}

.hover_effect_hard {
    transition: transform 0.3s ease-in-out;
    transform-origin: center; /* 変形の基点を中心に設定 */
}

.hover_effect_hard:hover {
    transform: scale(1.1);
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .hako {
        flex: 0 0 auto; /* flex-basisをautoに設定して、元の幅を保持する */
        max-width: 100%; /* ただし、親要素の幅を超えないようにする */
        margin: 2em; /* 余白を追加 */
    }
}