/* *******************************************************

 * filename : main.css

******************************************************** */

.ms-preloader {

	width: 100%;

	height: 100%;

	position: fixed;

	z-index: 9999999;

	top: 0;

	left: 0;

	opacity: 1;

	visibility: visible;

}





.main-visual-con .slick-track, .main-visual-con .slick-list {

	-webkit-perspective: 2000;

	-webkit-backface-visibility: hidden;

}



.main-visual-con, .main-visual-con .slick-list, .main-visual-con .slick-track, .main-visual-item {

	height: 100%;

}



.main-visual-con {

	z-index: 1;

}



.main-visual-item {

	position: relative;

}



.main-visual-item .main-visual-pc-img, .main-visual-item .main-visual-m-img {

	width: 100%;

	height: 100%;

	background-size: cover !important;

	-webkit-transition: transform 5000ms  ease-in-out;

	-moz-transition: transform 5000ms ease-in-out;

	-o-transition: transform 5000ms ease-in-out;

	-ms-transition: transform 5000ms ease-in-out;

	transition: transform 5000ms ease-in-out;

}





                             



@keyframes text-up {

	from {

		transform: translate3d(0, 150%, 0);

	}



	to {

		transform: translate3d(0, 0, 0);

	}



}



/* ******************left nav ********************* */

#fp-nav.right {
	top: 50%;
    transform: translateY(-50%);
	left: 24px;
    display: none;
}


#fp-nav.right .fp-menu-wr {

	display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

	transition: all .3s ease

}



#fp-nav.right ul li {

	display: block;

	overflow: hidden;

}

#fp-nav.right ul li a {

	display: flex;

    flex-flow: column;

    align-items: center;

	position: relative;

    margin-bottom: 10px;

	transition: all .3s ease;

}

#fp-nav.right ul li em {

    display: inline-block;

    margin-bottom: 10px;

    width: 9px;

    height: 9px;

    background-color: rgba(0, 0, 0, 0.20);

    border-radius: 50%;

}

#fp-nav.right ul li i {

    display: block;

    margin-bottom: 10px;

    width: 2px;

    height: 25px;

    background: rgba(0, 0, 0, 0.20);

	transition: all .3s ease

}

#fp-nav.right ul li span {

    display:none;

    width: 22px;

text-align: center;

font-size: 16px;

font-style: normal;

font-weight: 400;

color: #666;

writing-mode: vertical-rl;

    direction: rtl;

    text-align: center;

}

#fp-nav ul li .fp-tooltip {

	display: none;

}

#fp-nav.right ul li a.active em {

    display: none;

}

#fp-nav.right ul li a.active span{

	display: inline-block;

}

#fp-nav.fp_white ul li a i{

    background-color: rgba(255, 255, 255, 0.20);

}

#fp-nav.fp_white ul li a em{

    background: rgba(255, 255, 255, 0.20);

}

#fp-nav.fp_white ul li a span{

color: var(--white-color);

}



#fp-nav ul li:nth-child(n+5) {

	display: none;

}





/* ******************title********************** */



