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

.main-slider {
	position: relative;
	/*border: 1px solid #000;*/
}

.slider-img {
	/*width: 80%;*/
	/*border: 1px solid #0F0;*/
}

.main-slider .slick-center img {
	margin: 0;
	opacity: 1; /*中央のスライドは透過しない*/
 	transform: scale(1); /*中央のスライドは小さくしない*/
}

.main-slider img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	opacity: .8; /*スライドを薄くする*/
	transform: scale(.85); /*スライドのサイズを80%にする*/
	transition: opacity .5s, transform .5s; /*スライド透過率と拡大のアニメーション時間を0.5秒に設定*/
}

.main-slider .video a {
	/*position: absolute;
	z-index: 100000;*/
	display: block;
	width: 100%;
	height: 100%;
	/*border: 4px solid #aaa;*/
}

.slider-img {
	margin: 0;
	padding: 0;
}


.slick-dots li button:before{
	font-size: 16px !important;
	color: #777 !important;
}


.main-slider video {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	opacity: .8; /*スライドを薄くする*/
	transform: scale(.85); /*スライドのサイズを80%にする*/
	transition: opacity .5s, transform .5s; /*スライド透過率と拡大のアニメーション時間を0.5秒に設定*/
}

.main-slider .slick-center video {
	margin: 0;
	opacity: 1; /*中央のスライドは透過しない*/
 	transform: scale(1); /*中央のスライドは小さくしない*/
	width: 100%;
	aspect-ratio: 10/4;
	object-fit: cover; 
}
.main-slider .slick-center video.spvmode {
	margin: 0;
	opacity: 1; /*中央のスライドは透過しない*/
 	transform: scale(1); /*中央のスライドは小さくしない*/
	width: 100%;
	aspect-ratio: 64/43;
	object-fit: cover; 
}


/*.slick-slide video {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}*/

/*.slick-dots {
text-align: center;
  padding-top: 15px;
}

.slick-dots li {
display: inline-block;
    vertical-align: top;
    margin: 0 8px;
}




.slick-dots button {
	width: 16px;
	height: 16px;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	border: 2px solid #FFF;
	box-shadow: 0 0 0 0 transparent;
	vertical-align: middle;
	color: #fff;
	background-color: #fff;
	transition:all .3s ease;
}

.slick-dots .slick-active button {
        border-color: #CCC;
        box-shadow: 0 0 0 2px #fff;
        opacity: 1;
}*/
/*.slick-dots {
  text-align: center;
  padding-top: 15px;
  li {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
    button {
      width: 16px;
      height: 16px;
      border: none;
      cursor: pointer;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 0 transparent;
      vertical-align: middle;
      color: #fff;
      background-color: #fff;
      transition:all .3s ease;
      opacity: .4;
      &:focus {
        outline: none;
      }
      &:hover {
        opacity: 1;
      }
    }
    &.slick-active {
      button {
        border-color: $bg_color;
        box-shadow: 0 0 0 2px #fff;
        opacity: 1;
      }
    }
  }
}*/