@charset "utf-8";
/*------------------------------------------------*/
/*★ フェア独自スタイル設定 ★*/
/*------------------------------------------------*/
:root {
  /*fair-color*/
  --fair-color-primary: #e85298;
  --fair-color-primary-hover: color-mix(in srgb, var(--fair-color-primary), transparent 25%);
  --fair-color-secondary: #74a115;
  --fair-color-tertiary: #ffa600;
  --fair-color-pagination: #d9d9d9;
  --fair-color-bg: #fff5f5;
  --fair-color-portal-navi-button-bg: #000;
  --fair-color-portal-navi-button-text: #fff;
  /*fair-search*/
  --fair-search-bg: url(/fair/spring/assets/common/images/footer_bg.webp);
  /*fair-logo*/
  --fair-logo: url(/fair/spring/assets/common/images/fair_logo_medium.svg); /*MV*/
  --fair-logo-size-w: min((220vw / 3.75), 510px);
  --fair-logo-size-h: calc((220 / 440) * 100%);
  --fair-logo-s: url(/fair/spring/assets/common/images/fair_logo_small.svg); /*ナビ*/
  --fair-logo-s-size-w: 121.37px;
  @media (width >= 1200px) {
    --fair-logo-s-size-w: 102px;
  }
  --fair-logo-s-size-aspect: 121.37 / 18.96;
  /*fair-floatbtn*/
  --fair-floatbtn-bg: url(/fair/spring/assets/common/images/search_btn.webp);
  --fair-floatbtn-size-w: min((80vw / 3.75), 120px); /*SPはPCの70%→デザイナー指定ありで80へ変更*/
  --fair-floatbtn-size-h: var(--fair-floatbtn-size-w);
  --fair-floatbtn-posi-y: min((70vw / 3.75), 100px);
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  --mv-logo-size-w: var(--fair-logo-size-w);
  --mv-base-gradient-bg-1: linear-gradient(86deg, #ffc3d9 0%, #ffe5e5 50%, #f3c2c2 100%);
  --mv-base-gradient-bg-2: linear-gradient(
    180deg,
    var(--fair-color-primary) 0%,
    var(--fair-color-primary) var(--mv-base-gradient-bg-2-size-h),
    transparent var(--mv-base-gradient-bg-2-size-h),
    transparent 100%
  );
  background: var(--mv-base-gradient-bg-2), var(--mv-base-gradient-bg-1);

  .is-size-sp & {
    --mv-base-gradient-bg-2-size-h: calc(200vw / 3.75);
    --mv-gradation-size-h: min(100%, 340px);
    --mv-bg-url: url(../images/mv_bg_sp.png);
    --mv-bg-size-w: 100%;
    padding-top: calc(40vw / 3.75); /*春旅イレギュラー変更・calc利用*/
    .is-page-top & {
      --mv-base-gradient-bg-2-size-h: calc(276vw / 3.75);
      --fair-logo: url(/fair/spring/assets/common/images/fair_logo_sp.svg); /*MV TOP用*/
      --fair-logo-size-w: calc(148vw / 3.75);
      --fair-logo-size-h: calc(186vw / 3.75);
      --mv-bg-url: url(../images/mv_bg_top_sp.png);
    }
  }
  .is-size-pc & {
    --mv-base-gradient-bg-2-size-h: 360px;
    --mv-gradation-size-h: min(100%, 400px);
    --mv-bg-url: url(../images/mv_bg_pc.png);
    --mv-bg-size-w: 1350px;
    .is-page-top & {
      --fair-logo: url(/fair/spring/assets/common/images/fair_logo_pc.svg); /*MV TOP用*/
      --fair-logo-size-w: 578px;
      --fair-logo-size-h: 360px;
      --mv-base-gradient-bg-2-size-h: 465px;
      --mv-bg-url: url(../images/mv_bg_top_pc.png);
      --mv-bg-size-w: 1472px;
    }
    @media (width < 1160px) {
      &,
      .is-page-top & {
        --mv-bg-size-w: 126%;
      }
    }
  }
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mv-bg-url) no-repeat center top / var(--mv-bg-size-w);
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--mv-gradation-size-h);
    background: linear-gradient(to top, var(--fair-color-bg) 0%, transparent 100%);
  }
  .header-contents {
    position: relative;
    z-index: 1;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*AirZ CPNバナー*/
#economy .product-banners.is-top {
  .reco-banner.is-name-normalfair_kaigai_airz_economy_cpn {
    .reco-banner__lineup--item {
      max-width: 710px;
      --cover-img-height: calc((460 / 710) * 100%);
      @media (width > 860px) {
        max-width: 100%;
        --cover-img-height: calc((310 / var(--default-width-pc-val)) * 100%);
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
}