@charset "UTF-8";
/* =====================================================
  CASE / WORKS INDEX
  quiet / minimal / top-aligned
===================================================== */


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

.icz-case-page{
  background:var(--icz-bg);
}


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

.icz-case-page .icz-case-hero{
  padding-top:var(--icz-space-89);
  padding-bottom:var(--icz-space-34);
}

.icz-case-page .icz-hero__title{
  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;
  text-transform:uppercase;
  color:var(--icz-ink);
}


/* =====================================================
  WORKS LIST
===================================================== */

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

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

.icz-case-list .icz-list__item{
  border-bottom:1px solid var(--icz-line-soft);
}

.icz-case-list .icz-list__link{
  display:block;
  padding:var(--icz-space-13) 0 var(--icz-space-8);
  text-decoration:none;
  color:inherit;
  transition:
    opacity var(--icz-dur) var(--icz-ease),
    transform var(--icz-dur) var(--icz-ease);
}

.icz-case-list .icz-list__link:hover{
  opacity:.88;
  transform:none;
}

.icz-case-list .icz-list__meta{
  margin:0 0 var(--icz-space-8);
  font-family:var(--icz-en);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:400;
  text-transform:uppercase;
  color:var(--icz-ink-soft);
}

.icz-case-list .icz-list__date{
  margin:0 0 6px;
  font-family:var(--icz-en);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.10em;
  color:var(--icz-ink-soft);
}

.icz-case-list .icz-list__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);
}

.icz-case-list .icz-list__sub{
  padding:0 0 var(--icz-space-13);
}

.icz-case-list .icz-list__label{
  margin:0 0 var(--icz-space-8);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.10em;
  color:var(--icz-ink-soft);
}

/* 縦並び */
.icz-case-list .icz-list__links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.icz-case-list .icz-list__links .icz-linkline{
  display:inline-block;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--icz-ink-soft);
  text-decoration:none;
}

.icz-case-list .icz-list__links .icz-linkline:hover{
  opacity:.72;
}


/* =====================================================
  INDEX
===================================================== */

.icz-case-page .icz-links{
  padding-top:var(--icz-space-55);
  padding-bottom:var(--icz-space-55);
}

.icz-case-page .icz-links__list{
  margin-top:var(--icz-space-8);
}

.icz-case-page .icz-links__list a,
.icz-case-page .icz-linkline{
  font-size:10px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--icz-ink-soft);
}


/* =====================================================
  FOOTER（ページ限定）
===================================================== */

.icz-case-page footer,
.icz-case-page .icz-footer{
  margin-top:var(--icz-space-89);
}

.icz-case-page footer *,
.icz-case-page .icz-footer *{
  font-size:8px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--icz-ink-faint);
}


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

.icz-case-page .icz-reveal{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .8s ease,
    transform .8s ease;
  will-change:opacity, transform;
}

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


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

@media (max-width:768px){

  .icz-case-page .icz-case-hero{
    padding-top:var(--icz-space-55);
    padding-bottom:var(--icz-space-21);
  }

  .icz-case-page .icz-hero__title{
    font-size:14px;
    line-height:1.45;
    letter-spacing:.06em;
  }

  .icz-case-list .icz-list{
    max-width:none;
    margin-top:var(--icz-space-13);
  }

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

  .icz-case-list .icz-list__meta{
    font-size:12px;
    line-height:1.2;
    letter-spacing:.22em;
  }

  .icz-case-list .icz-list__date{
    font-size:11px;
    line-height:1.4;
    letter-spacing:.10em;
  }

  .icz-case-list .icz-list__title{
    font-size:14px;
    line-height:1.45;
    letter-spacing:.06em;
  }

  .icz-case-list .icz-list__sub{
    padding:0 0 var(--icz-space-13);
  }

  .icz-case-list .icz-list__label{
    font-size:10px;
    line-height:1.6;
    letter-spacing:.10em;
  }

  .icz-case-list .icz-list__links{
    gap:6px;
  }

  .icz-case-list .icz-list__links .icz-linkline{
    font-size:10px;
    line-height:1.6;
    letter-spacing:.12em;
  }

  .icz-case-page .icz-links{
    padding-top:var(--icz-space-34);
    padding-bottom:var(--icz-space-34);
  }

  .icz-case-page .icz-links__list{
    margin-top:var(--icz-space-8);
  }

  .icz-case-page .icz-links__list a,
  .icz-case-page .icz-linkline{
    font-size:10px;
    line-height:1.6;
    letter-spacing:.12em;
  }

  .icz-case-page footer *,
  .icz-case-page .icz-footer *{
    font-size:8px;
  }

  .icz-case-page .icz-reveal{
    transform:none;
  }

}


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

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

  .icz-case-page .icz-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

}