@charset "utf-8";

/* new css */

/*===================
intro
===================*/
.designIntro__container {
  padding: clamp(100px, 15.25vw, 244px) 0 clamp(100px, 28.125vw, 450px);
  position: relative;
  z-index: 1;
}
.designIntro__pic01 {
  position: absolute;
  width: 36%;
  max-width: 569px;
  top: 15%;
  left: 0;
  z-index: -1;
}
.designIntro__pic02 {
  position: absolute;
  width: 65%;
  max-width: 990px;
  top: 9%;
  right: 0;
  z-index: -1;
}
.designIntro__heading {
  margin-bottom: clamp(10px, 1.5vw, 24px);
  font-size: clamp(20px, 2.5vw, 40px);
  font-weight: 700;
  line-height: 1.7415;
  text-align: center;
}
.designIntro__txt {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 700;
  line-height: 2.5875;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .designIntro__container {
    padding-top: 16vw;
    padding-bottom: 0;
  }
  .designIntro__pic01 {
    display: none;
  }
  .designIntro__pic02 {
    display: none;
  }
}
/*===================
デザイン layout
===================*/
.layout__wrap {
  max-width: 1003px;
  margin: 0 auto;
}
.layout__heading {
  margin-bottom: clamp(15px, 1.25vw, 20px);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 700;
  text-align: center;
}
.layout__container {
  margin-bottom: 30px;
}
.layout__container:last-child {
  margin-bottom: 0;
}
.layout__subHeading {
  margin-bottom: 15px;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 700;
}
.layout__subHeading.en {
  font-size: clamp(15px, 1.8125vw, 29px);
  color: #c65c26;
}
.layout__pic01 {
  max-width: 773px;
  margin: 0 auto;
}
.layout .aboutDesign__catchBig {
  margin-bottom: 20px;
  line-height: 1.3;
}
.layout .aboutDesign__catchBig::after {
  width: 14%;
  padding-top: 16%;
  top: -7%;
  right: -37%;
}
.layout .aboutDesign__catchBig::before {
  width: 12%;
  padding-top: 14%;
  top: 116%;
  left: -34%;
}
/*===================
スタイル style
===================*/
.style__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.about-low__white:nth-child(odd) .style__wrap {
  flex-direction: row-reverse;
}
.style__left {
  width: 50%;
}
.style__right {
  width: 45%;
}
.style__sub {
  width: fit-content;
  padding-right: 10px;
  margin-bottom: clamp(15px, 1.25vw, 20px);
  line-height: 1.2;
}
.style__sub .plan {
  display: inline-block;
  padding: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.style__sub .small01 {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
}
.style__sub .small02 {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
}
.style__wrap.blue .style__sub {
  border-bottom: 1px solid #58a3ba;
  color: #58a3ba;
}
.style__wrap.blue .plan {
  background: #58a3ba;
}
.style__wrap.yellow .style__sub {
  border-bottom: 1px solid #b7a958;
  color: #b7a958;
}
.style__wrap.yellow .plan {
  background: #b7a958;
}
.style__heading {
  font-size: clamp(25px, 2.375vw, 38px);
  font-weight: 700;
  line-height: 1.75;
}
.style__subHeading {
  margin-bottom: clamp(25px, 2.375vw, 38px);
  font-size: clamp(18px, 1.3125vw, 21px);
  font-weight: 500;
  line-height: 1.476;
  letter-spacing: 0.04em;
}
.style__txt01 {
  margin-bottom: clamp(16px, 1.1875vw, 19px);
  font-size: clamp(16px, 1.1875vw, 19px);
  font-weight: 700;
  line-height: 1.57;
}
.style__txt02 {
  font-size: 13px;
  font-weight: 500;
  line-height: 2;
}
.style__swiper {
  position: relative;
}
.style__wrap.blue .style__heading,
.style__wrap.blue .style__subHeading {
  color: #58a3ba;
}
.style__wrap.yellow .style__heading,
.style__wrap.yellow .style__subHeading {
  color: #b7a958;
}
.style__button-next,
.style__button-prev {
  position: absolute;
  top: 56%;
  left: 5%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}
.style__button-next {
  width: 35px;
  height: 35px;
  background: url(../imgs_new/design/arrow_r.png) center center / cover
    no-repeat;
  left: auto;
  right: 5%;
}
.style__button-prev {
  width: 35px;
  height: 35px;
  background: url(../imgs_new/design/arrow_l.png) center center / cover
    no-repeat;
}
.style .aboutDesign__catchBig {
  margin-bottom: 20px;
  line-height: 1.3;
}
.style .aboutDesign__catchBig::after {
  width: 14%;
  padding-top: 16%;
  top: -7%;
  right: -29%;
}
.style .aboutDesign__catchBig::before {
  width: 12%;
  padding-top: 14%;
  top: 116%;
  left: -23%;
}
@media screen and (max-width: 750px) {
  .style__wrap {
    flex-direction: column;
    row-gap: 5vw;
  }
  .about-low__white:nth-child(odd) .style__wrap {
    flex-direction: column;
  }
  .style__left {
    width: 100%;
  }
  .style__right {
    width: 100%;
  }
}