@charset "utf-8";
/* CSS Document */
.boxwrap {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 6vw, 50px);

}
.boxwrap > .leftbox {
  flex: 1 1 0;
}
.boxwrap > .rightbox {
  flex: 1.2 1 0; /* ← 少し大きめ */
  position: relative;
}
/* 左の大画像 */
.boxwrap > .leftbox .imgbox {
  width: 100%;
  border-radius: 0; /* 見本は角丸なし */
  aspect-ratio: 492 / 547;
    
}
.boxwrap > .leftbox .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* =========================
   右下の2枚画像
   ========================= */
.boxwrap .rightbox .imgboxwrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(18px, 3vw, 36px);
  margin-top: clamp(22px, 4vw, 46px);
}
/* 小さい左：正方形 */
.boxwrap .rightbox .imgboxwrap .img2 {
  width: clamp(90px, 12vw, 140px);
  aspect-ratio: 1;
  overflow: hidden;
  margin-top: 80px;
}
/* 右：横長 */
.boxwrap .rightbox .imgboxwrap .img3 {
  width: clamp(220px, 24vw, 340px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.boxwrap .rightbox .imgboxwrap .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================
   ピンクの装飾（見本の点々）
   ========================= */
.boxwrap .leftbox {
  position: relative;
  margin-right: auto;
  margin-left: auto;
}
.boxwrap .leftbox::before {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 10px;
  width: clamp(60px, 14vw, 90px);
  aspect-ratio: 1;
  background: url("https://sd-quindim.com/system_panel/uploads/images/deco_item2.svg") no-repeat center / contain;
  opacity: .9;
  pointer-events: none;
  z-index: 20;
}
.boxwrap .leftbox::after {
  content: "";
  position: absolute;
  left: -20px;
  top: -10px;
  width: clamp(100px, 14vw, 140px);
  aspect-ratio: 1;
  background: url("https://sd-quindim.com/system_panel/uploads/images/deco_item7.svg") no-repeat center / contain;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
/* 右boxの中身を装飾より前へ */
.boxwrap .rightbox > * {
  position: relative;
  z-index: 1;
}
/* =========================
   SP（縦並び）
   ========================= */
@media (max-width: 768px) {
  .boxwrap {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .boxwrap .leftbox {
    width: 80%;
  }
  .boxwrap .rightbox::before {
    left: 0;
    bottom: -10px;
    opacity: .7;
  }
  .boxwrap .rightbox {
    margin: auto;
  }
  .boxwrap .rightbox .txtbox {
    max-width: 560px;
  }
  .boxwrap .rightbox .imgboxwrap {
    justify-content: flex-start;
  }
}
@media (max-width: 576px) {
  .boxwrap .leftbox {
    width: 95%;
  }
}
.cate2 .mapbox {
  width: 100%;
  height: 390px;
  overflow: hidden;
}
.cate2 .mapbox iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.cate2 .titlebox1, .cate2 .company_layout {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
.company_layout .contents {
  width: 100%;
}
.cate2 .company_layout .contents .boxwrap .box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid rgba(173, 170, 170, 0.30);
  padding: 10px 0;
}
.cate2 .company_layout .contents .boxwrap .box h3 {
  font-weight: 500;
  width: 150px;
  padding: 10px;
  font-size: clamp(14px, 1.4vw, 16px);
}
.cate2 .company_layout .contents .boxwrap .box > div {
  width: calc(100% - 150px);
  padding: 10px;
}
@media screen and (max-width: 576px) {
  .company_layout .company_title {
    margin-bottom: 30px;
  }
  .company_layout .company_title h2 {
    transform: translateY(0);
    margin-top: 10px;
  }
  .company_layout .contents {
    width: 100%;
    margin-left: 0;
  }
  .cate2 .company_layout .contents .boxwrap .box {
    padding: 5px 0;
  }
  .cate2 .company_layout .contents .boxwrap .box:nth-of-type(even) {
    background-color: #E8E1DF;
  }
  .cate2 .company_layout .contents .boxwrap .box h3 {
    font-weight: 500;
    width: 100%;
    padding: 5px;
  }
  .cate2 .company_layout .contents .boxwrap .box > div {
    width: 100%;
    padding: 5px;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px) {}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px) {}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px) {}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px) {}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px) {}