#container{
	width:100%;
}
/* ---------------------------------------------------------------------
 mainvisual
--------------------------------------------------------------------- */
#mainvisual{
	width:100%;
	height:537px;
	padding-top:0;
	position: relative;
	box-sizing:border-box;
	/*overflow: hidden;*/
}
/* ---------------------------------------------------------------------
 mv_catch
--------------------------------------------------------------------- */
#mv_catch{
	width:435px;
	position: absolute;
	left: 11%; top: 170px;
	z-index:103;
}
#mv_catch span{
	width:auto;
	height:60px;
	display:block;
	overflow:hidden;
}
#mv_catch1{
	margin-bottom:17px;
}
#mv_catch img{
	height:100%;
	display:block;
	opacity:0;
}
#mv_catch.show #mv_catch1 img{
	-webkit-animation:	showCatch 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal forwards;
	animation:			showCatch 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal forwards;
}
#mv_catch.show #mv_catch2 img{
	-webkit-animation:	showCatch 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 normal forwards;
	animation:			showCatch 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 normal forwards;
}
@-webkit-keyframes showCatch{
	0%{		-webkit-transform:translateY(100%);	opacity:0;}
	100%{	-webkit-transform:translateY(0%);	opacity:1;}
}
@keyframes showCatch{
	0%{		transform:translateY(100%);	opacity:0;}
	100%{	transform:translateY(0%);	opacity:1;}
}
/* ---------------------------------------------------------------------
 mv_slider
--------------------------------------------------------------------- */
#mv_slider{
	width:95%;
	height:480px;
	margin:30px 0 0;
	position:absolute;
	left:auto; right:0;
	overflow:hidden;
	z-index:101;
	opacity:0;
}
#mv_slider.show{
	-webkit-animation:	fadein 2.4s ease 0s 1 normal forwards;
	animation:			fadein 2.4s ease 0s 1 normal forwards;
}
#mv_slider .swiper-wrapper{
	
}
#mv_slider .swiper-slide{
	overflow:hidden;
}
#mv_slider .swiper-slide .image{
	width:100%;
	height:100%;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

#mv_slide1 .image{	background-image:url(../img/mv_slide1.jpg);}
#mv_slide2 .image{	background-image:url(../img/mv_slide2.jpg);}
#mv_slide3 .image{	background-image:url(../img/mv_slide3.jpg);}
#mv_slide4 .image{	background-image:url(../img/mv_slide4.jpg);}
#mv_slide5 .image{	background-image:url(../img/mv_slide5.jpg);}
#mv_slide6 .image{	background-image:url(../img/mv_slide6.jpg);}
#mv_slide7 .image{	background-image:url(../img/mv_slide7.jpg);}

#mv_slider:before,
#mv_slider:after{
	content:"";
	width:calc(100% + 480px);
	height:100%;
	display:block;
	position:absolute;
	left:-240px; top:0;
	box-sizing:border-box;
	
	-webkit-transform:	skewX(-45deg);
	transform:			skewX(-45deg);
}
#mv_slider:before{
	background-color:rgba(255,255,255,1);
	z-index:2;
}
#mv_slider:after{
	background-color:rgba(255,255,255,0.15);
	z-index:3;
}
#mv_slider.show:before{
	-webkit-animation:	showSlider 2.4s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 normal forwards;
	animation:			showSlider 2.4s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 normal forwards;
}
#mv_slider.show:after{
	-webkit-animation:	showSlider 2.4s cubic-bezier(0.77, 0, 0.175, 1) 0.3s 1 normal forwards;
	animation:			showSlider 2.4s cubic-bezier(0.77, 0, 0.175, 1) 0.3s 1 normal forwards;
}
@-webkit-keyframes showSlider{
	0%{		-webkit-transform:skewX(-45deg) translateX(0);	}
	100%{	-webkit-transform:skewX(-45deg) translateX(-100%);	}
}
@keyframes showSlider{
	0%{		transform:skewX(-45deg) translateX(0);	}
	100%{	transform:skewX(-45deg) translateX(-100%);	}
}
/* ---------------------------------------------------------------------
 mv_triangle
--------------------------------------------------------------------- */
#mv_triangle{
	position: absolute;
	left: 0; top: 0;
	z-index:102;
}
#triangles{
	width:510px;
	height:510px;
	display:block;
	position:relative;
	-webkit-perspective-origin: 150% 50%;
	perspective-origin: 100% 50%;
	-webkit-perspective: 400px;
	perspective: 400px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.itemD,.itemL{
	width:calc(100% / 8);
	height:calc(100% / 8);
	display:block;
	position:absolute;
	visibility:hidden;
	opacity:0;
}

