/* === 英数字フォント: Quicksand を self-host し、英数字だけ一段太い weight にマッピング ===
   要素 font-weight 400 → Quicksand 500 / 700 → Quicksand 700。
   unicode-range を Latin に限定し、日本語は範囲外なので各日本語フォントにフォールバックする。 */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/quicksand-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/quicksand-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === Color: primary = Teal（WKP_DesignSystem） === */
  --color-primary: #12a594;       /* teal 9 */
  --color-primary-hover: #0d9b8a; /* teal 10: primary ボタンの hover/active（teal 11 より柔らかい）。Figma WKP_DesignSystem 準拠 */
  --color-primary-dark: #008573;  /* teal 11: focus / 見出し */
  --color-primary-light: #e0f8f3; /* teal 3: subtle 背景 */
  --color-primary-soft: #ccf3ea;  /* teal 4: ソフトな塗り面（secondary ボタン等）。Figma WKP_DesignSystem 準拠 */
  --color-primary-border: #a1ded2; /* teal 6: ソフトな teal ボーダー */
  --color-primary-mid: #53bfb1;    /* teal 8: アイコン背景等の中間 teal */
  /* === Color: accent = Camel（ブロンズ/ゴールド・ロゴ準拠） === */
  --color-accent: #78603b;        /* camel 9: solid（強調） */
  --color-accent-dark: #3c301d;   /* camel 11: 文字/hover */
  --color-accent-light: #f4ece0;  /* camel 2: subtle 背景 */
  /* === Color: neutral = Gray === */
  --color-text: #1f1f25;          /* WKP --color/text/default（rgba(0,1,7,.88) on white 合成） */
  --color-text-muted: #646464;    /* gray 11: 補助テキスト */
  --color-bg: #f9f5ef;            /* camel 1: ウォームなページ背景（canvas） */
  --color-surface: #ffffff;       /* 白い面（ヘッダー・カード等） */
  --color-text-on-primary: #fafefd; /* WKP --color/text/primaryaction: Primary ボタン上の文字 */
  --color-border: #d9d9d9;        /* gray 6: 中立ボーダー */
  --color-border-light: #ebebeb;  /* gray 4: 控えめなボーダー */
  --color-icon: #8d8d8d;          /* gray 9: アイコン */
  --color-text-faint: #bbbbbb;    /* gray 7: ルビ・装飾ラベルなどごく控えめなテキスト */
  --color-overlay: rgba(31, 31, 37, 0.2); /* モーダル・メニュー展開時の背景ディム（text 色ベース） */
  /* === Color: category（FAQ グループ固有。Issue #15 Strapi 統合後に削除） === */
  --color-cat-photo-bg: #fce8e8;      /* 写真・購入 背景 */
  --color-cat-photo-icon: #d46060;    /* 写真・購入 アイコン */
  --color-cat-order-bg: #fff8df;      /* 注文・お支払い 背景 */
  --color-cat-order-icon: #c8980a;    /* 注文・お支払い アイコン */
  --color-cat-device-bg: #eaecfe;     /* デバイス・アプリ 背景 */
  --color-cat-device-icon: #6070d4;   /* デバイス・アプリ アイコン */
  --color-cat-other-bg: #f0f0f4;      /* その他 背景 */
  --color-cat-other-icon: #8888aa;    /* その他 アイコン */
  /* === Color: state === */
  --color-success: #12a594;       /* teal 9 */
  --color-danger: #e5484d;        /* red 9 */
  --color-warning: #ffc53d;       /* amber 9 */
  --color-info: #0d74ce;          /* blue 11: インフォメーション（本体サイトの info 表現に準拠） */

  /* === Spacing === */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;

  /* === Radius（parent: 丸み大） === */
  --radius-xs: 4px;    /* focus リング・インラインコード等の極小角丸 */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* === Elevation（影） === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm-up: 0 -1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 3px 12px rgba(80, 70, 55, .06);

  /* === Typography === */
  /* 本文・見出しは英数字を Quicksand に（先頭に置き、日本語はフォールバック）。
     装飾(--font-deco)だけは英数字も Zen Maru に揃える（Quicksand を使わない）。 */
  --font-zen-maru: 'Quicksand', 'Zen Maru Gothic', sans-serif;
  --font-sans: 'Quicksand', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-deco: 'Zen Maru Gothic', sans-serif;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.8rem;
  --text-4xl: 2rem;
}

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

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  /* sticky footer: コンテンツが短くてもフッターを画面最下部に */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === ヘッダー共通 ===
   .site-header は全ページ共通の sticky ヘッダー（スクロール中も常時追従）。 */
