@charset "UTF-8";

._fnctWrap {line-height:1.5;}

/* Visual */
.visual-slider img {position: relative; left: 50%; display: block; max-width: none; max-height: 1106px; transform: translate(-50%,0);}
.visual-text {text-align: center;}
.visual-text strong {display: inline-block; font-family: 'Moon Medium'; font-size: 120px; line-height: 1.1; color: #fff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.visual-text strong span {float: left; display: block;}
.visual-text strong span.ani {bottom: -50px}
.ani-on .visual-text strong span.ani {bottom: 0;}
.ani-on .visual-text strong span.ani1 {transition-delay: 2.4s;}
.ani-on .visual-text strong span.ani2 {transition-delay: 2.6s;}
.ani-on .visual-text strong span.ani3 {transition-delay: 2.8s;}
.ani-on .visual-text strong span.ani4 {transition-delay: 3.0s;}
.ani-on .visual-text strong span.ani5 {transition-delay: 3.2s;}
.ani-on .visual-text strong span.ani6 {transition-delay: 3.4s;}
.visual-text p {display: inline-block; font-family: 'Moon Medium'; font-size: 50px; letter-spacing: 4px; color: #fff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.visual-text p span {float: left; display: block;}
.visual-text p span.ani {top: -50px;}
.ani-on .visual-text p span.ani {top: 0;}
.ani-on .visual-text p span.ani1 {transition-delay: 0s;}
.ani-on .visual-text p span.ani2 {transition-delay: 0.2s;}
.ani-on .visual-text p span.ani3 {transition-delay: 0.4s;}
.ani-on .visual-text p span.ani4 {transition-delay: 0.6s;}
.ani-on .visual-text p span.ani5 {transition-delay: 0.8s;}
.ani-on .visual-text p span.ani6 {transition-delay: 1s;}
.ani-on .visual-text p span.ani7 {transition-delay: 1.2s;}
.ani-on .visual-text p span.ani8 {transition-delay: 1.4s;}
.ani-on .visual-text p span.ani9 {transition-delay: 1.6s;}
.ani-on .visual-text p span.ani10 {transition-delay: 1.8s;}
.ani-on .visual-text p span.ani11 {transition-delay: 2s;}
.visual-text .space {width: 12px; height: 1px;}
.visual-control {font-size: 0; text-align: center; margin-top: 55px;}
.visual-control .state,
.visual-control .button,
.visual-control .paging {display: inline-block; vertical-align: middle; font-size: 0;}
.visual-control .state span {display: inline-block; font-family: 'Mont SemiBold'; font-size: 15px; vertical-align: middle; color: #fff;}
.visual-control .state .slash {margin: 0 5px; font-size: 10px;}
.visual-control .button {margin: 0 15px;}
.visual-control .button button {display: none; vertical-align: middle; text-indent: -99999px;}
.visual-control .button button.on {display: inline-block; width: 8px; height: 11px;}
.visual-control .button .stop {background: url('../images/btn-visual-stop.png') no-repeat center center;}
.visual-control .button .play {background: url('../images/btn-visual-play.png') no-repeat center center;}
.visual-control .paging button {display: inline-block; width: 50px; height: 1px; background: rgba(255,255,255,.5); vertical-align: middle; text-indent: -99999px;}
.visual-control .paging li {display: inline-block; vertical-align: middle;}
.visual-control .paging .slick-active button {height: 3px; background: rgba(255,255,255,1);}

.main-visual-scroll {position: absolute; width: 100%; left: 0; bottom: 220px; z-index: 1; text-align: center;}
.main-visual-scroll img {position:relative; display: inline-block; animation: upDown 1.5s ease-in-out infinite;}

@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

@media all and (max-width: 1400px) {
    .visual-slider img {max-height: 920px;}
    .main-visual-scroll {display: none;}
}

@media all and (max-width: 900px) {
    .visual-slider img {max-height: 700px;}
    .visual-text p {font-size: 40px;}
    .visual-text strong {font-size: 100px;}
    .visual-control {margin-top: 23px;}
}

@media all and (max-width: 500px) {
    .visual-slider img {max-height: 400px;}
    .visual-text p {font-size: 30px;}
    .visual-text strong {font-size: 70px;}
    .visual-control {margin-top: 14px;}
}