@charset "UTF-8";
.loading {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 230px 5% 0;
  text-align: center;
}

@keyframes white-box {
  0%   { width: 100%;}
  100% { width: 0;}
}
.loading .white-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  animation-name: white-box;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  background: #fff;
}

/*アニメーション*/
@keyframes loop {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes loop2 {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

.bg-cloud div:first-child {
  animation: loop 500s -250s linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.bg-cloud div + div {
  animation: loop2 500s linear infinite;
}

@keyframes star {
  0%   { transform: rotateZ(-360deg);}
  100% { transform: rotateZ(0deg);}
}

.bg-ster{
  animation-name: star;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1000s;
}

@keyframes star-c1 {
  0%   { opacity: 0}
  50% { opacity: 0.7}
  100% { opacity: 0}
}

@keyframes star-c2 {
  0%   { opacity: 0.3}
  50% { opacity: 1}
  100% { opacity: 0.3}
}

@keyframes star-c1 {
  0%   { opacity: 1}
  50% { opacity: 0.5}
  100% { opacity: 1}
}

.bg-ster-c{
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bg-ster-c:nth-child(1){
  animation-name: star-c2;
  animation-duration: 3s;
}
.bg-ster-c:nth-child(2){
  animation-name: star-c3;
  animation-duration: 5s;
}
.bg-ster-c:nth-child(3){
  animation-name: star-c3;
  animation-duration: 3s;
}
.bg-ster-c:nth-child(4){
  animation-name: star-c1;
  animation-duration: 5s;
}
.bg-ster-c:nth-child(5){
  animation-name: star-c2;
  animation-duration: 5s;
}
.bg-ster-c:nth-child(6){
  animation-name: star-c1;
  animation-duration: 1s;
}

@keyframes pre-link {
  0%   { transform: rotate(10deg)}
  50% { transform: rotate(-10deg)}
  100% { transform: rotate(10deg)}
}
.pre-link{
  animation-name: pre-link;
  animation-duration: 3s;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes pre-link-hover {
  0%   { transform: translateY(0); }
  30% { transform: translateY(-10px)}
  100% { transform: translateY(0px)}
}

.pre-link:hover{
  animation-name: pre-link-hover;
  animation-duration: .2s;
  animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-iteration-count:1;
}


/**************************
*********  STORY  *********
**************************/


@keyframes story03 {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}

.myfadeInUp{
  position: relative;
  top:50px;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.animated.myfadeInUp{
  top: 0;
  opacity: 1;
}
.story03 img{
  opacity: 0;
  transition: all 1s ease-in;
}
.story03.animated img{
  opacity: 1;
}
.story03 img:nth-child(1){ transition-delay: -.15s; }
.story03 img:nth-child(2){ transition-delay: -.1s; }
.story03 img:nth-child(3){ transition-delay: -.05s; }
.story03 img:nth-child(4){ transition-delay: 0s; }
.story03 img:nth-child(5){ transition-delay: .05s; }
.story03 img:nth-child(6){ transition-delay: .1s; }
.story03 img:nth-child(7){ transition-delay: .15s; }
.story03 img:nth-child(8){ transition-delay: .2s; }

.story03 img:nth-child(9){ transition-delay: .25s; }

.story03 img:nth-child(11){ transition-delay: .45s; }
.story03 img:nth-child(12){ transition-delay: .5s; }
.story03 img:nth-child(13){ transition-delay: .55s; }

.story03 img:nth-child(14){ transition-delay: .6s; }
.story03 img:nth-child(15){ transition-delay: .65s; }

.story .bg-wing{
  animation-delay: .6s;
}

#story2 .bg-dorodoro{
  transition: all .6s ease-in-out;
}
#story2 .bg-dorodoro-box.animated .bg-dorodoro{
  top: -1px;
}
#story2 .bg-dorodoro1{
  transition-delay: .3s;
}

.story11 p{
  padding: 0;
}
.myzoomInUp{
  transition: all .4s cubic-bezier(.21,.23,.32,1.29);
  opacity: 0;
  transform: scale(0);
}
.myzoomInUp.animated{
  opacity: 1;
  transform: scale(1);
}

#story5 .story12 .parts>div{
  transition: all .1s cubic-bezier(0.68, -0.8, 0.265, 1.55);
  transition-delay: 0.3s;
}
#story5 .story12.animated .parts .a1{
  left:4.469763365%; top:23.70012092%;
  /* transition-delay: 0.2s; */
}
#story5 .story12.animated .parts .a2{
  left:69.85100789%; top:15.78935913%;
  /* transition-delay: 0.5s; */
}
#story5 .story12.animated .parts .a3{
  left:2.979842244%; top:72.79322854%;
  /* transition-delay: 1.0s; */
}
#story5 .story12.animated .parts .a4{
  left:85.71428571%; top:75.09068924%;
  /* transition-delay: 1.2s; */
}
#story5 .story12.animated .parts .b1{
  left:57.31814198%; top:21.34703748%;
  /* transition-delay: 0.3s; */
}
#story5 .story12.animated .parts .b2{
  left:85.36371604%; top:20.34703748%;
  /* transition-delay: 1.4s; */
}
#story5 .story12.animated .parts .b3{
  left:9.02716915%; top:31.35066505%;
  /* transition-delay: 0.9s; */
}
#story5 .story12.animated .parts .b4{
  left:49.60560911%; top:57.43651753%;
  /* transition-delay: 0.4s; */
}
#story5 .story12.animated .parts .b5{
  left:62.66432954%; top:70.37484885%;
  /* transition-delay: 0.6s; */
}
#story5 .story12.animated .parts .c1{
  left:31.45127082%; top:9.134220073%;
  /* transition-delay: 1s; */
}
#story5 .story12.animated .parts .c2{
  left:75.044838%; top:60.00846433%;
  transition-delay: 0.2s;
}
#story5 .story12.animated .parts .d1{
  left:27.51971954%; top:13.42200726%;
  /* transition-delay: 1.3s; */
}
#story5 .story12.animated .parts .d2{
  left:32.427695%; top:39.54050786%;
  /* transition-delay: 0.5s; */
}

