/* 画面分割用modifire */
body.is-image-ready.is-slide-show .top-animation--split:before {
    width: 0;
}
.top-animation--split:before {
    right: 0;
}
body.is-image-ready.is-slide-show .top-animation--split:after {
    width: 0;
}
.top-animation--split:after {
    right: 50%;
}
.top-animation--split:before,
.top-animation--split:after {
    width: 50%;
    height: 100%;
    position: absolute;
    content: "";
    display: block;
    background-color: #fff;
    -o-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1000000;
    top: 0;
}


/* アニメーションのコンテナ */
.top-animation {
	background-color: #000;
	position: relative;
	width: 100%;
	overflow: hidden;
	/* 最大の高さは-5pxする（中央調整のため） */
	height: 910px;
	height: calc( 100vh - 85px );
	max-height: 910px;
	min-height: 380px;
}
@media ( max-width: 767px ) {
	.top-animation {
		height: 455px;
		height: calc( 100vh - 65px );
		max-height: 455px;
		min-height: 310px;
	}
}
@media (max-width: 479px) {
	.top-animation {
		height: calc( 100vh - 65px );
	}
}

/* フッター固定がある場合 */
body.has-fixed-footer .top-animation {
	/* 最大の高さは-5pxする（中央調整のため） */
	height: 910px;
	height: calc( 100vh - 165px );
	max-height: 910px;
	min-height: 380px;
}
@media ( max-width: 767px ) {
	body.has-fixed-footer .top-animation {
		height: 455px;
		height: calc( 100vh - 145px );
		max-height: 455px;
		min-height: 310px;
	}
}
@media (max-width: 479px) {
	body.has-fixed-footer .top-animation {
		height: calc( 100vh - 163px );
	}
}


/* スライダー */
.top-animation .bx-wrapper,
.top-animation .bx-viewport {
	width: 100% !important;
	height: 100% !important;
}
.slider {
	position: relative;
	width: 2000px !important;
	left: 50%;
	margin-left: -1000px;
	top: 50%;
	margin-top: -458px;
}
.slider li {
	width: 2000px !important;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
}
.slider li img {
	-webkit-transition: -webkit-transform 0s step-end 1.2s;
	transition: -webkit-transform 0s step-end 1.2s;
	-o-transition: transform 0s step-end 1.2s;
	transition: transform 0s step-end 1.2s;
	transition: transform 0s step-end 1.2s, -webkit-transform 0s step-end 1.2s;
	-webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	        transform: scale(1, 1);
}
.slider li.is-show img {
	-webkit-transition: -webkit-transform 7.2s linear;
	transition: -webkit-transform 7.2s linear;
	-o-transition: transform 7.2s linear;
	transition: transform 7.2s linear;
	transition: transform 7.2s linear, -webkit-transform 7.2s linear;
	-webkit-transform: scale(1.08, 1.08);
	    -ms-transform: scale(1.08, 1.08);
	        transform: scale(1.08, 1.08);
}

.slider li img {
	width: 100%;
	max-width: none;
}
@media ( max-width: 767px ) {
	.slider {
		position: relative;
		width: 1000px !important;
		margin-left: -500px;
		margin-top: -229px;
	}
	.slider li {
		width: 1000px !important;
	}
}
@media ( min-width: 2000px ) {
	.slider {
		width: 100% !important;
		left: 0%;
		margin-left: 0;
		top: 0;
		margin-top: 0;
	}
	.slider li {
		width: 100% !important;
	}
}


/* 重なり順 */
.top-animation-message,
.top-animation-scroll,
.slider,
.particles {
	position: absolute !important;
}
.top-animation-message,
.top-animation-scroll {
	z-index: 3;
}
.particles,
.particles-layer {
	z-index: 2;
}
.slider {
	z-index: 1;
}


