@charset "UTF-8";

.contents {
    position: relative;
    height: 100vh;
    width: 100%;
}
.contents a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.popup {
    display: none; /* 初期状態で非表示 */
    position: fixed; /* 固定位置 */
    top: 50%; /* 画面の縦中央 */
    left: 50%; /* 画面の横中央 */
    transform: translate(-50%, -50%); /* 中央に寄せるための変形 */
    background-color: #fff; /* 背景色 */
    padding: 20px; /* 内側の余白 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を付ける */
    z-index: 1000; /* 他の要素より前面に表示 */
    border-radius: 10px; /* 角丸にする */
}
.popup ul {
    list-style-type: none; /* リストのマーカーを消す */
    padding: 0; /* 内側の余白を消す */
    display: flex; /* 横並びにする */
    justify-content: space-around; /* 均等に並べる */
}
.popup ul li {
    margin: 0 5px; /* リストアイテム間の余白 */
}
.popup ul li button {
    padding: 10px 20px; /* ボタンの内側の余白 */
    border: none; /* ボーダーを消す */
    background-color: #0073aa; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
    cursor: pointer; /* カーソルをポインターに */
    border-radius: 5px; /* 角丸にする */
}
.popup ul li button:hover {
    background-color: #005f8a; /* ホバー時の背景色 */
}