/*************************************************
top.css
**************************************************/
:root {
  --shadow-top-sec: 0 3px 6px rgba(218, 172, 172, .3);
  --rounded-top-sec: calc(14 * var(--rem));
}

.icon-btn {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  inline-size: fit-content;
  border: 1px var(--border-black) solid;
  border-radius: var(--rounded-full);
  padding-block: var(--space-10);
  padding-inline: var(--space-32);
  background: var(--color-background-default);
  color: currentColor;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  &:hover,
  &:focus-within {
    background: var(--color-background-hover);
  }
}
  .icon-btn__icon {
    inline-size: calc(28 * var(--rem));
  }
    .icon-btn__icon img {
      inline-size: 100%;
      vertical-align: top;
    }
  .icon-btn__label {
    font-size: var(--font-size-18);
    letter-spacing: var(--tracking-50);
  }
  
.icon-menu-link {
  display: grid;
  grid-template-columns: calc(56 * var(--rem)) 1fr;
  gap: var(--space-12);
  place-content: center;
  padding-block: var(--space-18);
  padding-inline: var(--space-16);
  border: 1px var(--border-subtle) solid;
  border-radius: var(--rounded-10);
  color: currentColor;
  text-decoration: none;
  transition: background-color 0.3s ease;
  &:hover,
  &:focus-within {
    background-color: var(--color-background-hover);
  }
}
  .icon-menu-link__icon {
    display: grid;
    place-content: center;
  }
    .icon-menu-link__icon img {
      vertical-align: top;
      max-inline-size: 100%;
    }
  .icon-menu-link__label {
    display: grid;
    align-items: center;
    font-size: var(--font-size-18);
  }
    .icon-menu-link__label-sub {
      display: inline-block;
      font-size: .7em;
    }
.icon-menu-link.narrow {
  grid-template-columns: calc(76 * var(--rem)) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-8);
  padding-inline: var(--space-8);
}

.link-img {
  display: inline-grid;
  grid-template-rows: auto;
  place-items: center;
  gap: var(--space-14);
  inline-size: 100%;
  max-inline-size: calc(250 * var(--rem));
  block-size: 100%;
  margin-inline: auto;
  color: currentColor;
  text-align: center;
  text-decoration: none;
}
  .link-img__img {
    inline-size: 100%;
    aspect-ratio: 1.6 / 1;
    overflow: hidden;
    margin-inline: auto;
    border-radius: calc(10 * var(--rem));
  }
    .link-img__img img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: all 0.3s ease;
    }
  .link-img__label {
    font-size: var(--font-size-18);
  }
.link-img:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
  .link-img:hover .link-img__img img {
    transform: scale(1.1);
  }
  
.link-btn {
  display: inline-grid;
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  align-items: center;
  max-inline-size: calc(250 * var(--rem));
  padding-block: var(--space-10);
  padding-inline: var(--space-16) var(--space-48);
  margin-inline: auto;
  border-radius: calc(12 * var(--rem));
  background: var(--color-blue-1);
  color: currentColor;
  font-size: var(--font-size-18);
  letter-spacing: var(--tracking-50);
  text-decoration: none;
  text-align: left;
  outline: 2px transparent solid;
  outline-offset: 1px;
  transition: all 0.3s ease;
  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(36 * var(--rem));
    margin-block: auto;
    inline-size: 0;
    block-size: calc(28 * var(--rem));
    border-inline-start: 1px var(--border-black) dashed;
  }
  &::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(14 * var(--rem));
    inset-block: 0;
    inline-size: calc(12 * var(--rem));
    block-size: calc(12 * var(--rem));
    margin-block: auto;
    background: url(../img/icon-arrow-right.png) center center no-repeat;
    background-size: contain;
  }
  &:hover,
  &:focus-within {
    outline-color: var(--color-blue-1);
    background-color: var(--color-background-hover);
  }
}

/*===========================
Important
=============================*/
.important-news {
  background: var(--color-background-accent);
  padding-block: var(--space-24, 24px);
  padding-inline: var(--space-16, 16px);
}

.important-news__container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-20);
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  /* style */
  background: var(--color-background-default);
  border-radius: var(--rounded-12, 12px);
  overflow: hidden;
}

.important-news__title {
  grid-column: 1;
  /* layout */
  display: grid;
  place-content: center;
  grid-template-rows: repeat(2, auto);
  gap: var(--space-4);
  height: 100%;
  padding-inline: var(--space-28) var(--space-18);
  /* style */
  background-color: var(--color-red-2);
  color: var(--color-text-inverse);
  /* typography */
  font-size: var(--font-size-17);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-50);
}
  .important-news__title-icon {
    text-align: center;
  }
  .important-news__title-icon img {
    inline-size: calc(38 * var(--rem));
  }

