@charset "utf-8";
/*====================
Loading
====================*/
#loading.is-on{
  width: 100%;
  background: var(--bgcolor-light);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20000;
}
/*====================
TOP PAGE
====================*/
.top{
  padding-top: calc(var(--header-height) + 4.375em);
}
.s-bg--shadow {
  padding-bottom: var(--page-bottom);
  background: var(--bgcolor-shadow);
}
/*Statement text*/
.top__statement{
  margin-left: 6.25%;
}
.top__statement-01{
  width: 48vw;
  height: 12vw;
  position: relative;
}
.top__statement-02{
  margin-top: 0.5em;
  width: 84vw;
  height: 9.8vw;
  position: relative;
}
.top__statement-01 img,
.top__statement-02 img{
  position: absolute;
  left: 0;
  top: 0;
}
.top__statement h1{
  margin-top: 1.25em;
  padding-left: 2.25em;
  font-size: 0.75em;
  letter-spacing: 0.25em;
  position: relative;
}
.top__statement h1:before{
  content: '';
  display: block;
  width: 1.5em;
  height: 1px;
  background: var(--color-text);
  position: absolute;
  top: calc((100% - 1px) / 2);
  left: 0;
}
@media screen and (min-width: 737px) {
  .top__statement{
    margin-left: 10vw;
  }
  .top__statement-01{
    width: 32vw;
    height: 8vw;
  }
  .top__statement-02{
    width: 55.625vw;
    height: 6.5vw;
  }
  .top__statement h1{
    margin-top: 2.2em;
    padding-left: 12vw;
    font-size: 1.25em;
  }
  .top__statement h1:before{
    width: 11vw;
  }
}
@media screen and (min-width: 1024px) {
  .top__statement h1{
    letter-spacing: 0.86em;
  }
}
/*Main Visual*/
.top__mv{
  margin-top: 4.375em;
  position: relative;
  z-index: 1;
}
.top__mv:before{
  content: '';
  display: block;
  width: 100%;
  height: calc(100% - 8.75vw);
  background: var(--color-brand);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.top__mv__image{
  width: 90vw;
  height: 50vw;
  position: relative;
}
.top__mv__image img{
  width: 90vw;
  height: 50vw;
  position: absolute;
  top: 0;
  left: 0;
}
.top__mv__scroll{
  position: absolute;
  top: 0.1875vw;
  right: calc(5vw - 0.40625vw);
}
.top__mv__scroll svg{
  width: 0.8125vw;
  height: 12.8125vw;
}
@media screen and (min-width: 737px) {
  .top__mv{
    margin-top: 6.75em;
  }
}
/*News*/
.top__news{
  margin-left: 10vw;
  height: 3em;
  display: flex;
  align-items: center;
  color: var(--color-text-light);
  background: var(--color-brand);
  overflow: hidden;
}
.top__news h2{
  flex-basis: 5.5em;
  font-size: 0.75em;
  font-family: var(--title-font);
  font-weight: 900;
  letter-spacing: var(--black-spacing);
  text-align: center;
}
.top__news dl{
  font-size: 0.6375em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--black-spacing);
}
.top__news dt{
  font-family: var(--date-font);
  font-weight: 700;
}
.top__news dd a{
  color: var(--color-text-light);
  text-decoration: none;
  transition: .3s;
}
.top__news dd a:hover{
  text-decoration: underline;
  opacity: 0.85;
}
@media screen and (min-width: 737px) {
  .top__news{
    height: 8.75vw;
  }
  .top__news h2{
    font-size: 1.125em;
  }
  .top__news dl{
    font-size: 0.9375em;
  }
}
@media screen and (min-width: 737px) and (max-width: 1023px) {
  .top__news{
    margin-left: 30vw;
  }
  .top__news h2{
    flex-basis: 12.5vw;
  }
}
@media screen and (min-width: 1024px) {
  .top__news{
    margin-left: 60vw;
  }
  .top__news h2{
    flex-basis: 10vw;
  }
}
/*TITLE STYLE*/
.section__title{
  border-left: var(--color-brand) 4px solid;
}
.section__title span{
  padding-top: 0.5em;
  display: block;
  font-family: var(--number-font);
  letter-spacing: var(--black-spacing);
}
.top__philo .section__title span{
  margin-left: 1.75em;
}
.top__team .section__title span,
.top__education .section__title span{
  margin-left: 1em;
}
.top__philo .section__title h2,
.section__title--en{
  font-family: var(--title-font);
  font-weight: 900;
  letter-spacing: var(--black-spacing);
  text-transform: uppercase;
}
.top__philo .section__title h2{
  margin-top: 0.3em;
  margin-left: 0.875em;
  font-size: 1.75em;
  letter-spacing: 0.1em;
}
.top__team .section__title h2,
.top__education .section__title h2{
  margin-left: 0.5em;
} 
.section__title--en{
  font-size: 2.125em;
  letter-spacing: 0.04em;
}
.section__title--en:first-letter{
  color: var(--color-brand);
}
.section__title--ja{
  margin-top: 0.75em;
  padding-left: 3em;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.2em;
  position: relative;
}
.section__title--ja:before{
  content: '';
  display: block;
  width: 1.75em;
  height: 1px;
  background: var(--color-text);
  position: absolute;
  top: calc((100% - 1px) / 2);
  left: 1em;
}
.section__lead{
  font-size: 1.75em;
  font-weight: 400;
  line-height: 1.67;
  letter-spacing: 0.08em;
}
.section__text{
  margin-top: 2.5em;
  letter-spacing: var(--basic-spacing);
  line-height: var(--basic-line);
}
@media screen and (min-width: 737px) {
  .top__philo .section__title span{
    margin-left: 3.75em;
  }
  .top__team .section__title span,
  .top__education .section__title span{
    margin-left: calc(10vw - 4px - 2em);
  }
  .top__philo .section__title h2{
    margin-left: 1.6em;
    font-size: 2.25em;
  }
  .top__team .section__title h2,
  .top__education .section__title h2{
    margin-left: calc(10vw - 4px);
  } 
  .section__title--en{
    font-size: 5.9375vw;
  }
  .section__title--ja{
    padding-left: 2.75em;
    font-size: 1.125em;
  }
  .section__title--ja:before{
    width: 2.5em;
    left: 0;
  }
  .section__lead{
    font-size: 2.8125vw;
  }
  .section__text{
    width: 31em;
    font-size: 1.0625em;
  }
}
@media not all and (min-width: 737px) {
  .top__team .section__title span,
  .top__education .section__title span{
    font-size: 0.75em;
  }
  .section__title--en{
    margin-top: 0.25em;
  }
  .top__section__lead{
    margin-top: 1em;
  }
}


