@charset "utf-8";
/*
   loading
--------------------------------------------------------------*/
/*1回目のアクセス*/
.loading{
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0,40px,0);
  transition: all 1s 1s;
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
}
.loading1-animation .loading{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}
.loading1-animation.loading1-end .loading{
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

/*2回目のアクセス*/
.loading2-end .loading{
  opacity: 0;
  visibility: hidden;
}
header{
  position: relative;
  opacity: 0;
  transition: opacity 2s 1s;
  z-index: 500;
}
.mv{
  opacity: 0;
  transition: opacity 1s 0s;
  z-index: 0;
}
.catch{
  opacity: 0;
  transition: opacity 1s 1.5s;
  z-index: 100;
}

.loading1-end header,
.loading2-end header{
  opacity: 1;
}
.loading1-end .mv,
.loading2-end .mv{
  opacity: 1;
}
.loading1-end .catch,
.loading2-end .catch{
  opacity: 1;
}

@media screen and (min-width: 1024px) {
  header{
    transition: opacity 1s 1s;
  }
}

/*
   mv
--------------------------------------------------------------*/
.mv-cts::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-000);
  opacity: .1;
  z-index: 10;
}
.mv h1 > span{
  letter-spacing: -1rem;
  opacity: 0;
}
.mv h1 > span.en{
  letter-spacing: -.6rem;
}
.loading1-end .mv h1 > span,
.loading2-end .mv h1 > span {
  opacity: 1;
  letter-spacing: var(--ls);
  transition-property: opacity, letter-spacing;
  transition-duration: 1.2s;
  transition-timing-function: ease-in, ease;
  transition-delay: 1.2s;
}

@media screen and (min-width: 1024px) {
  .loading1-end .mv h1 > span,
  .loading2-end .mv h1 > span {
    transition-duration: 1s;
  }
}

/*
   appeal
--------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
  .approach-item-list li:nth-child(even){
    flex-direction: row-reverse;
  }
  .approach-item-list li{
    min-height: 520px;
  }
}

/*
   curriculum
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .curriculum-item{
    width: 70vw;
    flex-shrink: 0;
    flex-basis: auto;
  }
}

/*
   shop-slide
--------------------------------------------------------------*/
.shop-slide.swiper{
  overflow: visible;
}
.shop-slide .swiper-slide{
  transition: transform 1s ease;
  transform: scale(1);
}
.shop-slide .swiper-slide-active{
  transform: scale(1.2);
}

.swiper-button-next,
.swiper-button-prev{
  color: var(--color-base);
}
@media screen and (min-width: 1024px) {
  .shop-slide .swiper-slide-active{
    transform: scale(1.15);
  }
}

/*
   shop-list
--------------------------------------------------------------*/

@media screen and (max-width: 767px){
  .shop-item + .shop-item{
    border-top: solid 1px var(--color-base2);
  }
}
@media screen and (min-width: 768px){
  .shop-list .shop-item:nth-child(odd){
    border-right: solid 1px var(--color-base2);
  }
  .shop-list .shop-item{
    border-bottom: solid 1px var(--color-base2);
  }
  .shop-list{
    position: relative;
  }
  .shop-list::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--color-base3);
  }
}

/*
   interview
--------------------------------------------------------------*/
.staff-img{
  width: 100%;
}
.accordion-trigger span.icon::before,
.accordion-trigger span.icon::after{
  content: '';
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%) rotate(0deg);
          transform: translate(-50%,-50%) rotate(0deg);
  width: 10px;
  height: 2px;
  background-color: var(--color-fff);
  transition: all .5s;
}
.accordion-trigger span.icon::before{
  -webkit-transform: translate(-50%,-50%) rotate(90deg);
          transform: translate(-50%,-50%) rotate(90deg);
}
.accordion-trigger.active span.icon::before{
  transform: translate(-50%,-50%) rotate(360deg);
  -webkit-transform: translate(-50%,-50%) rotate(360deg);
  top: 50%;
}
@media screen and (min-width: 768px){
  .staff-img{
    width: 200px;
    height: 200px;
  }
}
@media screen and (min-width: 1024px){
  .staff-img{
    width: 320px;
    height: 320px;
  }
}
@media screen and (min-width: 1024px){
  .accordion-trigger{
    cursor: pointer;
  }
}
/*
   manager
--------------------------------------------------------------*/
@media screen and (min-width: 1024px){
  .manager-img{
    max-width: 640px;
  }
}

/*
   flow
--------------------------------------------------------------*/
.flow-list > li h3::before{
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: var(--color-base2);
}
.flow-list > li:last-child h3::before{
  display: none;
}
@media screen and (max-width:767px){
  .flow-list > li{
    min-width: 190px;
  }
}
@media screen and (min-width:768px) and ( max-width:1023px) {
  .flow-list > li{
    min-width: 170px;
  }
}