:root {
  --top-max-content-width: 1120px;
  --top-container-content: calc(var(--top-max-content-width) + calc(var(--space-16) * 2));
  
  --top-left-content-width: 620px;
  
  --banner-width: calc(268 / 16 * 1rem);
}

.top {
  color: var(--color-text-default);
}

.top-ttl {
  line-height: 1.2;
  padding-block: var(--space-4);
  background: var(--color-background-theme);
  font-weight: var(--fontweight-medium);
  font-size: var(--font-size-18);
  letter-spacing: var(--tracking-5);
  text-align: center;
}

/*===========================
 Main Visual
=============================*/
.main-visual {
  /* layout */
  padding-block: var(--space-16) var(--space-32);
  background: var(--color-background-top-main-visual);
  overflow: hidden;
}
  .main-visual__wrapper {
    display: grid;
    gap: var(--space-12);
  }
  .main-visual__head {
    display: grid;
    grid-template-columns: var(--top-left-content-width) 1fr;
    gap: var(--space-12);
  }
  .main-visual__body {
    display: grid;
    grid-template-columns: var(--top-left-content-width) 1fr;
    gap: var(--space-12);
  }
  .main-visual-frame {
    display: grid;
    gap: var(--space-12);
    grid-template-rows: auto 1fr;
    padding-block: var(--space-8) var(--space-12);
    padding-inline: var(--space-12);
    border: var(--border-width-md) var(--border-subtle) solid;
    border-radius: var(--rounded-12);
    background: var(--color-background-default);
  }

@media (width < 1496px) {
  .main-visual {
    position: relative;
  }
}

/*===========================
 本日の開館情報
=============================*/
.open-info__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16) var(--space-4);
}
  .open-info__item {
    overflow: hidden;
    border: var(--border-width-md) var(--border-table) solid;
    border-radius: var(--rounded-6);
  }
  .open-info__label {
    display: block;
    line-height: 1.2;
    padding-block: var(--space-6);
    color: var(--color-text-cushion);
    font-weight: var(--fontweight-medium);
    font-size: var(--font-size-16);
    letter-spacing: var(--tracking-6);
    text-align: center;
  }
  .open-info__dscrpt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }
  .open-info__status-label {
    line-height: 1.6;
    color: var(--color-text-cushion);
    font-weight: var(--fontweight-medium);
    font-size: var(--font-size-18);
    letter-spacing: var(--tracking-6);
  }
  .open-info__status {
    position: relative;
    inline-size: calc(24 / 16 * 1rem);
    aspect-ratio: 1;
  }
    .open-info__status--open {
      border: var(--border-width-xl) var(--border-subtle) solid;
      border-radius: var(--rounded-full);
    }
    .open-info__status--close::before,
    .open-info__status--close::after {
      content: "";
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 50%;
      block-size: 100%;
      inline-size: var(--border-width-xl);
      background: var(--border-top-important);
      border-radius: var(--rounded-4);
    }
    .open-info__status--close::before {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    .open-info__status--close::after {
      transform: translate(-50%, -50%) rotate(45deg);
    }

  .category--chuoh  { background-color: var(--category-bg-chuoh); }
  .category--senri  { background-color: var(--category-bg-senri); }
  .category--sankusu  { background-color: var(--category-bg-sankusu); }
  .category--esaka  { background-color: var(--category-bg-esaka); }
  .category--chisato  { background-color: var(--category-bg-chisato); }
  .category--senrigaoka  { background-color: var(--category-bg-senrigaoka); }
  .category--kento  { background-color: var(--category-bg-kento); }
  .category--kitasenri  { background-color: var(--category-bg-kitasenri); }
  .category--yamada-st  { background-color: var(--category-bg-yamada-st); }
  .category--yamada-br  { background-color: var(--category-bg-yamada-br); }





/*===========================
 Slider
=============================*/
.slider-container {
  overflow: hidden;
  /* layout */
  position: relative;
  width: 100%;
  height: auto;
  margin-inline: auto;
  padding-inline: var(--space-28);
}

.slide_box {
  /* layout */
  position: relative;
  width: 100%;
  height: fit-content;
  margin-inline: auto;
}

.slide {
  width: 100%;
  height: 200px;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  /* style */
  border-radius: var(--rounded-12);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
}

/* controller */
.slide-control {
  /* layout */
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(30px + 8px);
  padding-block: var(--space-4, 4px);
}

/* pagination */
.slider-pagination {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
}

.slider-pagination .dot {
  /* layout */
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--color-background-default);
  border-radius: var(--rounded-full);
  margin: 0 5px;
  /* style */
  border: 1px solid var(--border-slide-dot);
  outline: 1px solid transparent;
  outline-offset: 2px;
  /* transition */
  transition: all 0.2s ease;
  cursor: pointer;
}

.slider-pagination .slick-active .dot {
  border: 1px solid var(--border-subtle);
  background: var(--color-background-hover);
}

.slider-pagination .dot:hover,
.slider-pagination .dot:focus-within {
  background: var(--color-background-theme);
  outline-color: var(--border-bold);
}

