@charset "utf-8";
/* CSS Information========

Table of Contents:
 * info
 
========================== */
/*メインスライド*/
.main_photo img,
.secondary_photo img {
  width: 100%;
}
.main_photo {
  position: relative;
  margin-bottom: 30px;
}
.main_photo .thumbnail {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, calc((100% - 10px * 8) / 9));
  justify-content: end;
  padding: 0 10px;
  margin: auto;
  position: absolute;
  bottom: 10px;
  z-index: 2;
  cursor: pointer;
  width: 100%;
}
.main_photo .thumbnail li {
  border: solid 2px #ffffff;
  box-sizing: border-box;
  opacity: 0.7;
}
.main_photo .thumbnail .thumbnail_img-active {
  opacity: 1;
}
@media screen and (max-width: 1000px) {
  .main_photo .thumbnail {
    position: static;
    grid-template-columns: repeat(auto-fit, calc((100% - 10px * 4) / 5));
    justify-content: start;
    padding: 0;
    margin-top: 10px;
  }
  .main_photo .thumbnail li {
    border: none;
  }
}
/*セカンドスライド*/
.secondary_photo {
  position: relative;
  margin-bottom: 30px;
}
.secondary_photo .thumbnail {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, calc((100% - 10px * 4) / 5));
  justify-content: start;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
}
.secondary_photo .thumbnail li {
  box-sizing: border-box;
  opacity: 0.7;
}
.secondary_photo .thumbnail .thumbnail_img-active {
  opacity: 1;
}