@charset "UTF-8";

.header_nav {
  position: absolute;
  z-index: 1;
  color: #fff;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.hn_left a {
  padding: 1rem;
  display: inline-block;
}

.hn_right ul {
  display: flex;
  align-items: center;
}

.hn_right ul li:not(:last-child) {
  margin-left: 1rem;
}

.arrow_u {
  display: inline-block;
  padding-left: 20px;
}

.contact-box {
  background: #c9c508;
}

.pe-box {
  background: #54706c;
}

.contact-box,
.pe-box {
  padding: 2rem;
}

.sample {
  margin-top: 100px;
}

.sample img {
  height: 100vh;
}

/*ナチュラル用↓*/

/*共通*/

.h3_left {
  text-align: initial;
}

.h3_right {
  text-align: end;
}

.h3_left::after,
.h3_right::after {
  background-color: #c9c508;
  /* 線の色 */
  bottom: -30px;
  /* 線の位置 */
  content: "";
  height: 15px;
  /* 線の高さ */
  position: absolute;
  width: 120px;
  /* 線の長さ */
}

.h3_left::after {
  left: 0;
  /* 線の中央寄せ */
}

.h3_right::after {
  right: 0;
}

.h3_left,
.h3_right {
  position: relative;
  font-size: clamp(1.5rem, -2.944rem + 9.26vw, 4rem);
  line-height: clamp(2.5rem, -5.5rem + 16.67vw, 7rem);
  font-feature-settings: "palt";
  letter-spacing: 0.2rem;
  margin-bottom: clamp(6.25rem, 0.694rem + 11.57vw, 9.375rem);
}

.message,
.role_content,
.attempt,
.adopt,
.pamphlet,
.dpt_content,
.dp_flow-wrap,
.si_content,
.si_technology,
.rfi_content,
.uf_content,
.uf_construction,
.road_facility {
  margin-top: 80px;
  text-align: initial;
}

/**/

/*社長メッセージ*/

.message p {
  margin-bottom: 1.7rem;
}

.name {
  text-align: end;
}

/**/

/*サステナビリティ*/

.role_grid {
  display: flex;
  gap: 70px;
  /* display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  align-items: center;*/
}

.role_grid:first-child {
  margin-bottom: 70px;
  border-bottom: 1px solid;
  padding-bottom: 30px;
}

.rg2 img,
.rg3 img {
  width: 400px;
  height: 400px;
}

.rg2 img {
  object-fit: cover;
}

.rg3 img {
  object-fit: none;
  object-position: 46% 92%;
}

/*.rg1 {
  grid-area: 1 / 1 / 2 / 3;
}
.rg2 {
  grid-area: 1 / 3 / 2 / 4;
}
.rg3 {
  grid-area: 2 / 1 / 3 / 2;
}
.rg4 {
  grid-area: 2 / 2 / 3 / 4;
}*/

.cl54706C {
  color: #54706c;
  font-size: 1.2rem;
  line-height: initial;
}

.sdgs_icon {
  text-align: center;
  margin: 30px 0;
}

.acg_left img {
  width: 180px;
}

.sdgs_sub {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.ac_grid {
  display: flex;
  gap: 70px;
  padding: clamp(3.125rem, -2.431rem + 11.57vw, 6.25rem) 0;
}

.ac_grid:not(:last-child) {
  border-bottom: 1px solid;
}

.adopt_flex {
  display: flex;
  gap: 50px;
}

.af_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 0px;
}

.afg_1 {
  grid-area: 1 / 1 / 2 / 3;
}

.afg_2 {
  grid-area: 2 / 1 / 3 / 2;
}

.afg_3 {
  grid-area: 2 / 2 / 3 / 3;
}

.af_grid img {
  height: 230px;
  object-fit: cover;
}

.sdgslogo {
  width: 50%;
}

/**/

/*会社パンフレット*/

.pm_flex {
  display: flex;
  gap: 50px;
}

.pmf_left .h3_left {
  margin-bottom: 60px;
}

