@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: 55%;
    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: 55%;
    background: #fff;
}

#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_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#top_animetion #animetion_in>#scene_1 .img01_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}
#top_animetion #animetion_in>#scene_1 .img01_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
}

#top_animetion #animetion_in>#scene_2 .img02_01 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    z-index: 21;
}
#top_animetion #animetion_in>#scene_2 .img02_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 22;
}
#top_animetion #animetion_in>#scene_2 .img02_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 23;
}
#top_animetion #animetion_in>#scene_2 .img02_04 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 24;
}


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

#top_animetion #animetion_in>#scene_4 .img04_01 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    z-index: 40;
}
#top_animetion #animetion_in>#scene_4 .img04_02 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    z-index: 41;
}
#top_animetion #animetion_in>#scene_5 .img05_01 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    z-index: 50;
}
#top_animetion #animetion_in>#scene_5 .img05_02 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    z-index: 51;
}


/*キャプション*/
#animetion_in>.scene01_cap {
    z-index: 19;
}
#animetion_in>.scene02_cap {
    z-index: 29;
}
#animetion_in>.scene03_cap {
    z-index: 39;
}
#animetion_in>.scene04_cap {
    z-index: 49;
}
#animetion_in>.scene05_cap {
    z-index: 59;
}

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

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


.slideinRight {
  animation: slideinRight 1.0s linear;
}

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


.slideinBottom {
  animation: slideinBottom 2.0s linear;
}

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

.slideinTop {
  animation: slideinTop 4.0s linear;
}

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


#btnSkip,
#btnReplay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 90px;
    height: 20px;
}


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

    #top_animetion #animetion_in,
    #top_animetion #animetion_in>div {
        padding-top: 96%;
    }
    .slideinBottom {
  animation: slideinBottom 1.5s linear;
}

@keyframes slideinBottom {
  0% {
    transform: translateY(14.47368421%);
  }
  100% {
    transform: translateY(0);
  }
}
/*
#top_animetion #animetion_in>#scene_4 .img04_01,
#top_animetion #animetion_in>#scene_4 .img04_02,
#top_animetion #animetion_in>#scene_4 .img04_03 img{
    width: 184.45646827%;
}
#top_animetion #animetion_in>#scene_4 .img04_03 img{
    opacity: 1!important;
}
*/
    #btnSkip,
    #btnReplay {
        position: absolute;
        top: unset;
        right: unset;
        bottom: 12px;
        left: 10px;
        width: calc(90px * 0.7);
        height: calc(20px * 0.7);
    }
}