@charset "UTF-8";

/*=================================
    OSMO ABOUT
    260730
=================================*/
#about{
  position:relative;
  text-align:justify;
}

/* kv
=========================================*/
#about .kv{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  z-index:2;
  background:url(../img/about/about_kv.jpg) no-repeat center center;
  background-size:cover;
}
#about .kv .txt{
  position:absolute;
  right:8.14%;
  top:21.04%;
}
#about .kv .txt h1{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  font-size:clamp(14px , 1.67vw , 20px);
  font-weight:700;
  letter-spacing: 0.1em;
}
#about .kv .txt p{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay:1s;
  font-size:clamp(11px , 1.17vw , 14px);
  margin-top:clamp(30px , 3.33vw , 40px);
}


/* scroll-txt
-------------------------- */
.scroll-txt{
  color:#fff;
  font-family:var(--font-en-serif);
  font-size:clamp(10px , 1vw , 12px);
  text-align:center;
  position:fixed;
  bottom:30px;
  left:3vw;
  z-index:50;
}
.scroll-txt p{
  line-height: 1 !important;
}
.scroll-txt svg{
  position:relative;
  animation-name:scrollAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
  transition: linear 0s;
  opacity: 1;
}
.scroll-txt svg path{
  stroke:#fff;
}
@keyframes scrollAnime{
  0% {
    transform: translateY(0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}




@media only screen and (max-width: 767px){
  #about .kv{
    background:url(../img/about/about_kv_sp.jpg) no-repeat center center;
    background-size:cover;
  }
  #about .kv .txt{
    width:64.12vw;
    right:17.94vw;
    top:15.73%;
  }

  .scroll-txt{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scroll-txt p{
    margin-bottom: 20px;
    transform: rotate(90deg) translateY(1px); 
  }

}


/* concept , mission
=========================================*/
#about .mission,
#about .concept{
  width:100%;
  overflow:hidden;
  position:relative;
  z-index:3;
  background:#fff url(../img/bg02.svg) no-repeat top right;
  background-size:cover;
  background-attachment: fixed;
  padding:clamp(250px , 37.5vw , 450px) 0 clamp(200px , 27.5vw , 330px);
}
#about .mission{
  z-index:3;
  margin-top:56.25vw;
}

#about .mission .inner,
#about .concept .inner{
  width:min(86vw , 1032px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:clamp(90px , 12.5vw , 150px) 0;
  margin:0 auto;
}
#about .mission .inner .txt2 img,
#about .concept .inner .txt2 img{
  opacity:0;
}
#about .mission .inner p + p,
#about .concept .inner p + p{
  margin-top:2em;
}
#about .mission .inner h2,
#about .mission .inner h3,
#about .concept .inner h2,
#about .concept .inner h3{
  font-weight:700;
  font-size:clamp(14px , 1.67vw , 20px);
}
#about .mission .inner h3,
#about .concept .inner h3{
  margin-top:clamp(28px , 4.5vw , 54px);
}
#about .mission .inner p,
#about .concept .inner p{
  font-size:clamp(11px , 1.17vw , 14px);
}

@media only screen and (max-width: 767px){
  #about .mission{
    padding-bottom:0;
    margin-top:130vw;
  }
}


/* movie
=========================================*/
#about .movie{
  overflow:hidden;
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:16/9;
  background:url(../img/about/about_movie.jpg) no-repeat center center;
  background-size:cover;
}
#about .movie video{
}
#about .movie.u-fix{
  position:fixed;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px){
  #about .movie{
    aspect-ratio:9/16;
  }
}




/* about-footer
=========================================*/
#about .about-footer{
  position:relative;
  z-index:1;
  overflow: hidden;
  width:100%;
  z-index:1;
  background:#fff url(../img/bg01.png) no-repeat center top;
  background-size:100% auto;
  padding:clamp(200px , 27.5vw , 330px) 0 clamp(280px , 40vw , 480px);
}

#about .about-footer .inner{
  width: min(76.92%, 923px);
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#about .about-footer .inner img{
  width:52.87%;
}

#about .about-footer .txt ul li + li{
  margin-top:28px;
}

#about .about-footer .txt2{
  margin:clamp(50px , 6.67vw , 80px) auto 0;
  position:absolute;
  z-index:1;
  left:50%;
  bottom:clamp(35px , 4.17vw , 50px);
  transform: translateX(-50%);
}

@media only screen and (max-width: 767px){
  #about .about-footer{
    padding-top:300px;
  }
  #about .about-footer{
    background:#fff url(../img/bg01.png) no-repeat center top;
    background-size:200% 140%;
  }
  #about .about-footer .inner{
    display: block;
    width: 85.75vw;
  }
  #about .about-footer .inner img{
    width:100%;
  }
  #about .about-footer .txt ul{
    width:138px;
    margin:56px auto 0;
  }
}