/*Philosopy*/
.top__philo .section__inner{
  margin: 4.375em auto 0 auto;
  max-width: 1200px;
}
.top__philo__hand{
  padding-left: 5vw;
  padding-right: 2.5em;
  box-sizing: border-box;
}
.top__philo .section__text{
  margin-top: 1em;
  width: auto;
}
.top__philo__image01{
  margin-top: 7.1875em;
  width: 80vw;
  height: 38.625vw;
}
@media not all and (min-width: 737px) {
  .top__philo .section__container{
    padding: 2.5em 6.25% 0 6.25%;
  }
}
@media screen and (min-width: 1024px) {
  .top__philo .section__inner{
    margin: 8.125em auto 0 auto;
    padding: 0 6.25%;
    box-sizing: content-box;
    display: flex;
    justify-content: space-between;
  }
  .top__philo__hand{
    padding-left: 5vw;
    padding-right: 2.5em;
    box-sizing: border-box;
    flex-basis: 57%;
  }
  .top__philo .section__container{
    flex-basis: 43%;
  }
  .top__philo .section__text{
    font-size: 1.0625em;
  }
}
@media (min-width: 737px) and (max-width: 1023px) {
  .top__philo__hand{
    width: 78vw;
  }
  .top__philo .section__container{
    margin-top: 2.5em;
    margin-left: 25vw;
    margin-right: 10vw;
  }
}
@media not all and (min-width: 1024px) {
  .top__philo{
    margin-top: 4.375em;
  }
}

