@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: min((131vw / 3.75), 261px);
  --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);
}

/*------------------------------------------------*/
/*★ ＝＝ headerArea_fair ＝＝ ★*/
#headerArea_fair {
  min-height: var(--mv-min-size-h);

  .is-size-sp & {
    --mv-min-size-h: max(var(--mv-kazari-size-h), var(--mv-gradation-size-h));
    /*仮*/
    --mv-kazari-left-size-w: calc(260vw / 3.75);
    --mv-kazari-right-size-w: var(--mv-kazari-left-size-w);
    --mv-kazari-left-posi-y: calc(36vw / 3.75);
    --mv-kazari-size-h: calc(272vw / 3.75);
    --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-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;
    margin-top: 70px;
  }
}

/*------------------------------------------------*/
/*★ ＝＝ 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) {}