.site-header {
  background: var(--color-surface);
  padding: var(--space-md) var(--space-xl);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* メニュー展開中（JS が付与）はヘッダーの影を消し、パネルと一体に見せる */
.site-header.is-menu-open {
  box-shadow: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* ヘッダーは最大幅を設けずフルワイド（ロゴ左端・ナビ右端）。
     メニュー項目が増減しても本文幅との調整が要らない */
}

.site-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
}

.site-logo {
  height: 36px;
  width: auto;
  display: block;
}

.site-suffix {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transform: translateY(1px); /* ロゴの光学的中心に合わせた微調整 */
}

/* どのサポートサイトかを示す識別ラベル（保護者 / 団体 / カメラマン）。ニュートラルなグレーのピル */
.site-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  padding: var(--space-xxs) var(--space-sm);
  line-height: 1;
  white-space: nowrap;
}

/* === ハンバーガーボタン === */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.menu-toggle:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* 開閉状態に応じたアイコン切り替え */
.menu-toggle .icon-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* === ヘッダーの直書きナビ（デスクトップ） ===
   1080px 以上ではハンバーガーの代わりに直書きナビを表示する（発見性優先）。
   それ未満はロゴ・接尾辞・ラベルとナビ一式（最長: camera 約1000px）が1行に収まらないため、ハンバーガーのまま。 */
.header-nav {
  display: none;
}

.header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.12s;
}

/* hover はフッターのテキストリンクと同じ「文字色が teal に変わる」だけの表現に揃える */
.header-nav-link:hover {
  color: var(--color-primary);
}

.header-nav-link:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* サイト内ページと本体サイトの区切り線（メニューの区切りと同じ薄さ） */
.header-nav-divider {
  width: 1px;
  height: 16px;
  background: var(--color-border-light);
}

/* === ドロップダウンメニューパネル ===
   hidden 属性が確実に効くよう display:none を明示（flex が上書きしないよう）。
   開いている時は flex で縦並び。ヘッダー直下からスライドダウン。 */
.site-menu[hidden] {
  display: none;
}

.site-menu {
  position: absolute;
  /* 高 DPR 環境でヘッダー下端との間にヘアライン隙間ができ、背景ディムが
     線状に透けるため、1px 重ねて隙間を塞ぐ（両方白面のため重なりは見えない） */
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  /* パネルの影が上方向へスピルするとヘッダー下端に影の線が出るため、上だけクリップする
     （下・左右の影は残す。-24px は shadow-md のぼかし半径より十分大きい余白） */
  clip-path: inset(0 -24px -24px -24px);
  /* hidden 解除（display:none → 表示）のタイミングで発火する開きアニメーション */
  animation: site-menu-open 0.18s ease;
  transform-origin: top;
}

@keyframes site-menu-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 閉じるとき（JS が is-closing を付与 → animationend 後に hidden） */
.site-menu.is-closing {
  animation: site-menu-close 0.15s ease forwards;
}

@keyframes site-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* モバイルの表示ルール .site-menu-backdrop:not([hidden])（同詳細度・後方）に
   負けないよう :not([hidden]) を重ねて詳細度を一段上げる */
.site-menu-backdrop.is-closing:not([hidden]) {
  animation: site-menu-backdrop-out 0.15s ease forwards;
}