.slick-dots {
  position: relative;
  display: flex;
  align-items: center;
  inset-block-end: 8px;
}

/* play-stop */
.buttons {
  position: absolute;
  display: flex;
  inset-block: calc(6 / 16 * 1rem) auto;
  gap: var(--space-8, 8px);
  inset-inline-end: 0;
  z-index: calc(var(--stack-foreground) + 3);
}

.buttons .button.js-stop,
.buttons .button.js-play {
  /* layout */
  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
  height: fit-content;
  margin: 0;
  /* style */
  line-height: 1;
  padding-block: var(--space-6) var(--space-4);
  padding-inline: calc(27 / 16 * 1rem) var(--space-8);
  background: var(--color-background-theme);
  color: var(--color-text-default);
  border: 1px solid var(--border-slide-dot);
  outline: 2px solid var(--border-theme);
  border-radius: var(--rounded-6);
  font-weight: var(--fontweight-medium);
  font-size: var(--font-size-16);
  overflow: visible;
  cursor: pointer;
  text-indent: 0;
  letter-spacing: var(--tracking-4);
  /* transition */
  transition: background-color 0.2s ease 0s, outline-color 0.2s ease 0s;
}

.buttons .button.js-play {
  display: none;
}
.buttons .button.js-play::before {
  /* layout */
  content: "";
  position: absolute;
  display: inline-block;
  inset-inline-start: 10px;
  inset-block-start: 50%;
  width: 0;
  height: 0;
  /* style */
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--color-text-default);
}

.buttons .button.js-stop::before,
.buttons .button.js-stop::after {
  /* layout */
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 8px;
  width: 4px;
  height: 12px;
  margin: 0;
  /* style */
  background: var(--color-text-default);
  transform: translateY(-50%);
}

.buttons .button.js-stop::after {
  inset-inline-start: calc(8px + 4px + 3px);
}

.buttons .button:hover {
  /* style */
  background-color: var(--color-background-default);
  outline-color: var(--border-default);
}
.buttons .button.js-stop:hover,
.buttons .button.js-stop:focus, 
.buttons .button.js-play:hover, 
.buttons .button.js-play:focus {
  border-color: var(--border-default)!important;
}


/*
.buttons .button.js-play[aria-pressed="true"],
.buttons .button.js-stop[aria-pressed="true"] {
  background-color: var(--color-background-slide-button-fucus);
  border: 1px solid var(--border-default);
}
*/


.buttons .button.js-play[aria-pressed="true"]:hover,
.buttons .button.js-stop[aria-pressed="true"]:hover,
.buttons .button.js-play[aria-pressed="true"]:focus-within,
.buttons .button.js-stop[aria-pressed="true"]:focus-within {
  background-color: var(--color-background-main);
  border: 1px solid var(--border-default) !important;
}

/* arrows */
.slick-arrow {
  position: relative;
}

.slick-prev,
.slick-next {
  /* layout */
  width: 37px;
  height: 37px;
  position: absolute;
  display: inline-block;
  z-index: calc(var(--stack-drawer) - 2);
  /* style */
  background: var(--color-background-slide-button);
  border-radius: var(--rounded-full);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-01);
  /* transition */
  transition: background-color 0.3s ease-in-out;
}

.slick-prev {
  /* layout */
  inset-inline-start: -21px;
}

.slick-next {
  /* layout */
  inset-inline-end: -21px;
}

.slick-prev::before,
.slick-next::before {
  /* layout */
  content: "";
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: 0;

  /* style */
  background: transparent;
  box-shadow: none;
  border-top: 2px solid var(--color-text-default);
  border-right: 2px solid var(--color-text-default);
  border-bottom: none;
  border-left: none;
}

.slick-prev::before {
  /* layout */
  transform: translate(-30%, -50%) rotate(-135deg);
}

.slick-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.slick-prev:hover,
.slick-prev:focus-within,
.slick-next:hover,
.slick-next:focus-within {
  background-color: var(--color-background-slide-button-fucus);
}
/*===========================
 重要なお知らせ
=============================*/
.news-important {
  gap: var(--space-8);
  border-color: var(--border-top-important);
}
  .news-important__ttl {
    background-color: var(--color-background-top-important);
  }
.news-important__list {
  padding-inline: var(--space-8, 8px);
}
.news-important__item {
  position: relative;
  line-height: 1.2;
  padding-block: var(--space-6);
  padding-inline-start: calc(26 / 16 * var(--font-value));
}
.news-important__item::before {
  content: "";
  position: absolute;
  inset-block-start: calc((10 / 16 * var(--font-value)));
  inset-inline-start: calc(8 / 16 * var(--font-value));
  width: var(--font-size-06);
  height: var(--font-size-06);
  border-radius: var(--rounded-full);
  background: var(--color-important);
}
.news-important__time {
  line-height: 1.2;
  font-size: var(--font-size-14);
  letter-spacing: var(--tracking-7);
}
.news-important__label {
  display: block;
  font-size: var(--font-size-16);
  &:hover,
  &:focus-within {
    text-decoration: underline;
  }
}

