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

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

.slide_mv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  opacity: 0;
}
.slide_mv::before {
  content: "";
  width: 100%;
  padding-top: 57.14285714%;
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.slide_mv li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 99;
}
.slide_mv li img{
  opacity: 1!important;
}

/* キャプション */
/*[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;
/*    opacity: 0.9;*/
    width: 100%;
    z-index: 11;
}
#top_animetion #animetion_in>#scene_1 .img01_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 17;
}
#top_animetion #animetion_in>#scene_1 .img01_04 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 14;
}
#top_animetion #animetion_in>#scene_1 .img01_05 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 15;
}
#top_animetion #animetion_in>#scene_1 .img01_06 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 16;
}
#top_animetion #animetion_in>#scene_1 .img01_07 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}
#top_animetion #animetion_in>#scene_1 .img01_08 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#top_animetion #animetion_in>#scene_1 .img01_09 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 17;
}
#top_animetion #animetion_in>#scene_1 .img01_010 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 19;
}

.slide_pc {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;

	opacity: 0;
}
.slide_pc::before {
	content: "";
	width: 100%;
	padding-top: 66.4285%;
	background: #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.slide_pc li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	z-index: 99;
}
.slide_pc [class*="_cap"] {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #fff;
	font-size: 10px;
	font-family: "游明朝 Medium", YuMincho Medium , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-feature-settings: normal;
	letter-spacing: 1px;
	text-shadow: 2px 0 2px #000,-2px 0 2px #000,0 2px 2px #000,0 -2px 2px #000!important;
}
.slide_pc .s2_cap2 {
	left: 68%;
}

/*キャプション*/
#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>.scene04_02_cap {
    z-index: 49;
}

/*
.revealCurtain {
  background-color: red;
}
*/

/*アニメーション*/
.revealCurtain{
  width: 100%;
  height: auto;

  /* ✅ 左：透明（見えない）、右：黒（表示される） */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 100%);

  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;

  /* ✅ スタートは左端にずらしておき、右方向にスライド */
  -webkit-mask-position: -100% 100%;
  mask-position: -100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  animation: revealCurtainAnim 1.1s ease-in-out forwards;
}

@keyframes revealCurtainAnim {
    0% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 100%);
        -webkit-mask-position: -100% 100%;
        mask-position: -100% 100%;
        opacity: 0;
    }
    100% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 0%);
        mask-image: linear-gradient(to right, transparent 0%, black 0%);
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        opacity: 1;
    }
}

.zoom {
	animation: zoom-in 6.5s linear 0s 1 normal both;
}
@keyframes zoom-in {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}

.gaikan {
	animation: gaikan 1.0s linear 0s 1 normal both;
}
@keyframes gaikan {
	0% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}


.zoom-out {
	animation: zoom-out 6.5s linear 0s 1 normal both;
}
@keyframes zoom-out {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1.0);
	}
}
.slideinRight{
  animation: slideinRight 0.5s linear 0s 1 normal both;
}

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


.slideinLeft {
  animation: slideinLeft 1.0s linear 0s 1 normal both;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(3%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


.slideinBottom {
  animation: slideinBottom 1.0s linear;
}

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

.slideinTop {
  animation: slideinTop 4.0s linear;
}

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


.circle01 {
  animation: circle01 1.0s linear 0s 1 normal both;
}
@keyframes circle01 {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.circle02 {
  animation: circle02 1.0s linear 0s 1 normal both;
}
@keyframes circle02 {
  0% {
    transform: translate(-10px,10px);
  }
  100% {
    transform: translate(0,0);
  }
}
.circle03 {
  animation: circle03 1.0s linear 0s 1 normal both;
}
@keyframes circle03 {
  0% {
    transform: translate(10px,10px);
  }
  100% {
    transform: translate(0,0);
  }
}
 .js-scrollable {
    overflow: visible !important;
  }

#btnSkip,
#btnReplay {
    position: absolute;
    top: 6px;
    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: 121.25%;
    }
#top_animetion #animetion_in>#scene_1 .img01_04,
#top_animetion #animetion_in>#scene_1 .img01_05,
#top_animetion #animetion_in>#scene_1 .img01_06,
#top_animetion #animetion_in>#scene_1 .img01_07{
    z-index: 19;
    pointer-events: none;
}
#top_animetion #animetion_in>#scene_1 .img01_03 {
    z-index: 19;
    pointer-events: none;
}
#top_animetion #animetion_in>#scene_1 .img01_09 div img{
    width: 175%;
}
#top_animetion #animetion_in>#scene_1 .img01_09 img{
    opacity: 1;
}
#top_animetion #animetion_in>#scene_1 .img01_08{
    z-index: 18;
    pointer-events: none;
}
#top_animetion #animetion_in>#scene_1 .img01_09{
    z-index: 17;
}
#top_animetion #animetion_in>#scene_1 .img01_09 div{
    opacity: 1!important;
}
#top_animetion #animetion_in>#scene_1 .img01_010{
    pointer-events: none;
}

    #btnSkip,
    #btnReplay {
        position: absolute;
        top: unset;
        right: unset;
        bottom: 12px;
        left: 10px;
        width: calc(90px * 0.7);
        height: calc(20px * 0.7);
    }
    .js-scrollable {
        position: relative !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        pointer-events: auto;
    }

}