@charset "UTF-8";

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

/* top iframe
----------------------------------------------- */
body:not(.not-in-iframe) #navigationNotice,
body:not(.not-in-iframe) #pageHeader,
body:not(.not-in-iframe) #pageFooter {
  display: none;
}

body:not(.not-in-iframe) #main {
  background:
   url(/_themes/kosodate/site/images/calendar01.svg) right top no-repeat,
   url(/_themes/kosodate/site/images/calendar02.svg) left bottom no-repeat;
}

body:not(.not-in-iframe) #content {
  padding: 17px 15px;
}

/* pageTitle */
body:not(.not-in-iframe) #pageTitle .pieceContainer {
  display: block;
  margin-bottom: 5px;
}

body:not(.not-in-iframe) #pageTitle .pieceContainer::before {
  display: none;
}

body:not(.not-in-iframe) #pageTitle .pieceBody h1 {
  font-size: 1.25rem;
}

/* h2 */
body:not(.not-in-iframe) .calendarEvents h2 {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 1rem;
}

/* pageTop */
body:not(.not-in-iframe) #pageTop {
  display: none;
}

/* calendarEvents / common elements
----------------------------------------------- */

/* h2 */
.not-in-iframe .calendarEvents h2 {
  margin-bottom: min(30px,4vw);
  padding: 0 8px;
  border-bottom: 4px solid #F2A7AB;
  font-weight: 700;
  font-size: 2rem;
}

@media only screen and (max-width: 834px) {
  .not-in-iframe .calendarEvents h2 {
    font-size: max(1.375rem,4vw);
  }
}

/* pagination */
.calendarEvents .pagination {
  display: flex;
  align-items: center;
  gap: 0 16px;
}

.calendarEvents .pagination .separator {
  display: none;
}

.calendarEvents .pagination.upperPagination {
  display: none;
  margin-bottom: 16px;
}

.calendarEvents .pagination.lowerPagination {
  margin-top: 16px;
}

.calendarEvents .pagination a,
.calendarEvents .pagination span {
  flex: 1 1 0;
  position: relative;
  padding: 8px 40px;
  border: 1px solid var(--mono-color-6);
  border-radius: 4px;
  color: inherit;
  text-align: center;
}

.calendarEvents .pagination .prev_page {
  background: url(/_themes/kosodate/site/images/ic-prev.svg) 16px center no-repeat var(--mono-color-9);
}

.calendarEvents .pagination .next_page {
  background: url(/_themes/kosodate/site/images/ic-next.svg) right 16px center no-repeat var(--mono-color-9);
}

.calendarEvents .pagination .disabled {
  opacity: 0.5;
}

.calendarEvents .pagination a::before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: -1px;
  border: 2px solid var(--mono-color-6);
  border-radius: 4px;
  transition: opacity 0.25s ease-in-out;
}

.calendarEvents .pagination a:hover::before {
  opacity: 1;
}

/* calendarCalendarEvents
----------------------------------------------- */
.calendarCalendarEvents table {
  width: 100%;
  background: var(--mono-color-9);
  font-size: 0.9375rem;
}

.calendarCalendarEvents table th,
.calendarCalendarEvents table td {
  width: 14.28%;
  padding: 5px 6px 7px;
  border: 1px solid #959595;
  line-height: 1.3;
  vertical-align: top;
}

.calendarCalendarEvents table td::before {
  content: "";
  display: block;
  float: left;
  min-height: 45px;
}

.calendarCalendarEvents table th {
  background-color: #F2EFEC;
  text-align: center;
}

.calendarCalendarEvents table .sat {
  background-color: #E0F4FF;
  color: #063DA4;
}

.calendarCalendarEvents table .sun,
.calendarCalendarEvents table .holiday {
  background-color: #FFF1EF;
  color: #DD2B2E;
}

.calendarCalendarEvents table .prevMonth,
.calendarCalendarEvents table .nextMonth {
  color: #959595;
}

.calendarCalendarEvents table li ~ li {
  margin-top: 10px;
}

.calendarCalendarEvents table li:not(.holiday) {
  padding: 4px 6px;
  border-radius: 2px;
  background: #C8f3e6;
}

.calendarCalendarEvents table li:not(.holiday) a:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 835px) {
  .not-in-iframe .calendarCalendarEvents table td {
    line-height: inherit;
  }

  .not-in-iframe .calendarCalendarEvents table td::before {
    min-height: 100px;
  }
}

@media only screen and (max-width: 534px) {
  .calendarCalendarEvents table {
    font-size: 0.875rem;
  }
}

/* table scroll
----------------------------------------------- */
.js-table-scroll {
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .js-table-scroll > .scroll table th,
  .js-table-scroll > .scroll table td {
    max-width: unset;
    min-width: unset;
  }
}

@media only screen and (max-width: 640px) {
  .js-table-scroll > .scroll table th,
  .js-table-scroll > .scroll table td {
    max-width: 22vw;
    min-width: 22vw;
  }
}