/* ==========================================
   MIYABI Easy Calendar v1.2
   Calendar Style
========================================== */


/* ==========================================
   全体
========================================== */

.ebc-calendar-wrap {

    width:100%;

    overflow:hidden;

}



.ebc-calendar {

    width:100%;

    max-width:700px;

    margin:0 auto;

}





/* ==========================================
   タイトル
========================================== */

.ebc-title {

    font-size:20px;

    font-weight:700;

    color:#444;

    text-align:center;

    padding-bottom:8px;

    margin-bottom:15px;

    border-bottom:1px dashed #999;

}





/* ==========================================
   テーブル
========================================== */

.ebc-table {

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}





/* 曜日 */

.ebc-week {

    border:1px solid #ddd;

    padding:6px;

    text-align:center;

    font-size:14px;

    font-weight:bold;

    color:#444;

}





.ebc-saturday {

    color:#1976d2;

}





.ebc-sunday {

    color:#d32f2f;

}





/* ==========================================
   日付セル
========================================== */


.ebc-day {

    position:relative;

    padding:0;

    border:1px solid #ddd;

    vertical-align:top;

    background:#fff;

}





/*
   正方形化
*/

.ebc-day::before {

    content:"";

    display:block;

    padding-top:100%;

}





.ebc-empty {

    border:1px solid #eee;

}





/*
   日付リンク
*/

.ebc-date-link {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    flex-direction:column;

    padding-top:8px;

    text-decoration:none;

    color:#333;

}





.ebc-number {

    font-size:16px;

    font-weight:bold;

}





.ebc-date-link:hover {

    background:rgba(0,0,0,0.03);

}




/* ==========================================
   状態カラー
========================================== */


/*
   状態名から生成されるclass対応

   例:
   ebc-status-eigyoubi
   ebc-status-teikyubi

   管理画面の状態名によって
   自動生成されます
*/





/* 営業日 */

.ebc-status-eigyoubi {

    background:#eaf7ea;

}







/* 定休日 */

.ebc-status-teikyubi {

    background:#fff0f0;

}







/* 休業日 */

.ebc-status-kyuugyoubi {

    background:#f3f3f3;

}







/* 予約満了 */

.ebc-status-yoyakumanyou {

    background:#fff8df;

}







/*
   状態があっても
   数字を見やすくする
*/

.ebc-status-eigyoubi .ebc-number,
.ebc-status-teikyubi .ebc-number,
.ebc-status-kyuugyoubi .ebc-number,
.ebc-status-yoyakumanyou .ebc-number {

    color:#333;

}









/* ==========================================
   今日表示
========================================== */


.ebc-today {


    box-shadow:

        inset 0 0 0 3px #2196f3;


}











/* ==========================================
   選択日表示
========================================== */


.ebc-selected-date {

    margin-top:20px;

    padding:10px 0;

    font-size:15px;

    font-weight:normal;

    color:#444;

    background:transparent;

    border-left:none;

    line-height:1.6;

}





/* ==========================================
   月送り
========================================== */


.ebc-navigation {


    display:flex;


    justify-content:space-between;


    align-items:center;


    max-width:700px;


    margin-top:20px;



}







.ebc-month-link {


    display:inline-block;


    padding:8px 18px;


    background:#444;


    color:#fff;


    text-decoration:none;


    border-radius:6px;


    font-size:14px;


    transition:.2s;



}






.ebc-month-link:hover {


    opacity:.75;


}





/* ==========================================
   レスポンシブ対応
========================================== */


/* タブレット */

@media screen and (max-width:768px) {



    .ebc-title {


        font-size:18px;


        margin-bottom:12px;



    }







    .ebc-week {


        font-size:13px;


        padding:5px;



    }







    .ebc-date-link {


        padding-top:6px;



    }







    .ebc-number {


        font-size:15px;



    }







    .ebc-month-link {


        padding:7px 14px;


        font-size:13px;



    }







}











/* スマホ */

@media screen and (max-width:480px) {





    .ebc-calendar {


        max-width:100%;



    }







    .ebc-title {


        font-size:17px;



    }







    .ebc-week {


        font-size:12px;


        padding:4px;



    }







    .ebc-date-link {


        padding-top:5px;



    }







    .ebc-number {


        font-size:14px;



    }







    .ebc-navigation {


        margin-top:15px;



    }







    .ebc-month-link {


        padding:6px 10px;


        font-size:12px;



    }







    .ebc-selected-date {


        font-size:14px;


        padding:10px;



    }






}












/* ==========================================
   狭いカラム対応
========================================== */



.ebc-calendar-wrap {


    overflow:hidden;



}







.ebc-table {


    word-break:break-word;



}









/* ==========================================
   アクセント
========================================== */



.ebc-date-link:active {


    opacity:.7;



}