body {
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: sans-serif;
    overflow: hidden; /* スクロールバーが出ないように */
    padding: 10px; /* 画面端に近すぎないように少しパディング */
    box-sizing: border-box; /* パディングを幅に含める */
}

/* 時計全体を囲むコンテナ */
#clock-container {
    display: flex;
    flex-direction: column; /* 縦方向に要素を並べる */
    align-items: center; /* 水平方向の中央揃え */
    justify-content: center; /* 垂直方向の中央揃え (flex-direction: column の場合) */
    width: 100%; /* 親要素の幅に合わせる */
    max-width: 90vw; /* 画面幅の90%を超えないように（はみ出し防止） */
    text-align: center;
}

#realtime {
    /* 画面の幅と高さの小さい方に合わせてフォントサイズを調整し、はみ出しを防ぐ */
    font-size: min(40vh, 20vw);
    color: #333;
    font-weight: bold;
    user-select: none;
    line-height: 1;
    padding: 0;
    margin: 0;
    white-space: nowrap; /* 数字が改行されないように */
}

/* 日付と午前/午後を格納するコンテナ */
#info-bottom {
    display: flex;
    justify-content: space-between; /* 左右に要素を広げる */
    align-items: flex-end; /* 下揃え */
    width: 100%; /* 時計の幅に合わせる */
    margin-top: 1vh; /* 時計の数字との間に少し余白 */
    padding: 0 2vw; /* 左右に少しパディングを入れて端に寄りすぎないように */
    box-sizing: border-box;
}

#date-display,
#ampm-display {
    /* フォントサイズを画面の幅と高さの小さい方に合わせて調整 */
    font-size: min(6vh, 3vw);
    color: #666;
    white-space: nowrap; /* テキストが改行されないように */
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* スマートフォンでの調整 */
@media (max-width: 768px) {
    #realtime {
        font-size: min(25vh, 40vw); /* スマホ縦画面でさらに小さく */
    }
    #info-bottom {
        flex-direction: row; /* 横並びを維持 */
        margin-top: 0.5vh;
        padding: 0 1vw;
    }
    #date-display,
    #ampm-display {
        font-size: min(4vh, 6vw); /* スマホでさらに小さく */
    }
}