/*===========================
 Search
=============================*/
.search-container__inner {
  /* layout */
  display: flex;
  width: 100%;
}


.main-visual__search {
  margin-block-start: var(--space-16);
}
.main-visual__search-form {
  /* layout */
  width: 100%;
  margin-inline: auto;
}

.main-visual__search-wrap {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: start;
}

.main-visual__search-inner {
  /* layout */
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-6);
  min-height: 50px;
}

.top .blc_search .search_wrap_inner input[type="text"] {
  width: 100%;
  border: var(--border-width-lg) var(--border-subtle) solid;
  font: inherit;
  font-size: var(--font-size-18);
  line-height: 1.2;
  letter-spacing: var(--tracking-6);
}

.top .blc_search .search_wrap_inner input[type="text"]:hover,
.top .blc_search .search_wrap_inner input[type="text"]:focus,
.top .blc_search .search_wrap_inner input[type="text"]:focus-within,
.top .blc_search .search_wrap_inner input[type="text"]:focus-visible {
  outline: 4px var(--border-input-focus) solid !important;
  outline-offset: 0 !important;
  background-color: #eff4f5 !important;
  border: 2px var(--border-default) solid;
  box-shadow: none !important;
}

.blc_search .search_wrap .search_wrap_inner input[type="submit"] {
  line-height: 1;
  padding-block: var(--space-12);
  border: var(--border-width-lg) var(--border-subtle) solid;
  background: var(--color-background-copy);
  color: var(--color-text-default);
  font-size: var(--font-size-18);
}

.search-option {
  padding-inline-start: var(--space-6);
}

.main-visual__search-footer {
  margin-block-start: var(--space-6);
}
  .main-visual__search-footer p {
    line-height: 1.2;
    letter-spacing: var(--tracking-6);
  }


/*===========================
 main visual Links
=============================*/
.mylibrary-links {
  display: grid;
}
.mylibrary-login {
  gap: var(--space-8);
}
.mylibrary-login__outer {
  display: grid;
  gap: var(--space-12);
  place-items: center;
}
.mylibrary-login__ttl {
  line-height: 1.2;
  font-size: var(--font-size-20);
  letter-spacing: var(--tracking-6);
  text-align: center;
}  

.main-visual-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  margin-block-start: var(--space-16);
}
.main-visual-links__ttl {
  font-size: var(--font-size-16);
}

.main-visual-links__link {
  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  justify-items: center;
  block-size: 100%;
  line-height: 120%;
  padding-block: var(--space-8) var(--space-8, 8px);
  padding-inline: var(--space-16, 16px);
  /* style */
  border: 1px var(--border-slide-dot) solid;
  border-radius: var(--rounded-12);
  background: var(--color-background-default);
  outline: var(--border-width-lg) var(--border-title) solid;
  color: var(--color-text-title);
  font-weight: var(--fontweight-medium);
  font-size: var(--font-size-16);
  letter-spacing: var(--tracking-4);
  transition: all 0.1s ease;
}
  .main-visual-links__link.login {
    min-inline-size: calc(240 / 16 * 1rem);
    padding-block: var(--space-8);
  }
    .main-visual-links__label {
      display: inline-grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-8);
      place-items: center;
    }
    .main-visual-links__link.login .main-visual-links__icon {
      inline-size: calc(28 / 16 * 1rem);
    }
  .main-visual-links__link.suita-densi .main-visual-links__icon,
  .main-visual-links__link.chuoh-reserve .main-visual-links__icon {
    inline-size: calc(24 / 16 * 1rem);
  }
  .main-visual-links__link.suita-densi .main-visual-links__icon {
    margin-block: calc(4.5 / 16 * 1rem);
  }


.main-visual-links__link:hover,
.main-visual-links__link:focus-within {
  border-color: var(--border-inverse);
  background-color: var(--color-background-hover);
  outline: 4px var(--border-focus) solid;
}


.contents {
  max-width: var(--top-container-content);
  margin-inline: auto;
  padding-inline: var(--space-16, 16px);
}
.top-subtitle {
  margin-block-end: var(--space-32);
  padding-block-start: var(--space-8);
  color: var(--color-text-bold);
  font-size: var(--font-size-36);
  font-weight: var(--fontweight-medium);
  letter-spacing: var(--tracking-4);
  text-align: center;
}

/*------------------------
	top-info
	------------------------*/
.information__wrapper {
  display: grid;
  grid-template-columns: var(--top-left-content-width) 1fr;
  gap: var(--space-12);
  padding-block: var(--space-32);
}

.information__container {
  /* layout */
  width: 100%;
}

.top-info__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-12);
  justify-content: space-between;
  width: 100%;
  height: auto;
}

[role="tabpanel"].is-hidden {
  display: none;
}

