@charset "UTF-8";

/* =====================================================
  CASE DETAIL
  GINZA AKANE CAREERS

  Client Work
  Brand / Recruitment Architecture
===================================================== */


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

.icz-case-akane-careers{
  --akane-case-text:var(--icz-ink);
  --akane-case-muted:var(--icz-ink-soft);
  --akane-case-line:var(--icz-line);
  --akane-case-line-soft:var(--icz-line-soft);

  background:#fff;
  color:var(--akane-case-text);
}

.icz-case-akane-careers *,
.icz-case-akane-careers *::before,
.icz-case-akane-careers *::after{
  box-sizing:border-box;
}

.icz-case-akane-careers a{
  color:inherit;
}


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

.icz-case-akane-careers .akane-case-hero{
  padding-top:var(--icz-section-pt);
  padding-bottom:var(--icz-section-pb-narrow);
}

.icz-case-akane-careers .akane-case-hero .icz-kicker{
  margin:0;

  font-size:10px;
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:400;

  color:rgba(0,0,0,.62);
  opacity:1;
}

.akane-case-title{
  margin:var(--icz-space-8) 0 0;

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.14em;
  font-weight:400;
  text-transform:uppercase;

  color:var(--akane-case-text);
}

.icz-case-akane-careers .akane-case-hero__lead{
  margin-top:var(--icz-space-13);
  max-width:640px;
}


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

.icz-case-akane-careers .akane-case-body{
  padding-top:0;
  padding-bottom:var(--icz-space-89);
}


/* =====================================================
  BLOCK
===================================================== */

.akane-case-block{
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  column-gap:clamp(48px,7vw,112px);

  margin-top:var(--icz-space-89);
  padding-top:var(--icz-space-21);

  border-top:1px solid var(--akane-case-line-soft);
}

.akane-case-block:first-child{
  margin-top:0;
}

.akane-case-label{
  margin:0;

  font-family:var(--icz-en);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.22em;
  font-weight:400;

  color:rgba(0,0,0,.62);
  opacity:1;
}

.akane-case-content{
  min-width:0;
}


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

.icz-case-akane-careers .akane-case-content .icz-body{
  max-width:680px;
  margin:0;

  font-size:12px;
  line-height:2;
  letter-spacing:.04em;
  font-weight:400;

  color:var(--akane-case-text);
}

.icz-case-akane-careers .akane-case-content .icz-body + .icz-body{
  margin-top:var(--icz-space-21);
}


/* =====================================================
  STATEMENT
===================================================== */

.akane-case-statement{
  max-width:680px;
  margin:0 0 var(--icz-space-34);

  font-family:var(--icz-ja);
  font-size:12px;
  line-height:2;
  letter-spacing:.04em;
  font-weight:400;

  color:var(--akane-case-text);
}


/* =====================================================
  ONE BRAND / TWO ROLES
===================================================== */

.akane-role-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  border-top:1px solid var(--akane-case-line);
}

.akane-role-card{
  position:relative;

  min-height:360px;

  padding:
    var(--icz-space-21)
    clamp(24px,3vw,44px)
    var(--icz-space-34)
    0;

  border-bottom:1px solid var(--akane-case-line);
}

.akane-role-card + .akane-role-card{
  padding-left:clamp(24px,3vw,44px);
  padding-right:0;

  border-left:1px solid var(--akane-case-line-soft);
}

.akane-role-number{
  margin:0;

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.14em;

  color:var(--akane-case-muted);
}

.akane-role-title{
  margin:var(--icz-space-34) 0 0;

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.12em;
  font-weight:400;

  text-transform:uppercase;
}

.akane-role-sub{
  margin:4px 0 0;

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.12em;

  color:var(--akane-case-muted);
}