.pmf_left .h3_left::after {
  width: 80px;
  /* 線の長さ */
}

.pamphlet_main {
  background: #efefef;
  padding: 50px;
  margin-bottom: 50px;
}

.pamphlet_main .h3_left::after {
  bottom: -10px;
}

.pmf_right img {
  max-width: 400px;
  object-fit: cover;
  height: auto;
  box-shadow: 20px 20px 20px -10px #555555;
  /*background: #787878;
  filter: drop-shadow(10px 15px 10px rgb(107, 107, 107));*/
  transition: 0.5s;
  transform: perspective(100px) rotateY(-1deg);
}

.pmf_right img:hover {
  /*filter: drop-shadow(-10px 15px 10px rgb(107, 107, 107));*/
  transition: 0.5s;
  box-shadow: -18px 20px 15px -12px #787878;
  transform: perspective(100px) rotateY(1deg);
}

.ps_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.ps_grid .pm_flex {
  background: #efefef;
  padding: 20px;
  flex-direction: row-reverse;
}

.ps_grid .pmf_right img {
  max-width: 150px;
  box-shadow: 15px 15px 10px -10px #555555;
}

.ps_grid .pmf_right img:hover {
  box-shadow: -15px 15px 10px -10px #555555;
}

.pamphlet_btn {
  background: #fff;
  border: 1px solid #536e6a;
  display: inline-block;
  margin-top: 30px;
}

.pamphlet_btn a {
  color: #536e6a;
  padding: 5px 15px;
}

.ps_grid .pmf_left p {
  line-height: initial;
}

.ps_grid .pmf_left .h3_left::after {
  height: 10px;
}

/**/

/*水環境*/

.water-environment {
  text-align: initial;
  max-width: 1200px;
  margin: 0 auto;
}

.we_sub {
  font-size: 2rem;
  line-height: 2.5rem;
  padding-bottom: 3rem;
  display: inline-block;
}

.we_flex {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding-bottom: 50px;
}

.wef_item img {
  max-width: 570px;
  height: 500px;
  object-fit: cover;
}

.we_link_box {
  width: 100%;
  border: 1px solid #333;
  padding: 30px;
  margin: 50px 0;
}

.we_link {
  font-weight: bold;
}

.we_link a {
  color: #005f92;
}

.rice,
.h_map {
  margin: clamp(1.25rem, -2.083rem + 6.94vw, 3.125rem) auto
    clamp(3.125rem, -2.431rem + 11.57vw, 6.25rem) auto;
}

.h_map-img img {
  width: 1200px;
  padding-bottom: 50px;
}

/**/

/*防災技術部*/

.dpt_content p {
  text-align: initial;
}

.dpt_content_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /*repeat(4, 1fr)*/
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  margin-top: 50px;
}

.dcg_item {
  position: relative;
  width: 100%;
}

.dcg_item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.detail {
  position: absolute;
  width: 100%;
  left: 50%;
  padding: 5px 0;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-family: sans-serif;
  bottom: -10px;
  background-color: rgba(0, 0, 0, 0.8);
}

.hs_area_wrap {
  background: url(./img/dp_back.jpg) no-repeat center;
  margin: 50px 0;
  margin: -50px calc(50% - 50vw) 0;
  padding: 100px calc(50vw - 50%);
  /* width: 100vw;*/
}

.hs_area {
  position: relative;
  overflow: visible !important;
}

.hs_a_ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: left;
  background: linear-gradient(
    135deg,
    #fff 0%,
    #fff 49%,
    #f1f1f1 49%,
    #f1f1f1 100%
  );
  padding: 50px 30px;
  margin: 0 auto;
}

.hs_a_ul li::before,
.si_achievements_ul li::before,
.ttg_item ul li::before,
.csf_item dl dt::before,
.ri_flow-item ul li::before {
  content: "□";
}

