/* 共通のスタイル */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 垂直方向のスタックに変更 */
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #ffffff;
}

/* 1枚目のスタイル */
.cover-page img:hover {
    filter: grayscale(100%);
}

/* 2枚目のスタイル */
.next-page {
    display: flex; /* Flexコンテナ */
    /* justify-content: space-around; アイテム間のスペースを均等に分配 */
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%; /* コンテナの横幅・必要に応じて幅を調整 */
    /* 以下を追加　*/
    justify-content: space-evenly; /* アイテム間とコンテナの端の間に均等なスペースを確保 */
    max-width: 680px; /* ボックスが中央に来るように最大幅を設定 */
    margin: auto; /* 左右のマージンを自動で調整して中央寄せ */

}

.rounded-square {
    width: calc(33.333% - 20px); /* コンテナの幅の1/3からマージンを引いた値 */
    height: 0; /* 高さを0に設定してから */
    padding-top: calc(33.333% - 20px); /* widthと同じ値を上のパディングで与える */
    color: white;
    text-align: center;
    font-family: "Arial", sans-serif;
    font-size: 24px; /* フォントサイズは固定値またはビューポート単位で調整 */
    margin: 10px;
    text-decoration: none;
    transition: background-color 0.3s;
    border-radius: 25px;
    box-sizing: border-box;
    position: relative; /* テキストを中心に配置するための基準点として使用 */
}

.bg-color1 { background-color: #555; }
.bg-color2 { background-color: #222; }
.bg-color3 { background-color: #888; }

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

/* メディアクエリを使用して、画面が小さい場合のスタイルを調整する */
@media (max-width: 600px) {
    .rounded-square {
        width: calc(100px); /* 小さい画面では2列になるように幅を調整 */
        padding-top: calc(100px); /* 高さも同様に */
        font-size: 18px; /* フォントサイズを小さくする */
    border-radius: 50%; /* 円にする */　
    }
}

.rounded-square:hover {
     background-color: gray;
}


.rounded-square:link,
.rounded-square:visited {
    color: white;
}

.rounded-square:hover,
.rounded-square:active {
    background-color: #aaa;
}