/* ウェビナーROI診断 v1.0 固有スタイル
   ベースは diagnosis.css（診断共通）。ここでは結果画面の
   2ケース比較・月次ハウスリスト推移・出所ラベル・AI適合性など固有部品を定義する。 */

:root {
  --roi-m1: #1957a8;   /* 月1回相当（保守側・主線） */
  --roi-m2: #2e7d5b;   /* 月2回相当 */
  --roi-pos: #1f7a4d;
  --roi-neg: #c0392b;
  --roi-amber: #b06a00;
}

/* ---------- ヒーロー：初年度粗利回収率と総合判定 ---------- */
.roi-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border, #e2e5ea);
  margin-bottom: 8px;
}
.roi-gauge {
  --ratio: 0;
  --roi-accent: var(--roi-m1);
  position: relative;
  width: 168px;
  height: 168px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--roi-accent) calc(var(--ratio) * 1%), rgba(127, 140, 160, 0.16) 0);
  display: grid;
  place-items: center;
}
.roi-gauge.band-recoverable { --roi-accent: var(--roi-pos); }
.roi-gauge.band-marginal    { --roi-accent: var(--roi-amber); }
.roi-gauge.band-unfit,
.roi-gauge.band-unreachable  { --roi-accent: var(--roi-neg); }
.roi-gauge::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--panel-bg, #fff);
}
.roi-gauge-inner { position: relative; z-index: 1; text-align: center; line-height: 1.25; }
.roi-gauge-value { font-size: 40px; font-weight: 700; color: var(--roi-accent); }
.roi-gauge-unit  { font-size: 15px; font-weight: 700; color: var(--roi-accent); margin-left: 2px; }
.roi-gauge-caption { display: block; margin-top: 4px; font-size: 11px; opacity: 0.7; }

.roi-hero-copy { flex: 1; min-width: 260px; }
.roi-hero-copy h2 { margin: 4px 0 8px; }
.roi-hero-message {
  margin-top: 12px;
  padding: 12px 15px;
  border-radius: 8px;
  background: rgba(127, 140, 160, 0.09);
  font-size: 13px;
  line-height: 1.85;
}
.roi-hero-stats { flex: 1; min-width: 240px; display: flex; }
.roi-hero-figure {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 18px 22px; border: 1px solid rgba(25, 87, 168, 0.3);
  background: rgba(25, 87, 168, 0.06); border-radius: 12px; width: 100%;
}
.roi-hero-figure-label { font-size: 12px; opacity: 0.75; }
.roi-hero-figure-value { font-size: 40px; font-weight: 700; color: var(--roi-m1); line-height: 1.05; font-variant-numeric: tabular-nums; }
.roi-hero-figure-sub { font-size: 12px; opacity: 0.82; line-height: 1.7; }

