/* ============================================================
   利用環境チェックチュートリアル スタイル
   設計方針(2026-06-13 改訂):
   - JR東海コーポレートの濃紺=骨格(ヘッダー/ステッパー)で公式感・安心感
   - 推し旅のオレンジ=「進む」アクションだけに集中(次の操作が一目で分かる)
   - 選択肢ボタンは中立・対等な見た目にし、進むボタンと役割を分ける
   - 10〜60代が迷わない可読性最優先(ボタン52px以上・本文16px以上)
   - 色だけに頼らずアイコン併用(アクセシビリティ)
   ============================================================ */

:root {
  /* JR東海本サイトの配色(ダークグレー + JRオレジ #ee7800)に準拠 */
  --bg: #f1efed;          /* 画面の地。白パネルを浮かせるほんのり暖色のグレー */
  --surface: #ffffff;
  --ink: #2b2b2b;         /* JRダークグレー。見出し・本文・骨格・進むボタン */
  --ink-soft: #5c5c5c;
  --muted: #8c8c8c;
  --line: #e4e2e0;
  --accent: #ee7800;      /* JRオレンジ。アクション/選択中の強調・進捗表示 */
  --accent-press: #cc6600;
  --accent-soft: #fcefe0;
  --ink-press: #141414;   /* ダークグレーの押下色。「進む」ボタン用 */
  --disabled: #c2c2c2;    /* 無効ボタン */
  --ok: #1f7a3d;
  --ok-bg: #e9f5ec;
  --warn: #9a6a00;
  --warn-bg: #fbf3e0;
  --warn-border: #e6c878;
  --ng: #b3261e;
  --ng-bg: #fbeceb;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* hidden属性はどんなdisplay指定(flex等)よりも優先して非表示にする */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* サイト共通ナビ(#mainHeader: position:fixed / 高さ約0.55rem ※navi_v2.cssのrem基準)の分だけ下げる */
  padding-top: 0.55rem;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
}

p { margin: 0 0 12px; }
strong { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ヘッダー ---------- */
.ec-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.ec-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  max-width: 560px;
  margin: 0 auto;
}
.ec-header-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* ---------- ステッパー(5段・常時表示) ---------- */
/* display/width は共通ナビ(navi_v2.css)の要素セレクタ nav{display:flex;width:98%}
   の影響を打ち消すために明示する */
.ec-progress {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 8px 14px;
}
.ec-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}
.ec-step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* ノード間をつなぐ線(各ステップの左半分・右半分を線で描く) */
.ec-step::before,
.ec-step::after {
  content: "";
  position: absolute;
  top: 15px;            /* ドット中心の高さ */
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.ec-step::before { left: 0; right: 50%; }
.ec-step::after  { left: 50%; right: 0; }
.ec-step:first-child::before { display: none; }
.ec-step:last-child::after { display: none; }
/* 完了済みまでの線はアクセント色で満ちる */
.ec-step.is-done::before,
.ec-step.is-done::after,
.ec-step.is-current::before { background: var(--accent); }

.ec-step-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ec-step-dot svg { width: 16px; height: 16px; }

/* 未来(これから) */
.ec-step.is-upcoming .ec-step-dot { background: var(--surface); border-color: var(--line); color: var(--muted); }
.ec-step.is-upcoming .ec-step-label { color: var(--muted); }

/* 完了 */
.ec-step.is-done .ec-step-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
/* 完了の右上に小さなチェックバッジ */
.ec-step.is-done .ec-step-dot::after {
  content: "✓";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 10px; line-height: 15px;
  border: 1.5px solid var(--surface);
}
.ec-step.is-done .ec-step-label { color: var(--ink-soft); }

/* 現在地(大きく・アクセント色・リング) */
.ec-step.is-current .ec-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.28);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.ec-step.is-current .ec-step-label { color: var(--accent-press); font-weight: 700; }

.ec-step-label {
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* ---------- 画面・フェーズの切り替えアニメーション ----------
   hidden が外れて表示された瞬間にフェード+軽いスライドで入る。
   (表示切り替えのロジックは変えず、見た目だけ滑らかにする) */
.ec-screen { animation: ec-screen-in 0.3s ease both; }
.ec-screen[hidden] { display: none; animation: none; }
@keyframes ec-screen-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.ec-phase { animation: ec-phase-in 0.25s ease both; }
.ec-phase[hidden] { display: none; animation: none; }
@keyframes ec-phase-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 動きを減らす設定の端末ではアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .ec-screen, .ec-phase { animation: none; }
}

