/*************************************************
top.css
**************************************************/
/*===========================
Important
=============================*/
.important-news__container {
  display: grid;
  width: 100%;
  gap: var(--space-28);
  margin-bottom: var(--space-44);
  padding-block: var(--space-36);
  border: 2px var(--color-red-2) solid;
  border-radius: var(--rounded-20);
  overflow: hidden;
}

.important-news__title {
  text-align: center;
}
  .important-news__title__wrap {
    display: inline-grid;
    gap: var(--space-12);
    grid-template-columns: calc(38 / 16 * 1rem) 1fr;
    place-items: center;
  }
    .important-news__title__icon {
      display: grid;
      align-items: center;
    }
      .important-news__title__icon img {
        inline-size: 100%;
      }
    .important-news__title__label {
      color: var(--color-red-2);
      /* typography */
      font-size: var(--font-size-28);
      line-height: 1;
    }

.important-news
.news-list__category--important {
  color: var(--color-text-inverse);
  background: var(--color-red-2);
  letter-spacing: var(--tracking-50);
}


.important-news__link {
  place-self: center;
}

.important-news__link {
  /* layout */
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-8, 8px);
  width: fit-content;
  height: fit-content;
  margin-inline-end: var(--space-16, 16px);
  padding-block: var(--space-14);
  padding-inline: var(--space-30) var(--space-60);
  /* style */
  background: var(--color-red-1);
  border-radius: var(--rounded-full);
  color: var(--color-text-default);
  /* typography */
  font-size: var(--font-size-16);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-50);
  text-decoration: none;
  /* transition */
  transition: background-color 0.3s ease;
}

.important-news__link::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-18);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url(../img/icon-arrow-right.png) no-repeat center center / contain;
}

.important-news__link:hover,
.important-news__link:focus-visible {
  background-color: var(--color-background-hover);
}

.important-news__icon {
  grid-column: 2;
  grid-row: 1;
}

.important-news__link-text {
  /* sytle */
  color: var(--color--text-inverse);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-50);
}


/*===========================
 Main Content Area 
=============================*/
.main-content {
  /* layout */
  padding-block: var(--space-32);
  padding-inline: var(--space-16, 16px);
  /* style */
  background: var(--color-background-subtler);
}

.main-content__container {
  /* layout */
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
}

.main-content__layout {
  /* layout */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-40);
}

.search-nav {
  grid-column: 7 / span 6;
  grid-row: 3 / span 2;
}

.main-content__search {
  display: grid;
  align-items: center;
  /* layout */
  padding-block: var(--space-32);
  padding-inline: var(--space-40);
  /* style */
  background: var(--color-background-default);
  border-radius: var(--rounded-10);
  overflow: hidden;
}

/*===========================
 Quick Search
=============================*/
.quick-search-form__wrap {
  display: grid;
  row-gap: var(--space-12);
}

.quick-search__title {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-8, 8px);
  width: fit-content;
}

.quick-search-form__label {
  /* sytle */
  color: var(--color-text-bold);
  text-align: center;
  /* typography */
  font-size: var(--font-size-28);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-50);
  white-space: nowrap;
}

.quick-search-form__label-en {
  padding-inline-end: var(--space-14);
  /* style */
  color: var(--color-text-bold);
  text-align: center;
  /* typography */
  font-size: var(--font-size-17);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-100);
  text-transform: uppercase;
}

.quick-search-form__inner {
  /* layout */
  display: flex;
  column-gap: var(--space-8, 8px);
  width: 100%;
}

form input[type='text'].quick-search-form__input {
  /* layout */
  width: 100%;
  padding-block: var(--space-12, 12px);
  padding-inline: var(--space-16, 16px);
  /* style */
  border: 1px solid var(--border-black);
  border-radius: var(--rounded-6, 6px);
  background: var(--color-background-default);
  /* typography */
  font-size: var(--font-size-20);
  font-weight: var(--fontweight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-50);
  /* transition */
  transition: background-color 0.3s ease;
}

