@charset "utf-8";
/* CSS Document */
.lp h3, .lp h4, .lp h5, .lp h6 {
	font-weight: 700;
}
.lp * + h3 {
	margin-top: 2em;
}

#mv {
	letter-spacing: normal;
	background-color: #fff;
}
#mv .mv-title {
	color: #000;
}
#mv .mv-title h1 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: clamp(2.375rem, -1.01rem + 7.05vw, 3.75rem);
	text-align: center;
}
#mv .mv-title .row1 {
	font-size: 0.5em;
}
#mv .mv-title .row2 {
	position: relative;
	margin: 0 0 calc(clamp(0.25rem, -0.058rem + 0.64vw, 0.375rem) * 4);
	padding: 0.5em;
	line-height: 1.1;
	box-shadow: 0 0 0 clamp(0.25rem, -0.058rem + 0.64vw, 0.375rem) #000 inset;
}
#mv .mv-title .row2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(clamp(0.25rem, -0.058rem + 0.64vw, 0.375rem) * 3 * -1);
	display: block;
	width: 100%;
	height: clamp(0.25rem, -0.058rem + 0.64vw, 0.375rem);
	background-color: #f00;
}
#mv .mv-title .row3 {
	padding: 0 1em;
	font-size: clamp(1.25rem, 0.635rem + 1.28vw, 1.5rem);
}
#mv .color-red {
	color: #f00 !important;
}
#mv .mv-img > * {
	height: auto;
	min-height: 0;
}
.js-mv-slide .slick-slide {
  margin-inline: 10px;
  transition: all 0.3s ease;
	opacity: 0.25;
  transform: scale(0.9);
}

.js-mv-slide .slick-slide.slick-current,
.js-mv-slide .slick-slide.is-active-next {
	opacity: 1;
  transform: scale(1);
}

.js-mv-slide .slick-slide .name {
  position: absolute;
  bottom: 20px;
  left: 20px;
	padding: 0.25em 0.5em;
	color: #fff;
	font-size: clamp(1.25rem, 0.019rem + 2.56vw, 1.75rem);
  font-weight: bold;
	line-height: 1.2;
  opacity: 0;
}
.js-mv-slide .slick-slide .item01 .name {
	background-color: #A6E83A;
}
.js-mv-slide .slick-slide .item02 .name {
	background-color: #FE7701;
}
.js-mv-slide .slick-slide .item03 .name {
	background-color: #002986;
}

.js-mv-slide .slick-slide.slick-current .name,
.js-mv-slide .slick-slide.is-active-next .name {
  animation: fadein .5s ease 1s 1 normal both;
}
@keyframes fadein {
  0% { opacity: 0; bottom: -20px;}
  100% { opacity: 1; bottom: 20px;}
}

@media screen and (max-width: 767px) {
	#mv .mv-title h1 {
		font-size: clamp(1.75rem, 1.152rem + 2.55vw, 2.375rem);
	}
	#mv .mv-title .row3 {
		font-size: clamp(0.875rem, 0.516rem + 1.53vw, 1.25rem);
	}
	.js-mv-slide .slick-slide {
		transform: scale(0.95);
	}
	.js-mv-slide .slick-slide .name {
		font-size: clamp(0.75rem, 0.272rem + 2.04vw, 1.25rem);
	}
}