@charset "UTF-8";
/*----------------------------------------------------

スライド設定 

----------------------------------------------------*/
#calendar .prev-arrow,.next-arrow {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 3px solid var(--red);
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:absolute;
    z-index: 99;
}
#calendar .prev-arrow:hover,
#calendar .next-arrow:hover{
  background: var(--red);
}

#calendar .prev-arrow {
/*  transform: rotate(180deg);    */
    left: 0;
    top: 42%;
}
#calendar .next-arrow{
    right: 0;
    top: 42%;  
}
#calendar .next-arrow::before{
    display: block;
    content: "→";
    padding: 2px 0 0 0;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin:0;
    color: var(--red);
}
#calendar .next-arrow:hover::before{
  color: #fff;
}
#calendar .prev-arrow::before{
    display: block;
    content: "←";
    padding: 2px 0 0 0;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin:0;
    color: var(--red);
}
#calendar.prev-arrow:hover::before{
  color: #fff;
}

/*----------------------------------------------------
スライド設定 TB 
----------------------------------------------------*/
@media screen and (min-width:580px) {

  #calendar .prev-arrow,
  #calendar .next-arrow {
    width: 50px;
    height: 50px;
  }
  #calendar .prev-arrow {
      left: 0;
      top: 42%;
  }
  #calendar .next-arrow{
      right: 0;
      top: 42%;  
  }

  #calendar .next-arrow::before{
    font-size: 2.1rem;
    color: var(--red);
  }
  #calendar .next-arrow:hover::before{
    color: #fff;
  }

  #calendar .prev-arrow::before{
    display: block;
    content: "←";
    padding: 2px 0 0 0;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 700;
    margin:0;
    color: var(--red);
  }
  #calendar .prev-arrow:hover::before{
    display: block;
    content: "←";
    padding: 2px 0 0 0;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 700;
    margin:0;
    color: #fff;
  }

}

/*---------------------------------

レイアウト

-----------------------------------*/
.calendar-wrap{
  max-width: 650px;
  margin: 0;
  padding: 0;
}
.calendar-block{
  margin: 0 10px;
}
.calendar-content{
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 0 0 1rem;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
  @media screen and (max-width:374px) {
    .calendar-content{
      padding: 20px 10px;
    }
  }
.calendar-num{
  width: auto;
}
.calendar-fish{
  width: auto;
}


/*カレンダー
------------------*/

/* 月 SP------- */
.calendar-month{
  display: flex;  
  align-items: center;
  padding: 0 10px 10px;
}
.calendar-month p{
  font-size: 1.8rem;
}
.calendar-month p{
  width: 30%;
}
.calendar-month p:nth-child(2){
  width: 40%;
  text-align: center;
}
.calendar-month p:nth-child(2){
  display: flex;
  justify-content: center;
}
.calendar-month p:nth-child(2) span:first-child{
  width: 46%;
  font-size: 1.6rem;
}
.calendar-month p:nth-child(2) span:last-child{
  width: 54%;
  font-size: 1.4rem;
}
.calendar-month p:last-child{
  text-align: right;
}


/* カレンダーテービル  SP ------ */
.calendar-num table{
  width: 100%;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  font-weight: 500;   
}
.calendar-num table.calen-bg{
  background: url(../img/calendar/back.gif) no-repeat center center;
  background-size: 240px;  
}

.calendar-num table th,
.calendar-num table td{
  padding: 5px 10px;
  text-align: center;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
}
.bg-open{
  background-image: url(../img/calendar/back2b.gif);
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 40px;
}
.bg-holiday{
  background-image: url(../img/calendar/back2.gif);
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 40px;
}
.bg-yokohama{
  background-image: url(../img/calendar/back2c.gif);
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 40px;
}
.tb-red{
  color: #f00;
}
.tb-week{
  font-weight: 500;
}


/* 休業・開業  SP -------- */
ol.calendar-day{
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 1rem;
}
ol.calendar-day li{
  padding: 0 15px 0 25px;
}
ol.calendar-day li.holiday{
  background: url(../img/calendar/mark.gif) no-repeat left 3px;
  background-size:20px;
}
ol.calendar-day li.open{
  background: url(../img/calendar/markb.gif) no-repeat left 3px;
  background-size:20px;
}
ol.calendar-day li.yokohama{
  background: url(../img/calendar/back2c.gif) no-repeat left 3px;
  background-size:24px;
}


/* 旬の魚
---------------------*/
.calendar-fish-ph{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 0 1rem;
}
.calendar-fish-ph p{
  width: 48%;
  padding: 0;
}
.calendar-fish dl{
  font-size: 1.2rem;
}
.calendar-fish dl dt{
  padding: 0 0 0.5rem;
  font-weight: 700;
}
.calendar-fish dl dd{
  font-size: 1.0rem;  
}


@media screen and (min-width:580px) {

  /*---------------------------------
  レイアウト 580
  -----------------------------------*/
  .calendar-content{
    flex-direction: row;
    padding: 30px 10px;
  }
  .calendar-num{
    width: 65%;
    padding: 0 10px 0 0;
  }
  .calendar-fish{
    width: 35%;
  }

  /*旬の魚
  -----------------------------------*/
  .calendar-fish-ph{
    flex-direction: column;
    padding: 0;
  }
  .calendar-fish-ph p{
    width: 100%;
    padding: 0 0 10px;
  }



}

@media screen and (min-width:1000px) {

  /*-----------------
  カレンダー
  ------------------*/

  /* 月 1000 ------- */
  .calendar-month p{
    font-size: 1.4rem;
  }

    /* カレンダーテービル  SP ------ */
  .calendar-num table{
    font-size: 1.6rem;
  }

  .calendar-num table th,
  .calendar-num table td{
    padding: 5px;
    font-size: 1.4rem;
  }

}

@media screen and (min-width:1200px) {

  /*-----------------
  カレンダー
  ------------------*/

  /* 月 1200 ------- */
  .calendar-month p{
    font-size: 1.8rem;
  }

    /* カレンダーテービル  1200 ------ */
  .calendar-num table{
    font-size: 1.8rem;
  }
  .calendar-num table th,
  .calendar-num table td{
    padding: 5px 10px;
    font-size: 1.6rem;
  }

}

@media screen and (min-width:1400px) {

.calendar-fish dl dd{
  font-size: 1.2rem;  
}

}