@charset "UTF-8";

/* =====================================================
  FONT RENDERING
===================================================== */

html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


/* =====================================================
  LAYOUT
===================================================== */

.icz-main{
  min-height:100vh;
  min-height:100svh;
  background:var(--icz-bg);
}

.icz-container{
  width:min(100%, var(--icz-container));
  margin-inline:auto;
  padding-inline:var(--icz-pad-pc);
}

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


/* =====================================================
  LOADING
  final / refined
===================================================== */

.icz-loading{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  opacity:1;
  visibility:visible;
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    visibility .65s cubic-bezier(.22,.61,.36,1);
}

.icz-loading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.icz-loading__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  transform:translateX(-6px);
}

.icz-loading__logo{
  font-family:"Cinzel", var(--icz-en);
  font-size:10px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--icz-ink);
  white-space:nowrap;
}

.icz-loading__line{
  position:relative;
  width:200px;
  height:1px;
  margin-top:var(--icz-space-13);
  overflow:hidden;
}

.icz-loading__line::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.18);
  transform:scaleX(0);
  transform-origin:left center;
  animation:iczLoadingLine 1.6s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes iczLoadingLine{
  0%{
    transform:scaleX(0);
  }
  100%{
    transform:scaleX(.92);
  }
}


/* =====================================================
  HEADER
===================================================== */

.icz-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:0;
}

.icz-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  gap:21px;
}

.icz-logo{
  display:inline-flex;
  align-items:center;
  font-family:var(--icz-en);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--icz-ink);
}


/* =====================================================
  MENU BUTTON
===================================================== */

.icz-menuBtn,
.icz-menuClose{
  position:relative;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.icz-menuBtn__line,
.icz-menuClose__line{
  position:absolute;
  width:18px;
  height:1px;
  background:rgba(0,0,0,.78);
  transition:
    opacity .45s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1);
}

.icz-menuBtn__line:nth-child(1){
  transform:translateY(-4px);
}

.icz-menuBtn__line:nth-child(2){
  transform:translateY(4px);
}

.icz-menuClose__line:nth-child(1){
  transform:rotate(45deg);
}

.icz-menuClose__line:nth-child(2){
  transform:rotate(-45deg);
}


/* =====================================================
  MENU PANEL
===================================================== */

.icz-menuPanel{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-12px);

  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1),
    visibility .85s cubic-bezier(.22,.61,.36,1);
}

.icz-menuPanel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.is-menu-open{
  overflow:hidden;
}

.icz-menuPanel__inner{
  width:min(100%, var(--icz-container));
  margin-inline:auto;
  padding:
    var(--icz-space-34)
    var(--icz-pad-pc)
    var(--icz-space-55);
}

.icz-menuPanel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--icz-space-34);
}

.icz-menuPanel__label{
  margin:0;
  font-family:var(--icz-en);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--icz-ink-soft);
}

.icz-menuPanel__nav{
  display:block;
}

.icz-menuPanel__list{
  list-style:none;
  margin:0;
  padding:0;
}

.icz-menuPanel__list li{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(0,0,0,.06);
}

.icz-menuPanel__list li:last-child{
  border-bottom:1px solid rgba(0,0,0,.06);
}

.icz-menuPanel__list a{
  display:block;
  padding:13px 0;
  font-family:var(--icz-en);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--icz-ink);

  opacity:0;
  transform:translateY(6px);

  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1);
}

.icz-menuPanel.is-open .icz-menuPanel__list a{
  opacity:1;
  transform:translateY(0);
}

.icz-menuPanel.is-open .icz-menuPanel__list li:nth-child(1) a{
  transition-delay:.12s;
}

.icz-menuPanel.is-open .icz-menuPanel__list li:nth-child(2) a{
  transition-delay:.18s;
}

.icz-menuPanel.is-open .icz-menuPanel__list li:nth-child(3) a{
  transition-delay:.24s;
}

.icz-menuPanel.is-open .icz-menuPanel__list li:nth-child(4) a{
  transition-delay:.30s;
}

.icz-menuPanel.is-open .icz-menuPanel__list li:nth-child(5) a{
  transition-delay:.36s;
}

.icz-menuPanel__list a:hover{
  opacity:.72;
}


/* =====================================================
  FOOTER
===================================================== */

.icz-footer{
  margin-top:var(--icz-space-55);
  padding-top:var(--icz-space-34);
  padding-bottom:var(--icz-space-21);
  border-top:1px solid rgba(0,0,0,.06);
  background:var(--icz-bg);
}

.icz-footer__inner{
  display:block;
}

.icz-footer__brand{
  max-width:520px;
  font-family:var(--icz-en);
  font-size:10px;
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--icz-ink-faint);
}