form input[type='submit'].quick-search_bt {
  width: fit-content;
  padding-block: var(--space-20);
  padding-inline: var(--space-16, 16px);
  margin: 0;
  /* style */
  background: var(--color-brown);
  border: none;
  border-radius: var(--rounded-6, 6px);
  color: var(--color-text-inverse);
  /* typography */
  font-size: var(--font-size-25);
  font-weight: var(--fontweight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-100);
  /* transition */
  transition: background-color 0.3s ease;
}

form input[type='text'].quick-search-form__input:hover,
form input[type='text'].quick-search-form__input:focus-visible {
  background-color: #d4e7ff;
}

form input[type='submit'].quick-search_bt:hover,
form input[type='submit'].quick-search_bt:focus-visible {
  background-color: #174179;
}


/*===========================
 main-content__right
=============================*/
.main-content__right {
  grid-column: 3 / span 2;
  display: grid;
  grid-template-columns: subgrid;
}
/*===========================
 search-nav
=============================*/

.search-nav__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  gap: var(--space-20) var(--space-32);
}

.search-nav__item {
  width: 100%;
}

.search-nav__link {
  /* layout */
  position: relative;
  display: flex;
  column-gap: var(--space-20);
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 68px;
  padding-block: var(--space-14);
  padding-inline: var(--space-14);
  /* style */
  color: var(--color-text-bold);
  background: var(--color-background-default);
  border-radius: var(--rounded-10, 10px);
  border: 3px solid transparent;
  text-decoration: none;
  /* typography */
  line-height: 1;
  letter-spacing: var(--tracking-50);
  /* transition */
  transition: border-color 0.3s ease, background-color 0.3s ease-in-out, color 0.3s ease;
}
  .search-nav__icon {
    display: grid;
    place-items: center;
    inline-size: calc(60 / 16 * 1rem);
    aspect-ratio: 1;
    border-radius: var(--rounded-full);
    background: var(--color-background-icon);
  }
    .search-nav__icon img {
      inline-size: calc(30 / 16 * 1rem);
    }
  .search-nav__label {
    line-height: 1.5;
    inline-size: calc(100% - (80 / 16 * 1rem));
    font-size: var(--font-size-20);
  }
    .search-nav__txt-wrap {
      display: inline-block;
    }
    .search-nav__label .login {
      display: inline-block;
      inline-size: 7em;
      text-align: center;
    }
.search-nav__link:hover,
.search-nav__link:focus-within {
  color: var(--color-text-bold);
  background-color: #9ee5f0;
  border-color: var(--border-inverse);
}

.search-nav__link--blue {
  column-gap: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-bluegreen-10);
  color: var(--color-text-inverse);
}
  .search-nav__img {
    inline-size: calc(64 / 16 * 1rem);
    block-size: calc(58 / 16 * 1em);
    border-radius: var(--rounded-10);
    overflow: hidden;
  }
    .search-nav__img img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  .search-nav__link--blue 
  .search-nav__label {
    font-weight: var(--fontweight-medium);
  }
    .search-nav__link--blue 
    .search-nav__txt-wrap {
      letter-spacing: -.1em;
    }
    