.akane-role-copy{
  max-width:340px;
  margin:var(--icz-space-34) 0 0;

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

.akane-role-list{
  list-style:none;

  margin:var(--icz-space-34) 0 0;
  padding:0;
}

.akane-role-list li{
  padding:8px 0;

  border-top:1px solid var(--akane-case-line-soft);

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.akane-role-list li:last-child{
  border-bottom:1px solid var(--akane-case-line-soft);
}

.akane-role-message{
  margin-top:var(--icz-space-34);
}

.akane-role-message p{
  margin:0;

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

.akane-role-message p + p{
  margin-top:6px;
}


/* =====================================================
  THEME ARCHITECTURE
===================================================== */

.akane-architecture{
  max-width:820px;

  border-top:1px solid var(--akane-case-line);
}

.akane-architecture-row{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  column-gap:var(--icz-space-21);

  padding:var(--icz-space-13) 0;

  border-bottom:1px solid var(--akane-case-line-soft);
}

.akane-architecture-label{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;
}

.akane-architecture-text{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.06em;

  color:var(--akane-case-muted);
}


/* =====================================================
  PROJECT LINKS
===================================================== */

.akane-project-links{
  max-width:900px;

  border-top:1px solid var(--akane-case-line);
}

.akane-project-link{
  position:relative;

  display:grid;
  grid-template-columns:130px minmax(0,1fr) 190px 20px;
  align-items:center;
  column-gap:var(--icz-space-21);

  min-height:108px;

  padding:var(--icz-space-13) 0;

  border-bottom:1px solid var(--akane-case-line);

  text-decoration:none;

  transition:
    opacity var(--icz-dur) var(--icz-ease);
}

.akane-project-link:hover{
  opacity:.58;
}

.akane-project-link__meta{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;

  color:var(--akane-case-muted);
}

.akane-project-link__title{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;
}

.akane-project-link__type{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;

  color:var(--akane-case-muted);
}

.akane-project-link__arrow{
  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;

  text-align:right;
}


/* =====================================================
  TECHNICAL SPECIFICATION
===================================================== */

.akane-case-block--specification{
  align-items:start;
}

.akane-spec-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,4vw,56px);

  border-top:1px solid var(--akane-case-line);
}

.akane-spec-group{
  min-width:0;

  padding:
    var(--icz-space-21)
    0
    var(--icz-space-34);

  border-bottom:1px solid var(--akane-case-line-soft);
}

.akane-spec-title{
  margin:0 0 var(--icz-space-13);

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;
  font-weight:400;

  color:var(--akane-case-text);
}

.akane-spec-text{
  margin:0;

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.06em;

  color:var(--akane-case-muted);
}


/* =====================================================
  CLOSING
===================================================== */

.akane-case-block--closing{
  padding-bottom:var(--icz-space-34);
}

.akane-case-closing-copy{
  max-width:680px;

  margin:
    0
    0
    var(--icz-space-34);

  font-family:var(--icz-en);
  font-size:12px;
  line-height:2;
  letter-spacing:.10em;
  font-weight:400;
}


/* =====================================================
  BACK TO INDEX
===================================================== */

.akane-case-index{
  display:flex;
  justify-content:flex-start;

  margin-top:var(--icz-space-89);
  padding-top:var(--icz-space-21);

  border-top:1px solid var(--akane-case-line);
}

.akane-case-index a{
  display:inline-flex;
  align-items:center;
  gap:14px;

  padding-bottom:5px;

  border-bottom:1px solid currentColor;

  font-family:var(--icz-en);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.22em;
  font-weight:400;

  text-transform:uppercase;
  text-decoration:none;

  color:var(--akane-case-muted);

  transition:
    opacity var(--icz-dur) var(--icz-ease);
}

.akane-case-index a::before{
  content:"←";

  display:block;

  font-size:10px;
  line-height:1.4;
}

.akane-case-index a:hover{
  opacity:.58;
}


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

.icz-case-akane-careers .icz-reveal{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:none !important;
}


/* =====================================================
  TABLET
===================================================== */

@media (max-width:960px){

  .akane-case-block{
    grid-template-columns:130px minmax(0,1fr);
    column-gap:40px;
  }

  .akane-spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px;
  }

  .akane-project-link{
    grid-template-columns:
      110px
      minmax(0,1fr)
      150px
      20px;

    column-gap:18px;
  }

}


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

@media (max-width:768px){

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

  .icz-case-akane-careers .akane-case-hero{
    min-height:0;
    height:auto;

    padding-top:72px;
    padding-bottom:56px;
  }

  .icz-case-akane-careers .akane-case-hero .icz-container{
    min-height:0;
    height:auto;
  }

  .akane-case-title{
    font-size:12px;
    line-height:2;
    letter-spacing:.12em;
  }

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


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

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


  /* ===================================================
    BLOCK
  =================================================== */

  .akane-case-block{
    display:block;

    margin-top:var(--icz-space-55);
    padding-top:var(--icz-space-13);
  }

  .akane-case-block:first-child{
    margin-top:0;
  }

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


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

  .icz-case-akane-careers .akane-case-content .icz-body{
    max-width:none;

    font-size:12px;
    line-height:2;
  }

  .akane-case-statement{
    max-width:none;

    margin-bottom:var(--icz-space-34);

    font-size:12px;
    line-height:2;
  }


  /* ===================================================
    ONE BRAND / TWO ROLES
  =================================================== */

  .akane-role-grid{
    grid-template-columns:1fr;
  }

  .akane-role-card{
    min-height:0;

    padding:
      var(--icz-space-21)
      0
      var(--icz-space-34);
  }

  .akane-role-card + .akane-role-card{
    padding-left:0;
    padding-right:0;

    border-left:none;
  }

  .akane-role-title{
    margin-top:var(--icz-space-21);

    font-size:12px;
    line-height:2;
  }

  .akane-role-copy{
    margin-top:var(--icz-space-21);
  }

  .akane-role-list{
    margin-top:var(--icz-space-21);
  }


  /* ===================================================
    ARCHITECTURE
  =================================================== */

  .akane-architecture-row{
    grid-template-columns:1fr;
    row-gap:6px;

    padding:var(--icz-space-13) 0;
  }


  /* ===================================================
    PROJECT LINKS
  =================================================== */

  .akane-project-link{
    grid-template-columns:minmax(0,1fr) 20px;

    column-gap:20px;
    row-gap:6px;

    min-height:0;

    padding:var(--icz-space-21) 0;
  }

  .akane-project-link__meta{
    grid-column:1;

    font-size:12px;
    line-height:2;
  }

  .akane-project-link__title{
    grid-column:1;

    font-size:12px;
    line-height:2;
  }

  .akane-project-link__type{
    grid-column:1;

    font-size:12px;
    line-height:2;
  }

  .akane-project-link__arrow{
    grid-column:2;
    grid-row:1 / span 3;

    align-self:center;

    font-size:12px;
    line-height:2;
  }


  /* ===================================================
    TECHNICAL SPECIFICATION
  =================================================== */

  .akane-spec-grid{
    grid-template-columns:1fr;
    column-gap:0;
  }

  .akane-spec-group{
    padding:
      var(--icz-space-21)
      0;
  }

  .akane-spec-title{
    font-size:12px;
    line-height:2;
  }

  .akane-spec-text{
    font-size:12px;
    line-height:2;
  }


  /* ===================================================
    CLOSING
  =================================================== */

  .akane-case-closing-copy{
    max-width:none;

    margin-bottom:var(--icz-space-34);

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


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

  .akane-case-index{
    margin-top:var(--icz-space-55);
  }

  .akane-case-index a{
    font-size:10px;
    line-height:1.4;
    letter-spacing:.22em;
  }

  .akane-case-index a::before{
    font-size:10px;
    line-height:1.4;
  }

}