/* 未登録の会社が案内メールから最初に開くページ（届いている見積依頼） */
.vi { --vi-navy: #10223f; --vi-blue: #0a86c9; --vi-line: #dfe7f0; --vi-sub: #5b6b80; --vi-red: #d32f2f;
  max-width: 880px; margin: 0 auto; padding: 8px 16px 48px; color: var(--vi-navy); }
.vi h1, .vi h2, .vi h3 { color: var(--vi-navy); }

/* いちばん上 */
.vi-hero { background: #fff; border: 1px solid var(--vi-line); border-radius: 18px; padding: 28px 30px 24px; box-shadow: 0 6px 24px #10223f0f; }
.vi-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--vi-blue); letter-spacing: .04em; }
.vi-hero h1 { font-size: 28px; line-height: 1.45; margin: 0 0 12px; }
.vi-company { color: var(--vi-navy); }
.vi-num { color: var(--vi-red); font-size: 38px; padding: 0 2px; }
.vi-lead { margin: 0 0 18px; line-height: 1.8; color: #2b3b52; }
.vi-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.vi-btn-key { display: inline-block; background: var(--vi-red); color: #fff !important; font-weight: 800; font-size: 17px; text-decoration: none;
  padding: 14px 28px; border-radius: 12px; box-shadow: 0 6px 16px #d32f2f33; }
.vi-btn-key:hover { background: #b71c1c; }
.vi-note { font-size: 13px; color: var(--vi-sub); }
.vi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--vi-line); padding-top: 18px; }
.vi-stat { background: #f4f8fc; border-radius: 12px; padding: 12px 14px; }
.vi-stat-num { display: block; font-size: 26px; font-weight: 800; color: var(--vi-blue); line-height: 1.2; }
.vi-stat-num small { font-size: 13px; margin-left: 2px; color: var(--vi-sub); font-weight: 700; }
.vi-stat-label { font-size: 12px; color: var(--vi-sub); }

/* セクション */
.vi-section { margin-top: 36px; }
.vi-section h2 { font-size: 20px; margin: 0 0 6px; padding-left: 12px; border-left: 4px solid var(--vi-blue); }
.vi-sub { margin: 0 0 14px; font-size: 13px; color: var(--vi-sub); }
.vi-small { margin: 10px 0 0; font-size: 12px; color: var(--vi-sub); }

/* 届いている依頼（カード） */
.vi-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vi-request { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--vi-line); border-radius: 14px; padding: 16px 18px; }
.vi-request-main { flex: 1; min-width: 0; }
.vi-request-top { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--vi-sub); }
.vi-deadline { background: #eef5fb; color: #0a6fa8; border-radius: 999px; padding: 1px 10px; font-weight: 700; }
.vi-deadline.is-soon { background: #fdecea; color: #b71c1c; }
.vi-service { margin: 6px 0 8px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.vi-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vi-tags li { font-size: 13px; background: #f1f4f8; border: 1px solid #e3e9f0; border-radius: 8px; padding: 2px 10px; }
.vi-org { margin: 8px 0 0; font-size: 13px; color: var(--vi-sub); }
.vi-btn { flex-shrink: 0; display: inline-block; background: var(--vi-blue); color: #fff !important; font-weight: 700; text-decoration: none;
  padding: 10px 18px; border-radius: 10px; white-space: nowrap; }
.vi-btn:hover { background: #086d9f; }

/* 流れ（3ステップ） */
.vi-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vi-steps li { background: #fff; border: 1px solid var(--vi-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.vi-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--vi-blue); color: #fff; font-weight: 800; display: grid; place-items: center; }
.vi-steps span:last-child { font-size: 13px; color: var(--vi-sub); line-height: 1.7; }

/* 料金・登録すると */
.vi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vi-card { background: #fff; border: 1px solid var(--vi-line); border-radius: 14px; padding: 18px 20px; }
.vi-card h3 { margin: 0 0 10px; font-size: 16px; }
.vi-price { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.vi-price dt { color: var(--vi-sub); }
.vi-price dd { margin: 0; font-weight: 700; }
.vi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.vi-checks li::before { content: "✓"; color: #16a34a; font-weight: 800; margin-right: 8px; }

/* 掲載内容 */
.vi-services { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--vi-line); border-radius: 14px; }
.vi-services li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid #edf1f6; font-size: 14px; }
.vi-services li:first-child { border-top: 0; }
.vi-services span { color: var(--vi-sub); font-size: 12px; }

.vi-foot { margin-top: 32px; font-size: 13px; color: var(--vi-sub); line-height: 1.8; }

@media (max-width: 720px) {
  .vi-hero { padding: 22px 18px; }
  .vi-hero h1 { font-size: 22px; }
  .vi-num { font-size: 30px; }
  .vi-stats, .vi-steps, .vi-two { grid-template-columns: 1fr; }
  .vi-request { flex-direction: column; align-items: stretch; }
  .vi-btn, .vi-btn-key { text-align: center; }
}