@charset "utf-8";
/**
 * カレンダー共通スタイル
 * 
 * 表示用（index.html等）と管理画面の両方で使用する共通スタイル定義
 * 管理画面固有のスタイルは admin/css/admin.css に記述
 */

/* ============================================
 * カレンダー カラー設定
 * ここの変数を変更するだけでカレンダー全体の色を変更できます
 * ============================================ */
:root {
    /* ── カレンダータイトル ── */
    --cal-title-bg:            #1DB283;  /* タイトル背景色 */
    --cal-title-text:          #ffffff;  /* タイトル文字色 */

    /* ── ヘッダー（曜日行）背景色 ── */
    --cal-header-bg:            #f5f5f5;  /* 平日（月〜金） */
    --cal-header-text:          #454647;  /* ヘッダー文字色 */
    --cal-header-bg-sun:        #f5f5f5;  /* 日曜列 */
    --cal-header-text-sun:      #e83e3e;  /* ヘッダー文字色（日曜列） */
    --cal-header-bg-sat:        #f5f5f5;  /* 土曜列 */
    --cal-header-text-sat:      #41B1E5;  /* ヘッダー文字色（土曜列） */

    /* ── 日付セル 背景色 ── */
    --cal-cell-bg:              #ffffff;  /* 通常日（平日） */
    --cal-cell-bg-sun:          #ffffff;  /* 日曜日 */
    --cal-cell-bg-sat:          #ffffff;  /* 土曜日 */
    --cal-cell-bg-disabled:     #ffffff;  /* 無効日（前月・翌月） */
    --cal-cell-bg-has-item:     transparent;  /* 予定あり */

    /* ── 日付セル 文字色 ── */
    --cal-cell-text:            #454647;  /* 通常日 */
    --cal-cell-text-sun:        #E51D57;  /* 日曜日 */
    --cal-cell-text-sat:        #41B1E5;  /* 土曜日 */
    --cal-cell-text-has-item:   #454647;  /* 予定あり */

    /* ── ボーダー色 ── */
    --cal-cell-border:          #eaeaea;  /* 日付セルのボーダー */
    --cal-border:               #1DB283;  /* カレンダー全体のアウトラインボーダー */
}

/* カレンダーコンテナ */
#calendar {
    width: 100%;
    max-width: 1200px;
    overflow-x: auto;
    margin: 0 auto;
}

#calendar > section {
	display: flex;
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1～6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width: 100%;
}

#calendar > section > div {
    width: 325px;
}

#calendar .controls {
    display: flex;
    justify-content: center;
    margin: 1em;
}

.calendar-title {
    text-align: center;
    font-size: 19px;
    line-height: 45px;
    margin-bottom: 0;
    background-color: var(--cal-title-bg);
    color: var(--cal-title-text);
    border: 1px solid var(--cal-border);
    border-bottom: none;
}

/* カレンダーテーブル */
.calendar-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--cal-border);
}

.calendar-table th,
.calendar-table td {
    padding: 5px;
    text-align: center;
    font-size: 14px;
//    line-height: 30px;
    width: calc(100% / 7);
}

.calendar-table th:first-child,
.calendar-table td:first-child {
    border-left: none;
}

.calendar-table th:last-child,
.calendar-table td:last-child {
    border-right: none;
}

/* 曜日ヘッダー（平日） */
.calendar-table th {
    background-color: var(--cal-header-bg);
    color: var(--cal-header-text);
    font-weight: normal;
    border: 1px solid var(--cal-cell-border);
}

/* 曜日ヘッダー（日曜列） */
.calendar-table th.week-0 {
    background-color: var(--cal-header-bg-sun);
    color: var(--cal-header-text-sun);
}

/* 曜日ヘッダー（土曜列） */
.calendar-table th.week-6 {
    background-color: var(--cal-header-bg-sat);
    color: var(--cal-header-text-sat)
}

/* 日付セル（通常日） */
.calendar-table td {
    text-align: left;
    border: 1px solid var(--cal-cell-border);
    background-color: var(--cal-cell-bg);
    position: relative; /* ポップオーバーの基準位置 */
}
.calendar-table tr:last-child td {
    border-bottom: none;
}

.calendar-table td span {
    display: inline-block;
    color: var(--cal-cell-text);
}

/* 日曜日 */
.calendar-table td.week-0 {
    color: var(--cal-cell-text-sun);
    background-color: var(--cal-cell-bg-sun);
}

.calendar-table td.week-0 span {
    color: var(--cal-cell-text-sun);
}

/* 土曜日 */
.calendar-table td.week-6 {
    color: var(--cal-cell-text-sat);
    background-color: var(--cal-cell-bg-sat);
}

.calendar-table td.week-6 span {
    color: var(--cal-cell-text-sat);
}

/* 予定がある日 */
.calendar-table td.has-item {
    color: var(--cal-cell-text-has-item);
    background-color: var(--cal-cell-bg-has-item);
}

.calendar-table td.has-item span {
    color: var(--cal-cell-text-has-item);
}

/* 無効日（前月/翌月の日） */
.calendar-table td.disabled {
    background-color: var(--cal-cell-bg-disabled);
}

/* クリック可能な日付 */
.calendar-table td:not(.disabled) {
    height: 3.8em;
//    cursor: pointer;
}

/* ホバー効果 - セル用の擬似要素でオーバーレイ表示（子要素に影響しない） */
.calendar-table td {
    vertical-align: top;
    transition: background-color 0.15s;
}

.calendar-table td:hover span {
//    font-weight: bold;
}

/**
 * 案件毎の固有のスタイルを定義
 */

.yoyaku_naiyo0 .item {
    color: #EAEAEA !important;
    display: block;
    text-align: center;
    font-size: 20px;
//    line-height: 46px
}

.yoyaku_naiyo1 .item {
    color: #e51d57 !important;
    display: block;
    text-align: center;
    font-size: 20px;
//    line-height: 46px
}

.yoyaku_naiyo2 .item {
    color: #f29701 !important;
    display: block;
    text-align: center;
    font-size: 20px;
//    line-height: 46px
}

.yoyaku_naiyo3 .item {
    color: #37b585 !important;
    display: block;
    text-align: center;
    font-size: 20px;
//    line-height: 46px
}