@charset "UTF-8";

/* ============================================================
   定休日カレンダー（calendar.js から自動生成される DOM 用）
   ============================================================ */

/* 管理画面「カスタマイズ＞定休日カレンダー」の入力ブロックを非表示 */
#md48n4l4hofensl3x0q3 {
    display: none;
}

/* 親コンテナを幅いっぱい＆中央寄せ */
.calendar_input_scroll {
    width: 100%;
    max-width: none;
    overflow: visible;
}

.calendar-wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 150px;
    font-family: 'MS UI Gothic', sans-serif;
    color: #333;
    margin: 20px auto;
    width: 100%;
    box-sizing: border-box;
}

.calendar-wrap .cal-month {
    width: 280px;
    flex: 0 0 280px;
    box-sizing: border-box;
}

.calendar-wrap .cal-header {
    background: var(--loading_color_bar1);
    text-align: center;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    border: 1px solid #ccc;       /* ヘッダーの枠 */
    border-bottom: none;
    margin-bottom: 10px;
}

.calendar-wrap .cal-table {
    border-collapse: collapse;    /* セル境界を1本線に */
    width: 100%;
    table-layout: fixed;
}

.calendar-wrap .cal-table th,
.calendar-wrap .cal-table td {
    width: 14.28%;
    height: 36px;
    text-align: center;
    font-size: 13px;
    color: #333;
    background: #fff;
    vertical-align: middle;
    border: 1px solid #ccc;       /* セルのグリッド線 */
}

.calendar-wrap .cal-table th {
    font-weight: bold;
    background: #fff;
}

.calendar-wrap .day-sun  { color: #FF3366 !important; }

.calendar-wrap .bg-holiday {
    background: #FF3366 !important;
    color: #FF3366 ;
}

.calendar-wrap .bg-today {
    background: #00CCFF !important;
    color: #00CCFF !important;
}

.calendar-wrap .legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    font-size: 13px;
}

.calendar-wrap .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-wrap .legend-box {
    width: 28px;
    height: 16px;
    display: inline-block;
}

.calendar-wrap .legend-today   .legend-box { background: #00CCFF; }
.calendar-wrap .legend-holiday .legend-box { background: #FF3366; }

/* スマホ表示（html.sp の場合）：縦並びに */
html.sp .calendar-wrap {
    flex-wrap: wrap;
    gap: 20px;
}
html.sp .calendar-wrap .cal-month {
    width: 100%;
    flex: 0 0 100%;
    max-width: 320px;
}