.top-info__tabs[role="tablist"] button {
  /* layout */
  display: grid;
  place-items: center;
  /* size */
  width: 100%;
  height: auto;
  min-height: 63px;
  /* spacing */
  padding-block: var(--space-6);
  /* style */
  background: var(--color-background-library-close);
  border: none;
  border-radius: var(--rounded-12);
  border-end-start-radius: unset;
  border-end-end-radius: unset;
  transition: all 0.2s ease-in;
  cursor: pointer;
  /* typography */
  color: var(--color-text-placeholder);
  font-size: var(--font-size-20);
  font-weight: var(--fontweight-medium);
  line-height: 1.5;
  letter-spacing: var(--tracking-5);
  white-space: nowrap;
}

.top-info__tabs [role="tab"][aria-selected="false"]:hover,
.top-info__tabs [role="tab"][aria-selected="false"]:focus-within {
  background: var(--color-background-tab);
  border-color: var(--border-focus);
  color: var(--color-text-title);
}

.top-info__tabs [role="tab"][aria-selected="true"] {
  position: relative;
  background: var(--color-background-section);
  color: var(--color-text-default);
  cursor: default;
}

.top-info__content {
  padding: var(--space-16);
  /* style */
  background: var(--color-background-section);
  border-radius: var(--rounded-12);
  border-start-start-radius: unset;
  border-start-end-radius: unset;
}


.top-info__panel[role="tabpanel"] {
  display: grid;
  place-items: center;
  width: 100%;
  padding-block: var(--space-8) var(--space-24);
  padding-inline: var(--space-24);
  border: var(--border-width-md) var(--border-subtle) solid;
  border-radius: var(--rounded-8);
  background-color: var(--color-background-default);
}

.top-info__panel[role="tabpanel"] > div {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-24, 24px);
  width: 100%;
  height: min-content;
}


.top-info__foot {
  margin-block-start: var(--space-32);
}


/*------------------------
各館カレンダー
	------------------------*/
.info-calendar {
  border: none;
  background: var(--color-background-section);
}
  .info-calendar__inner {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: calc(92 * var(--rem)) 1fr;
  }
    .info-calendar__tabs {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }
      .info-calendar__tab {
        line-height: 1.6;
        padding-block: var(--space-8);
        border: var(--border-width-md) var(--border-subtle) solid;
        border-radius: var(--rounded-6);
        background: var(--color-background-default);
        color: var(--color-text-placeholder);
        font-size: var(--font-size-18);
        letter-spacing: var(--tracking-6);
        cursor: pointer;
        &:hover,
        &:focus-within {
          background: var(--color-background-hover);
        }
      }
      .info-calendar__tab[role="tab"][aria-selected="true"] {
        color: var(--color-text-default);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--chuoh {
        border-color: var(--category-border-chuoh);
        background-color: var(--category-bg-chuoh);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--senri {
        border-color: var(--category-border-senri);
        background-color: var(--category-bg-senri);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--sankusu {
        border-color: var(--category-border-sankusu);
        background-color: var(--category-bg-sankusu);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--esaka {
        border-color: var(--category-border-esaka);
        background-color: var(--category-bg-esaka);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--chisato {
        border-color: var(--category-border-chisato);
        background-color: var(--category-bg-chisato);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--senrigaoka {
        border-color: var(--category-border-senrigaoka);
        background-color: var(--category-bg-senrigaoka);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--kento {
        border-color: var(--category-border-kento);
        background-color: var(--category-bg-kento);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--kitasenri {
        border-color: var(--category-border-kitasenri);
        background-color: var(--category-bg-kitasenri);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--yamada-st {
        border-color: var(--category-border-yamada-st);
        background-color: var(--category-bg-yamada-st);
      }
      .info-calendar__tab[role="tab"][aria-selected="true"].category--yamada-br {
        border-color: var(--category-border-yamada-br);
        background-color: var(--category-bg-yamada-br);
      }
    .info-calendar__wrapper {
      display: grid;
      grid-template-rows: 1fr auto;
      gap: var(--space-4);
      padding-block-end: var(--space-28);
    }
      .info-calendar__panel-inner {
        display: grid;
        gap: var(--space-12);
        grid-template-rows: auto 1fr;
        block-size: 100%;
        padding: var(--space-8);
        background-color: #DDD;
        border-radius: var(--rounded-4);
      }
        .info-calendar__ttl {
          padding-block: var(--space-6);
          padding-inline: var(--space-16);
          background-color: var(--color-background-default);
          border-radius: var(--rounded-6);
        }
          .info-calendar__default-txt {
            line-height: 1.7;
            letter-spacing: var(--tracking-6);
          }
          .info-calendar__default-txt-l {
            display: block;
            line-height: 1.5;
            font-size: var(--font-size-24);
            letter-spacing: var(--tracking-5);
            text-align: center;
          }
      .info-calendar__panel-info {
        display: flex;
        justify-content: center;
        gap: var(--space-12);
      }
        .info-calendar__panel-info__item {
          display: flex;
          align-items: center;
          gap: var(--space-6);
        }
          .info-calendar__panel-info__item::before {
            content: "";
            inline-size: calc(24 * var(--rem));
            aspect-ratio: 1;
          }
          .info-calendar__panel-info__item.open::before {
            border-radius: var(--rounded-full);
            background: #F4B4D0;
          }
          .info-calendar__panel-info__item.event::before {
            background: #DCE49C;
          }
          .info-calendar__panel-info__label {
            line-height: 1;
            font-size: var(--font-size-14);
          }
    .info-calendar__event {
      line-height: 1.3;
      margin-block-start: var(--space-12);
      padding-block: var(--space-18);
      padding-inline: var(--space-14);
      background: var(--color-background-default);
      letter-spacing: var(--tracking-6);
    }


/*------------------------
アイコンリンク
	------------------------*/
.icon-link {
  padding-block: var(--space-64);
  background: var(--color-background-top-main-visual);
}
  .icon-link__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--banner-width), 1fr));
    gap: var(--space-12);
  }
    .icon-link__link {
      display: grid;
      gap: var(--space-8);
      padding: var(--space-16);
      outline: var(--border-width-xl) transparent solid;
      border: var(--border-width-lg) var(--border-subtle) solid;
      border-radius: var(--rounded-12);
      background-color: var(--color-background-default);
      text-align: center;
      transition: all .2s ease 0s;
      &:hover,
      &:focus-within {
        outline-color: var(--border-subtle);
        border-color: transparent;
        background: var(--color-background-hover);
      }
    }
      .icon-link__icon img {
        vertical-align: top;
        inline-size: 100%;
        max-inline-size: calc(166 / 16 * 1rem);
      }
      .icon-link__label {
        line-height: 1.2;
        color: var(--color-text-title);
        font-weight: var(--fontweight-medium);
        font-size: var(--font-size-22);
        letter-spacing: var(--tracking-5);
      }

/*------------------------
バナーリンク
	------------------------*/
.banner-link {
  padding-block: var(--space-64);
}
  .banner-link__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--banner-width), 1fr));
    gap: var(--space-12);
  }
    .banner-link__link {
      display: grid;
      gap: var(--space-6); 
      text-align: center;
      &:hover,
      &:focus-within {
        text-decoration: underline;
        text-underline-offset: calc(4 / 16 * 1em);;
      }
    }
    .banner-link__img {
      inline-size: 100%;
      overflow: hidden;
      aspect-ratio: 1 / .75;
      border-radius: var(--rounded-8);
    }
      .banner-link__img img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform .2s ease-in 0s;
      }
      .banner-link__link:hover .banner-link__img img {
        transform: scale(1.05);
      }
    .banner-link__label {
      line-height: 1.6;
      font-size: var(--font-size-18);
      letter-spacing: var(--tracking-6);
    }