.icz-footer__brand p{
  margin:0;
}

.icz-footer__brand p + p{
  margin-top:var(--icz-space-8);
}

.icz-footer__copy{
  margin-top:var(--icz-space-8) !important;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--icz-ink-faint);
}


/* =====================================================
  IN-APP BROWSER SAFE PATCH
  Gmail / LINE / Instagram
===================================================== */

html.is-inapp-browser{
  scroll-behavior:auto;
}

.is-inapp-browser .icz-main{
  min-height:100vh;
  min-height:100svh;
}

.is-inapp-browser .icz-loading{
  background:#fff;
}

.is-inapp-browser .icz-header{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(255,255,255,.96);
}

.is-inapp-browser .icz-menuPanel{
  position:fixed;
  inset:0;
  min-height:100vh;
  min-height:100svh;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(255,255,255,.98);
  transform:none;
}

.is-inapp-browser .icz-menuPanel__inner{
  min-height:100vh;
  min-height:100svh;
}

.is-inapp-browser body.is-menu-open{
  overflow:hidden;
  position:fixed;
  width:100%;
}

.is-inapp-browser .icz-menuPanel__list a{
  transition:
    opacity .28s ease,
    transform .28s ease;
}

.is-inapp-browser .icz-menuPanel__list a:hover{
  transform:none;
}


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

@media (max-width:768px){

  .icz-container{
    padding-inline:var(--icz-pad-sp);
  }

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

  .icz-loading__inner{
    transform:translateX(-4px);
  }

  .icz-loading__logo{
    font-size:10px;
    line-height:1;
    letter-spacing:.03em;
  }

  .icz-loading__line{
    width:140px;
    margin-top:var(--icz-space-13);
  }

  .icz-header__inner{
    min-height:48px;
    gap:13px;
  }

  .icz-logo{
    font-size:12px;
    line-height:1.2;
    letter-spacing:.06em;
  }

  .icz-menuPanel__inner{
    padding:
      var(--icz-space-21)
      var(--icz-pad-sp)
      var(--icz-space-34);
  }

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

  .icz-menuPanel__label{
    font-size:10px;
    line-height:1.2;
    letter-spacing:.18em;
  }

  .icz-menuPanel__list a{
    padding:13px 0;
    font-size:12px;
    line-height:1.4;
    letter-spacing:.14em;
  }

  .icz-footer{
    margin-top:var(--icz-space-34);
    padding-top:var(--icz-space-21);
    padding-bottom:var(--icz-space-21);
  }

  .icz-footer__brand{
    font-size:10px;
    line-height:1.8;
  }

  .icz-footer__copy{
    font-size:8px;
    line-height:1.6;
  }

}


/* =====================================================
  FIRST VIEW CONNECTION
===================================================== */

.icz-main{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.is-loaded .icz-main{
  opacity:1;
  transform:translateY(0);
}

.icz-hero,
.icz-page-hero,
.icz-case-hero,
.icz-about-hero{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.2s cubic-bezier(.22,.61,.36,1);
  transition-delay:.12s;
}

.is-loaded .icz-hero,
.is-loaded .icz-page-hero,
.is-loaded .icz-case-hero,
.is-loaded .icz-about-hero{
  opacity:1;
  transform:translateY(0);
}

.icz-hero__title,
.icz-page-hero__title,
.icz-case-title,
.icz-about__en,
.icz-about__ja{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:.22s;
}

.is-loaded .icz-hero__title,
.is-loaded .icz-page-hero__title,
.is-loaded .icz-case-title,
.is-loaded .icz-about__en,
.is-loaded .icz-about__ja{
  opacity:1;
  transform:translateY(0);
}

.icz-page-hero__lead,
.case-detail-hero__lead,
.icz-about-hero__lead,
.icz-about-preview__lead{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:.3s;
}

.is-loaded .icz-page-hero__lead,
.is-loaded .case-detail-hero__lead,
.is-loaded .icz-about-hero__lead,
.is-loaded .icz-about-preview__lead{
  opacity:1;
  transform:translateY(0);
}


/* ローディング中はスクロールを止める */
body.is-loading{
  overflow:hidden;
}


/* 低モーション環境では即時表示 */
@media (prefers-reduced-motion: reduce){

  .icz-main,
  .icz-hero,
  .icz-page-hero,
  .icz-case-hero,
  .icz-about-hero,
  .icz-hero__title,
  .icz-page-hero__title,
  .icz-case-title,
  .icz-about__en,
  .icz-about__ja,
  .icz-page-hero__lead,
  .case-detail-hero__lead,
  .icz-about-hero__lead,
  .icz-about-preview__lead{
    opacity:1;
    transform:none;
    transition:none;
  }

}