/* フォント読み込み - @importは先頭に配置必須 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ===================
   Design Tokens - v1
   森永製菓 1チョコ for 1スマイル サマーキャンペーン2026 LP
   =================== */

:root {
  /* カラー */
  --color-white: #ffffff;
  --color-brown: #6d1c1c;
  --color-orange: #fd6801;
  --color-blue: #036eb8;
  --color-light-blue: #bfe9ff;
  --color-green: #007240;
  --color-yellow: #f8b62d;
  --color-red: #e60020;
  --color-black: #000000;

  /* 背景 */
  --bg-page: #f0efec;
  --bg-card: #ffffff;
  --bg-donation: #c8b3a7;

  /* フォント */
  --font-family: 'Zen Maru Gothic', sans-serif;

  /* フォントサイズ */
  --fs-hero: 53px;
  --fs-h2: 40px;
  --fs-h3: 34px;
  --fs-h4: 28px;
  --fs-h5: 24px;
  --fs-body-lg: 22px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-caption-sm: 10px;

  /* フォントウェイト */
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* 角丸 */
  --radius-btn: 30px;
  --radius-card-lg: 24px;
  --radius-card-md: 20px;
  --radius-card-sm: 16px;
  --radius-tag: 15px;
  --radius-table: 2px;

  /* シャドウ */
  --shadow-card: none;

  /* ストローク */
  --stroke-card: 3px solid var(--color-brown);

  /* スペーシング */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-xxl: 80px;
}

/* ===================
   .page-content スコープ内のリセット
   共通ヘッダー・フッターに影響しないよう限定
   =================== */

/* box-sizing のみリセット - margin/paddingは個別スタイルで管理 */
.page-content *,
.page-content *::before,
.page-content *::after {
  box-sizing: border-box;
}

/* コンテンツエリアのベーススタイル */
.page-content {
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  color: var(--color-brown);
  background: var(--bg-page);
  line-height: 1.6;
}

/* コンテンツエリア内の要素にフォント適用 */
.page-content article,
.page-content aside,
.page-content dd,
.page-content dl,
.page-content dt,
.page-content figcaption,
.page-content figure,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content li,
.page-content ol,
.page-content p,
.page-content section,
.page-content ul {
  font-family: var(--font-family);
}

/* button要素のリセット - 個別スタイルで上書き可能にするため最小限に */
.page-content button {
  border: none;
  font: inherit;
  cursor: pointer;
}

.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* スタイル付きクラスを除外してリンク色を設定 - コンテンツエリア内のみ */
.page-content a:not([class*="btn"]):not([class*="link"]),
.page-content a:not([class*="btn"]):not([class*="link"]):link,
.page-content a:not([class*="btn"]):not([class*="link"]):visited,
.page-content a:not([class*="btn"]):not([class*="link"]):hover,
.page-content a:not([class*="btn"]):not([class*="link"]):active {
  color: inherit;
  text-decoration: none;
}

/* テキストコンテンツ内のリンクは通常のリンクスタイルを適用（詳細度を上げる） */
.page-content p a:not([class]):not([class]),
.page-content p a:not([class]):not([class]):link,
.page-content p a:not([class]):not([class]):visited,
.page-content li a:not([class]):not([class]),
.page-content li a:not([class]):not([class]):link,
.page-content li a:not([class]):not([class]):visited,
.page-content dd a:not([class]):not([class]),
.page-content dd a:not([class]):not([class]):link,
.page-content dd a:not([class]):not([class]):visited,
.page-content td a:not([class]):not([class]),
.page-content td a:not([class]):not([class]):link,
.page-content td a:not([class]):not([class]):visited {
  color: var(--color-orange);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

.page-content p a:not([class]):not([class]):hover,
.page-content p a:not([class]):not([class]):active,
.page-content li a:not([class]):not([class]):hover,
.page-content li a:not([class]):not([class]):active,
.page-content dd a:not([class]):not([class]):hover,
.page-content dd a:not([class]):not([class]):active,
.page-content td a:not([class]):not([class]):hover,
.page-content td a:not([class]):not([class]):active {
  text-decoration: none;
}

/* ボタンの白文字を確実に適用 - コンテンツエリア内のみ */
.page-content a[class*="btn"],
.page-content a[class*="btn"]:link,
.page-content a[class*="btn"]:visited,
.page-content a[class*="btn"]:hover,
.page-content a[class*="btn"]:active {
  color: var(--color-white);
  text-decoration: none;
}

/* ===================
   フォーカススタイル（アクセシビリティ）
   =================== */

/* リンク・ボタンのフォーカス表示 */
.page-content a:focus-visible,
.page-content button:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* ボタン要素のフォーカス表示（色付きボタン用） */
.page-content .btn:focus-visible,
.page-content .btn-link:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

/* タブのフォーカス表示 */
.page-content .entry-tab:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: -2px;
}