@media screen and (min-width:1181px) {





    .transY {

        -webkit-transform: translateY(60px);

        -moz-transform: translateY(60px);

        -ms-transform: translateY(60px);

        transform: translateY(60px);

        opacity: 0;

        visibility: hidden

    }



    .transYF {

        -webkit-transform: translateY(-60px);

        -moz-transform: translateY(-60px);

        -ms-transform: translateY(-60px);

        transform: translateY(-60px);

        opacity: 0;

        visibility: hidden

    }



    .transX {

        -webkit-transform: translateX(60px);

        -moz-transform: translateX(60px);

        -ms-transform: translateX(60px);

        transform: translateX(60px);

        opacity: 0;

        visibility: hidden

    }



    .transXF {

        -webkit-transform: translateX(-60px);

        -moz-transform: translateX(-60px);

        -ms-transform: translateX(-60px);

        transform: translateX(-60px);

        opacity: 0;

        visibility: hidden

    }



    .active .transX, .active .transXF, .active .transY, .active .transYF {

        -webkit-transform: translate(0);

        -moz-transform: translate(0);

        -ms-transform: translate(0);

        transform: translate(0);

        opacity: 1;

        visibility: visible

    }



    .trans {

        -webkit-transition: .7s ease-out;

        -moz-transition: .7s ease-out;

        transition: .7s ease-out

    }



    .dly-1 {

        -webkit-transition-delay: .1s;

        -moz-transition-delay: .1s;

        transition-delay: .1s

    }



    .dly-2 {

        -webkit-transition-delay: .2s;

        -moz-transition-delay: .2s;

        transition-delay: .2s

    }



    .dly-3 {

        -webkit-transition-delay: .3s;

        -moz-transition-delay: .3s;

        transition-delay: .3s

    }



    .dly-4 {

        -webkit-transition-delay: .4s;

        -moz-transition-delay: .4s;

        transition-delay: .4s

    }



    .dly-5 {

        -webkit-transition-delay: .5s;

        -moz-transition-delay: .5s;

        transition-delay: .5s

    }



    .dly-6 {

        -webkit-transition-delay: .6s;

        -moz-transition-delay: .6s;

        transition-delay: .6s

    }



    .dly-7 {

        -webkit-transition-delay: .7s;

        -moz-transition-delay: .7s;

        transition-delay: .7s

    }



    .dly-8 {

        -webkit-transition-delay: .8s;

        -moz-transition-delay: .8s;

        transition-delay: .8s

    }



    .dly-9 {

        -webkit-transition-delay: .9s;

        -moz-transition-delay: .9s;

        transition-delay: .9s

    }



    .dly-10 {

        -webkit-transition-delay: 1s;

        -moz-transition-delay: 1s;

        transition-delay: 1s

    }



    .dly-11 {

        -webkit-transition-delay: 1.1s;

        -moz-transition-delay: 1.1s;

        transition-delay: 1.1s

    }



    .dly-12 {

        -webkit-transition-delay: 1.2s;

        -moz-transition-delay: 1.2s;

        transition-delay: 1.2s

    }



    .active .am-lsi {

        -webkit-animation: lightSpeedIn .8s both;

        -moz-animation: lightSpeedIn .8s both;

        animation: lightSpeedIn .8s both

    }



    .active .am-fiu {

        -webkit-animation: fadeInUp .8s both;

        -moz-animation: fadeInUp .8s both;

        animation: fadeInUp .8s both

    }



    .active .am-fid {

        -webkit-animation: fadeInDown .8s both;

        -moz-animation: fadeInDown .8s both;

        animation: fadeInDown .8s both

    }



    .active .am-fir {

        -webkit-animation: fadeInRight .8s both;

        -moz-animation: fadeInRight .8s both;

        animation: fadeInRight .8s both

    }



    .active .am-fil {

        -webkit-animation: fadeInLeft .8s both;

        -moz-animation: fadeInLeft .8s both;

        animation: fadeInLeft .8s both

    }



    .active .am-rvv {

        position: relative

    }



    .active .am-rvv:before {

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: #000;

        -webkit-transform: scaleY(0);

        -moz-transform: scaleY(0);

        -ms-transform: scaleY(0);

        transform: scaleY(0);

        -webkit-transform-origin: 0 0 0;

        -moz-transform-origin: 0 0 0;

        -ms-transform-origin: 0 0 0;

        transform-origin: 0 0 0;

        -webkit-animation: reveal-v 2s .2s cubic-bezier(0, 0, .2, 1) both;

        -moz-animation: reveal-v 2s .2s cubic-bezier(0, 0, .2, 1) both;

        animation: reveal-v 2s .2s cubic-bezier(0, 0, .2, 1) both

    }



    .active .am-rvl {

        position: relative

    }



    .active .am-rvl:before {

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: #000;

        -webkit-transform: scaleX(0);

        -moz-transform: scaleX(0);

        -ms-transform: scaleX(0);

        transform: scaleX(0);

        -webkit-transform-origin: 0 0 0;

        -moz-transform-origin: 0 0 0;

        -ms-transform-origin: 0 0 0;

        transform-origin: 0 0 0;

        -webkit-animation: reveal-l 2s .2s cubic-bezier(0, 0, .2, 1) both;

        -moz-animation: reveal-l 2s .2s cubic-bezier(0, 0, .2, 1) both;

        animation: reveal-l 2s .2s cubic-bezier(0, 0, .2, 1) both

    }



    .active .am-delay-1 {

        -webkit-animation-delay: .1s;

        -moz-animation-delay: .1s;

        animation-delay: .1s

    }



    .active .am-delay-2 {

        -webkit-animation-delay: .2s;

        -moz-animation-delay: .2s;

        animation-delay: .2s

    }



    .active .am-delay-3 {

        -webkit-animation-delay: .3s;

        -moz-animation-delay: .3s;

        animation-delay: .3s

    }



    .active .am-delay-4 {

        -webkit-animation-delay: .4s;

        -moz-animation-delay: .4s;

        animation-delay: .4s

    }



    .active .am-delay-5 {

        -webkit-animation-delay: .5s;

        -moz-animation-delay: .5s;

        animation-delay: .5s

    }



    .active .am-delay-6 {

        -webkit-animation-delay: .6s;

        -moz-animation-delay: .6s;

        animation-delay: .6s

    }



    .active .am-delay-7 {

        -webkit-animation-delay: .7s;

        -moz-animation-delay: .7s;

        animation-delay: .7s

    }



    .active .am-delay-8 {

        -webkit-animation-delay: .8s;

        -moz-animation-delay: .8s;

        animation-delay: .8s

    }



    .active .am-delay-9 {

        -webkit-animation-delay: .9s;

        -moz-animation-delay: .9s;

        animation-delay: .9s

    }



    .active .am-delay-10 {

        -webkit-animation-delay: 1s;

        -moz-animation-delay: 1s;

        animation-delay: 1s

    }



    .active .am-delay-11 {

        -webkit-animation-delay: 1.1s;

        -moz-animation-delay: 1.1s;

        animation-delay: 1.1s

    }



    .active .am-delay-12 {

        -webkit-animation-delay: 1.2s;

        -moz-animation-delay: 1.2s;

        animation-delay: 1.2s

    }



}