/*------------------------
SNSリンク
	------------------------*/
.sns-link {
  padding-block: var(--space-64);
  background: var(--color-background-footer);
}
  .sns-link__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(357 / 16 * 1rem), 1fr));
    gap: var(--space-24);
  }
    .sns-link__link {
      display: grid;
      grid-template-rows: calc(48 / 16 * 1rem) 1fr;
      align-items: center;
      position: relative;
      overflow: hidden;
      block-size: 100%;
      padding: var(--space-20);
      padding-inline: var(--space-32);
      border: var(--border-width-md) #999 solid;
      border-radius: var(--rounded-12);
      background: var(--color-background-default);
      outline: var(--border-width-xl) transparent solid;
      text-align: center;
      box-shadow: var(--elevation-02);
      transition: .2s ease 0s;
      &::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: calc(16 / 16 * 1rem);
        block-size: 100%;
        background: var(--border-title);
      }
      &::after {
        content: "";
        position: absolute;
        inset-inline-end: calc(12 / 16 * 1rem);
        inset-block-end: calc(10 / 16 * 1rem);
        inline-size: calc(17 / 16 * 1rem);
        block-size: calc(17 / 16 * 1rem);
        border-inline-end: calc(4 / 16 * 1rem) var(--border-accent) solid;
        border-block-start: calc(4 / 16 * 1rem) var(--border-accent) solid;
        transform: rotate(45deg)
      }
      &:hover,
      &:focus-within {
        outline-color: var(--border-subtle);
        border-color: var(--border-inverse);
        background: var(--color-background-hover);
      }
      &.mail {
        padding-block: var(--space-16);
      }
    }
      .sns-link__icon img {
        inline-size: auto;
        block-size: calc(48 / 16 * 1rem);
      }
      .sns-link__label {
        line-height: 1;
        font-weight: var(--fontweight-bold);
        font-size: var(--font-size-22);
        letter-spacing: var(--tracking-5);
      }
        .sns-link__txt-sub {
          display: block;
          line-height: 1.2;
          font-size: .8em;
        }

/*------------------------
Textlink
	------------------------*/
