body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    font-size: 3.0em;
    text-align: center;
    color: #4a47a3; /* タイトルの色 */
}

#timeInfo {
    background-color: #d5e4f1; /* 背景色 */
    border-radius: 10px; /* 角を丸める */
    padding: 15px;
    margin-bottom: 20px;
}

.day-display {
    font-size: 1.5em;
    font-weight: bold;
    color: #2d545e; /* 文字色 */
    margin-bottom: 1px;
    text-align: center;
}

.time-display {
    font-size: 1.5em;
    font-weight: bold;
    color: #2d545e; /* 文字色 */
    margin-bottom: 10px;
    text-align: center;
}

#currentDay {
    font-size: 2.5em;
}

#currentTime {
    font-size: 4.0em;
}

#NextAlarm {
    font-size: 3.0em;
}
#timeToNextAlarm {
    font-size: 4.0em;
}

button#testAlarm {
    background-color: #ff6b6b; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
    cursor: pointer;
}

button#testAlarm:hover {
    background-color: #ff3b3b; /* ホバー時の背景色 */
}

button#stopAlarm {
    background-color: #ff6b6b; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
    cursor: pointer;
}

button#stopAlarm:hover {
    background-color: #ff3b3b; /* ホバー時の背景色 */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 2.5em;
}

thead {
    background-color: #b5ead7; /* ヘッダーの背景色 */
}

tbody tr:nth-child(odd) {
    background-color: #fff; /* 奇数行の背景色 */
}

tbody tr:nth-child(even) {
    background-color: #f0f0f0; /* 偶数行の背景色 */
}

#daySelect {
    font-size: 2.0em; /* フォントサイズを大きく */
    height: 2em; /* 高さを大きく */
    width: auto; /* 幅は自動調整（必要に応じて調整） */
    cursor: pointer; /* カーソルをポインターに */
}

/* スマートフォン用のスタイル */
@media (max-width: 1500px) {
    #currentTime {
        font-size: 10vw; /* ビューポートの幅に基づいたフォントサイズ */
    }
    #NextAlarm {
        font-size: 5vw; /* ビューポートの幅に基づいたフォントサイズ */
    }
    #timeToNextAlarm {
        font-size: 10vw; /* ビューポートの幅に基づいたフォントサイズ */
    }
}