/*Teamworking*/
.top__team{
  padding-top: 4.375em;
}
.top__team .section__inner{
  padding-top: 1.75em;
  padding-bottom: 10.625vw;
  margin-left: 6.25%;
  background: var(--bgcolor-light);
}
.top__team .section__title{
  position: relative;
  z-index: 1;
}
.top__team .section__title:before{
  content: '';
  display: block;
  background: url(../images/top_team_circle.png) no-repeat center center;
  background-size: contain;
  width: 5.75em;
  height: 5.875em;
  position: absolute;
  top: 0;
  left: 15em;
  z-index: -1;
}
.top__team .section__container{
  margin-top: 5vw;
  margin-left: 6.25%;
}
.top__team .section__images{
  margin-top: 6.25em;
  position: relative;
}
.top__team .section__images .image01{
  margin-right: 15vw;
  width: 65vw;
  height: 34vw;
}
.top__team .section__images .image02{
  width: 32.5vw;
  height: 22.35vw;
  position: absolute;
  top: -4.25em;
  right: 3.5vw;
}
@media not all and (min-width: 737px) {
  .top__team .section__container{
    margin-top: 2.5em;
    margin-right: 6.25%;
  }
}
@media screen and (min-width: 737px) {
  .top__team{
    padding-top: 11.375vw;
  }
  .top__team .section__inner{
    padding-top: 7.25vw;
    margin-left: 10vw;
  }
  .top__team .section__title:before{
    width: 18.25vw;
    height: 18.125vw;
    top: -3.75vw;
    left: 48vw;
  }
  .top__team .section__container{
    margin-top: 5vw;
    margin-left: 15vw;
  }
  .top__team .section__text{
    width: 30em;
  }
  .top__team .section__images{
    margin-top: 5.875vw;
  }
  .top__team .section__images .image01{
    margin-left: 10vw;
    margin-right: 15vw;
  }
  .top__team .section__images .image02{
    width: 25.625vw;
    height: 17.625vw;
    top: -15vw;
    right: 5.25vw;
  }
}
/*border-image*/
.top__border__image{
  z-index: -1;
}
/*Education*/
.top__education{
  width: 100%;
  position: relative;
  top: -8.125vw;
  overflow: hidden;
}
.top__education .section__inner{
  margin-right: 6.25%;
  padding-top: 8.125vw;
  padding-bottom: 8.125vw;
  background: var(--bgcolor-light);
}
.top__education .section__container{
  margin-top: 2.5em;
  padding: 0 6.25%;
  background: var(--bgcolor-light);
}
.top__education .section__images{
  margin-top: 6.25vw;
  position: relative;
}
.top__education .section__images .image01{
  margin-right: 5vw;
  margin-left: auto;
  width: 60vw;
  height: 40.375vw;
}
.top__education .section__images .image02{
  width: 15vw;
  height: 22vw;
  position: absolute;
  top: -10.75vw;
  left: 11.25vw;
}
.top__education .section__images .image03{
  width: 36.5625vw;
  height: 12.625vw;
  position: absolute;
  bottom: -7vw;
  right: -7.75vw;
}
@media not all and (min-width: 737px) {
  .top__education .section__images{
    margin-top: 6.25em;
  }
  .top__education .section__images .image01{
    width: 80vw;
    height: 50vw;
  }
  .top__education .section__images .image02{
    width: 22.5vw;
    height: 33vw;
    left: 3.5vw;
  }
}
@media screen and (min-width: 737px) {
  .top__education .section__inner{
    margin-right: 15vw;
  }
  .top__education .section__container{
    margin-top: 6.25em;
    margin-right: 5vw;
    margin-left: auto;
    width: 31em;
  }
}
/*button*/
.section__container .btn--basic{
  margin-top: 2.75em;
}
@media screen and (min-width: 737px) {
  .section__container .btn--basic{
    margin-top: 4.375em;
    text-align: left;
  }
}
@media (min-width: 737px) and (max-width: 1279px) {
  .top__education .section__container .btn--basic{
    text-align: right;
  }
}
/*Animation*/
.site-header.is-hidden{
  transform: translateY(-200px);
}
.site-header.is-active{
  transform: translateY(0);
}
@keyframes animation{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(100%);
  }
}
.box-slidein{
  position: relative;
}
.section__images .image02.box-slidein{
  position: absolute;
}