/* ---------- メイン ---------- */
.ec-main {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  min-height: calc(100vh - 116px);
  padding: 22px 18px 40px;
}
.ec-h1 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.ec-note { font-size: 14px; color: var(--ink-soft); }

/* ---------- ボタン共通 ---------- */
.ec-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 8px;
}
/* JR東海サイトに倣う: 角丸を強めた pill 型 + 内容に応じた左アイコン +
   右端のオレンジ円形矢印。選択肢(ec-choice: 控えめな角丸 + ○マーカー)と
   形状ではっきり区別する。 */
.ec-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 9999px;    /* pill 型(JR流の強い角丸) */
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* ボタン左の内容アイコン(FontAwesome) */
.ec-btn .fas { font-size: 18px; line-height: 1; }

/* (1) 進むボタン: JRダークグレーの塗り(本サイトの「検索する」ボタンに準拠) */
.ec-btn-primary {
  background: var(--ink);
  border: 2px solid var(--ink);
  color: #fff;
  box-shadow: 0 3px 0 var(--ink-press);
}
.ec-btn-primary:active { background: var(--ink-press); transform: translateY(2px); box-shadow: none; }
/* 選択肢が選ばれるまで押せない状態 */
.ec-btn-primary[disabled] {
  background: var(--disabled);
  border-color: var(--disabled);
  box-shadow: none;
  cursor: default;
}
.ec-btn-primary[disabled]:active { transform: none; }

/* (2) 補助ナビ: 白地にオレンジ枠(JR本サイトの「きっぷのルール」等の白ボタンに準拠) */
.ec-btn-secondary {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--ink);
}
.ec-btn-secondary:active { background: var(--accent-soft); }

/* (3) 補助リンク調: スキップ・あとで・キャンセル。主張は最小(pill・矢印なし) */
.ec-btn-ghost {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--radius);
}
.ec-btn-ghost:active { color: var(--ink); }

/* ---------- 選択ボタン(質問への回答): 進むボタンと別物 ---------- */
/* 左寄せ・○マーカー付き・全選択肢が対等の重み。CTAには見せない */
.ec-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* 先頭の選択マーカー(ラジオ風の丸) */
.ec-choice::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--surface);
}
.ec-choice:active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ec-choice:active::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--accent);
}
/* 選択済み(押した選択肢が分かるように保持する) */
.ec-choice.is-selected {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
  color: var(--accent-press);
}
.ec-choice.is-selected::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;   /* ラジオ風: 縁と中心をオレンジ、間に白の輪 */
}

/* ---------- カード・バナー ---------- */
.ec-warn-card {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.ec-warn-card ul { margin: 8px 0 4px; padding-left: 20px; }
.ec-warn-card li { margin-bottom: 4px; }
/* 強めの警告カード(推奨外ブラウザなど、はっきり伝えたいもの) */
.ec-alert-card {
  background: var(--ng-bg);
  border: 2px solid var(--ng);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 15px;
  color: var(--ink);
}
.ec-alert-card .ec-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ng);
}
.ec-alert-card .ec-alert-title::before {
  content: "!";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ng);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.ec-info-card {
  background: #eef3fb;
  border: 1px solid #bcd2ee;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.ec-info-card p:first-child { color: var(--ink); }
/* 注意事項アコーディオン(初期は閉じている) */
.ec-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7f6f5;
  margin: 16px 0;
}
.ec-notice > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.ec-notice > summary::-webkit-details-marker { display: none; }
/* 開閉インジケータ(+ / −) */
.ec-notice > summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.ec-notice[open] > summary::after { content: "−"; }
.ec-notice[open] > summary { border-bottom: 1px solid var(--line); }
.ec-notice-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.ec-notice-list li {
  margin-bottom: 9px;
  padding-left: 1.2em;
  text-indent: -1.2em;   /* 先頭の※をぶら下げる */
}
.ec-notice-list li:last-child { margin-bottom: 0; }
.ec-notice-list li::before { content: "※"; }
.ec-notice-list a { color: #0b62a4; text-underline-offset: 2px; word-break: break-all; }

/* 結果バナー(アイコン+文。色だけに頼らない) */
.ec-result-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 15px;
}
.ec-result-banner::before {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px; line-height: 24px;
  text-align: center;
}
.ec-result-banner.ec-ok { background: var(--ok-bg); color: var(--ok); }
.ec-result-banner.ec-ok::before { content: "✓"; background: var(--ok); }
.ec-result-banner.ec-ng { background: var(--ng-bg); color: var(--ng); }
.ec-result-banner.ec-ng::before { content: "!"; background: var(--ng); }