@keyframes site-menu-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* メニュー展開中の背景ディム。全幅パネルのため PC・モバイル共通で敷く。
   ヘッダー自体は暗くしないよう、ヘッダー下端（top:100%）から下だけを覆う。
   パネル（z-index:99）の下・コンテンツの上に重なる */
.site-menu-backdrop {
  display: none;
}

.site-menu-backdrop:not([hidden]) {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 98;
  background: var(--color-overlay);
  animation: site-menu-backdrop-in 0.18s ease;
}

@keyframes site-menu-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* OS の「視差効果を減らす」設定ではアニメーションを無効化する
   （is-closing 変種も含めて上書きできるよう、セレクタを列挙して詳細度を合わせる） */
@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu.is-closing,
  .site-menu-backdrop,
  .site-menu-backdrop.is-closing {
    animation: none;
  }
}

/* 1080px 以上は直書きナビに切り替え、ハンバーガー一式を出さない。
   （メニュー系の表示ルールをすべて上書きするため、このブロックはメニュー定義の後に置く） */
@media (min-width: 1080px) {
  .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .menu-toggle,
  .site-menu,
  .site-menu-backdrop:not([hidden]) {
    display: none;
  }
}

.site-menu-inner {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  /* 上下に余白を広めにとり、パネルに呼吸感を持たせる */
  padding: var(--space-lg) var(--space-xl);
}

.site-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xs);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-xs);
  transition: background 0.12s, color 0.12s;
}

.site-menu-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.site-menu-item:focus-visible {
  outline: 2px solid var(--color-primary-border);
  outline-offset: 2px;
}

.site-menu-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-xs) 0;
}

main {
  flex: 1;
  width: 100%;
  /* max-width は header-inner / footer-inner と同じ 900px。ただし左右 padding
     （--space-lg × 2）の分だけコンテンツの見た目の幅が内側に収まり（実幅約 852px・
     中央寄せ）、header/footer より内容がわずかに狭く見える */
  max-width: 900px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-lg);
}

footer {
  background: var(--color-surface);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm-up);
  margin-top: var(--space-xxl);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* ブランド列（ロゴ） */
.footer-brand {
  margin-bottom: var(--space-lg);
}

/* ヘッダーのロゴ（.site-logo）とサイズを揃える */
.footer-logo {
  height: 28px;
  width: auto;
  display: block;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-copy {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

h1 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
h2 { font-size: var(--text-xl); margin: var(--space-lg) 0 var(--space-sm); color: var(--color-primary); }

/* ページ内の中見出し（全ページ共通で使える section 見出し）。Zen Maru の太字。
   h2 グローバルスタイル（teal 色）とは別軸の、本文色の小見出し。 */
.page-section-heading {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-zen-maru);
  margin: 0 0 var(--space-md);
}

.faq-detail > h1 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-zen-maru);
  font-size: var(--text-2xl);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}

/* === ページタイトルの型（ひらがな副題＋見出し・中央寄せ） ===
   トップ・FAQ 一覧・推奨環境・各種資料・問い合わせで共通。
   上下の余白算: main 上マージン + padding-top ＝ padding-bottom + margin-bottom で対称 */
.page-header {
  text-align: center;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-xl);
}

/* ひらがなルビ風の副題。見出しと同内容の装飾ラベル（呼び出し側で aria-hidden を付ける） */
.page-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  font-family: var(--font-deco);
  margin: 0 0 var(--space-xxs);
}

/* FAQ 質問バッジ（一覧 index・詳細 slug 共通の「Q.」）。
   「.」を含むメトリクスで視覚中心がやや下に来るため、少し上げて本文と縦位置を揃える */
.faq-q-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-mid);
  font-family: var(--font-deco);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  transform: translateY(-0.06em);
}

/* 詳細ページの主題バッジは一覧より大きく（主題としての存在感）。
   横幅は 48px 維持、Q. はトークン最大(text-3xl=1.8rem)を超える主題サイズ */
