@charset "utf-8";
/* 「BlackFriday 全ページ共通 商品枠のみ」レスポンシブCSS */
#product {
  position: relative;
  padding: min((66vw / 7.5), 42px) 0 min((100vw / 7.5), 105px);
  &:not(:first-child) {
    margin-top: min((33vw / 7.5), 39px);
  }
  .section__title {
    height: min((263vw / 7.5), 228px);
    margin-bottom: min((24vw / 7.5), 47px);
    .base-title__picture {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.product__contents--wrapper:not(:first-child) {
  margin-top: min((78vw / 7.5), 113px);
}
.product__contents {
  display: grid;
  gap: min((100vw / 7.5), 84px) 0;
}
.product__wrapper:nth-child(odd of .product__wrapper):not(:has(#soldout)) {
  .is-top & {
    background: var(--product-bg) no-repeat center max((-115vw / 7.5), -126px)/ var(--product-bg-size);
    .is-sp & {
      --product-bg: url(../images/sp/item_bg.webp);
      --product-bg-size: max(100%, (750vw / 7.5));
    }
    .is-pc & {
      --product-bg: url(../images/pc/item_bg.webp);
      --product-bg-size: max(100%, 1920px);
    }
  }
}
.is-sp {}
.is-pc {
  .product__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 14px;
  }
  .product__wrapper > .product:not(.is-size-half) {
    grid-column: span 2;
  }
  .product.is-size-half {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    &:has(.banner) {
      grid-row: span 4;
      .banner__wrapper {
        width: min(100%, 710px);
        display: block;
        .banner {
          width: 100%;
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
        .banner__notes {
          margin-top: 0;
        }
      }
    }
  }
}
.product {
  width: var(--default-width);
  margin: auto; 
  .base-title {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: min((40vw / 7.5), 30px);
  }
  .base-title__inner {
    display: grid;
    justify-content: center;
    gap: .25em;
    font-size: min((24vw / 7.5), 16px);
    text-shadow:  -1px -1px 1px #000, 1px -1px 1px #000, -1px  1px 1px #000, 1px  1px 1px #000, -1px  0px 1px #000, 1px  0px 1px #000, 0px -1px 1px #000, 0px  1px 1px #000, 3px  3px 1px #000;
    line-height: 1.2;
    font-weight: bold;
    position: relative;
    --ttl-icon-yohaku: min((24vw / 7.5), 19px);
    &::before, &::after {
      content: "";
      height: min((105vw / 7.5), 65px);
      aspect-ratio: 1 / 1;
      background: url("../images/title_deco_kazari.svg") no-repeat 0 0 / contain;
      position: absolute;
      top: 50%;
      transform: translateY(-50%) var(--ttl-icon-x) var(--ttl-icon-scale, scale(1, 1));
    }
    &::before {
      left: 0;
      --ttl-icon-x: translateX(calc(-100% - var(--ttl-icon-yohaku)));
    }
    &::after {
      right: 0;
      --ttl-icon-x: translateX(calc(100% + var(--ttl-icon-yohaku)));
      --ttl-icon-scale: scale(-1, 1);
    }
  }
  .base-title__text--main {
    font-size: min((50vw / 7.5), 36px);
  }
  .banner__wrapper {
    --yohaku-top: min((35vw / 7.5), 20px);
    &:not(:last-child) {
      --yohaku-btm: min((24vw / 7.5), 16px);
    }
  }
}
.product__button--wrapper {
  margin-top: min((40vw / 7.5), 22px);
}
/*商品カセット※未調整*/
.product__list--data {
  background: #fff;
}
.product__list--inner {
  font-size: min((20vw / 7.5), 12px);
  color: #333;
  text-decoration: none;
  position: relative;
  display: block;
  &.is-lock {
    pointer-events: none;
    &::before {
      content: "";
      background: var(--lock-label-bg, url("/fair/assets/common/images/product_icon_coming_left.png")) no-repeat 0 0 / cover;
      width: var(--lock-label-size-w, min((250vw / 7.5), 175px));
      height: var(--lock-label-size-h, min((91vw / 7.5), 64px));
      position: absolute;
      top: 0;
      z-index: 2;
    }
    .is-pc & {
      &::before {
        --lock-label-bg: url("/fair/assets/common/images/product_icon_coming_right.png");
        --lock-label-size-w: 146px;
        --lock-label-size-h: 53px;
        right: 0;
      }
    }
    .is-sp & {
      &::before {
        left: 0;
      }
    }
  }
}
.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);
}
[data-city-name="マカオ"] ~ .product__list--type--text.is-country,
[data-city-name="香港"] ~ .product__list--type--text.is-country {
    display: none;
}
.product__list--type--text.is-city {
  display: none;
  &[data-city-name="マカオ"], &[data-city-name="香港"] {
    display: block;
  }
}
.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:not(.is-label) {
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: 0 .25em;
  align-items: center;
  background: #fff;
  border: 1px solid;
  font-weight: bold;
  font-size: .8em;
  line-height: 1.2;
  padding: .1em .7em .2em .5em;
  &.is-air, &.is-ao {
    --product-category-icon: url("/cmn/icon/icon_plane_black.svg");
    --product-category-icon-posi: center;
  }
  &[class*="is-bus"] {
    --product-category-icon: url("/cmn/icon/icon_bus_tour_black.svg");
  }
  &.is-imp {
    --product-category-icon: url("/cmn/icon/icon_tour_with_attendant_black.svg");
  }
  &.is-train {
    --product-category-icon: url("/cmn/icon/icon_train_black.svg");
  }
  &.is-hotel {
    --product-category-icon: url("/cmn/icon/icon_hotel_black.svg");
  }
  &.is-airhotel, &.is-dp {
    --product-category-icon: url("/cmn/icon/icon_pack_black.svg");
  }
  &.is-ship {
    --product-category-icon: url("/cmn/icon/icon_cruise_black.svg");
  }
  &::before {
    content: "";
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: var(--product-category-icon) no-repeat var(--product-category-icon-posi, center 0) / contain;
    margin: 0;
  }
}
.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;
  }
  &.is-awbest {
    --product-label-bg: url("/fair/assets/common/images/product_label_award_best.png");
  }
  &.is-awgood {
    --product-label-bg: url("/fair/assets/common/images/product_label_award_good.png");
  }
  &.is-exclusive {
    --product-label-bg: var(--default-color-red2);
    &:empty {
      display: none;
    }
  }
}
.product__list--item {
  .is-pc & {
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.23);
  }
  .is-sp & {
    border: 1px solid #a0a0a0;
  }
}
.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:not(:first-child) {
  margin-top: min((8vw / 7.5), 12px);
}
.is-sp .product__list--inner {
  padding: min((20vw / 7.5), 20px);
  display: grid;
  grid-template-columns: min((243.5vw / 7.5), 280px) 1fr;
  gap: 0 min((20vw / 7.5), 20px);
  --product-photo-h: min((164vw / 7.5), 188px);
}
/*PCカセット完全別レイアウトスタイル*/
.is-pc .product__list--contents .product__list {
  --yohaku: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku) * 2) / 3));
  gap: var(--yohaku);
  justify-content: center;
  .product.is-size-half & {
    --yohaku: 8px;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku)) / 2));
  }
}
@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;
}
/*完売枠*/
#product:not(:has(#soldout .product__list--item)) {
  .button-base:has(.button-base__link[href="#soldout"]) {
    display: none;
  }
}
.product__wrapper:has(#soldout) {
  &:not(:has(.product__list--item)) {
    display: none;
  }
}
#soldout {
  .product__list--item {
    position: relative;
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
  .is-pc & {
    .product__list {
      grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku)* 3) / 4));
      --product-photo-h: 128px;
      @media (min-width: 960px) {
        grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku)* 4) / 5));
      }
    }
    .product__list--type {
      font-size: 10px
    }
    .product__list--title {
      font-size: 12px;
    }
    .product__list--title, .product__list--price {
      margin: 0;
      padding: 0;
    }
    .product__list--minmax {
      font-size: 14px;
      padding-top: .5em;
    }
    .product__list--text-wrapper {
      padding: 8px;
      padding-bottom: 14px;
    }
  }
  .is-sp & {
    .product__list--inner {
      gap: 0;
      grid-template-columns: 1fr;
    }
    .product__list--image-wrapper {
      display: none;
    }
    .product__list--text-wrapper {
      display: grid;
      grid-template-columns: 1fr max-content;
      align-items: center;
      gap: 1em;
    }
    .product__list--title, .product__list--price {
      margin: 0;
      padding: 0;
    }
  }
}
/*end 商品カセットスタイル*/
/*商品カセット下注釈枠*/
.product__notes {
  color: #000;
  font-size: min((20vw / 7.5), 12px);
  margin-top: 1.5em;
}
.product__notes--item {
  text-indent: -1.25em;
  padding-left: 1.25em;
  &::before {
    content: "※";
    margin-right: .25em;
  }
  &:not(:first-child) {
    margin-top: .25em;
  }
}
/*end 商品カセット下注釈枠スタイル*/
/*下層商品枠ナビ*/
#mainArea:has(#product-navi:first-child) {
  padding-top: min((18vw / 7.5), 23px);
}
.is-sp #product-navi + #product {
  margin-top: 0;
}
#product-navi + .banner__wrapper {
  margin-top: min((100vw / 7.5), 68px);
}
.product-lineup {
  width: var(--default-width);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min((10vw / 7.5), 16px);
  @media(width >=750px) {
    & {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .product-lineup__link {
      min-width: 114px;
    }
  }
}
.product-lineup__link {
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: center;
  gap: .5em;
  height: 100%;
  font-size: min((30vw / 7.5), 16px);
  line-height: 1.2;
  font-weight: bold;
  background: var(--lineup-btn-bg);
  --lineup-btn-bg: var(--default-color-gradation_white);
  padding: .6em 1.25em .7em 1.5em;
  position: relative;
  z-index: 1;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--default-color-gradation_red);
    opacity: 0;
  }
  .is-sp & {
    align-items: center;
    &::before {
      content: none;
    }
  }
  &::after {
    content: var(--default-ico-arrow-r);
    font-family: var(--default-ff-icon);
    line-height: 1;
    rotate: 90deg;
    translate: 0 .05em;
  }
  &.is-back-top {
    &::after {
      rotate: 0deg;
    }
  }
}
/*end 下層商品枠ナビスタイル*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .product-lineup__link {
    &:hover {
      transition: var(--default-hover-speed);
      color: #fff !important;
      &::before {
        transition: var(--default-hover-speed);
        opacity: 1;
      }
    }
  }
  .product__list--inner:not(.is-lock) {
    transition: var(--default-hover-speed);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}