/*===========================
 open-info
=============================*/
.open-info {
  padding-block: var(--space-44);
  padding-inline: var(--space-16);
  background: var(--color-accent-6);
}
  .open-info__head {
    position: relative;
  }
    .open-info__ttl {
      position: relative;
      inline-size: fit-content;
      margin-inline: auto;
      padding-block: var(--space-12);
      padding-inline: var(--space-44);
      border-radius: var(--rounded-full);
      background-color: var(--color-background-drawer);
      font-size: var(--font-size-22);
      font-weight: var(--fontweight-regular);
      &::after {
        content: "";
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        inline-size: calc(28 / 16 * 1rem);
        block-size: calc(12 / 16 * 1rem);
        margin-inline: auto;
        background-color: var(--color-background-drawer);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
    .open-info__btn {
      display: inline-grid;
      grid-template-columns: calc(22 / 16 * 1rem) 1fr;
      gap: var(--space-8);
      align-items: center;
      position: absolute;
      inset-block-start: var(--space-4);
      inset-inline-end: 0;
      padding-block: var(--space-8);
      padding-inline: var(--space-16);
      border: 3px var(--border-accent) solid;
      border-radius: var(--rounded-10);
      background-color: var(--color-background-drawer);
      color: #0A3E72;
      font-weight: var(--fontweight-medium);
      text-decoration: none;
      transition: background-color 0.3s ease;
      &:hover,
      &:focus-within {
        background-color: var(--color-background-hover);
      }
    }
      .open-info__btn__icon {
        display: grid;
        align-items: center;
      }
        .open-info__btn__icon img {
          inline-size: 100%;
        }
      .open-info__btn__label {
        font-size: var(--font-size-18);
      }
  .open-info__body {
    margin-block-start: var(--space-32);
  }
    .open-info__list {
      display: grid;
      gap: var(--space-28) var(--space-16);
      grid-template-columns: repeat(auto-fill, minmax(calc(180 / 16 * 1rem), 1fr));
    }
      .open-info__inner {
        display: grid;
        grid-template-rows: 1fr auto auto;
        gap: var(--space-4);
        block-size: 100%;
        padding-block: var(--space-10) var(--space-18);
        padding-inline: var(--space-20);
        overflow: hidden;
        background-color: var(--color-background-default);
        outline: 3px transparent solid;
        border-radius: var(--rounded-10);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
        color: currentColor;
        text-align: center;
        text-decoration: none;
        transition: all 0.3s ease;
        &:hover,
        &:focus-within {
          outline-color: #4BB7C0;
        }
      }
        .open-info__term {
          align-self: center;
          line-height: 1.3;
          font-size: var(--font-size-18);
          color: var(--color-accent-7);
          font-weight: var(--fontweight-medium);
          transition: all 0.3s ease;
        }
        .open-info__info {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: var(--space-8);
          position: relative;
          min-block-size: calc(60 / 16 * 1em);
          padding-block: var(--space-10);
          border-radius: var(--rounded-10);
          background-color: var(--color-neutral-90);
          &::before {
            content: "";
            inline-size: calc(40 / 16 * 1rem);
            border-radius: var(--rounded-full);
          }
        }
          .open-info__info--open {
            &::before {
              aspect-ratio: 1;
              border: 6px var(--color-bluegreen-65) solid;
            }
          }
          .open-info__info--close {
            &::before {
              block-size: calc(6 / 16 * 1rem);
              background-color: var(--color-neutral-50);
            }
          }
          .open-info__info--close-day {
            &::before,
            &::after {
              block-size: calc(6 / 16 * 1rem);
              background-color: #D13E78;
              transform: rotate(45deg);
            }
            &::after {
              content: "";
              position: absolute;
              inset-inline-start: calc(50% - calc(44 / 16 * 1rem));
              inset-block: 0;
              inline-size: calc(40 / 16 * 1rem);
              margin-block: auto;
              border-radius: var(--rounded-full);
              transform: rotate(-45deg);
            }
          }
          .open-info__open-label {
            font-size: var(--font-size-20);
            transition: all 0.3s ease;
          }
        .open-info__info--mobile {
          grid-row: 2 / 4;
          background: none;
          &::before {
            display: none;
          }
        }
          .open-info__info--mobile
          .open-info__open-label {
            display: grid;
            inline-size: 100%;
            min-height: calc(70 / 16 * 1rem);
            padding-block: var(--space-10);
            background: #C8EFF2;
            border-radius: var(--rounded-10);
            font-size: var(--font-size-18);
          }
        .open-info__item--audiovisual
        .open-info__info--open {
          background: #D8F9E6;
          &::before {
            border-color: var(--color-accent-7);
          }
        }
        .open-info__time {
          padding-block-start: var(--space-6);
        }


/*===========================
 info-section
=============================*/
.info-section {
  /* style */
  background: var(--color-background-default);
  padding: var(--space-64, 64px) var(--space-16, 16px);
}

.info-section__container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-52);
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
}