.hard_circle,
.soft_circle {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.hard_circle {
  background: #c1be1c;
  left: -5%;
}

.soft_circle {
  background: #54706c;
  right: -5%;
}

.dp_flow {
  margin-top: 50px;
}

.dp_sub {
  font-size: 2rem;
  margin-top: 30px;
}

.dp_flow-content {
  display: flex;
  gap: 50px;
}

.dp_sub2 {
  font-size: 1.5rem;
}

.arrow_box,
.arrow_box2 {
  position: relative;
  width: 50px;
  height: 50px;
  background: #ffffff;
  padding: 15px;
  text-align: center;
  border: 1px solid #444444;
  color: #444444;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

.arrow_box:after,
.arrow_box:before {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-width: 16px;
  border-bottom-width: 16px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #ffffff;
}

.arrow_box:before {
  border-color: rgba(68, 68, 68, 0);
  border-top-width: 17px;
  border-bottom-width: 17px;
  border-left-width: 11px;
  border-right-width: 11px;
  margin-left: -11px;
  margin-top: 1px;
  border-top-color: #444444;
}

.under_line {
  background-image: url(img/j_line-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: auto 100%;*/
}

.dpt_content_grid2,
.dpt_content_grid3,
.dpt_content_grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /*repeat(4, 1fr)*/
  grid-column-gap: 15px;
  grid-row-gap: 10px;
}

.dp_flow-item {
  flex: 1;
  border-bottom: 1px solid;
  padding: 30px 0 60px;
}

.dpt_content_grid2 .dcg_item img {
  height: 250px;
  object-fit: cover;
}

.dcg_item .no-img {
  border: 1px solid;
  font-size: 1.3rem;
}

.no {
  border-right: 1px solid;
  padding: 5px 17px;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  display: inline-block;
}

.ni_detail {
  border: 1px solid;
  border-top: none;
  padding: 2rem;
  min-height: 200px;
}

.f_emphasis {
  color: #bf3f65;
}

.ni_detail .fit {
  width: initial;
  height: fit-content;
  vertical-align: sub;
  margin-right: 10px;
}

.dpt_content_grid4 {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid4_1 {
  grid-area: 1 / 1 / 3 / 3;
}

.grid4_2 {
  grid-area: 1 / 3 / 3 / 5;
}

.grid4_3 {
  grid-area: 1 / 5 / 3 / 6;
  overflow: hidden;
}

.grid4_3 img {
  padding: 5px;
  background-color: #c9c508;
  width: calc(100% - 10px);
  height: 340px !important;
}

.dp_date {
  font-family: sans-serif;
  padding: 5px 20px;
  border: 1px solid;
  display: inline-block;
  margin: 20px 0;
}

.dpt_content_grid4 .dcg_item img {
  height: 350px;
  object-fit: cover;
}

/**/

/*測量調査部*/

.si_content_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /*repeat(4, 1fr)*/
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
}

.si_content_grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
}

.si_item {
  position: relative;
  width: 100%;
}

.si_item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.si_achievements_ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
}

.si_achievements {
  border: 1px solid;
  padding: 50px;
  margin-top: 30px;
}

/**/

/*河川施設点検*/

.rfi_content_grid,
.rfi_content_grid2,
.rfi_content_grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /*repeat(4, 1fr)*/
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  margin-top: 50px;
}

.rcg_item {
  position: relative;
  width: 100%;
}

.rcg_item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.tenken_area_wrap {
  background: url(./img/rf_back.jpg) no-repeat center;
  margin: 50px 0;
  margin: -50px calc(50% - 50vw) 0;
  padding: 100px calc(50vw - 50%);
  /* width: 100vw;*/
}

.tenken_area {
  position: relative;
  overflow: visible !important;
}

.tenken_table {
  background: #fff;
  /*padding: 30px;*/
}

.tt_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(1, 1fr);
}

.ttg_item:not(:last-child) {
  border-right: 1px solid;
}

.tt_title {
  display: block;
  border-bottom: 1px solid;
  padding: 10px 20px;
  font-size: 1.1rem;
}