.important-news__list {
  grid-column: 2;
  display: grid;
  row-gap: var(--space-14);
  grid-auto-flow: row;
  padding-block: var(--space-24, 24px);
}

.important-news__item {
  position: relative;
  padding-inline-start: 0.8em;
}

.important-news__item a {
  position: relative;
  padding-inline-start: 0.8em;
  color: var(--color-text-bold);
  font-size: var(--font-size-17);
  font-weight: var(--fontweight-regular);
  letter-spacing: var(--tracking-50);
  text-decoration: none;
}

.important-news__item a::before {
  content: '';
  position: absolute;
  display: block;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: var(--rounded-full);
  background: var(--color-red-2);
}

.important-news__item a:hover,
.important-news__item a:focus-visible {
  text-decoration: underline;
}

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

.important-news__link {
  grid-column: 3;
  /* 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-12, 12px);
  padding-inline: var(--space-16, 16px) var(--space-40, 40px);
  background: var(--color-background-default);
  border: 1px var(--border-black) solid;
  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-16, 16px);
  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-red-1);
}

.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);
}

@media (width <= 768px) {
  .important-news__container {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .important-news__title {
    grid-column: 1;
    grid-row: 1;
    padding-block: var(--space-16, 16px);
    width: 100%;
  }

  .important-news__list {
    grid-column: 1;
    grid-row: 2;
    padding-inline: var(--space-16, 16px);
  }

  .important-news__link {
    grid-column: 1;
    grid-row: 3;
    margin: var(--space-16, 16px);
    margin-block-start: 0;
    justify-content: center;
  }
}

/*===========================
 info-section
=============================*/
.info-section {
  padding-block: var(--space-56) var(--space-48);
  padding-inline: var(--space-16);
  background: var(--color-neutral);
}
  .info-section__inner {
    display: grid;
    grid-template-columns: calc(440 * var(--rem)) 1fr;
    gap: var(--space-38);
    max-width: var(--container-content);
    margin-inline: auto;
  }
  .info-section__banner-list {
    display: grid;
    grid-template-rows: auto;
    gap: var(--space-24);
    margin-block-start: var(--space-30);
  }
    .info-section__banner-list a {
      transition: opacity 0.3s ease-in;
      &:hover,
      &:focus-within {
        opacity: .8;
      }
    }
      .info-section__banner-list a img {
        vertical-align: top;
        max-inline-size: 100%;
      }
.open-info {
  overflow: hidden;
  padding-block: var(--space-18);
  padding-inline: var(--space-24);
  border-radius: var(--rounded-top-sec);
  background: var(--color-background-default);
  box-shadow: var(--shadow-top-sec);
}
  .open-info__ttl {
    padding-block: var(--space-4);
    background: var(--color-blue-1);
    font-weight: var(--fontweight-medium);
    font-size: var(--font-size-24);
    text-align: center;
  }
  .open-info__today {
    margin-block: var(--space-20);
    font-size: var(--font-size-22);
    text-align: center;
  }
  .open-info__item {
    display: grid;
    grid-template-columns: calc(120 * var(--rem)) 1fr;
    gap: var(--space-16);
    padding-inline: var(--space-20);
  }
    .open-info__status {
      display: grid;
      grid-template-rows: auto;
      place-content: center;
      gap: var(--space-18);
      padding-block: var(--space-20) var(--space-16);
      border-radius: calc(var(--rounded-top-sec) / 2);
      background: var(--color-neutral-90);
    }
      .open-info__mark {
        display: grid;
        inline-size: calc(76 * var(--rem));
        aspect-ratio: 1;
        margin-inline: auto;
      }
        .open-info__mark-wrap {
          inline-size: 100%;
          block-size: 100%;
        }
          .open-info__mark-wrap.open {
            border: calc(10 * var(--rem)) var(--color-bluegreen-50) solid;
            border-radius: var(--rounded-full);
          }
          .open-info__mark-wrap.close{border:none;height:calc(10 * var(--rem));background:var(--color-bluegreen-50);align-self:center;}
      .status-badge {
        display: grid;
        text-align: center;
      }
        .status-badge__rubi {
          font-size: var(--font-size-14);
        }
        .status-badge__label {
          font-size: var(--font-size-24);
          letter-spacing: var(--tracking-150);
        }
          .status-badge__label ruby {
            ruby-align: center;
          }
            .status-badge__label rt {
              margin-bottom: .5em;
              letter-spacing: 0;
              font-size: .58em;
            }
      .open-info__heading {
        font-weight: normal;
        font-size: var(--font-size-20);
      }
      .open-info__heading-rubi {
        display: block;
        font-size: var(--font-size-14);
      }
      .open-info__heading-label {
        display: block;
      }
      .open-info__text {
        margin-block: 0 var(--space-8);
        font-size: var(--font-size-30);
        font-weight: var(--fontweight-medium);
      }
  .open-info__next-text {
    margin-block: var(--space-30) var(--space-10);
    font-size: var(--font-size-22);
    text-align: center;
  }
  .open-info__link {
    text-align: center;
  }

.info-tabs {
  display: flex;
  column-gap: var(--space-10);
}
  .info-tabs[role='tablist'] button {
    padding-block: var(--space-16);
    background-color: var(--color-background-default);
    color: var(--color-text-default);
    transition: all 0.3s ease-in;
  }
  .info-tabs [role='tab'][aria-selected='true'] {
    color: var(--color-text-inverse);
    background-color: var(--color-background-bold);
    &::after {
      border-top-color: var(--color-background-bold);
    }
    &:hover,
    &:focus-within {
      color: var(--color-text-inverse);
      background-color: var(--color-background-bold);
      &:after {
        border-top-color: var(--color-background-bold);
      }
    }
  }
.info-section__panel {
  overflow: hidden;
  padding-block: var(--space-16) var(--space-32);
  padding-inline: var(--space-28);
  margin-block-start: var(--space-12);
  border-radius: var(--rounded-top-sec);
  background: var(--color-background-default);
  box-shadow: var(--shadow-top-sec);
}
  .quick-search-form__inner {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
  }
    .quick-search-form__label {
      display: block;
      grid-column: 1 / 3;
      font-size: var(--font-size-24);
      font-weight: var(--fontweight-medium);
    }
    .quick-search .quick-search-form__input {
      padding-block: var(--space-16);
      padding-inline: var(--space-8);
      border: 1px var(--border-black) solid;
      border-radius: calc(6 * var(--rem));
      font-family: transparent;
      font-size: var(--font-size-16);
    }
    .quick-search .quick-search_bt {
      padding: var(--space-16); 
      padding-inline-start: var(--space-56);
      border: none;
      border-radius: calc(6 * var(--rem));
      background: url(../img/icon_glass_w.png) var(--space-16) center no-repeat;
      background-size: calc(34 * var(--rem)) auto;
      background-color: var(--color-background-bold);
      color: var(--color-text-inverse);
      font-family: transparent;
      font-size: var(--font-size-24);
      letter-spacing: var(--tracking-70);
      transition: background-color 0.3s ease-in-out;
    }

    .quick-search .quick-search_bt:hover{
      background-color: var(--color-background-hover);
      color: var(--color-bluegreen-10);
    }

    .info-section__menu-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-28) var(--space-36);
      margin-block: var(--space-24);
    }
      .info-section .icon-menu-link {
        block-size: 100%;
      }
      
    .info-section__sub-ttl {
      margin-block: var(--space-24) var(--space-4);
      font-size: var(--font-size-24);
      font-weight: var(--fontweight-medium);
    }
    .info-section__sub-ttl + p {
      margin-block: unset;
    }
