@charset "utf-8";

.contents_wrap{
  background-image: url("../img/quality/construction/bg_pc.webp");
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
}

@media all and (max-width: 768px) {
  .contents_wrap{
    background-image: url("../img/quality/construction/bg_sp.webp");
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
  }  
}

.construction_blk_wrap{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.blk_col.col1{
  width:48.047%;/* 615px */
  margin-right:3.906%;
}
.blk_col.col2{
  width:45.703%;/* 585px */
  margin-right:2.344%;
}
.blk_col.col3{
  width:100%;
}
.blk_col.col4{
  width:39.922%;/* 511px */
  margin-right:3.281%;
}
.blk_col.col5{
  width:56.797%;/* 727px */
}
.blk_col.col6{
  width:38.984%;/* 499px */
  margin-right:3.047%;
}
.blk_col.col7{
  width:57.969%;/* 742px */
  background-color:#fff;
  padding:40px;
  box-sizing: border-box;
}
h5{
  font-size:21px;
  color:#5c6885;
  line-height: 1;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid #5c6885;
  width:100%;
  letter-spacing: 0.1em;
}
.c_txt{
  font-size:15px;
  line-height:1.667;
  letter-spacing: 0.08em;
}
.c_cap{
  font-size:12px;
  line-height:1.667;
  letter-spacing: 0.08em;
  margin-top:8px;
}
.img{
  position: relative;
}
.img .cap{
  position: absolute;
  bottom:0;
  right:0;
  font-size:12px;
}
.c_img .fig_cap{
  font-size:13px;
  line-height: 1;
  margin-bottom:10px;
}
.construction_blk.blk1 .c_img:last-child .fig_cap{
  margin-bottom:5px;
}
.c_img_wrap{
  width:88.78%;
  display:flex;
  align-items: flex-start;
  margin-left: auto;
}
.c_img{
  margin-top:14px;
}
.blk_col.col1 .c_img_wrap .c_img{
  width:240px;
  margin-right:33px;
}
.blk_col.col1 .c_img_wrap .c_img:last-child{
  width:222px;
}
.blk_col.col1 .construction_blk.blk2{
  width:100%;
  display:flex;
  align-items: flex-start;
  gap:6.324%;
}
.blk_col.col1 .construction_blk.blk2 .inner_construction_blk{
  width:46.829%;
}
.blk_col.col1 .construction_blk.blk2 .c_img{
  width:205px;
  margin-right:auto;
  margin-left: 19.792%;
}
.blk_col.col1 .construction_blk.blk2 .inner_construction_blk:last-child .c_img{
  width:222px;
  margin-right:auto;
  margin-left: 21.527%;
}
.blk_col.col1 .construction_blk:nth-child(n+2){
  margin-top:40px;
}
.blk_col.col2.img .cap{
  bottom:-14px;
}
.blk_col:nth-child(n+3){
  margin-top:40px;
}
.blk_col:nth-child(n+6){
  margin-top:60px;
}
.blk_col.col3 .construction_blk{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:2.734%;
}
.blk_col.col3 .construction_blk .c_txt_wrap{
  width:64.219%;
}
.blk_col.col3 .construction_blk .img{
  width:32.5%;
  margin-top:7px;
  margin-right:0.547%;
}
.blk_col.col3 .construction_blk .img .cap{
  bottom: 0;
  right: auto;
  left: 56px;
}
.blk_col.col4 .construction_blk{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:0.587%;
}
.blk_col.col4 .construction_blk .c_txt_wrap{
  width:56.947%;
}
.blk_col.col4 .construction_blk .img{
  width:42.466%;
  position: relative;
  right:-1.761%;
  margin-top:7px;
}
.blk_col.col4 .construction_blk .img .cap{
  bottom:-17px;
}
.blk_col.col5 .construction_blk{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:2.751%;
}
.blk_col.col5 .construction_blk .c_txt_wrap{
  width:41.953%;
}
.blk_col.col5 .construction_blk .img{
  width:55.296%;
  margin-top:7px;
}
.blk_col.col6 .construction_blk:nth-child(n+2){
  margin-top:44px;
}
.blk_col.col6 .construction_blk{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:2.605%;
}
.blk_col.col6 .construction_blk.blk2{
  gap:3.006%;
}
.blk_col.col6 .construction_blk.blk1 .c_txt_wrap{
  width:58.517%;
}
.blk_col.col6 .construction_blk.blk1 .img{
  width:38.878%;
  margin-top:7px;
}
.blk_col.col6 .construction_blk.blk1 .img .cap{
  bottom:-15px;
}
.blk_col.col6 .construction_blk.blk2 .c_txt_wrap{
  width:59.118%;
}
.blk_col.col6 .construction_blk.blk2 .img{
  width:37.876%;
  margin-top:7px;
}
.blk_col.col6 .construction_blk.blk2 .img .cap{
  bottom:-19px;
}
.blk_col.col7 .construction_blk:nth-child(n+2){
  margin-top:9px;
}
.blk_col.col7 .construction_blk{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:4.833%;
}
.blk_col.col7 .construction_blk.blk2{
  gap:4.985%;
  align-items: center;
}
.blk_col.col7 .construction_blk.blk1 .c_txt_wrap{
  width:75.68%;
}
.blk_col.col7 .construction_blk.blk1 .img{
  width:14.955%;
  margin-right:4.532%;
  margin-top:6px;
}
.blk_col.col7 .construction_blk.blk2 .c_txt_wrap{
  width:46.677%;
}
.blk_col.col7 .construction_blk.blk2 .img{
  width:45.468%;
  margin-right:2.87%;
}

@media all and (max-width: 768px) {
  h4{
    line-height: 1.353;
    margin-bottom: calc(40 / var(--media_sp) * 100vw);
  }
  .blk_col.col1{
    width:100%;
    margin-right:0;
    order: 2;
  }
  .blk_col.col2{
    width:100%;
    margin-right:0;
    order: 1;
    margin-bottom: calc(70 / var(--media_sp) * 100vw);
  }
  .blk_col.col3{
    width:100%;
    order: 3;
  }
  .blk_col.col4{
    width:100%;
    margin-right:0;
    order: 4;
  }
  .blk_col.col5{
    width:100%;
    order: 5;
  }
  .blk_col.col6{
    width:100%;
    margin-right:0;
    order: 6;
  }
  .blk_col.col7{
    width:100%;
    padding: calc(35 / var(--media_sp) * 100vw) calc(40 / var(--media_sp) * 100vw);
    order: 7;
  }
  h5{
    font-size: calc(30 / var(--media_sp) * 100vw);
    padding-bottom: calc(16 / var(--media_sp) * 100vw);
    margin-bottom: calc(13 / var(--media_sp) * 100vw);
  }
  .c_txt{
    font-size: calc(24 / var(--media_sp) * 100vw);
  }
  .c_cap{
    font-size: calc(20 / var(--media_sp) * 100vw);
    line-height:1.5;
    margin-top: calc(5 / var(--media_sp) * 100vw);
  }
  .img .cap{
    font-size: calc(20 / var(--media_sp) * 100vw);
  }
  .c_img .fig_cap{
    font-size: calc(20 / var(--media_sp) * 100vw);
    margin-bottom: calc(50 / var(--media_sp) * 100vw);
  }
  .construction_blk.blk1 .c_img:last-child .fig_cap{
    margin-bottom: calc(30 / var(--media_sp) * 100vw);
  }
  .c_img_wrap{
    width:100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .c_img{
    margin-top: calc(15 / var(--media_sp) * 100vw);
  }
  .blk_col.col1 .c_img_wrap .c_img{
    width:49.851%;
    margin-right:0;
  }
  .blk_col.col1 .c_img_wrap .c_img:last-child{
    width:46.418%;
  }
  .blk_col.col1 .construction_blk.blk2{
    gap:5.97%;
  }
  .blk_col.col1 .construction_blk.blk2 .inner_construction_blk{
    width:47.015%;/* 315px */
  }
  .blk_col.col1 .construction_blk.blk2 .c_img{
    width:86.032%;
    margin-left: 0;
  }
  .blk_col.col1 .construction_blk.blk2 .inner_construction_blk:last-child .c_img{
    width:95.873%;
    margin-left: 0;
  }
  .blk_col.col1 .construction_blk.blk2 .c_img .fig_cap{
    margin-bottom: calc(20 / var(--media_sp) * 100vw);
  }
  .blk_col.col1 .construction_blk:nth-child(n+2){
    margin-top: calc(55 / var(--media_sp) * 100vw);
  }
  .blk_col.col2.img .cap{
    bottom: calc(-26 / var(--media_sp) * 100vw);
  }
  .blk_col:nth-child(n+3){
    margin-top: calc(60 / var(--media_sp) * 100vw);
  }
  .blk_col:nth-child(n+6){
    margin-top: calc(55 / var(--media_sp) * 100vw);
  }
  .blk_col:nth-child(n+7){
    margin-top: calc(80 / var(--media_sp) * 100vw);
  }
  .blk_col.col3 .construction_blk{
    display:block;
    gap:0;
  }
  .blk_col.col3 .construction_blk .c_txt_wrap{
    width:100%;
  }
  .blk_col.col3 .construction_blk .img{
    width:100%;
    margin-top: calc(25 / var(--media_sp) * 100vw);
    margin-right: 0;
  }
  .blk_col.col3 .construction_blk .img .cap{
    bottom: calc(-30 / var(--media_sp) * 100vw);
    left: auto;
    right: 0;
  }
  .blk_col.col4 .construction_blk{
    gap:2.985%;
  }
  .blk_col.col4 .construction_blk .c_txt_wrap{
    width:50%;
  }
  .blk_col.col4 .construction_blk .img{
    width:47.015%;
    right:0 ;
    margin-top: calc(7 / var(--media_sp) * 100vw);
  }
  .blk_col.col4 .construction_blk .img .cap{
    bottom: calc(-27 / var(--media_sp) * 100vw);
  }
  .blk_col.col5 .construction_blk{
    display:block;
    gap:0;
  }
  .blk_col.col5 .construction_blk .c_txt_wrap{
    width:100%;
  }
  .blk_col.col5 .construction_blk .img{
    width:100%;
    margin-top: calc(10 / var(--media_sp) * 100vw);
  }
  .blk_col.col6 .construction_blk:nth-child(n+2){
    margin-top: calc(80 / var(--media_sp) * 100vw);
  }
  .blk_col.col6 .construction_blk{
    gap:2.985%;
  }
  .blk_col.col6 .construction_blk.blk2{
    gap:3.134%;
  }
  .blk_col.col6 .construction_blk.blk1 .c_txt_wrap{
    width:50%;
  }
  .blk_col.col6 .construction_blk.blk1 .img{
    width:47.015%;
    margin-top: calc(7 / var(--media_sp) * 100vw);
  }
  .blk_col.col6 .construction_blk.blk1 .img .cap{
    bottom: calc(-28 / var(--media_sp) * 100vw);
  }
  .blk_col.col6 .construction_blk.blk2 .c_txt_wrap{
    width:50%;
  }
  .blk_col.col6 .construction_blk.blk2 .img{
    width:46.866%;
    margin-top: calc(7 / var(--media_sp) * 100vw);
  }
  .blk_col.col6 .construction_blk.blk2 .img .cap{
    bottom: calc(-28 / var(--media_sp) * 100vw);
  }
  .blk_col.col7 .construction_blk:nth-child(n+2){
    margin-top: calc(30 / var(--media_sp) * 100vw);
  }
  .blk_col.col7 .construction_blk{
    gap:5.902%;
  }
  .blk_col.col7 .construction_blk.blk2{
    gap:0;
    display:block;
  }
  .blk_col.col7 .construction_blk.blk1 h5{
    line-height: 1.4;
  }
  .blk_col.col7 .construction_blk.blk1 .c_txt_wrap{
    width:70%;
  }
  .blk_col.col7 .construction_blk.blk1 .img{
    width:24.098%;
    margin-right:0;
    margin-top: calc(7 / var(--media_sp) * 100vw);
  }
  .blk_col.col7 .construction_blk.blk2 .c_txt_wrap{
    width:100%;
  }
  .blk_col.col7 .construction_blk.blk2 .img{
    width:76.557%;
    margin:calc(8 / var(--media_sp) * 100vw) auto;
  }
}