@charset "UTF-8";
/* ==========================================================================//
//
// 事業紹介
//
// ========================================================================== */
/* サービスエリア (SA)・パーキングエリア (PA)の「当たり前」を守る
---------------------------------------------------------- */
.sec_introduction {
  padding-bottom: 60px;
  background-image: url(../images/service/introduction_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
@media all and (min-width: 751px) {
  .sec_introduction {
    margin-top: 110px;
    padding-bottom: 160px;
    background-image: url(../images/service/introduction_bg_pc.png);
  }
}
.sec_introduction .sec_ttl {
  margin-bottom: 20px;
}
@media all and (min-width: 751px) {
  .sec_introduction .sec_ttl {
    margin-bottom: 45px;
  }
}
@media all and (max-width: 750px) {
  .sec_introduction .sec_ttl::before {
    width: min(62px, 100%);
  }
}
.sec_introduction .sec_ttl .jp {
  margin: 0;
  line-height: 1.8;
}
.sec_introduction .introduction {
  margin-inline: auto;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 2;
  text-align: center;
  width: 84%;
}
@media all and (min-width: 751px) {
  .sec_introduction .introduction {
    width: min(723px, 100%);
    font-size: 16px;
    line-height: 2.25;
  }
}
.sec_introduction .image_contents {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media all and (min-width: 751px) {
  .sec_introduction .image_contents {
    margin-top: 60px;
    gap: 0 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.sec_introduction .image_contents .image_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 6px;
}
@media all and (min-width: 751px) {
  .sec_introduction .image_contents .image_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px 0;
  }
}

/* 商業施設の保守保全とインフォメーション業務の共通
---------------------------------------------------------- */
@media all and (min-width: 751px) {
  .detail_section .section_contents {
    width: min(978px, 100%);
    margin-inline: auto;
  }
}
@media all and (min-width: 1001px) {
  .detail_section .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.detail_section .sec_ttl {
  margin-bottom: 20px;
  padding: 0 0 0 18px;
  text-align: left;
}
@media all and (min-width: 751px) {
  .detail_section .sec_ttl {
    margin-bottom: 40px;
    padding: 5px 0 5px 30px;
  }
}
.detail_section .sec_ttl::before {
  background-color: #FF8A65;
  top: 50%;
  bottom: auto;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 2px;
  height: 100%;
}
@media all and (min-width: 751px) {
  .detail_section .sec_ttl::before {
    width: 4px;
  }
}
.detail_section .sec_ttl .en {
  font-size: 18px;
}
@media all and (min-width: 751px) {
  .detail_section .sec_ttl .en {
    font-size: 22px;
  }
}
.detail_section .sec_ttl .jp {
  font-size: 22px;
}
@media all and (min-width: 751px) {
  .detail_section .sec_ttl .jp {
    font-size: clamp(28px, 2.45vw, 34px);
    line-height: 1.1;
  }
}
@media all and (min-width: 1001px) {
  .detail_section .txts {
    width: 43.6%;
  }
}
.detail_section .detail {
  color: #595757;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08px;
  line-height: 2.14;
}
@media all and (min-width: 751px) {
  .detail_section .detail {
    font-size: 16px;
    line-height: 2;
  }
}
.detail_section .image {
  overflow: hidden;
  border-radius: 16px;
}
@media all and (max-width: 1000px) {
  .detail_section .image {
    margin-bottom: 25px;
  }
}
@media all and (min-width: 1001px) {
  .detail_section .image {
    width: 48.5%;
  }
}
.detail_section .service_list {
  margin-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media all and (min-width: 751px) {
  .detail_section .service_list {
    margin-top: 60px;
    gap: 26px 30px;
  }
}
.detail_section .service_list .service_detail {
  padding: 17px 29px 25px;
  background-color: #EDF8F1;
  border-radius: 16px;
}
@media all and (min-width: 751px) {
  .detail_section .service_list .service_detail {
    padding: 30px 42px 35px;
  }
}
@media all and (min-width: 1001px) {
  .detail_section .service_list .service_detail {
    width: calc((100% - 30px) / 2);
  }
}
@media all and (max-width: 750px) {
  .detail_section .service_list .service_detail:not(:first-child) {
    margin-top: 20px;
  }
}
.detail_section .service_list .service_detail .service_ttl {
  margin-bottom: 20px;
  padding-bottom: 15px;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.08px;
  line-height: 1.55;
  text-align: center;
}
@media all and (min-width: 751px) {
  .detail_section .service_list .service_detail .service_ttl {
    margin-bottom: 30px;
    padding-bottom: 22px;
    font-size: 22px;
  }
}
.detail_section .service_list .service_detail .service_ttl::after {
  position: absolute;
  content: "";
  background-color: #ADCEB9;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
.detail_section .service_list .service_detail .explanation {
  letter-spacing: 0.08px;
  line-height: 2;
}
@media all and (min-width: 751px) {
  .detail_section .service_list .service_detail .explanation {
    font-size: 15px;
    line-height: 2.13;
  }
}

/* 商業施設の保守保全
---------------------------------------------------------- */
.sec_maintenance {
  margin-top: 40px;
}
@media all and (min-width: 751px) {
  .sec_maintenance {
    margin-top: 88px;
  }
}

/* インフォメーション業務
---------------------------------------------------------- */
.sec_information {
  margin: 50px 0 60px;
  padding: 37px 0 50px;
  background-color: #EDF8F1;
}
@media all and (min-width: 751px) {
  .sec_information {
    margin: 100px 0 130px;
    padding: 100px 0;
  }
}
.sec_information .service_list .service_detail {
  background-color: #fff;
}