@charset "utf-8";
.product__list {
  &:not(.splide__list) {
    --gap: min((30vw / 3.75), 24px);
    display: grid;
    gap: var(--gap);
    --col-num: 1;
    --product-cassette-title-font-size: 16px;
    --product-cassette-minmax-font-size: 18px;
    --product-cassette-hotel-rank-height: 14px;
    @media (width > 640px) {
      --col-num: 2;
      grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
    }
    .is-size-pc & {
      --col-num: 4;
      @media (width < 1200px) {
        --col-num: 3;
      }
    }
    @media (width <= 640px) {
      .product__list--inner {
        padding: 8px;
        gap: 0 8px;
        grid-template-columns: 138px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
          'photo text'
          'type text';
      }
      .product__list--image-wrapper {
        grid-area: photo;
      }
      .product__list--type {
        grid-area: type;
        align-self: start;
        font-size: var(--product-cassette-obi-font-size, 12px);
      }
      .product__list--text-wrapper {
        grid-area: text;
        gap: var(--product-cassette-text-gap, 8px);
        --product-cassette-text-wrapper-padding: 0;
      }
      .product__list--detail,
      .product__list--more {
        padding: 0;
      }
    }
  }
  .product__list--inner {
    height: 100%;
    display: grid;
    align-content: start;
    grid-template-rows: repeat(2, auto) 1fr;
    background: var(--product-cassette-bg, #fff);
    color: inherit;
    font-weight: var(--product-cassette-font-weight, normal);
    border-radius: var(--product-cassette-radius, none);
    border: var(--product-cassette-border, 1px solid #b1b9c4);
    overflow: hidden;
  }
  .product__list--image {
    aspect-ratio: var(--product-cassette-photo-aspect-ratio, 944 / 628);
    object-fit: cover;
    object-position: right bottom;
  }
  .product__list--type {
    background: var(--product-cassette-obi-bg, #000);
    color: var(--product-cassette-obi-font-color, #fff);
    text-align: center;
    font-size: var(--product-cassette-obi-font-size, 12px);
    font-weight: var(--product-cassette-obi-font-weight, normal);
    padding: var(--product-cassette-obi-padding, 4px 6px);
  }
  .product__list--text-wrapper {
    display: grid;
    align-content: space-between;
    padding: var(--product-cassette-text-wrapper-padding, 8px);
    .product__list--title {
      font-size: var(--product-cassette-title-font-size, min((14vw / 3.75), 16px));
      line-height: var(--product-cassette-title-line-height, 1.3);
      font-weight: var(--product-cassette-title-font-weight, bold);
      &:not(:last-child) {
        margin-bottom: var(--product-cassette-title-margin-bottom, 4px);
      }
      .product__list--title--rank {
        margin-bottom: var(--product-cassette-hotel-rank-margin-bottom, 4px);
        .is-hotel-rank {
          display: block;
          width: 100%;
          height: var(--product-cassette-hotel-rank-height, min((12vw / 3.75), 14px));
          object-fit: contain;
          object-position: left center;
        }
      }
      .product__list--title--area {
        display: var(--product-cassette-title-area-display, inline-block);
        background: var(--product-cassette-title-area-bg, #eee);
        font-size: var(--product-cassette-title-area-font-size, 12px);
        line-height: var(--product-cassette-title-area-line-height, 1.3);
        padding: var(--product-cassette-title-area-padding, 2px 4px);
        margin-bottom: var(--product-cassette-title-area-margin-bottom, 4px);
      }
      .product__list--title--airport {
        display: var(--product-cassette-title-airport-display, inline-block);
      }
    }
    .product__list--detail {
      font-size: var(--product-cassette-detail-font-size, 12px);
      line-height: var(--product-cassette-detail-line-height, 1.5);
    }
    .product__list--point {
      font-size: var(--product-cassette-point-font-size, 12px);
      line-height: var(--product-cassette-point-line-height, 1.5);
      margin-top: var(--product-cassette-point-margin-top, 8px);
    }
    .product__list--more {
      width: 100%;
      font-size: var(--product-cassette-more-font-size, 12px);
      line-height: var(--product-cassette-more-line-height, 1.3);
      display: grid;
      grid-template-columns: 72px 1fr;
      align-items: baseline;
      gap: 0 var(--product-cassette-more-gap, 4px);
      margin-top: var(--product-cassette-more-margin-top, 1em);
      + .product__list--more {
        margin-top: var(--product-cassette-more-margin-top2, 1px);
      }
      .product__list--more--title {
        display: inline-block;
        line-height: var(--product-cassette-more-title-line-height, 1.3);
        background: var(--product-cassette-more-title-bg, #7d7d7d);
        color: var(--product-cassette-more-title-color, #fff);
        text-align: center;
        padding: var(--product-cassette-more-title-padding, 3px);
      }
    }
    .product__list--label {
      display: flex;
      flex-wrap: wrap;
      gap: var(--product-cassette-label-gap, 4px);
      margin-bottom: var(--product-cassette-label-margin-bottom, 4px);
      .product__list--label--item {
        font-size: var(--product-cassette-label-font-size, 12px);
        line-height: var(--product-cassette-label-line-height, 1.3);
        font-weight: var(--product-cassette-label-font-weight, normal);
        color: var(--product-cassette-label-font-color, #000);
        background: var(--product-cassette-label-bg, #eee);
        padding: var(--product-cassette-label-padding, 4px 8px);
        border-radius: var(--product-cassette-label-radius, 0px);
        &.is-only-ol {
          --product-cassette-label-bg: #ffe500;
        }
        &.is-seat-W {
          --product-cassette-label-bg: #b6efae;
        }
        &.is-seat-C {
          --product-cassette-label-bg: #d5afe8;
        }
        &.is-seat-F {
          --product-cassette-label-bg: #d9c269;
        }
      }
    }
    .product__list--tokuten {
      border-top: 1px dashed;
      padding-top: 0.5em;
      margin-top: 1em;
      font-size: var(--product-cassette-tokuten-font-size, 12px);
      color: var(--product-cassette-tokuten-color, #666);
      line-height: var(--product-cassette-tokuten-line-height, 1.3);
      .product__list--tokuten--item {
        padding-left: 1em;
        text-indent: -1em;
      }
    }
    .product__list--price {
      text-align: right;
      margin-top: var(--product-cassette-price-margin-top, 20px);
    }
    .product__list--minmax {
      color: var(--default-color-pink-dark);
      font-size: var(--product-cassette-minmax-font-size, min((16vw / 3.75), 18px));
      line-height: var(--product-cassette-minmax-line-height, 1.3);
      color: var(--product-cassette-minmax-color, #df0d00);
      font-weight: var(--product-cassette-minmax-font-weight, bold);
      .is-en,
      .is-kara {
        font-size: var(--product-cassette-minmax-font-size-small, 12px);
      }
      &:not(:last-child) {
        margin-bottom: var(--product-cassette-minmax-margin-bottom, 4px);
      }
    }
    .product__list--dep,
    .product__list--notes {
      font-size: var(--product-cassette-dep-notes-font-size, 12px);
      line-height: var(--product-cassette-dep-notes-line-height, 1.3);
      color: var(--product-cassette-dep-notes-color, #697180);
    }
  }
}
.product__notes {
  .product__notes--item {
    &::before {
      content: '※';
    }
  }
}