/* ==========================================================
   Wi-Fi調査ページ（wifi.html）専用のデザイン
   ----------------------------------------------------------
   共通の色・ヘッダー・フッター・ボタンは style.css を使い、
   このファイルでは wifi.html だけの見せ方を定義しています。
   クラス名はすべて「wf-」で始まるので、ほかのページには影響しません。
   ========================================================== */
:root {
  /* 電波の強さを表すヒートマップの色（強い → 弱い） */
  --hm-strong: #2e9e5b;
  --hm-good: #9ccc3c;
  --hm-fair: #f2c230;
  --hm-weak: #ef7d32;
  --hm-none: #d9534f;
  --wf-rule: #d6e2f0;
  --wf-paper: #fbfcfe;   /* 間取り図の紙の色 */
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-nowrap { white-space: nowrap; }

/* 日本語を文節で改行する（Chrome・Edge） */
.wf-hero__lead, .wf-head p, .wf-body p, .wf-body li, .wf-map__readout { word-break: auto-phrase; }

/* ---------- ページ上部：見出し＋ヒートマップ ---------- */
.wf-hero { background: linear-gradient(180deg, var(--sky), #fff); }
.wf-hero__inner {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center;
  padding-top: 60px; padding-bottom: 64px;
}
.wf-hero h1 { font-size: clamp(30px, 4.8vw, 46px); font-weight: 900; color: var(--navy); line-height: 1.3; }
.wf-hero h1 small { display: block; font-size: .5em; font-weight: 700; color: var(--blue); margin-top: 8px; letter-spacing: .02em; }
.wf-hero__lead { margin-top: 18px; font-size: clamp(16px, 2vw, 18px); max-width: 30em; }
.wf-hero__meta { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.wf-hero__meta span { white-space: nowrap; }
.wf-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* 間取り図＋ヒートマップ */
.wf-map { margin: 0; background: #fff; border: 1px solid var(--wf-rule); border-radius: 10px; padding: 18px 18px 14px; box-shadow: 0 16px 36px rgba(11, 42, 91, .10); }
.wf-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wf-map__title { font-weight: 700; color: var(--navy); font-size: 15px; }
.wf-toggle { display: inline-flex; background: var(--sky); border: 1px solid var(--wf-rule); border-radius: 999px; padding: 3px; }
.wf-toggle button {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted);
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
}
.wf-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.wf-toggle button:focus-visible { outline: 3px solid #ffb366; outline-offset: 2px; }
.wf-map svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.wf-layer { transition: opacity .45s ease; }
.wf-map[data-state="before"] .wf-layer--after,
.wf-map[data-state="after"] .wf-layer--before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wf-layer { transition: none; } }
.wf-map__readout { margin-top: 10px; font-size: 14px; color: var(--ink); min-height: 3.2em; }
.wf-map__readout strong { color: var(--navy); }
.wf-legend { margin-top: 10px; }
.wf-legend__bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--hm-strong), var(--hm-good) 30%, var(--hm-fair) 55%, var(--hm-weak) 78%, var(--hm-none)); }
.wf-legend__labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.wf-map__note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- 本文：読み物のような1列 ---------- */
.wf-sec { padding: 64px 0; }
.wf-sec + .wf-sec { border-top: 1px solid var(--wf-rule); }
.wf-sec--tint { background: var(--sky); }
.wf-sec--tint + .wf-sec, .wf-sec + .wf-sec--tint { border-top: 0; }
.wf-col { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.wf-head { margin-bottom: 28px; }
.wf-head h2 { font-size: clamp(22px, 3vw, 28px); color: var(--navy); line-height: 1.45; }
.wf-head p { margin-top: 10px; color: var(--muted); }

/* 調査で測るもの：用語と単位の一覧 */
.wf-measure { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; }
.wf-measure > div { padding: 16px 0; border-bottom: 1px solid var(--wf-rule); }
.wf-measure dt { font-weight: 700; color: var(--navy); display: flex; align-items: baseline; gap: 10px; }
.wf-measure dt small { font-weight: 500; font-size: 13px; color: var(--blue); }
.wf-measure dd { margin: 4px 0 0; font-size: 15px; color: var(--muted); }

/* 調査のタイミング：3列の比較 */
.wf-timing { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--wf-rule); border-radius: 10px; background: #fff; overflow: hidden; }
.wf-timing > section { padding: 22px 22px 24px; }
.wf-timing > section + section { border-left: 1px solid var(--wf-rule); }
.wf-timing h3 { font-size: 18px; color: var(--navy); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 3px solid var(--tone, var(--blue)); }
.wf-timing h4 { font-size: 13px; color: var(--muted); font-weight: 700; margin: 14px 0 4px; }
.wf-timing p { font-size: 15px; }

/* よくある原因 */
.wf-causes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.wf-causes li { padding-left: 16px; border-left: 3px solid var(--hm-weak); }
.wf-causes b { display: block; color: var(--navy); margin-bottom: 4px; }
.wf-causes span { font-size: 15px; color: var(--muted); }

/* 周波数帯の比較表 */
.wf-table-wrap { overflow-x: auto; }
.wf-table { width: 100%; min-width: 600px; border-collapse: collapse; table-layout: fixed; background: #fff; font-size: 15px; }
.wf-table th, .wf-table td { padding: 14px 14px; border-bottom: 1px solid var(--wf-rule); text-align: left; vertical-align: top; }
.wf-table thead th { color: var(--navy); font-size: 18px; border-bottom: 2px solid var(--navy); }
.wf-table thead th:first-child { width: 22%; }
.wf-table tbody th { color: var(--muted); font-weight: 500; font-size: 14px; }
.wf-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* 調査の流れ：横に並ぶ工程（スマホでは縦） */
.wf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: wfstep; }
.wf-steps li { position: relative; padding: 0 10px 0 0; }
.wf-steps li::before {
  counter-increment: wfstep; content: counter(wfstep);
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 900; font-size: 15px; position: relative; z-index: 1;
}
.wf-steps li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 34px; right: 0; height: 2px; background: var(--blue); }
.wf-steps strong { display: block; margin-top: 12px; color: var(--navy); font-size: 15px; line-height: 1.45; }
.wf-steps span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.wf-steps li.is-option::before { background: #fff; color: var(--navy); border: 2px dashed var(--navy); }

.wf-area { font-size: 17px; }
.wf-area strong { color: var(--navy); }

/* ---------- 画面幅ごとの調整 ---------- */
@media (max-width: 1100px) {
  .wf-hero__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 52px; }
  .wf-map { max-width: 680px; }
}
@media (max-width: 860px) {
  .wf-timing { grid-template-columns: 1fr; }
  .wf-timing > section + section { border-left: 0; border-top: 1px solid var(--wf-rule); }
  .wf-steps { grid-template-columns: 1fr; gap: 0; }
  .wf-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; padding: 0 0 22px; }
  .wf-steps li::before { grid-row: 1 / span 2; }
  .wf-steps li:not(:last-child)::after { top: 34px; bottom: 0; left: 16px; right: auto; width: 2px; height: auto; }
  .wf-steps strong { margin-top: 5px; }
}
@media (max-width: 600px) {
  .wf-sec { padding: 48px 0; }
  .wf-hero__cta .btn { width: 100%; }
  .wf-map { padding: 14px 12px 12px; }
  .wf-measure, .wf-causes { grid-template-columns: 1fr; }
}