@import url("swiper.min.css");

.main-image01,
.main-image02{
  margin: 50px auto;
  padding: 10px;
  max-width: 100%;
}
.main-image02 ul{
  margin:0;
  padding:0;
}


/* タイトル */

.main-image02 li p{position: absolute; bottom:0px; left:10px; background-color:rgba(0,0,0,0.8); padding: 0 10px; color:#FFF;}


.main-image01__item,
.main-image02__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
/* メイン画像縦横中央に配置 */
.main-image01__item img,
.main-image02__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 画像の比率4対3に指定 2対1の場合は50%にします */
.main-image01__item:after,
.main-image01-thumbs__item:after,
.main-image02__item:after,
.main-image02-thumbs__item:after{
  display: block;
  padding-top: 60%;
  content: '';
}
.main-image01-thumbs,
.main-image02-thumbs{
  width: 100%;
  padding: 10px 0 0;
  box-sizing: border-box;
}
.main-image01-thumbs__item,
.main-image02-thumbs__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
.main-image01-thumbs__item.swiper-slide,
.main-image02-thumbs__item.swiper-slide{
  opacity: 0.5;
}
.main-image01-thumbs__item.swiper-slide-thumb-active,
.main-image02-thumbs__item.swiper-slide-thumb-active{
  opacity: 1;
}
/* サムネイル画像画像縦横中央に配置 */
.main-image01-thumbs__item img,
.main-image02-thumbs__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  /* max-height: 100%; */
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* 矢印の色を白に指定 
.main-image02 .swiper-button-next{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f5f5f5'%2F%3E%3C%2Fsvg%3E");
}
.main-image02 .swiper-button-prev{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f5f5f5'%2F%3E%3C%2Fsvg%3E");
}*/