@charset "utf-8";

/* モーダルを開くテキストリンク */
.modal-open {
cursor: pointer;
color: blue;
text-decoration: none;
}

/* モーダル全体のスタイル */
.modal-window {
z-index: 700;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex; /* 最初からレイアウトを確保 */
justify-content: center;
align-items: center;
opacity: 0; /* 初期状態は透明 */
visibility: hidden; /* 非表示状態 */
transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* フェードインアニメーション */
}

/* モーダルコンテンツ */
.modal-content {
max-width: 90%;
max-height: 80%;
background: #fff;
padding: 2.5rem 1rem 1rem 1rem;
border-radius: 5px;
text-align: center;
position: relative;
}

/* モーダル内の画像 */
.modal-content img {
max-height:70dvh;
width:auto;
}

/* 閉じるボタン */
.modal-close {
position: absolute;
top: 0.3rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
color: #333;
text-decoration: none;
}

/* 背景部分をクリックすると閉じる */
.modal-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/* :targetを使ってモーダルを表示（フェードイン効果が正しく機能） */
.modal-window:target {
opacity: 1; /* 透明から表示 */
visibility: visible; /* 表示 */
}

/* ページの先頭に戻るのを防ぐ */
.modal-close:focus, .modal-close:active {
outline: none;
}

@media screen and (max-width: 600px) {
/* 閉じるボタン */
.modal-close {top: -0.3rem;}
}