.faq-detail > h1 .faq-q-badge {
  width: 48px;
  height: 48px;
  font-size: 2.4rem;
}

/* 回答（リスさん＝回答者 ＋ 本文）の横並び。
   本文が番号リスト・複数段落でも崩れないよう、float でなく flex で本文を独立ブロックにする */
.faq-answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* 回答の左に置くリスさん（回答者）。詳細の Q バッジ（48px）と同じ幅 */
.faq-a-icon {
  flex-shrink: 0;
  width: 48px;
  height: auto;
}

.faq-body {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.9;
}

/* 本文先頭要素の上マージンを消し、回答アイコン（リスさん）と天端を揃える */
.faq-body > :first-child {
  margin-top: 0;
}

/* FAQ本文（Markdownレンダリング） */
.faq-body h1,
.faq-body h2,
.faq-body h3,
.faq-body h4,
.faq-body h5,
.faq-body h6 {
  color: var(--color-text-muted);
  font-family: var(--font-zen-maru);
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.4;
}

.faq-body h1 {
  font-size: var(--text-xl);
}

.faq-body h2 {
  font-size: var(--text-lg);
}

.faq-body h3,
.faq-body h4,
.faq-body h5,
.faq-body h6 {
  font-size: var(--text-md);
}

.faq-body p {
  margin-bottom: var(--space-md);
}

.faq-body ul,
.faq-body ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.faq-body li {
  margin-bottom: var(--space-xxs);
}

.faq-body a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

.faq-body a:hover {
  color: var(--color-primary-dark);
}

.faq-body strong {
  font-weight: 700;
}

.faq-body code {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  padding: 0.1rem 0.4rem; /* spacing スケール（最小 4px）より小さい微小余白の固定値 */
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9em;
}

/* コードブロック: インラインの装飾を打ち消し、白地・枠・横スクロール（書体は本文と同じ sans） */
.faq-body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.faq-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
}

.faq-body blockquote {
  border-left: 4px solid var(--color-border);
  padding-left: var(--space-md);
  color: var(--color-text-muted);
  margin: var(--space-md) 0;
}

/* 角丸＋横スクロールのラッパー（marked 出力の <table> を包む） */
.faq-body .faq-table {
  width: max-content;       /* 表の内容幅に縮める（余白を作らない） */
  max-width: 100%;          /* 広い表は 100% で頭打ち＋横スクロール */
  overflow: hidden;         /* 角丸で確実にクリップ */
  overflow-x: auto;         /* 横スクロールは許可 */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.faq-body table {
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
  font-size: var(--text-sm);
  white-space: nowrap;
  background: var(--color-surface);
}

/* 罫線は行区切り（横線）のみ。外枠はラッパーが担当 */
.faq-body th,
.faq-body td {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  white-space: normal;
}

.faq-body tr:last-child th,
.faq-body tr:last-child td {
  border-bottom: none;
}

.faq-body th {
  background: var(--color-accent-light);
  font-weight: 600;
  white-space: nowrap;
}

.faq-body em {
  font-style: italic;
}

.faq-body del {
  color: var(--color-text-muted);
}

/* CMS 本文に画像が含まれてもコンテナ幅を超えない */
.faq-body img {
  max-width: 100%;
  height: auto;
}

.faq-body hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-lg) 0;
}

