@charset "utf-8";
/*------------------------------------------------*/
/*★ 買い方ガイドページのみスタイル設定 ★*/
#reservation {
  --title-gap-bottom: var(--default-gap-16);
  .section__inner {
    .is-size-sp & {
      width: var(--default-width2);
    }
  }
}
.reservation-contents {
  background: #fff;
  border: var(--default-border-black);
  --reservation-inner-y-gap: var(--default-gap-32);
  --reservation-item-gap: var(--default-gap-24);
  --reservation-border: 1px dashed #000;
  --reservation-border-inner-gap: var(--default-gap-8);
  padding: var(--reservation-inner-y-gap) 0;
  .is-size-sp & {
    border-left: none;
    border-right: none;
    --reservation-inner-x-gap: min((20vw / 3.75), var(--default-gap-40));
    .reservation-intro,
    .reservation-detail__content {
      padding: 0 var(--reservation-inner-x-gap);
    }
  }
  .is-size-pc & {
    --reservation-inner-x-gap: var(--default-gap-40);
    padding: var(--reservation-inner-y-gap) var(--reservation-inner-x-gap);
  }
}

.reservation-advance {
  &:not(:last-child) {
    margin-bottom: var(--default-gap-16);
    .is-size-pc & {
      margin-bottom: var(--default-gap-24);
    }
  }
  .reservation-advance__title {
    font-weight: bold;
    color: var(--default-color-attention);
    text-align: center;
    font-size: var(--default-font-size-20);
    margin-bottom: var(--default-gap-16);
  }
  .reservation-advance__content {
    border: var(--default-border-black);
    text-align: center;
  }
  .reservation-advance__content--title {
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size: var(--default-font-size-20);
    padding: var(--default-gap-8);
  }
  .reservation-advance__content--detail {
    padding: var(--default-gap-8);
    .is-size-pc & {
      padding: var(--default-gap-16);
    }
  }
  .reservation-advance__content--detail--list {
    display: flex;
    justify-content: center;
    gap: 0 1em;
    flex-wrap: wrap;
  }
  .reservation-advance__content--detail--list--item {
    &:not(:last-child) {
      display: flex;
      align-items: center;
      gap: 1em;
      &::after {
        content: '';
        width: 1px;
        height: 1em;
        background: currentColor;
        rotate: 20deg;
      }
    }
  }
  .reservation-advance__content--detail--notes {
    --notes-item-font-size: var(--default-font-size-14);
    margin-top: var(--default-gap-4);
  }
}
.reservation-lineup-navi {
  &:not(:last-child) {
    margin-bottom: var(--default-gap-16);
  }
  display: grid;
  gap: var(--default-gap-8);
  .reservation-lineup-navi__item--link {
    height: 100%;
    border: 1px solid #adadad;
    display: grid;
    align-content: center;
    justify-items: center;
    border-radius: var(--default-radius-8);
    padding: var(--default-radius-16) var(--default-radius-24);
    text-align: center;
    &::after {
      content: var(--default-ico-arrow-right);
      font-family: var(--default-icon-ff);
      font-size: 1em;
      line-height: 1;
      font-weight: bold;
      width: 1em;
      height: 1em;
      rotate: 90deg;
    }
  }
  .reservation-lineup-navi__item--icon {
    font-size: 2.5em;
  }
  .reservation-lineup-navi__item--text--main {
    font-size: var(--default-font-size-18);
    font-weight: bold;
    display: block;
  }
  .is-size-sp & {
    .reservation-lineup-navi__item--link {
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: var(--default-gap-16);
    }
  }
  @media (width > 720px) {
    & {
      grid-template-columns: repeat(2, 1fr);
      .reservation-lineup-navi__item--link {
        &::after {
          margin-top: var(--default-gap-8);
        }
      }
      @media (width >= 1100px) {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--default-gap-24);
        .reservation-lineup-navi__item--link {
          min-height: 190px;
          justify-items: center;
          padding: var(--default-radius-24) var(--default-radius-8);
        }
        .reservation-lineup-navi__item--text--main:not(:only-child) {
          margin-top: var(--default-gap-8);
        }
      }
    }
  }
}

.reservation-detail {
  &[id*='online'] {
    --reservation-channel-color: var(--default-color-online);
  }
  &[id*='shop'] {
    --reservation-channel-color: var(--default-color-shop);
  }
  &[id*='tel'] {
    --reservation-channel-color: var(--default-color-tel);
  }
  &[id*='chat'] {
    --reservation-channel-color: var(--default-color-chat);
  }
  .base-button {
    --btn-bg: var(--reservation-channel-color);
  }
  margin-top: var(--default-gap-64);
  .is-size-sp & {
    &:nth-child(1 of .reservation-detail) {
      margin-top: var(--default-gap-40);
    }
  }
  .reservation-detail__title {
    background: var(--reservation-channel-color);
    color: #fff;
    font-size: var(--default-font-size-20);
    font-weight: bold;
    text-align: center;
    padding: var(--default-gap-16);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap-16);
    .reservation-detail__title--icon {
      font-size: 1.2em;
      line-height: 1;
      translate: 0 2px;
    }
  }
}
.reservation-detail__content {
  > [class*='reservation-detail__content--'] {
    margin-top: var(--reservation-item-gap);
  }
  .reservation-detail__content--text {
    + .reservation-detail__content--more {
      margin-top: var(--default-gap-8);
    }
  }
  .reservation-detail__content--alert {
    font-weight: bold;
    color: var(--default-color-attention);
    text-align: center;
    font-size: var(--default-font-size-18);
    padding: var(--reservation-border-inner-gap);
    border-top: var(--reservation-border);
    border-bottom: var(--reservation-border);
  }
  .reservation-detail__content--tel-lineup--item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2em;
    flex-wrap: wrap;
    font-size: var(--default-font-size-18);
    font-weight: bold;
    border-top: var(--reservation-border);
    padding: var(--reservation-border-inner-gap) 0;
    &:last-child {
      border-bottom: var(--reservation-border);
    }
    .reservation-detail__content--tel-lineup--item--number-text {
      color: var(--default-color-attention);
    }
  }
  .reservation-detail__content--button {
    gap: var(--reservation-item-gap);
  }
}