/* ==================================================
   基本
================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 20px;

    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;

    color: #333333;
    background: #ffffff;
}


.calendar-wrap {
    width: 100%;
    max-width: 1100px;
}





/* ==================================================
   カレンダー
================================================== */

.calendar {
    width: 100%;

    table-layout: fixed;

    border-collapse: collapse;
    border-spacing: 0;

    border: 1px solid #cccccc;

    background: #ffffff;
}


/* ==================================================
   曜日
================================================== */

.calendar th {
    width: 14.285714%;

    height: 40px;

    padding: 5px;

    border: 1px solid #cccccc;

    background: #f3f3f3;

    text-align: center;
    vertical-align: middle;

    font-size: 16px;
    font-weight: bold;
}


/* ==================================================
   セル
================================================== */

.calendar td {
    width: 14.285714%;

    height: 130px;

    padding: 5px;

    border: 1px solid #cccccc;

    background: #ffffff;

    text-align: left;
    vertical-align: top;

    position: relative;
}


/* ==================================================
   空セル
================================================== */

.calendar td.empty {
    background: #fafafa;
}


/* ==================================================
   日付
================================================== */

.date {
    position: relative;
    z-index: 10;

    height: 22px;
    line-height: 22px;

    margin: 0;
    padding: 0;

    font-size: 14px;
    font-weight: bold;
}


.sun {
    color: #d64545;
}


.sat {
    color: #2b78c5;
}


/* ==================================================
   休館日
================================================== */

.calendar td.closed {
    background: #fde2e7;
}


/* ==================================================
   長期イベント用の空間

   2本分の高さを確保
================================================== */

.event-space {
    width: 100%;

    height: 52px;

    margin: 2px 0 4px;
}


/* ==================================================
   JavaScriptで作る長期イベント

   重要：
   セルに入れず、tbodyの上に重ねます
================================================== */

.long-event-bar {
    position: absolute;

    height: 22px;
    line-height: 22px;

    padding: 0 7px;

    color: #ffffff;

    font-size: 12px;
    font-weight: normal;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border-radius: 4px;

    z-index: 50;

    pointer-events: auto;
}


/* ==================================================
   途中の週

   週をまたぐ場合は左右を少し丸くする
================================================== */

.long-event-bar.continue-before {
    border-radius: 0 4px 4px 0;
}


.long-event-bar.continue-after {
    border-radius: 4px 0 0 4px;
}


.long-event-bar.continue-before.continue-after {
    border-radius: 0;
}


/* ==================================================
   通常イベント
================================================== */

.normal-event {
    margin: 3px 0 0;

    font-size: 12px;
    line-height: 1.4;
}


/* ==================================================
   図書館別イベント
================================================== */

.tag {
    display: block;

    width: 100%;

    margin: 3px 0 0;

    padding: 3px 5px;

    border-radius: 4px;

    font-size: 12px;
    line-height: 1.4;
}


/* 吉田 */

.yoshida {
    color: #60a605;
    background: #e2f2cd;
}


/* 分水 */

.bunsui {
    color: #368ea6;
    background: #d3edf4;
}


/* 燕 */

.tsubame {
    color: #e99133;
    background: #ffebc0;
}


/* ==================================================
   長期イベント設定は隠す
================================================== */

#long-event-data {
    display: none !important;
}


/* ==================================================
   スマートフォン
================================================== */

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

    body {
        margin: 5px;
    }

    .calendar-wrap {
        overflow-x: auto;
    }

    .calendar {
        min-width: 700px;
    }
    
    
}
/*クリックできることがわかる*/
.long-event-bar{
cursor: pointer;
text-decoration: none;
color:#fff;
}

.long-event-bar:hover{
filter: brightness(0.9);
}