@charset "utf-8";
/*------------------------------------------------*/
/*★ フェア共通スタイル設定（商品枠専用） ★*/
/*------------------------------------------------*/
/* product */
#product {
  --product-block-gap: var(--default-gap-48);
  --product-content-gap: var(--default-gap-24);
  --product-lineup-gap: var(--default-gap-16);
  --product-cassette-standard-gap: var(--default-gap-8);
  --product-cassette-small-gap: var(--default-gap-4);
  .is-size-pc & {
    --product-block-gap: var(--default-gap-80);
  }
  &:has(.product-navi) {
    .product-navi-content__inner,
    .product-navi-modal-content__inner {
      display: grid;
      justify-content: center;
      gap: var(--default-gap-12);
      background: #fff;
      border-radius: var(--default-radius-16);
      box-shadow: var(--default-box-shadow);
      padding: var(--default-gap-40) 0;
      font-weight: bold;
      --product-navi-item-current-font-color: var(--fair-color-primary);
      .product-navi__title {
        display: flex;
        gap: var(--default-gap-8);
        align-items: center;
        font-size: var(--default-font-size-16);
        &::before {
          content: '';
          width: 25px;
          height: 25px;
          border-radius: var(--default-radius-4);
          background: #000 url(../images/product_scrollnavi_menu_icon.svg) no-repeat center center / 16px;
        }
      }
      .product-navi__list {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--default-gap-16);
        padding: var(--default-gap-16);
      }
      .product-navi__item {
        &.is-current {
          color: var(--product-navi-item-current-font-color);
          .product-navi__item--link {
            position: relative;
            &::before {
              content: '\e5c8';
              font-family: var(--default-icon-ff);
              color: var(--fair-color-primary);
              position: absolute;
              top: 50%;
              left: 0;
              translate: 0 -50%;
            }
          }
        }
        .product-navi__item--link {
          padding: var(--default-gap-8) var(--default-gap-16);
          display: block;
        }
      }
    }
    @media (width < 1400px) {
      & {
        .section__inner {
          width: 100%;
        }
        .product-content {
          width: var(--default-width);
          margin: auto;
        }
      }
      .product-navi-content {
        width: var(--default-width);
        margin: auto;
        .product-navi-content__inner {
          gap: var(--default-gap-16);
          background: transparent;
          border-radius: 0;
          box-shadow: none;
          padding: var(--default-gap-16) 0;
          --product-navi-item-current-font-color: inherit;
          .is-size-pc & {
            padding: var(--default-gap-16);
          }
          .product-navi__title {
            font-size: var(--default-font-size-18);
          }
          .product-navi__list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--default-gap-16) var(--default-gap-12);
            padding: 0 var(--default-gap-8);
            @media (width >= 520px) {
              & {
                display: flex;
                flex-wrap: wrap;
                gap: var(--default-gap-24);
              }
            }
          }
          .product-navi__item--link {
            padding: 0;
            display: grid;
            align-items: baseline;
            grid-template-columns: auto 1fr;
            gap: 0 var(--default-gap-8);
            &::before {
              content: none !important;
            }
            &::after {
              order: -1;
              content: '';
              width: 12px;
              height: 9px;
              background: url(../images/product_scrollnavi_link_icon.svg) no-repeat center center / contain;
            }
          }
        }
      }
      .product-navi__open-button {
        display: block;
        margin-left: auto;
        width: var(--product-navi-open-button-size-w, 50px);
        height: var(--product-navi-open-button-size-h, 47px);
        position: sticky;
        top: 0;
        z-index: 10;
        margin-left: auto;
        overflow: hidden;
        translate: 0 120px;
        &[tabindex='-1'] {
          pointer-events: none;
          cursor: default;
        }
        &.is-fixed {
          --product-navi-open-button--posi-x: 0;
        }
        .is-size-pc & {
          --product-navi-open-button-size-w: 60px;
          --product-navi-open-button-size-h: 57px;
        }
        .product-navi__open-button--icon {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          display: block;
          background: #000 url(../images/product_scrollnavi_menu_icon.svg) no-repeat center center / calc((38 / 50) * 100%);
          border-radius: var(--default-radius-4) 0 0 var(--default-radius-4);
          translate: var(--product-navi-open-button--posi-x, 200%) 0;
          transition: var(--default-transition-translate);
        }
      }
      .product-navi__close-button {
        --product-navi-open-button-size: 50px;
        width: var(--product-navi-open-button-size);
        height: var(--product-navi-open-button-size);
        border-radius: 100%;
        background: var(--fair-color-primary) no-repeat center center / 30px;
        background-image: url(../images/navi/all_navi_menu_close.svg);
        position: absolute;
        top: -15px;
        right: -8px;
        z-index: 1;
      }
      .product-navi-modal.is-open {
        position: fixed;
        padding: var(--default-gap-40) var(--default-gap-16);
        width: calc((284 / 375) * 100%);
        height: 90%;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        background: #fff;
        border-radius: var(--default-radius-16);
        @media (width > 640px) {
          & {
            height: fit-content;
          }
          .product-navi__list {
            display: flex;
            flex-wrap: wrap;
          }
        }
        .product-navi-modal-content {
          height: 100%;
          overflow: auto;
          .product-navi-modal-content__inner {
            justify-items: center;
            box-shadow: none;
            background: none;
            padding: 0;
          }
        }
      }
    }
    @media (width >= 1400px) {
      .section__inner {
        width: 100%;
        padding: 0 var(--default-gap-width100-yoko);
      }
      .product-wrapper {
        --product-navi-width: 270px;
        display: grid;
        grid-template-columns: var(--default-width2);
        gap: 0 var(--default-gap-64);
        justify-content: center;
        align-items: start;
        grid-template-columns: var(--product-navi-width) 1fr;
        max-width: calc(var(--product-navi-width) + var(--default-width-pc) + var(--default-gap-64));
        margin: auto;
      }
      .product-navi {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding-top: 98px;

        .product-navi-content__inner {
          padding: var(--default-gap-24) var(--default-gap-16);
          .product-navi__list {
            gap: var(--default-gap-8);
            padding: 0 var(--default-gap-16);
          }
          .product-navi__item--link {
            padding: 0 var(--default-gap-16);
          }
        }
      }
      .product-navi__open-button {
        display: none;
      }
    }
  }
  /**/
  .product-wrapper + .base-button__wrapper {
    /* margin-top: var(--product-block-gap); */ /*←どの部分をみてこの設定にしたのかわからない*/
    margin-top: var(--default-gap-40-56);
  }
  /*schedule-table*/
  .schedule-table.is-simple {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--default-gap-8) var(--default-gap-16);
    font-weight: bold;
    --schedule-table-kazari-size-w: 148px;
    min-width: var(--schedule-table-kazari-size-w);
    padding: var(--default-gap-8) 0 calc(var(--default-gap-8) + 14px);
    background: url(../images/title_schedule_table_kazari.svg) no-repeat center bottom / var(--schedule-table-kazari-size-w);
    margin-bottom: var(--schedule-table-kazari-gap-bottom, var(--default-gap-12));
    .is-size-pc & {
      --schedule-table-item-time-font-size: var(--default-font-size-18);
      --schedule-table-kazari-gap-bottom: var(--default-gap-8);
    }
    .schedule-table__time {
      font-size: var(--schedule-table-item-time-font-size, var(--default-font-size-14));
    }
    .schedule-table__channel {
      display: flex;
      gap: var(--default-gap-8);
      font-size: var(--default-font-size-12);
      .schedule-table__channel--item {
        padding: var(--default-gap-4);
        background: var(--schedule-table-channel-item-bg);
        color: #fff;
        &.is-online {
          --schedule-table-channel-item-bg: var(--default-color-online);
        }
        &.is-tel {
          --schedule-table-channel-item-bg: var(--default-color-tel);
        }
        &.is-shop {
          --schedule-table-channel-item-bg: var(--default-color-shop);
        }
      }
    }
  }
}
.product-content {
  max-width: var(--default-width-pc);
  container-type: inline-size;
}
/*ボタンタイプ無レイアウト*/
.product-content > .product-lineup {
  @container (min-width: 861px) {
    --product-lineup-pc-default-col-num: 4;
  }
}
/*ボタンタイプ有レイアウト（絞込以外）*/
.product-content__lineup:not(.is-filter) {
  display: grid;
  gap: var(--product-block-gap) var(--product-lineup-gap);
  grid-template-columns: 100%;
  overflow: hidden;

  .product-content__lineup--item:has(.base-title.is-sub-block-title) {
    &:has(.base-title.is-block-title) {
      gap: var(--default-gap-40);
    }
    .product {
      display: grid;
      grid-template-columns: 100%;
      gap: var(--default-gap-40);
    }
    .product-lineup__wrapper {
      display: grid;
      grid-template-columns: 100%;
      gap: var(--product-content-gap);
    }
  }

  @container (min-width: 861px) {
    --product-lineup-pc-default-col-num: 2;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: auto 1fr auto; */ /*←何用だったか記憶ない…消したらダメなやつ？*/
    .product-content__lineup--item {
      grid-template-rows: subgrid;
      grid-row: span 3;
      &:not(:has(.product-links)) {
        grid-row: span 2;
      }
    }
    .product-lineup__wrapper,
    .product-lineup {
      height: var(--product-lineup-height, 100%);
    }
    .product-content__lineup--item:has(
        .product.is-full-layout,
        .base-title.is-sub-block-title,
        .product-lineup__item:nth-child(3) .product-lineup__item--link,
        .product-lineup__item.is-koukoku
      ) {
      grid-column: span 2;
      --product-lineup-pc-default-col-num: 4;
      --product-lineup-height: auto;
    }
    .product-titles {
      align-self: end;
    }
  }
}
/*ボタンタイプ有レイアウト（共通設定）*/
.product-content__lineup--item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--product-content-gap);
}
/*product -- 商品カセット*/
.product-lineup {
  display: grid;
  gap: var(--product-lineup-gap);
  /*共通設定*/
  &:has(.product-lineup__item .product-lineup__item--other-link) {
    grid-template-rows: 1fr max-content;
    .product-lineup__item {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap: var(--product-cassette-small-gap) 0;
    }
  }
  .product-lineup__item--link {
    display: grid;
    gap: var(--product-cassette-standard-gap);
    align-items: start;
    background: #fff;
    border-radius: var(--default-radius-4);
    border: var(--default-border-black);
    overflow: hidden;
    font-size: var(--default-font-size-12);
    .product-lineup__item.is-koukoku & {
      padding: var(--product-cassette-standard-gap);
      align-content: start;
    }
    &.is-locked {
      position: relative;
      &&::before {
        content: '';
        display: block;
        width: 112px;
        height: 65px;
        background: url(../images/product_obi_coming.svg) no-repeat center center / contain;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
      }
    }
  }
  :is(.product-lineup__item--labels.is-top, .product-lineup__item--more-details, .product-lineup__item--period):empty {
    display: none;
  }
  .product-lineup__item--image {
    grid-area: image;
    --cover-img-height: calc((172 / 260) * 100%);
  }
  .product-lineup__item--obi {
    grid-area: obi;
    font-size: var(--default-font-size-18);
    line-height: var(--default-font-lh-150);
    font-weight: bold;
    text-align: center;
    border-bottom: var(--default-border-black);
  }
  .product-lineup__item--title {
    grid-area: title;
    display: grid;
    gap: var(--product-cassette-standard-gap);
    .product-lineup__item--name {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--product-cassette-small-gap);
      .product-lineup__item--name--text {
        font-size: var(--default-font-size-14);
        line-height: var(--default-font-lh-150);
        font-weight: bold;
      }
      .product-lineup__item--name--hotel-grade {
        object-fit: contain;
        height: 13px;
      }
    }
  }
  .product-lineup__item--details {
    grid-area: details;
    display: grid;
    gap: var(--product-cassette-standard-gap);
  }
  .product-lineup__item--more-details {
    font-weight: bold;
    display: grid;
    gap: var(--product-cassette-small-gap);
    grid-template-columns: max-content 1fr;
    .product-lineup__item--more-details--title {
      min-width: 72px;
      min-height: 17px;
      padding: var(--product-cassette-small-gap) var(--product-cassette-standard-gap);
      background: #7d7d7d;
      color: #fff;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .product-lineup__item--point {
    .is-mark {
      background: linear-gradient(transparent 50%, #ffd900 0%);
      font-weight: bold;
      padding: 0 var(--product-cassette-small-gap);
    }
  }
  .product-lineup__item--price {
    grid-area: price;
    display: grid;
    gap: var(--product-cassette-standard-gap);
    margin-top: calc(var(--default-gap-24) - var(--product-cassette-standard-gap));
    .product-lineup__item.is-koukoku & {
      margin-top: 0;
    }
  }
  .product-lineup__item--minmax {
    font-size: var(--default-font-size-24);
    font-weight: bold;
    color: var(--default-color-price);
    line-height: 1.2;
    .is-kara,
    .is-en {
      font-size: var(--default-font-size-16);
    }
    .product-lineup__item--minmax--discount {
      display: flex;
      align-items: center;
      gap: var(--product-cassette-standard-gap);
      flex-wrap: wrap;
      margin-bottom: var(--product-cassette-small-gap);
      font-size: var(--default-font-size-12);
      .product-lineup__item--minmax--discount--text {
        font-weight: bold;
        border: 1px solid;
        padding: 0 var(--product-cassette-small-gap);
      }
      .product-lineup__item--minmax--discount--price {
        color: #697180;
        text-decoration: line-through;
      }
    }
  }
  .product-lineup__item--labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-cassette-small-gap);

    &.is-top {
      --product-lineup-item-label-bg: #eee;
    }
    &.is-bottom {
      font-weight: bold;
      --product-lineup-item-label-font-color: #fff;
      --product-lineup-item-label-bg: var(--default-color-product-label-normal);
    }
    .product-lineup__item--labels--item {
      padding: var(--product-cassette-small-gap) var(--product-cassette-standard-gap);
      color: var(--product-lineup-item-label-font-color);
      background: var(--product-lineup-item-label-bg);
      &:is(.is-best-selling, .is-otoshidama) {
        --product-lineup-item-label-bg: #df0d00;
      }
      &.is-top20 {
        --product-lineup-item-label-bg: #10069f;
      }
      &:is(.is-awgrand, .is-awgood, .is-premium) {
        --product-lineup-item-label-font-color: var(--default-color-product-label-special);
        --product-lineup-item-label-bg: #e3b20f;
      }
      &.is-awbest {
        --product-lineup-item-label-font-color: #e3b20f;
        --product-lineup-item-label-bg: var(--default-color-product-label-special);
      }
      &.is-line {
        --product-lineup-item-label-bg: #5db92e;
      }
      &.is-koukoku {
        --product-lineup-item-label-font-color: #000;
        --product-lineup-item-label-bg: #ffd900;
      }
      &.is-impresso {
        --product-lineup-item-label-bg: #9a1fd3;
      }
      &:is(.is-std, .is-stp, .is-wheelchair, .is-personal-travel, .is-dp, .is-airz) {
        --product-lineup-item-label-bg: var(--default-color-product-label-special);
      }
      &.is-air-seat-class {
        --product-lineup-item-label-bg: #e3dca7;
      }
    }
  }
  &:has(.product-lineup__item.is-koukoku) {
    --product-lineup-col-num: 1;
    .product-lineup__item--link {
      grid-template-areas:
        'image title'
        'image details'
        'image price';
      grid-template-columns: calc((240 / 514) * 100%) 1fr;
      grid-template-rows: repeat(2, auto) 1fr;
    }
  }
  .product-lineup__item--other-link {
    .base-textlink {
      display: grid;
      justify-items: end;
      .ui-static-icon {
        --wght: 400;
      }
    }
  }
  /*only SPレイアウト*/
  &:not(.is-simple-view) {
    @container (max-width: 500px) {
      .product-lineup__item--link {
        grid-template-areas:
          'obi obi'
          'image title'
          'details details'
          'price price';
        grid-template-columns: calc((140 / 319) * 100%) 1fr;
        padding: var(--product-cassette-standard-gap);
        padding-bottom: var(--default-gap-12);

        .product-lineup__item.is-koukoku & {
          grid-template-areas:
            'image title'
            'image details'
            'price price';
          grid-template-rows: auto 1fr auto;
          padding-bottom: var(--product-lineup-gap);
        }
      }
      .product-lineup__item--price {
        text-align: center;
      }
    }
  }
  /*only PCレイアウト*/
  @container (min-width: 501px) {
    & {
      --product-lineup-col-num: 2;
      justify-content: center;
      grid-template-columns: repeat(
        auto-fit,
        calc((100% - var(--product-lineup-gap) * (var(--product-lineup-col-num) - 1)) / var(--product-lineup-col-num))
      );
    }
    &:not(:has(.product-lineup__item.is-koukoku)) {
      .product-lineup__item--link {
        grid-template-areas:
          'image'
          'obi'
          'title'
          'details'
          'price';
        height: 100%;
        grid-template-rows: repeat(4, auto) 1fr;
        > :not(.product-lineup__item--image) {
          margin-left: var(--product-cassette-standard-gap);
          margin-right: var(--product-cassette-standard-gap);
        }
      }
      .product-lineup__item--obi {
        border-bottom: var(--default-border-black);
      }
      .product-lineup__item--price {
        align-self: end;
        margin-bottom: var(--default-gap-12);
      }
    }
  }
  @container (min-width: 861px) {
    & {
      --product-lineup-col-num: var(--product-lineup-pc-default-col-num);
    }
    &:has(.product-lineup__item.is-koukoku) {
      --product-lineup-col-num: 2;
    }
  }
  @container (min-width: 861px) and (max-width: 1103px) {
    & {
      --base-textlink-font-size: var(--default-font-size-12);
    }
  }
}
/*product -- 商品カセット簡易版*/
.product-lineup.is-simple-view {
  --product-lineup-col-num: 2;
  justify-content: center;
  grid-template-columns: repeat(
    auto-fit,
    calc((100% - var(--product-lineup-gap) * (var(--product-lineup-col-num) - 1)) / var(--product-lineup-col-num))
  );
  @container (max-width: 600px) {
    --product-lineup-gap: var(--default-gap-8);
  }
  @container (min-width: 601px) {
    --product-lineup-col-num: 3;
  }
  @container (min-width: 821px) {
    --product-lineup-col-num: 4;
  }
  @container (min-width: 1051px) {
    --product-lineup-col-num: 5;
  }
  .product-lineup__item {
    grid-template-rows: auto !important;
    .product-lineup__item--link {
      grid-template-areas:
        'image'
        'title'
        'details'
        'price';
      grid-template-rows: repeat(3, auto) 1fr;
      height: 100%;
      > :not(.product-lineup__item--image) {
        margin-left: var(--product-cassette-standard-gap);
        margin-right: var(--product-cassette-standard-gap);
      }
    }
    &:has(.product-lineup__item--more-details:empty) {
      .product-lineup__item--link {
        grid-template-areas:
          'image'
          'title'
          'price';
        grid-template-rows: repeat(2, auto) 1fr;
      }
      .product-lineup__item--details {
        display: none;
      }
    }
    .product-lineup__item--price {
      align-self: end;
      margin-bottom: var(--default-gap-12);
      .product-lineup__item--minmax {
        font-size: var(--default-font-size-16);
        .is-kara,
        .is-en {
          font-size: var(--default-font-size-12);
        }
        .is-size-pc & {
          font-size: var(--default-font-size-18);
          .is-kara,
          .is-en {
            font-size: var(--default-font-size-16);
          }
        }
      }
    }
    .product-lineup__item--obi,
    .product-lineup__item--lead,
    .product-lineup__item--point,
    .product-lineup__item--labels.is-bottom,
    .product-lineup__item--other-link {
      display: none;
    }
  }
}
/*product-lineupのボタンシリーズ*/
.product-anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--default-gap-16);
  margin-bottom: var(--default-gap-40-56);
  .base-button {
    width: auto;
  }
  .base-button__link {
    --btn-gap: var(--default-gap-8);
    --btn-bg: #fff;
    --btn-font-color: var(--default-color-black);
    --btn-padding-left: var(--default-gap-16);
    border: var(--default-border-black);
    font-size: var(--default-font-size-14);
    line-height: var(--default-font-lh-150);
    font-weight: bold;
    border-radius: var(--default-radius-4);
  }
}
.product-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--default-gap-24);
  &:not(:empty) {
    margin-bottom: var(--default-gap-40);
  }
  .product-filter-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--default-gap-16);
  }
  .product-filter-content__title {
    font-weight: bold;
    font-size: var(--default-font-size-20);
  }
  .product-filter-content__lineup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-filter-content-lineup-gap, var(--default-gap-24));
  }
  .product-filter-content.is-button {
    --product-filter-content-lineup-gap: var(--default-gap-8);
    .is-size-pc & {
      --product-filter-content-lineup-gap: var(--default-gap-16);
    }
    .product-filter-content__lineup--item {
      --product-filter-content-lineup-item-button-bg: #fff;
      --product-filter-content-lineup-item-button-font-color: inherit;
      &.is-active {
        --product-filter-content-lineup-item-button-font-color: #fff;
        --product-filter-content-lineup-item-button-bg: var(--fair-color-secondary);
      }
    }
    .product-filter-content__lineup--item__button--inner {
      display: block;
      color: var(--product-filter-content-lineup-item-button-font-color);
      background: var(--product-filter-content-lineup-item-button-bg);
      padding: var(--default-gap-4) var(--default-gap-16);
      border-radius: var(--default-radius-4);
      border: var(--default-border-black);
    }
  }
  .product-filter-content.is-checkbox {
    --product-filter-content-lineup-gap: var(--default-gap-16) var(--default-gap-24);
    .product-filter-content__lineup--item:has(.product-filter-content__lineup--item__label--input:checked) {
      --product-filter-content-lineup-item-checkbox-border-color: var(--fair-color-secondary);
      --product-filter-content-lineup-item-checkbox-bg: var(--fair-color-secondary);
      --product-filter-content-lineup-item-checkbox-check-opacity: 1;
    }
    .product-filter-content__lineup--item__label--input {
      display: none;
    }
    .product-filter-content__lineup--item__label--text {
      cursor: pointer;
      display: inline-block;
      position: relative;
      --product-filter-content-lineup-item-checkbox-size: 24px;
      padding-left: calc(var(--product-filter-content-lineup-item-checkbox-size) + var(--default-gap-8));
      line-height: var(--product-filter-content-lineup-item-checkbox-size);

      &::before {
        content: '';
        display: block;
        width: var(--product-filter-content-lineup-item-checkbox-size);
        height: var(--product-filter-content-lineup-item-checkbox-size);
        border: 2px solid var(--product-filter-content-lineup-item-checkbox-border-color, var(--default-color-gray));
        border-radius: var(--default-radius-4);
        background: var(--product-filter-content-lineup-item-checkbox-bg, #fff);
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
      }
      &::after {
        content: '\e5ca';
        font-family: var(--default-icon-ff);
        color: #fff;
        font-size: 1.75em;
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
      }
    }
  }
}
/*表示切替系*/
.product-layout-switch {
  margin-bottom: var(--default-gap-8);
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: var(--default-gap-16);
  .is-size-pc & {
    margin-bottom: var(--default-gap-16);
  }
  .product-layout-switch__title {
    font-weight: bold;
  }
  .product-cassette-layout {
    display: flex;
    align-items: center;
    gap: var(--default-gap-8);
    .product-cassette-layout__switch-button {
      display: inline-block;
    }
    .product-cassette-layout__switch-button--checkbox {
      display: none;
    }
    .product-cassette-layout__switch-button--label {
      display: flex;
      position: relative;
      width: 112px;
      height: 32px;
      border-radius: var(--default-radius-button);
      overflow: hidden;
      cursor: pointer;
      background-color: #fff;
      border: var(--default-border-black);
      box-sizing: border-box;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: var(--fair-color-secondary);
        border-radius: var(--default-radius-button);
        transition: var(--default-transition-translate);
        z-index: 0;
      }
    }
    .product-cassette-layout__switch-button--label--item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      z-index: 1;
      transition: var(--default-transition-color);
      font-weight: bold;
      &.is-detail {
        color: #fff;
      }
      &.is-simple {
        color: #000;
      }
    }
    .product-cassette-layout__switch-button--checkbox:checked + .product-cassette-layout__switch-button--label {
      &::before {
        translate: 100% 0;
      }
      .product-cassette-layout__switch-button--label--item.is-detail {
        color: #000;
      }
      .product-cassette-layout__switch-button--label--item.is-simple {
        color: #fff;
      }
    }
  }
}
/*product-links -- 導線枠*/
.product-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--default-gap-40);
}
/*.product-special*/
.product-special {
  .product-special__logo {
    --cover-img-height: calc((300 / 736) * 100%);
    .is-size-pc & {
      --cover-img-height: calc((289 / 1104) * 100%);
    }
  }
  .product-special__navi {
    font-weight: bold;
    .is-size-sp & {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 var(--default-gap-16);
      font-size: var(--default-font-size-12);
      margin-bottom: var(--default-gap-16);
    }
    .is-size-pc & {
      width: max-content;
      max-width: 100%;
      margin: var(--default-gap-8) auto var(--default-gap-40);
      display: flex;
      flex-wrap: wrap;
      gap: 0 var(--default-gap-40);
      font-size: var(--default-font-size-16);
    }
    .product-special__navi--item {
      padding: var(--default-gap-8) 0;
      display: flex;
      align-items: center;
      gap: var(--default-gap-8);
      color: var(--product-special-navi-item-font-color, var(--default-color-gray));
      font-weight: bold;
      &.is-active {
        --product-special-navi-item-font-color: var(--default-color-black);
        border-bottom: var(--default-border-black);
      }
      &::before {
        content: '';
        --product-special-navi-item-icon-size: 9px;
        width: var(--product-special-navi-item-icon-size);
        height: var(--product-special-navi-item-icon-size);
        background: var(--fair-color-secondary);
        border-radius: 100%;
      }
    }
  }
  .product-special__lineup--item {
    display: grid;
    grid-template-columns: 100%;
    gap: var(--default-gap-40);
  }
}
/*product-notes*/
.product-notes {
  margin-top: var(--default-gap-40-56);
}