.box-slidein img,
.top__mv img{
  height: 100%;
  object-fit: cover;
  object-position: 0 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.box-slidein.is-hidden img,
.is-hidden .box-slidein img,
.top__mv.is-hidden img{
  width: 0;
  opacity: 1;
}
.top__statement h1{
  opacity: 0;
}
.top__statement.is-active h1{
  opacity: 1;
}
.box-slidein.is-active img,
.is-active .boxslidein img,
.top__mv.is-active img{
  width: 100%;
  opacity: 1;
  transition-duration: .5s;
}
.box-slidein.is-active img{
  transition-delay: .15s;
}
.box-slidein.is-active img,
.top__statement.is-active .box-slidein img{
  transition-timing-function: cubic-bezier(.95, .05, .795, .035);
}
.top__statement.is-active h1,
.top__mv.is-active img{
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}
bg{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
bg item{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-brand);
  transform: translateX(-100%);
}
.is-active bg item{
  animation-name: animation;
  animation-duration: .2s;
  animation-fill-mode: forwards;  
}
/*MV timing*/
.top__statement.is-active img{
  transition-delay: .15s;
}
.top__statement.is-active .top__statement-02 bg item{
  animation-delay: .7s;
}
.top__statement.is-active .top__statement-02 img{
  transition-delay: .85s;
}
.top__statement.is-active h1{
  transition-delay: 2s;
  transition-duration: 2.75s;
}
.top__mv.is-active img{
  transition-delay: 2s;
  transition-duration: 1.75s;
}
.top__mv.is-hidden span{
  opacity: 0;
  transform: translateY(-0.5em);
}
.top__mv.is-active span{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.75s;
  transition-duration: 1s;
}
/*news*/
.top__news.is-hidden *{
  opacity: 0;
}
.top__news.is-active *{
  opacity: 1;
  transition-delay: 3s;
  transition-duration: .5s;
}
/*section*/
section.is-hidden{
  opacity: 0;
  transform: translateY(2.5vw);
}
section.is-active{
  opacity: 1;
  transform: translateY(0);
  transition-duration: .7s;
}
section.is-hidden .section__title{
  opacity: 0;
  transform: translateX(-1.25vw);
}
section.is-active .section__title{
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
  transition-duration: .5s;
}
section.is-hidden .section__lead{
  opacity: 0;
  transform: translateX(-0.5em);
}
section.is-active .section__lead{
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.5s;
  transition-duration: 1s;
}
section.is-hidden .section__text{
  opacity: 0;
  transform: translateX(-1em);
}
section.top__philo.is-hidden .section__text{
  transform: translateX(0);
}
section.is-active .section__text{
  opacity: 1;
  transform: translateX(0);
  transition-delay: 2s;
  transition-duration: 1.5s;
}
section.is-hidden .btn--basic{
  opacity: 0;
}
section.is-active .btn--basic{
  opacity: 1;
  transition-delay: 2.5s;
  transition-duration: 2s;
}
.is-hidden .top__philo__hand{
  opacity: 0;
  transform: translateX(-0.5em);
}
.is-active .top__philo__hand{
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.7s;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}
section.top__philo.is-active .section__text{
  transition-delay: 2s;
  transition-duration: 3.5s;
}
/*border-image*/
.top__border__image.is-hidden{
  opacity: 0;
}
.top__border__image.is-active{
  opacity: 1;
  transition-duration: 2.5s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}