.text-links {
  display: none;
}
.text-links__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  place-items: center;
  gap: var(--space-12);
}
.text-links__item {
  width: 100%;
}
.text-links__link {
  display: grid;
  padding-block: var(--space-24);
  padding-inline: var(--space-12);
  border: var(--border-width-lg) var(--border-subtle) solid;
  outline: var(--outline-width-xl) transparent solid;
  border-radius: var(--rounded-8);
  background: var(--color-background-default);
  transition: all 0.3s ease-in-out;
}
  .text-links__label {
    line-height: 1.2;
    color: var(--color-text-title);
    font-weight: var(--fontweight-medium);
    font-size: var(--font-size-16);
    letter-spacing: var(--tracking-6);
  }
.text-links__link:hover,
.text-links__link:focus-within {
  background: var(--color-background-hover);
  border-color: var(--border-inverse);
  outline-color: var(--border-focus);
}
  .text-links__link:hover::after,
  .text-links__link:focus-within::after {
    border-color: var(--border-subtle);
    filter: none;
  }

/*------------------------
Adbanner
	------------------------*/
.adbanner {
  padding-block: var(--space-64);
}
.adbanner__container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-64);
  align-items: center;
}
  .adbanner__title {
    line-height: 1.2;
    padding-block: var(--space-4);
    padding-inline: var(--space-16);
    background-color: var(--color-background-theme);
    font-weight: var(--fontweight-medium);
    font-size: var(--font-size-22);
    letter-spacing: var(--tracking-5);
  }
  .adbanner__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(197 / 16 * 1rem), 1fr));
    grid-auto-flow: row;
    gap: var(--space-40);
  }
  .adbanner__link {
    display: block;
    overflow: hidden;
    border-radius: var(--rounded-12);
    box-shadow: var(--elevation-02);
  }
    .adbanner__link img {
      vertical-align: top;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: all 0.2s ease-in 0s;
    }
  a.adbanner__link:hover img,
  a.adbanner__link:focus-visible img {
    transform: scale(1.05);
    opacity: 0.8;
  }
  
.calendar table {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /* border: 5px solid #ccc; */
  border-spacing: 0;
  background: #fff;
}
.calendar table thead {
  background: #f5f5f5;
}
.calendar .year_month td {
  padding: 0.4em 0 0.3em;
  font-size: 1.2em;
  font-weight: 600;
  background-color: #f5f5f5;
}
.calendar tr.year_month th {
  font-size: var(--font-size-24);
}
.calendar thead .calendar_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: auto;
  border: 2px #cdcdcd solid;
  border-radius: 4px;
  cursor: pointer;
}
.calendar thead .calendar_btn[data-flg='next'] img {
  transform: rotate(180deg);
}
.calendar .week th {
  width: 2em;
  height: 2em;
  background-color: #f5f5f5;
  vertical-align: center;
  border-bottom: 1px #ccc solid;
  font-size: var(--font-size-20);
}
.calendar .week th:nth-child(1) {
  background-color: #f7abab;
}
.calendar .week th:nth-child(7) {
  background-color: #7fb3fe;
}
.calendar .day {
  height: 2.5em;
  font-size: var(--font-size-20);
}
.calendar .day td {
  position: relative;
  width: 2em;
  height: 2.5em;
  color: #333;
  background-color: #ffffff;
  z-index: 2;
}
.calendar .day td span {
  position: relative;
  z-index: 2;
}
.calendar .day td:after {
  position: absolute;
  content: '';
  display: block;
  top: calc(50% - 0.95em);
  left: calc(50% - 1em);
  width: 2em;
  height: 2em;
  z-index: -1;
}
.calendar .day .red {
  color: #8f0f0f;
}
.calendar .day .blue {
  color: #00468c;
}
.calendar .day .closed {
}
.calendar .day .closed:after {
  background-color: #efb5d0;
  border-radius: 50%;
}
.calendar .day .event {
}
.calendar .day .event:after {
  background-color: #dbe39b;
}
.btn_calender {
  text-align: center;
}
.calendar img {
  max-width: 192px;
}
.calendar .attention span {
  position: relative;
  padding-left: 2em;
}
.calendar .attention span:before {
  position: absolute;
  content: '';
  display: block;
  top: 5px;
  width: 10px;
  left: 0px;
  height: 10px;
  background: #fface4;
  border: 1px solid #fff;
}

.calendar-note {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-24, 24px);
  margin-inline: auto;
}

.calendar-note__item {
  display: inline-flex;
  column-gap: var(--space-4, 4px);
  align-items: center;
  margin: 0;
  /* style */
  font-size: var(--font-size-19);
  font-weight: var(--fontweight-regular);
}

.calendar-note__item:first-of-type:before {
  /* layout */
  content: '';
  display: inline-block;
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
  /* style */
  background: #f4b4d0;
  border-radius: 50%;
}

.calendar-note__item:last-of-type:before {
  /* layout */
  content: '';
  display: inline-block;
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
  /* style	 */
  background: #dce49c;
}

.calendar_btn {
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* style */
  background: var(--color-background-default);
  border: 2px solid #cdcdcd;
  border-radius: var(--rounded-4, 4px);
  cursor: pointer;
  /* transition */
  transition: background-color 0.3s ease;
}