@media (width < 1200px) {
  .info-section__inner {
    grid-template-columns: 1fr;
  }
    .open-info__item {
      inline-size: fit-content;
      margin-inline: auto;
    }
    .info-section__panel {
      padding-inline: var(--space-16);
    }
      .info-section__banner-list {
        grid-template-columns: repeat(auto-fill, minmax(calc(440 * var(--rem)), 1fr));
        text-align: center;
      }
      .info-section__menu-list {
        grid-template-columns: repeat(auto-fit, minmax(calc(298 * var(--rem)), 1fr));
        gap: var(--space-28);
      }
}
@media (width < 480px) {
  .open-info__item {
    padding-inline: unset;
  }
  .info-section__banner-list {
    grid-template-columns: 1fr;
  }
  .quick-search-form__label {
    font-size: var(--font-size-20);
  }
  .quick-search .quick-search-form__input {
    padding-block: var(--space-10);
  }
  .quick-search .quick-search_bt {
    font-size: var(--font-size-18);
    background-size: calc(18 * var(--rem));
    padding-block: var(--space-8);
    padding-inline: var(--space-32) var(--space-12);
    background-position: calc(12 * var(--rem)) center;
  }
}


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

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

.top-sec__title {
  width: fit-content;
  margin-block-end: var(--space-40);
  margin-inline: auto;
  text-box-trim: trim-both;
}
  .top-sec__title__label {
    display: grid;
    place-items: center;
    text-align: center;
  }
    .top-sec__title__label .ja {
      color: var(--color-text-bold);
      font-weight: var(--fontweight-regular);
      font-size: var(--font-size-40);
    }
    .top-sec__title__label .en {
      font-size: var(--font-size-16);
      font-weight: var(--fontweight-regular);
      text-transform: capitalize;
    }



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

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

