@charset "utf-8";
* {padding:0;margin:0;}


#topOnsen.effect {opacity:0;transition:all 2.5s ease-in-out;}
#topOnsen.effect.fade {opacity:1;}

#topOnsen.fade .mainTt span,#topOnsen.fade .t2 span {
	color: transparent;
	animation: blur 2.5s ease-out forwards;
}
#topOnsen.fade span:nth-child(1) {animation-delay: 0.1s;}
#topOnsen.fade span:nth-child(2) {animation-delay: 0.2s;}
#topOnsen.fade span:nth-child(3) {animation-delay: 0.3s;}
#topOnsen.fade span:nth-child(4) {animation-delay: 0.4s;}
#topOnsen.fade span:nth-child(5) {animation-delay: 0.5s;}
#topOnsen.fade span:nth-child(6) {animation-delay: 0.6s;}
#topOnsen.fade span:nth-child(7) {animation-delay: 0.7s;}

#topOnsen.fade .t2 span:nth-child(1) {animation-delay: 0.7s;}
#topOnsen.fade .t2 span:nth-child(2) {animation-delay: 0.8s;}
#topOnsen.fade .t2 span:nth-child(3) {animation-delay: 0.9s;}
#topOnsen.fade .t2 span:nth-child(4) {animation-delay: 1s;}
#topOnsen.fade .t2 span:nth-child(5) {animation-delay: 1.1s;}
#topOnsen.fade .t2 span:nth-child(6) {animation-delay: 1.2s;}
#topOnsen.fade .t2 span:nth-child(7) {animation-delay: 1.3s;}
#topOnsen.fade .t2 span:nth-child(8) {animation-delay: 1.4s;}
#topOnsen.fade .t2 span:nth-child(9) {animation-delay: 1.5s;}
#topOnsen.fade .t2 span:nth-child(10) {animation-delay: 1.6s;}

#topOnsen .txtArea {margin-top:-3rem;transition:all 0.4s ease-in-out;}
#topOnsen.fade .txtArea {margin-top:0rem;}



#wideBnArea .effect.fade span {opacity:1;}
#wideBnArea .effect.fade span {
	color: transparent;
	animation: blur-txt-wh 6s ease-out forwards;
}
 