#story5 .story12.animated .parts .d2{
  left:32.427695%; top:39.54050786%;
  /* transition-delay: 0.5s; */
}
#story5 .story12.animated .parts img{
  opacity: 1;
  margin-top: 0;
  transition: all .1s cubic-bezier(0.68, -0.8, 0.265, 1.55);
}

#story5 .story12.animated .parts .chara1{ transition-delay: .2s }
#story5 .story12.animated .parts .chara2{ transition-delay: .25s }
#story5 .story12.animated .parts .chara3{ transition-delay: .3s }
#story5 .story12.animated .parts .chara4{ transition-delay: .35s }
#story5 .story12.animated .parts .chara5{ transition-delay: .4s }
#story5 .story12.animated .parts .chara6{ transition-delay: .45s }
#story5 .story12.animated .parts .chara7{ transition-delay: .5s }
#story5 .story12.animated .parts .chara8{ transition-delay: .55s }
#story5 .story12.animated .parts .chara9{ transition-delay: .6s }
#story5 .story12.animated .parts .chara10{ transition-delay: .65s }
#story5 .story12.animated .parts .chara11{ transition-delay: .7s }

#story5 .story12.animated .parts .chara12{ transition-delay: .9s }
#story5 .story12.animated .parts .chara13{ transition-delay: .95s }
#story5 .story12.animated .parts .chara14{ transition-delay: 1s }

@keyframes wing1 {
  0% { top: 15%; transform: rotate(0deg); }
  33% { top: 17.5%; transform: rotate(7deg); }
  100% { top: 15%; transform: rotate(0deg); }
}
@keyframes wing2 {
  0% { top: 43%; left:11.1875%; transform: rotate(0deg); }
  33% { top: 42%; left:10.6875%; transform: rotate(8deg); }
  100% { top: 43%; left:11.1875%; transform: rotate(0deg); }
}

@keyframes wing3 {
  0% {top:75%; transform: rotate(0deg); }
  33% { top:72%; transform: rotate(12deg); }
  100% { top:75%; transform: rotate(0deg); }
}
@keyframes wing4 {
  0% { top:40.9667422524565%; transform: rotate(0deg); }
  33% { top:43.9667422524565%; transform: rotate(9deg); }
  100% { top:40.9667422524565%; transform: rotate(0deg); }
}
@keyframes wing5 {
  0% { top: 11%; transform: rotate(0deg); }
  33% { top: 12.5%; transform: rotate(12deg); }
  100% { top: 11%; transform: rotate(0deg); }
}
@keyframes wing6 {
  0% { top:76.276644%; transform: rotate(0deg); }
  33% { top:78.276644%; transform: rotate(7deg); }
  100% { top:76.276644%; transform: rotate(0deg); }
}