/* ---------- ローディング ---------- */
.ec-loading { text-align: center; padding: 28px 0 12px; }
.ec-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ec-spin 0.9s linear infinite;
}
@keyframes ec-spin { to { transform: rotate(360deg); } }

/* ---------- 地図・カメラ・動画 ---------- */
#loc-map { margin: 0 0 16px; }
#loc-map img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
#loc-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* Google Maps JS API 描画用キャンバス(ピン＋精度円)。iframe と同じ見た目に揃える */
#loc-map-canvas {
  display: block;
  width: 100%;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#cam-video,
#av-video {
  width: 100%;
  max-height: 50vh;
  background: #000;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
}

/* ---------- 設定案内パネル ---------- */
.ec-guide {
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 16px 0;
  font-size: 14px;
}
.ec-guide h2 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.ec-guide h3 { font-size: 14px; margin: 16px 0 4px; color: var(--accent-press); }
.ec-guide ol { margin: 8px 0; padding-left: 22px; }
.ec-guide li { margin-bottom: 6px; }
.ec-guide a { color: #0b62a4; word-break: break-all; }
.ec-guide .ec-guide-reload {
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 12px;
  font-weight: 700;
}
.ec-guide-switch { margin-top: 12px; font-size: 13px; }
.ec-guide-switch button {
  background: none;
  border: none;
  color: #0b62a4;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px 4px 0;
  font-family: inherit;
}

/* ---------- 結果一覧 ---------- */
.ec-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 16px 0;
  overflow: hidden;
}
.ec-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.ec-summary-row:last-child { border-bottom: none; }
.ec-summary-name { font-weight: 600; }
.ec-summary-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
/* 状態アイコン(色だけに頼らない) */
.ec-summary-icon {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px; line-height: 20px;
  text-align: center;
}
.st-ok   { color: var(--ok); }
.st-ok   .ec-summary-icon { background: var(--ok); }
.st-warn { color: var(--warn); }
.st-warn .ec-summary-icon { background: var(--warn); }
.st-ng   { color: var(--ng); }
.st-ng   .ec-summary-icon { background: var(--ng); }
.st-skip { color: var(--muted); }
.st-skip .ec-summary-icon { background: var(--muted); }

/* ---------- それでもうまくいかないとき(S5・アコーディオン) ----------
   長いので初期は閉じる。自己解決ファースト: 障害情報+FAQを主導線にし、窓口は最後段・控えめに置く */
.ec-help {
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink);
}
/* 開閉ヘッダー(注意事項アコーディオンと同じ +/− 方式) */
.ec-help > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.ec-help > summary::-webkit-details-marker { display: none; }
.ec-help > summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.ec-help[open] > summary::after { content: "−"; }
.ec-help[open] > summary { border-bottom: 1px solid var(--line); }
.ec-help-body { padding: 14px 16px 16px; }
.ec-help-list {
  margin: 8px 0 14px;
  padding-left: 20px;
  line-height: 1.85;
}
.ec-help-list li { margin-bottom: 6px; }
/* FAQ ボタン(自己解決の主導線)はアイコン併記の補助ボタン形状を流用 */
.ec-help .ec-btn { text-decoration: none; }

/* 窓口は最後段・控えめ。区切り線で「最後の手段」であることを視覚的に示す */
.ec-help-contact {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ec-help-contact .ec-note { margin-bottom: 8px; }
.ec-diag-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 2px;
}
.ec-diag-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 10px;
}

.ec-diag-code-small {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 10px;
}


.ec-contact-link {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 詳しい情報 ---------- */
.ec-details {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.ec-details summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--ink-soft);
}
.ec-details table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.ec-details td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  word-break: break-all;
}