/* ===================================================
   ハラスメント相談窓口 カスタムスタイル
   カラーテーマ: ラベンダー × ウォームベージュ
   「寄り添い」「温かさ」「信頼」を表現
   =================================================== */

/* ---------- カラー変数 ---------- */
:root {
  --color-primary:       #6b4f8e;   /* ウォームバイオレット（メイン） */
  --color-primary-dark:  #4e3569;   /* 濃いバイオレット */
  --color-primary-light: #9b7bbf;   /* ラベンダー */
  --color-primary-pale:  #f0ebf9;   /* 極薄ラベンダー */
  --color-accent:        #c0874e;   /* ウォームアンバー（アクセント） */
  --color-accent-light:  #fdf3e7;   /* 薄いアンバーベージュ */
  --color-bg:            #faf8fd;   /* 本文背景（極薄ラベンダーホワイト） */
  --color-text:          #3d2f50;   /* テキスト（ダークプラム） */
  --color-text-muted:    #7a6a8a;   /* サブテキスト */
  --color-border:        #e0d9f0;   /* ボーダー */
  --color-surface:       #ffffff;   /* カード背景 */
}

/* ---------- 基本設定 ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Helvetica Neue', Arial,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ---------- フォーカスリング（アクセシビリティ） ---------- */
*:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* =====================================================
   ヘッダー
   ===================================================== */
.header-main {
  background-color: var(--color-surface);
  border-bottom: 2px solid var(--color-primary-pale);
  color: var(--color-text);
}

.header-icon-wrap {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
}

.header-subtitle {
  color: var(--color-text-muted);
}

.nav-link {
  color: var(--color-text-muted);
}
.nav-link:hover {
  color: var(--color-primary);
}

.mobile-nav {
  border-color: var(--color-border);
  background-color: var(--color-primary-pale);
}

/* =====================================================
   フッター
   ===================================================== */
.footer-main {
  background-color: var(--color-primary-dark);
  color: #e8e0f5;
}

