/***animation******************************/
#conte03,
#conte02{
	position: relative;
	overflow: hidden;
}
#conte03:after,
#conte03:before,
#conte02:after,
#conte02:before{
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
#indexCampaign{
	position: relative;
}
#indexCampaign section{
	position: relative;
	z-index: 1;
}

#indexCampaign:after{
	content: '';
	display: block;
	position: absolute;
	width: 109px;
	height: 520px;
	bottom: 50%;
	left: 10%;
	background: url(../img/illu-s01.png)no-repeat;
	background-size: contain;
	background-position: center;
	-webkit-animation-name: tate01;
	animation-name: tate01;
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-animation-duration: 16s;
	animation-duration: 16s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}


#conte03:after{
	width: 200px;
	height: 950px;
	top: 0;
	right: -5%;
	background: url(../img/illu-l01.png)no-repeat;
	background-size: contain;
	background-position: center;
	-webkit-animation-name: tate02;
	animation-name: tate02;
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-animation-duration: 16s;
	animation-duration: 16s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

#conte03:before{
	width: 200px;
	height: 110px;
	top: 40%;
	left: 0%;
	background: url(../img/illu-dot21.png)no-repeat;
	background-size: contain;
	background-position: center;
	animation-name: fadeinout;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
.mono .bg-dot{
	position: absolute;
	width: 600px;
	height: 425px;
	background: url(../img/illu-dot11.png)no-repeat;
	background-size: contain;
	background-position: center;
	-webkit-animation-name: tate03;
	animation-name: tate03;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}

#conte03 .bg-dot{
	left: -10%;
	top: -20%;
	-webkit-animation-name: tate03;
	animation-name: tate03;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}


@-webkit-keyframes yoko01 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: .0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(100%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(200%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@keyframes yoko01 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: .0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(100%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(200%,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}


@-webkit-keyframes tate01 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@keyframes tate01 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@-webkit-keyframes tate02 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@keyframes tate02 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}


@-webkit-keyframes tate03 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0.5;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@keyframes tate03 {
	0% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
	50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,50%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0.5;
	}
	100% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,100%) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 0;
	} 
}

@keyframes fadeinout {
	0% {
		opacity: 0;
		animation-timing-function: ease-in-out;
	} 
	50% {
		opacity: 1;
		animation-timing-function: ease-in-out;
	}
	100% {
		animation-timing-function: ease-in-out;
		opacity: 0;
	} 
}
.slick-initialized .slick-slide.timerHidden,
.next-item.timerHidden,
.next-item.timerHidden,
.timerHidden {
  display: none; /* 非表示にする */
}
.slick-initialized .slick-slide.timerVisible,
.next-item.timerVisible,
.next-item.timerVisible,
.timerVisible{
	display: block;
}

/**icon-anime**********/
/* 横に揺れる
.jersey img {
  animation: sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
*/
/*ひらひら揺れる*/
.jersey{
  animation: breeze 4s ease-in-out infinite;
  transform-origin: bottom center;
  display: block;
}

