@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
 
.thumb-filter {
	background: url('images/movie01.jpg') no-repeat center center/cover;
}

#sub05 .flex-item:has(img) {
	max-inline-size: 10rem;
	margin-inline: auto;
}
#sub06 .flex-item:has(img) {
	max-inline-size: 17.4rem;
	margin-inline: auto;
}


.thumb-01 {
	background: url('images/movie01.jpg') no-repeat center center/cover;
}



/* スライダー */

.slider-wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.slider- .slick-slide {
  overflow: hidden;
}
.slider .slick-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.dots-5 .slick-dots {
  text-align: center;
}
.dots-5 .slick-dots li {
  display: inline-block;
  width: 24%;
  height: 4px;
  margin: 4px;
  background: #e0e0e0;
  cursor: pointer;
}
.dots-5 .slick-dots button {
  display: block;
  width: 0%;
  height: 4px;
  margin: 0;
  font-size: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  outline: none;
  background: #606060;
  cursor: pointer;
}
.dots-5 .slick-dots .slick-active button {
  background: #606060;
  opacity: 1;
}
.toggle {
	  width:200px;
	  height: 24px;
	text-align: center;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}
.title-on {
  display: none;
	  width:200px;
	  height: 24px;
  background-image: url("images/btn-start.png");
}
.title-off {
	  width:200px;
	  height: 24px;
  background-image: url("images/btn-stop.png");
}




/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
	#sub05 .flex-item:has(img) {
		inline-size: 12%;
		margin-left: 7rem;
	}
	#sub06 .flex-item:has(img) {
		inline-size: 18%;
		margin-left: 7rem;
	}
	
	.viewer {
		max-width: 900px;
		min-height: 400px;
	}

}

/* ====================================
	タブレット専用スタイル（768px～1080px）
===================================== */
@media screen and (768px <=width < 1080px) {}