/*
 * 問い合わせページ（phase004_問い合わせページ.md）専用スタイル。
 * Bootstrap 5（static/vendor/）はレイアウトの土台（.container 等）にのみ使い、
 * 配色・間隔・角丸はこのファイルのデザイントークン（CSSカスタムプロパティ）で統一する。
 * デザインブリーフ: 中小企業の経営者・DX担当者向け。親しみやすさ・フラットなトーン。
 */

:root {
  /* --- カラートークン（ライト） --- */
  --contact-bg: #faf7f2;
  --contact-bg-card: #ffffff;
  --contact-text: #2b2b2b;
  --contact-text-muted: #5b5550;
  --contact-border: #e7e0d6;
  --contact-focus-ring: #1a6b3c;

  /* LINEボタン: 背景はLINEブランドグリーン、文字は濃いグリーンでAAコントラストを確保する
     （白文字だとコントラスト比が約2.3:1でWCAG AAを満たさないため採用しない）。 */
  --contact-line-bg: #06c755;
  --contact-line-bg-hover: #05b34c;
  --contact-line-text: #0b2e1a;

  /* --- 間隔スケール --- */
  --contact-space-1: 0.5rem;
  --contact-space-2: 1rem;
  --contact-space-3: 1.5rem;
  --contact-space-4: 2.5rem;
  --contact-space-5: 4rem;

  /* --- 角丸・シャドウ --- */
  --contact-radius-md: 0.75rem;
  --contact-radius-lg: 1.25rem;
  --contact-radius-pill: 999px;
  --contact-shadow-card: 0 20px 40px -24px rgba(43, 43, 43, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --contact-bg: #1c1b19;
    --contact-bg-card: #262421;
    --contact-text: #f3f1ec;
    --contact-text-muted: #b9b3aa;
    --contact-border: #3a372f;
    --contact-focus-ring: #7fe3ad;

    --contact-line-bg: #06c755;
    --contact-line-bg-hover: #1ed46c;
    --contact-line-text: #06210f;

    --contact-shadow-card: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
  }
}

.contact-page {
  background-color: var(--contact-bg);
  color: var(--contact-text);
}

.contact-hero {
  padding-block: var(--contact-space-5) var(--contact-space-4);
}

.contact-eyebrow {
  display: inline-block;
  margin-bottom: var(--contact-space-2);
  padding: 0.25rem 0.85rem;
  border-radius: var(--contact-radius-pill);
  background-color: var(--contact-bg-card);
  border: 1px solid var(--contact-border);
  color: var(--contact-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.contact-heading {
  max-width: 20ch;
  margin-bottom: var(--contact-space-3);
  font-weight: 700;
  line-height: 1.4;
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
}

.contact-lead {
  max-width: 46ch;
  margin-bottom: var(--contact-space-4);
  color: var(--contact-text-muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.contact-line-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: var(--contact-radius-pill);
  background-color: var(--contact-line-bg);
  color: var(--contact-line-text);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--contact-shadow-card);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.contact-line-button:hover {
  background-color: var(--contact-line-bg-hover);
  color: var(--contact-line-text);
  transform: translateY(-2px);
  box-shadow: 0 24px 40px -20px rgba(6, 199, 85, 0.55);
}

.contact-line-button:focus-visible {
  outline: 3px solid var(--contact-focus-ring);
  outline-offset: 3px;
}

.contact-line-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.contact-line-icon svg {
  width: 100%;
  height: 100%;
}

.contact-note {
  margin-top: var(--contact-space-2);
  color: var(--contact-text-muted);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .contact-line-button {
    transition: none;
  }

  .contact-line-button:hover {
    transform: none;
  }
}

/* --- ご相談の流れ / チーム型紹介 / 料金（phase005_LINE相談導線強化.md） --- */

.contact-section-heading {
  margin-bottom: var(--contact-space-2);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
}

.contact-section-lead {
  max-width: 60ch;
  margin-bottom: var(--contact-space-3);
  color: var(--contact-text-muted);
  line-height: 1.8;
}

.contact-flow,
.contact-team-types,
.contact-pricing {
  padding-block: var(--contact-space-4);
  border-top: 1px solid var(--contact-border);
}

.contact-flow-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--contact-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-flow-step {
  display: flex;
  gap: var(--contact-space-2);
  align-items: flex-start;
}

.contact-flow-number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--contact-line-bg);
  color: var(--contact-line-text);
  font-weight: 700;
}

.contact-flow-title {
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.contact-flow-desc {
  margin: 0;
  color: var(--contact-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.contact-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--contact-space-2);
  margin: 0 0 var(--contact-space-3);
  padding: 0;
  list-style: none;
}

.contact-team-card {
  padding: var(--contact-space-3);
  border-radius: var(--contact-radius-md);
  background-color: var(--contact-bg-card);
  border: 1px solid var(--contact-border);
  box-shadow: var(--contact-shadow-card);
}

.contact-team-name {
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.contact-team-desc {
  margin: 0 0 0.6rem;
  color: var(--contact-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.contact-team-link {
  display: inline-block;
  color: var(--contact-line-bg-hover);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.contact-team-link:hover,
.contact-team-link:focus-visible {
  text-decoration: underline;
}

.contact-team-note {
  margin: 0;
  color: var(--contact-text-muted);
  font-size: 0.9rem;
}

.contact-pricing-text {
  max-width: 46ch;
  margin: 0;
  padding: var(--contact-space-3);
  border-radius: var(--contact-radius-md);
  background-color: var(--contact-bg-card);
  border: 1px solid var(--contact-border);
  color: var(--contact-text);
  line-height: 1.8;
}