/*===========================
 top-info
=============================*/
.infomation__container {
  /* layout */
  order: 2;
}

.top-info__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24, 24px);
  width: 100%;
}

.top-info__title {
  /* layout */
  position: relative;
  display: grid;
  grid-template-columns: calc(50 / 16 * 1rem) 1fr calc(50 / 16 * 1rem);
  place-items: center;
  width: fit-content;
  margin-inline: auto;
}
  .top-info__title__img img {
    inline-size: 100%;
  }
  .top-info__title__label {
    display: grid;
    place-items: center;
    text-align: center;
  }
    .top-info__title__label .en {
      color: #2465A6;
      font-size: var(--font-size-40);
      font-weight: var(--fontweight-regular);
    }
    .top-info__title__label .ja {
      color: var(--color-text-bold);
      font-weight: var(--fontweight-regular);
      font-size: var(--font-size-20);
    }



.top-info__tabs {
  display: flex;
  column-gap: var(--space-10);
}

.top-info__panel[role='tabpanel'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
  padding-inline: var(--space-24, 24px);
  width: 100%;
  height: min-content;
}
.top-info__panel[role='tabpanel'] .news-section__empty {
  inline-size: 100%;
}

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

[role='tablist'] button {
  /* layout */
  width: 100%;
  padding-block: var(--space-10);
  background: var(--color-neutral-90);
  border: none;
  border-radius: var(--rounded-full);
  transition: background-color 0.3s ease-in;
  cursor: pointer;
  /* style */
  color: var(--color-text-bold);
  /* typography */
  font-size: var(--font-size-18);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-50);
  white-space: nowrap;
}

/*[role='tablist'] button:hover,
[role='tablist'] button:focus-within {
  background: var(--color-background-hover);
}*/

[role='tab'][aria-selected='true'] {
  position: relative;
  background: var(--color-background-subtler);
  cursor: default;
}

[role='tab'][aria-selected='true']::after {
  content: '';
  position: absolute;
  z-index: calc(var(--stack-foreground) + 3);
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 9px solid var(--color-background-subtler);
  transition: border-top-color 0.3s ease-in;
}

[role='tab'][aria-selected='true']:hover::after,
[role='tab'][aria-selected='true']:focus-within::after {
  border-top-color: #90dce8;
}

.top-article__list {
  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-inline: auto;
}

  .top-article__item {
    /* layout */
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--space-6, 6px) var(--space-8);
    padding-block: var(--space-24);
    padding-inline: var(--space-28);
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 1px;
      inline-size: calc(100% - (var(--space-28) * 2));
      margin-inline: auto;
      border-block-end: 1px var(--color-neutral-50) solid;
    }
    &.top-article__item--important {
      background: #FAEFF2;
    }
    &.top-article__item--pickup {
      background: var(--color-accent-6);
    }
  }

.top-article__meta {
  /* layout */
  display: flex;
  column-gap: var(--space-12);
}

.top-article__date {
  /* layout */
  display: inline;
  width: fit-content;
  /* style */
  color: var(--color-text-bold);
  /* typography */
  font-size: var(--font-size-18);
  font-weight: var(--fontweight-regular);
  letter-spacing: var(--tracking-50);
  white-space: nowrap;
}

.top-article__category {
  /* layout */
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100px;
  height: 2em;
  padding-block: var(--space-4);
  /* style */
  border-radius: var(--rounded-full);
  color: var(--color-text-bold);
  /* typography */
  font-size: var(--font-size-15);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-20);
  text-box-trim: trim-both;
}

.top-article__title {
  grid-column: 1 / -1;
}

.top-article__link {
  grid-row: 2;
  position: relative;
  min-width: 0;
  /* sytle */
  color: var(--color-text-link);
  font-size: var(--font-size-18);
  font-weight: var(--fontweight-regular);
  text-decoration: none;
}

.top-article__link:hover,
.top-article__link:focus-within {
  text-decoration: underline;
}

.top-info__more {
  /* layout */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-24, 24px);
  place-items: center;
  width: fit-content;
  margin-inline: auto;
  padding-block: var(--space-12, 12px);
  padding-inline: var(--space-32, 32px) var(--space-16, 16px);
  /* style */
  color: var(--color-text-link);
  background: var(--color-background-subtler);
  border-radius: var(--rounded-full);
  /* typography */
  font-size: var(--font-size-17);
  font-weight: var(--fontweight-medium);
  text-decoration: none;
  /* transition	 */
  transition: background-color 0.3s ease-in-out;
}

.top-info__more:hover,
.top-info__more:focus-within {
  background: #90dce8;
}

.top-info__more::after {
  /* layout */
  content: '';
  width: 14px;
  height: 12px;
  /* style */
  background: url(../img/icon-arrow-right.png) no-repeat center center / contain;
}

@media (width <= 1080px) {
  .top-info__panel[role='tabpanel'] {
    padding-inline: 0;
  }
}

@media (width <= 767px) {
  .top-info__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: var(--space-16, 16px);
    padding-inline: var(--space-16, 16px);
  }

  .top-info__tab {
    width: 100%;
    text-align: center;
  }
}


/*===========================
 sub navigation
=============================*/
.info-section__nav {
  order: 1;
  inline-size: calc(320 / 16 * 1rem);
}
  .sub-nav__list {
    display: grid;
    gap: var(--space-20);
  }
    .sub-nav__link {
      display: grid;
      grid-template-columns: calc(50 / 16 * 1rem) 1fr;
      gap: var(--space-12);
      align-items: center;
      overflow: hidden;
      padding-block: var(--space-16);
      padding-inline: var(--space-18);
      border-radius: var(--rounded-10);
      background-color: var(--color-background-subtler);
      text-decoration: none;
      transition: all 0.3s ease-in-out;
      &:is(:hover, :focus-within) {
        background-color: var(--color-background-hover);
      }
    }
      .sub-nav__link__icon img {
        display: grid;
        place-content: center;
        inline-size: 100%;
      }
      .sub-nav__link__label {
        color: var(--color-text-bold);
        font-weight: var(--fontweight-regular);
        font-size: var(--font-size-20)
      }
        .sub-nav__link__txt-wrap {
          display: inline-block;
        }

    .sub-nav__item--banner
    .sub-nav__link {
      display: block;
      padding: unset;
      &:is(:hover, :focus-within) {
        opacity: .8;
      }
    }
      .sub-nav__item--banner
      .sub-nav__link__img {
        display: block;
      }
        .sub-nav__item--banner
        .sub-nav__link__img img {
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          vertical-align: top;
        }
    .sub-nav__item--dg-archive
    .sub-nav__link__icon {
      block-size: calc(54 / 16 * 1rem);
      border-radius: var(--rounded-10);
      overflow: hidden;
    }
      .sub-nav__item--dg-archive
      .sub-nav__link__icon img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        vertical-align: top;
      }
    .sub-nav__item--audiovisual
    .sub-nav__link {
      background-color: var(--categoyr-audiovisual-color);
      &:is(:hover, :focus-within) {
        background-color: var(--categoyr-audiovisual-hover);
      }
    }