/* ---------- 表 ---------- */
.roi-table-scroll { overflow-x: auto; }
.roi-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.roi-table th,
.roi-table td {
  border: 1px solid var(--border, #e2e5ea);
  padding: 9px 11px;
  text-align: left;
  vertical-align: middle;
}
.roi-table th { background: rgba(127, 140, 160, 0.1); font-weight: 700; }
.roi-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-table tr.is-emphasis { background: rgba(25, 87, 168, 0.07); }
.roi-table tr.is-emphasis td { font-weight: 700; }
.roi-table .roi-reason { font-size: 12px; line-height: 1.6; opacity: 0.85; }

/* ---------- 出所ラベル（§13） ---------- */
.roi-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.roi-badge.client { background: rgba(25, 87, 168, 0.12); color: #1957a8; }
.roi-badge.actual { background: rgba(46, 125, 91, 0.14); color: #1f7a4d; }
.roi-badge.fixed  { background: rgba(90, 100, 115, 0.14); color: #46505f; }
.roi-badge.bench  { background: rgba(122, 58, 154, 0.12); color: #7a3a9a; }
.roi-badge.ai     { background: rgba(0, 128, 128, 0.14); color: #0a6a6a; }
.roi-badge.calc   { background: rgba(60, 70, 85, 0.12); color: #333b47; }
.roi-badge.ref    { background: rgba(176, 106, 0, 0.14); color: #8a5300; }
.roi-legend { margin: 4px 0 0; font-size: 12px; opacity: 0.85; line-height: 2.2; }
.roi-legend .roi-badge { margin-right: 8px; }

/* ---------- 月次ハウスリスト推移チャート ---------- */
.roi-chart-block { margin-top: 20px; }
.roi-chart-block h4 { font-size: 13px; margin: 0 0 8px; }
.roi-chart { width: 100%; }
.roi-chart svg { width: 100%; height: auto; display: block; }
.roi-grid { stroke: rgba(127, 140, 160, 0.25); stroke-width: 1; }
.roi-axis-y { fill: currentColor; opacity: 0.6; font-size: 10px; text-anchor: end; }
.roi-axis-x { fill: currentColor; opacity: 0.6; font-size: 10px; text-anchor: middle; }
.roi-line { stroke-width: 2.5; }
.roi-line.m1, .roi-line.low  { stroke: var(--roi-m1); }
.roi-line.m2, .roi-line.high { stroke: var(--roi-m1); }
.roi-line.low, .roi-line.high { stroke-width: 1.5; opacity: 0.5; }
.roi-band { fill: rgba(25, 87, 168, 0.14); stroke: none; }
.roi-dots.m1 circle { fill: var(--roi-m1); }
.roi-dots.m2 circle { fill: var(--roi-m2); }
.roi-chart-legend { display: flex; gap: 18px; margin-top: 6px; font-size: 12px; }
.roi-legend-item { display: inline-flex; align-items: center; }
.roi-legend-item::before {
  content: ''; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; display: inline-block;
}
.roi-legend-item.m1::before { background: var(--roi-m1); }
.roi-legend-item.m2::before { background: var(--roi-m2); }
.roi-legend-item.band::before { width: 18px; height: 10px; border-radius: 2px; background: rgba(25, 87, 168, 0.28); }

/* 検証用：計算式の解説 */
.roi-formulas { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.roi-formula { border: 1px solid var(--border, #e2e5ea); border-radius: 8px; padding: 10px 12px; }
.roi-formula-label { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.roi-formula-expr { font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.6; opacity: 0.9; }

/* ---------- 参考価値ブロック / AI ---------- */
.roi-sub-block { margin-top: 18px; }
.roi-sub-block h4 { font-size: 13px; margin: 0 0 8px; }
.roi-ai-meta { font-size: 13px; margin-bottom: 8px; }
.roi-ai-p { font-size: 13px; line-height: 1.85; margin: 6px 0; }
.roi-ai-bullets { margin: 8px 0; }
.roi-ai-bullets-title { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.roi-ai-bullets ul { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.8; }

/* ---------- 注記 ---------- */
.roi-note {
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--roi-m1);
  border-radius: 0 7px 7px 0;
  background: rgba(127, 140, 160, 0.08);
  font-size: 13px;
  line-height: 1.8;
}
.roi-note-sub { font-size: 12px; opacity: 0.7; line-height: 1.7; margin-top: 8px; }
.roi-notes {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.9;
  opacity: 0.85;
}

/* ---------- ステップ入力（種類ごとにまとめて1画面） ---------- */
.step-head { margin-bottom: 20px; }
.step-lead { margin: 8px 0 0; font-size: 13px; line-height: 1.85; opacity: 0.85; }
.step-lead.hidden { display: none; }
.fields-area { display: flex; flex-direction: column; gap: 22px; }
.field-block { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; font-size: 14.5px; line-height: 1.55; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.req-badge { font-size: 10px; font-weight: 700; color: #c0392b; background: rgba(192, 57, 43, 0.1); padding: 1px 7px; border-radius: 8px; margin-top: 2px; }
.field-help { font-size: 12px; opacity: 0.75; line-height: 1.65; }
.field-error { font-size: 12px; color: #c0392b; font-weight: 600; }
.field-error:empty { display: none; }
.field-subhead {
  margin-top: 14px; font-weight: 700; font-size: 13px; color: var(--roi-m1);
  padding-bottom: 6px; border-bottom: 2px solid rgba(25, 87, 168, 0.25);
}
.fields-area > .field-subhead:first-child { margin-top: 0; }
.input-affix { display: flex; align-items: center; gap: 8px; }
.input-affix .field { flex: 1; min-width: 0; }
.input-affix .affix { font-size: 13px; opacity: 0.7; white-space: nowrap; }

/* 選択肢が多いチェックボックス群（業種・規模など）はコンパクトなグリッドに（2026-09-14） */
.options.is-compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.options.is-compact .option { padding: 11px 13px; border-radius: 10px; align-items: center; }
.options.is-compact .option-dot { flex-basis: 18px; width: 18px; height: 18px; margin-top: 0; }
.options.is-compact .option.checkbox.is-selected .option-dot::after { left: 4px; top: 0; width: 5px; height: 9px; }
.options.is-compact .option-label { font-size: 14px; }
.options.is-inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- 数値入力 ---------- */
.number-field { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---------- 印刷 ---------- */
@media print {
  .conversion-card,
  .result-sub-actions,
  .floating-cta,
  .site-header { display: none !important; }
  .roi-table { min-width: 0; font-size: 11px; }
  .roi-hero, .result-section { break-inside: avoid; }
}

@media (max-width: 620px) {
  .roi-gauge { width: 132px; height: 132px; }
  .roi-gauge-value { font-size: 32px; }
}

/* ---------- 埋め込み（LPモーダル内 iframe・?embed=1） 2026-09-08 ---------- */
/* 2026-09-14: 入口ページを挟まず STEP1 を即描画するため、ヘッダーはブランド部のみ隠し進捗バーは残す */
.is-embed .db3-header-inner, .is-embed .site-footer, .is-embed .floating-cta { display: none !important; }
.is-embed .site-header { border-bottom: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-embed .progress-wrap { border-top: 0; background: transparent; }
.is-embed .progress-inner { width: min(880px, calc(100% - 24px)); padding: 8px 0 4px; }
.is-embed main { width: min(880px, calc(100% - 24px)); padding: 8px 0 24px; }
.is-embed .panel { box-shadow: none; }
.is-embed .question-panel { padding: clamp(18px, 3vw, 30px); }

/* 途中回答からの再開バー（embed時のみ使用） */
.resume-inline { display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 9px 13px; border-radius: 8px; background: rgba(25, 87, 168, 0.07); font-size: 12.5px; color: #35455e; }
.resume-inline.is-visible { display: flex; }
.btn-link { border: 0; background: none; padding: 0; color: var(--roi-m1, #1957a8); font-weight: 700; font-size: 12.5px; text-decoration: underline; cursor: pointer; }

/* embed時のみ表示する注記（入口ページのAI利用注記を畳んだもの） */
.privacy-note.embed-only { display: none; }
.is-embed .privacy-note.embed-only { display: block; margin-top: 18px; font-size: 11.5px; line-height: 1.7; opacity: 0.7; }

.rs-logo { display: block; width: 149px; height: 32px; }