[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: all 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-bold);
  color: var(--color-text-inverse);
}

[role='tab'][aria-selected='true'] {
  position: relative;
  background: var(--color-background-bold);
  color: var(--color-text-inverse);
  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-bold);
  color: var(--color-text-inverse);
  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: var(--color-background-bold);
  color: var(--color-text-inverse);
}

.top-article__list {
  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-inline: auto;
  padding-block-end: var(--space-36);
}

  .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-20);
    padding-inline: var(--space-26);
    &::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-55) 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-16);
  place-items: center;
  width: fit-content;
  margin-inline: auto;
  padding-block: var(--space-10);
  padding-inline: var(--space-20) var(--space-20);
  /* style */
  color: var(--color-text-default);
  background: var(--color-background-default);
  border: 1px var(--border-black) solid;
  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: var(--color-background-hover);
}

.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;
  }
}


.calendar-info {
  padding-block: var(--space-40);
  padding-inline: var(--space-16);
}
  .calendar-info__inner {
    display: grid;
    grid-template-columns: calc(368 * var(--rem)) 1fr;
    gap: var(--space-38);
    max-width: var(--container-content);
    margin-inline: auto;
  }
    .sns-banner__list {
      margin-block: var(--space-44);
    }
      .sns-banner__link img {
        max-inline-size: 100%;
        vertical-align: top;
      }
      .sns-banner__item +
      .sns-banner__item {
        margin-block-start: var(--space-24);
      }
      .sns-banner__link {
        transition: all 0.3s ease-in-out;
        &:hover {
          opacity: .8;
        }
      }
@media (width < 1200px) {
  .calendar-info__inner {
    grid-template-columns: 1fr;
  }
    .sns-banner__list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc(250 * var(--rem)), 1fr));
      gap: var(--space-24);
    }
      .sns-banner__item {
        text-align: center;
      }
      .sns-banner__item + .sns-banner__item {
        margin: unset;
      }
}


/*************************************************
 カレンダー
**************************************************/
.calendar {
  position: relative;
  min-width:300px;
  max-width: 600px;
  overflow:hidden;
  margin:0 auto;
}
  .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:.4em 0 .3em; font-size: 1.2em; font-weight: 600; background-color: #F5F5F5;}
      .calendar tr.year_month th {
        font-size: 137.5%;
      }
      .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: 112.5%;
      }
      .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: 125%;
      }
      .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% - 1em); left: calc(50% - 1em); width: 2em; height: 2em;z-index:-1;}
      .calendar .day .red { color: #8F0F0F;}
      .calendar .day .blue { color: #00468C;}
      .calendar .day .orange {}
      .calendar .day .orange: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;
  align-items: center;
  margin: 0;
  font-size: 118.75%;
}
  .calendar_note::before {
    content: "";
    display: inline-block;
    width: .84em;
    height: .84em;
    margin-right: .26em;
    border-radius: 50%;
    background: #F4B4D0;
  }


/*===========================
 pickup
=============================*/
.sec-pickup {
  padding-block: var(--space-40);
  padding-inline: var(--space-16);
}
  .sec-pickup__inner {
    inline-size: 100%;
    max-inline-size: var(--container-content);
    margin-inline: auto;
  }
    .pickup__list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(calc(250 * var(--rem)), 1fr));
      gap: var(--space-48);
      margin-block: var(--space-72) var(--space-56);
    }

        .pickup__list.three { grid-template-columns: repeat(3, 1fr);}

      .pickup__item {
        text-align: center;
      }
        .pickup__banner {
          display: inline-block;
          max-inline-size: calc(250 * var(--rem));
          margin-inline: auto;
        }

        .pickup__list.three .pickup__banner {
          max-inline-size: calc(300 * var(--rem));
        }
        .pickup__list.three .link-btn {
  max-inline-size: calc(300 * var(--rem));
  padding-block: var(--space-20);
  }
          .pickup__banner img {
            transition: all .3s ease;
          }
          .pickup__banner:hover img,
          .pickup__banner:focus-within img {
            opacity: .8;
          }
    .pickup__list +
    .pickup__list {
      margin-block-start: var(--space-56);
    }

    @media (width <= 877px) {
  .pickup__list.three {
    grid-template-columns: repeat(2, 1fr);
}
}

    @media (width <= 500px) {
  .pickup__list.three {
    grid-template-columns: repeat(1, 1fr);
}
}