@charset "utf-8";
/* 「家族旅行夏先取りCPN用」レスポンシブCSS */
/*------------------------------------------------*/ :root {
  --default-width-sp: (690vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-color-red: #e90000;
  --default-color-kaigai: #00479d;
  --default-color-kokunai: #2ea307;
}
.is-inline-block {
  display: inline-block;
}
:is(.base-button, .base-small-button) {
  --border-color: var(--default-color-gray);
  display: grid;
  justify-items: center;
  font-size: var(--fs, min((24vw / 7.5), 20px));
  line-height: 1.2;
  &.is-kaigai, .summer-cpn__shisaku & {
    --bg: var(--default-color-kaigai);
  }
  &.is-kokunai {
    --bg: var(--default-color-kokunai);
  }
  &:not(:first-child) {
    margin-top: min((60vw / 7.5), 50px);
  }
}
.base-small-button {
  --width: min((552vw / 7.5), 296px);
}
:is(.base-button__link, .base-small-button__link) {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-columns: var(--columns, 1fr var(--icon-w, .85em));
  /*gap: 0;*/
  gap: 0 1em;
  color: var(--color, #fff);
  font-weight: 500;
  min-width: var(--width, min((432vw / 7.5), 432px));
  height: 100%;
  min-height: var(--height, min((88vw / 7.5), 60px));
  border-radius: 500px;
  padding: var(--yohaku, .5em 1.5em .6em 3.35em);
  background: var(--bg, #00479d); /*#ff9600 → #00479d*/
  cursor: pointer;
  &::after {
    content: "";
    width: 100%;
    height: var(--icon-h, 1.5em);
    background: no-repeat center center / cover;
    background-image: var(--icon, url("/cmn/icon/icon_arrow_right_white.svg"));
  }
  &[target="_blank"]::after {
    --icon: url("/cmn/icon/icon_launch_white.svg");
    --icon-h: .75em;
  }
  &[href^="#"]::after {
    transform: rotate(90deg);
  }
  &[class*="modal"] {
    --columns: 1fr;
    --yohaku: .5em 1.5em .6em;
    &::after {
      content: none;
    }
  }
}
/*MV：夏先取りクローズに伴い設定削除*/
/*section--summer--cpn*/
.summer-cpn {
  background: #fff;
}
.summer-cpn__block {
  padding: min((60vw / 7.5), 110px) 0;
  &#summer-cpn-product {
    padding-bottom: min((120vw / 7.5), 110px);
  }
}
.summer-cpn__block :is(.section__title, .product__title) {
  width: var(--ttl-width);
  margin: 0 auto var(--ttl-mb);
  &.shisaku__title {
    --ttl-width: min((694vw / 7.5), 960px);
    --ttl-mb: min((40vw / 7.5), 70px);
  }
  .summer-cpn__movie & {
    --ttl-width: min((400vw / 7.5), 257px);
    --ttl-mb: min((30vw / 7.5), 42px);
  }
  .summer-cpn__repost & {
    --ttl-width: min((477vw / 7.5), 477px);
    --ttl-mb: 1.5em;
  }
}
:is(.is-sp #summer-cpn-detail, .is-pc) .summer-cpn__inner {
  width: var(--default-width);
  margin: auto;
}
/*cpn-detail*/
#summer-cpn-detail {
  background: #004ea2;
  font-size: min((24vw / 7.5), 24px);
  line-height: 1.2;
  padding-top: min((85vw / 7.5), 85px);
  .is-pc & {
    padding-top: min((58vw / 7.5), 58px);
  }
  .summer-cpn__inner {
    display: grid;
    gap: min((60vw / 7.5), 80px) 0;
  }
}
.summer-cpn__shisaku {
  width: min((690vw / 7.5), 851px);
  margin: auto;
  background: #fff;
  padding: min((571vw / 7.5), 571px) 0 min((65vw / 7.5), 30px);
  position: relative;
  .is-pc & {
    padding-top: min((358vw / 7.5), 358px);
  }
}
.summer-cpn__shisaku--text {
  position: absolute;
  top: var(--posi-top, max((-67vw / 7.5), -67px));
  left: 50%;
  transform: translateX(-50%);
  .is-pc & {
    --posi-top: max((-28vw / 7.5), -28px);
    --text-size-h: min((392vw / 7.5), 392px);
  }
  .summer-cpn__shisaku--text--image {
    max-width: max-content;
    height: var(--text-size-h, min((640vw / 7.5), 640px));
    object-fit: contain;
  }
}
.summer-cpn__shisaku--buttons {
  position: relative;
  z-index: 1;
  --height: min((60vw / 7.5), 42px);
  --gap: min((30vw / 7.5), 40px);
  .base-button:not(:first-child) {
    margin-top: var(--gap);
  }
  .is-pc & {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    --width: auto;
    .base-button:not(:first-child) {
      margin-top: 0;
    }
  }
  .base-button__link {
    box-shadow: 0px min((4vw / 7.5), 4px) 0px 0px rgba(0, 0, 0, .13);
  }
}
.summer-cpn__shisaku--text, .summer-cpn__repost--text {
  text-align: center;
}
.summer-cpn__repost--info {
  font-size: min((22vw / 7.5), 16px);
  display: grid;
  gap: var(--yohaku, .5em);
  align-items: baseline;
  margin-top: min((40vw / 7.5), 60px);
}
.is-pc .summer-cpn__repost--info {
  grid-template-columns: 7.5em 1fr;
  --yohaku: .75em 1em;
}
.summer-cpn__repost--info--title {
  color: #fff;
  background: #449ac9;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  padding: 0.2em 0 0.25em;
}
.is-sp .summer-cpn__repost--info--title {
  width: 7.5em;
}
.summer-cpn__repost--info--detail {
  font-size: min((24vw / 7.5), 16px);
  line-height: calc(22 / 16);
}
.is-sp .summer-cpn__repost--info--detail:not(:last-child) {
  margin-bottom: .5em;
}
.summer-cpn__banners {
  display: grid;
  justify-items: center;
  gap: min((30vw / 7.5), 16px);
}
.summer-cpn__banner {
  width: min(100%, var(--banner-max-w, 710px));
  background: #fff;
  .is-pc & {
    --banner-max-w: 960px;
  }
}
/*product*/
#summer-cpn-product .section__title {
  --ttl-width: min((608vw / 7.5), 608px);
  --ttl-mb: min((77vw / 7.5), 67px);
}
.product__title {
  --ttl-width: min((221vw / 7.5), 221px);
  --ttl-mb: min((40vw / 7.5), 30px);
}
.product ~ .product {
  padding-top: min((170vw / 7.5), 130px);
}
/* product -- 商品カセット*/
.product__list--inner {
  font-size: min((20vw / 7.5), 12px);
  color: #333;
  text-decoration: none;
  position: relative;
  background: #fff;
  display: block;
  transition: opacity .4s;
}
.is-sp .product__list--inner {
  --product-photo-w: min((240vw / 7.5), 140px);
  --product-photo-h: auto;
  /*--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);
}
.is-sp .product__list--type {
  max-width: var(--product-photo-w);
}
.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-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");
  }
}
.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: auto 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 #939dad;
  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;
}
/*youtube*/
.youtube {
  width: min(100%, 600px);
  margin: auto;
}
.youtube__block {
  padding-top: calc((9 / 16) * 100%); /*YouTubeアスペクト比*/
  background: url("../images/movie_thumb.jpg") no-repeat center center / 100%;
  position: relative;
  cursor: pointer;
  transition: opacity .3s;
}
.youtube__block::before, .youtube__block::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.youtube__block::before {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .38);
  transition: background .3s;
}
.youtube__block::after {
  width: min(((85 / 640) * 100%), 85px);
  padding-top: min(((85 / 640) * 100%), 85px);
  height: 0;
  background: url("../images/movie_icon.png") no-repeat center center / contain;
}
.youtube__iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .youtube__block:hover::before {
    background: rgba(0, 0, 0, .58);
  }
  .product__list--inner, :is(.base-button__link, .base-small-button__link) {
    transition: opacity .3s;
    &:hover {
      opacity: .8;
    }
  }
}