@charset "utf-8";

/* !メインビジュアル カルーセル -------------------------------------------------------------------- */

.mv {
	position: relative;
	overflow: hidden;
	background: #f2f2f2;
}

/* slick初期化前は1枚目だけ見せて、積み上がったスライドのちらつきを防ぐ */
.mv__item {
	display: none;
}

.mv__item:first-child,
.slick-initialized .mv__item {
	display: block;
}

/* 矢印はドットの高さに影響されずスライドの天地中央に置きたいので、ここを基準にする */
.mv__slider {
	position: relative;
}

.mv__link {
	display: block;
	position: relative;
	outline: none;
}

.mv__item img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

a.mv__link:hover img {
	opacity: .88;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
}


/* !両サイド覗かせレイアウト -------------------------------------------------------------------- */

.mv.is-peek {
	padding: 24px 0 8px;
	background: #fff;
}

/* 中央スライドの寸法を一定に保つため全体幅を制限する（1720 - 覗かせ260×2 = 中央1200px） */
.mv.is-peek .mv__slider {
	max-width: 1720px;
	margin: 0 auto;
}

.mv.is-peek .mv__item {
	padding: 0 8px;
}

/* 覗かせているスライドは白地に少し溶かして、中央から視線を外さないようにする */
.mv.is-peek .slick-slide {
	opacity: .6;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

.mv.is-peek .slick-center {
	opacity: 1;
}

/*
 * スライドが1枚のうちは覗かせる相手がいないので、中央スライドと同じ幅で1枚だけ見せる。
 * 2枚目が入ると幅は変えずに両サイドへ前後のスライドが現れる。
 */
.mv.is-peek.is-single .mv__slider {
	max-width: 1200px;
}

.mv.is-peek.is-single .mv__item {
	padding: 0;
}


/* !矢印・ドット（slick-theme.css の既定を上書き） -------------------------------------------------------------------- */

.mv .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .4);
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	-webkit-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.mv .slick-arrow:hover,
.mv .slick-arrow:focus {
	background: rgba(0, 0, 0, .7);
}

.mv .slick-arrow::before {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
}

.mv .slick-prev {
	left: 24px;
}

.mv .slick-prev::before {
	-webkit-transform: translate(-30%, -50%) rotate(-135deg);
	-ms-transform: translate(-30%, -50%) rotate(-135deg);
	transform: translate(-30%, -50%) rotate(-135deg);
}

.mv .slick-next {
	right: 24px;
}

.mv .slick-next::before {
	-webkit-transform: translate(-70%, -50%) rotate(45deg);
	-ms-transform: translate(-70%, -50%) rotate(45deg);
	transform: translate(-70%, -50%) rotate(45deg);
}

/* ドットは画像に重ねず、メインビジュアルの下に並べる */
.mv__dots:empty {
	display: none;
}

.mv .slick-dots {
	position: static;
	width: 100%;
	margin: 0;
	padding: 16px 0;
	text-align: center;
	line-height: 0;
}

.mv .slick-dots li {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 5px;
	list-style: none;
}

.mv .slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d3d3d3;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
}

.mv .slick-dots li button::before {
	display: none;
}

.mv .slick-dots li.slick-active button {
	background: #0b3f8c;
}


/* !レスポンシブ -------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
	.mv__item img {
		height: 320px;
	}

	.mv .slick-prev {
		left: 12px;
	}

	.mv .slick-next {
		right: 12px;
	}
}

@media screen and (max-width: 767px) {
	.mv.is-peek {
		padding: 12px 0 4px;
	}

	.mv.is-peek .mv__item {
		padding: 0 4px;
	}

	.mv__item img {
		height: 200px;
	}

	.mv .slick-arrow {
		width: 34px;
		height: 34px;
		margin-top: -17px;
	}

	.mv .slick-arrow::before {
		width: 9px;
		height: 9px;
	}

	.mv .slick-dots {
		padding: 12px 0;
	}
}