@charset "UTF-8";

/* =========================================================
  enjoy calendar
========================================================= */

/* enjoyCalendar
----------------------------------------------- */
#enjoyCalendar {
  max-width: 1000px;
  margin: 0 auto;
}

#enjoyCalendar .pieceBody .tab-list,
#enjoyCalendar .pieceBody .tab-detail li .img-sp {
  display: none;
}

#enjoyCalendar .pieceBody img {
  width: 100%;
  height: auto;
}

#enjoyCalendar .pieceBody area {
  outline: none !important;
}

@media only screen and (max-width: 959px) {
  #enjoyCalendar .pieceBody .img-pc {
    display: none;
  }

  #enjoyCalendar .pieceBody .tab-list {
    display: flex;
    gap: 10px;
  }

  #enjoyCalendar .pieceBody .tab-list li {
    flex: 1 1 0;
  }

  #enjoyCalendar .pieceBody .tab-list li a {
    display: block;
    height: 100%;
    padding: 10px 5px;
    border: 1px solid var(--mono-color-7);
    background: var(--mono-color-7);
    color: inherit;
    font-weight: 400;
    font-size: 1.125rem;
    text-decoration: none;
    text-align: center;
    outline-offset: -4px;
  }

  #enjoyCalendar .pieceBody .tab-list li.nature.current a {
    border-color: #3faa48;
    background: #3faa48;
    color: var(--mono-color-9);
  }

  #enjoyCalendar .pieceBody .tab-list li.event.current a {
    border-color: #dca737;
    background: #dca737;
    color: var(--mono-color-9);
  }

  #enjoyCalendar .pieceBody .tab-detail {
    border: 2px solid transparent;
  }

  #enjoyCalendar .pieceBody .tab-detail:has(.nature.current) {
    border-color: #3faa48;
  }

  #enjoyCalendar .pieceBody .tab-detail:has(.event.current) {
    border-color: #dca737;
  }

  #enjoyCalendar .pieceBody .tab-detail li:not(.current) {
    display: none;
  }

  #enjoyCalendar .pieceBody .tab-detail li .img-sp {
    display: block;
  }
}