/* =========================================================
   ヒーロー：左に言葉、右に暮らしのイメージを独立して配置
   index.html / index-a.html で共通利用
   ========================================================= */

/* 見出しを独立した背景に置くため、ヘッダーも通常の濃色表示にする */
.js .site-header:not(.is-scrolled):not(.menu-open){color:var(--ink)}
.js .site-header:not(.is-scrolled):not(.menu-open)::before{opacity:1}
.hero-full :focus-visible{outline-color:var(--accent-ink)}

/* 高さを画面に固定せず、同じグリッド内で文章と画像を中央揃えにする（文章欄55：写真45） */
.hero-full{padding:calc(var(--header-h) + clamp(40px,4.5vw,68px)) 0 clamp(40px,4.5vw,64px);color:var(--ink);background:var(--paper)}
.hero-full-inner{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);grid-template-areas:"copy media" "foot foot";align-items:center;column-gap:clamp(32px,4vw,56px);row-gap:36px}
.hero-full-copy{grid-area:copy;min-width:0;container-type:inline-size}
.hero-full .eyebrow{font-size:.875rem;letter-spacing:.08em;line-height:1.6;gap:10px;margin-bottom:20px;color:var(--ink-3)}
.hero-full .eyebrow::before{width:20px;flex:none}
.hero-full h1{font-size:clamp(1.5rem,2.7vw,2.25rem);font-weight:600;line-height:1.55;letter-spacing:.01em;word-break:normal;margin-bottom:10px}
/* 「ホームオートメーションを」は途中で折り返さない（狭い画面では「理想の」の後で改行） */
.hero-full h1 .nowrap{white-space:nowrap}
@supports (font-size:1cqi){
  /* 文章の列幅に合わせ、2行目「理想のホームオートメーションを」（15文字）が1行に収まる大きさにする */
  .hero-full h1{font-size:clamp(1.25rem,6.5cqi,2.75rem)}
}
.hero-full-subtitle{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.375rem);font-weight:500;line-height:1.7;letter-spacing:.04em;margin-bottom:24px}
.hero-full-intro{font-size:1rem;line-height:1.9;color:var(--muted);max-width:32em;margin-bottom:28px}
.hero-full .hero-actions{align-items:center;gap:12px 22px}
.hero-full .hero-actions .btn{max-width:100%;padding:14px 22px;letter-spacing:.03em;white-space:normal}
.hero-full .hero-actions .btn--accent:hover{background:var(--accent-strong)}
.hero-service-link{font-size:.875rem;line-height:1.6;letter-spacing:.02em;min-height:44px;align-items:center;padding:8px 0;border-bottom-color:var(--line)}
.hero-service-link:hover{gap:10px}
/* 画像は自然な高さで全体を表示。枠、影、フィルター、拡大効果は使わない */
.hero-full-media{grid-area:media;min-width:0;margin:0}
.hero-full-media img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.hero-full-caption{margin-top:10px;font-size:.6875rem;line-height:1.6;letter-spacing:.04em;color:var(--muted);text-align:right}
.hero-full-foot{grid-area:foot;padding-top:20px;border-top:1px solid var(--line)}
.hero-full-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;font-size:.875rem;line-height:1.8;color:var(--muted)}
.hero-full-meta li{display:flex;align-items:center;gap:8px;min-width:0}
.hero-full-meta .icon{width:18px;height:18px;color:var(--ink-3)}

@media (max-width:60rem){
  .hero-full-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "media" "foot";row-gap:28px}
  .hero-full-copy{width:100%;max-width:40rem}
  .hero-full-subtitle{font-size:1.125rem}
}

@media (max-width:480px){
  .hero-full .hero-actions{align-items:flex-start;gap:10px}
  .hero-full .hero-actions .btn{width:100%}
  .hero-full-meta{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-full-caption{font-size:.6875rem}
}

/* ---------------------------------------------------------
   案Aだけの変更：カーソルを当てたときの動きをなくす
   （style.css / script.js は index.html と共通のため、ここで打ち消す）
   --------------------------------------------------------- */
/* 連携できる設備の例：枠線が黒くなる動き */
.equip,.equip:hover{transition:none;transform:none}
.equip:hover{border-color:var(--line)}
.equip--more:hover{border-color:#b3c0b8}
/* 対応するプロトコル：一覧の枠線と、図の同じプロトコルが光る動き */
.proto,.proto:hover{transition:none}
.proto:hover{border-color:var(--line);box-shadow:none}
.pv-node.is-on rect{fill:var(--dark-2);stroke-opacity:.5}
.pv-node.is-on text{fill:var(--white)}
.pv-flow.is-on{stroke-opacity:.55;stroke-width:1.5}
/* サービスの5ステップ：丸いアイコンがライム色になる動き */
.step-dot{transition:none}
.step:hover .step-dot{background:var(--dark);color:var(--accent)}

/* 「インターホン/ドアロック」をスマホの3列表示でも枠内に収める */
@media (max-width:760px){
  .equip{padding:11px 8px}
  .equip .kw{white-space:nowrap}
}