/*-----------------------------
cal.css
休業日のご案内（cal/）のカレンダー用
・見た目は以前の WordPress のカレンダー（XO Event Calendar）に合わせている
------------------------------*/

.c-calendar {
  font-family: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333; }

.c-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 4px; }

.c-calendar__caption {
  font-size: 120%;
  line-height: 28px; }

.c-calendar__nav {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer; }
  .c-calendar__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #333;
    border-left: 2px solid #333; }
  .c-calendar__nav[disabled] {
    opacity: 0.25;
    cursor: default; }
  .c-calendar__nav--prev::before {
    transform: translate(-30%, -50%) rotate(-45deg); }
  .c-calendar__nav--next::before {
    transform: translate(-70%, -50%) rotate(135deg); }

.c-calendar__month {
  table-layout: fixed;
  width: 100%;
  margin: 0 0 8px;
  border: 1px solid #ccc;
  border-collapse: collapse;
  background: #fff; }
  .c-calendar__month th,
  .c-calendar__month td {
    border: 1px solid #ccc; }
  .c-calendar__month th {
    padding: 1px 0;
    font-weight: bold;
    text-align: center; }
    .c-calendar__month th.sunday {
      color: #d00; }
    .c-calendar__month th.saturday {
      color: #00d; }
  .c-calendar__month td {
    height: 48px;
    padding: 4px;
    line-height: 1.2em;
    text-align: right;
    vertical-align: top; }
    .c-calendar__month td.is-off {
      background: #fddde6; }
    .c-calendar__month td.is-other {
      color: rgba(51, 51, 51, 0.6); }
      .c-calendar__month td.is-other.is-off {
        background: rgba(253, 221, 230, 0.6); }
    .c-calendar__month td.is-today {
      color: #00d;
      font-weight: bold; }
  @media (max-width: 767px) {
    .c-calendar__month td {
      height: 42px; } }

.c-calendar__legend {
  font-size: 90%; }
  .c-calendar__legend span {
    display: inline-block;
    width: 20px;
    height: 18px;
    margin-right: 6px;
    border: 1px solid #ccc;
    background: #fddde6;
    vertical-align: middle; }