@charset "utf-8";
/* ****************************

front-page.php 用スタイルシート

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










/* =============================================================================
   コンテンツスタイル
   ========================================================================== */

/* mv */

.mv {
	display: flex;
	height: 880px;
	overflow: hidden;
}
.mv .catch {
	background: #0071BC;
	color: #fff;
	width: 350px;
	position: relative;
}
.mv .catch h3 {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 2.4em;
	white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.mv .slideArea {
	flex: 1;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width:1000px){
	.mv {
		flex-direction: column-reverse;
		height: 600px;
	}
	.mv .catch {
		width: 100%;
		padding: 30px 0;
	}
	.mv .catch h3 {
		text-align: center;
		font-size: 1.6em;
		position: static;
		transform: translate(0,0);
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
}

.-slider1 .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.-slider1 .slick-slide {
	position: relative;
	height: 880px;
}
.-slider1 .slick-slide video {
	height: 100%;
}
.-slider1 .-slide.-slide2 div {
    background: url("../img/content/top/img1.jpg") no-repeat center center;
    background-size: cover !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.-slider1 .-slide.-slide3 div {
    background: url("../img/content/top/img2.jpg") no-repeat center center;
    background-size: cover !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
.-slider1 .-slide.-slide4 div {
    background: url("../img/content/top/img3.jpg") no-repeat center center;
    background-size: cover !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
@media screen and (min-width:1900px){
	.-slider1 .slick-slide video {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width:1000px){
    .-slider1 .slick-slide {
		height: 500px;
    }
}




.bannerLink {
	background: #fff;
	padding: 50px 0;
}
.bannerLink ul.list {
	display: flex;
	justify-content: space-between;
}
.bannerLink ul.list li {
	width: 32%;
}
@media screen and (max-width:767px){
	.bannerLink {
		padding: 40px 0;
	}
	.bannerLink ul.list {
		flex-direction: column;
	}
	.bannerLink ul.list li {
		width: 100%;
		margin: 5px 0;
		text-align: center;
	}
}