/* ============================================================
   GRAND / campaign.tokyo-grand.jp
   base.css  -- デザイントークンと共通ベーススタイル
   このファイルはサイト全体で共有します。
   個別ページ固有のスタイルは書かないでください。
   ============================================================ */

:root {
  /* --- ブランドカラー --------------------------------------- */
  --grand-red:        #AF1521;  /* キーカラー */
  --grand-red-dark:   #8C101A;  /* hover / active */
  --grand-red-deep:   #6B0C14;  /* テキスト用の濃い赤 */
  --grand-red-tint:   #FBF1F2;  /* 薄い面 */
  --grand-red-tint-2: #F4E0E2;  /* 罫線がわりの薄赤 */

  /* --- ニュートラル ----------------------------------------- */
  --ink:        #171415;  /* 見出し */
  --ink-body:   #322D2F;  /* 本文 */
  --ink-muted:  #6D6467;  /* 補足 */
  --ink-faint:  #948A8D;  /* プレースホルダ等 */
  --line:       #E4DEDF;  /* 罫線 */
  --line-soft:  #F0EBEC;
  --surface:    #FFFFFF;  /* カード面 */
  --bg:         #F7F4F4;  /* ページ地 */

  /* --- ステータス ------------------------------------------- */
  --error:      #C0261E;
  --error-tint: #FDF1F0;
  --success:    #1C7A50;

  /* --- タイポグラフィ --------------------------------------- */
  /* 基本フォント。Zen Kaku Gothic New は 400 / 500 / 700 のみ収録のため、
     600・800 は使わない（ブラウザの合成太字になり品質が落ちる）。
     読み込みに失敗しても崩れないよう、OS標準の日本語ゴシックを後ろに置く。 */
  --font-sans:
    "Zen Kaku Gothic New",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* --- レイアウト ------------------------------------------- */
  --page-max:  640px;
  --radius:    10px;
  --radius-lg: 14px;

  /* --- 影 --------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(23, 20, 21, .06);
  --shadow-md: 0 6px 24px rgba(23, 20, 21, .09);
}

/* フォームコントロールをOSのダークモードで暗転させない */
:root { color-scheme: light; }

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

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: smooth はグローバルには効かせない。
     ブラウザがフォーカス移動などで行う自動スクロールまで
     アニメーションしてしまい、挙動が読みにくくなるため。
     必要な箇所は JS 側で behavior:'smooth' を明示している。 */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--grand-red-deep);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--grand-red); }

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 0;
  font-weight: 700;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --- 共通パーツ ---------------------------------------------- */

/* ページ最上部のブランドライン */
.brandline {
  height: 4px;
  background: var(--grand-red);
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--grand-red);
  text-decoration: none;
  line-height: 1;
}
.logo__sub {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-muted);
  line-height: 1;
}

.site-footer {
  margin-top: 48px;
  padding: 28px 20px 40px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-muted);
}
.site-footer .logo { font-size: 15px; display: inline-block; margin-bottom: 6px; }

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}