@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
/*==========================================
 共通
===========================================*/
/* ページタイトル */
.pageTtl {
  padding-top: clamp(100px, 16.7vw, 200px);
  margin-bottom: 70px;
  line-height: 1;
}
.pageTtl_name {
  margin-bottom: clamp(15px, 5vw, 25px);
  font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(20px, 2.4vw, 24px);
  letter-spacing: 0.12em;
}
.pageTtl_ttl-en {
  margin-bottom: clamp(20px, 6vw, 30px);
  font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(40px, 10vw, 72px);
  line-height: 0.6;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.pageTtl_ttl-en .ja {
  font-size: 0.6em;
}
.pageTtl_ttl-ja {
  margin-bottom: clamp(15px, 15vw, 25px);
  font-size: 16px;
}
.pageTtl_txt {
  width: fit-content;
  padding: 0.75em 1.5em;
  margin: 0 auto 1.5em;
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.5;
  font-weight: bold;
  position: relative;
}
@media screen and (max-width: 768px) {
  .pageTtl_txt {
    width: 100%;
    font-size: clamp(14px, 4.5vw, 36px);
  }
}
.pageTtl_txt::before, .pageTtl_txt::after {
  content: "";
  display: block;
  width: 2.25em;
  height: 2.25em;
  position: absolute;
}
.pageTtl_txt::before {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  top: 0;
  left: 0;
}
.pageTtl_txt::after {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  right: 0;
  bottom: 0;
}

/* sec01 */
.sec01 {
  margin-bottom: clamp(100px, 16.7vw, 200px);
  position: relative;
}
.sec01_box1 {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 577px) {
  .sec01_box1 {
    height: 34.456vw;
    margin-bottom: clamp(25px, 3.34vw, 50px);
  }
}
@media screen and (max-width: 576px) {
  .sec01_box1 {
    display: block;
    padding: 0 8.88vw;
  }
}
.sec01_box1 img {
  height: 100%;
}
@media screen and (max-width: 576px) {
  .sec01_box1 img {
    height: auto;
  }
}
.sec01_box2 {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 576px) {
  .sec01_box2 {
    display: none;
  }
}
.sec01_box2 img {
  width: clamp(120px, 24vw, 360px);
  margin: 0 clamp(6px, 1.2vw, 18px);
}
.sec01_bg {
  width: 81.125vw;
  height: 26.15vw;
  background: url("../img/common/bg-gradW.jpg") no-repeat center/cover;
  position: absolute;
  top: 17.228vw;
  left: 0;
  z-index: -3;
}
@media screen and (max-width: 576px) {
  .sec01_bg {
    width: 71.11vw;
    height: 88.88vw;
    top: auto;
    bottom: -8.88vw;
  }
}

/* sec02 */
.sec02 {
  max-width: 1920px;
  margin: 0 auto clamp(100px, 16.7vw, 200px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sec02_txtBox {
  width: 50%;
  padding: 0 7.825%;
}
@media screen and (max-width: 768px) {
  .sec02_txtBox {
    width: 100%;
    margin-bottom: 30px;
  }
}
.sec02_imgBox {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .sec02_imgBox {
    width: 100%;
    padding-left: 7.825%;
  }
}
.sec02_ttl {
  width: fit-content;
  margin: 0 auto 1.5em;
  font-family: "Amsterdam Four_ttf";
  font-size: clamp(26px, 4.5vw, 60px);
  line-height: 1;
  color: #e20a00;
  white-space: nowrap;
  transform: rotate(-10deg);
}
@media screen and (max-width: 1200px) {
  .sec02_ttl {
    margin: 0 0 1.8em -1.5vw;
  }
}
@media screen and (max-width: 768px) {
  .sec02_ttl {
    margin: 0 auto 1.8em;
    font-size: clamp(30px, 9vw, 60px);
  }
}
.sec02_head {
  margin-bottom: 1.5em;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.75;
  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .sec02_head {
    max-width: 450px;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .sec02_head {
    font-size: clamp(17px, 4vw, 24px);
    text-align: center;
  }
}
.sec02_txt {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 2.25;
  font-weight: 600;
}
@media screen and (min-width: 769px) {
  .sec02_txt {
    max-width: 450px;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .sec02_txt {
    font-size: clamp(14px, 4vw, 16px);
    max-width: initial;
  }
}
@media screen and (max-width: 576px) {
  .sec02_txt {
    font-weight: 500;
  }
}

/* 特徴 */
.secPoints {
  margin-bottom: clamp(100px, 16.7vw, 200px);
}

.points-slider {
  position: relative;
}
.points-slider_item {
  width: clamp(200px, 58vw, 700px);
  margin: 0 clamp(30px, 8.34vw, 100px);
  opacity: 0.4;
}
.points-slider_item.slick-current {
  opacity: 1;
}
.points-slider_item img {
  aspect-ratio: 700/393;
  object-fit: cover;
}
.points-slider_ttl {
  margin-top: 1.25em;
  font-size: clamp(18px, 1.67vw, 20px);
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
.points-slider_txt {
  margin-top: 1em;
  font-size: clamp(14px, 1.34vw, 16px);
  line-height: 2;
  font-weight: bold;
}
@media screen and (max-width: 576px) {
  .points-slider_txt {
    font-weight: 500;
  }
}
.points-slider .slide-arrow {
  display: block;
  width: 1em;
  height: 1em;
  font-size: clamp(30px, 5vw, 40px);
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: calc((clamp(200px, 58vw, 700px) / 700 * 393 - 1em) / 2);
  z-index: 2;
  cursor: pointer;
}
.points-slider .slide-arrow::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  position: absolute;
  top: 0.3em;
}
.points-slider .slide-arrow.prev-arrow {
  left: calc((100% - clamp(200px, 58vw, 700px) - clamp(30px, 8.34vw, 100px) * 2 - 1em) / 2);
}
.points-slider .slide-arrow.prev-arrow::after {
  left: 0.35em;
  transform: rotate(-135deg);
}
.points-slider .slide-arrow.next-arrow {
  right: calc((100% - clamp(200px, 58vw, 700px) - clamp(30px, 8.34vw, 100px) * 2 - 1em) / 2);
}
.points-slider .slide-arrow.next-arrow::after {
  right: 0.35em;
  transform: rotate(45deg);
}

/* 施工事例 */
.secWorks {
  padding-top: 45px;
  margin-bottom: clamp(100px, 16.7vw, 200px);
  position: relative;
}
.secWorks_bg {
  width: 68.5vw;
  height: 270px;
  background: #ededed;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -3;
}
@media screen and (max-width: 768px) {
  .secWorks_bg {
    width: 75.5vw;
    height: 70%;
  }
}
.secWorks .secTtl {
  margin-bottom: 30px;
}
.secWorks .works-list {
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.secWorks .works-item {
  width: 48.33%;
}
@media screen and (max-width: 768px) {
  .secWorks .works-item {
    width: 100%;
  }
  .secWorks .works-item:nth-child(n+2) {
    margin-top: 60px;
  }
}
.secWorks .works-item img {
  aspect-ratio: 3/2;
  object-fit: cover;
}
.secWorks .works-item_ttl {
  margin-top: 1em;
  font-size: clamp(14px, 1.34vw, 16px);
  line-height: 1.875;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .secWorks .works-item_ttl {
    text-align: start;
  }
}
@media screen and (max-width: 768px) {
  .secWorks .works-item_ttl {
    font-size: clamp(14px, 4vw, 16px);
  }
}
@media screen and (max-width: 576px) {
  .secWorks .works-item_ttl {
    font-weight: 500;
  }
}

/* その他の商品 */
.productsLink {
  margin-bottom: clamp(80px, 12vw, 120px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.productsLink_item {
  display: block;
  width: calc((100% - 4px) / 2);
  min-height: 300px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .productsLink_item {
    width: 100%;
    min-height: 240px;
  }
  .productsLink_item:nth-child(n+2) {
    margin-top: 1.5vw;
  }
}
.productsLink_item_inner {
  width: 100%;
  height: 100%;
  line-height: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.productsLink_item_name {
  margin-bottom: 20px;
  font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(16px, 1.67vw, 20px);
  letter-spacing: 0.12em;
}
@media screen and (max-width: 768px) {
  .productsLink_item_name {
    font-size: clamp(16px, 4.334vw, 26px);
  }
}
.productsLink_item_ttl-en {
  margin-bottom: 30px;
  font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.6;
  font-weight: 500;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 768px) {
  .productsLink_item_ttl-en {
    font-size: clamp(36px, 10vw, 72px);
  }
}
.productsLink_item_ttl-en .ja {
  font-size: 0.6em;
}
.productsLink_item_ttl-ja {
  font-size: clamp(14px, 1.34vw, 16px);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .productsLink_item_ttl-ja {
    font-size: clamp(14px, 3.334vw, 20px);
  }
}
.productsLink_item_bg {
  height: 100%;
  object-fit: cover;
}

/* 商品紹介 */
.secLineup {
  padding: clamp(50px, 10vw, 100px) 0 clamp(70px, 14vw, 140px);
  margin-bottom: clamp(100px, 15vw, 150px);
  background: url("../img/common/bg-wallW.jpg") no-repeat center/cover;
}
.secLineup .secTtl {
  margin-bottom: clamp(30px, 8vw, 50px);
}
.secLineup .lineup-slider {
  width: 92vw;
  max-width: 1585px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 768px) {
  .secLineup .lineup-slider {
    width: 100vw;
  }
}
.secLineup .lineup-slider_item {
  width: 18%;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .secLineup .lineup-slider_item {
    width: clamp(200px, 58vw, 700px);
    margin: 0 clamp(30px, 8.34vw, 100px);
  }
}
.secLineup .lineup-slider_img {
  aspect-ratio: 3/2;
}
.secLineup .lineup-slider_inner {
  padding: 7.5% 5.5%;
}
@media screen and (max-width: 768px) {
  .secLineup .lineup-slider_inner {
    padding: 30px 20px;
  }
}
.secLineup .lineup-slider_ttl {
  margin-bottom: 5.5%;
  font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(18px, 2.25vw, 36px);
  line-height: 0.6;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .secLineup .lineup-slider_ttl {
    font-size: clamp(18px, 8vw, 36px);
  }
}
.secLineup .lineup-slider_txt {
  font-size: clamp(10px, 0.95vw, 16px);
  line-height: 1.625;
  font-weight: 600;
}
@media (769px <= width <= 1200px) {
  .secLineup .lineup-slider_txt br {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .secLineup .lineup-slider_txt {
    font-size: clamp(10px, 3.2vw, 16px);
  }
}
.secLineup .lineup-slider .slide-arrow {
  display: block;
  width: 1em;
  height: 1em;
  font-size: clamp(30px, 5vw, 40px);
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: calc((100% - 1em) / 2);
  z-index: 2;
  cursor: pointer;
}
.secLineup .lineup-slider .slide-arrow::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  position: absolute;
  top: 0.3em;
}
.secLineup .lineup-slider .slide-arrow.prev-arrow {
  left: calc((100% - clamp(200px, 58vw, 700px) - clamp(30px, 8.34vw, 100px) * 2 - 1em) / 2);
}
.secLineup .lineup-slider .slide-arrow.prev-arrow::after {
  left: 0.35em;
  transform: rotate(-135deg);
}
.secLineup .lineup-slider .slide-arrow.next-arrow {
  right: calc((100% - clamp(200px, 58vw, 700px) - clamp(30px, 8.34vw, 100px) * 2 - 1em) / 2);
}
.secLineup .lineup-slider .slide-arrow.next-arrow::after {
  right: 0.35em;
  transform: rotate(45deg);
}
.secLineup .lineup-slider_link {
  display: block;
  height: 100%;
}
.secLineup .lineup-slider_link * {
  transition: 0.3s ease-in-out;
}
.secLineup .lineup-slider_link:hover .lineup-slider_img {
  opacity: 0.5;
}
.secLineup .lineup-slider_link:hover .lineup-slider_ttl, .secLineup .lineup-slider_link:hover .lineup-slider_txt {
  color: #d12f18;
}

/*==========================================
 HARMONY建築設計
===========================================*/
/*==========================================
 Designers HOUSE
===========================================*/
/*==========================================
 Product HOUSE
===========================================*//*# sourceMappingURL=products.css.map */