body {
    font-family: "Hachi Maru Pop", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 1vw; /* 全体のフォントサイズを設定 */
}

#new-game{
    font-size: 1vw; /* 全体のフォントサイズを設定 */
}

#reset-game{
    font-size: 1vw; /* 全体のフォントサイズを設定 */
}

#bingo-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5つの列を均等に配置 */
    gap: 2%; /* グリッド間の間隔 */
    margin-top: 3%; /* 上部のマージン */
    margin-bottom: 3%; /* 下部のマージン */
    padding: 3%; /* グリッド内のパディング */
    justify-content: center; /* 列ごとに中央寄せ */
    position: relative; /* 相対位置付け */
}

#bingo-card::before {
    content: "";
    position: absolute;
    top: 0.1%;
    left: -6.5%;
    right: -6.5%;
    bottom: -7.5%;
    background-color: rgb(206, 252, 196);
    z-index: -1;
    border-radius: 15px; /* 四隅の丸みを設定 */
    border: 4px solid rgb(52, 109, 52); /* ボーダーのサイズを調整 */
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(248, 247, 247);
    border: 3px solid rgb(53, 53, 53); /* ボーダーのサイズを調整 */
    cursor: pointer;
    width: 16vw; /* ビューポート幅の18% */
    height: 16vw; /* ビューポート幅の18% */
    max-width: 95px; /* 最大幅を指定 */
    max-height: 95px; /* 最大高さを指定 */
    font-size: 3vw; /* セル内のフォントサイズを設定 */
    overflow: hidden; /* セルの境界を超えないように設定 */
    text-overflow: ellipsis; /* 文字があふれたときに省略記号を表示 */
    white-space: nowrap; /* 文字を折り返さない */
    border-radius: 15px; /* 四隅の丸みを設定 */
}

.cell.marked {
    background-color: rgb(255, 255, 131);
}

.cell.small-font {
    font-size: 1.5vw; /* 特定のセルのフォントサイズを設定 */
}

#hostNumber {
    font-size: 5vw; /* ビューポート幅に基づいたフォントサイズ */
    margin-top: 10%;
}

#number {
    font-size: 3vw; /* ビューポート幅に基づいたフォントサイズ */
    margin-top: 10%;
}

#log-container {
    max-height: 150px;
    width: 30%; /* 固定幅を指定 */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 3vw auto; /* 自動マージンを追加して中央揃え */
}

#log {
    text-align: left;
    font-size: 2.25vw; /* ログのフォントサイズを設定 */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    position: relative;
}

.main-container {
    display: flex;
    justify-content: flex-start; /* 子要素を左側に配置 */
    width: 100%; /* コンテナ全体に幅を設定 */
    position: relative; /* 親要素内で相対配置 */
}

.me-2 {
    margin-right: 0.5rem; /* Bootstrapのクラスを使ってボタン間にスペースを追加 */
}

.host {
    text-align: center; /* 中央揃え */
}

#hostNumber {
    font-size: 5vw; /* ビューポート幅に基づいたフォントサイズ *//
}

#bingonmb {
    margin: 0 auto; /* 自動マージンで中央に配置 */
}