/* 光とともに */
.top-animation-message {
	width: 288px;
	left: 50%;
	margin-left: -144px;
	top: 50%;
	margin-top: -40px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/*
	-webkit-transition: opacity 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s, -webkit-filter 1s ease-in-out .2s;
	transition: opacity 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s, -webkit-filter 1s ease-in-out .2s;
	-o-transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s, filter 1s ease-in-out .2s;
	transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s, filter 1s ease-in-out .2s;
	transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s, filter 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s, -webkit-filter 1s ease-in-out .2s;
	*/
	-webkit-transition: opacity 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s;
	transition: opacity 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s;
	-o-transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s;
	transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s;
	transition: transform 1s ease-in-out .2s, opacity 1s ease-in-out .2s, -webkit-transform 1s ease-in-out .2s;
	/*
	-webkit-filter: blur(20px);
	        filter: blur(20px);
	*/
	-webkit-transform: translateY(20px);
	    -ms-transform: translateY(20px);
	        transform: translateY(20px);
	opacity: 0;
}
body.is-image-ready.is-slide-show .top-animation-message {
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
	opacity: 1;
	/*
	-webkit-filter: blur(0);
	        filter: blur(0);
	*/
}
@media ( max-width: 767px ) {
	.top-animation-message {
		width: 144px;
		margin-left: -72px;
		margin-top: -20px;
	}
}
@media (max-width: 479px) {
	.top-animation-message {
		margin-top: -40px;
	}
}


/* スクロールボタン */
.top-animation-scroll {
	font-family: 'Roboto' , "ＭＳ Ｐゴシック", Arial, sans-serif;
	font-size: 1.3rem;
	color: #fff;
	padding-bottom: 32px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform .3s ease .9s;
	transition: -webkit-transform .3s ease .9s;
	-o-transition: transform .3s ease .9s;
	transition: transform .3s ease .9s;
	transition: transform .3s ease .9s, -webkit-transform .3s ease .9s;
	-webkit-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	-webkit-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	        transform: translateY(-10px);
	opacity: 0;
	-webkit-animation-duration: 4s;
	        animation-duration: 4s;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	        animation-direction: normal;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
}
@-webkit-keyframes ARROW {
	0% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0.5; }
	64% { opacity: 0.5; }
	100% { opacity: 1; }
}
@keyframes ARROW {
	0% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 0.5; }
	64% { opacity: 0.5; }
	100% { opacity: 1; }
}
body.is-image-ready.is-slide-show .top-animation-scroll {
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
	-webkit-animation-name: ARROW;
	        animation-name: ARROW;
}
.top-animation-scroll:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 7px;
	margin: auto;
	width: 34px;
	height: 34px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	    transform: rotate(135deg);
}
@media ( max-width: 767px ) {
	.top-animation-scroll {
		bottom: 0;
	}
	.top-animation-scroll:after {
		top: 17px;
		width: 17px;
		height: 17px;
	}
}
@media (max-width: 479px) {
	.top-animation-scroll {
		bottom: 60px;
	}
}


/* メイン幾何学模様 */
.particles,
.particles-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.particles-layer {
	background-color: rgba(0,0,0,1);
	-webkit-transition: background-color 2s ease-in-out 2s;
	-o-transition: background-color 2s ease-in-out 2s;
	transition: background-color 2s ease-in-out 2s;
}
body.is-image-ready.is-slide-show .particles-layer {
	background-color: rgba(0,0,0,0);
}
@-webkit-keyframes PARTICLE {
	0% { opacity: 0; -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); }
	12% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
	100% { opacity: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes PARTICLE {
	0% { opacity: 0; -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); }
	12% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
	100% { opacity: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
.particles {
	opacity: 0;
	-webkit-animation-duration: 4s;
	        animation-duration: 4s;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	        animation-direction: normal;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
}
body.is-image-ready.is-slide-show .particles {
	-webkit-animation-name: PARTICLE;
	        animation-name: PARTICLE;
}


/* 下層背景 */
.particles-bg {
	width: 100%;
	height: 500px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	-webkit-transform: scale(0, 0);
	    -ms-transform: scale(0, 0);
	        transform: scale(0, 0);
}
.particles-bg-2 {
	height: 100%;
}
body.is-image-ready.is-slide-show .particles-bg {
	-webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	        transform: scale(1, 1);
}