#itemL1{left:calc(0 * 100% / 8); top:calc(6 * 100% / 8);}
#itemL2{left:calc(0 * 100% / 8); top:calc(5 * 100% / 8);}
#itemL3{left:calc(1 * 100% / 8); top:calc(5 * 100% / 8);}
#itemL4{left:calc(0 * 100% / 8); top:calc(4 * 100% / 8);}
#itemL5{left:calc(1 * 100% / 8); top:calc(4 * 100% / 8);}
#itemL6{left:calc(2 * 100% / 8); top:calc(4 * 100% / 8);}
#itemL7{left:calc(0 * 100% / 8); top:calc(3 * 100% / 8);}
#itemL8{left:calc(1 * 100% / 8); top:calc(3 * 100% / 8);}
#itemL9{left:calc(2 * 100% / 8); top:calc(3 * 100% / 8);}
#itemL10{left:calc(3 * 100% / 8); top:calc(3 * 100% / 8);}
#itemL11{left:calc(0 * 100% / 8); top:calc(2 * 100% / 8);}
#itemL12{left:calc(1 * 100% / 8); top:calc(2 * 100% / 8);}
#itemL13{left:calc(2 * 100% / 8); top:calc(2 * 100% / 8);}
#itemL14{left:calc(3 * 100% / 8); top:calc(2 * 100% / 8);}
#itemL15{left:calc(4 * 100% / 8); top:calc(2 * 100% / 8);}
#itemL16{left:calc(0 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL17{left:calc(1 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL18{left:calc(2 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL19{left:calc(3 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL20{left:calc(4 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL21{left:calc(5 * 100% / 8); top:calc(1 * 100% / 8);}
#itemL22{left:calc(0 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL23{left:calc(1 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL24{left:calc(2 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL25{left:calc(3 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL26{left:calc(4 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL27{left:calc(5 * 100% / 8); top:calc(0 * 100% / 8);}
#itemL28{left:calc(6 * 100% / 8); top:calc(0 * 100% / 8);}

#itemD1{left:calc(0 * 100% / 8); top:calc(7 * 100% / 8);}
#itemD2{left:calc(0 * 100% / 8); top:calc(6 * 100% / 8);}
#itemD3{left:calc(1 * 100% / 8); top:calc(6 * 100% / 8);}
#itemD4{left:calc(0 * 100% / 8); top:calc(5 * 100% / 8);}
#itemD5{left:calc(1 * 100% / 8); top:calc(5 * 100% / 8);}
#itemD6{left:calc(2 * 100% / 8); top:calc(5 * 100% / 8);}
#itemD7{left:calc(0 * 100% / 8); top:calc(4 * 100% / 8);}
#itemD8{left:calc(1 * 100% / 8); top:calc(4 * 100% / 8);}
#itemD9{left:calc(2 * 100% / 8); top:calc(4 * 100% / 8);}
#itemD10{left:calc(3 * 100% / 8); top:calc(4 * 100% / 8);}
#itemD11{left:calc(0 * 100% / 8); top:calc(3 * 100% / 8);}
#itemD12{left:calc(1 * 100% / 8); top:calc(3 * 100% / 8);}
#itemD13{left:calc(2 * 100% / 8); top:calc(3 * 100% / 8);}
#itemD14{left:calc(3 * 100% / 8); top:calc(3 * 100% / 8);}
#itemD15{left:calc(4 * 100% / 8); top:calc(3 * 100% / 8);}
#itemD16{left:calc(0 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD17{left:calc(1 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD18{left:calc(2 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD19{left:calc(3 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD20{left:calc(4 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD21{left:calc(5 * 100% / 8); top:calc(2 * 100% / 8);}
#itemD22{left:calc(0 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD23{left:calc(1 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD24{left:calc(2 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD25{left:calc(3 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD26{left:calc(4 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD27{left:calc(5 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD28{left:calc(6 * 100% / 8); top:calc(1 * 100% / 8);}
#itemD29{left:calc(0 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD30{left:calc(1 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD31{left:calc(2 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD32{left:calc(3 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD33{left:calc(4 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD34{left:calc(5 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD35{left:calc(6 * 100% / 8); top:calc(0 * 100% / 8);}
#itemD36{left:calc(7 * 100% / 8); top:calc(0 * 100% / 8);}