.story .bg-wing-box{
  opacity: 0;
  transition: all 1s ease-in-out;
}
.animated.bg-wing-box {
  opacity: 1;
}
.animated .bg-wing {
  animation-duration: 4s;
  animation-timing-function:ease-in;
  animation-iteration-count: infinite;
}
.story .animated .bg-wing1 { animation-name: wing1; }
.story .animated .bg-wing2 { animation-name: wing2; }
.story .animated .bg-wing3 { animation-name: wing3; }
.story .animated .bg-wing4 { animation-name: wing4; }
.story .animated .bg-wing5 { animation-name: wing5; }
.story .animated .bg-wing6 { animation-name: wing6; }

.chapter-ttl .chapter-ttl-top,.chapter-ttl .chapter-ttl-under,.chapter-ttl img{
  transition: all 1s ease-in-out;
}
.chapter-ttl.animated .chapter-ttl-top,.chapter-ttl.animated .chapter-ttl-under{
  width: 80%;
  width: calc( 100% - 100px );
}
.chapter-ttl.animated img{
  left: 0;
}
@media screen and (max-width: 767px) {
  .chapter-ttl.animated .chapter-ttl-top, .chapter-ttl.animated .chapter-ttl-under{
    width: 95%;
  }
}

@keyframes chapter-loop {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes chapter-loop2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

.chapter-ttl-img div:first-child {
  animation: chapter-loop 30s -15s linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.chapter-ttl-img div + div {
  animation: chapter-loop2 30s 0s linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}


/**************************
*******  CHARACTER  *******
**************************/
@media screen and (min-width: 768px) {

  .chara-box .serif, .bg-chara1-inner, .chara-box .bar, .chara-img, .chara-box .name, .chara-box .class, .chara-box .chara-inner:before{
    transition: all 0.8s ease-in-out;
  }
  .chara-box .serif {
    left: -120%;
  }
  .animated.chara-box .serif{
    left: 0;
  }
  .chara-box .bg-chara1-inner{
    transition-delay: 0.2s;
  }
  .animated.chara-box .bg-chara1-inner{
    left: 0;
    right: 0;
  }
  .chara-box .chara-img{
    transition-delay: 0.3s;
  }
  .animated.chara-box .chara-img{
    left: 0;
  }
  .animated.chara-box:nth-child(2n) .chara-img{
    right: 0;
    left: auto;
  }
  .chara-box .chara-inner:before{
    top: -100%;
    transition-delay: 0.5s;
  }
  .animated.chara-box .chara-inner:before{
    top: 20%;
  }
  .animated.chara-box:nth-child(2n) .chara-inner:before{
    top: 36%;
  }
  #character4.animated .chara-inner:before{
    top:25%;
  }
  #character6.animated .chara-inner:before{
    top: 29%;
    left: 16%;
  }
  .chara-box .name{
    opacity: 0;
    transition: all .5s ease-in-out;
    transition-delay: 1s;
  }
  .animated.chara-box .name{
    opacity: 1;
    left: 20.8%;
  }
  #character1.animated .name{
  }
  #character2.animated .name{
    right: -10%;
    bottom: 14.5%;
  }
  #character3.animated .name{
    bottom: 12%;
  }
  #character4.animated .name{
    left: 58%;
    bottom: 20%;
  }
  #character5.animated .name{
    bottom: 12%;
  }
  #character6.animated .name{
    right: -10%;
    bottom: 18%;
  }
  #character7.animated .name{
    left: 17%;
    bottom: 9.5%;
  }
  .chara-box .bar{
    width: 0;
    bottom: 3%;
    transition-delay: .8s;
  }
  #character1 .bar{
    bottom: 2.7%;
  }
  #character7 .bar{
    bottom: 21%;
  }
  .animated.chara-box .bar{
    width: 150%;
    bottom: 16.5%;
  }
  #character1.animated .bar{
    bottom: 12.7%;
  }
  #character2.animated .bar{
    bottom: 12.5%;
  }
  #character7.animated .bar {
    bottom: 31%;
  }
  .chara-box .class{
    opacity: 0;
    transition-delay: .8s;
  }
  .animated.chara-box .class{
    opacity: 1;
    bottom: 16%;
    right: -26%;
    left: 0;
  }
  .animated.chara-box:nth-child(2n) .class{
    bottom: 12%;
    right: 34%;
  }
  #character1.animated .class{
    bottom: 13.5%;
  }
  #character2.animated .class{
    bottom: 3%;
    right: 34%;
  }
  #character3.animated .class{
    bottom: 15%;
  }
  #character4.animated .class{
    right: 30%;
    bottom: 9%
  }
  #character5.animated .class{
    bottom: 13%;
    right: -23%;
  }
  #character6.animated .class{
    right: 38%;
    bottom: 10.5%;
  }
  #character7.animated .class{
    bottom: 12%;
    right: -25%;
  }
  .chara-box .chara-inner:after{
    transform: scale(0);
    transition: all .08s cubic-bezier(0.68, -0.8, 0.265, 1.55);
    transition-delay: 1.4s;
  }
  .animated.chara-box .chara-inner:after{
    transform: scale(1);
  }
  .animated.chara-box:nth-child(2n) .chara-inner:after{
    transform: scale(-1,1);
  }
}

