@charset "utf-8";
/* 「円安 商品枠のみ」レスポンシブCSS */
#product {
  .base-button__wrapper {
    width: var(--default-width);
    margin-left: auto;
    margin-right: auto;
  }
}
/*product-block-navi*/
.product__block--buttons {
  display: grid;
  grid-template-columns: repeat(var(--product-tab-col, 2), 1fr);
  gap: min((20vw / 7.5), 20px);
  width: var(--default-width);
  margin: 0 auto min((70vw / 7.5), 35px);
  .is-pc & {
    --product-tab-col: 4;
  }
}
.product__block--button {
  background: var(--product-tab-bg, #fff);
  min-height: min((100vw / 7.5), 50px);
  display: grid;
  align-items: center;
  font-size: min((22vw / 7.5), 18px);
  line-height: calc(28 / 22);
  text-align: center;
  padding: .3em var(--product-tab-yohaku-x, .25em) .4em;
  position: relative;
  .is-sp & {
    --product-tab-yohaku-x: .5em;
    grid-template-columns: 1fr auto;
    gap: var(--product-tab-yohaku-x);
    .product__block--button--texts {
      padding-left: calc(var(--product-tab-yohaku-x) * 2);
    }
    &::after {
      content: var(--default-icon-arw-r);
      font-family: var(--default-ff-icon);
      line-height: .9;
      transform: rotate(90deg);
      margin-top: .25em;
    }
  }
  &.toggleControl--active {
    --product-tab-bg: var(--default-color-yellow);
    .is-pc & {
      &::after {
        --product-tab-arw-h: 13px;
        content: "";
        width: 15px;
        height: var(--product-tab-arw-h);
        background: var(--product-tab-bg);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        bottom: calc(0px - (var(--product-tab-arw-h) - 1px));
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
/*.product-block*/
.product-block__title {
  font-weight: bold;
  text-align: center;
  font-size: min((34vw / 7.5), 26px);
  line-height: 1.2;
  padding: 0 min((30vw / 7.5), 20px);
  margin-bottom: min((40vw / 7.5), 30px);
  .base-title__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    &::before, &::after {
      content: "";
      width: 2px;
      height: 1.25em;
      background: currentColor;
    }
    &::before {
      transform: rotate(-33.4deg);
    }
    &::after {
      transform: rotate(33.4deg);
    }
    .is-indent & {
      &::before {
        margin-right: .25em;
      }
    }
  }
}
.product__list--data {
  background: #fff;
}
.product__list--inner {
  font-size: min((20vw / 7.5), 12px);
  color: #333;
  text-decoration: none;
  position: relative;
  display: block;
  transition: opacity .4s;
}
.is-sp .product__list--inner {
  --product-photo-w: auto;
  --product-photo-h: min((187vw / 7.5), 140px);
  /*--product-photo-fit: contain;*/
}
.is-pc .product__list--inner {
  --product-obi-h: 2em;
  --product-obi-yohaku: 4px 4px 5px;
  --product-title-yohaku: .5em;
  --product-price-yohaku: 10px;
}
.product__list--image {
  width: var(--product-photo-w, 100%);
  height: var(--product-photo-h, 160px);
  object-fit: cover;
  object-position: 100% 100%;
  aspect-ratio: 238 / 160;
  display: block;
}
.product__list--text-wrapper {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.is-pc .product__list--text-wrapper {
  padding: 10px;
}
.product__list--type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  background: #000;
  min-height: var(--product-obi-h, 1.5em);
  padding: var(--product-obi-yohaku, .25em);
}
.product__list--category--wrapper {
  --yohaku: min((10vw / 7.5), 5px);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--yohaku);
  font-family: var(--font-family-noto);
}
.product__list--category {
  height: min((42vw / 7.5), 24px);
  margin-bottom: var(--yohaku);
}
.product__list--category.is-label {
  display: grid;
  align-items: center;
  color: var(--product-label-fc, #fff);
  font-weight: bold;
  text-align: center;
  min-width: min((151vw / 7.5), 86px); /* 180:50の比率*/
  padding: 0 .25em;
  background: var(--product-label-bg) no-repeat 0 0 / cover;
  &.is-line {
    --product-label-bg: #07b53b;
  }
  &.is-koukoku, .is-shinbun {
    --product-label-bg: #ff6000;
  }
}
.product__list--item.is-label-judge {
  &:not([class*="line"]) .product__list--category.is-line, &:not([class*="ad"]) .product__list--category.is-koukoku {
    display: none;
  }
}
.product__list--title {
  font-size: min((28vw / 7.5), 16px);
  line-height: 1.35;
  font-weight: bold;
  margin-bottom: var(--product-title-yohaku, .75em);
  color: #000;
}
.product__list--label, .product__list--title--subtext {
  --product-label-yohaku: .2em .9em .3em;
  --product-label-gap: min((10vw / 7.5), 5px);
  --product-label-bg: #eee;
}
.product__list--label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--product-label-gap);
  --product-label-yohaku: .2em .6em .3em;
}
.product__list--label--item, .product__list--title--subtext {
  background: var(--product-label-bg);
  padding: var(--product-label-yohaku);
  font-size: min((20vw / 7.5), 10.5px);
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: var(--product-label-gap);
}
.product__list--label--item {
  &.is-only-ol {
    --product-label-bg: #ffe500;
  }
  &.is-seat-W {
    --product-label-bg: #b6efae;
  }
  &.is-seat-C {
    --product-label-bg: #d5afe8;
  }
  &.is-seat-F {
    --product-label-bg: #d9c269;
  }
}
.product__list--title--subtext {
  display: inline-block;
}
.product__list--title--subtext + .product__list--title--text {
  display: block;
}
.is-sp .product__list--title--airport {
  font-size: .8em;
  display: block;
}
.product__list--title--hotel {
  display: block;
}
.product__list--rank {
  line-height: 0;
}
.product__list--rank:not(:last-child) {
  margin-bottom: .75em;
}
.product__list--detail {
  line-height: 1.4;
}
.product__list--more {
  grid-template-columns: 5em 1fr;
  display: grid;
  gap: 0 .5em;
  align-items: baseline;
  margin-top: .25em;
}
.is-sp .product__list--more {}
.product__list--more--title {
  display: inline-block;
  font-size: .95em;
  line-height: 1.5;
  background: #7d7d7d;
  color: #fff;
  text-align: center;
}
.product__list--texts :is(.product__list--point, .product__list--tokuten) {
  font-size: .95em;
  color: #666;
  border-top: 1px dashed;
  margin-top: 1.15em;
  padding-top: .6em;
}
.product__list--tokuten--item {
  text-indent: -1.25em;
  padding-left: 1.25em;
  font-size: .9em;
  line-height: 1.5;
}
.product__list--price {
  margin-top: auto;
  padding-top: var(--product-price-yohaku, 1em);
}
.product__list--price .product__list--point {
  background: var(--default-color-red);
  color: #fff;
  font-size: .95em;
  text-align: center;
  padding: .2em;
  margin: .5em 0 .3em;
}
.product__list--minmax {
  font-size: min((32vw / 7.5), 18px);
  color: var(--default-color-red);
  font-weight: bold;
}
.product__list--minmax ~ [class*="product__list--"] {
  padding-top: .5em;
}
.product__list--minmax--notes {
  font-size: min((24vw / 7.5), 12px);
  margin-right: .5em;
  font-weight: normal;
}
/*SPカセット完全別レイアウトスタイル*/
.is-sp .product__list--item {
  border-bottom: 1px solid;
}
.is-sp .product__list--inner {
  padding: min((20vw / 7.5), 20px);
  display: grid;
  grid-template-columns: min((278vw / 7.5), 208px) 1fr;
  gap: 0 min((20vw / 7.5), 20px);
}
/*PCカセット完全別レイアウトスタイル*/
.is-pc .product__list--contents .product__list {
  --yohaku: 11px;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku) * 2) / 3));
  gap: var(--yohaku);
  justify-content: center;
}
@media (min-width: 960px) {
  .is-pc .product__list--contents .product__list {
    grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku) * 3) / 4));
  }
}
.is-pc .product__list--data, .product__list--inner {
  height: 100%;
}
.is-pc .product__list--inner {
  border: 1px solid var(--default-color-gray);
  display: grid;
  grid-template-rows: auto 1fr;
}
/*end 商品カセットスタイル*/
.product__list--contents .product__notes {
  width: var(--default-width);
  margin: auto;
  margin-top: min((20vw / 7.5), 10px);
  font-size: min((20vw / 7.5), 12px);
}
.product__list--contents .product__notes--item:not(:first-child) {
  margin-top: .25em;
}
.product__list--contents .product__notes--item {
  text-indent: -1.25em;
  padding-left: 1.25em;
}
.product__list--contents .product__notes--item::before {
  content: "※";
  margin-right: .25em;
}
.product__list--contents + .button-base {
  margin-top: min((30vw / 7.5), 20px) !important;
}