/* =========================================================
   Ultra Sponsor
   Common Sponsor UI
========================================================= */


/* =========================================================
   Page Layout
========================================================= */

.ultra-page-layout{
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    176px;

  gap: 32px;

  align-items: start;

  width: 100%;
  max-width: 1140px;

  margin: 0 auto;
}

.ultra-page-content{
  min-width: 0;
}


.ultra-page-layout--single{
  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0 auto;
}


/* =========================================================
   Sponsor Side
========================================================= */

.ultra-sponsorSide{
  position: relative;

  width: 100%;
  min-width: 0;

  padding-top:
    calc(
      var(--fuji-header-height, 60px)
      + 48px
    );
}

.ultra-sponsorSide__inner{
  position: sticky;

  top:
    calc(
      var(--fuji-header-height, 60px)
      + 24px
    );

  width: 100%;

  padding:
    12px
    4px
    32px;

  background: transparent;

  transform: translateX(-8px);
}


/* =========================================================
   Sponsor Side Group
========================================================= */

.ultra-sponsorSide__group{
  display: flex;

  flex-direction: column;
  align-items: center;

  width: 100%;
}

.ultra-sponsorSide__group
+ .ultra-sponsorSide__group{
  margin-top: 42px;
}


/* =========================================================
   Sponsor Side Item
========================================================= */