.ttg_item ul {
  padding: 20px;
}

.structure {
  text-align: center;
  margin: clamp(1.25rem, -2.083rem + 6.94vw, 3.125rem) auto;
}

.structure img {
  border: 1px solid;
  padding: 10px;
}

.structure figcaption,
.figure figcaption {
  border: 1px solid;
  width: fit-content;
  margin: 0 auto;
  padding: 3px 30px;
  font-weight: bold;
  font-family: sans-serif;
  margin-top: 10px;
}

.rfi_content_grid2,
.rfi_content_grid3 {
  grid-template-rows: repeat(1, 1fr);
}

.rcg_item3-1 {
  grid-area: 1 / 1 / 2 / 4;
}
.rcg_item3-2 {
  grid-area: 1 / 4 / 2 / 5;
}

.rfi_content_grid4 {
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.rfi_content_grid4 .rcg_item img {
  height: 350px;
  object-fit: cover;
}
/**/

/*都市施設部*/

.cs_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.9);
}

.cs_flex .csf_title {
  border-bottom: 1px solid;
}

.csf_title {
  font-size: clamp(1.3rem, 0.411rem + 1.85vw, 1.8rem);
}

.csf_title .no {
  padding: 15px 30px;
  margin-right: 2rem;
}

.csf_title:nth-of-type(2) {
  border-top: 1px solid;
}

.csf_item:nth-of-type(2) {
  mix-blend-mode: darken;
}

.csf_item dl {
  padding: 30px 50px;
}

.csf_item dl dt {
  float: left;
}

.uf_construction .csf_title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 50px;
}

.cs_flex-wrap {
  background: url(./img/uf_back.jpg) no-repeat center bottom -70px;
  margin: 50px 0;
  margin: -50px calc(50% - 50vw) 0;
  padding: 100px calc(50vw - 50%);
  /* width: 100vw;*/
}

.uf_content_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
}

.uf_img_bg img {
  width: 100%;
  object-fit: cover;
  /*max-height: 60vh;*/
}

.casestudy2 .csf_title {
  border: 1px solid;
  margin-bottom: 2rem;
}

.casestudy2 .dp_sub {
  margin-top: clamp(3.125rem, -7.986rem + 23.15vw, 9.375rem);
}

.cs_flex2 {
  display: flex;
  gap: 50px;
  margin-top: 50px;
}

.csf_item2 {
  width: 50%;
}

.csf_item2_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
  /*grid-row-gap: 10px;*/
}

.csf_item2_grid img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}

.cig_grid1 {
  grid-area: 1 / 1 / 2 / 2;
}
.cig_grid2 {
  grid-area: 1 / 2 / 2 / 3;
}
.cig_grid3 {
  grid-area: 2 / 1 / 3 / 3;
}

.cs_flex2:nth-child(odd) {
  flex-direction: row-reverse;
}

/**/

/*道路施設点検*/

.ri_flow-content {
  display: flex;
  gap: 50px;
}

.ri_flow-item {
  border: 1px solid;
  /* width: auto; */
  flex: 1;
  margin-bottom: 30px;
}

.ri_flow-item ul {
  padding: 20px;
}

.ri_sub2 {
  font-size: 1.5rem;
  color: #fff;
  background: #c1be1c;
  display: block;
  padding: 5px 20px;
}

.road_inspection_situation,
.road_inspection_detail {
  margin-top: 80px;
}

.road_inspection_situation .rfi_content_grid2 {
  margin-top: 0;
}

.ri_midashi{
  font-size: 1.2rem;
}


@media only screen and (max-width: 959px) {

.menu ul{display: none ;}
.menu .show-on-mobile {
            display: block ;
        }
        .header_nav .hn_right .menu ul>li.arrow_u:nth-of-type(5) .arrow1 {
    display: none;
  }
  .header_nav .hn_right .menu ul>li.arrow_u:nth-of-type(3) .arrow1 {
    display: none;
  }

  #fullpage{
  overflow-x: hidden;
}

}
/**/