@charset "utf-8";
/* BlackFriday 買い方ガイド専用CSS（PCSP共通）※フェア「買い方ガイド」流用 */
#footer-guide {
  &:not(:first-child) {
    margin-top: min((80vw / 7.5), 170px);
  }
  &:not(:last-child) {
    margin-bottom: min((104vw / 7.5), 74px);
  }
}
.is-sp #footer-guide .is-type-tab {
  background: #fff;
  width: 100%;
  .is-device-sp & {
    padding-bottom: calc(80vw / 7.5);
  }
}
.guide__title {
  font-size: min((42vw / 7.5), 30px);
  line-height: 1;
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-bottom: min((30vw / 7.5), 30px);
  .is-sp & {
    padding: calc(20vw / 7.5) 0 calc(26vw / 7.5);
    background: #000;
    color: #fff;
  }
}
/*タブナビ*/
.guide__list--wrapper {
  border-bottom: min((4vw / 7.5), 4px) solid #000;
}
.guide__list {
  display: flex;
  justify-content: space-evenly;
  transform: translateY(calc(10vw / 7.5));
  .is-pc & {
    transform: translateY(8px);
  }
}
.guide__list--item {
  background: #000;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: min((40vw / 7.5), 30px);
  line-height: 1.2;
  width: min((332vw / 7.5), 455px);
  padding: calc(13vw / 7.5) calc(10vw / 7.5) calc(24vw / 7.5);
  border: min((4vw / 7.5), 4px) solid #000;
  .is-pc & {
    text-indent: 1em;
    letter-spacing: 1em;
    padding: 9px 0 18px;
  }
  &[class*="--active"] {
    background: #fff;
    color: #000;
    position: relative;
    z-index: 1;
  }
}
/*コンテンツ*/
.guide__contents {
  background: #fff;
  position: relative;
  .is-pc & {
    border: 4px solid #000;
    border-top: none;
    padding: 45px 40px 60px;
  }
  &:not([class*="--active"]) {
    display: none;
  }
}
.is-sp .reservation-lead__content {
  padding: min((50vw / 7.5), 30px) min((30vw / 7.5), 20px);
}
/*予約前準備*/
.guide__contents--alert {
  margin-bottom: min((35vw / 7.5), 50px);
}
.guide__contents--alert--title {
  font-size: min((28vw / 7.5), 20px);
  color: #e60800;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: min((30vw / 7.5), 20px);
  .is-pc & {
    font-weight: bold;
    margin-bottom: 10px;
  }
  &::before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    background: no-repeat 0 0 / contain;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2054%2054%22%20style%3D%22enable-background%3Anew%200%200%2054%2054%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23e60800%3B%7D%3C%2Fstyle%3E%3Ctitle%3Eicon_warning%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%22%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M49.3%2C44L28.8%2C8C28.2%2C7%2C27%2C6.7%2C26%2C7.2c-0.3%2C0.2-0.6%2C0.4-0.7%2C0.7L4.7%2C44c-0.5%2C1-0.2%2C2.2%2C0.7%2C2.7%20c0.3%2C0.2%2C0.6%2C0.3%2C1%2C0.3h41.1c1.1%2C0%2C2-0.9%2C2-2C49.6%2C44.7%2C49.5%2C44.3%2C49.3%2C44z%20M27%2C43c-1.1%2C0-2-0.9-2-2s0.9-2%2C2-2s2%2C0.9%2C2%2C2%20S28.1%2C43%2C27%2C43z%20M29%2C33c0%2C1.1-0.9%2C2-2%2C2s-2-0.9-2-2V21c0-1.1%2C0.9-2%2C2-2s2%2C0.9%2C2%2C2V33z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin-right: .25em;
  }
}
.guide__contents--alert--content {
  text-align: center;
}
.guide__contents--alert--target {
  background: #000;
  color: #fff;
  font-size: min((35vw / 7.5), 19px);
  padding: min((5vw / 7.5), 7px);
  .is-pc & {
    font-weight: bold;
  }
}
.guide__contents--alert--texts {
  font-size: min((30vw / 7.5), 16px);
  padding: min((15vw / 7.5), 20px);
  border: 1px solid #000;
  border-top: none;
  .is-pc & {
    padding: 25px 10px 20px;
  }
}
.guide__contents--alert--list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.guide__contents--alert--item {
  margin: 0 .5em;
}
.guide__contents--alert--item::before {
  content: "●";
  margin-right: .25em;
}
.guide__contents--alert--notes {
  font-size: .9em;
  margin-top: 1em;
}
/*各予約方法リスト*/
.reservation-lead__content .notes__wrapper {
  font-size: min((22vw / 7.5), 14px);
  line-height: 1.4;
  .is-pc & {
    margin-top: 2em;
    text-align: right;
  }
  .notes {
    text-indent: -1em;
    padding-left: 1em;
    &::before {
      content: "※";
    }
  }
}
/*各予約方法内容*/
.reservation-list__content {
  &:empty {
    display: none;
  }
  .is-pc & {
    margin-top: 60px;
  }
  .guide__contents--alert--title {
    border: 1px dotted #b2b2b2;
    border-left: none;
    border-right: none;
    padding: .5em 0;
    margin: 1em 0;
  }
}
.reservation-list__content--title {
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: min((35vw / 7.5), 24px);
  height: min((96vw / 7.5), 60px);
  padding: 0 .8em;
  background: #eb4b50;
  .is-pc & {
    justify-content: center;
    font-weight: bold;
    margin-bottom: 15px;
  }
  &::before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    background: url("/cmn/icon/icon_pc_white.svg") no-repeat center center / contain;
    margin-right: .5em;
  }
}
.is-sp .reservation-list__content--texts {
  padding: min((25vw / 7.5), 25px) min((30vw / 7.5), 30px) min((80vw / 7.5), 60px);
}
.reservation-list__content--inner p:not([class]) {
  font-size: min((25vw / 7.5), 17px);
  line-height: 1.6;
  + p:not([class]) {
    margin-top: .5em;
  }
  small {
    display: inline-block;
    line-height: 1.5;
  }
}
/*SPデバイスの予約方法リスト*/
#pageApp.is-device-sp {
  .reservation-list__content {
    border-top: 1px solid;
    &:last-of-type {
      border-bottom: 1px solid;
    }
  }
  .reservation-list__content--texts {
    border-top: min((2vw / 7.5), 2px) solid #cfcfcf;
  }
  .reservation-list__title {
    padding: min((20vw / 7.5), 15px);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    [id^="online"] & {
      --icon: url("/cmn/icon/icon_pc.svg");
    }
    [id^="tel"] & {
      --icon: url("/cmn/icon/icon_tel.svg");
      --icon-size: 3.75em;
    }
    [id^="store"] & {
      --icon: url("/cmn/icon/icon_stores_his.svg");
    }
    [id^="chat"] & {
      --icon: url("/cmn/icon/icon_telephone_operator.svg");
    }
    &::before, &::after {
      content: "";
      background: no-repeat center center / cover;
    }
    &::before {
      background-image: var(--icon);
      width: 2.5em;
      height: 2.5em;
      margin-right: 1em;
    }
    &::after {
      width: 1em;
      height: 2.5em;
      background-image: url("/cmn/icon/icon_arrow_right_black.svg");
    }
    &[href^="#"]::after {
      transform: rotate(90deg);
    }
    &:not([class*="accordion"])::after {
      margin-right: .5em;
    }
    &[target="_blank"]::after {
      width: 1.5em;
      height: 1.5em;
      margin-right: .25em;
      background-image: url("/cmn/icon/icon_launch_black.svg");
    }
    &[class*="accordion"]::after {
      width: 2em;
      height: 2em;
      background-image: url("/cmn/icon/icon_add_black.svg");
    }
    &[class*="accordion"].is-open::after {
      background-image: url("/cmn/icon/icon_remove_black.svg");
    }
    .reservation-list__title--inner {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .reservation-list__title--text {
      font-size: min((35vw / 7.5), 20px);
      font-weight: bold;
    }
  }
}
/*PCデバイスの予約方法リスト*/
#pageApp:not(.is-device-sp) {
  .reservation-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    &:has(> :nth-child(3):last-child) {
      grid-template-columns: repeat(3, 1fr);
    }
    gap: 8px;
    @media(width <=960px) {
      max-width: 500px;
      margin: auto;
      grid-template-columns: repeat(2, 1fr);
    }
    + .notes__wrapper {
      margin-top: 1em;
    }
  }
  .reservation-list__item {
    font-size: min((22vw / 7.5), 13px);
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    height: 100%;
    border: 3px solid #e0e0e0;
    text-align: center;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 0;
    padding: 5% 2%;
    --icon-size: 4em;
    &.is-online {
      --icon: url("/cmn/icon/icon_pc.svg");
    }
    &.is-tel {
      --icon: url("/cmn/icon/icon_tel.svg");
      --icon-size: 3.75em;
    }
    &.is-store {
      --icon: url("/cmn/icon/icon_stores_his.svg");
    }
    &.is-chat {
      --icon: url("/cmn/icon/icon_telephone_operator.svg");
    }
    &::before {
      content: "";
      background: var(--icon) no-repeat center center / cover;
      width: var(--icon-size);
      height: var(--icon-size);
    }
    &::after {
      content: var(--default-ico-arrow-r);
      font-family: var(--default-ff-icon);
      margin-top: 1em;
      font-size: 1.25em;
      line-height: 1;
    }
    &[href^="#"]::after {
      rotate: 90deg;
    }
    &[target="_blank"]::after {
      content: var(--default-ico-blank);
    }
  }
  .reservation-list__text {
    display: flex;
    flex-direction: column;
  }
  .reservation-list__main-text {
    font-size: min((24vw / 7.5), 19px);
    margin: .5em 0 .2em;
  }
}
/*ボタン系共通設定*/
.reservation-button-list {
  margin-top: min((45vw / 7.5), 35px);
  display: grid;
  gap: min((24vw / 7.5), 20px);
  .is-sp & {}
  .is-pc & {
    &.is-column-02 {
      grid-template-columns: repeat(2, 1fr);
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}
.reservation-button {
  width: 100%;
  color: #fff;
  .is-pc & {
    margin: auto;
    max-width: 400px;
  }
}
.reservation-button__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: min((100vw / 7.5), 60px);
  padding: min((10vw / 7.5), 10px) min((20vw / 7.5), 10px);
  padding-right: min((20vw / 7.5), 18px);
  font-size: min((30vw / 7.5), 20px);
  background: linear-gradient(to bottom, rgba(235, 75, 80, 1) 0%, rgba(191, 31, 36, 1) 100%);
  border-radius: 8px;
  &::after {
    content: var(--default-ico-arrow-r);
    font-family: var(--default-ff-icon);
  }
  &[target="_blank"]:not([href^="#"])::after {
    content: var(--default-ico-blank);
  }
}
.reservation-button__text {
  display: flex;
  flex-direction: column;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 1em;
}
.reservation-button__main-text:only-child {
  text-indent: 1em;
}
.reservation-button__sub-text {
  margin-right: .5em;
}
/*↑ボタン系共通設定↑*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .reservation-button__link {
    transition: var(--default-hover-speed);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  #pageApp:not(.is-device-sp) .reservation-list__item {
    transition: var(--default-hover-speed);
    &:hover {
      border-color: #888;
      background: #f2f2f2;
    }
  }
}