/* =====================================================
   taichi — CSS変数・ベーススタイル
   テーマ変更は :root 変数だけ書き換えてください
   ===================================================== */

:root {
  /* ── ブランドカラー ── */
  --clr-accent:        #C41E3A;
  --clr-accent-rgb:    196, 30, 58;
  --clr-accent-lit:    #E85373;
  --clr-accent-dark:   #7F1D1D;

  /* ── ヒーロー背景グラデーション ── */
  --clr-hero-bg-1:     #000000;
  --clr-hero-bg-2:     #0a0a0a;
  --clr-hero-bg-3:     #111111;

  /* ── 薄いブランド背景 ── */
  --clr-surface-tint:  #fff5f5;
  --clr-surface-tint2: #fee2e2;

  /* ── 背景・サーフェス ── */
  --clr-bg:            #0d0d0d;
  --clr-surface:      #1a1a1a;
  --clr-surface2:     #242424;

  /* ── テキスト ── */
  --clr-text:         #ffffff;
  --clr-text-muted:   rgba(255, 255, 255, 0.55);
  --clr-text-subtle:  #6b7280;

  /* ── ボーダー ── */
  --clr-border:       rgba(255, 255, 255, 0.10);

  /* ── フォント ── */
  --font-sans:        'Noto Sans JP', sans-serif;
  --font-serif:       'Cormorant Garamond', serif;

  /* ── LINE ── */
  --clr-line:         #06C755;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ── LINEボタン（共通） ── */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--clr-line);
  color: #fff;
  transition: opacity 0.2s;
}
.btn-line:hover { opacity: 0.85; }