@charset "utf-8";
/*------------------------------------------------*/
/*★ フェア独自スタイル設定 ★*/
/*------------------------------------------------*/
:root {
  /*fair-color*/
  --fair-color-primary: #db0002;
  --fair-color-primary-hover: color-mix(in srgb, var(--fair-color-primary), transparent 25%);
  --fair-color-secondary: #014099;
  --fair-color-tertiary: #c28a11;
  --fair-color-pagination: #d9d9d9;
  --fair-color-bg: #fffade;
  --fair-color-portal-navi-button-bg: #000;
  --fair-color-portal-navi-button-text: #fff;
  /*fair-search*/
  --fair-search-bg: url(/fair/hatsuyume/assets/common/images/footer_bg.webp);
  /*fair-logo*/
  --fair-logo: url(/fair/hatsuyume/assets/common/images/fair_logo.svg); /*MV*/
  --fair-logo-size-w: min((335vw / 3.75), 666px);
  --fair-logo-size-h: calc((261 / 666) * 100%);
  --fair-logo-m: url(/fair/hatsuyume/assets/common/images/fair_logo_medium.svg); /*フッター*/
  --fair-logo-m-size-w: min((300vw / 3.75), 300px);
  --fair-logo-m-size-h: min((105vw / 3.75), 105px);
  --fair-logo-s: url(/fair/hatsuyume/assets/common/images/fair_logo_small.svg); /*ナビ*/
  --fair-logo-s-size-w: min((150vw / 3.75), 150px);
  --fair-logo-s-size-h: min((105vw / 3.75), 105px);
  /*fair-floatbtn*/
  --fair-floatbtn-bg: url(/fair/hatsuyume/assets/common/images/search_btn.webp);
  --fair-floatbtn-size-w: min((87vw / 3.75), 125px);
  --fair-floatbtn-size-h: min((99vw / 3.75), 142px);
  --fair-floatbtn-posi-y: min((70vw / 3.75), 100px);
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  min-height: var(--mv-min-size-h);
  .is-size-sp & {
    --mv-logo-size-w: min((335vw / 3.75), 452px);
    --mv-min-size-h: max(var(--mv-kazari-size-h), var(--mv-gradation-size-h)); /*仮*/
    --mv-kazari-left-size-w: min((340vw / 3.75), 460px); /*最大値は135%*/
    --mv-kazari-right-size-w: var(--mv-kazari-left-size-w);
    --mv-kazari-left-posi-y: min((36vw / 3.75), 49px);
    --mv-kazari-size-h: min((272vw / 3.75), 367px);
    --mv-gradation-start-posi-y: 179px;
    --mv-gradation-size-h: 340px;
    background: linear-gradient(
        to top,
        var(--fair-color-bg) 0%,
        var(--fair-color-bg) var(--mv-gradation-start-posi-y),
        transparent var(--mv-gradation-start-posi-y),
        transparent 100%
      ),
      url(../images/mv_bg_sp.webp) repeat center top / 375px;
    &:not(:has(.schedule-text)) {
      --mv-gradation-start-posi-y: 0;
    }
  }
  .is-size-pc & {
    --mv-logo-size-w: var(--fair-logo-size-w);
    --mv-min-size-h: var(--mv-kazari-size-h); /*仮*/
    --mv-kazari-left-size-w: 673px;
    --mv-kazari-right-size-w: 786px;
    --mv-kazari-size-h: 467px;
    --mv-gradation-size-h: 400px;
    background: url(../images/mv_kazari_bottom_right.webp) no-repeat right bottom / 571px,
      url(../images/mv_kazari_bottom_left.webp) no-repeat left bottom / 780px, url(../images/mv_bg_pc.webp) repeat center top / 1600px;
  }
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mv-kazari-size-h);
    background: url(../images/mv_kazari_top_left.webp) no-repeat left var(--mv-kazari-left-posi-y, 0) / var(--mv-kazari-left-size-w),
      url(../images/mv_kazari_top_right.webp) no-repeat right top / var(--mv-kazari-right-size-w);
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    bottom: var(--mv-gradation-start-posi-y, 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 ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  &::after {
    content: '';
    display: block;
    background: var(--fair-logo-m) no-repeat center top / contain;
    width: var(--fair-logo-m-size-w);
    height: var(--fair-logo-m-size-h);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
}