html{
  scroll-behavior: smooth;}

/*本日の発売*/
#contents #cal{
    width: 100%;
    position: relative;
    padding: 0;
    background: linear-gradient(to left, #C3FFFB 0%,#7BB5FF 45%,#7BB5FF 55%,#C3FFFB 100%) no-repeat center center / 220%;
    /* transition: background-position .4s ease-out; */
}
#contents #cal.tab1{
  background-position: left;
}
#contents #cal.tab2{
  background-position: right;
}
/*
#cal::before{
    content: '';
    position: absolute;
    top: 0;
    background: linear-gradient(rgba(0,0,0,0.16),rgba(0,0,0,0));
    width: 100%;
    height: 15px;
}*/

#wrap{padding: 50px 0;}

.cal_month{margin-bottom: 50px;}
#contents{
  scroll-behavior: smooth;}
#contents #cal .cal_setsu{
    background: none;
    height: 24px;
    width: 1420px;
    margin: 0 auto 5px auto;
    text-align: right;
}

#contents #cal table{
    width: 1420px;
    margin: 0 auto;
    border-collapse:collapse; /* セルの境界を結合 */
    border: 2px solid #5FA2EC;
}

#contents #cal table th.month{
    width: 110px;
    color: #FFF;
    background: #1CC3C6;
}
#contents #cal table th.month{font-size: 44px; font-family: 'Roboto',sans-serif;}
#contents #cal table th.month span{font-size: 22px; display: inline-block;}

  #contents #cal .facility-tab2 table th.month{
    background: #01176D;
  }

#contents #cal .facility-tab1,
#contents #cal .facility-tab2 {
  display: none;
}

#contents #cal .facility-tab1.active,
#contents #cal .facility-tab2.active {
  display: block;
}

#contents #cal table thead{height: 60px;}
#contents #cal table thead th{
    background: #EEEEEE;
    color: #000;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: 40px;
    line-height: 1em;
}
#contents #cal table thead th span{
    display: block;
    font-size: 14px;
    line-height: 14px;
    margin-top: 3px;
}

#contents #cal table thead th{
    font-size: 24px;
    font-family: 'Roboto',sans-serif;
    position: sticky;
    top: 0;
    z-index: 1;
}
#contents #cal table thead th::after{
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #5FA2EC;
    pointer-events: none;
}
#contents #cal table th,
#contents #cal table td{
    vertical-align: middle;}

#contents #cal table td,
#contents #cal table th{
    background: #FFF;
    border: 1px solid #5FA2EC;
    height: 58px;
}
#contents #cal table .sat{background: #BBDBFF;}
#contents #cal table .sun{background: #FFCBCE;}


#contents #cal table .marugame{height: 126px; line-height: 1.2em;}
#contents #cal table .marugame th img{ width: 42px;}
#contents #cal table .marugame td img{ width: 16px; margin-left: 3px; margin-top: 3px;}
#contents #cal table .ch{height: 56px;}

#contents #cal table .marugame th{background:#4956C8; color: #FFF;font-weight: bold; font-size: 16px;}
#contents #cal table .ch th{background: #145EA9; color: #FFF;font-weight: bold;}
#contents #cal table th.jyogai{background: #5899DC!important; width: 35px; font-size: 18px!important; font-weight: bold;width: 35px; writing-mode: vertical-rl; letter-spacing: .2em;}
#contents #cal table th.jyogai:nth-child(1){color: #FFF !important; }

#contents #cal table .mor th{background: #E5E7FF;}
#contents #cal table .day th{background: #00B5D1;}
#contents #cal table .nig th{background: #4956C8;}
#contents #cal table .mor th{font-weight: bold; font-size: 12px; color: #000 !important;}
#contents #cal table .day th,
#contents #cal table .nig th{font-weight: bold; font-size: 12px; color: #FFF !important;}

#contents #cal table th img{
  margin: 0 auto;
  display: block;
}

#contents #cal table td img.left{
  width: 18px;
  position: relative;
  top: 0px;
}

#contents #cal table .ch th,
#contents #cal table .ch td,
#contents #cal table .mor th,
#contents #cal table .day th,
#contents #cal table .border td,
#contents #cal table .border th{border-bottom: 4px solid #5FA2EC;}

