/* *******************************************************
 * 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: 0;
	right: 0;
    height: 100%;
    width: 100px;
    display: flex;
    justify-content: center;
}

#fp-nav.right .fp-menu-wr {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	transition: all .3s ease
}
#fp-nav.right .fp-menu-wr::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: calc(100% - 100px);
    background-color: rgba(255, 255, 255, 0.15);
}
#fp-nav.right ul li {
	display: block;
	padding: 12px 0;
	overflow: hidden;
}
#fp-nav.right ul li a {
	display: block;
	position: relative;
	transition: all .3s ease;
}

#fp-nav.right ul li a span {
    display: block;
    width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-image: url(../images/right_button.svg);
    background-position: center;
	transition: all .3s ease
}

#fp-nav ul li .fp-tooltip {
	display: none;
}

#fp-nav.right ul li a.active span{
	background-image: url(../images/right_hover.svg);
}

#fp-nav ul li:nth-child(n+6) {
	display: none;
}
#fp-nav.fp_grey .fp-menu-wr::before {
background-color: rgba(170,170,170,0.15);
}
#fp-nav.fp_grey .fp-menu-wr span {
background-image: url(../images/right_button2.svg);
}

@media (max-width:1366px) {

#fp-nav.right {
    width: 80px;
}


}

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

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


    .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
    }

}