@charset "UTF-8";

/* ----------------------
    変数の定義
    (色やサイズはここで調整してください)
-------------------------*/
:root {
    --primary : #2E586B ;
    --secondary : #007E94 ;
    --holiday : #E08D50 ;
    --youbi-color : #fff ; /* カレンダー曜日見出しの文字色 */
}


/* 以下、基本修正不要 */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/* カレンダー */
#calendarTable {
  width : 100% ;
  border-collapse : collapse ;
  table-layout : fixed ;
}

th, td {
  padding : 7px 2px ;
  text-align : center ;
  vertical-align : top ;
  font-size : 15px ;
}
@media (min-width: 768px) {
    th, td {
        font-size : 18px ;
        padding : 10px 4px ;
    }
}
td {
    min-height : 2.5em ;
    border : solid 1px #d0d0d0 ;
}
td:before
{
	content : "" ;
	display : block ;
	min-height : 2.5em ;
	float : left ;
}

th.calendarHeader {
    font-size : 1.1em ;
    color : var(--secondary) ;
}
th.calendarHeader a {
     color : var(--secondary) ;
     font-size : 1.2em ;
     text-decoration : none ;
}
th.calendarHeader a:hover { text-decoration : underline ; }
@media (min-width: 768px) {
    th.calendarHeader { font-size : 1.2em ; }
}

.c-youbi th {
    color : var(--youbi-color) ;
    background-color : var(--secondary) ;
    padding : 14px 0 ;
    border-right : solid 1px var(--youbi-color) ;
}
.c-youbi th:first-of-type { border-radius : 10px 0 0 0 ; }
.c-youbi th:last-of-type {
    border-radius : 0 10px 0 0 ;
    border-right : none ;
}

.scheduleComment {
    border-radius : 6px ;
    background : var(--holiday) ;
    color : var(--youbi-color) ;
    padding : 2px 1px 1px ;
    font-size : 11px ;
    line-height : 1.2 ;
}
@media (min-width: 768px) {
    .scheduleComment  {        
        border-radius : 10px ;
        font-size : 16px ;
        line-height : 1.3 ;
        padding : 3px 2px 1px ;
    }
}

.calendar-footer {
  text-align: center;
  margin-top: 1em;
}