@charset "UTF-8";

/*=================================
    OSMO STORY
    260730
=================================*/
main{
  position:relative;
}
#story{
  position:relative;
  text-align:justify;
}
#story p + p{
  margin-top:2em;
}

/* kv
=========================================*/
#story .kv{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  z-index:2;
  background:url(../img/story/story_kv.jpg) no-repeat center center;
  background-size:cover;
}
#story .kv .txt{
  position:absolute;
  right:8.14%;
  top:21.04%;
}
#story .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;
}
#story .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);
}

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

/* line
=========================================*/
#story .line{
  padding:150vh 0 100vh;
  position:relative;
  background:#fff url(../img/story/story_line.svg) no-repeat center top;
  background-size:1px 100vh;
  background-attachment: fixed;
  z-index:2;
}

@media only screen and (max-width: 767px){
  #story .line{
    padding:130px 0 180px;
  }
}

/* hydration , cell
=========================================*/
#story .cell,
#story .hydration{
  width:100%;
  position:relative;
  z-index:3;
}
#story .hydration{
  margin-bottom:100vh;
}
#story .cell img,
#story .hydration img{
/*  width:61.39%;*/
  width:47.08%;
  position: sticky;
  top:50%;
  transform: translateY(-50%);
}
#story .hydration img{
/*  left:38.61%;*/
  left:52.92%;

}
#story .cell img{
  left:0;
}
#story .cell .inner,
#story .hydration .inner{
  width:min(86%, 1200px);
  margin:0 auto;
  position:relative;
  z-index:2;
  height:100vh;
}
#story .hydration .inner .txt{
  position:absolute;
  right:52.92%;
  top:0;
}
#story .cell .inner .txt{
  position:absolute;
  right:0;
  top:0;
}
#story .cell .inner .txt h2,
#story .hydration .inner .txt h2{
  margin-bottom:clamp(60px , 8.33vw , 100px);
  font-size:clamp(14px , 1.33vw , 16px);
}
#story .cell .inner .txt h2 strong,
#story .hydration .inner .txt h2 strong{
  font-size:clamp(14px , 1.67vw , 20px);
  font-weight:700;
}
#story .cell .inner .txt p,
#story .hydration .inner .txt p{
  font-size:clamp(11px , 1.17vw , 14px);
}
@media only screen and (max-width: 767px){
  #story .hydration{
    margin-bottom:200px;
  }
  #story .cell .inner,
  #story .hydration .inner{
    height: auto;
  }
  #story .cell img,
  #story .hydration img{
    width:92.88%;
    position: relative;
    top:auto;
    transform: translateY(0);
  }
  #story .hydration img{
    left:7.12%;
  }
  #story .hydration .inner .txt,
  #story .cell .inner .txt{
    position:relative;
    right:auto;
    top:auto;
    width:85.75vw;
    margin:100px auto 0;
  }

}


/* story-footer
=========================================*/
#story .story-footer{
  position:relative;
  z-index:1;
  width:100%;
  z-index:3;
  color:#fff;
}
#story .story-footer .bg{
  background:url(../img/fooer_bg.jpg) no-repeat center center;
  background-size:cover;
  width:100%;
  height:100vh;
  position: sticky;
  top:0;
  left:0;
}
#story .story-footer .cover{
  background:rgba(26,28,41,.32);
  width:100%;
  height:100vh;
  position: sticky;
  top:0;
  left:0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#story .story-footer.fix .cover{
  position: fixed;
}
#story .story-footer .inner{
  width:439px;
  max-width:86%;
  margin:0 auto;
  position:relative;
}
#story .story-footer .inner .txt{
  height:100vh;
  position:relative;
}
#story .story-footer .inner .txt.tit{
  padding: 150vh 0 100vh;
  height:auto;
}
#story .story-footer .inner .txt .txtWrap{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  transform: translateY(-50%);
}
#story .story-footer .inner .txt h2{
  font-size:clamp(14px , 1.67vw , 20px);
  width: fit-content;
  max-width:86%;
  margin:0 auto;
  animation-duration: 3s;
}
#story .story-footer .inner .txt p{
  font-size:clamp(11px , 1.17vw , 14px);
  width: fit-content;
  width:86%;
  margin:0 auto;
}
#story .story-footer .inner .txt p + p{
  margin-top:1.5em;
}
#story .story-footer .inner .txt ul{
  margin-top:clamp(80px , 10vw , 120px);
}
#story .story-footer .inner .txt ul li a{
  margin:0 auto;
}

#story .story-footer .txt4{
  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){
  #story .story-footer .inner .txt.tit{
    padding: 5vh 0 100vh;
  }

}

/* scroll-txt
=========================================*/
.scroll-txt{
  color:var(--main-color);
  font-family:var(--font-en-serif);
  font-size:clamp(11px , 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;
}
.scroll-txt.anime svg{
  animation-name:scrollAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
  transition: linear 0s;
  opacity: 1;
}
@keyframes scrollAnime{
  0% {
    transform: translateY(0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
.scroll-txt.white{
  color:#fff;
}
.scroll-txt.white svg path{
  stroke:#fff;
}
@media only screen and (max-width: 767px){
  .scroll-txt{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scroll-txt p{
    margin-bottom: 20px;
    transform: rotate(90deg) translateY(1px); 
  }

}