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

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

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

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

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

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

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

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









.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 3.0s linear;
}

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

.slideinTop {
  /* animation: slideinTop 5.0s linear; */
	animation: slideinTop 5.0s linear forwards; /* 動いた後の位置キープ */
}

@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;
    	left: 10px;
    width: 90px;
    height: 20px;
} */

#btnSkip,
#btnReplay {
    position: absolute;
    bottom: 12px;
    left: 10px;
    width: 100px; /* 文字が綺麗に収まるよう少し広げると綺麗です */
    height: 28px;
    
    /* 見た目の装飾 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    
    background: rgba(0, 0, 0, 0.8);
		
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    z-index: 100;
}

/* ホバー時の挙動 */
#btnSkip:hover,
#btnReplay:hover {
		transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.35);
}



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

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

		#top_animetion #animetion_in>#scene_1 .img01_01 {
				position: absolute;
				top: -50px;
				left: 0;
				width: 100%;
				z-index: 10;
		}

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



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

/* スキップ、リプレイボタン非表示 */
#btnSkip, #btnReplay {
    display: none!important;
}