@charset "utf-8";

@media screen and (min-width:701px),print{
	#MainVisual {
		width:100%;
		height: 564px;
		position:relative;
		overflow:hidden
	}

	#MainVisualArea {
		display:block;
		position:absolute;
		left:0;
		top: 22px;
		right:auto;
		bottom:auto;
		z-index:1
	}

	#MainVisualArea #MainVisualAreaInner,
	#MainVisualArea .card,
	#MainVisualArea .card .mp4,
	#MainVisualArea .card .ph {
		display:block;
		position:absolute;
		left:0;
		top:0;
		right:auto;
		bottom:auto
	}

	#MainVisualArea #MainVisualAreaInner{
		z-index:1
	}

	#MainVisualArea .card{
		width:252px;
		height:252px;
		overflow:hidden;
		color:#FFF;
		transition:width .8s cubic-bezier(.19,1,.22,1),height .8s cubic-bezier(.19,1,.22,1),color .3s;
		z-index:1
	}

	#MainVisualArea a.card {
		transition:width .8s cubic-bezier(.19,1,.22,1),height .8s cubic-bezier(.19,1,.22,1),color .3s, opacity .3s;
	}

	#MainVisualArea a:hover {
		opacity: 0.7;
	}

	#MainVisualArea .card .ph{
		width:100%;
		height:100%;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
		z-index:2
	}

	#MainVisualArea .card .mp4{
		width:100%;
		height:100%;
		z-index:3;
		opacity:0
	}

	#MainVisualArea .card .description,#MainVisualArea .card .title{
		display:block;
		position:absolute;
		left:0;
		right:auto;
		bottom:auto;
		z-index:10;
		text-align:center;
		font-weight:400
	}

	#MainVisualArea .card .mp4 video{
		width:100%;
		height:100%
	}

	#MainVisualArea .card .title{
		top:116px;
		width:100%;
		font-size:22px;
		line-height:1
	}

	#MainVisualArea .card .title span{
		display:block;
		transform:scale(.9,1)
	}

	#MainVisualArea .card .description{
		top:149px;
		width:100%;
		font-size:16px;
		line-height:1.2
	}

	#MainVisualArea .card .canvas,#MainVisualArea .card .cover{
		z-index:4;
		width:100%;
		height:100%;
		left:0;
		top:0;
		display:block;
		position:absolute;
		right:auto;
		bottom:auto
	}

	#MainVisualArea .card .description span{
		display:block;
		transform:scale(.9,1)
	}

/*	#MainVisualArea .card .cover{
		background-color:#000;
		opacity:.25
	}
*/
	#MainVisualArea .card .canvas canvas{
		width:100%;
		height:100%
	}

	#MainVisualArea .card .border{
		width:100%;
		height:100%;
		display:block;
		position:absolute;
		left:0;
		top:0;
		right:auto;
		bottom:auto;
		z-index:10
	}

	#MainVisualArea .card .border div{
		position:absolute;
		width:0%;
		height:0%
	}

	#MainVisualArea .card .border div.l1{
		border-left:3px solid #FFF
	}

	#MainVisualArea .card .border div.l2{
		border-top:3px solid #FFF
	}

	#MainVisualArea .card .border div.l3{
		border-right:3px solid #FFF
	}

	#MainVisualArea .card .border div.l4{
		border-bottom:3px solid #FFF
	}

	#MainVisualArea .card.large{
		width:524px;
		height:524px
	}

	#MainVisualArea .card.large .title{
		font-size:44px;
		top:245px
	}

	#MainVisualArea .card.large .description{
		font-size:30px;
		top:316px
	}

	#MainVisualArea .card:hover{
		color:#000
	}

	#MainVisualLoading{
		display:block;
		position:absolute;
		right:auto;
		bottom:auto;
		z-index:1;
		left:calc(50% - 40px);
		top:calc(50% - 20px);
		color:#999
	}

}
@media screen and (max-width:700px){
	#MainVisual{
		width:100%;
		height: 73vw;
		position:relative;
		overflow:hidden
	}
	#MainVisual #MainVisualAreaSP{
		width:100%;
		height:100%;
		display: flex;
		align-items: center;
	}
	#MainVisual #MainVisualAreaSP .card{
		display:block;
		width:72vw;
		height:72vw;
		border-radius:.3rem;
		overflow:hidden;
		position:relative;
		margin:0 auto
	}
	#MainVisual #MainVisualAreaSP .card .ph{
		width:100%;
		height:100%;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
		display:block;
		position:absolute;
		left:0;
		top:0;
		right:auto;
		bottom:auto;
		z-index:1
	}
	#MainVisual #MainVisualAreaSP .card .description,#MainVisual #MainVisualAreaSP .card .title{
		z-index:3;
		text-align:center;
		color:#FFF;
		font-weight:400;
		transform:scale(.9,1);
		width:100%;
		left:0;
		display:block;
		position:absolute;
		right:auto;
		bottom:auto
	}
	#MainVisual #MainVisualAreaSP .card .title{
		top:30vw;
		font-size:5.33333333vw;
		line-height:1
	}
	#MainVisual #MainVisualAreaSP .card .description{
		top:37.33333333vw;
		font-size:3.73333333vw;
		line-height:1.2
	}
	#MainVisual #MainVisualAreaSP .card .cover{
		width:100%;
		height:100%;
/*		background-color:rgba(0,0,0,.25); */
		display:block;
		position:absolute;
		left:0;
		top:0;
		right:auto;
		bottom:auto;
		z-index:2
	}
	#MainVisualLoading{
		display:block;
		position:absolute;
		right:auto;
		bottom:auto;
		z-index:1;
		left:calc(50% - 40px);
		top:calc(50% - 20px);
		color:#999
	}

}


.slick-list,
.slick-slider,
.slick-track{
	position:relative;
	display:block
}
.slick-slider{
	box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent
}
.slick-list{
	overflow:hidden;margin:0;padding:0
}
.slick-list:focus{
	outline:0
}
.slick-list.dragging{
	cursor:pointer;cursor:hand
}
.slick-slider .slick-list,.slick-slider .slick-track{
	transform:translate3d(0,0,0)
}
.slick-track{
	left:0;top:0
}
.slick-track:after,.slick-track:before{
	content:"";display:table
}
.slick-track:after{
	clear:both
}
.slick-slide{
	float:left;height:100%;min-height:1px;display:none
}
[dir=rtl] .slick-slide{
	float:right
}
.slick-slide img{
	display:block
}
.slick-slide.slick-loading img{
	display:none
}
.slick-slide.dragging img{
	pointer-events:none
}
.slick-initialized .slick-slide{
	display:block
}
.slick-vertical .slick-slide{
	display:block;height:auto;border:1px solid transparent
}
.slick-arrow.slick-hidden{
	display:none
}