@charset "utf-8";

/* ==================================================
 * ==================================================
 * sponsorship-page
 * ==================================================
 * ================================================== */
.sponsorship-page{
  --sponsorship-brand: var(--color-brand);
  --sponsorship-brand-dark: var(--color-brand-dark);
  --sponsorship-rule: rgba(0,0,0,.05);
  --sponsorship-rule-light: rgba(255,255,255,.15);
  --sponsorship-ease: cubic-bezier(.22,1,.36,1);
  
  min-width: 0;
}

/* ==================================================
 * ==================================================
 * sponsorship-hero
 * ==================================================
 * ================================================== */
.sponsorship-hero{
  --sponsorship-hero-min-height: min(60svh, max(40rem, 64vw));
  --sponsorship-hero-grid-size: max(4rem, 8vw);
  --sponsorship-hero-grid-offset: max(2rem, 4vw);
  
  display: grid;
  min-height: var(--sponsorship-hero-min-height);
  padding-top: var(--layout-header-height);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sponsorship-hero__grid{
  background-image:
    linear-gradient(to right, var(--sponsorship-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sponsorship-rule) 1px, transparent 1px);
  background-size:
    var(--sponsorship-hero-grid-size) 100%,
    100% var(--sponsorship-hero-grid-size);
  background-position:
    calc(50% + var(--sponsorship-hero-grid-offset)) 0,
    0 calc(50% + var(--sponsorship-hero-grid-offset));
  background-repeat: repeat-x, repeat-y;
  border-bottom: 1px solid var(--sponsorship-rule);
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: sponsorship-hero-grid-enter 1800ms cubic-bezier(.22,1,.36,1) 120ms both;
}
.sponsorship-hero__inner{
  display: grid;
  width: min(100%, var(--layout-inner-width));
  min-height: calc(var(--sponsorship-hero-min-height) - var(--layout-header-height));
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: var(--layout-inner-padding);
  margin-inline: auto;
}
.sponsorship-hero__main{
  display: grid;
  min-width: 0;
}
.sponsorship-hero__content{
  display: grid;
  align-content: center;
  justify-items: center;
  column-gap: clamp(3rem, 6vw, 6rem);
  row-gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
  text-align: center;
}
.sponsorship-hero__head{
  display: grid;
  row-gap: clamp(1rem, 1.5vw, 1.5rem);
  width: min(100%, 48rem);
}
.sponsorship-hero__title-en{
  color: var(--sponsorship-accent-dark);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sponsorship-hero__title-ja{
  font-size: var(--fs-6xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sponsorship-hero__body{
  display: grid;
  row-gap: clamp(1rem, 1.5vw, 1.5rem);
  width: min(100%, 32rem);
}
.sponsorship-hero__lead{
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.6;
}
.sponsorship-hero__text{
  color: rgba(0,0,0,.80);
}

/* ==================================================
 * sponsorship-hero responsive 1025px
 * ================================================== */
@media (min-width: 1025px){
  .sponsorship-hero__content{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-items: stretch;
    text-align: left;
  }
  .sponsorship-hero__body{
    justify-self: center;
  }
}

/* ==================================================
 * sponsorship-hero keyframes
 * ================================================== */
@keyframes sponsorship-hero-grid-enter{
  from{ opacity: 0; clip-path: inset(50%); }
  to{ opacity: 1; clip-path: inset(0); }
}

/* ==================================================
 * sponsorship-hero reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .sponsorship-hero__grid{
    animation: none;
  }
}