@keyframes breeze {
  0%   { transform: rotate(0deg) translateX(0); }
  25%  { transform: rotate(2deg) translateX(1px); }
  50%  { transform: rotate(0deg) translateX(0); }
  75%  { transform: rotate(-2deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/*きらっと光る（Shine）
.ticket-icon {
  position: relative;
  overflow: hidden;
}

.ticket-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}
*/

/*ホバーで軽くふくらむ（Hover Scale）
.ticket-icon {
  transition: transform 0.3s ease;
}
.ticket-icon:hover {
  transform: scale(1.1);
}
*/
/*ゆるくバウンドする（Bounce）*/
.ticket-icon img {
  animation: bounce 2.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


.mono .i-anime{
	position: relative;
}
.mono .i-anime:after,
.mono .i-anime:before{
	content: '';
	display: block;
	position: absolute;
	background-size: contain;
	background-position: center;
}
.mono .i-anime.ticket-kaihi:before{
	background: url(../img/toku-icon/toku-i-01-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 18px;
	height: 20px;
	top: 34%;
  left: 45%;
  animation: bounceFade 6s ease-in-out infinite;
  opacity: 1;
}

.slash-bounce {
  animation: bounceFade 6s ease-in-out infinite;
}

@keyframes bounceFade {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  5% {
    transform: translateY(-5px);
    opacity: 1;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  15% {
    transform: translateY(-5px);
  }
  20% {
    transform: translateY(5px);
  }
  30% {
    transform: translateY(-50px);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


.mono .i-anime.ticket-hikikae:before{
	background: url(../img/toku-icon/toku-i-02-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 66px;
	height: 40px;
	top: 28%;
  left: 34%;
  transform-origin: left bottom;
  animation: rotate25 6s ease-in-out infinite;
}
@keyframes rotate25 {
  0% {
    transform: rotate(-25deg);
    opacity: 1;
  }
  15% {
    transform: rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: rotate(0deg);
    opacity: 0;
  }
  45% {
    transform: rotate(-25deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-25deg);
    opacity: 1;
  }
}


.mono .i-anime.ticket-mae:before{
	background: url(../img/toku-icon/toku-i-03-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 18px;
	height: 20px;
	top: 37%;
  left: 47%;
  animation: ticket-mae 6s ease-in-out infinite;
}
@keyframes ticket-mae {
  0% {
    transform: scale(0.7);
  }
  15% {
    transform: scale(1.1);
  }
  30% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(0.7);
  }
}
.mono .i-anime.megaphone-icon:before{
	background: url(../img/toku-icon/toku-i-04-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 74px;
	height: 61px;
	top: 20%;
  left: 26%;
  transform: rotate(0deg);
  animation: pulseSwing 6s ease-in-out infinite;
}


@keyframes pulseSwing {
  0%, 50% { 
    transform: rotate(0deg) scale(1); 
  }

  /* 動き始め（少し拡大＋揺れ） */
  8% { transform: rotate(-4deg) scale(1.1); }
  16% { transform: rotate(-2deg) scale(1.05); }
  24% { transform: rotate(-4deg) scale(1.1); }

  /* 50%以降〜100%まで停止状態を維持 */
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.mono .i-anime.twel:before{
	background: url(../img/toku-icon/toku-i-06-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 87px;
	height: 60px;
	top: 20%;
  left: 23%;
  animation: dropIn 4s ease-out forwards infinite;
  /*揺れる
  animation: breeze 4s ease-in-out infinite;
  transform-origin: bottom center;*/
}
@keyframes dropIn {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  85% {
    transform: translateY(0px);
    opacity: 0;
  }
  90% {
    transform: translateY(-70px);
    opacity: 0;
  }
  95% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}
.mono .i-anime.uniform:before{
	background: url(../img/toku-icon/toku-i-07-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 30px;
	height: 25px;
	top: 32%;
  left: 39%;
  animation: ticket-mae 6s ease-in-out infinite;
}
.mono .sig-all{
	position: relative;
}
.mono .sig-all .anime{
	position: absolute;
	top: 0;
	left: 0;
}
.mono .sig-all .anime li:after{
	display: block;
	height: 2px;
	width: 30px;
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	animation: yokoninobiru 6s ease-in-out infinite;
}
.mono .sig-all .anime li img{
	width: 100%;
	height: auto;
}
.mono .sig-all .anime li{
	top: 20px;
	left: 70px;
	width: 22px;
	height: 30px;
	border: none;
	position: relative;
  animation: slideLeft 6s ease-in-out infinite;
  transform: translateX(30px); /* 初期位置 */
}
.mono .sig-all .anime li:nth-child(2){
	top: 30px;
	left: 35px;
}
.mono .sig-all .anime li:nth-child(3){
	top: 0px;
	left: 85px;
}

@keyframes slideLeft {
  0% {
    transform: translateX(30px); /* 右端からスタート */
  }
  10% {
    transform: translateX(0); /* 左にスッと移動（0.6秒） */
  }
  50% {
    transform: translateX(0); /* 左端で3秒ほど停止 */
  }
  60% {
    transform: translateX(30px); /* 右へ戻る準備（0.6秒） */
  }
  100% {
    transform: translateX(30px); /* 右端で停止（また次のループへ） */
  }
}

@keyframes yokoninobiru {
  0% {
    width: 0px; /* 右端からスタート */
  }
  10% {
    width: 30px; /* 左にスッと移動（0.6秒） */
  }
  50% {
    width: 0px; /* 左端で3秒ほど停止 */
  }
  60% {
    width: 0px; /* 右へ戻る準備（0.6秒） */
  }
  100% {
    width: 0px; /* 右端で停止（また次のループへ） */
  }
}
.mono .i-anime.signeture:before{
	background: url(../img/toku-icon/toku-i-09-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 45px;
	height: 60px;
	top: 15%;
  left: 35%;
  animation: slideLeft 6s ease-in-out infinite;
  transform: translateX(0px); /* 初期位置 */
}
.mono .i-anime.signeture span{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.mono .i-anime.signeture span:after{
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background: #fff;
	animation: yokoninobiru 6s ease-in-out infinite;
	position: absolute;
	top: 44%;
	left: 40%;
}
.mono .i-anime.paty:before{
	background: url(../img/toku-icon/toku-i-10-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 34px;
	height: 64px;
	top: 15%;
  left: 15%;
  animation: floatToRightUp 3s ease-in-out infinite alternate;
}
.mono .i-anime.paty:after{
	background: url(../img/toku-icon/toku-i-10-02.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 34px;
	height: 64px;
	top: 15%;
  right: 15%;
  animation: floatToleftUp 3s ease-in-out infinite alternate;
}

@keyframes floatToRightUp {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0); /* 右に40px、上に20px移動 */
  }
  100% {
    transform: translate(60%, -10px); /* 右に40px、上に20px移動 */
  }
}
@keyframes floatToleftUp {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0); /* 右に40px、上に20px移動 */
  }
  100% {
    transform: translate(-63%, -10px); /* 右に40px、上に20px移動 */
  }
}

.mono .i-anime.croak:before{
	background: url(../img/toku-icon/toku-i-11-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 70px;
	height: 40px;
	top: 25%;
  left: 25%;
	animation: rotateY 6s infinite linear;
}

/* Y軸回転アニメーション */
@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  5% {
    transform: rotateY(0deg);
  }
  15% {
    transform: rotateY(180deg);
  }
  25% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.mono .i-anime.gate:before{
	background: url(../img/toku-icon/toku-i-12-01.png)no-repeat;
	background-size: contain;
	background-position: center;
	width: 40px;
	height: 60px;
	top: 15%;
  right: 25%;
  animation: gate 7s ease-in-out infinite;
}
@keyframes gate {
  0% {
    transform: translateX(0px);
    transform: scale(1);
    opacity: 1;
  }
  5% {
    transform: translateX(-30px) scale(0.7);
    opacity: 0;
  }
  15% {
    transform: translateX(0px) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



/**animation********************/
@media screen and (max-width: 1179px) {

}
@media screen and (max-width: 1023px) {

}
@media screen and (max-width: 767px) {

	#indexCampaign:after{
		width: 100px;
		height: 200px;
		bottom: 50%;
		left: -20px;
		background: url(../img/illu-s01.png)no-repeat;
		background-size: contain;
	}

	.mono .i-anime.ticket-kaihi:before{
		width: 15px;
		height: 15px;
	}
	.mono .i-anime.ticket-hikikae:before{
		width: 50px;
		height: 38px;
		top: 24%;
	}
	.mono .i-anime.ticket-mae:before{
		top: 35%;
	  left: 44%;
	}
	.mono .i-anime.megaphone-icon:before{
		width: 55px;
		height: 50px;
		left: 24%;
		top: 18%;
	}
	.mono .i-anime.twel:before{
		width: 70px;
		height: 50px;
		left: 20%;
	}
	.mono .i-anime.uniform:before{
		top: 30%;
	  left: 36%;
	}

	.mono .sig-all .anime li{
		top: 10px;
		left: 35px;
	}
	.mono .sig-all .anime li:nth-child(2){
		top: 45px;
		left: -10px;
	}
	.mono .sig-all .anime li:nth-child(3){
		top: 45px;
		left: 5px;
	}
	.mono .i-anime.signeture:before{
		width: 25px;
		height: 45px;
		top: 15%;
	  left: 28%;
	}
	.mono .i-anime.signeture span:after{
	    top: 42%;
	    left: 30%;
	}

	.mono .i-anime.paty:after,
	.mono .i-anime.paty:before{
		width: 30px;
		height: 50px;
	}
	.mono .i-anime.paty:before{
		top: 15%;
	  left: 7%;
	}
	.mono .i-anime.paty:after{
		top: 15%;
	  right: 7%;
	}
	.mono .i-anime.croak:before{
		width: 60px;
		height: 35px;
		top: 25%;
	left: calc((100% - 65px) / 2);
	}
	.mono .i-anime.gate:before{
		width: 30px;
		height: 50px;
	}




}
@media screen and (max-width: 460px) {

}