body {
  margin:0;
  /*padding:50px 0;
  background:#ffffff;*/
}

@media screen and (min-width: 1025px){

/*カルーセル*/
.slider-container {
  width:800px;
  margin:40px auto 40px;
}

.slider-for .slick-slide {
  opacity:0.4;
  transform:scale(0.9);
  transition:all 0.4s ease;
}

.slider-for .slick-center {
  opacity:1;
  transform:scale(1.05);
}

.slider-for img {
  width:100%;
  border-radius:12px;
}

.slick-prev:before,
.slick-next:before {
  color:#333;
  font-size:30px;
}

/*サムネイル*/
.thumbnail-container {
  background:#e0f0ed;
  padding:40px 0;
  margin:auto;
  width:100%;
}

.thumbnail-grid {
  width:1000px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:15px;
}

.thumbnail-grid img {
  width:100%;
  border-radius:8px;
  cursor:pointer;
  opacity:1;
  transition:0.3s;
}

.thumbnail-grid img:hover {
  opacity:0.8;
}

.thumbnail-grid img.active {
  opacity:0.8;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*カルーセル*/
.slider-container {
  width: 100%;
  margin:40px auto 40px;
}

.slider-for .slick-slide {
  opacity:0.4;
  transform:scale(0.9);
  transition:all 0.4s ease;
}

.slider-for .slick-center {
  opacity:1;
  transform:scale(1.05);
}

.slider-for img {
  width:100%;
  border-radius:12px;
}

.slick-prev:before,
.slick-next:before {
  color:#333;
  font-size:30px;
}

/*サムネイル*/
.thumbnail-container {
  background:#e0f0ed;
  padding:40px 0;
  margin:auto;
  width:100%;
}

.thumbnail-grid {
  margin:40px 5% 0 5%;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:15px;
}

.thumbnail-grid img {
  width:100%;
  border-radius:8px;
  cursor:pointer;
  opacity:1;
  transition:0.3s;
}

.thumbnail-grid img:hover {
  opacity:0.8;
}

.thumbnail-grid img.active {
  opacity:0.8;
}
}

@media screen and (max-width: 480px){
/*カルーセル*/
.slider-container {
  width: 100%;
  margin: 10% auto 10% 0;
}

.slider-for .slick-slide {
  opacity:0.4;
  transform:scale(0.00);
  transition:all 0.4s ease;
}

.slider-for .slick-center {
  opacity:1;
  transform: scale(1.0);
}

.slider-for img {
  width: 100%;
  border-radius:12px;
}
/*
.slick-prev:before,
.slick-next:before {
  color:#333;
  font-size:10px;
}*/

/*サムネイル*/
.thumbnail-container {
  background:#e0f0ed;
  padding:40px 0;
  margin:auto;
  width:100%;
}

.thumbnail-grid {
  margin:40px 5% 0 5%;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:15px;
}

.thumbnail-grid img {
  width:100%;
  border-radius:8px;
  cursor:pointer;
  opacity:1;
  transition:0.3s;
}

.thumbnail-grid img:hover {
  opacity:0.8;
}

.thumbnail-grid img.active {
  opacity:0.8;
}
}