@charset "UTF-8";
/*main color*/
/*addcolor*/
/* spacing */
/*mixin*/
/* color */
.designers {
  margin: clamp(40px, 27.962962963px + 3.0864197531vw, 65px) auto clamp(70px, 65.1851851852px + 1.2345679012vw, 80px);
}
.designers .p-lp-headline .designers__ttl {
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #6D4022;
  padding-bottom: 20px;
}
.designers .p-lp-headline .designers__ttl img {
  width: min(100%, 500px);
}
.designers .designers__point {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(7px, -1.1851851852px + 2.0987654321vw, 24px);
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .designers .designers__point {
    grid-template-columns: repeat(2, 1fr);
  }
}
.designers {
  /* read more */
}
.designers .js-designers-open {
  cursor: pointer;
  margin-top: clamp(30px, 20.3703703704px + 2.4691358025vw, 50px);
}
.designers .js-designers-open span {
  display: block;
  font-size: clamp(13px, 11.5555555556px + 0.3703703704vw, 16px);
  text-align: center;
  line-height: 1;
  color: #0F2E53;
  margin: 0 auto;
}
.designers .js-designers-open i {
  display: block;
}
.designers .js-designers-open i em {
  display: block;
  width: clamp(30px, 27.1111111111px + 0.7407407407vw, 36px);
  height: clamp(30px, 27.1111111111px + 0.7407407407vw, 36px);
  border: 1px solid #0F2E53;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin: 0 auto;
  text-align: center;
}
.designers .js-designers-open--more.is-open {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .designers .js-designers-open--more:hover i {
    animation: 1s forwards arwDown infinite;
  }
  @keyframes arwDown {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(10px);
      opacity: 0;
    }
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .designers .js-designers-open--more:hover i {
    animation: 1s forwards arwDown infinite;
  }
  @keyframes arwDown {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(10px);
      opacity: 0;
    }
  }
}
.designers .js-designers-open--close i em {
  transform: rotate(135deg);
}
@media (hover: hover) and (pointer: fine) {
  .designers .js-designers-open--close:hover i {
    animation: 1s forwards arwUp infinite;
  }
  @keyframes arwUp {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-10px);
      opacity: 0;
    }
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .designers .js-designers-open--close:hover i {
    animation: 1s forwards arwUp infinite;
  }
  @keyframes arwUp {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-10px);
      opacity: 0;
    }
  }
}
.designers .js-designers-cont { /* more content */
  max-height: 0;
  opacity: 0;
  transition: max-height 1s ease, opacity 1s ease;
}
.designers .js-designers-cont.is-open {
  max-height: 10000px;
  opacity: 1;
}
.designers {
  /* DESIGNERS 共通 */
}
.designers .designers-desc dt {
  font-size: clamp(30px, 25.1851851852px + 1.2345679012vw, 40px);
  text-align: left;
  line-height: 1;
  color: #6D4022;
}
.designers .designers-desc dt.performance {
  color: #CAAF9C;
}
@media (max-width: 768px) {
  .designers .designers-desc dt {
    text-align: center;
  }
}
.designers .designers-desc dd {
  font-size: clamp(14px, 13.037037037px + 0.2469135802vw, 16px);
  margin-top: clamp(10px, 7.5925925926px + 0.6172839506vw, 15px);
}
.designers .designers-desc dd.performance {
  color: #fff;
}
@media (max-width: 768px) {
  .designers .designers-desc dd {
    text-align: center;
  }
}
.designers .designers__design {
  background: #f4f4f4;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(34px, 31.1111111111px + 0.7407407407vw, 40px) 0;
}
.designers .designers__design .design-wrap {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: clamp(25px, 17.7777777778px + 1.8518518519vw, 40px);
}
@media (max-width: 768px) {
  .designers .designers__design .design-wrap {
    grid-template-columns: auto;
  }
}
.designers .designers__mul {
  margin-top: -15px;
  padding-left: 20px;
}
@media (max-width: 768px) {
  .designers .designers__mul {
    padding: 0;
    text-align: center;
  }
}
.designers .designers__mul img {
  width: 68px;
  height: auto;
}
.designers .designers__performance {
  width: min(100%, 1200px);
  margin: -15px auto 0;
  padding: 50px 0 clamp(50px, 45.1851851852px + 1.2345679012vw, 60px);
  background: url(../../img/design/designers_performance_bg.jpg) center/cover no-repeat;
  background: url(../../img/design/designers_performance_bg.webp) center/cover no-repeat;
}
.designers .designers__performance .performance-list {
  margin-top: clamp(30px, 25.1851851852px + 1.2345679012vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 15.1851851852px + 1.2345679012vw, 30px);
}
.designers .designers__performance .performance-list li {
  width: calc((100% - 30px) / 2);
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: clamp(10px, 5.1851851852px + 1.2345679012vw, 20px);
  display: grid;
  grid-template-columns: 32% auto;
  gap: clamp(10px, 5.1851851852px + 1.2345679012vw, 20px);
}
@media (max-width: 768px) {
  .designers .designers__performance .performance-list li {
    width: 100%;
    grid-template-columns: 40% auto;
  }
}
.designers .designers__performance .performance-list li p {
  font-size: clamp(12px, 10.0740740741px + 0.4938271605vw, 16px);
  line-height: 1.6;
  text-align: center;
  color: #fff;
  display: grid;
  place-content: center;
}
.designers .designers__performance .performance-list li .pic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.designers .designers__performance .performance-list li figure {
  position: relative;
}
.designers .p-lp-note {
  margin: 20px auto clamp(50px, 40.3703703704px + 2.4691358025vw, 70px);
}

