@charset "utf-8";

/* reset */
*{
  padding-inline-start: 0;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*body {
    line-height:1;
}*/

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}



.main-image01,
.main-image02,
.main-image03{
  margin: 20px auto 80px;
  padding: 10px;
  width: 800px;
  box-sizing: border-box;
}
.main-image01__item,
.main-image02__item,
.main-image03__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
/* メイン画像縦横中央に配置 */
.main-image01__item img,
.main-image02__item img,
.main-image03__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,
.main-image03__item:after,
.main-image03-thumbs__item:after{
  display: block;
  padding-top: 75%;
  content: '';
}
.main-image01-thumbs,
.main-image02-thumbs,
.main-image03-thumbs{
  width: 100%;
  padding: 10px 0 0;
  box-sizing: border-box;
}
.main-image01-thumbs__item,
.main-image02-thumbs__item,
.main-image03-thumbs__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
.main-image01-thumbs__item.swiper-slide,
.main-image02-thumbs__item.swiper-slide,
.main-image03-thumbs__item.swiper-slide{
  opacity: 0.5;
}
.main-image01-thumbs__item.swiper-slide-thumb-active,
.main-image02-thumbs__item.swiper-slide-thumb-active,
.main-image03-thumbs__item.swiper-slide-thumb-active{
  opacity: 1;
}
/* サムネイル画像画像縦横中央に配置 */
.main-image01-thumbs__item img,
.main-image02-thumbs__item img,
.main-image03-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%);
}
/*.main-image01 .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-image01 .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");
}*/

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 35px;
  width: 35px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 35px;
  margin: auto;
  width: 35px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
  background-image: url("../technology/img/sankaku_left.svg");
}
/* 次への矢印カスタマイズ */
.swiper-button-next:after {
  background-image: url("../technology/img/sankaku_right.svg");
}


.main-image01-thumbs .swiper-scrollbar,
.main-image02-thumbs .swiper-scrollbar,
.main-image03-thumbs .swiper-scrollbar{
    position: relative;
    margin-top: 1.6rem;
}
/*
.main-image01-thumbs .swiper-scrollbar::after {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    margin: auto;
    content: "";
    background-color: #eee;
  }
.main-image01-thumbs .swiper-scrollbar-drag {
    height: 20px;
    padding: 8px 0;
    cursor: pointer;
    background-color: #000;
    background-clip: content-box;
  }
.main-image01-thumbs .swiper-scrollbar-drag:active {
    background-color: #000;
  } */
@media (max-width: 768px) {
.main-image01,
.main-image02,
.main-image03{
  
  width: 100%;
  
}
}