@charset "UTF-8";
/* =====================================================
  CASE DETAIL
  MYTHOS PROJECT
  quiet / apple-like / refined
===================================================== */


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

.icz-case{
  background:#fff;
}


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

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

.icz-case-title{
  margin:0;
  font-family:var(--icz-en);

  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;

  text-transform:uppercase;
  color:var(--icz-ink);
}

.icz-case-sub{
  margin:var(--icz-space-8) 0 0;
  font-family:var(--icz-en);

  font-size:12px;
  line-height:1.8;
  letter-spacing:.06em;
  font-weight:400;

  color:var(--icz-ink-soft);
}


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

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

.icz-case .icz-section:last-of-type{
  padding-bottom:var(--icz-space-89);
}

.icz-case-background{
  padding-top:var(--icz-space-21);
}


/* =====================================================
  COMMON HEAD
===================================================== */

.icz-case-head{
  margin-bottom:var(--icz-space-21);
}

.icz-case-head .icz-kicker{
  margin:0 0 var(--icz-space-13);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:400;
  color:var(--icz-ink-soft);
}

.icz-case-head .icz-h2{
  margin:0;

  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;

  color:var(--icz-ink);
}


/* =====================================================
  BODY COPY
===================================================== */

.icz-case .icz-body{
  max-width:34em;
}

.icz-case .icz-body p,
.icz-case-structure-text,
.icz-case-structure-text-sub,
.icz-poetry-line{
  margin:0;
  font-family:var(--icz-ja);

  font-size:12px;
  line-height:1.95;
  letter-spacing:.04em;

  color:var(--icz-ink);
}

.icz-case-structure-text,
.icz-case-structure-text-sub{
  max-width:36em;
}


/* =====================================================
  POETRY TEXT
===================================================== */

.icz-body--poetry{
  max-width:34em;
}

.icz-poetry-block{
  margin:0;
}

.icz-poetry-block + .icz-poetry-block{
  margin-top:var(--icz-space-34);
}

.icz-poetry-line{
  margin:0;
}

.icz-poetry-line + .icz-poetry-line{
  margin-top:2px;
}

.icz-poetry-block--last{
  margin-top:var(--icz-space-34);
}


/* =====================================================
  STRUCTURE
===================================================== */

.icz-case-structure-copy{
  max-width:36em;
}

.icz-case-structure-text-sub{
  margin-top:var(--icz-space-8);
}

.icz-case-structure-grid{
  margin-top:var(--icz-space-21);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--icz-space-21);
  align-items:start;
}

.icz-case-node{
  padding:var(--icz-space-13) 0 var(--icz-space-13);
  border-top:1px solid var(--icz-line);
}

.icz-node-title{
  margin:0;
  font-family:var(--icz-en);

  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;

  text-transform:uppercase;
  color:var(--icz-ink);
}

.icz-node-desc{
  margin:var(--icz-space-8) 0 0;
  font-family:var(--icz-en);

  font-size:10px;
  line-height:1.6;
  letter-spacing:.12em;

  text-transform:uppercase;
  color:var(--icz-ink-soft);
}


/* =====================================================
  WEBSITES
===================================================== */

.icz-case-websites .icz-list{
  margin-top:var(--icz-space-21);
  border-top:1px solid var(--icz-line);
}

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

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

.icz-case-websites .icz-list__link:hover{
  opacity:.68;
  transform:translateX(1px);
}

.icz-case-websites .icz-list__title{
  margin:0;
  font-family:var(--icz-en);

  font-size:14px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;

  text-transform:uppercase;
  color:var(--icz-ink);
}


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

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

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


/* =====================================================
  DEFAULT LINK
===================================================== */

.icz-case a{
  color:inherit;
}


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

@media (max-width:768px){

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

  .icz-case-sub{
    margin-top:var(--icz-space-8);
    font-size:12px;
    line-height:1.8;
  }

  .icz-case .icz-section{
    padding-top:var(--icz-space-34);
  }

  .icz-case-background{
    padding-top:var(--icz-space-13);
  }

  .icz-case .icz-section:last-of-type{
    padding-bottom:var(--icz-space-55);
  }

  .icz-case-head{
    margin-bottom:var(--icz-space-13);
  }

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

  .icz-case-head .icz-h2{
    font-size:14px;
  }

  .icz-case .icz-body{
    max-width:none;
  }

  .icz-case .icz-body p,
  .icz-case-structure-text,
  .icz-case-structure-text-sub,
  .icz-poetry-line{
    font-size:12px;
    line-height:1.95;
  }

  .icz-case-structure-grid{
    grid-template-columns:1fr;
    gap:0;
    margin-top:var(--icz-space-21);
  }

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

}