@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/

/*
top
---------------- */
.top-en-ttl{ position: absolute; top: 0; }
.top-en-ttl--about{ top: 2.5em; }
.top-en-ttl--about svg{  width: 65.4em; height: 25.1em; }
.top-en-ttl--mission{ right: 0; }
.top-en-ttl--mission svg{  width: 66.3em; height: 21.4em; }
.top-en-ttl--members{ right: 0; }
.top-en-ttl--entry{ left: 50%; transform: translateX(-50%); top:-8em; }
.top-en-ttl--environment{ left:0; }
.top-ttl-1{ margin-bottom: 0.6em; font-size: 5em; font-weight: 900; line-height: calc(70/50); }
.top-ttl-1__img{ position: relative; top:.4em; width: 3.86em; display: inline-flex; }
.top-ttl-2{ margin-bottom: 1.545em; font-size: 2.2em; font-weight: 900; line-height: calc(44/22); }
.top-ttl-2.t--left{ margin-left:-.4545em; }
.top-ttl-3{ font-size: 6em; font-weight: 700; line-height: calc(62/60); letter-spacing: 0.02em; color: var(--sky-blue-color); }
.top-ttl-3--sub{ display: block; font-size: .4em; font-weight: 900; line-height: calc(32/24); letter-spacing: 0.04em; color: var(--blue-color); }
.top-ttl-3--en{ font-family: var(--ff-red-hat); }
.top-ttl-4{ margin-bottom: .5384em; font-size: 5.2em; font-weight: 900; line-height: calc(74/52); }
.top-ttl-4__img{ position: relative; width: 3.86em; display: inline-flex; }

