/* ===============================
   基本設定
=============================== */

#cal_wrapper {
	width: 100%;
	max-width: 1000px;
	margin: 80px auto 0;
}

#cal_wrapper .av-cal {
	width: 84%;
	margin: 0 auto;
	position: relative;
}

.av-cal__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.av-cal__table th,
.av-cal__table td {
  width: calc(100% / 7);
  padding: 0.2em 0 0.3em;
  border: 1px solid #000;
  background: #fff; /* 通常は白 */
  color: #000;
  font-size: 3.3rem;
}

/* 曜日ヘッダー */
.av-cal__table th {
  background: #fff;
  line-height: 1;
  font-weight: 500;
}

.av-cal__week th:first-of-type {
	color: #c1272d;
}

.av-cal__week th:last-of-type {
	color: #0071bc;
}

.av-cal__table td {
  color: #000;
}

.av-cal__table tr td:first-of-type {
  color: #c1272d;
}

.av-cal__table tr td:last-of-type {
  color: #0071bc;
}

.av-cal__table td.holiday {
  font-weight: 500;
  color: #c1272d;
}

.av-cal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 29%;
  margin-bottom: 2px;
  background: #FF0000;
  background: linear-gradient(0deg,rgba(255, 0, 0, 1) 5%, rgba(193, 39, 45, 1) 95%);
}

.av-cal__title {
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1;
	padding-top: 0.2em; 
	padding-bottom: 0.4em; 
}

.av-cal__title span{
	font-size: 150%;
}

.av-cal__header .av-cal__nav {
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  line-height: 0;
  cursor: pointer;
}

.av-cal__header .av-cal__prev {
  background: url("../img/cal_arrow_left.svg") no-repeat;
	background-size: cover;
}

.av-cal__header .av-cal__next {
  background: url("../img/cal_arrow_right.svg") no-repeat;
  background-size: cover;
}

.av-cal__nav.pc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
}

.av-cal__nav.av-cal__prev.pc {
	left: -10%;
}

.av-cal__nav.av-cal__next.pc {
	right: -10%;
}

.av-cal__nav.pc::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    border-top: 4px solid #ff0000;
    border-right: 4px solid #ff0000;
    transform: rotate(225deg);
}

.av-cal__nav.av-cal__next.pc::before {
    transform: rotate(45deg);
}

.av-cal__header .av-cal__nav.is-disabled,
.av-cal__header .av-cal__nav[aria-disabled="true"],
.av-cal__header .av-cal__nav:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.av-cal__nav.pc.is-disabled::before {
	border-top: 4px solid #ffc8c8;
    border-right: 4px solid #ffc8c8;
}

/* カレンダー日付（数字＋マーク） */
.av-cal__table td {
  vertical-align: top;
  text-align: center;
  background: #fff;
  color: #000;
  font-size: 3.6rem;
  border: 1px solid #000;
  padding: 0.3em 0;
}

/* --- 各セル内の配置 --- */
.av-cal__table td div.day-num {
  display: block;
  font-weight: 500;
}
.av-cal__table td div.mark {
  display: block;
  margin-top: 4px;
  font-size: 3.8rem;
}

/* --- マーク色 --- */
.av-cal__table td.is-ok .mark { color: #ff0000 !important; }
.av-cal__table td.is-tri .mark { color: #22b573 !important; }
.av-cal__table td.is-ng  .mark { color: #0071bc !important; }

/* --- 背景色 --- */
.av-cal__table td.is-ok { background: #fff; }
.av-cal__table td.is-tri { background: #e6ffb9; }
.av-cal__table td.is-ng { background: #c8f0ff; }

/* --- 前月・翌月部分 --- */
.av-cal__table td.is-prev,
.av-cal__table td.is-next {
  background: #e6e6e6;
  font-size: 2.8rem;
  color: #808080!important;
  font-weight: 400!important;
}

/* --- 祝日 --- */
.av-cal__table td.holiday div.day-num {
  color: #c1272d;
  font-weight: 500;
}

.av-cal__table td {
	height: 102px;
	line-height: 1;
	vertical-align: middle;
}

/* --- マーク説明・注釈 --- */

.av-cal_info {
	width: 84%;
	margin: 45px auto 0;
}

.av-cal__legend {
	border: #FFF solid;
	border-width: 2px 0;
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.75em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;
}

.av-cal__legend span{
	display: inline-block;
}

.av-cal__legend span:nth-child(2){
	margin: 0 1em;
}

.av-cal__legend span:nth-child(2)::before{
	content: "／　";
}

.av-cal__legend span:nth-child(2)::after{
	content: "　／";
}

.av-cal__note {
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: left;
}


@media print, screen and (max-width: 1000px){
	.av-cal__nav.pc {
		display: none!important;
	}
	
	#cal_wrapper {
        margin: 10vw auto 0;
    }
	
	#cal_wrapper .av-cal {
        width: 100%;
    }
	
	.av-cal__header {
      padding: 0 24%;
    }
	
	.av-cal__title {
        font-size: 1.6rem;
    }
	
	.av-cal__header .av-cal__nav {
        width: 20px;
        height: 20px;
      }
	
	.av-cal__table th,
    .av-cal__table td,
	.av-cal__table td div.mark{
      font-size: 1.7rem;
    }
	
	.av-cal__table td {
		height: 50px;
	}
	
	.av-cal__table td.is-prev,
    .av-cal__table td.is-next {
      font-size: 1.4rem;
    }
	
	.av-cal_info {
        width: 100%;
        margin: 5vw auto 0;
    }

    .av-cal__legend {
        font-size: 1.4rem;
    }

    .av-cal__legend span:nth-child(2){
        margin: 0 0.75em;
    }

    .av-cal__note {
        font-size: 1.4rem;
        line-height: 1.8;
        text-align: left;
    }
}

@media print, screen and (max-width: 359px){
	.av-cal__legend {
        font-size: 1.2rem;
    }
}