/* =====================================================================
   TOPのメインビジュアル（STEP 9〜12。STEP 13 でトップページにも反映）
   - 読み込むのは、トップページ（PC用・スマホ用の画像を両方設定しているとき）と、テンプレート「TOP改善案（比較用プレビュー）」のページだけ
   - 部品は parts/top-hero.php。新しいクラスは hv2- / hv3- / preview-bar（比較用の帯。TOP改善案のページだけに出る）で始める
   ===================================================================== */

/* 比較用の帯（サイトのデザインの外） */
.preview-bar{background:#22303f;color:#fff;font-size:13px;line-height:1.6;padding:8px max(16px,env(safe-area-inset-left,0px));text-align:center}
.preview-bar b{color:#ffd9b5}
.preview-bar a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}

/* ---------- メインビジュアル（改善案） ---------- */
.hv2{background:radial-gradient(110% 70% at 100% 0%,var(--orange-pale) 0%,rgba(255,241,227,0) 60%),linear-gradient(180deg,var(--cream),#fff 90%);padding:18px 0 32px}
.hv2-in{display:grid;gap:16px}
.hv2-text{display:grid;gap:10px;min-width:0}
.hv2 .chip{font-size:13px}
.hv2 h1{font-size:30px;font-weight:900;line-height:1.38;letter-spacing:.01em;text-wrap:balance}
.hv2 h1 .accent{color:var(--orange-ink)}
.hv2 .lead{font-size:16px;line-height:1.85}

.hv2-media{position:relative;min-width:0}
.hv2-photos{display:grid;gap:8px}
.hv2-photos figure{margin:0;border-radius:18px;overflow:hidden;background:#eee;min-width:0}
.hv2-photos .p1{aspect-ratio:4/3}
.hv2-photos picture{display:block;height:100%}
.hv2-photos img{width:100%;height:100%;object-fit:cover}
.hv2-photos .p2,.hv2-photos .p3{display:none}

/* 写真に添えるスタッフの顔ぶれ */
.hv2-staff{position:absolute;left:10px;bottom:-24px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 16px 6px 8px;box-shadow:0 8px 22px rgba(43,38,33,.16);max-width:calc(100% - 20px)}
.hv2-staff .lts-faces{display:flex;gap:0;grid-template-columns:none}
.hv2-staff .lts-faces li{margin-left:-10px;display:block}
.hv2-staff .lts-faces li:first-child{margin-left:0}
.hv2-staff .lts-faces img{width:40px;height:40px;border:2px solid #fff;box-shadow:none}
.hv2-staff .lts-faces .r,.hv2-staff .lts-faces .n{display:none}
.hv2-staff p{font-size:12px;font-weight:700;line-height:1.4;color:var(--navy)}

/* 相談できる工事・問い合わせ */
.hv2-act{display:grid;gap:12px;margin-top:22px;min-width:0}
.hv2-label{font-size:13px;font-weight:700;color:var(--muted)}
.hv2-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hv2-svc li{display:grid;min-width:0}
.hv2-svc a{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;border-radius:14px;background:#fff;border:1.5px solid var(--line);text-decoration:none;font-weight:700;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.hv2-svc a:hover{border-color:var(--orange)}
.hv2-svc svg{width:26px;height:26px;color:var(--orange);flex:none}
.hv2-svc li:last-child:nth-child(odd){grid-column:1/-1}
.hv2-cta{display:grid;gap:10px;margin-top:4px}
.hv2-cta .btn{min-height:62px;justify-content:flex-start;gap:12px;padding:8px 18px;font-size:18px;text-align:left}
.hv2-cta .btn span{display:grid;line-height:1.3}
.hv2-cta .btn small{font-size:12px}
.hv2-trust{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.hv2-trust li{display:inline-flex;align-items:center;gap:4px}
.hv2-trust svg{width:15px;height:15px;color:var(--orange);flex:none}

/* ---------- 760px以上 ---------- */
@container site (min-width:760px){
  .hv2{padding:30px 0 52px}
  .hv2 h1{font-size:40px}
  .hv2 .lead{font-size:17px}
  .hv2-photos{grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/10}
  .hv2-photos .p1{grid-row:1/3;aspect-ratio:auto}
  .hv2-photos .p2,.hv2-photos .p3{display:block}
  .hv2-staff{left:14px;bottom:14px}
  .hv2-act{margin-top:6px}
  .hv2-svc{grid-template-columns:repeat(3,1fr)}
  .hv2-svc li:last-child:nth-child(odd){grid-column:auto}
  .hv2-cta{grid-template-columns:1fr 1fr 1fr}
  .hv2-cta .btn{font-size:16px;padding:8px 14px}
}
/* ---------- 1024px以上 ---------- */
@container site (min-width:1024px){
  .hv2{padding:38px 0 44px}
  .hv2-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"text media" "act media";column-gap:48px;row-gap:20px;align-items:start}
  .hv2-text{grid-area:text;align-self:end}
  .hv2-media{grid-area:media;align-self:center}
  .hv2-act{grid-area:act}
  .hv2 h1{font-size:clamp(32px,3.3cqi,44px)}
  .hv2 .lead{font-size:18px}
  .hv2-photos{aspect-ratio:auto;height:540px}
  .hv2-svc{grid-template-columns:repeat(3,1fr)}
  .hv2-svc a{font-size:13px;min-height:52px;padding:6px 10px}
  .hv2-svc svg{width:22px;height:22px}
  .hv2-cta{grid-template-columns:1fr 1fr}
  .hv2-cta .btn-form{grid-column:1/-1}
  .hv2-cta .btn{min-height:60px}
  .hv2-staff{left:18px;bottom:18px}
  .hv2-staff p{font-size:13px}
}

/* =====================================================================
   PC用の横長画像（STEP 10）
   - ページの入力欄「PC用の横長画像」があるときだけ（section に .has-banner）。画面の幅1024px以上だけ表示し、スマホ・タブレットは上の写真3枚のまま
   - 画像は切り抜かない・引き伸ばさない：幅1920pxまでは画面の幅に合わせて縮小（縦横比そのまま）、それより広い画面では1920pxのまま中央
   - 文字は画像の幅を基準に置く（cqi＝画像の幅の1%）ので、どの幅でも人物・手書きの文字・設備写真との位置関係が変わらない
   ===================================================================== */
.hv3-stage{display:none}
@container site (min-width:1024px){
  .hv2.has-banner{padding:0 0 44px}
  .hv2.has-banner .hv3-stage{display:block;position:relative}
  .hv3-frame{position:relative;max-width:1920px;margin:0 auto;container:hv3/inline-size}
  .hv3-frame picture{display:block}
  .hv3-frame img{display:block;width:100%;height:auto}

  /* 見出し：画像の左の空。人物の顔（画像の左から61%〜）と手書きの文字（71%〜）にはかからない */
  .hv3-copy{position:absolute;left:19%;top:13.5%;z-index:1}
  .hv3-copy::before{content:"";position:absolute;inset:-30% -14% -34% -20%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.46) 58%,rgba(255,255,255,0))}
  .hv3-copy .hv3-title{font-family:var(--f-head);font-weight:900;font-size:max(30px,3.1cqi);line-height:1.34;letter-spacing:.03em;color:var(--navy);white-space:nowrap;text-wrap:nowrap;text-shadow:0 0 .4em rgba(255,255,255,.9),0 0 .1em #fff}
  .hv3-copy .hv3-title .accent{color:#d65a00} /* オレンジ（サイトの文字用オレンジ --orange-ink より少し明るく。白いぼかしの上で大きい文字の基準3:1以上） */
  .hv3-copy .hv3-sub{margin-top:max(10px,1.1cqi);font-family:var(--f-body);font-weight:700;font-size:max(15px,1.3cqi);line-height:1.75;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-shadow:0 0 .5em rgba(255,255,255,.95),0 0 .15em #fff}

  /* 画像の下：相談の多い工事（左）と問い合わせ（右）。人物・手書きの文字には重ねない */
  .hv2.has-banner .hv2-text,.hv2.has-banner .hv2-media{display:none}
  .hv2.has-banner .hv2-in{display:block}
  .hv2.has-banner .hv2-act{margin-top:28px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"label ." "svc cta" "trust trust";column-gap:32px;row-gap:10px;align-items:start}
  .hv2.has-banner .hv2-label{grid-area:label}
  .hv2.has-banner .hv2-svc{grid-area:svc}
  .hv2.has-banner .hv2-cta{grid-area:cta;margin-top:0}
  .hv2.has-banner .hv2-trust{grid-area:trust;margin-top:6px}
  .hv2.has-banner .hv2-svc a{font-size:14px;min-height:56px}
}
/* 1920pxより広い画面：画像は1920pxのまま。左右のすき間は、画像の左端・右端の色を上から順にたどったグラデーションでつなぎ、外側ほど白っぽく */
@container site (min-width:1921px){
  .hv2.has-banner .hv3-stage{background:
    linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0) calc(50% - 960px)),
    linear-gradient(270deg,rgba(255,255,255,.5),rgba(255,255,255,0) calc(50% - 960px)),
    linear-gradient(180deg,#e6f1f2 3%,#d3dba0 13%,#c3c79a 25%,#cdd6b0 40%,#c4d6a2 54%,#9db75f 66%,#64883a 80%,#4a6922 96%) left top/50% 100% no-repeat,
    linear-gradient(180deg,#e4d8c6 4%,#d6c8b0 16%,#c2ab8c 32%,#a88e71 50%,#b9a590 66%,#c1b6ab 82%,#b5aca6 96%) right top/50% 100% no-repeat}
  /* 画像の左右の端だけを透明にぼかして、すき間の色となじませる（左は葉が細かいので64px、右は40px） */
  .hv2.has-banner .hv3-frame img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 40px),transparent)}
}

/* =====================================================================
   スマホ用の縦長画像（STEP 11）
   - ページの入力欄「スマホ用の縦長画像」があるときだけ（section に .has-sp）。画面の幅899px以下で表示（760〜899pxの並べ方は下の「タブレット」）
   - picture の media と同じ条件にするため、ここは @media で切り替える
   - 画像は切り抜かない・引き伸ばさない：幅600pxまでは画面の幅いっぱい（縦横比3:4のまま）、601〜759pxでは600pxのまま中央
   - 見出し・補足はPCと同じHTML（.hv3-copy）。位置と大きさは画像の幅を基準（cqi＝画像の幅の1%）にしているので、どの幅でも葉・人物・手書きの文字との位置関係が変わらない
   ===================================================================== */
@media (max-width:899px){
  .hv2.has-sp{padding-top:0}
  .hv2.has-sp .hv3-stage{display:block}
  /* 背景は画像を読み込むまでの仮の色（上は空の青、下は設備写真のベージュ）。読み込み中も見出しが読める */
  /* overflow:hidden … 見出しの後ろの白いぼかし（::before）が画像の右端から少しはみ出し、スマホで横スクロールが出ていたため、画像の枠の中だけにする（STEP 13） */
  .hv2.has-sp .hv3-frame{position:relative;max-width:600px;margin:0 auto;container:hv3/inline-size;overflow:hidden;background:linear-gradient(180deg,#5cb8fd 0%,#9ad3fc 36%,#e9e4dc 42%,#e2d5c4 100%)}
  .hv2.has-sp .hv3-frame picture{display:block}
  .hv2.has-sp .hv3-frame img{display:block;width:100%;height:auto}

  /* 見出し：画像の中ほどの空。左上の葉（上から14%までは左から40%、その下は左から20%まで）と、右の木（左から86%・上から32%〜）を避け、下の設備写真（上から40%〜）の手前で終わる */
  .hv2.has-sp .hv3-copy{position:absolute;left:24.5%;top:14%;z-index:1}
  .hv2.has-sp .hv3-copy::before{content:"";position:absolute;inset:-26% -8% -22% -16%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.46) 58%,rgba(255,255,255,0))}
  .hv2.has-sp .hv3-title{font-family:var(--f-head);font-weight:900;font-size:6.4cqi;line-height:1.32;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-wrap:nowrap;text-shadow:0 0 .4em rgba(255,255,255,.9),0 0 .1em #fff}
  .hv2.has-sp .hv3-title .accent{color:#d65a00}
  .hv2.has-sp .hv3-sub{margin-top:2.2cqi;font-family:var(--f-body);font-weight:700;font-size:3.6cqi;line-height:1.65;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-shadow:0 0 .5em rgba(255,255,255,.95),0 0 .15em #fff}

  /* 画像の下：前と同じ「ご相談の多い工事」と問い合わせ。前の写真と見出しは出さない（見出しは画像の上の1つだけ） */
  .hv2.has-sp .hv2-text,.hv2.has-sp .hv2-media{display:none}
  .hv2.has-sp .hv2-act{margin-top:18px}
}

/* =====================================================================
   タブレット（STEP 12）。.has-sp のときだけ。旧ヒーロー（写真と前の見出し）は出さない
   - 760〜899px（タブレットの縦向き）：スマホ用の縦長画像を画面の左半分に（見出しの位置・大きさはスマホと同じ比率）、右半分に「ご相談の多い工事」と問い合わせ
   - 900〜1023px：PC用の横長画像（PCと同じ見た目。見出しの最小30pxだけ外し、画像の幅に合わせて小さくする＝人物の顔にかからない）
   - 1024px以上はPC（STEP 10）のまま。ここでは変えない
   ===================================================================== */
@media (min-width:760px) and (max-width:899px){
  .hv2.has-sp{display:grid;grid-template-columns:50% minmax(0,1fr);align-items:center;padding:24px 0 28px}
  .hv2.has-sp .hv3-frame{max-width:none}
  .hv2.has-sp .hv2-in{display:block;max-width:none;margin:0;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 28px}
  .hv2.has-sp .hv2-act{margin-top:0}
  .hv2.has-sp .hv2-svc{grid-template-columns:1fr 1fr}
  .hv2.has-sp .hv2-cta{grid-template-columns:1fr}
  .hv2.has-sp .hv2-cta .btn{font-size:18px;padding:8px 18px}
}
/* picture の切り替え（900px）は画面の幅、PCの見た目（1024px）はサイトの枠の幅で決まるので、両方で範囲を決める（スクロールバーのある画面でも抜けがないように） */
@media (min-width:900px){
  @container site (width < 1024px){
    .hv2.has-sp{padding:0 0 44px}
    .hv2.has-sp .hv3-stage{display:block;position:relative}
    .hv2.has-sp .hv3-frame{position:relative;container:hv3/inline-size}
    .hv2.has-sp .hv3-frame picture{display:block}
    .hv2.has-sp .hv3-frame img{display:block;width:100%;height:auto}
    .hv2.has-sp .hv3-copy{position:absolute;left:19%;top:13.5%;z-index:1}
    .hv2.has-sp .hv3-copy::before{content:"";position:absolute;inset:-30% -14% -34% -20%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.46) 58%,rgba(255,255,255,0))}
    .hv2.has-sp .hv3-title{font-family:var(--f-head);font-weight:900;font-size:3.1cqi;line-height:1.34;letter-spacing:.03em;color:var(--navy);white-space:nowrap;text-wrap:nowrap;text-shadow:0 0 .4em rgba(255,255,255,.9),0 0 .1em #fff}
    .hv2.has-sp .hv3-title .accent{color:#d65a00}
    .hv2.has-sp .hv3-sub{margin-top:max(10px,1.1cqi);font-family:var(--f-body);font-weight:700;font-size:max(15px,1.3cqi);line-height:1.75;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-shadow:0 0 .5em rgba(255,255,255,.95),0 0 .15em #fff}
    .hv2.has-sp .hv2-text,.hv2.has-sp .hv2-media{display:none}
    .hv2.has-sp .hv2-in{display:block}
    .hv2.has-sp .hv2-act{margin-top:24px}
  }
}