@charset "UTF-8";
/* =====================================================
  TOP
  INCONNECTZERO
===================================================== */


/* =====================================================
  HERO
===================================================== */

.icz-hero{
  position:relative;
  width:100%;
  height:clamp(220px, 30vw, 380px);
  overflow:hidden;
}

.icz-hero__media{
  position:absolute;
  inset:0;
}

.icz-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.9;
  filter:saturate(.95) contrast(1.03) brightness(.98);
  animation:iczHeroDrift 18s ease-in-out infinite alternate;
  transform-origin:center center;
  will-change:transform;
  transform:translateZ(0);
}

.icz-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.16)
  );
  pointer-events:none;
}

.icz-hero .icz-container{
  position:relative;
  z-index:1;
  height:100%;
}

@keyframes iczHeroDrift{
  0%{ transform:scale(1) translate3d(0,0,0); }
  100%{ transform:scale(1.024) translate3d(0,-0.45%,0); }
}


/* =====================================================
  HERO → FIRST SECTION
===================================================== */

.icz-hero + .icz-case-preview{
  margin-top:var(--icz-space-34);
}


/* =====================================================
  SECTION RHYTHM
===================================================== */

.icz-case-preview{
  padding-top:0;
  padding-bottom:0;
}

.icz-about-preview{
  padding-top:var(--icz-space-89);
  padding-bottom:var(--icz-space-89);
  border-bottom:1px solid var(--icz-line-soft);
}


/* =====================================================
  KICKER（12px）
===================================================== */

.icz-kicker{
  font-size:12px;
  line-height:1.2;
  letter-spacing:.26em;
  font-weight:400;
  color:rgba(0,0,0,.48);
}


/* =====================================================
  WORKS（TITLE 14px）
===================================================== */

.icz-case-preview .icz-list{
  margin-top:var(--icz-space-21);
  max-width:640px;
}

.icz-case-preview .icz-list__link{
  display:block;
  padding:var(--icz-space-13) 0;
}

.icz-case-preview .icz-list__title{
  font-family:var(--icz-en);
  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;
  color:var(--icz-ink);
}

.icz-case-preview .icz-list__link:hover .icz-list__title{
  opacity:.8;
}


/* =====================================================
  ABOUT PREVIEW
===================================================== */

.icz-about-preview__link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:
    opacity .28s ease,
    transform .28s ease;
}

.icz-about-preview__link:hover{
  opacity:.88;
  transform:none;
}

.icz-about-preview__title{
  margin:0;
  font-family:var(--icz-en);
  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;
  color:var(--icz-ink);
  text-transform:uppercase;
}

.icz-about-preview__lead{
  margin-top:var(--icz-space-13);
  max-width:36em;
  font-family:var(--icz-ja);
  font-size:12px;
  line-height:1.95;
  letter-spacing:.04em;
  color:var(--icz-ink-soft);
}


/* =====================================================
  REVEAL BASE
===================================================== */

.icz-reveal{
  opacity:0;
  transform:translateY(var(--icz-reveal-distance, 10px));
  transition:
    opacity var(--icz-reveal-duration, .95s) cubic-bezier(.22,.61,.36,1),
    transform var(--icz-reveal-duration, .95s) cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.icz-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* =====================================================
  IN-APP BROWSER SAFE PATCH
===================================================== */

.is-inapp-browser .icz-hero{
  overflow:hidden;
}

.is-inapp-browser .icz-hero__media{
  transform:none !important;
}

.is-inapp-browser .icz-hero__media img{
  animation:none !important;
  transform:none !important;
  transform-origin:center center !important;
  will-change:auto !important;
  opacity:1 !important;
  filter:none !important;
}

.is-inapp-browser .icz-hero::after{
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.04),
    rgba(255,255,255,.12)
  );
}

.is-inapp-browser .icz-reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}

.is-inapp-browser .icz-case-preview .icz-list__link:hover .icz-list__title{
  opacity:1;
}

.is-inapp-browser .icz-about-preview__link{
  transition:opacity .28s ease;
}

.is-inapp-browser .icz-about-preview__link:hover{
  opacity:1;
}


/* =====================================================
  MOBILE
===================================================== */

@media (max-width:768px){

  .icz-hero{
    height:48vw;
    min-height:200px;
  }

  .icz-hero + .icz-case-preview{
    margin-top:var(--icz-space-34);
  }

  .icz-about-preview{
    padding-top:var(--icz-space-55);
    padding-bottom:var(--icz-space-55);
  }

  .icz-kicker{
    font-size:12px;
  }

  .icz-case-preview .icz-list{
    max-width:none;
  }

  .icz-case-preview .icz-list__link{
    padding:var(--icz-space-13) 0;
  }

  .icz-case-preview .icz-list__title{
    font-size:14px;
  }

  .icz-about-preview__title{
    font-size:14px;
  }

  .icz-about-preview__lead{
    margin-top:var(--icz-space-8);
    font-size:12px;
    line-height:1.9;
  }

  .icz-reveal{
    transform:none;
  }
}


/* =====================================================
  REDUCED MOTION
===================================================== */

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

  .icz-hero__media img{
    animation:none;
    transform:none;
  }

  .icz-about-preview__link,
  .icz-reveal{
    transition:none;
  }

  .icz-reveal{
    opacity:1;
  }

}