@charset "utf-8";
:root {
    --DEF   : #333333;
    --MAIN  : #00A7EC;
    --ACC   : #007BFF;
    --OTH   : #D14155;
    --GRY   : #ddd;
    --LGRY  : #f5f5f5;
    --DGRY  : #707070;
    --WHT   : #fff;
  }
.caption {text-transform: uppercase;font-size: clamp( 18px, calc( 17.18918918918919px + 0.21621621621621623vw ), 20px );font-weight: bold;letter-spacing: 20%;color: var(--MAIN) !important;}

h1 {
    font-size: clamp( 2.875rem, calc( 2.418918918918919rem + 1.9459459459459458vw ), 4rem );
    font-weight: bold;
}

.gradient-text {
    background: linear-gradient(135deg, #00A7EC 0%, #007BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .service-mv-title {
    background-image: url(/dcms_media/image/service-mv.jpg);
  min-height: 400px;
  }

.fw-medium {
  font-weight: 500;
}

.service-anchor-link {
  border: 2px solid var(--MAIN);
  background-color: var(--WHT);
  color: var(--MAIN);
}

.service-anchor-link.btn.btn-anchor-link a::after {
    border-top: 2px solid var(--MAIN);
    border-right: 2px solid var(--MAIN);
}
.service-anchor-link:hover {
  border: 1px solid var(--MAIN);
  background-color: var(--MAIN);
  color: var(--WHT) !important;
}

.mw-md {
  max-width: 768px;
}

/* =========================================================
   事業内容ページ 追加CSS  2026-10-13
   「工事の窓口はジェス1社で。」以降（フルスクラッチ）
   ========================================================= */
.svc-sec {padding: 72px 0;}
.svc-sec--blue { background: #F0F9FD; }
.svc-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* セクション見出し（CONSTRUCTION / 建築工事 等） */
.svc-heading { margin-bottom: 48px; }
.svc-heading__en {display: block;font-size: 16px;font-weight: 500;letter-spacing: 20%;color: var(--MAIN);margin-bottom: 10px;}
.svc-heading__ja {font-size: clamp(26px, 3.6vw, 32px);font-weight: 700;color: var(--DEF);line-height: 1.3;margin: 0 0 18px;}
.svc-heading__line { height: 2px; border: 0; margin: 0; background: var(--MAIN); }

/* 1. 工事の窓口はジェス1社で。 */
.svc-intro {background: #fff;/* overflow: hidden; */}
.svc-intro__inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* 淡い青の角丸バンド：左は画面端までブリード、右はコンテナ右端で終わり右角丸、上下に白余白 */
.svc-intro__band {position: absolute;z-index: 0;top: 48px;bottom: 48px;right: 0;left: calc((100% - 100vw) / 2);background: #F0F9FD;/* border-radius: 0 16px 16px 0; */}
.svc-intro__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; padding: 96px 0; min-height: 430px; }
.svc-intro__body { flex: 0 1 560px; min-width: 0; }
.svc-intro__title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; color: var(--DEF); line-height: 1.5; margin: 0 0 28px; }
.svc-intro__title .hl {display: inline-block;font-size: 1.28em;line-height: 1;background: linear-gradient(135deg, #00A7EC 0%, #007BFF 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;}
.svc-intro__body p { font-size: 16px; font-weight: 500; line-height: 1.9; color: var(--DEF); margin: 0 0 1em; }
.svc-intro__body p:last-child { margin-bottom: 0; }
/* 建物イラスト：帯より大きく上下にはみ出し、右端へブリード */
.svc-intro__fig { flex: 1 1 auto; align-self: stretch; position: relative; margin: -56px calc((100% - 100vw) / 2) -56px 0; }
.svc-intro__fig img {position: absolute;right: 12%;top: 50%;transform: translateY(-50%);height: 139%;width: auto;max-width: none;display: block;opacity: .85;}

/* 大型グラデカード（新築工事・修繕工事営繕工事） */
.svc-bigcard { background: linear-gradient(170deg, #00A7EC 16%, #007BFF 84%); padding: 52px; display: flex; align-items: center; gap: 48px; color: #fff; }
.svc-bigcard__body { flex: 1 1 46%; min-width: 0; }
.svc-bigcard__ttl {display: flex;align-items: center;gap: 12px;font-size: clamp( 1.25rem, calc( 1.1486486486486487rem + 0.43243243243243246vw ), 1.5rem );font-weight: 700;margin: 0 0 18px;}
.svc-bigcard__ttl::before { content: ""; width: 20px; height: 20px; background: #fff; flex: none; }
.svc-bigcard__body p {font-size: 15px;line-height: 1.9;margin: 0 0 28px;color: var(--WHT) !important;}
.svc-bigcard__fig { flex: 1 1 54%; min-width: 0; position: relative; align-self: stretch; min-height: 320px; }
.svc-bigcard__fig .ph {position: absolute;width: 58%;aspect-ratio: 292 / 184;/* border-radius: 6px; */overflow: hidden;box-shadow: 0 6px 20px rgba(0,0,0,.18);}
.svc-bigcard__fig .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-bigcard__fig .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(177deg, rgba(26,86,168,0) 55%, rgba(0,167,236,.5) 100%); }
.svc-bigcard__fig .ph--1 { top: 6%; left: 0; }
.svc-bigcard__fig .ph--2 { bottom: 6%; right: 0; }

/* 白ボタン（グラデカード内） */
.svc-btn-wht {display: inline-block;background: #fff;color: var(--MAIN);font-weight: 700;font-size: 15px;padding: 13px 44px;border-radius: 4px;text-decoration: none;transition: .2s;border: 2px solid #fff;width: 278px;text-align: center;}
.svc-btn-wht:hover {background-color: var(--MAIN);color: #fff;text-decoration: none;transition: .2s;}
@media (max-width: 500px) {
.svc-btn-wht {width: 100%;}
}

/* 小カード（テナント/リノベ/電気/給排水） */
.svc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.svc-card { background: #fff; padding: 28px; box-shadow: 0 4px 25px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.svc-card__thumb { aspect-ratio: 473 / 208; overflow: hidden; margin-bottom: 22px; }
.svc-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__ttl {display: flex;align-items: center;gap: 8px;font-size: 20px;font-weight: 700;color: var(--DEF);margin: 0 0 12px;}
.svc-card__ttl::before {content: "";width: 16px;height: 16px;background: var(--MAIN);flex: none;}
.svc-card p { font-size: 14px; line-height: 1.7; color: var(--DEF); margin: 0 0 22px; flex: 1 1 auto; }
/* 青塗りボタン */
.svc-btn {display: block;width: 278px;max-width: 100%;text-align: center;background: var(--MAIN);color: #fff;font-weight: 700;font-size: 15px;padding: 13px;border-radius: 4px;text-decoration: none;transition: .2s;border: 2px solid var(--MAIN);}
.svc-btn:hover {transition: .2s;background-color: #fff;color: var(--MAIN);text-decoration: none;}

/* その他の設備工事（枠囲みボックス） */
.svc-box { border: 1px solid var(--MAIN); padding: 48px 56px; margin-top: 48px; }
.svc-box__ttl {font-size: clamp( 1.25rem, calc( 1.1486486486486487rem + 0.43243243243243246vw ), 1.5rem );font-weight: 700;color: var(--DEF);border-bottom: 1px solid var(--DEF);padding-bottom: 18px;margin: 0 0 36px;}
.svc-box__note { margin-top: 36px; }
.svc-box__note p {color: var(--MAIN) !important;font-weight: 500;font-size: 16px;margin: 0 0 16px;}
.svc-box__note ul { list-style: none; margin: 0; padding: 0; }
.svc-box__note li { font-size: 14px; line-height: 1.9; color: var(--DEF); }

/* FLOW ご依頼の流れ */
.svc-flow { display: flex; align-items: stretch; gap: 46px; }
.svc-flow__step {flex: 1 1 0;position: relative;border: 1px solid var(--MAIN);padding: 46px 14px 34px;text-align: center;}
.svc-flow__step + .svc-flow__step::before {content: "";position: absolute;top: 50%;left: -34px;transform: translateY(-50%);width: 15px;height: 50px;background: linear-gradient(135deg, var(--MAIN) 0%, var(--ACC) 100%);clip-path: polygon(0 0, 100% 50%, 0 100%);}
.svc-flow__num { position: absolute; top: 0; left: 0; background: var(--MAIN); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; padding: 7px 16px; }
.svc-flow__ttl { font-size: 18px; font-weight: 700; color: var(--DEF); margin: 0 0 14px; }
.svc-flow__txt {font-size: 14px;line-height: 1.8;color: var(--DEF);margin: 0;}
.svc-flow__note { display: block; font-size: 13px; color: var(--DGRY); margin-top: 8px; }

/* FAQ よくあるご質問 */
.svc-faq { background: #fff; padding: 28px 56px; }
.svc-faq__item { padding: 24px 0; border-top: 1px solid #eee; }
.svc-faq__item:first-child { border-top: 0; }
.svc-faq__q, .svc-faq__a { display: flex; gap: 12px; }
.svc-faq__q { font-size: 17px; font-weight: 700; color: var(--DEF); align-items: baseline; }
.svc-faq__a { font-size: 14px; line-height: 1.8; color: var(--DGRY); margin-top: 10px; align-items: baseline; }
.svc-faq__q::before {content: "Q";color: var(--ACC);font-weight: 700;font-size: 18px;flex: none;}
.svc-faq__a::before {content: "A";color: var(--MAIN);font-weight: 700;font-size: 18px;flex: none;}

/* レスポンシブ */
@media (max-width: 992px) {
  .svc-bigcard { flex-direction: column; align-items: stretch; gap: 32px; padding: 36px; }
  .svc-bigcard__fig { min-height: 0; aspect-ratio: 16 / 10; }
  .svc-flow { flex-direction: column; gap: 40px; }
  .svc-flow__step + .svc-flow__step::before {top: -32px;left: 50%;transform: translateX(-50%);width: 50px;height: 15px;clip-path: polygon(0 0, 100% 0, 50% 100%);}
}
@media (max-width: 900px) {
  .svc-intro__row { flex-direction: column; align-items: stretch; gap: 24px; padding: 48px 0; min-height: 0; }
  .svc-intro__body { flex: none; }
  .svc-intro__fig { margin: 0 calc((100% - 100vw) / 2) 0 0; height: 260px; }
  .svc-intro__fig img { position: static; height: 100%; width: 100%; object-fit: contain; object-position: right center; transform: none; }
  .svc-intro__band { top: 0; bottom: 0; }
}
@media (max-width: 768px) {
  .svc-sec { padding: 48px 0; }
  .svc-grid2 { grid-template-columns: 1fr; gap: 24px; }
  .svc-box { padding: 28px 20px; }
  .svc-faq { padding: 20px 24px; }
  .svc-btn { width: 100%; }
}

/* 事業内容ページのCTA（このCSSは当ページ専用読込のためこのページのみ適用） */
.dlb_contact_column.py-3.py-lg-5.bg-color-01 { margin-top: 0; }