
/* -----------------------------------------------------
 MV
------------------------------------------------------- */
/* clearfix */
.cf:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}
.mv {
  position: relative;
  line-height: 0;
	overflow: hidden;
	/*max-height: 670px;*/
}
.mv img {
  width: 100%;
  height: auto;
}
.mv__slider{
	/*width: 100%;
	display: inline-block;*/
	margin: 0;
	padding: 0;
}
.mv__slider ul, .mv__slider li {
    margin: 0;
	padding: 0;
	list-style:none;
}
.mv__slider li figure {
  position: relative;
}
.mv__slider li figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0 0 3.125% 2.5%;
  font-size: 10px;
  font-size: 3.125vw;
  line-height: 1.6;
  color: #fff;
}
.mv .slick-dots {
  position:relative;
	width: 100%;
  margin-top: -1px;
  /*margin-top: -9.3125vw;*/
  margin-top: -7.03125vw;
  padding: 7px 0;
  padding: 2.8vw 0 2.2vw;
  text-align: center;
  line-height: 0;
	z-index: 100;
}
.mv .slick-dots li {
  width: 20px;
  display: inline-block;
  line-height: 0;
}
.mv .slick-dots li + li {
  margin-left: 5px;
}
.mv .slick-dots li button {
  width: 20px;
  height: 3px;
  padding: 0;
  display: block;
  background-color:rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  box-sizing: content-box;
  transition: .15s;
	border: none;
}
.mv .slick-dots li.slick-active button {
  height: 5px;
  background-color: #fff;
}

.mv .slick-slide img
{
	transform:scale(1.1,1.1);
	transition-duration:0.1s;
	transition-timing-function:linear;
}
.mv .slick-slide.slick-active img
{
	animation-name:zoomFnc;
	animation-duration:5.2s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
}
.mv .caption
{
	position:absolute;
	display:block;
	width:52.34375vw;
	top:7.8125vw;
	left:7.8125vw;
}
.mv .caption.caption1
{
	
}
.mv .caption.caption2
{
	top:calc(7.8125vw + 8.59375vw);
}
.mv .slogan {
	position:absolute;
	display:block;
	width:100%;
	top:15vw;
	left:0;
	text-align: center;
}
.mv .slogan p:nth-child(1) { font-size: 54px;font-weight: bold;line-height: 1.5em; color: #fff;display: block; margin: 0;padding:2px 0 2px 0; text-shadow: 0px 0px 6px rgba(0,0,0,0.5); }
.mv .slogan p:nth-child(2) { font-family: "Fjalla One", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, "Arial Black", sans-serif;font-size: 2.0em;font-weight: normal;line-height: 1.5em; color: #fff;display: block; margin: 0;padding: 2px 0; text-shadow: 0px 0px 6px rgba(0,0,0,0.5); }

@keyframes zoomFnc {
     0% {
         transform:scale(1.0, 1.0);
     }
     100% {
         transform:scale(1.1, 1.1);
     }
}

.mv .mv-shield
{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background-color:#FFFFFF;
}
.mv.loaded .mv-shield
{
	animation-name:mvOpen;
	animation-duration:0.3s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.0s;
	animation-fill-mode:forwards;
}
.mv.loaded .caption.caption1
{
	opacity:0;
	transform:translateY(30%);
	
	animation-name:mvOpen2;
	animation-duration:0.15s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
}
.mv.loaded .caption.caption2
{
	opacity:0;
	transform:translateY(30%);
	
	animation-name:mvOpen2;
	animation-duration:0.15s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.45s;
	animation-fill-mode:forwards;
}
@keyframes mvOpen {
	0% {
		transform:translateX(0%);
		opacity:1;
	}
	50% {
		transform:translateX(50%);
		opacity:1;
	}
	100% {
		transform:translateX(100%);
		opacity:0;
	}
}
@keyframes mvOpen2 {
	0% {
		transform:translateY(30%);
		opacity:0;
	}
	100% {
		transform:translateY(0%);
		opacity:1;
	}
}
@media (min-width: 992px) and (max-width: 1299px) {
.mv .slogan {top:12vw;}
.mv .slogan p:nth-child(1) { font-size: 44px; }
.mv .slogan p:nth-child(2) { font-size: 1.5em;}
}
@media screen and (max-width: 991px) {
.mv .slogan {top:12vw;}
.mv .slogan p:nth-child(1) { font-size: 40px; }
.mv .slogan p:nth-child(2) { font-size: 1.2em;}
}
@media screen and (max-width: 768px) {
  .mv
  {
    height:auto !important;
  }
  .mv img
  {
	  /*height: 230px;
	  width: auto;*/
  }
  .mv__slider li figure img {

  }
  .mv .slick-list {
/*
    min-height: 290px;
    min-height: 90.625vw;
*/
  }
  .mv .slick-dots {
  }
  .to-contents
  {
  	display:none;
  }
  .mv .slogan {top:10vw;}
  .mv .slogan p:nth-child(1) { font-size: 32px; }
  .mv .slogan p:nth-child(2) { font-size: 1em;}
}
@media screen and (max-width: 480px) {
.mv .slogan {top:11vw;}
.mv .slogan p:nth-child(1) { font-size: 20px;line-height: 1.1em; }
.mv .slogan p:nth-child(2) { font-size: 0.7em;line-height: 1em;}
}
@media screen and (min-width: 769px) {
  .mv__slider li figure figcaption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: 0;
    font-size: 14px;
  }
  .mv .slick-list {
  }
  .mv .slick-track
  {
  }
  .mv .slick-slide figure
  {
  }
  .mv .slick-slide img
  {
    object-fit: cover;
  }
  .object-fit-img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
  }
  .mv .slick-dots {
    position: absolute;
    bottom: 15px;
    /*left: 30px;*/
    padding: 0;
    margin: 0;
  }
  .mv .slick-dots li {
    width: 25px;
  }
  .mv .slick-dots li button {
	width: 25px;
    border-width: 2px;
  }
  .mv .slick-dots li + li {
    margin-left: 5px;
  }
  .to-contents
  {
  	position:absolute;
  	display:block;
  	height:45px;
  	bottom:0;
  	left:50%;
  	color:#FFFFFF;
  	font-size:14px;
  }
  .to-contents:after
  {
  	content:"";
  	position:absolute;
  	display:block;
  	width:0px;
  	height:30px;
  	border-left:1px solid #FFFFFF;
  	
  	top:14px;
  	left:50%;
  	
  	animation-name:scaleFnc1;
  	animation-duration:1.5s;
  	animation-iteration-count:infinite;
  	animation-direction:normal;
  	animation-timing-function:linear;
  }
  .mv .caption
  {
  	position:absolute;
  	display:block;
  	width:auto;
  	top:90px;
  	left:11%;
  }
	.mv .caption.caption2
	{
		top:calc(90px + 58px);
	}
}
