@charset "UTF-8";

/* =========================================================
  共通パーツ
========================================================= */
/* セクション */
section .inner { max-width: 900px; margin: 0 auto; padding: 0; overflow: hidden; }
@media only screen and (max-width: 940px) {
  section .inner { max-width: 100%; padding: 0 20px; }
}
@media only screen and (max-width: 767px){
  section .inner { max-width: 100%; padding: 0 5.33vw;}
}
/* 背景 */
.bg_black{background-color: #000;color: #FFF;}
.bg_white{background-color: #FFF;color: #000;}
/* 見出しタイトル */
h3 .en{font-size: 11px; font-weight: 700; color: #003391; border-bottom: 1px solid #DC0616;display: table;margin: 0 auto;}
h3 .ja{font-size: 28px; font-weight: 500; line-height: 1.5; text-align: center; display: block; margin: 5px auto 0;}
@media only screen and (max-width: 767px){
  h3 .en{font-size: 2.93vw;}
  h3 .ja{font-size: 5vw; margin: 2.67vw auto 0;}
}
/* お問い合わせボタン */
.contact_btn {margin: 0 auto; padding:100px 0;}
@media only screen and (max-width: 767px){
  .contact_btn {margin: 0 auto; padding:16vw 0;}
}
/* KVとイントロダクション */
#hero{position:relative;border-radius:20px;overflow:hidden;margin:110px 20px 0px;height: clamp(220px, 42vw, 31.25vw);}
#hero h2{position:absolute; inset:0;display:grid; place-items:center;color:#fff; text-align:center;font-weight:600;font-size:clamp(26px, 4.5vw, 50px);text-shadow:0 2px 6px rgba(0,0,0,.35);}
#intro {margin-top: 37px; padding-bottom: 37px;}
#intro p{margin: 0 auto 0; text-align: justify; line-height: 1.8; font-size: 16px;}
@media only screen and (max-width: 767px){
  #hero{border-radius:2.67vw;margin:calc(60px + 2.67vw) 2.67vw 0px;height:88vw;}
  #hero h2{font-size:8vw;line-height: 1.5;}
  #intro {margin-top:8vw; padding-bottom:8vw;}
  #intro p{margin: 0 auto 0; text-align: justify; line-height: 1.8; font-size: 3.7333vw;}  
}

/* 課題 */
#problem {margin: 0 auto; padding:60px 0 0;}
@media only screen and (max-width: 767px){
  #problem {padding: 10.666vw 0 0;}
}

/* 私たちの強み , 私たちのサービス */
#services {padding: 60px 0 0;}
#strengths {margin: 60px auto;}
section .lead{margin: 24px auto 0;text-align: justify;}
@media only screen and (max-width: 767px){
  #services {padding: 10.67vw 0 0;}
  #strengths {margin: 10.67vw auto;}
  section .lead{margin: 3.33vw auto 0; font-size: 3.7333vw;text-align: justify;line-height: 1.7;}
}
/* 事例 */
#case-studies{width:100%;margin: 60px auto 0;}
#case-studies .inner{padding: 40px;border: 1px solid #BBBBBB;border-radius: 20px;}
#case-studies .description{text-align: justify;line-height: 1.8;font-size: 16px;margin-top: 38px;}
@media only screen and (max-width: 940px) {
  #case-studies{ max-width: 100%; padding: 0 20px; }
}
@media only screen and (max-width: 767px){
  #case-studies{margin: 15.67vw auto 0; padding:0 5.33vw;}
  #case-studies .inner{padding:8vw 5.33vw; border-radius: 2.67vw;}
  #case-studies .description{font-size: 3.73vw;margin-top: 5.33vw;}
}
/* カード */
#service {margin: 150px auto;}
#service .inner{ max-width: 1240px; padding: 0 20px; margin: 0 auto; overflow: hidden; }
#service .card-section{padding: 0 0 0;}
@media only screen and (max-width: 767px){
  #service {margin: 16vw auto;}
  #service .inner{max-width: 100%; padding: 0 5.33vw;}
  #service .card-section{padding: 0 0 0;}
}
/* footer */
footer{border-top: 1px solid #666666;}

/* =========================================================
  道路インフラ対策
========================================================= */
.body__road #hero{background:url(../../assets/img/page/infra_kv.jpg) center/cover no-repeat;}
#case-studies .case-content{margin: 40px auto 0; display: flex;justify-content: center;align-items: flex-start;gap: 20px;flex-wrap: nowrap;}
.body__road #case-studies img.left-image, .body__road #case-studies img.right-image{max-width: 400px;width: 100%;}
/* ===== 私たちの強み ===== */
.body__road #strengths h3.sub_title{margin: 60px auto 0; font-size: 24px; text-align: center;line-height: 1;}
.steps{display:grid; grid-template-columns:1fr 75px 1fr 75px 1fr;align-items: flex-start; margin-top:24px;}
.steps img{width:100%; height:auto; display:block;}
.steps figure figcaption{font-size:14px; margin-top:8px;text-align: left;line-height: 1.5;}
.steps figure span{font-size:12px; text-align: left;display: block;margin-top: 2px;line-height: 1.5;}
.steps .cross{display:grid; place-items:center; color:#888888; font-size:clamp(2.5rem, 1.194rem + 2.62vw, 3.125rem);font-weight: 300;margin-top:clamp(1.875rem, 0.308rem + 3.14vw, 2.625rem);}
@media only screen and (max-width: 767px){
  .body__road #hero{background:url(../../assets/img/page/infra_kv_sp.jpg) center/cover no-repeat;}
  #case-studies .case-content{margin:8vw auto 0; display: flex;flex-direction: column; gap: 2.66vw;flex-wrap: nowrap;}
  .body__road #case-studies img.left-image, .body__road #case-studies img.right-image{max-width: 100%;width: 100%;}
  .body__road #strengths h3.sub_title{margin: 10.67vw auto 0; font-size: 4.8vw;}
  .steps{display:grid;grid-template-columns: 1fr;margin:8vw auto 0;}
  .steps img{width:37.33vw;}
  .steps figure{display: flex;}
  .steps figure figcaption{font-size:3.73vw; margin-top:0; margin: 0 0 0 4vw;line-height: 1.5;}
  .steps figure span{font-size:3.2vw; margin-top: 0.53vw;}
  .steps .cross{font-size:10.67vw;margin:1vw 0 2vw 12vw;justify-content: flex-start; line-height: 1;}
}

/* =========================================================
  河川砂防等国土保全対策
========================================================= */
.body__river #hero{background:url(../../assets/img/page/kasensabou_kv.jpg) center/cover no-repeat;}
.body__river .steps{margin-top:50px;}
.body__river .steps .arrow {background:url(../../assets/img/page/kasensabou_arrow.svg) center/100% no-repeat; aspect-ratio: 76/32; margin-top: clamp(2.5rem, -6.25rem + 20vw, 5rem);}
.body__river table{margin: 30px auto 0; width: 100%;border-collapse: collapse;text-align: center;font-size: 14px;border: 1px solid #ddd;}
.body__river th,.body__river td{border: 1px solid #ddd;padding: 8px 10px;}
.body__river thead th{background-color: #f5f5f5;font-weight: bold;}
@media only screen and (max-width: 767px){
  .body__river #hero{background:url(../../assets/img/page/kasensabou_kv_sp.jpg) center/cover no-repeat;}
  .body__river .steps{margin-top: 16vw;}
  .body__river .steps .arrow {background:url(../../assets/img/page/kasensabou_arrow_sp.svg) center/100% no-repeat; aspect-ratio: 35/35; width: 9.333vw; margin-top: auto; margin: 0 0 0 13vw;}
  .body__river table{margin: 8vw auto 0; width: 100%;font-size:3.2vw;}
  .body__river table thead th:nth-child(1){width: 23.466vw;}
  .body__river th,.body__river td{padding: 2.666vw 1.5vw; line-height: 1.2;vertical-align: middle;}
}

/* =========================================================
  上下水道老朽化対策
========================================================= */
.body__water #hero{background:url(../../assets/img/page/suidou_kv.jpg) center/cover no-repeat;}
.body__water #case-studies .case-content{gap: 40px;}
.body__water #case-studies .left-image{max-width: 300px;}
.body__water #case-studies .description{margin-top: 0;}
@media only screen and (max-width: 767px){
  .body__water #hero{background:url(../../assets/img/page/suidou_kv_sp.jpg) center/cover no-repeat;}
  .body__water #case-studies .case-content{gap: 0;margin-top:5.33vw;}
  .body__water #case-studies .left-image{max-width: 100%;}
}

/* =========================================================
  森林保全対策
========================================================= */
.body__forest #hero{background:url(../../assets/img/page/shinrin_kv.jpg) center/cover no-repeat;}
.body__forest .steps{margin-top:50px;}
.body__forest #case-studies figure .award_img{max-width: 300px;margin: 40px auto 0;display: block;}
.body__forest #case-studies figure figcaption{font-size: 14px;margin: 0 auto;text-align: left; max-width: 300px;}
.body__forest .flex_box{display: flex;align-items: center;gap: 10px;margin-top: 20px;}
.body__forest .flex_box img{margin: 0 10px 0px 0;}
.body__forest #case-studies .voice h4{font-size: 18px;text-align: center; margin: 40px auto 0;}
.bubble{margin-left: auto; width: 89%;box-sizing: border-box;background: #F0F9FE;color: #111;border: 1px solid #BBBBBB;border-radius: 10px;padding: 18px 22px;line-height: 1.8;position: relative;}
.bubble::before{content: "";position: absolute;left: -16px;top: 50%;transform: translateY(-50%);width: 0;height: 0;border-style: solid;border-width: 10px 16px 10px 0;border-color: transparent  #BBBBBB transparent transparent;}
.bubble::after{content: "";position: absolute;left: -15px;top: 50%;transform: translateY(-50%);width: 0;height: 0;border-style: solid;border-width: 9px 16px 9px 0;border-color: transparent #F0F9FE transparent transparent;}
#consulting {margin: 80px auto 0;}
#consulting .mitemiru_logo{display: block; margin: 0 auto 0; max-width: 238px;}
#consulting h3{margin-top: 40px;}
.body__forest #consulting .mitemiru_img{display: block; padding: 30px; border: 1px solid #BBBBBB;margin: 40px auto 0; max-width: 728px;}
@media only screen and (max-width: 767px){
  .body__forest #hero{background:url(../../assets/img/page/shinrin_kv_sp.jpg) center/cover no-repeat;}
  .body__forest .steps{margin-top:16vw;}
  .body__forest #case-studies figure .award_img{max-width: 100%;margin: 8vw auto 0;}
  .body__forest #case-studies figure figcaption{font-size: 3.73vw; max-width: 100%;}
  .body__forest .flex_box{gap: 4vw;margin-top: 4vw;align-items: flex-start;}
  .body__forest .flex_box img{width: 10.67vw;margin: 0;}
  .body__forest #case-studies .voice h4{font-size: 3.73vw; margin: 5.33vw auto 0;}
  .bubble{width: 78%;border-radius: 2.67vw;padding: 4vw;font-size: 3.73vw;text-align: justify;}
  .bubble::before{left: -16px;top: 5.333vw;transform: translateY(-50%);border-width: 10px 16px 10px 0;}
  .bubble::after{left: -15px;top: 5.333vw;transform: translateY(-50%);border-width: 9px 15px 9px 0;}
  #consulting {margin: 60px auto 0;}
  #consulting .mitemiru_logo{ max-width: 39.93vw;}
  #consulting h3{margin-top: 8vw;}
  .body__forest #consulting .mitemiru_img{ padding: 0; border: none;margin: 8vw auto 0; max-width: 100%;}
}