.calendar_btn[data-flg='next']::before {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-start: 30%;
  width: 8px;
  height: 8px;
  /* style */
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

.calendar_btn[data-flg='prev']::before {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-start: 40%;
  width: 8px;
  height: 8px;
  /* style */
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(-135deg);
}

.calendar_btn:hover {
  background-color: var(--color-background-hover);
}

.toggle-login {display:none;inset-block-end: var(--space-16);inset-inline-start: 100px;min-height: 0;position: fixed;height: var(--toggle-size-mobile);font-size: 0.9em;}
.toggle-login .mylibrary-login__link{min-inline-size: calc(140 / 16 * 1rem);}
@media (width < 1112px) {.toggle-login{display:block;}}


@media (width < 1180px) {
  .main-visual {
    padding-block: 0 var(--space-24);
  }
    .main-visual__wrapper {
      gap: var(--space-8);
      padding-inline: 0;
    }
      .main-visual__head {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
        .slider-container {
          /* order: -1; */
          padding-inline: 0;
        }
          .slide {
            border-radius: 0;
          }
          .slick-arrow {
            display: none!important;
          }
          .slide-control {
            padding-block-end: 0;
          }
          .slick-dots {
            margin-block-start: var(--space-12);
            justify-content: flex-start;
          }
        .main-visual__inner {
          padding-inline: var(--space-4);
        }
      .main-visual__body {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
        .main-visual__search {
          margin-block-start: var(--space-8);
        }
  .contents {
    padding-inline: 0;
  }
    .information__wrapper {
      grid-template-columns: 1fr;
      padding-block: var(--space-24) var(--space-32);
      gap: var(--space-12);
    }
      .top-info__tabs {
        justify-content: center;
        gap: var(--space-4);
      }
        .top-info__tabs[role="tablist"] button {
          min-block-size: 0;
          padding-block: var(--space-12);
          line-height: 1.7;
          font-size: var(--font-size-16);
        }
      .top-info__panel[role="tabpanel"] {
        padding-inline: var(--space-12);
      }
        .archive-nav__link {
          font-size: var(--font-size-18);
        }
  .info-calendar {
    margin-inline: var(--space-8);
  }
  .top-info__content {
    margin-block: 0;
    padding: var(--space-8);
    padding-block-end: var(--space-32);
    border-radius: 0;
  }
  

  :root {
    --banner-width: calc(200 / 16 * 1rem);
  }
  .icon-link {
    padding-inline: var(--space-8);
    padding-block: var(--space-24) var(--space-40);
  }
    .icon-link__list {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-8);
    }
      .icon-link__link {
        block-size: 100%;
        padding-inline: var(--space-8);
      }
        .icon-link__label {
          font-size: var(--font-size-18);
          letter-spacing: var(--tracking-4);
        }
        
  .banner-link {
    padding-block: var(--space-24) var(--space-40);
    padding-inline: var(--space-8);
  }
        
  .text-links {
    display: block;
    padding-block: var(--space-32) var(--space-48);
    padding-inline: var(--space-8);
  }
  
  .sns-link {
    padding-block: var(--space-32) var(--space-48);
    padding-inline: var(--space-10);
  }

  .adbanner-section {
    padding-block: var(--space-64, 64px);
  }
}
@media (width < 768px) {
  .open-info {
    padding-inline: var(--space-6);
  }
  .open-info__list {
    gap: var(--space-8);
  }
  .open-info__label {
    font-size: var(--font-size-14);
    padding-block: var(--space-2);
  }
  .open-info__dscrpt {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .open-info__status-label {
    inline-size: 100%;
    line-height: 1.2;
    font-size: var(--font-size-14);
    text-align: center;
  }
  .main-visual-frame {
    padding-block: var(--space-8);
  }
  .news-important {
    padding-block: var(--space-8);
  }
  .news-important__title {
    padding-block: var(--space-6);
  }
  .news-important__item {
    padding-block: 0 var(--space-6);
    padding-inline-start: calc(24 / 16 * var(--font-value));
  }
  .news-important__item::before {
    inset-block-start: calc(var(--space-6) + (8 / 16 * var(--font-value)));
  }
  
  .main-visual__search-inner {
    gap: var(--space-8);
    grid-template-columns: 1fr auto;
  }
    .search-option {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      padding: 0;
      padding-block-end: var(--space-8);
      text-align: center;
    }
      .search-option .btn-txt {
        min-inline-size: calc(184 / 16 * 1rem);
      }
  .main-visual__search-footer {
    display: none;
  }
  
  .info-calendar {
    gap: var(--space-12);
    padding-block: var(--space-16);
  }
    .info-calendar__inner {
      grid-template-columns: 1fr;
    }
      .info-calendar__tabs {
        flex-direction: row;
        flex-wrap: wrap;
      }
        .info-calendar__tab {
          padding-inline: var(--space-8);
          line-height: 1.2;
          font-size: var(--font-size-14);
        }
      .info-calendar__wrapper {
        padding-block-end: 0;
      }

  .sns-link__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
    .sns-link__link {
      padding-inline: var(--space-8);
    }
      .sns-link__link::before,
      .sns-link__link::after {
        display: none;
      }
      .sns-link__label {
        font-size: var(--font-size-14);
      }
  
  .mylibrary-login {
    padding-block-end: var(--space-16);
  }
  
  .main-visual-links {
    margin-block-start: var(--space-8);
    gap: var(--space-12);
  }
    .main-visual-links .main-visual-frame {
      /* padding-block-end: var(--space-16); */
      padding-block-start: var(--space-6);
    }

  .text-links__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
  
  .adbanner {
    padding-block: var(--space-32) var(--space-48);
    padding-inline: var(--space-16);
  }
    .adbanner__container {
      grid-template-columns: 1fr;
      gap: var(--space-24);
    }
      .adbanner__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-24);
      }
  @media (width < 1180px) {
    .adbanner {
      padding-block-end: var(--space-64);
    }
  }

}

@media (width < 480px) {
  .sns-link__list {
    grid-template-columns: 1fr;
  }
}

@media (width < 428px) {
  .open-info__list {
    /*font-size: 3.8vw;*/
  }
}

/*並び順*/
@media (width > 1180px){
.open-info{order:1;}
.important-news{order:3;}
.mylibrary-links{order:4;}
.slider-container{order:2;}
}

/*追記*/
:root{
--font-size-12:calc(12 / var(--fontsize-base) * var(--font-value));
--font-size-13:calc(13 / var(--fontsize-base) * var(--font-value));
}
.pc{display:block;}.sp{display:none;}
.main-visual-links__label2 {display:inline-grid;grid-template-columns:auto 1fr;gap:var(--space-8);place-items:center;}
.news-important__item{padding-inline-start:0;border-bottom:1px dotted #666;}
.news-important__item::before{display:none;}

@media (width < 1180px){
  .news-important__item br{display:none;}
  .mylibrary-login__outer{grid-template-columns:50% 1fr;}
  .mylibrary-login__head{margin-left:auto;}
  .mylibrary-login__body{margin-right:auto;}
  .mylibrary-login__ttl{text-align:left;}
  .banner-link__list,.icon-link__list {grid-template-columns: repeat(3, 1fr);}
}
@media (width < 768px) {
  .pc {display:none;}
  .sp {display:block;}
  .top-ttl{font-size: var(--font-size-16);}
  .news-important__item br {display:block;}
  .main-visual__search-inner {grid-template-columns:1fr auto auto;min-height:44px;}
  .main-visual__search .main-visual-frame__head {display:grid;grid-template-columns:1fr auto;gap:1rem;}
  .search-option {grid-row:unset;grid-column:unset;padding-block-end:0;}
  .search-option .btn-txt {min-inline-size:unset;padding:0;border:none;}
  .main-visual-frame.news-important {gap:6px;padding-inline:var(--space-8);}
  .main-visual-frame {gap:var(--space-8);padding-block-end:var(--space-6);}
  .main-visual-links__link.suita-densi,
  .main-visual-links__link.chuoh-reserve {}
  .main-visual-links__ttl {font-size:var(--font-size-13);}
  li.main-visual-links__item {display:block;}
  .open-info__status {inline-size:calc(16 / 16 * 1rem);}
  .open-info__dscrpt {flex-wrap:unset;padding-block:var(--space-2);}
  .open-info__status-label {text-align:left;width:2.2em;}
  .mylibrary-login__outer {grid-template-columns:1fr;}
  .mylibrary-login__head {margin-left:0;width:100%;}
  .mylibrary-login__body {margin-right:0;}
  .mylibrary-login__ttl {line-height:1.2;padding-block:var(--space-4);background:var(--color-background-theme);font-weight:var(--fontweight-medium);font-size:var(--font-size-16);letter-spacing:var(--tracking-5);text-align:center;}
  .mylibrary-login__ttl span.sp {font-size:12px;display:inline-block;}
  .mylibrary-links .mylibrary-login .main-visual-frame__head {display:none;}
  .gnav__item > a {padding-block:var(--space-10);}
  .icon-link__label,
  .banner-link__label {font-size:var(--font-size-12);}
  .ticker {max-height:6em;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
  .ticker li {padding-inline-start:4px;font-size:var(--font-size-14);display:block;}
  .ticker .news-important__item::before {display:none;}
  .top .blc_search .search_wrap_inner input[type="text"] {font-size:var(--font-size-16);}
  .adbanner__title {font-size:var(--font-size-16);}
  .archive-nav__category{padding-block: var(--space-4, 4px);}
  .archive-nav__category,
  .archive-nav__time,
  .archive-nav__link {font-size: var(--font-size-14);}
  .top-info__tabs[role="tablist"] button{padding-block: var(--space-6);}
   .top .blc_search .search_wrap_inner input[type="text"]{font-size:var(--font-size-13);}
}