#mv_triangle_bg{
	width:100%;
	display:block;
	position:absolute;
	left:0; top:0;
	visibility:hidden;
	opacity:0;
}

/* ---------------------------------------------------------------------
 mv_triangle_foldback
--------------------------------------------------------------------- */
#mv_triangle_foldback{
	width:30px;
	height:30px;
	display:block;
	position:absolute;
	left: 480px; top:0;
	background-color:#80001b;
	z-index:100;
	visibility:hidden;
	opacity:0;
}
/* ---------------------------------------------------------------------
 mvLoading
--------------------------------------------------------------------- */
#mvLoading{
	width:100%;
	height:100%;
	margin:0;
	position:absolute;
	left:0;top:0;
}
#mvLoading.hide{
	-webkit-animation:	fadeout 0.9s ease-out 0s 1 normal forwards;
	animation:			fadeout 0.9s ease-out 0s 1 normal forwards;
}
/* spinner */
.spinner{
	width: 50px;
	height: 12px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:absolute;
	left:0;right:0;top:0;bottom:0;
}
.spinner div{
	width: 12px;
	height: 12px;
	background: #CC004A;
	overflow:hidden;
	
	-webkit-animation:	sk-bouncedelay 1.4s infinite ease-in-out both;
	animation:			sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner div:after{
	content:"";
	width:100%;
	height:100%;
	display:block;
	background-color:#C3003F;
	transform:translate(-50%,-50%) rotate(45deg) scale(1.4142135623730951);
}
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 	transform: scale(0);}
	40% { transform: scale(1.0);}
}

/* =====================================================================
 ANIMATIONS
===================================================================== */
/* ---------------------------------
 fadein
--------------------------------- */
@-webkit-keyframes fadein{
	0%{		opacity:0;}
	100%{	opacity:1;}
}
@keyframes fadein{
	0%{		opacity:0;}
	100%{	opacity:1;}
}
/* ---------------------------------
 fadeout
--------------------------------- */
@-webkit-keyframes fadeout{
	0%{		opacity:1;}
	100%{	opacity:0;}
}
@keyframes fadeout{
	0%{		opacity:1;}
	100%{	opacity:0;}
}


/* =====================================================================
 Responsive 
===================================================================== */
/* ---------------------------------------------------------------------
 SmartPhone 0-767
--------------------------------------------------------------------- */
@media(max-width:767px){
	/* ---------------------------------------------------------------------
	 mainvisual
	--------------------------------------------------------------------- */
	#mainvisual{
		height:402px;
	}
	/* ---------------------------------------------------------------------
	 mv_catch
	--------------------------------------------------------------------- */
	#mv_catch{
		width:217px;
		position: absolute;
		left: 6%; top: 75px;
	}
	#mv_catch span{
		height:30px;
	}
	#mv_catch1{
		margin-bottom:10px;
	}
	/* ---------------------------------------------------------------------
	 mv_slider
	--------------------------------------------------------------------- */
	#mv_slider{
		width:100%;
		height:375px;
		margin:21px 0 0;
	}
	#mv_slider:before
	#mv_slider:after{
		width:calc(100% + 375px);
		left:-187px;

		-webkit-transform:	skewX(-45deg);
		transform:			skewX(-45deg);
	}
	#mv_slide1 .image{	background-image:url(../img/mv_slide1_sp.jpg);}
	#mv_slide2 .image{	background-image:url(../img/mv_slide2_sp.jpg);}
	#mv_slide3 .image{	background-image:url(../img/mv_slide3_sp.jpg);}
	#mv_slide4 .image{	background-image:url(../img/mv_slide4_sp.jpg);}
	#mv_slide5 .image{	background-image:url(../img/mv_slide5_sp.jpg);}
	#mv_slide6 .image{	background-image:url(../img/mv_slide6_sp.jpg);}
	#mv_slide7 .image{	background-image:url(../img/mv_slide7_sp.jpg);}
	/* ---------------------------------------------------------------------
	 mv_triangle
	--------------------------------------------------------------------- */
	#triangles{
		width:255px;
		height:255px;
	}
	/* ---------------------------------------------------------------------
	 mv_triangle_foldback
	--------------------------------------------------------------------- */
	#mv_triangle_foldback{
		width:21px;
		height:21px;
		left: 234px;
	}
}