/* ------------------------------------------------
 kv
------------------------------------------------ */
#kv {
  position: relative;
}
#kv > .inner {
  padding-top: 4.625em;
  overflow: hidden;
}
#kv > .inner::before {
  content: "";
  background: url(../img/cp02/badge.png) no-repeat;
  background-size: contain;
  width: 8.125em;
  aspect-ratio: 1/1;
  position: absolute;
  top: 18.125em;
  left: 45em;
  z-index: 2;
}
#kv .title {
  margin-left: 19.5em;
  width: 38em;
}
#kv .detail {
  margin-top: -1.375em;
  margin-left: 19.875em;
  width: 37.625em;
}
@media screen and (max-width: 767.9px) {
  #kv > .inner {
    padding-top: 1.8em;
  }
  #kv > .inner::before {
    width: 5.6em;
    top: 23.8em;
    left: 17.4em;
  }
  #kv .title {
    margin-left: 1.1666666667em;
    width: 22.6666666667em;
  }
  #kv .detail {
    margin-top: -0.5333333333em;
    margin-left: 1.8em;
    width: 22.9333333333em;
  }
}

/* ----------------------------
 gallery
------------------------------*/
#kv .gallery {
  padding-top: 2.5em;
  margin: 0 -0.9375em;
  width: 76.875em;
}
#kv .gallery .swiper-wrapper {
  align-items: center;
  box-sizing: border-box;
}
#kv .gallery li {
  box-sizing: border-box;
  align-content: center;
}
#kv .gallery li .img {
  border: 0.3125em solid #ff8929;
  outline: 0.3125em solid #fff;
  border-radius: 3.125em;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
  width: 18.125em;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0.1875em 0.25em 1.4375em 0px rgba(8, 1, 3, 0.15);
}
#kv .gallery li .img img {
  margin: 0 auto;
  width: 16em;
}
#kv .gallery .ctrl {
  margin-top: 2.875em;
  margin-bottom: 3.125em;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 2.875em;
       column-gap: 2.875em;
}
#kv .gallery .ctrl > * {
  position: static !important;
}
@media screen and (min-width: 768.1px) {
  #kv .gallery .swiper-wrapper {
    height: 31.25em;
    align-items: center;
    box-sizing: border-box;
  }
  #kv .gallery li .img {
    transition: width 0.4s ease, padding 0.4s ease;
  }
  #kv .gallery li .img img {
    transition: width 0.4s ease;
  }
  #kv .gallery li.swiper-slide-active .img {
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    width: 26em;
  }
  #kv .gallery li.swiper-slide-active .img img {
    width: 22.1875em;
  }
}
@media screen and (max-width: 767.9px) {
  #kv .gallery {
    padding-top: 2em;
    margin: 0 -17.9em;
    width: 60.8em;
  }
  #kv .gallery li .img {
    border-width: 0.2333333333em;
    outline-width: 0.2333333333em;
    border-radius: 1.6666666667em;
    padding-top: 0.3333333333em;
    padding-bottom: 0.3333333333em;
    width: 19em;
    box-shadow: 0.1em 0.1333333333em 0.7666666667em 0px rgba(8, 1, 3, 0.15);
  }
  #kv .gallery li .img img {
    width: 15.6666666667em;
  }
  #kv .gallery .ctrl {
    margin-top: 1.3333333333em;
    margin-bottom: 3.3333333333em;
    -moz-column-gap: 2.6em;
         column-gap: 2.6em;
  }
}

/* ------------------------------------------------
 about
------------------------------------------------ */
#about > .inner {
  padding-bottom: 4.375em;
}
#about .info {
  margin-top: -2.875em;
  margin-left: 9.125em;
  width: 58.125em;
}
#about .note_img {
  margin-top: 0.625em;
  margin-left: 11.875em;
}
@media screen and (max-width: 767.9px) {
  #about > .inner {
    padding-bottom: 2.5em;
  }
  #about .info {
    margin-top: -0.3333333333em;
    margin-left: 0.6666666667em;
    width: 23.9666666667em;
  }
  #about .note_img {
    margin-top: -0.8666666667em;
    margin-left: 1.1666666667em;
    width: 20.1em;
  }
}