@charset "UTF-8";
/*----------------------------------------*/
#main,
section {
  font-family: "RyuminPro", "GaramondPro", serif;
}

#main img {
  width: 100%;
}

.leadArea {
  font-family: "RyuminPro", "GaramondPro", serif;
  text-align: center;
  margin-top: 132px;
  padding-inline: 20px;
}

.leadArea h2 {
  font-size: 39px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.2em;
  padding: 0 0 5px;
  margin: 46px auto 0 auto;
}

.leadArea h2 sup {
  font-size: 25%;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: -1em;
}

.leadArea p {
  letter-spacing: 0.2em;
  margin-block: 16px 65px;
}
.leadArea p.p1 {
  font-size: 21px;
  line-height: 1.3333333333;
}
.leadArea p.p2, .leadArea p.p3, .leadArea p.p4, .leadArea p.p5 {
  font-size: 39px;
  line-height: 1.5897435897;
}

.leadArea .ttlImg {
  height: 32px;
  width: auto;
}

.leadArea figure {
  width: 100%;
  max-width: 992px;
  margin-inline: auto;
}
@media screen and (min-width: 640px) {
  .leadArea figure {
    margin-top: 62px;
  }
}
@media screen and (max-width: 639px) {
  .leadArea figure {
    margin-top: 5vw;
  }
}

@media screen and (max-width: 1300px) {
  .leadArea {
    margin: 72px auto 5vw;
  }
}
@media screen and (max-width: 1200px) {
  .w1200 {
    display: block;
  }
}
@media screen and (max-width: 900px) {
  .w900 {
    display: block;
  }
}
@media screen and (max-width: 639px) {
  section {
    width: 95%;
    margin: 0 auto 10vw auto;
  }
  .leadArea {
    margin: 72px auto 10vw;
  }
  .leadArea h2 {
    font-size: 6vw;
    margin: 7vw auto 5vw;
  }
  .leadArea p {
    font-size: 4vw;
    letter-spacing: 0.1em;
  }
  .leadArea .ttlImg {
    height: 5.2vw;
  }
}
/*　-----------------------　Slick　-----------------------　*/
.sliderBG {
  background: url("../images/design/slider_bg.webp") no-repeat;
  background-size: cover;
}

.slider1 {
  width: 600px;
  margin: auto;
}

.slider2 {
  width: 900px;
  margin: auto;
}

.thumbnail1 .thumbnail-img {
  width: 100px !important;
}

.thumbnail2 .thumbnail-img {
  width: 130px !important;
}

/*　-----　*/
.thumbnail {
  margin: 0 auto;
}

.thumbnail .slick-track {
  transform: unset !important;
}

.thumb {
  opacity: 0.5;
  transition: opacity 0.3s linear;
}

.thumbnail .slick-current {
  opacity: 1;
}

.thumbnail-img img {
  width: 95%;
  margin: 10px auto 0 auto;
}

.sliderWrap {
  margin-bottom: 90px;
}
@media screen and (min-width: 640px) {
  .sliderWrap {
    margin-top: 62px;
  }
}
@media screen and (max-width: 639px) {
  .sliderWrap {
    margin-top: 5vw;
  }
}

.sliderWrap img.slide-arrow {
  width: 48px !important;
  position: absolute;
  z-index: 990;
  top: 50%;
  transform: translateY(-50%);
}

.next-arrow {
  right: -55px;
}

.prev-arrow {
  left: -55px;
}

.thumbnail .slick-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.slick-slide {
  float: none;
}

.thumb:hover {
  opacity: 1;
}

.thumb:hover img {
  transition: 0.3s;
  transform: scale(1.05);
}

/*************************************************************/
@media screen and (max-width: 1200px) {
  /*************************************************************/
  .slider1 {
    width: 80%;
  }
  .slider2 {
    width: 90%;
  }
}
/*************************************************************/
@media screen and (max-width: 900px) {
  /*************************************************************/
  /** Slick **/
  .slider {
    width: 90%;
  }
  .next-arrow {
    right: 0;
  }
  .prev-arrow {
    left: 0;
  }
  .thumbnail1 .thumbnail-img {
    width: 13.3333333333% !important;
  }
}
/*************************************************************/
@media screen and (max-width: 639px) {
  /*************************************************************/
  /** Slick **/
  .thumbnail1 .thumbnail-img,
  .thumbnail2 .thumbnail-img {
    width: 20% !important;
  }
  /*
  .thumbnail .slick-track {
    flex-wrap: wrap;;
  }
  */
  .thumbnail {
    width: 100% !important;
  }
  .sliderWrap img.slide-arrow {
    width: 5vw !important;
  }
}
/*　-----------------------　figure　-----------------------　*/
figure {
  position: relative;
}

figure img {
  width: 100%;
}

figure figcaption {
  font-size: 12px;
  line-height: 1.2;
  position: absolute;
  bottom: 1%;
  letter-spacing: 0;
}

figure figcaption.lb_cap,
figure figcaption.lw_cap {
  left: 1%;
}

figure figcaption.rb_cap,
figure figcaption.rw_cap {
  right: 1%;
}

figure figcaption.lb_cap,
figure figcaption.rb_cap {
  color: #000;
  text-shadow: 1px 1px 2px rgb(255, 255, 255), -1px -1px 2px rgb(255, 255, 255);
}

figure figcaption.lw_cap,
figure figcaption.rw_cap {
  color: #fff;
  text-shadow: 1px 1px 2px rgb(0, 0, 0), -1px -1px 2px rgb(0, 0, 0);
}

/* ----------------------- */
/* 1000 */
/* ----------------------- */
@media screen and (max-width: 900px) {
  figcaption,
  .annotation,
  .s-txt,
  .ann,
  .acc_ann {
    font-size: clamp(0.625rem, 0.211rem + 0.86vw, 0.75rem);
  } /*12px*/
}
/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 639px) {
  figcaption,
  .annotation,
  .s-txt,
  .ann,
  .acc_ann {
    font-size: clamp(0.625rem, 0.465rem + 0.85vw, 0.875rem);
  } /*14px*/
}

/*# sourceMappingURL=design.css.map */