@charset "UTF-8";

/*--- アクティブナビゲーション ---*/
.navi-bus a {
  font-weight: bold;
  color: #2680E8;
  pointer-events: none;
}

/*--- ページタイトル ---*/
.page-ttl {
  background-image: url("../img/bg_services.jpg");
  &::after { /* ページタイトル英語表記 */
    content: "SERVICES";
  }
}

/*--- パンくずリスト---*/
.breadcrumb-list {
  margin-bottom: 2rem;
}

@media (min-width: 768px) { /* タブレット向け（画面幅 768px 以上）*/
}

@media (min-width: 1024px) { /* パソコン向け（画面幅 1024px 以上）*/
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start; /* 上揃え */
    gap: 2.5rem;
    margin: 0 auto;
    max-width: 95%;
    & > p {
      grid-column: 1 / -1; /* p要素を1行丸ごと使って横いっぱいに広げる（gridの外にあるかのように表示） */
    }
  }
} 

/* servicesタイトル */
.services-ttl {
  position: relative;
  height: 13rem;
  margin-bottom: 1rem;
  background-size: cover;
  background-position: center;
  background-color: #d3d3d3;
  color: white;
  border: none;
  /*cursor: pointer;*/
  & > span {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-shadow: 2px 2px 5px #333;
    letter-spacing: 0.2em;
    font-size: var(--font-size-18);
    white-space: nowrap; /* 改行しない */
    display: inline-block;
    /*-webkit-transform: translate(30%, 30%);
    -moz-transform: translate(30%, 30%);
    transform: translate(30%, 30%);*/
  } 
}

.sec-cont.survey > .services-ttl {
  background-image: url("../img/bg_survey.jpg");
}

.sec-cont.three_d > .services-ttl {
  background-image: url("../img/bg_3d.jpg");
}

.sec-cont.compensation > .services-ttl {
  background-image: url("../img/bg_compensation.jpg");
}

.sec-cont.disaster > .services-ttl {
  background-image: url("../img/bg_disaster.jpg");
}

@media (min-width: 768px) { /* タブレット向け（画面幅 768px 以上）*/
}

@media (min-width: 1024px) { /* パソコン向け（画面幅 1024px 以上）*/
  .sec-cont {
    width: 100%;
  }
}

/* セクション　キャッチコピー */
.services-cp {
  width: 90%;
  margin: 0 auto;
  font-family: "Noto Serif JP", serif; /* 明朝 */
  font-size: var(--font-size-22);
  font-weight: 700;
  line-height: 2rem;
  & span.br-narrow { /* 画面幅が狭い場合 */
    display: inline-block; /* spanを横並びにして、入りきらない場合は改行される */
  }
}

@media (min-width: 768px) { /* タブレット向け（画面幅 768px 以上）*/
}

@media (min-width: 1024px) { /* パソコン向け（画面幅 1024px 以上）*/
  .services-cp {
    width: 95%;
    & span.br-wide { /* 画面幅が広い場合 */
      display: inline-block; /* spanを横並びにして、入りきらない場合は改行される */
    }
  }
  .sec-cont-txt {
    width: 95%;
  }
  .sec-cont-ul {
    width: 95%;
  }
}

.sec-cont-txt {
  margin-top: 1rem;
}