.footer-notice {
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.footer-notice-title {
  color: #f0ebf9;
  font-weight: bold;
}

.footer-notice-text {
  color: #d8d0ec;
  line-height: 1.7;
}

.footer-notice-sub {
  color: #b8add0;
  line-height: 1.7;
}

.footer-link {
  color: #c4b8de;
}
.footer-link:hover {
  color: #fff;
}

.footer-copy {
  color: #9b8fb5;
}

/* =====================================================
   ヒーローセクション
   ===================================================== */
.hero-section {
  background: linear-gradient(
    145deg,
    #4e3569 0%,
    #6b4f8e 50%,
    #8b6aad 100%
  );
  position: relative;
  overflow: hidden;
}

/* 背景の柔らかい光の輪（装飾） */
.hero-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -40px;
  width: 220px;
  height: 220px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.hero-badge {
  background-color: rgba(255,255,255,0.15);
  color: #e8e0f5;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}

.hero-title {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.hero-subtitle {
  color: #d8d0ec;
}

.hero-note {
  color: rgba(216,208,236,0.75);
}

/* ヒーローボタン */
.btn-hero-primary {
  background-color: #ffffff;
  color: var(--color-primary-dark);
}
.btn-hero-primary:hover {
  background-color: var(--color-primary-pale);
  transform: translateY(-1px);
}

.btn-hero-secondary {
  border-color: rgba(255,255,255,0.55);
  color: #ffffff;
}
.btn-hero-secondary:hover {
  background-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* =====================================================
   セクション共通見出し
   ===================================================== */
.section-title {
  color: var(--color-text);
}

.section-subtitle {
  color: var(--color-text-muted);
}

/* =====================================================
   安心ポイント カード
   ===================================================== */
.trust-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(107,79,142,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}
.trust-card:hover {
  box-shadow: 0 4px 16px rgba(107,79,142,0.12);
  transform: translateY(-2px);
}

.trust-title {
  color: var(--color-text);
}
.trust-body {
  color: var(--color-text-muted);
}

/* アイコン円 */
.trust-icon-violet { background-color: var(--color-primary-pale); color: var(--color-primary); }
.trust-icon-green  { background-color: #e6f4ec; color: #3a7d55; }
.trust-icon-mauve  { background-color: #f0eaf8; color: #7c5aa6; }
.trust-icon-amber  { background-color: var(--color-accent-light); color: var(--color-accent); }

/* =====================================================
   ご相談の流れ（ステップ）
   ===================================================== */
.flow-container {
  background-color: var(--color-primary-pale);
  border: 1px solid var(--color-border);
}

.flow-connector {
  background-color: var(--color-primary-light);
  opacity: 0.4;
}

.step-circle {
  background-color: var(--color-primary);
  color: #ffffff;
}

.step-label {
  color: var(--color-primary-light);
  letter-spacing: 0.12em;
}

.step-title {
  color: var(--color-text);
}

.step-desc {
  color: var(--color-text-muted);
}

/* =====================================================
   CTAセクション
   ===================================================== */
.cta-section {
  background: linear-gradient(
    135deg,
    #c0874e 0%,
    #d49a60 60%,
    #e0aa70 100%
  );
}

.cta-icon-wrap {
  background-color: rgba(255,255,255,0.25);
  color: #ffffff;
}

.cta-title {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

.cta-subtitle {
  color: rgba(255,255,255,0.85);
}

.btn-cta {
  background-color: #ffffff;
  color: var(--color-accent);
  font-weight: bold;
}
.btn-cta:hover {
  background-color: var(--color-accent-light);
  transform: translateY(-1px);
}

/* =====================================================
   汎用ボタン
   ===================================================== */
.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
}

/* =====================================================
   フォーム
   ===================================================== */
.form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.form-heading {
  color: var(--color-text);
}

.form-sub {
  color: var(--color-text-muted);
}

.form-label {
  color: var(--color-text);
}

.form-note {
  color: var(--color-text-muted);
}

.form-input {
  background-color: #ffffff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.form-input:focus {
  --tw-ring-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* 匿名オプション枠 */
.anon-box {
  background-color: var(--color-primary-pale);
  border-color: var(--color-border);
}

/* 詳細情報アコーディオン */
.details-box {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

/* 同意チェックボックス枠 */
.consent-box {
  background-color: var(--color-accent-light);
  border-color: #e8c99a;
}

/* お知らせ/プライバシー情報枠 */
.info-notice {
  background-color: var(--color-primary-pale);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
}

/* =====================================================
   ステータスバッジ
   ===================================================== */
.status-received  { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.status-reviewing { color: var(--color-primary-dark); background: var(--color-primary-pale); border-color: var(--color-primary-light); }
.status-done      { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

/* =====================================================
   FAQ カード
   ===================================================== */
.faq-card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  border-left-color: var(--color-primary-light) !important;
  box-shadow: 0 1px 3px rgba(107,79,142,0.06);
}
.faq-q {
  color: var(--color-text);
}
.faq-a {
  color: var(--color-text-muted);
}

/* =====================================================
   テーブル
   ===================================================== */
tbody tr:hover { background-color: var(--color-primary-pale); }

/* =====================================================
   フォントスタイル
   ===================================================== */
.font-mono {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.05em;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

#evidence_urls {
  font-family: monospace;
  font-size: 0.875rem;
}

/* =====================================================
   アニメーション
   ===================================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

/* =====================================================
   印刷スタイル
   ===================================================== */
@media print {
  header, footer, nav, button, .no-print { display: none !important; }
  #credentials-area {
    border: 2px solid #000 !important;
    padding: 20px !important;
    margin: 20px 0 !important;
  }
  #consultation-number,
  #consultation-password {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #000 !important;
  }
}

/* =====================================================
   モバイル
   ===================================================== */
@media (max-width: 640px) {
  header nav { display: none; }
  main { padding-left: 1rem; padding-right: 1rem; }
}