.ultra-sponsorSide__item{
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 0;
  padding: 0;

  color: inherit;

  text-decoration: none;

  opacity: 1;

  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ultra-sponsorSide__item img{
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;
}


/* =========================================================
   Related
========================================================= */

.ultra-sponsorSide__item--related{
  min-height: 72px;
}

.ultra-sponsorSide__item--related img{
  max-width: 154px;
  max-height: 56px;
}


/* =========================================================
   Major Sponsor
========================================================= */

.ultra-sponsorSide__item--major{
  min-height: 72px;
}

.ultra-sponsorSide__item--major img{
  max-width: 152px;
  max-height: 50px;
}


/* =========================================================
   Partner
========================================================= */

.ultra-sponsorSide__item--partner{
  min-height: 54px;
}

.ultra-sponsorSide__item--partner img{
  max-width: 132px;
  max-height: 46px;
}


/* =========================================================
   Support
========================================================= */

.ultra-sponsorSide__group--support{
  margin-top: 46px;
}

.ultra-sponsorSide__item--support{
  min-height: 42px;
}

.ultra-sponsorSide__item--support
+ .ultra-sponsorSide__item--support{
  margin-top: 30px;
}

.ultra-sponsorSide__item--support img{
  width: 116px;
  height: 38px;

  max-width: 100%;

  object-fit: contain;
}


/* =========================================================
   Logo Size Adjustment
========================================================= */

.ultra-sponsorSide__item--support.is-wide img{
  width: 128px;
}

.ultra-sponsorSide__item--support.is-compact img{
  width: 104px;
}


/* =========================================================
   Sponsor Side Hover
========================================================= */

@media (hover: hover) and (pointer: fine){

  .ultra-sponsorSide__item:hover{
    opacity: 0.74;

    transform:
      translateY(-2px);
  }

}


/* =========================================================
   Sponsor Footer
========================================================= */

.ultra-sponsorFooter{
  display: none;

  width: 100%;

  margin-top: 60px;

  border-top:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;
}

.ultra-sponsorFooter__inner{
  width:
    min(
      440px,
      calc(100% - 32px)
    );

  margin: 0 auto;

  padding:
    42px
    0
    46px;
}


/* =========================================================
   Sponsor Footer Group
========================================================= */

.ultra-sponsorFooter__group{
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
}

.ultra-sponsorFooter__group
+ .ultra-sponsorFooter__group{
  margin-top: 34px;
}


/* =========================================================
   Sponsor Footer Item
========================================================= */

.ultra-sponsorFooter__item{
  display: flex;

  align-items: center;
  justify-content: center;

  color: inherit;

  text-decoration: none;

  opacity: 1;

  transition:
    opacity 0.25s ease;
}

.ultra-sponsorFooter__item img{
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;
}


/* =========================================================
   Sponsor Footer Related
========================================================= */

.ultra-sponsorFooter__item--related{
  width: 100%;
}

.ultra-sponsorFooter__item--related img{
  max-width: 205px;
  max-height: 72px;
}


/* =========================================================
   Sponsor Footer Major
========================================================= */

.ultra-sponsorFooter__item--major{
  width: 100%;
}

.ultra-sponsorFooter__item--major img{
  max-width: 200px;
  max-height: 70px;
}


/* =========================================================
   Sponsor Footer Partner
========================================================= */

.ultra-sponsorFooter__item--partner{
  width: 100%;
}

.ultra-sponsorFooter__item--partner img{
  max-width: 175px;
  max-height: 58px;
}


/* =========================================================
   Sponsor Footer Support
========================================================= */

.ultra-sponsorFooter__group--support{
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    30px
    10px;

  align-items: center;

  margin-top: 38px;
}

.ultra-sponsorFooter__item--support{
  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 42px;
}

.ultra-sponsorFooter__item--support img{
  width: 96px;
  height: 34px;

  max-width: 90%;

  object-fit: contain;
}


/* =========================================================
   Footer Logo Size Adjustment
========================================================= */

.ultra-sponsorFooter__item--support.is-wide img{
  width: 108px;
}

.ultra-sponsorFooter__item--support.is-compact img{
  width: 84px;
}


/* =========================================================
   Sponsor Footer Hover
========================================================= */

@media (hover: hover) and (pointer: fine){

  .ultra-sponsorFooter__item:hover{
    opacity: 0.72;
  }

}


/* =========================================================
   Medium PC
========================================================= */

@media screen and (max-width: 1100px)
and (min-width: 768px){

  .ultra-page-layout{
    grid-template-columns:
      minmax(0, 1fr)
      158px;

    gap: 24px;
  }

  .ultra-sponsorSide__inner{
    padding-left: 2px;
    padding-right: 2px;

    transform: translateX(-6px);
  }

  .ultra-sponsorSide__group
  + .ultra-sponsorSide__group{
    margin-top: 38px;
  }

  .ultra-sponsorSide__item--related img{
    max-width: 140px;
    max-height: 64px;
  }

  .ultra-sponsorSide__item--major img{
    max-width: 138px;
    max-height: 56px;
  }

  .ultra-sponsorSide__item--partner img{
    max-width: 122px;
    max-height: 44px;
  }

  .ultra-sponsorSide__group--support{
    margin-top: 42px;
  }

  .ultra-sponsorSide__item--support
  + .ultra-sponsorSide__item--support{
    margin-top: 28px;
  }

  .ultra-sponsorSide__item--support img{
    width: 110px;
    height: 36px;
  }

  .ultra-sponsorSide__item--support.is-wide img{
    width: 120px;
  }

  .ultra-sponsorSide__item--support.is-compact img{
    width: 98px;
  }

}


/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px){

  /* =========================
     Page Layout
  ========================= */

  .ultra-page-layout{
    display: block;

    width: 100%;
  }

  .ultra-page-content{
    width: 100%;
  }


  /* =========================
     Side Sponsor
  ========================= */

  .ultra-sponsorSide{
    display: none;
  }


  /* =========================
     Footer Sponsor
  ========================= */

  .ultra-sponsorFooter{
    display: block;

    margin-top: 44px;
  }

  .ultra-sponsorFooter__inner{
    width:
      calc(100% - 32px);

    padding:
      40px
      0
      44px;
  }


  /* =========================
     Sponsor Rank Divider
  ========================= */

  .ultra-sponsorFooter__group{
    position: relative;
  }

  .ultra-sponsorFooter__group
  + .ultra-sponsorFooter__group{
    margin-top: 40px;

    padding-top: 40px;
  }

  .ultra-sponsorFooter__group
  + .ultra-sponsorFooter__group::before{
    content: "";

    position: absolute;

    top: 0;
    left: 14%;

    width: 72%;

    height: 1px;

    background:
      rgba(0, 0, 0, 0.14);
  }


  /* =========================
     Related
  ========================= */

  .ultra-sponsorFooter__item--related img{
    max-width: 205px;
    max-height: 72px;
  }


  /* =========================
     Major
  ========================= */

  .ultra-sponsorFooter__item--major img{
    max-width: 200px;
    max-height: 70px;
  }


  /* =========================
     Partner
  ========================= */

  .ultra-sponsorFooter__item--partner img{
    max-width: 175px;
    max-height: 58px;
  }


  /* =========================
     Support
  ========================= */

  .ultra-sponsorFooter__group--support{
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      32px
      10px;

    margin-top: 40px;

    padding-top: 40px;
  }

  .ultra-sponsorFooter__item--support{
    min-height: 42px;
  }

  .ultra-sponsorFooter__item--support img{
    width: 96px;
    height: 34px;

    max-width: 90%;
  }

  .ultra-sponsorFooter__item--support.is-wide img{
    width: 108px;
  }

  .ultra-sponsorFooter__item--support.is-compact img{
    width: 84px;
  }

}


/* =========================================================
   Small SP
========================================================= */

@media screen and (max-width: 390px){

  .ultra-sponsorFooter__inner{
    width:
      calc(100% - 28px);
  }

  .ultra-sponsorFooter__group
  + .ultra-sponsorFooter__group{
    margin-top: 36px;

    padding-top: 36px;
  }

  .ultra-sponsorFooter__group
  + .ultra-sponsorFooter__group::before{
    left: 15%;

    width: 70%;
  }

  .ultra-sponsorFooter__group--support{
    gap:
      30px
      8px;

    margin-top: 36px;

    padding-top: 36px;
  }

  .ultra-sponsorFooter__item--related img{
    max-width: 190px;
  }

  .ultra-sponsorFooter__item--major img{
    max-width: 188px;
  }

  .ultra-sponsorFooter__item--partner img{
    max-width: 165px;
  }

  .ultra-sponsorFooter__item--support img{
    width: 90px;
    height: 32px;
  }

  .ultra-sponsorFooter__item--support.is-wide img{
    width: 100px;
  }

  .ultra-sponsorFooter__item--support.is-compact img{
    width: 80px;
  }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce){

  .ultra-sponsorSide__item,
  .ultra-sponsorFooter__item{
    transition: none;
  }

}