@media screen and (max-width: 767px) {
  .chara-box .serif, .chara-box .bg-chara1-inner, .chara-box .sp-chara-inner, .chara-box .class.sp, .chara-box .name{
    transition: all 0.5s ease-in-out;
  }
  .chara-box:nth-child(2n) .serif.spanimated{
    right: 0;
  }
  .chara-box:nth-child(2n+1) .serif.spanimated{
    left: 0;
  }
  .chara-box:nth-child(2n+1) .spanimated .bg-chara1-inner{
    left: 0;
  }
  .chara-box:nth-child(2n+1) .spanimated .sp-chara-inner{
    right: 0;
  }
  .chara-box:nth-child(2n) .spanimated .bg-chara1-inner{
    right: 0;
  }
  .chara-box:nth-child(2n) .spanimated .sp-chara-inner{
    left: 0;
  }
  .chara-box .class.sp{
    opacity: 0;
    bottom: 70%;
    transition: all .3s cubic-bezier(0.68, -0.8, 0.265, 1.55);
    transition-delay: .5s;
  }
  .chara-box .spanimated .class.sp{
    opacity: 1;
    bottom: 60%;
  }
  .chara-box .name{
    opacity: 0;
    top:65%;
    transition: all .3s cubic-bezier(0.68, -0.8, 0.265, 1.55);
    transition-delay: .8s;
  }
  .chara-box .spanimated .name{
    opacity: 1;
    top:62%;
  }
  .chara-box .sp-chara-inner:after{
    transform: scale(0);
    transition: all .1s cubic-bezier(0.68, -0.8, 0.265, 1.55);
    transition-delay: 1.4s;
  }
  .chara-box .spanimated .sp-chara-inner:after{
    transform: scale(1);
  }
}
@keyframes footer {
  0%   { opacity: 0}
  50% { opacity: 1}
  100% { opacity: 0}
}
.content-last-cover{
  animation-name: footer;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s;
}

.f-chara img{
  opacity: 0;
  transition: all .3s ease-in-out;
}
.f-chara.animated img{ opacity: 1; }
.f-chara.animated img:nth-child(2){ transition-delay: .3s; }
.f-chara.animated img:nth-child(3){ transition-delay: .6s; }
.f-chara.animated img:nth-child(4){ transition-delay: .9s; }
.f-chara.animated img:nth-child(5){ transition-delay: 1.2s; }
.f-chara.animated img:nth-child(6){ transition-delay: 1.5s; }
.f-chara.animated img:nth-child(7){ transition-delay: 1.8s; }

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.poyooon {
  animation: poyooon 0.9s linear 0s infinite;
  -moz-animation:poyooon 0.9s linear 0s infinite;
}
.poyooon.animated {
  animation: poyooon 0.9s linear 0s 2,purun 1s linear 0s infinite !important;
  -moz-animation: poyooon 0.9s linear 0s 2,purun 1s linear 0s infinite !important;
}

@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}