#contents #cal table .jyogai{
  border-bottom: 1px solid #5FA2EC !important;
}
#contents #cal .swiper-button-prev{
  background: url(../images/cal_prev.svg) center center no-repeat;
  width: 32px;
  height: 50px;
  transition: .3s;
  background-size: contain;
}
#contents #cal .swiper-button-prev:hover{
  transform: translateX(-3px);
}
#contents #cal .swiper-button-next{
  background: url(../images/cal_next.svg) center center no-repeat;
  width: 32px;
  height: 50px;
  transition: .3s;
  background-size: contain;
}
#contents #cal .swiper-button-next:hover{
  transform: translateX(3px);
}
#contents #cal .tab{
  display: flex;
  justify-content: space-between;
  width: 1420px;
  margin: 0 auto 16px auto;
}
#contents #cal .tab li a{
  background: #2068B1;
  width: 100%;
  height: 60px;
  text-align: center;
  display: block;
  line-height: 60px;
  color: #FFF;
  font-family: 'Roboto',sans-serif;
  font-weight: bold;
  margin-left: 0px;
  cursor: pointer;
  text-decoration: none;
}
#contents #cal .tab li a:hover{background: #164d85;}

#contents #cal .tab li{font-size: 44px; font-family: 'Roboto',sans-serif;}
#contents #cal .tab li a span{font-size: 22px; display: inline-block;}
#contents #cal .tab li.active{
  font-weight: bold;
  background: #1CC3C6;
  border-radius: 0 12px 0 0 ;
}

#contents #cal .tab li.blank{
  opacity: 0.3;
  pointer-events: none;
}

#contents #cal .tab li.all_pdf a{
  width: 130px;
  background: url(../images/cal_all_pdf.svg);
  text-indent: -9999px;
}
#contents #cal .tab li.all_pdf a{
  display: block;
  width: 130px;height: 100%;}
 
#contents #cal .come{
  background: rgba(255,255,255,0.5);
  color: #000;
  width: 1410px;
  border-radius: 3px;
  padding: 5px;
  margin: 10px auto 0 auto;
  font-weight: bold;
}


#contents #cal td{text-align: center; line-height: 1.2em;}
#contents #cal td.ip{background: #4B5C6D; text-align: center; color: #FFF; font-weight: bold;}
#contents #cal td.sg{background: #F54D4D; text-align: center; color: #FFF; font-weight: bold;}
#contents #cal td.g1{background: #F0BB1C; text-align: center; color: #FFF; font-weight: bold;}
#contents #cal td.g2{background: #77AF4B; text-align: center; color: #FFF; font-weight: bold;}
#contents #cal td.g3{background: #407DCD; text-align: center; color: #FFF; font-weight: bold;}

#contents #cal td.ch{ background: #E5E7FF;}

#contents #cal td.holy{
  background: #CCC; 
  color: #888;
}
#contents #cal td.stop{background: #892006; color: #FFF;}


#contents #cal td img{
  position: relative;
  top:-2px;
  margin-right: 2px;
  margin-top: 3px;
}

#contents #cal td a{
  color: #FFF;
}
#contents #cal td a:hover{text-decoration: none;}


#contents #cal .facility-tab{
  display: flex;
  justify-content: center;
  margin: 8px 0 20px;
}
#contents #cal .facility-tab li{
  margin: 0 8px;
}
#contents #cal .facility-tab li a{
  display: block;
  width: 560px;
  height: 1lh;
  border-radius: 64px;
  background: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 64px;
  color: #000;
  text-decoration: none;
  box-shadow: rgba(0,0,61,.25) 0 3px 6px;
  transition: margin,opacity .2s;
  position: relative;
}
#contents #cal .facility-tab li a::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 8px;
  clip-path: polygon(0 0,100% 0,50% 100%);
  right: 40px;
  top: 0; bottom: 0; margin: auto;
}
#contents #cal .facility-tab li a.active{
  pointer-events: none;
  border: 4px solid;
  margin: -4px;
}
#contents #cal .facility-tab li a:not(.active){
  opacity: .5;
}
#contents #cal .facility-tab li a:hover{
  opacity: .8;
}
#contents #cal .facility-tab li:nth-of-type(1) a span{color: #1CC3C6;}
#contents #cal .facility-tab li:nth-of-type(1) a{border-color: #1CC3C6;}
#contents #cal .facility-tab li:nth-of-type(1) a::after{background: #1CC3C6;}
#contents #cal .facility-tab li:nth-of-type(2) a span{color: #0051A1;}
#contents #cal .facility-tab li:nth-of-type(2) a{border-color: #0051A1;}
#contents #cal .facility-tab li:nth-of-type(2) a::after{background: #0051A1;}