/* ==========================================================================
   建設・リフォーム・住宅会社向けページ（page-construction.php）
   service-pages.css を土台に、このページ固有の部品だけを追加する
   ========================================================================== */

/* ---------- Hero ---------- */
body.service-construction .service-hero::before{
  content:"SITE";
  top:auto;bottom:-.2em;right:-.03em;
  font-size:clamp(220px,27vw,420px);
  letter-spacing:-.06em;
}
body.service-construction .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:56px;
  align-items:center;
  min-height:0;
  padding:96px 0 104px;
}
body.service-construction .hero-grid>div:first-child{width:auto;padding:0}
body.service-construction .service-hero h1{
  margin-top:14px;
  font-size:clamp(40px,4.7vw,62px);
  line-height:1.24;
}
body.service-construction .hero-answer,
body.service-construction .hero-meta{width:100%;max-width:580px}

.cx-eyebrow-ja{
  margin-top:18px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--soft);
}

/* ---------- Hero visual: 工程表（AIが下書き → 人が確認） ---------- */
.cx-board{
  position:relative;z-index:2;
  background:#fff;
  border:1px solid var(--line-dark);
  border-left:10px solid var(--orange);
  box-shadow:18px 18px 0 rgba(20,27,43,.06);
}
.cx-board__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;background:var(--ink);color:#fff;
}
.cx-board__head .en{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--orange-light)}
.cx-board__head strong{font-size:14px;letter-spacing:.02em}
.cx-board__rows{
  list-style:none;
  padding:8px 22px 4px;
  /* 工程表の縦罫 */
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(20,27,43,.07) calc(20% - 1px) 20%);
  background-position:0 0;
}
.cx-board__rows li{
  display:grid;grid-template-columns:128px 1fr;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px dashed var(--line-dark);
}
.cx-board__rows li:last-child{border-bottom:0}
.cx-board__task{font-size:13px;font-weight:800;line-height:1.5}
.cx-board__bar{display:flex;gap:3px;min-width:0}
.cx-board__bar i{
  display:block;min-width:0;
  padding:8px 10px;
  font-style:normal;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  transform-origin:left center;
}
.cx-board__bar .ai{flex:1.35 1 0;background:var(--orange);color:#fff}
.cx-board__bar .hu{flex:1 1 0;background:#fff;color:var(--ink);border:1px solid var(--ink)}
.cx-board__foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 22px 46px;border-top:1px solid var(--line);
  font-size:11px;color:var(--soft);
}
.cx-key{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;font:800 10px/1 'Montserrat',sans-serif}
.cx-key.ai{background:var(--orange);color:#fff}
.cx-key.hu{border:1px solid var(--ink);color:var(--ink);font-family:'Noto Sans JP',sans-serif}
.cx-board .visual-note{left:auto;right:-1px;bottom:-1px}

/* 工程バーが順に引かれる（初回表示のみ） */
@media (prefers-reduced-motion:no-preference){
  .cx-board__bar i{animation:cx-draw .7s cubic-bezier(.2,.7,.2,1) both}
  .cx-board__rows li:nth-child(1) i{animation-delay:.15s}
  .cx-board__rows li:nth-child(2) i{animation-delay:.3s}
  .cx-board__rows li:nth-child(3) i{animation-delay:.45s}
  .cx-board__rows li:nth-child(4) i{animation-delay:.6s}
  .cx-board__rows li:nth-child(1) i+i{animation-delay:.35s}
  .cx-board__rows li:nth-child(2) i+i{animation-delay:.5s}
  .cx-board__rows li:nth-child(3) i+i{animation-delay:.65s}
  .cx-board__rows li:nth-child(4) i+i{animation-delay:.8s}
}
@keyframes cx-draw{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}

/* ---------- 共感ブロックの補足 ---------- */
.cx-insight{
  max-width:860px;margin:48px auto 0;
  padding:26px 30px;
  background:var(--orange-pale);
  border-left:4px solid var(--orange);
}
.cx-insight p{font-size:14.5px;line-height:2;color:#344054}
.cx-insight strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(242,85,34,.22) 62%)}

/* ---------- 3本柱 ---------- */
.cx-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.cx-pillar{padding:40px 32px 42px;background:transparent}
.cx-pillar+.cx-pillar{border-left:1px solid var(--line-dark)}
.cx-pillar .en{font-size:9.5px;font-weight:800;color:var(--orange);letter-spacing:.14em}
.cx-pillar h3{margin-top:16px;font-size:22px;line-height:1.45;letter-spacing:-.02em}
.cx-pillar__lead{margin:10px 0 22px;font-size:13.5px;line-height:1.9;color:var(--soft)}
.cx-pillar .check-list li{font-size:13.5px}
.cx-pillar__note{margin-top:20px;padding-top:14px;border-top:1px dashed var(--line-dark);font-size:12px;color:var(--soft)}

/* ---------- 制度テーブル ---------- */
.cx-scheme{border-top:2px solid var(--ink)}
.cx-scheme__row{
  display:grid;grid-template-columns:200px minmax(0,1.1fr) minmax(0,1.3fr);gap:28px;align-items:center;
  padding:26px 12px;border-bottom:1px solid var(--line-dark);
}
.cx-scheme__row--head{
  padding:14px 12px;
  font:700 11px/1.4 'Noto Sans JP',sans-serif;letter-spacing:.08em;color:var(--soft);
}
.cx-scheme__scene{
  justify-self:start;
  padding:6px 10px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:700;line-height:1.5;
}
.cx-scheme__name{font-size:16px;font-weight:800;line-height:1.55}
.cx-scheme__name small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--soft)}
.cx-scheme__body{font-size:14px;line-height:1.85;color:#344054}
.cx-scheme__body b{color:var(--orange);font-size:18px;font-weight:800;margin-inline:2px}
.cx-scheme__foot{display:grid;justify-items:start;gap:12px;margin-top:30px}
.cx-scheme__foot p{font-size:14px}
.cx-scheme__foot .cx-note{font-size:12px;color:var(--muted)}
.cx-scheme__foot .button{margin-top:8px}

/* ---------- 90日の進め方（3段） ---------- */
.process.cx-process{grid-template-columns:repeat(3,1fr)}

/* ---------- CTA ---------- */
.cta-meta a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  body.service-construction .hero-grid{grid-template-columns:1fr;gap:48px;padding:80px 0 88px}
  body.service-construction .service-hero h1{font-size:clamp(40px,7vw,58px)}
  .cx-board{max-width:640px}
  .cx-pillars{grid-template-columns:1fr}
  .cx-pillar+.cx-pillar{border-left:0;border-top:1px solid var(--line-dark)}
  .cx-scheme__row{grid-template-columns:170px 1fr;gap:10px 22px}
  .cx-scheme__row--head span:last-child{display:none}
  .cx-scheme__body{grid-column:2}
  .process.cx-process{grid-template-columns:1fr 1fr 1fr}
}

