/* ============================================================
   AI番頭 テンプレートB — 親しみやすい・相談しやすい型
   対象: 行政書士・FP向け

   [トークン設計]
   カラー : セージグリーン × ウォームアンバー × ウォームホワイト
   フォント: Noto Sans JP（全体・丸みある印象）
   形状   : 大きい角丸・ソフトシャドウ・カード重視
   Signature: アイコン円形バッジ・ウェーブセパレーター・温かみのある余白
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* カラー */
  --color-primary:       #3D7A6A;
  --color-primary-light: #4E9880;
  --color-primary-rgb:   61, 122, 106;
  --color-accent:        #E07A2F;
  --color-accent-dark:   #C46820;
  --color-bg:            #FAFAF8;
  --color-surface:       #EDF4F1;
  --color-text:          #2B2520;
  --color-text-muted:    #7A7268;
  --color-border:        #C8DDD8;

  /* タイポグラフィ */
  --font-heading: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     2rem;
  --text-4xl:     2.625rem;
  --leading-heading: 1.35;
  --leading-body:    1.85;
  --weight-heading:  700;

  /* スペーシング */
  --section-py:       5rem;
  --container-width:  1080px;
  --container-px:     24px;
  --header-height:    70px;

  /* 形状（丸み重視） */
  --radius-sm:   8px;
  --radius-btn:  999px;
  --radius-card: 16px;
  --radius-md:   12px;
  --radius-icon: 50%;

  /* シャドウ（ソフト） */
  --shadow-hover: 0 8px 32px rgba(61, 122, 106, 0.14);
}

/* ============================================================
   パターンB シグネチャ要素
   ============================================================ */

/* ヘッダー — グリーンの下ボーダー、白背景強調 */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--color-surface);
  box-shadow: 0 2px 12px rgba(61,122,106,0.06);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(61,122,106,0.1);
}

/* ロゴマーク — 丸 */
.logo-mark {
  border-radius: 50%;
  background: var(--color-primary);
}

/* ナビリンク — 丸いホバー */
.site-nav a { border-radius: 999px; }

/* セクション見出し — グリーンの左ライン */
.section-title {
  position: relative;
  padding-left: 1rem;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0.15em; bottom: 0.15em;
  width: 4px;
  background: var(--color-accent);
  border-radius: 999px;
}
.section-header.center .section-title { padding-left: 0; }
.section-header.center .section-title::before { display: none; }
.section-header.center .section-title::after {
  content: '';
  display: block;
  width: 48px; height: 4px;
  background: var(--color-accent);
  border-radius: 999px;
  margin: 0.75rem auto 0;
}

/* ヒーロー — サーフェス背景、波形の視覚的雰囲気 */
.hero { background: var(--color-surface); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: #fff;
  color: var(--color-primary);
  padding: 0.35em 1em;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ヒーロー headline — ウェイトとカラー */
.hero-headline { font-weight: 700; color: var(--color-primary); }

/* サービスカード — 大きい角丸・アイコン円形 */
.service-card {
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(61,122,106,0.08);
}
.service-card:hover {
  box-shadow: var(--shadow-hover);
  border: none;
}
.service-icon {
  border-radius: 50%;
  background: var(--color-surface);
  width: 60px; height: 60px;
  font-size: 1.625rem;
  color: var(--color-primary);
}

/* 料金テーブル — 角丸・グリーンヘッダー */
.pricing-table { border: none; box-shadow: 0 2px 16px rgba(61,122,106,0.1); }
.pricing-row.header-row { background: var(--color-primary); }
.pricing-row:not(.header-row):nth-child(even) { background: #fff; }
.pricing-row:not(.header-row) .pricing-cell { border-color: var(--color-border); }

/* 代表者紹介 */
.about-badge { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); }
.credentials-list li::before { color: var(--color-primary); }

/* アクセスセクション */
.access { background: #fff; }

/* テスティモニアル */
.testimonials { background: var(--color-surface); }
.testimonial-card {
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(61,122,106,0.08);
}
.testimonial-quote-mark { color: var(--color-primary); }

/* ブログリンクバナー */
.blog-link-banner { background: var(--color-primary); }

/* フッター */
.site-footer { background: #1E3830; }

/* ボタン — 丸い */
.btn-primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); }

/* チャットウィジェット — 丸い */
.chat-trigger { border-radius: 999px; background: var(--color-accent); }
.chat-trigger:hover { background: var(--color-accent-dark); }
.chat-panel-header { background: var(--color-primary); }

/* Cookie バナー */
.cookie-banner { background: var(--color-primary); }

/* プレースホルダー画像の色調整 */
.placeholder-image { background: var(--color-surface); border-color: var(--color-border); }
.placeholder-map { background: var(--color-surface); border-color: var(--color-border); }

/* フォームフォーカス */
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
}

/* 代表者写真 */
.photo-container {
  border-radius: 16px;
}

/* ヒーローCTA調整 */
.btn-outline { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }