@charset "utf-8";

video {
    width: 100%;
}

#top_animetion {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

#top_animetion #animetion_in {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 52.5%;
    background-color: #15261f;
    overflow: hidden;
    z-index: 0;
    will-change: animation;
}

#top_animetion #animetion_in>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 52.5%;
}

#animetion_in>div img,
#animetion_in>p,
#animetion_in>div div {
    opacity: 0;
}

/* キャプション */
/*[id^="scene_"] */
[id*="cap_"] {
    position: absolute;
    bottom: 5px;
    /*	right: 5px;*/
    left: 5px;
    color: #000;
    font-size: 11px;
    font-family: "游明朝 Medium", YuMincho Medium, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    -webkit-transform: rotate(.028deg);
    -ms-transform: rotate(.028deg);
    transform: rotate(.028deg);
    font-feature-settings: normal;
    letter-spacing: 1px;
    text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff;
    z-index: 20;
}

/* 各シーン設定 */

#top_animetion #animetion_in>#scene_1 .img01_01 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 150%;
    transform: translateX(0);
    z-index: 10;
    transition: 3s;
}

/*
#top_animetion #animetion_in>#scene_1 .img01_01.action {
    transform: translateX(-7.5%);
}

#top_animetion #animetion_in>#scene_1 .img01_01.unset {
    transform: unset;
}
*/



#top_animetion #animetion_in>#scene_1 .img01_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    /*    filter: blur(10px);*/
    /*    transform: scale(0.7);*/
    /*    transition: 1s;*/
}

/*
#top_animetion #animetion_in > #scene_1 .img01_02.blur{
    filter: blur(0);
    transform: scale(1.0);
}
*/
/*
#top_animetion #animetion_in > #scene_1 .img01_02.out{
    filter: blur(10px);
}
*/
/*
#top_animetion #animetion_in>#scene_1 .img01_02.unset {
    filter: unset;
    transform: unset;
}
#top_animetion #animetion_in>#scene_1 .img01_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}



#top_animetion #animetion_in>#scene_2 .img02_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
}

#top_animetion #animetion_in>#scene_2 .img02_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 14;
}

#top_animetion #animetion_in>#scene_2 .img02_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 13;
}
*/



#top_animetion #animetion_in>#scene_3 .img03_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#top_animetion #animetion_in>#scene_3 .img03_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}
#top_animetion #animetion_in>#scene_3 .img03_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
}


#top_animetion #animetion_in>#scene_4 .img04_01 {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    width:120%;
    height:100%;
    z-index: 20;
}

@media only screen and (max-width: 767px) {
  #top_animetion #animetion_in>#scene_4 .img04_01 {
      width:130%;
  }
}

#top_animetion #animetion_in>#scene_4 .img04_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 21;
}


#top_animetion #animetion_in>#scene_5 .img05_01 {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height:120%;
    z-index: 30;
}
@media only screen and (max-width: 767px) {
  #top_animetion #animetion_in>#scene_5 .img05_01 {
      height:130%;
  }
}

#top_animetion #animetion_in>#scene_5 .img05_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 31;
}

#top_animetion #animetion_in>#scene_6 .img06_01 {
    position: absolute;
    top: 0;
    right: 0;
    width:120%;
    height:100%;
    z-index: 40;
}
@media only screen and (max-width: 767px) {
  #top_animetion #animetion_in>#scene_6 .img06_01 {
      width:130%;
  }
}

#top_animetion #animetion_in>#scene_6 .img06_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 41;
}


.zoom {
	animation: zoom-in 3.5s linear 0s 1 normal both;
}
@keyframes zoom-in {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}
.zoom-out {
	animation: zoom-in 3.5s linear 0s 1 normal both;
}
@keyframes zoom-in {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1.0);
	}
}
.slideinLeft {
  animation: slideinLeft 5.0s linear 0s 1 normal both;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}


.slideinRight {
  animation: slideinRight 5.0s linear;
}

@keyframes slideinRight {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}


.slideinBottom {
  animation: slideinBottom 5.5s linear;
}

@keyframes slideinBottom {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

.slideinTop {
  animation: slideinTop 5.0s linear;
}

@keyframes slideinTop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}


/*
#animetion_in>.scene01_cap {
    z-index: 12;
}

#animetion_in>.scene02_cap {
    z-index: 14;
}
*/
#animetion_in>.scene03_cap {
    z-index: 15;
}
#animetion_in>.scene04_cap {
    z-index: 25;
}

#animetion_in>.scene05_cap {
    z-index: 35;
}
#animetion_in>.scene06_cap {
    z-index: 45;
}


#btnSkip,
#btnReplay {
    position: absolute;
    /*	bottom: 12px;*/
    bottom: 6px;
    /*	left: 10px;*/
    right: 10px;
    width: 90px;
    height: 20px;
}


/*=============================
spから
=============================*/
@media only screen and (max-width: 767px) {

    #top_animetion #animetion_in,
    #top_animetion #animetion_in>div {
        padding-top: 91.875%;
    }


    #btnSkip,
    #btnReplay {
        position: absolute;
        bottom: 12px;
        left: unset;
        right: 10px;
        width: calc(90px * 0.7);
        height: calc(20px * 0.7);
    }
}