@media(max-width:680px){
  body.service-construction .hero-grid{padding:56px 0 64px;gap:40px}
  body.service-construction .hero-grid>div:first-child{text-align:center}
  body.service-construction .service-hero h1{font-size:clamp(30px,9vw,36px);line-height:1.3}
  .cx-eyebrow-ja{font-size:12px}
  .cx-board{border-left-width:6px;box-shadow:10px 10px 0 rgba(20,27,43,.06)}
  .cx-board__head,.cx-board__rows,.cx-board__foot{padding-left:16px;padding-right:16px}
  .cx-board__rows li{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .cx-board .visual-note{position:static;display:block;margin:0}
  .cx-board__foot{padding-bottom:14px}

  .cx-insight{margin-top:36px;padding:20px 20px}
  .cx-insight p{font-size:13.5px}
  .cx-pillar{padding:30px 6px}
  .cx-pillar h3{font-size:20px}

  .cx-scheme__row--head{display:none}
  .cx-scheme__row{grid-template-columns:1fr;gap:8px;padding:22px 4px}
  .cx-scheme__body{grid-column:auto}
  .cx-scheme__foot .button{width:100%}

  .process.cx-process{grid-template-columns:1fr}
}

/* ---------- 当社では、こう回っています ---------- */
body.service-construction #our-practice .deliverable p b{color:var(--ink)}
.cx-practice-more{margin-top:36px;text-align:center}

/* ==========================================================================
   画像なしの1カラムHero（料金 /price/・当社の実物 /our-practice/）
   ========================================================================== */
body.service-simple-hero .hero-grid{grid-template-columns:1fr;padding:88px 0 80px}
body.service-simple-hero .hero-answer,
body.service-simple-hero .hero-meta{max-width:720px}
body.service-price .service-hero::before{content:"PRICE"}
body.service-practice .service-hero::before{content:"OURS"}
body.service-medical .service-hero::before{content:"CARE"}

/* 料金表：金額列 */
body.service-price .cx-scheme__body b{font-size:17px;margin:0}

/* 当社の実物：業務ブロック */
.pr-item__tool{margin-top:6px;font-size:12px!important;font-weight:700;color:var(--orange)!important}
.pr-item .check-list li{font-size:13.5px}
.pr-item__yours{margin-top:16px!important;padding-top:12px;border-top:1px dashed var(--line-dark);font-size:13px!important;color:#344054!important}
.pr-item__yours b{color:var(--ink)}
.pr-item__shot{margin:0 0 18px;border:1px solid var(--line-dark)}
.pr-table .cx-scheme__body a{margin-left:8px;font-size:12px;color:var(--soft);text-decoration:underline;text-underline-offset:3px}

@media(max-width:680px){
  body.service-simple-hero .hero-grid{padding:56px 0 56px}
  .pr-item>div{grid-column:2}
}

/* H1先頭の検索キーワード行（業種名＋AI導入・業務効率化） */
.service-hero h1 .cx-h1-kw{display:block;margin-bottom:14px;color:var(--ink);font-size:clamp(14px,1.3vw,17px);font-weight:800;line-height:1.6;letter-spacing:.02em}
@media(max-width:680px){.service-hero h1 .cx-h1-kw{margin-bottom:10px;font-size:13px;letter-spacing:0}}