body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* スマホ時は上下左右20px */
    margin: 0;
}

/* 上部固定メニュー */
.menu-bar {
    position: sticky;
    top: 20px; /* スマホ時は上から20pxの位置で固定 */
    background-color: #ffffff;
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    margin-bottom: 20px;
    box-sizing: border-box;
    z-index: 100;
    transition: max-width 0.2s, top 0.2s;
}

.menu-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-btn:hover {
    background-color: #357abd;
}

h1 {
    color: #333;
    font-size: 1.4rem;
    margin: 0;
}

/* カレンダー全体 */
.calendar-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
}

.month-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.month-title {
    background-color: #4a90e2;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    font-size: 1.2rem;
}

th, td {
    text-align: center;
    padding: 10px;
    width: 14.28%;
    box-sizing: border-box;
}

th {
    background-color: #f0f0f0;
    color: #666;
    font-size: 0.9rem;
}

/* 色分け設定 */
.sun, .holiday { color: #d9534f; font-weight: bold; }
.sat { color: #0275d8; font-weight: bold; }
.empty { background-color: #fafafa; }

/* 今日の日付を丸で囲むスタイル */
.today {
    position: relative;
    z-index: 1;
}

.today::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 2px solid #4a90e2;
    border-radius: 50%;
    z-index: -1;
    box-sizing: border-box;
}

/* ==========================================================================
   レスポンシブ対応：画面横幅が720px以上のPCサイズ
   ========================================================================== */
@media (min-width: 720px) {
    body {
        padding-top: 40px; /* PC時は画面最上部から40pxの余白を空ける */
    }

    /* メニューバーを上から40pxの位置で固定し、最大幅を720pxに拡大 */
    .menu-bar {
        top: 40px; 
        max-width: 720px;
    }

    .calendar-container {
        max-width: 720px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* 各月のテーブル幅（隙間20pxを考慮） */
    .month-table {
        width: calc(50% - 10px);
    }
}