.modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s;
}

.modal img {
    max-width: 90%;  /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
    max-height: 90%;  /* 画像の最大高さを親要素(modal)の90%に制限し、画面内に収まるようにする  */
    object-fit: contain;  /* 画像の比率を保持しつつ、指定された高さと幅に収める */
}

.clickable-image:hover {
    cursor: zoom-in;  /* ホバー時にカーソルをズームインのアイコンに変更 */
}

.modal img:hover {
    cursor: zoom-out;  /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}