.residence {
  /* 注釈共通 */
}
.residence .residence__fig {
  position: relative;
}
@media (max-width: 768px) {
  .residence .p-lp-figCap--outerSP {
    position: relative;
    right: auto;
    bottom: auto;
    background: transparent;
    color: #333;
    margin-top: 4px;
    padding: 0;
  }
}
.residence {
  /* 画像 テキスト 横並び */
}
.residence .residence__pic-desc-flex {
  display: grid;
  grid-template-columns: 1fr 50%;
  gap: 40px;
}
@media (max-width: 768px) {
  .residence .residence__pic-desc-flex {
    grid-template-columns: auto;
    gap: 0;
  }
}
.residence .residence__pic-desc-flex .desc .p-lp-linehead {
  margin-bottom: clamp(20px, 15.1851851852px + 1.2345679012vw, 30px);
}
.residence {
  /* 共通テキスト */
}
.residence .residence-txt {
  font-size: clamp(18px, 16.0740740741px + 0.4938271605vw, 22px);
  text-align: center;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .residence .residence-txt {
    margin-top: 30px;
  }
}
.residence .mv {
  margin-bottom: clamp(25px, 8.1481481481px + 4.3209876543vw, 60px);
}
.residence .residence__SDW {
  margin: clamp(50px, 45.1851851852px + 1.2345679012vw, 60px) auto clamp(50px, 35.5555555556px + 3.7037037037vw, 80px);
  background: #f4f4f4;
  padding: clamp(20px, 15.1851851852px + 1.2345679012vw, 30px);
}
.residence .residence__SDW .SDW-inner {
  display: grid;
  grid-template-columns: 24% 1fr;
  align-items: center;
  gap: clamp(20px, 15.1851851852px + 1.2345679012vw, 30px);
}
@media (max-width: 768px) {
  .residence .residence__SDW .SDW-inner {
    grid-template-columns: auto;
  }
}
.residence .residence__SDW .SDW-inner .logo {
  background: #ffffff;
  text-align: center;
}
.residence .residence__SDW .SDW-inner .logo img {
  width: min(50%, 200px);
}
.residence .residence__SDW .SDW-inner dl dt {
  font-size: clamp(16px, 14.0740740741px + 0.4938271605vw, 20px);
  border-bottom: 1px solid #707070;
  line-height: 1.5;
  padding-bottom: clamp(7px, 5.5555555556px + 0.3703703704vw, 10px);
}
@media (max-width: 768px) {
  .residence .residence__SDW .SDW-inner dl dt {
    text-align: center;
  }
}
.residence .residence__SDW .SDW-inner dl dd {
  font-size: clamp(14px, 13.037037037px + 0.2469135802vw, 16px);
  margin-top: 20px;
}
.residence .residence__soundproof {
  margin-bottom: clamp(60px, 50.3703703704px + 2.4691358025vw, 80px);
}
.residence .residence__soundproof .residence__fig {
  margin: clamp(30px, 15.5555555556px + 3.7037037037vw, 60px) auto clamp(20px, 5.5555555556px + 3.7037037037vw, 50px);
}
.residence .residence__soundproof .sound-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 10.3703703704px + 2.4691358025vw, 40px);
}
@media (max-width: 768px) {
  .residence .residence__soundproof .sound-list {
    grid-template-columns: auto;
  }
}
.residence .residence__soundproof .sound-list .txt {
  font-size: clamp(12px, 11.5185185185px + 0.1234567901vw, 13px);
}
.residence .solor {
  margin: 60px auto clamp(60px, 55.1851851852px + 1.2345679012vw, 70px);
}
.residence .residence__material .material-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 768px) {
  .residence .residence__material .material-list {
    grid-template-columns: auto;
  }
}
.residence .residence__material .material-list li figure .p-lp-figCap {
  right: auto;
  left: 0;
}
.residence .residence__material .material-list li figure .material02 {
  position: absolute;
  bottom: -20%;
  right: -5%;
  width: clamp(90px, 61.1111111111px + 7.4074074074vw, 150px);
  height: clamp(90px, 61.1111111111px + 7.4074074074vw, 150px);
}
@media (max-width: 768px) {
  .residence .residence__material .material-list li figure .material02 {
    bottom: -20%;
    right: 0;
  }
}
.residence .residence__material .material-list li dl {
  margin-top: 20px;
}
.residence .residence__material .material-list li dl dt {
  font-size: clamp(18px, 16.0740740741px + 0.4938271605vw, 22px);
  text-align: center;
  line-height: 1.2;
}
.residence .residence__material .material-list li dl dd {
  font-size: clamp(14px, 13.037037037px + 0.2469135802vw, 16px);
  text-align: center;
  margin-top: clamp(10px, 5.1851851852px + 1.2345679012vw, 20px);
}
.residence .residence__quality {
  margin: clamp(50px, 40.3703703704px + 2.4691358025vw, 70px) auto clamp(60px, 45.5555555556px + 3.7037037037vw, 90px);
}
.residence .residence__quality .p-lp-linehead {
  margin-bottom: clamp(10px, 5.1851851852px + 1.2345679012vw, 20px);
}
.residence .residence__quality ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 5.1851851852px + 1.2345679012vw, 20px);
}
@media (max-width: 768px) {
  .residence .residence__quality ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.residence .residence__quality ul li {
  background: #f4f4f4;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: clamp(14px, 11.1111111111px + 0.7407407407vw, 20px);
  line-height: 1.3;
  padding: clamp(20px, 10.3703703704px + 2.4691358025vw, 40px) 5px;
}/*# sourceMappingURL=design.css.map */