/* レスポンシブ */
@media (max-width: 640px) {
  .site-header {
    padding: var(--space-sm) var(--space-md);
  }

  .header-inner {
    gap: var(--space-xs);
  }

  .site-title {
    gap: var(--space-xxs);
  }

  .site-suffix {
    font-size: var(--text-sm);
  }

  .site-logo {
    height: 20px;
  }

  .footer-logo {
    height: 20px;
  }

  main {
    margin: var(--space-lg) auto;
    padding: 0 var(--space-md);
  }

  /* ページタイトルの型: main のマージンが縮むぶん下マージンも縮めて上下対称を保つ */
  .page-header {
    margin-bottom: var(--space-lg);
  }

  h1 {
    font-size: var(--text-xl);
  }

  h2 {
    font-size: var(--text-lg);
  }

  .faq-detail > h1 {
    font-size: var(--text-xl);
  }

  .faq-body table {
    font-size: var(--text-xs);
  }

  .faq-body th,
  .faq-body td {
    padding: var(--space-xxs) var(--space-xs);
  }

  /* メニューパネル: 内側パディングをモバイル幅に合わせる（上下の呼吸感は維持）。
     下の左右角に丸みを付け、ディムの上に浮くシートらしく見せる */
  .site-menu {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .site-menu-inner {
    padding: var(--space-lg) var(--space-md);
  }

}

/* ===================================================================
   ボタン系クラス 設計指針
   ===================================================================
   このリポのボタン系は4階層で構成する。

   1. primary  = .cta-button
      主要アクション（問い合わせフォームへ等）。teal 塗りつぶし。
   2. secondary = .secondary-button
      副次アクション（写真販売サイトへ等）。teal の塗り（primary より一段弱い）。
   3. text-link = .back-link
      最も控えめなテキストリンク。戻る導線。塗り面なし。
   4. chip      = .cat-chip
      FAQ カテゴリ絞り込みのトグル。faq/index.astro に scoped 実装。
      ここでは設計指針として参照する。

   --- 状態の共通方針 ---
   hover       : インタラクションの事前フィードバック（全クラス）
   focus-visible: キーボード操作の視覚化（全クラス）
   active      : タッチデバイスの押下フィードバック（塗り面があるクラスのみ）
                 primary(.cta-button)  : active = teal 11（--color-primary-dark。白文字でコントラスト確保）
                 secondary             : active = hover と同じ teal 6（さらに濃くすると濃 teal 文字とのコントラスト不足のため共有）
                 中立チップ(.cat-chip) : active = hover と同じグレー（さらに濃い中立トークンを持たないため共有）
   disabled    : 本来は <a> リンクに disabled 概念なし。
                 <button> で使う場合の baseline は末尾を参照。
   =================================================================== */

/* --- text-link: .back-link（テキストリンク。最も控えめな戻る導線） --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.back-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.back-link:focus-visible {
  outline: 2px solid var(--color-primary-border);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* :active は省略。インラインのテキストリンクで塗り面がなく、
   hover / focus-visible で十分なフィードバックが得られるため。 */

/* === 検索欄のクリアボタン（トップ・FAQ 一覧共通） ===
   type="search" 標準の✕はブラウザごとに見た目が異なり Firefox には無いため、
   標準の✕を消して自前の .search-clear で統一する */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* 入力がある間だけ表示する丸ボタン。position: relative な検索欄の右端に置く。
   入力欄側は right(--space-md) + 幅 24px + 余白(--space-xs) ぶんの右 padding を
   確保する前提（各ページの scoped style 側で calc している） */
.search-clear {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
  color: var(--color-icon);
  cursor: pointer;
  transition: background 0.15s;
}

.search-clear:hover {
  background: var(--color-border);
}

.search-clear:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* display:inline-flex が hidden 属性に勝たないよう明示 */
.search-clear[hidden] {
  display: none;
}

/* === 空状態（検索 0 件・データ 0 件＝準備中）共通（FAQ 一覧 / 各種資料 / 動画マニュアル） ===
   イラスト＋テキスト（＋受け皿リンク）を中央寄せする型。
   ページ側は表示制御（hidden / dataEmpty ガード）と文言・リンク先だけを担う */
.no-result-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) 0;
  margin-bottom: var(--space-lg);
}

.no-result-illust {
  display: block;
  filter: grayscale(1);
  opacity: 0.4;
}

.no-result-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 空状態からの受け皿リンク。本文リンク（.faq-body a）と同じ teal＋下線の流儀 */
.no-result-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-primary);
  font-size: var(--text-sm);
  /* 下線はブラウザ既定に頼らず明示する（a のリセットが入ってもリンクの体裁を保つ） */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.no-result-link:hover {
  color: var(--color-primary-dark);
}