/*===========================
links
=============================*/
.links {
  /* layout */
  display: grid;
  grid-auto-flow: row;
  row-gap: var(--space-60);
  width: 100%;
  padding-block: var(--space-60);
  padding-inline: var(--space-16, 16px);
  background: var(--color-accent-6);
}
  .links-list__list {
    /* layout */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-24) var(--space-40);
    width: 100%;
    max-width: var(--container-content);
    margin-inline: auto;
  }

  .links-list__link {
    /* layout */
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    place-items: center start;
    column-gap: var(--space-4, 4px);
    width: 100%;
    min-height: 85px;
    padding-inline: var(--space-24, 24px) var(--space-18);
    /* style */
    background: #C7DEF5;
    border-radius: var(--rounded-10, 10px);
    color: var(--color-text-bold);
    /* typography */
    font-size: var(--font-size-17);
    font-weight: var(--fontweight-medium);
    line-height: 1.2;
    letter-spacing: var(--tracking-50);
    text-decoration: none;
    /* transition */
    outline: 3px transparent solid;
    transition: outline-color 0.3s ease-in-out;
  }

  .links-list__link:hover,
  .links-list__link:focus-within {
    outline-color: var(--color-bluegreen-65);
  }

  .links-list__link::after {
    /* layout */
    content: '';
    width: 26px;
    height: 30px;
    background: url(../img/icon-arrow-deco.png) no-repeat center center / contain;
  }

@media (width <= 928px) {
  .links-list__list {
    justify-content: center;
    column-gap: var(--space-16, 16px);
  }
}

/*===========================
site-footer
=============================*/
.top .site-footer {
  margin-block-start: unset;
}

/*===========================
Responsive
=============================*/
@media (width <= 1180px) {
  .main-content__layout {
    /* layout */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24, 24px) var(--space-32, 32px);
  }
  .main-content__search {
    width: 100%;
    max-width: unset;
  }

  .info-section__container {
    grid-template-columns: 1fr;
  }
    .infomation__container {
      order: initial;
    }
    .info-section__nav {
      order: initial;
      inline-size: 100%;
    }
      .sub-nav__list {
        grid-template-columns: repeat(auto-fill, minmax(calc(320 / 16 * 1rem), 1fr));
      }
        .sub-nav__link {
          block-size: 100%;
        }
  .links-list__list {
    max-width: none;
  }
}


@media (width <= 768px) {
  .quick-search-form__wrap {
    flex-direction: column;
    row-gap: var(--space-16, 16px);
  }

  .search-nav__list {
    row-gap: var(--space-16);
    grid-template-columns: 1fr;
  }
  .search-nav__label .login {
    inline-size: auto;
  }
  
}

@media (width <= 576px) {
  .open-info {
    padding-inline: var(--space-4);
  }
    .open-info__head-inner {
      margin-block-start: var(--space-24);
      text-align: right;
    }
    .open-info__btn {
      position: static;
    }
    .open-info__list {
      grid-template-columns: repeat(auto-fill, minmax(calc(160 / 16 * 1rem), 1fr));
      gap: var(--space-16) var(--space-8);
    }

  .quick-search-form__label {
    /* typography */
    font-size: var(--font-size-22);
  }

  .top-info__more {
    font-size: var(--font-size-18);
  }

  .important-news__item a,
  .search-nav__link,
  #library-select,
  .quick-search-form__label-en,
  form input[type='submit'].quick-search_bt,
  [role='tablist'] button,
  .top-article__date,
  .top-article__link {
    /* typography */
    font-size: var(--font-size-16);
  }
  
  .top-article__meta {
    flex-wrap: wrap;
    row-gap: var(--space-8);
  }
  .top-article__date {
    inline-size: 100%;
  }
  .top-article__item {
    padding-inline: var(--space-8);
    &::after {
      inline-size: calc(100% - (var(--space-8) * 2));
    }
  }

  form input[type='text'].quick-search-form__input,
  .top-article__category {
    /* typography */
    font-size: var(--font-size-14);
  }

  .main-content__layout {
    gap: var(--space-24, 24px) var(--space-16, 16px);
  }

  .main-content__search {
    padding-inline: var(--space-8, 8px);
  }

  .quick-search-form__label-en {
    padding-block-end: unset;
  }

  form input[type='submit'].quick-search_bt {
    padding-block: var(--space-12, 12px);
    padding-inline: var(--space-12, 12px);
  }
}

.attention{color:#444;}
.open_attention{text-align:center;color:#f20000;font-weight:bold;}