@keyframes blur {
  0%    {text-shadow:  0 0 100px #473c0d; opacity:0;}
  10%    {text-shadow:  0 0 90px #473c0d;}
  28%    {text-shadow:  0 0 0px #473c0d;}
  35%    {opacity: 1;}
  100%    {text-shadow:  0 0 0px #473c0d;}
}
@keyframes blur-txt-wh {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  10%    {text-shadow:  0 0 90px #fff;}
  22%    {text-shadow:  0 0 0px #fff;}
  35%    {opacity: 1;}
  100%    {text-shadow:  0 0 0px #fff;}
}



#pnArea .letter span {
	opacity:1;color: transparent;
	animation: blur-txt-wh 4.5s ease-out forwards;
}
#pnArea .letter span:nth-child(1) {animation-delay: 0.2s;}
#pnArea .letter span:nth-child(2) {animation-delay: 0.4s;}
#pnArea .letter span:nth-child(3) {animation-delay: 0.6s;}
#pnArea .letter span:nth-child(4) {animation-delay: 0.8s;}
#pnArea .letter span:nth-child(5) {animation-delay: 1.0s;}
#pnArea .letter span:nth-child(6) {animation-delay: 1.2s;}
#pnArea .letter span:nth-child(7) {animation-delay: 1.4s;}
#pnArea .letter span:nth-child(8) {animation-delay: 1.6s;}



/* ofuro */
#contents.ofuro .section.fade {opacity:1;margin-top:0;}
#contents.ofuro .section.gensen.fade {margin-top:100px;}
#contents.ofuro .sbSection .section.ashitsubo {position:relative;z-index:-1;}
#contents.ofuro .sbSection .section.ashitsubo.fade::before {
	position:absolute;z-index:-1;bottom:0;right:0;
	content:"";
	width:600px;height:600px;
	background-repeat:no-repeat;
	animation: ashitsubo 4s steps(8);
	-webkit-animation:ashitsubo 4s steps(8);
	animation-iteration-count: infinite;
	animation-delay:2s;-moz-animation-delay: 2s;-webkit-animation-delay: 2s;-o-animation-delay: 2s;
}
@keyframes ashitsubo {
	from    {background-image:url(../images/bg_ofuro_ashitsubo.gif);background-position:top 0px right 0;}
	to  {background-image:url(../images/bg_ofuro_ashitsubo.gif);background-position:top -4800px right 0;}
}
	@media screen and (max-width: 760px) {
		#contents.ofuro .sbSection .section.ashitsubo.fade::before {width:100vw;height:100vw;background-size:cover;}

		@keyframes ashitsubo {
		from  {background-image:url(../images/bg_ofuro_ashitsubo.gif);background-position:top 0 right 0;}
		to  {background-image:url(../images/bg_ofuro_ashitsubo.gif);background-position:top -800vw right 0;}
		}
	}/* END @media screen and (max-width: 760px) */


/* ganban */
.ganban .kounou-wrap {opacity:0;margin-top:50px;transform: translateY(50px);transition:all 1s ease-in-out;}
.ganban .kounou-wrap.fade {opacity:1;transform: translateY(0px);}
.ganban .kounou-wrap.fade li {
	opacity:0;
	animation: kounou 1s ease-out forwards;
	-webkit-animation:kounou 1s ease-out forwards;
}
@keyframes kounou {
  0%    {opacity:0;}
  100%    {opacity:1;}
}
.ganban .kounou-wrap.fade li:nth-child(1) {animation-delay: 0.1s;}
.ganban .kounou-wrap.fade li:nth-child(2) {animation-delay: 0.2s;}
.ganban .kounou-wrap.fade li:nth-child(3) {animation-delay: 0.3s;}
.ganban .kounou-wrap.fade li:nth-child(4) {animation-delay: 0.4s;}
.ganban .kounou-wrap.fade li:nth-child(5) {animation-delay: 0.5s;}
.ganban .kounou-wrap.fade li:nth-child(6) {animation-delay: 0.6s;}
.ganban .kounou-wrap.fade li:nth-child(7) {animation-delay: 0.7s;}
.ganban .kounou-wrap.fade li:nth-child(8) {animation-delay: 0.8s;}



.ganban .section.unkai.fade::before {
	animation: cloud 10s ease-in-out infinite;
	-webkit-animation:cloud 10s ease-in-out infinite;
}
	@keyframes cloud {
	  0%    {background-position:bottom 0px right -50px;}
	  50%    {background-position:bottom -100px right;}
	  100%    {background-position:bottom 0px right -50px;}
	}
	@media screen and (max-width: 760px) {
	.ganban .section.unkai.fade::before {background-size:50%;}
		@keyframes cloud {
		  0%    {background-position:bottom 0px right -50px;}
		  50%    {background-position:bottom -100px right;}
		  100%    {background-position:bottom 0px right -50px;}
		}
	}/* END @media screen and (max-width: 760px) */


.ganban .section.unkai.fade::after {
	animation: cloud2 10s ease-in-out infinite;
	-webkit-animation:cloud2 10s ease-in-out infinite;
}
	@keyframes cloud2 {
	  0%    {background-position:bottom -20px right -20px;}
	  50%    {background-position:bottom 0px right -50px;}
	  100%    {background-position:bottom -20px right -20px;}
	}
	@media screen and (max-width: 760px) {
	.ganban .section.unkai.fade::after {background-size:50%;}
		@keyframes cloud {
		  0%    {background-position:bottom -20px right -20px;}
		  50%    {background-position:bottom 0px right -50px;}
		  100%    {background-position:bottom -20px right -20px;}
		}
	}/* END @media screen and (max-width: 760px) */


.ganban .section.unkai .pic:before {
	overflow:hidden;
	content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
	background:url(../images/bg_ganban_unkai.png) no-repeat top center;
	background-size:100%;
	animation: unkaiPic 10s ease-in-out infinite;
	-webkit-animation:unkaiPic 10s ease-in-out infinite;
}
	@keyframes unkaiPic {
	  0%    {background-position:top 300px left -300px;opacity:1;}
	  25%    {transform: scaleY(1.4, 1.2);}
	  50%    {background-position:top left;opacity:0.7;}
	  75%    {transform: scaleY(0,0);}
	  100%    {background-position:top 300px left -300px;opacity:1;}
	}
	@media screen and (max-width: 760px) {
	@keyframes unkaiPic {
	  0%    {background-position:top 100px left -20px;opacity:1;}
	  25%    {background-position:top 10px left 0;transform: scaleY(1.4, 1.2);}
	  50%    {background-position:top 0px left -50px;opacity:0.7;}
	  100%    {background-position:top 100px left -20px;opacity:1;}
	}
	}/* END @media screen and (max-width: 760px) */






#ganban-riyou .circle.fade .figure {
	animation: ganban-figure 2s ease-out forwards;
	-webkit-animation: ganban-figure 2s ease-out forwards;
	animation-delay: 2s;
}
	@keyframes ganban-figure {
	  0%    {transform:scale(1.0) translate(0px, 0px);}
	  100%  {transform:scale(0.6) translate(-350px,-150px);padding-bottom:0px;margin-bottom:-160px;}
	}

	@media screen and (max-width: 760px) {
	#ganban-riyou .circle.fade .figure {background-size:120%;background-position:top center;padding-bottom:0;}
	@keyframes ganban-figure {
	  0%    {transform:scale(1.0) translate(0px, 0px);}
	  100%    {transform:scale(1.0) translate(0px, 0px);padding-bottom:0;}
	}
	}/* END @media screen and (max-width: 760px) */



#ganban-riyou .circle.fade .figure li {
	opacity:0;
	animation: ganban-figure-li 2s ease-out forwards;
	-webkit-animation: ganban-figure-li 2s ease-out forwards;
}
#ganban-riyou .circle.fade .figure li:nth-child(1) {animation-delay: 0.4s;}
#ganban-riyou .circle.fade .figure li:nth-child(2) {animation-delay: 0.8s;}
#ganban-riyou .circle.fade .figure li:nth-child(3) {animation-delay: 1.2s;}
#ganban-riyou .circle.fade .figure li:nth-child(4) {animation-delay: 1.6s;}
	@keyframes ganban-figure-li {
	  0%    {opacity:0;}
	  100%    {opacity:1;}
	}

#ganban-riyou .circle.fade .setsumei {
	animation: ganban-setsumei 3s ease-out forwards;
	-webkit-animation: ganban-setsumei 3s ease-out forwards;
	animation-delay: 2s;
}
	@keyframes ganban-setsumei {
	  0%    {opacity:0;}
	  100%    {opacity:1;top:50px;}
	}



/* goriyou */
.goriyou .effect {padding-top:50px;opacity:0;transition:all 2s ease-in-out;}
.goriyou .fade {padding:0;opacity:1;}

.goriyou #goriyou-flow .fade li {
	opacity:0;
	animation: goriyou-flow 1s ease-out forwards;
	-webkit-animation: goriyou-flow 1s ease-out forwards;
}
.goriyou #goriyou-flow .fade li:nth-child(1) {animation-delay: 0.2s;}
.goriyou #goriyou-flow .fade li:nth-child(2) {animation-delay: 0.6s;}
.goriyou #goriyou-flow .fade li:nth-child(3) {animation-delay: 1.0s;}
.goriyou #goriyou-flow .fade li:nth-child(4) {animation-delay: 1.4s;}
.goriyou #goriyou-flow .fade li:nth-child(5) {animation-delay: 1.8s;}
	@keyframes goriyou-flow {
	  0%    {opacity:0;padding-left:150px;}
	  100%    {opacity:1;padding-left:100px;}
	}
	@media screen and (max-width: 760px) {
	@keyframes goriyou-flow {
	  0%    {opacity:0;padding-left:70px;}
	  100%    {opacity:1;padding-left:55px;}
	}
	}/* END @media screen and (max-width: 760px) */


/* event */
#contents.event #oyudon {
	position:absolute;
	z-index:0;
	animation: eventOyudon 0.5s ease-out forwards;
	-webkit-animation: eventOyudon 0.5s ease-out forwards;
}
	@keyframes eventOyudon {
	  0%    {top:50px;right:-200px;}
	  100%    {top:0px;right:-100px;}
	}
	@media screen and (max-width: 760px) {
	@keyframes eventOyudon {
	  0%    {top:50px;right:-85px;}
	  100%    {top:20px;right:-55px;}
	}
	}/* END @media screen and (max-width: 760px) */





/* enkai */
.enkai #firstDiv.fade .flow img {
	animation: enkai-img 3s ease-out forwards;
	-webkit-animation: enkai-img 3s ease-out forwards;
}
.enkai #firstDiv.fade .flow img:nth-child(1) {animation-delay: 0.4s;}
.enkai #firstDiv.fade .flow img:nth-child(2) {animation-delay: 0.8s;}
.enkai #firstDiv.fade .flow img:nth-child(3) {animation-delay: 1.2s;}
.enkai #firstDiv.fade .flow img:nth-child(4) {animation-delay: 1.6s;}
	@keyframes enkai-img {
	  0%    {opacity:0;}
	  100%    {opacity:1;}
	}

/*
.enkai #firstDiv .flow img:nth-child(1) {top:-110px;left:calc((100% - 1050px) / 2);}
.enkai #firstDiv .flow img:nth-child(2) {top:20px;right:calc((100% - 1050px) / 2);}
.enkai #firstDiv .flow img:nth-child(3) {top:150px;left:calc((100% - 850px) / 2);}
.enkai #firstDiv .flow img:nth-child(4) {top:280px;right:calc((100% - 800px) / 2);}
*/