.no-result-link:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* display:inline-flex が hidden 属性に勝たないよう明示 */
.no-result-link[hidden] {
  display: none;
}

/* --- 準備中（データ 0 件）のレイアウト ---
   sticky footer で main が flex:1 のため、main を flex 縦積みにして残りの高さを
   ページのルート（.is-preparing）へ渡し、空状態を余白の縦中央に置く。
   :has が使えない環境では上詰めになるだけ（graceful degradation） */
main:has(.is-preparing) {
  display: flex;
  flex-direction: column;
}

.is-preparing {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 空状態ブロック自身が残り高さを占め、内容を縦中央に置く既定形。
   空状態が入れ子コンテナ内にあるページ（動画マニュアル）は、コンテナへの高さの中継をページ側で行う */
.is-preparing .no-result-main {
  flex: 1;
  justify-content: center;
  margin-bottom: 0;
}

/* === Contact CTA（FAQ index / slug 共通） ===
   ページ背景（cream）に対しフラットな白エリア。境界・影は持たせず、
   主張を抑えて「呼びかけ」のまとまりだけを示す。 */
.contact-cta {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-xxl);
  text-align: center;
  margin-top: var(--space-xxl);
}

.contact-cta p {
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* --- primary: .cta-button（主要アクション。teal 塗りつぶし） --- */
.cta-button {
  display: inline-block;
  padding: var(--space-sm) var(--space-xxl);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s;
  /* <button> でも使うため UA のボーダー/フォントをリセット */
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* hover は teal 10（base の teal 9 から少しだけ沈める）。active は一段濃い teal 11 で押下フィードバック */
.cta-button:hover {
  background: var(--color-primary-hover);
}

.cta-button:active {
  background: var(--color-primary-dark);
}

.cta-button:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* .contact-cta 内はアイコン（Mail）＋文字のボタンのため inline-flex で整列する。
   基底 .cta-button（inline-block）への上書きなので、基底定義より後に置く */
.contact-cta .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

/* --- secondary: .secondary-button（副次アクション。teal の塗り） ---
   primary より一段弱い「塗り」で表現する。base は teal 4（cream 背景から馴染みすぎない濃さ）。
   padding は primary と揃え（border 無し）、縦並び時に高さが一致するようにする。 */
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xxl);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

/* hover/active は teal 6（teal 4 から一段濃く）。active をさらに濃くすると
   濃 teal の文字色とのコントラストが不足するため、hover と同色を共有する。 */
.secondary-button:hover,
.secondary-button:active {
  background: var(--color-primary-border);
}

/* outline は薄塗り背景でも視認できるよう、より濃い teal 11（primary と対称）を使う。 */
.secondary-button:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* --- disabled baseline（<button> 要素で無効化が必要な場合の基準） ---
   cta-button / secondary-button は通常 <a> リンクのため disabled 概念なし。
   実フォームの送信ボタン等 <button> として使う場合と、リンクを擬似ボタンとして
   無効化する場合（aria-disabled）で扱いを分ける。実フォームの disabled は利用側で上書き可。 */
/* <button>:disabled … UA がクリックを抑止するため cursor で不可を明示できる */
.cta-button:disabled,
.secondary-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* <a aria-disabled="true"> … 遷移を止めるため pointer-events:none。
   この場合 cursor は親要素が使われ not-allowed は効かないので指定しない。 */
.cta-button[aria-disabled="true"],
.secondary-button[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* --- 送信中スピナー（JS が is-loading を付与。問い合わせフォームの送信ボタン等） ---
   文字（送信中...）の前に currentColor の回転リングを描く。進行中フィードバックの
   本質的なモーションのため prefers-reduced-motion でも止めない */
.cta-button.is-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  margin-right: var(--space-xs);
  vertical-align: -0.15em;
  animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 640px) {
  .contact-cta {
    padding: var(--space-lg) var(--space-md);
  }
}