/*-------------------------------------空澄セナ*/
#asumi .background-grad {
  background: url(../images/asumi/background.png) repeat-y top left / cover;
}

.asumi-top-text {
  overflow: hidden;
  background: url(../images/asumi/sora1.jpg) no-repeat center center / cover;
  border: 1rem ridge #ebebeb;
  color: #1a1a1a;
}

.asumi-profile {
  overflow: hidden;
  background: url(../images/asumi/sora2.jpg) no-repeat top left / cover;
  border: 1rem ridge #ebebeb;
  color: #1a1a1a;
}

.asumi-tag {
  overflow: hidden;
  background: url(../images/asumi/sora3.jpg) no-repeat center center / cover;
  border: 1rem ridge #ebebeb;
  color: #1a1a1a;
}

.asumi-movie {
  overflow: hidden;
  background: url(../images/asumi/sora4.jpg) no-repeat center center / cover;
  border: 1rem ridge #ebebeb;
  color: #1a1a1a;
}

#asumi .asumi-movie .movie-content img{
  border: 1rem ridge #ebebeb;
}

.asumi-top-text::before,
.asumi-top-text::after,
.asumi-profile::before,
.asumi-profile::after,
.asumi-tag::before,
.asumi-tag::after,
.asumi-movie::before,
.asumi-movie::after {
  position: fixed;
  z-index: 1;
  top: -15%;
  display: block;
  opacity: 0;
  visibility: visible;
  width: 50%;
  height: 130%;
  content: '';
  background-color: #ebebeb;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.asumi-top-text::before,
.asumi-profile.animation-start.is-animated::before,
.asumi-tag.animation-start.is-animated::before,
.asumi-movie.animation-start.is-animated::before {
  left: 0;
  animation : curtain_l 3s;
  -webkit-animation : curtain_l 3s;
}

.asumi-top-text::after,
.asumi-profile.animation-start.is-animated::after,
.asumi-tag.animation-start.is-animated::after,
.asumi-movie.animation-start.is-animated::after {
  right: 0;
  animation : curtain_r 3s;
  -webkit-animation : curtain_r 3s;
}

@supports (-webkit-overflow-scrolling: touch) {
  #asumi .background-grad {
    background-attachment: scroll;
  }
}

/*-------------------------------------空澄セナ*/

@keyframes curtain_l{
  0%{visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #ebebeb;}
  60%{transform: rotate(6deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_l{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #ebebeb;}
  60%{-webkit-transform: rotate(6deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@keyframes curtain_r{
  0%{ visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #ebebeb;}
  60%{transform: rotate(-6deg) translateX(50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_r{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #ebebeb;}
  60%{-webkit-transform: rotate(-6deg) translateX(50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}