.top-columns{ padding: 3em 0 0 11.5em; display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; gap: 9em; }
.top-comlumns--mission{ padding: 3em 11.5em 0 0; }
.top-column__desc{ flex: 1; color:#fff; }
.top-column__pht{ width: 50%; }
.top_column__pht--about{ width: calc(761/1440 * 100vw); }
.top_column__pht--mission{ width: calc(743/1440 * 100vw); }
.top-column__desc-txt{ font-size: 1.5em; font-weight: 700; line-height: calc(30/15) }
.top-column__desc-txt+.top-column__desc-txt{ margin-top: 1.1333em; }

.top-cards{ padding-top: 6em; position: relative; }
.top-cards.top-cards--works{ padding-bottom: 8.5em; }
.top-cards.top-cards--works .top-ttl-1{ color: #fff; }
.top-cards:before{ content: ''; position: absolute; top: 0; width: calc(100% - 4.3em); height: 100%; }
.top-cards.top-cards--works::before{ left: 0; background: linear-gradient(180deg, var(--blue-color) 0%, rgba(0, 78, 162, 0) 100%); border-radius: 0 9em 0 0; }
.top-cards.top-cards--members{ padding-bottom: 6em; }
.top-cards.top-cards--members::before{ right: 0; background-color: #fff; border-radius: 9em 0 0 9em; }
.top-cards.top-cards--environment{ padding-bottom: 5.5em; }
.top-cards.top-cards--environment:before{ left: 0; background-color: var(--sky-blue-color); border-radius: 0 6.2em 6.2em 0; }

.top-btn__text{ display: block; letter-spacing: 0.04em; }
.top-btn__text--ja{ font-size: 3.6em; font-weight: 900; line-height: calc(48/36);  color: var(--blue-color); }
.top-btn__text--ja.ja--small{ font-size: 3em; line-height: calc(48/30); letter-spacing: -0.01em; }
.top-btn__text--ja.ja--small svg{ position: relative; top:.1em; width: 3.266em; height: 0.933em; }
.top-btn__text--en{ font-size: 2em; font-weight: 700; font-family: var(--ff-red-hat); line-height: calc(28/20); color: var(--sky-blue-color); }

@media only screen and (max-width: 768px) {
  .top-ttl-1{ font-size:3.5em; }
  .top-ttl-2{ font-size:1.54em; }
  .top-ttl-3{ font-size:4.2em; }
  .top-ttl-4{ font-size:3.64em; }
  .top-en-ttl--mission{ right:unset; left:0; }
  .top-en-ttl--mission svg,
  .top-en-ttl--about svg,
  .top-en-ttl--works svg,
  .top-en-ttl--members svg{ width:unset; height:4.5em; }
  .top-en-ttl--environment svg{ width:unset; height:3em; }
  .top-en-ttl--entry{ top:-5.6em; }
  .top-en-ttl--entry svg{ width:unset; height:7.3em; }
  
  .top-columns{ padding:0; gap:3em; flex-direction:column; align-items:flex-end; }
  .top-comlumns--mission{ flex-direction:column-reverse; align-items:flex-start; }
  .top-column__desc{ padding:0 2em; width:100%; }
  .top-column__desc-txt{ font-size:1.4em; }
  .top-column__pht{ width:80%; padding:0; }

  .top-cards{ padding-top:4.2em; }
  .top-cards:before{ width:calc(100% - 2em); }
  .top-cards.top-cards--works{ padding-bottom:6em; padding-right:2em; padding-left:1.5em; }
  .top-cards.top-cards--works::before{ border-radius:0 6.3em 0 0; }
  .top-cards.top-cards--members{ padding-left:2em; padding-right:1.5em; }
  .top-cards.top-cards--members::before{ border-radius:6.3em 0 0 6.3em; }
  .top-cards.top-cards--environment{ padding-top: 2em; padding-left:1.5em; padding-right:2em; }
  .top-cards.top-cards--environment:before{ border-radius:0 4.34em 4.34em 0; }

  .top-btn__text--ja{ font-size:2.52em; }
  .top-btn__text--en{ font-size:1.4em; }
  .top-btn__text--ja.ja--small{ font-size:2.1em; }
  .top-btn__text--ja.ja--small svg{ width:3.2666em; height:.93333em; }
  

}

/*
hero
--------------- */
#hero{ padding: 8em 0 0; width: 100%; background:#004EA2 url(../../img/top/hero_bg.png) no-repeat center top / cover; }

.hero__svg-frame {
    width: 100%;
    overflow: hidden; /* prevent horizontal scroll */
  }

.hero_svg-frame svg{
    width: 100%;
    height: auto;     /* responsive */
    display: block;   /* remove inline svg gap */
  }

  /* Fade animation */
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* All animated groups start hidden */
  .hero__svg-fade-item{
    opacity: 0;
  }

  .is-active .hero__svg-fade-item{
    animation: fadeIn 2s ease forwards;
  }

/* left → right order (adjust delays if you want faster/slower) */
.hero__svg-fade-item.d1{ animation-delay: 0ms !important; }
.hero__svg-fade-item.d2{ animation-delay: 300ms !important; }
.hero__svg-fade-item.d3,
.hero__svg-fade-item.d4{ animation-delay: 600ms !important; }
.hero__svg-fade-item.d5{ animation-delay: 900ms !important; }
.hero__svg-fade-item.d6{ animation-delay: 1200ms !important; }

.top-hero__desc{ position: relative; margin-top: -11em; display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; overflow: hidden; z-index: 1; }
.top-hero__highlight{ text-indent: 11.8em; }
.top-hero__highlight.highlight--blue{ color:#fff; background-color: #07325D; }
.top-hero__highlight.highlight--white{ color:#07325D; background-color: #fff; }
.top-hero__highlight span{ font-size: 8em; font-weight: 700; line-height: calc(96/80); }
.top-hero__highlight-small{ margin-left: 8.8em; margin-top: 2.5em; width: 31.5em; display: table; text-align: center; background-color: #fff; }
.top-hero__highlight-small span{ font-size: 1.6em; font-weight: 700; line-height: calc(24/16); color: #07325D; }
.top-hero__highlight,
.top-hero__highlight-small {
  overflow: hidden;
}
.top-hero__highlight,
.top-hero__highlight-small {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(.77,0,.18,1);
}
.top-hero__highlight span,
.top-hero__highlight-small span {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(.77,0,.18,1);
}
.is-active .top-hero__highlight,
.is-active .top-hero__highlight-small {
  clip-path: inset(0 0 0 0);
}
.is-active .top-hero__highlight span,
.is-active .top-hero__highlight-small span {
  clip-path: inset(0 0 0 0);
}
.highlight--blue {
  transition-delay: 0.5s;   /* parent first */
}
.highlight--blue span {
  transition-delay: 1.1s;   /* child after parent */
}
.highlight--white {
  transition-delay: 1.5s;
}

.highlight--white span {
  transition-delay: 2.1s;
}
.top-hero__highlight-small {
  transition-delay: 2.5s;
}
.top-hero__highlight-small span {
  transition-delay: 3.1s;
}

@media only screen and (max-width: 768px) {
  #hero{ padding-top:4.8em }
  .top-hero__desc{ margin-top:-2.8em; } 
  .top-hero__highlight{ text-indent:2em; height:4.5em; display:flex; flex-wrap:wrap; align-items:center; }
  .top-hero__highlight span{ font-size:2.6em }
  .top-hero__highlight-small{ margin-left:2em; width:22em; }
  .top-hero__highlight-small span{ font-size:1.12em; }
}
  
/*
top about
----------------------- */
#about{ padding-top: 8.5em; position: relative; }

.top-about__links{ margin-top: 8.5em; display: flex; flex-wrap: wrap; gap: 1.8em; justify-content: center; }
.top-about__item{ flex: 1; background-color: #fff; overflow: hidden; border-radius: 3.8em; }
.top-about__btn{ padding: 3.15em 3em 3.15em 3.5em; display: block; background: url(../../img/icons/arrow_blue.png) no-repeat calc(100% - 3em ) center / 5.6em 5.6em; }

@media only screen and (max-width: 768px) {
  #about{ padding:6em 0; }
  .top-about__links{ flex-direction:column; }
  .top-about__item{ border-radius:2.66em; }
  .top-about__btn{ padding:2.2em 2.1em 2.2em 2.45em; background-size:3.9em 3.9em; background-position:calc(100% - 2.1em) center; }
}

/*
mission
-------------------------------*/
#mission{ padding-top: 85px; padding-bottom: 6.8em; position: relative; }
@media only screen and (max-width: 768px) {
  #mission{ padding-top: 6em; }
}

/*
works
-------------------------------*/
#works{ position: relative; }
.top-works__item{ height: 29.4em; background-color: #fff; border-radius: 4.2em; overflow: hidden; }
.top-works__col-left{ display: flex; align-items: center; justify-content: center; width: calc(193/568 * 100%); background-color: var(--sky-blue-color); }
.top-works__col-right{ flex: 1; }
.top-works__svg svg{ width: 9.5em; height: 15.1em; }
.top-works__schedule{ position: relative; display: flex; flex-direction: column; height: 100%; }
.top-works__schedule span{position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 2.8em; font-weight: 700; font-family: var(--ff-red-hat); line-height: 120%; color:#fff; gap:0.5em; }
.top-works__schedule span::before{ content: ''; position: absolute; right: .35714em; top: 0; width: .1785em; height: calc(50% - .7857em); border-radius: 0 0 .2857em .2857em; background-color: #C9DCEF; }
.top-works__schedule span::after{ content: ''; position: absolute; right: .35714em; bottom: 0; width: .1785em; height: calc(50% - .7857em); border-radius: .2857em .2857em 0 0; background-color: #C9DCEF; }
.top-works__schedule i{ width: .8571em; height: .8571em; background-color:#fff; border-radius: 50%; }
.top-works__btn{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; height: 100%; padding-left: 4em; background: url(../../img/icons/arrow_blue.png) no-repeat calc(100% - 4.8em) center / 5.6em 5.6em; }

.top-headline{ margin-bottom: 3em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.top-headline .top-ttl-1{ margin-bottom: 0; }
.top-headline .comingsoon { padding: 60px 0; width: 100%; }
.top-headline__readmore{ display: inline-flex; align-items: center; gap: 2em; }  
.top-headline__readmore span{ font-size: 2.4em; font-weight: 600; font-family: var(--ff-red-hat); line-height: calc(32/24); color:#000; } 
.top-headline__readmore svg{ height: 5.6em; width: 5.6em; }

@media only screen and (min-width: 769px) {
  .top-works__lists{ display: flex; flex-wrap: wrap; gap: 2.8em; }
  .top-works__item{ display: inline-flex; flex: 1; }
}

@media only screen and (max-width: 768px) {
  .top-headline .comingsoon { padding: 40px 0; }
  .top-works__lists{  }
  .top-works__item{ display:flex; flex-wrap:wrap; height:16em; border-radius:2.94em; }
  .top-works__item+.top-works__item{ margin-top:2em; }
  .top-works__svg svg{ height:10.5em; width:6.3em; }
  .top-works__col-left{ width:11em; }
  .top-works__schedule span{ font-size:1.96em; }
  .top-works__btn{ padding-left:1.5em; background-size:3.9em 3.9em; background-position:calc(100% - 1.5em) center; }

  .top-headline__readmore span{ font-size:1.68em; }
  .top-headline__readmore svg{ width:3.9em; height:3.9em; }
}

/* blog environment
-------------------------------*/
#environment{ padding-top: 5em; background: linear-gradient(180deg, #1A67B9 0%, #1A67B9 61.06%, rgba(26, 103, 185, 0) 100%); }
.top-environment__lists{ display: flex; flex-wrap: wrap; gap: 2.2em; }
.top-environment__item{ flex: 1; } 
.top-environment__link{ display: block; width: 100%; height: 36.9em; position: relative; border-radius: 3.4em; overflow: hidden; } 
.top-environment__item img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }
.top_environment__desc{ padding: 1em 2.8em 1.8em 4em; position: absolute; left: 0; bottom: 3.5em; width: 100%; background:#07325D url(../../img/icons/white_arrow.png) no-repeat calc(100% - 3em) center / 2.6em auto; }
.top_environment__ttl{ font-size: 3em; font-weight: 900; line-height: calc(48/30); color:#fff; }
.top_environment__entxt{ font-size: 1.8em; font-weight: 700; font-family: var(--ff-red-hat); letter-spacing: 0.04em; color: var(--sky-blue-color);  line-height: 1;}

@media only screen and (max-width: 768px) {
  .top-environment__lists{ flex-direction:column; }
  .top-environment__link{ height:31em; }
  .top_environment__ttl{ font-size:2.1em; }
  .top_environment__entxt{ font-size:1.26em; }
  .top_environment__desc{ padding: .7em 1.96em 1em 2.8em; background-position:calc(100% - 2.1em) center; background-size:1.82em auto; }
}

/* blog 
-------------------------------*/
#blog{ padding-top: 6.5em; background-color: #fff; }
.top-blog__lists{ padding-bottom: 8em; border-bottom: 1px solid #E7EEF5; display: flex; flex-wrap: wrap; gap: 2.6em; }
.top-blog__item{ width: calc(280/1200 * 100%); }
.top-blog__item-img{ width: 100%; height: 21em; overflow: hidden; border-radius: 1em; }
.top-blog__item-ttl{ margin-top: 1.25em; font-size: 1.6em; font-weight: 700; line-height: calc(28/16); color: #1F2933; }
.top-blog__item-date{ display: block; margin-top: .4166em; font-size: 1.2em; font-weight: 400; line-height: calc(24/12); color: #5F6B7A; }

@media only screen and (max-width: 768px) {
  .top-blog__lists{ gap:3em 1.5em; padding-bottom:5.6em; }
  .top-blog__item{ width: calc(50% - .75em); }
  .top-blog__item-img{ height:13.5em; }
}

/* entry
-------------------------------*/
#entry{ padding: 13.4em 0 0; background-color: #fff; }
.top-entry__txt{ font-size: 1.6em; font-weight: 700; font-family: var(--ff-manrope); line-height: calc(28/16); color: #1F2933; letter-spacing: 0.04em; }
.top-entry .top-ttl-4{ margin-bottom: 0; }
.top-entry__lists{ margin-top: 3.5em; display: flex; flex-wrap: wrap; gap:4em; }
.top-entry__item{ flex: 1; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4em; overflow: hidden; }
.top-entry__item img{ transition: transform .2s ease; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.top-entry__item:hover img{ transform: scale(1.05); }
.top-entry__jatxt{ position: absolute; left: 1.1333em; top:.8em; font-size: 3em; font-weight: 900; line-height: calc(48/30); color: #fff; }
.top-entry__foot{ padding: 0 4em 2.6em; position: absolute; left: 0; bottom: 0; width: 100%; background: url(../../img/icons/arrow_blue.png) no-repeat calc(100% - 2.6em) calc(100% - 2.8em) / 5.6em; }
.top-entry__entxt{ font-size: 3.6em; font-weight: 700; font-family: var(--ff-red-hat); letter-spacing: 0.04em; color: #fff; line-height: calc(45/36); }
.top-entry__gallery{ margin-top: 2.6em; display: flex; flex-wrap: wrap; }
.top-entry__gallery-item{ flex: 1; height: 26.5em; overflow: hidden; }
.top-entry__link{ display: block; position: relative; position: relative; height: 47.8em; width: 100%; }
.tracker-slider{ margin-top: 4.5em; }

@media only screen and (max-width: 768px) {
  #entry{ padding: 10em 0 0; }
  .top-entry__lists{ flex-direction:column; gap:2.8em; }
  .top-entry__item{ border-radius:2.8em; }
  .top-entry__link{ height:33.4em; }
  .top-entry__jatxt{ font-size:2.1em; }
  .top-entry__foot{ padding:0 2.8em 1.82em; background-size:3.9em; background-position: calc(100% - 1.82em) calc(100% - 1.96em);}
  .top-entry__entxt{ font-size:2.52em; }
  .top-entry__gallery-item{ height:6.5em; }
  .tracker-slider{ margin-top: 3.15em; }
}

.tracker-item{ opacity: .2; }
.fade-stack{ position: relative; width: 100%; height: 50.6em; }
.fade-stack--2{transform: matrix(-1, 0, 0, 1, 0, 0);}
.fade-stack:after{ content: ''; position: absolute; right: 0; bottom:-2.7em; width: calc(100% + 3em); height: 100%; background-color: var(--blue-color); opacity: 0.3; border-radius: 5.5em 0 0 6.6em; }
.fade-stack:before{ content: ''; position: absolute; right: 0; bottom:-1.2em; width: calc(100% + 1.5em); height: 100%; background-color: var(--blue-color); opacity: 0.9; border-radius: 4.2em 0 0 5.2em; }

.fade-stack__item{
  position:absolute;
  top:0;
  right:0;
  border-radius:4.2em 0 0 5.2em;
  overflow:hidden;
  width: calc(100% + 1.5em); 
  height: 100%;
  opacity:0;
  transform:translateY(1.2em);
  z-index:1;

  transition: 
  width 300ms ease-in,
  height 300ms ease-in,
  opacity 700ms ease 200ms,
  transform 700ms ease 200ms;
}

/* current visible */
.fade-stack__item.is-active{
  opacity:1;
  transform:translateY(0);
  z-index:3;
  width: 100%;
}

/* leaving: start visible, then fade out + go up */
.fade-stack__item.is-leaving{
  
  opacity:0;
  transform:translateY(-30px);
  z-index:3;            /* keep on top while leaving */
}

/* entering: fade in only */
.fade-stack__item.is-entering{
  opacity:1;
  transform:translateY(0);
  z-index:2;            /* under leaving so both show */
}

@media only screen and (max-width: 768px) {
  .fade-stack{ height:22em; }
  .fade-stack:after{  border-radius: 3.85em 0 0 4.62em; }
  .fade-stack:before{  border-radius: 2.94em 0 0 3.64em; }
  .fade-stack__item{ border-radius: 2.94em 0 0 3.64em; }
}