/* モーダルウィンドウ全体のスタイリング */
.modal {
    display: none; /* 初期状態では非表示 */
    position: fixed; /* 画面に固定 */
    z-index: 1000; /* 他の要素より前面に */
    left: 0;
    top: 0;
    width: 100%; /* 全幅 */
    height: 100%; /* 全高 */
    background-color: rgba(255, 255, 255, 0.3); /* 背景色 */
    display: flex;
    align-items: center; /* 縦方向中央揃え */
    justify-content: center; /* 横方向中央揃え */
}

/* モーダルコンテンツのスタイリング */
.modal-content {
    background-color: #fefefe; /* 背景色 */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* PCの横幅をウィンドウの50%に設定 */
    max-width: 500px; /* 最大幅を設定 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 影を追加 */
    text-align: center;
    position: absolute; /* 相対位置設定 */
    top: 50%; /* トップから50%の位置 */
    left: 50%; /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* X軸とY軸で中心に移動 */
}

/* スマートフォン向けのスタイル調整 */
@media (max-width: 768px) {
    .modal-content {
        width: 80%; /* スマホの横幅をウィンドウの80%に設定 */
    }
}

/* モーダルのテキストエリアのスタイリング */
.modal-text {
    margin-bottom: 20px; /* テキストブロック間のマージン */
}

.warning-text {
    color: orange; /* 文字色をオレンジに */
    font-weight: bold; /* 文字を太字に */
}

/* モーダルのボタンエリアのスタイリング */
.modal-buttons {
    display: flex;
    justify-content: space-around; /* ボタンを均等に配置 */
}

/* 個々のボタンのスタイリング */
.modal-button {
    padding: 10px 20px; /* パディング */
    text-decoration: none; /* テキストデコレーションを無効 */
    color: white; /* テキスト色 */
    background-color: #007BFF; /* 背景色 */
    border-radius: 5px; /* 境界線の角を丸く */
}

.modal-button:hover {
    background-color: #0056b3; /* ホバー時の背景色変更 */
}