@charset "UTF-8";
/* =============================================
  main.scss（最終最適化）
============================================= */
/* ---------------------------------------------
  1. Sass built-in
--------------------------------------------- */
/* ---------------------------------------------
  2. 抽象設計トークン（設計の土台）
--------------------------------------------- */
/* ==========================================================================
   _breakpoints.scss
   各ブレークポイントの管理用マップ
   - メディアクエリの条件指定（mq() mixin など）と連携して使用
   ========================================================================== */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* -------------------------
   px → rem 変換関数（基準値: 16px）
------------------------- */
/* -------------------------
   rem → px 変換関数（必要に応じて）
------------------------- */
/* -------------------------
   clamp関数（最小値、推奨値、最大値）
   例：clamp(12rem, 2.5vw, 72rem)
------------------------- */
/* -------------------------
   clamp-rem関数（rem単位でのclamp指定）
   例：clamp-rem(14, 18, 24) → clamp(0.875rem, 1.125rem, 1.5rem)
------------------------- */
/* -------------------------
   strip-unit関数（単位を除去）
   例：strip-unit(16px) → 16
------------------------- */
/* -------------------------
   単位チェック関数（is-rem / is-px）
------------------------- */
/* -------------------------
   map-get-deep関数（ネスト対応）
   例：map-get-deep($themes, woman30s, main)
------------------------- */
/* -------------------------
   map-has-deep関数（ネスト存在チェック）
------------------------- */
/* -------------------------
   z-index取得用ショートカット関数
------------------------- */
/* =============================================
  main.scss（最終最適化）
============================================= */
/* ---------------------------------------------
  1. Sass built-in
--------------------------------------------- */
/* ---------------------------------------------
  2. 抽象設計トークン（設計の土台）
--------------------------------------------- */
/* --------------------------------------------------
   _utils.scss
   ユーティリティ向けの共通変数・関数・mixin定義
   （rem変換・ブレークポイント制御）
-------------------------------------------------- */
/* ------------------------------
   rem変換用のルートフォントサイズ
------------------------------ */
/* ------------------------------
   px → rem 変換関数
   使用例：u.rem(16) → 1rem
------------------------------ */
/* ------------------------------
   メディアクエリ用 mixin
   min-width 専用
   ブレークポイントは abstracts/breakpoints を参照
   使用例：@include mq(sm) { ... }
------------------------------ */
/* ------------------------------
   メディアクエリ用 mixin
   max-width 専用
   指定ブレークポイント未満用
   ブレークポイントは abstracts/breakpoints を参照
   使用例：@include mq-down(sm) { ... }
------------------------------ */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* ---------------------------------------------
  3. グローバルトークン確定（CSS vars / theme seeds）
  ※ foundation/theme が参照するので先に出す
--------------------------------------------- */
/* ==================================================
  Reveal trigger tokens
  - margin と threshold の組み合わせ（single source of truth）
================================================== */
/* ==================================================
  tokens/cssvars/_motion.cssvars.scss
  CSS Custom Properties — Canonical Values

  Source of truth: this file (cssvars)
  - Motion:  --dur-*, --delay-*, --ease-*, --motion-*,
             --reveal-*, --anim-*, --kf-*
  - UI:      --ui-radius-*, --ui-border-*

  Rules
    - このファイルは「値の定義」専用（:root 以外のセレクタは置かない）
  ================================================== */
:root {
  /* durations */
  --dur-150: 150ms;
  --dur-200: 200ms;
  --dur-300: 300ms;
  --dur-350: 350ms;
  --dur-400: 400ms;
  --dur-500: 500ms;
  --dur-600: 600ms;
  /* reveal / large motion scale */
  --dur-700: 700ms;
  --dur-800: 800ms;
  --dur-900: 900ms;
  --dur-1000: 1000ms;
  --dur-1100: 1100ms;
  --dur-1200: 1200ms;
  --dur-1400: 1400ms;
  --dur-1500: 1500ms;
  --dur-1700: 1700ms;
  --dur-2000: 2000ms;
  --dur-3000: 3000ms;
  /* ------------------------------------------
    semantic durations（用途名：新規追加）
    ※既存の --dur-* は残す（互換）
  ------------------------------------------ */
  --motion-hover: var(--dur-200);
  --motion-ui: var(--dur-300);
  --motion-enter: var(--dur-500);
  --motion-reveal: var(--dur-700);
  --motion-slow: var(--dur-1000);
  --motion-cinematic: var(--dur-1400);
  --motion-opacity-start: 0;
  --motion-scale-start: 0.98;
  --motion-blur-start: var(--blur-0, 0px);
  /* dist のデフォルトは「既存の u-anim-dist-24 相当」に合わせるのが安全 */
  --motion-dist: var(--dist-24, 24px);
  /* MV用演出 */
  --motion-hero: var(--dur-3000);
  --motion-mv-zoom: 15000ms;
  /* easing */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;
  /* named presets */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-hover: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: var(--ease-smooth);
  /* delays */
  --delay-0: 0ms;
  --delay-50: 50ms;
  --delay-60: 60ms;
  --delay-90: 90ms;
  --delay-100: 100ms;
  --delay-120: 120ms;
  --delay-150: 150ms;
  --delay-180: 180ms;
  --delay-200: 200ms;
  --delay-260: 260ms;
  --delay-300: 300ms;
  --delay-320: 320ms;
  --delay-400: 400ms;
  --delay-500: 500ms;
  --delay-520: 520ms;
  --delay-700: 700ms;
  --delay-900: 900ms;
  --delay-1100: 1100ms;
  /* distance */
  --dist-0: 0px;
  --dist-4: 4px;
  --dist-6: 6px;
  --dist-8: 8px;
  --dist-10: 10px;
  --dist-12: 12px;
  --dist-14: 14px;
  --dist-16: 16px;
  --dist-18: 18px;
  --dist-20: 20px;
  --dist-22: 22px;
  --dist-24: 24px;
  --dist-28: 28px;
  --dist-32: 32px;
  --dist-40: 40px;
  --dist-48: 48px;
  --dist-50: 50px;
  --dist-56: 56px;
  --dist-64: 64px;
  --dist-72: 72px;
  --dist-96: 96px;
  /* large object */
  --dist-128: 128px;
  --dist-144: 144px;
  --dist-160: 160px;
  /* micro nudge (used for subtle hover/lift) */
  --dist-nudge: calc(var(--dist-8, 8px) * 0.25); /* 2px */
  /* blur scale (canonical) */
  --blur-0: 0px;
  --blur-2: 2px;
  --blur-4: 4px;
  --blur-8: 8px;
  /* --------------------------------------------------
    Keyframe helpers (toast)
    - kf-toast-in が参照する「距離」だけ tokens に寄せる
  -------------------------------------------------- */
  --kf-toast-in-y0: var(--dist-16, 16px); /* 16px */
  --kf-toast-in-y60: calc(var(--dist-nudge, 2px) * -1); /* -2px */
  --toast-offset: var(--dist-8, 8px);
  /* =========================================
   Motion Stagger Tokens
   ========================================= */
  /* 基準（標準） */
  --reveal-stagger: 120ms;
  /* プリセット速度 */
  --reveal-stagger-xs: 60ms;
  --reveal-stagger-sm: 90ms;
  --reveal-stagger-md: 120ms;
  --reveal-stagger-lg: 180ms;
  --reveal-stagger-xl: 260ms;
  /* --------------------------------------------------
  * Motion: Reveal
  * -------------------------------------------------- */
  /* reveal: from */
  --reveal-opacity-start: 0;
  --reveal-scale-start: 0.94;
  --reveal-blur-start: var(--blur-8, 8px);
  /* reveal: to（明示しておくと事故が減る） */
  --reveal-opacity-end: 1;
  --reveal-scale-end: 1;
  --reveal-blur-end: var(--blur-0, 0px);
  /* duration presets */
  --kf-dur-xs: 420ms;
  --kf-dur-sm: 600ms;
  --kf-dur-md: 800ms;
  --kf-dur-lg: 1100ms;
  --kf-dur-xl: 1400ms;
  /* default */
  --kf-dur: var(--dur-1100);
  /* ==================================================
    Base (project default)
    - 建築/コーポレート寄り：重心が低く、止まりが気持ちいい
  ================================================== */
  /* reveal defaults */
  --reveal-delay: var(--delay-0);
  --reveal-ease: var(--ease-smooth);
  /* anim defaults */
  --anim-ease: var(--reveal-ease);
  /* reveal trigger defaults */
  --reveal-root-margin: 0px 0px -35% 0px;
  --reveal-threshold: 0.1;
  /* ==================================================
    Optional: kf compatibility（keyframes側で使うなら）
  ================================================== */
  --kf-ease: var(--reveal-ease);
  /* =========================================
   Motion Duration トークン（reveal semantic）
   - reveal 用の意味名だけここで提供
   ========================================= */
  --reveal-dur-xs: var(--dur-400);
  --reveal-dur-sm: var(--dur-600);
  --reveal-dur-md: var(--dur-800);
  --reveal-dur-lg: var(--dur-1100);
  --reveal-dur-xl: var(--dur-1400);
  /* default */
  --reveal-dur: var(--dur-1100);
  /* -------------------------
    Purpose distances
  ------------------------- */
  --dist-ui: 28px; /* UI標準：迷ったらこれ（24〜32の中庸） */
  --dist-section: 48px; /* セクション/カード標準 */
  --dist-arch: 96px; /* 建築/演出（大きく・ゆっくり） */
  /* -------------------------
    Project default（ここが基準）
    ※ 最初はUI基準にしておくのが事故らない
  ------------------------- */
  --reveal-dist: var(--dist-ui, initial);
  /* compatibility（互換のため） */
  --anim-dist: var(--reveal-dist, initial);
  --kf-dist: var(--reveal-dist, initial);
  /* -------------------------
    Size variants（必要な時だけ）
  ------------------------- */
  --reveal-dist-xs: 20px;
  --reveal-dist-sm: 24px;
  --reveal-dist-md: 28px;
  --reveal-dist-lg: 48px;
  --reveal-dist-xl: 96px;
  /* Direction (optional) */
  --reveal-dist-x: var(--reveal-dist, initial);
  --reveal-dist-y: var(--reveal-dist, initial);
  /* Strength (optional) */
  --reveal-dist-soft: calc(var(--reveal-dist, 28px) * 0.6);
  --reveal-dist-normal: var(--reveal-dist, initial);
  --reveal-dist-strong: calc(var(--reveal-dist, 28px) * 1.4);
  /* Fluid (optional) */
  --reveal-dist-fluid: clamp(24px, 6vw, 96px);
  /* ==================================================
    Radius tokens (CSS vars)
    ================================================== */
  --ui-radius-0: 0px;
  --ui-radius-8: 8px;
  --ui-radius-12: 12px;
  --ui-radius-16: 16px;
  --ui-radius-pill: 9999px;
  /* ==================================================
    Border tokens (CSS vars)
    ================================================== */
  /* border width */
  --ui-border-1: 1px;
  --ui-border-2: 2px;
  --ui-border-3: 3px;
  --ui-border-4: 4px;
  --ui-border-6: 6px;
  /* border style */
  --ui-border-solid: solid;
  --ui-border-dashed: dashed;
  --ui-border-dotted: dotted;
  /* border colors */
  --ui-border-default: #e5e7eb;
  --ui-border-strong: #cbd5e1;
  --ui-border-accent: #3b82f6;
  /* status soft borders */
  --ui-border-success-soft: #a9d8bd;
  --ui-border-warning-soft: #efd27a;
  --ui-border-danger-soft: #efb5bd;
  /* scale */
  --scale-hover: 1.015;
  /* shared component primitives */
  --ui-spin-from: 0deg;
  --ui-spin-to: 360deg;
  /* keyword tokens (audit用) */
  --kw-none: none;
  --kw-transparent: transparent;
}

/* =========================================
   Theme classes
   HTML単位で color / font / mood を切り替えるための公開class
========================================= */
.t-color-kids {
  --color-base: #fffcf4;
  --color-primary: #ffd84d;
  --color-accent: #6e83e7;
  --color-text: #3e4654;
  --color-text-heading: #3e4654;
  --color-text-body: #3e4654;
  --line: #d6dee8;
  --line-soft: #ebf0f5;
  --color-surface: #ffffff;
  --color-surface-soft: #fff8e8;
}

.t-color-boy {
  --color-base: #f7fbff;
  --color-primary: #5bbcff;
  --color-accent: #4d78e6;
  --color-text: #3a485c;
  --color-text-heading: #3a485c;
  --color-text-body: #3a485c;
  --line: #d3e4f3;
  --line-soft: #eaf2f8;
  --color-surface: #ffffff;
  --color-surface-soft: #eef7ff;
}

.t-color-girls {
  --color-base: #fff9fc;
  --color-primary: #ffb8d0;
  --color-accent: #d97bb8;
  --color-text: #4b4353;
  --color-text-heading: #4b4353;
  --color-text-body: #4b4353;
  --line: #ead7e5;
  --line-soft: #f5ebf2;
  --color-surface: #ffffff;
  --color-surface-soft: #fff2f8;
}

.t-color-teenboy {
  --color-base: #f8fafc;
  --color-primary: #2c3e50;
  --color-accent: #00ced1;
  --color-text: #2f3c4c;
  --color-text-heading: #2f3c4c;
  --color-text-body: #2f3c4c;
  --line: #cfd9e4;
  --line-soft: #e7edf3;
  --color-surface: #ffffff;
  --color-surface-soft: #eef7f8;
}

.t-color-teengirl {
  --color-base: #faf0f8;
  --color-primary: #c080d1;
  --color-accent: #6eceda;
  --color-text: #4d4356;
  --color-text-heading: #4d4356;
  --color-text-body: #4d4356;
  --line: #dfd3e6;
  --line-soft: #f1eaf5;
  --color-surface: #ffffff;
  --color-surface-soft: #f8f4fb;
}

.t-color-teenboth {
  --color-base: #f5faf6;
  --color-primary: #007bff;
  --color-accent: #ffa500;
  --color-text: #3f4a54;
  --color-text-heading: #3f4a54;
  --color-text-body: #3f4a54;
  --line: #d4dee8;
  --line-soft: #ecf1f5;
  --color-surface: #ffffff;
  --color-surface-soft: #f7fbff;
}

.t-color-man30s {
  --color-base: #f4f6f8;
  --color-primary: #0d47a1;
  --color-accent: #ffa000;
  --color-text: #37424f;
  --color-text-heading: #37424f;
  --color-text-body: #37424f;
  --line: #cfd8e3;
  --line-soft: #e8edf2;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f9fc;
}

.t-color-woman30s {
  --color-base: #f8f5f3;
  --color-primary: #a67c9b;
  --color-accent: #0097a7;
  --color-text: #4b464d;
  --color-text-heading: #4b464d;
  --color-text-body: #4b464d;
  --line: #ddd7dc;
  --line-soft: #f1ecef;
  --color-surface: #ffffff;
  --color-surface-soft: #faf7f9;
}

.t-color-30sboth {
  --color-base: #fcfcfc;
  --color-primary: #007bff;
  --color-accent: #ffa500;
  --color-text: #3c4652;
  --color-text-heading: #3c4652;
  --color-text-body: #3c4652;
  --line: #d5dce5;
  --line-soft: #edf1f5;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
}

.t-color-senior {
  --color-base: #f4f4f0;
  --color-primary: #5d7261;
  --color-accent: #c96480;
  --color-text: #4a4e48;
  --color-text-heading: #4a4e48;
  --color-text-body: #4a4e48;
  --line: #d7d9d2;
  --line-soft: #eceee8;
  --color-surface: #ffffff;
  --color-surface-soft: #f8f8f4;
}

.t-color-elder {
  --color-base: #f9f9f9;
  --color-primary: #888;
  --color-accent: #111;
  --color-text: #444;
  --color-text-heading: #444;
  --color-text-body: #444;
  --line: #d8d8d8;
  --line-soft: #eeeeee;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f7f7;
}

.t-color-catcafe {
  --color-base: #fffaf4;
  --color-primary: #c58f6a;
  --color-accent: #f4b6c2;
  --color-text: #4d4743;
  --color-text-heading: #4d4743;
  --color-text-body: #4d4743;
  --line: #e4d9ce;
  --line-soft: #f3ece5;
  --color-surface: #ffffff;
  --color-surface-soft: #fff5ef;
}

.t-color-petshop {
  --color-base: #fdfcf8;
  --color-primary: #6aa87c;
  --color-accent: #f2b36d;
  --color-text: #445148;
  --color-text-heading: #445148;
  --color-text-body: #445148;
  --line: #dbe4d8;
  --line-soft: #eef3ec;
  --color-surface: #ffffff;
  --color-surface-soft: #f7fbf6;
}

.t-color-cute {
  --color-base: #fff8fb;
  --color-primary: #f29bb2;
  --color-accent: #8ecae6;
  --color-text: #514751;
  --color-text-heading: #514751;
  --color-text-body: #514751;
  --line: #eadde6;
  --line-soft: #f6eef3;
  --color-surface: #ffffff;
  --color-surface-soft: #fff2f7;
}

.t-color-natural-cafe {
  --color-base: #f8f5ef;
  --color-primary: #8b6b4a;
  --color-accent: #9cc5a1;
  --color-text: #4c463f;
  --color-text-heading: #4c463f;
  --color-text-body: #4c463f;
  --line: #ddd7cc;
  --line-soft: #f0ece5;
  --color-surface: #ffffff;
  --color-surface-soft: #faf8f3;
}

.t-color-soft-pop {
  --color-base: #fffaf6;
  --color-primary: #ffb703;
  --color-accent: #8ecae6;
  --color-text: #4a4743;
  --color-text-heading: #4a4743;
  --color-text-body: #4a4743;
  --line: #e4ddd2;
  --line-soft: #f4eee6;
  --color-surface: #ffffff;
  --color-surface-soft: #fff6ea;
}

.t-font-neutral {
  --font-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-accent: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.t-font-soft {
  --font-base: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-heading: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-accent: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --font-family-base: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-family-heading: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-family-accent: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
}

.t-font-friendly {
  --font-base: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-heading: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --font-accent: "M PLUS Rounded 1c", sans-serif;
  --font-family-base: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-family-heading: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --font-family-accent: "M PLUS Rounded 1c", sans-serif;
}

.t-font-casual {
  --font-base: "Noto Sans JP", system-ui, sans-serif;
  --font-heading: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-accent: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-family-base: "Noto Sans JP", system-ui, sans-serif;
  --font-family-heading: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-family-accent: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}

.t-font-modern {
  --font-base: "Inter", system-ui, sans-serif;
  --font-heading: "Poppins", "Inter", system-ui, sans-serif;
  --font-accent: "Poppins", "Inter", sans-serif;
  --font-family-base: "Inter", system-ui, sans-serif;
  --font-family-heading: "Poppins", "Inter", system-ui, sans-serif;
  --font-family-accent: "Poppins", "Inter", sans-serif;
}

.t-font-chic {
  --font-base: "Shippori Mincho", "Yu Mincho", serif;
  --font-heading: "Shippori Mincho", "Yu Mincho", serif;
  --font-accent: "Shippori Mincho", "Yu Mincho", serif;
  --font-family-base: "Shippori Mincho", "Yu Mincho", serif;
  --font-family-heading: "Shippori Mincho", "Yu Mincho", serif;
  --font-family-accent: "Shippori Mincho", "Yu Mincho", serif;
}

.t-font-classic {
  --font-base: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-heading: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-accent: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-base: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-heading: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-accent: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.t-font-technical {
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-accent: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

.t-font-biz-gothic {
  --font-base: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-heading: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-accent: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-family-base: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-family-heading: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-family-accent: "BIZ UDPGothic", "BIZ UDゴシック", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

.t-font-biz-mincho {
  --font-base: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-heading: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-accent: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-base: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-heading: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-family-accent: "BIZ UDPMincho", "BIZ UD明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.t-font-textbook {
  --font-base: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-heading: "UD Digi Kyokasho NK-B", "UD デジタル 教科書体 NK", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-accent: "UD Digi Kyokasho NP-B", "UD デジタル 教科書体 NP", "BIZ UDPGothic", sans-serif;
  --font-family-base: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-family-heading: "UD Digi Kyokasho NK-B", "UD デジタル 教科書体 NK", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-family-accent: "UD Digi Kyokasho NP-B", "UD デジタル 教科書体 NP", "BIZ UDPGothic", sans-serif;
}

.t-font-system-jp {
  --font-base: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-heading: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-accent: "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-family-base: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-family-heading: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-family-accent: "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

.t-mood-clean {
  --ui-radius-8: 8px;
  --mood-letter-spacing: 0.01em;
  --mood-line-height: 1.6;
}

.t-mood-warm {
  --ui-radius-8: 12px;
  --mood-letter-spacing: 0.02em;
  --mood-line-height: 1.8;
}

.t-mood-luxury {
  --ui-radius-8: 10px;
  --mood-letter-spacing: 0.04em;
  --mood-line-height: 1.7;
}

.t-mood-dark {
  --ui-radius-8: 8px;
  --mood-letter-spacing: 0.02em;
  --mood-line-height: 1.7;
}

.t-mood-playful {
  --ui-radius-8: 14px;
  --mood-letter-spacing: 0.01em;
  --mood-line-height: 1.6;
}

.t-mood-minimal {
  --ui-radius-8: 6px;
  --mood-letter-spacing: 0;
  --mood-line-height: 1.5;
}

/* ---------------------------------------------
  4. CSSリセット（基礎）
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

ol,
ul {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

select,
textarea,
input:not([type=checkbox], [type=radio]) {
  font: inherit;
  color: inherit;
  appearance: none;
  outline: none;
  background: none;
  border: none;
}

button:disabled,
input:disabled {
  cursor: var(--state-disabled-cursor, auto);
}

[type=button],
[type=reset],
[type=submit] {
  appearance: button;
  appearance: auto;
}

[type=search] {
  appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text, var(--color-text-body, #333));
  background-color: #fcfcfc;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

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

a,
button,
[role=button],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ========================================
   Interaction / Accessibility base behavior
======================================== */
/* 対象要素をまとめて指定（プロジェクト標準） */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none; /* outlineは使わない（統一） */
  box-shadow: var(--ui-focus-ring, var(--kw-none));
}

/* マウス操作などで出ないようにする（UA差分も吸収） */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.8;
}

small,
.small {
  font-size: 0.875rem;
  color: #666;
}

strong {
  font-weight: bold;
}

blockquote {
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #111;
  border-left: 0.25rem solid #007bff;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}

.caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #666;
}

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #e0e6ed;
}

figure {
  margin: 0 0 1.5rem;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #666;
}

legend {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

main p a,
main li a,
.text-base a,
.text-sub a,
.c-feature__text a {
  color: #007bff;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.15em;
  transition: opacity var(--motion-enter) var(--ease-in-out);
}
main p a:hover,
main li a:hover,
.text-base a:hover,
.text-sub a:hover,
.c-feature__text a:hover {
  color: rgb(0, 98.4, 204);
  opacity: 0.7;
  text-decoration: none;
}
main p a:focus-visible,
main li a:focus-visible,
.text-base a:focus-visible,
.text-sub a:focus-visible,
.c-feature__text a:focus-visible {
  color: rgb(0, 98.4, 204);
}
main p a:visited,
main li a:visited,
.text-base a:visited,
.text-sub a:visited,
.c-feature__text a:visited {
  color: #6b4bb8;
}

/* ------------------------
   ■ テーマスタイル適用
------------------------ */
body {
  font-family: var(--font-base, Shippori Mincho, Yu Mincho, serif);
  letter-spacing: var(--mood-letter-spacing, 0.04em);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, Shippori Mincho, Yu Mincho, serif);
}

.u-font-accent {
  font-family: var(--font-accent, Shippori Mincho, Yu Mincho, serif);
}

/* ---------------------------------------------
  5. HTML要素系（タグスタイル）
--------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul,
ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ul li,
ol li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

dl {
  margin-bottom: 1rem;
}

dt {
  margin-top: 0.5rem;
  font-weight: bold;
}

dd {
  margin-left: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading, Shippori Mincho, Yu Mincho, serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-heading, #111);
}

h1 {
  font-size: clamp(1.5rem, 6.4vw, 2.7rem);
  line-height: 1.22;
}

h2 {
  font-size: clamp(1.35rem, 4vw, 2.25rem);
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.2rem, 4.4vw, 1.625rem);
  line-height: 1.35;
}

h4 {
  font-size: clamp(1.1rem, 3.8vw, 1.375rem);
  line-height: 1.4;
}

h5 {
  font-size: clamp(1rem, 3.4vw, 1.125rem);
  line-height: 1.45;
}

h6 {
  font-size: clamp(0.95rem, 3vw, 1rem);
  line-height: 1.5;
}

.c-heading {
  display: grid;
  gap: 0;
  margin-block-end: clamp(24px, 4vw, 48px);
}

.c-heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  font-family: var(--font-accent, Shippori Mincho, Yu Mincho, serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.c-heading__eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.c-heading__title {
  max-inline-size: 60rem;
  margin-block: 0 clamp(12px, 2vw, 20px);
  color: var(--color-text-heading, #111);
}

.c-heading__lead-wrap {
  margin-inline: auto;
}

.c-heading__lead {
  max-inline-size: none;
  margin: 0;
  font-family: var(--font-base, Shippori Mincho, Yu Mincho, serif);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.9;
  text-align: left;
}

.c-heading > .c-badge {
  justify-self: center;
  margin-block-end: clamp(8px, 1.2vw, 12px);
}

.c-heading--center {
  justify-items: center;
}

.c-heading--center .c-heading__title,
.c-heading--center .c-heading__lead {
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .c-heading {
    margin-block-end: 1.5rem;
  }
  .c-heading__eyebrow {
    gap: 0.625rem;
    margin-block-end: 0.625rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
  .c-heading__eyebrow::after {
    width: 1.75rem;
  }
  .c-heading > .c-badge {
    margin-block-end: 0.625rem;
  }
  .c-heading__lead {
    font-size: 1rem;
    line-height: 1.8;
  }
}
/* ==================================================
  Tile Heading
  LP向けの分割強調見出し
================================================== */
.c-tile-heading {
  display: inline-flex;
  gap: var(--ui-border-1);
  margin: 0;
  color: var(--ui-on-primary);
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-tile-heading span {
  display: grid;
  place-items: center;
  min-inline-size: 1.2em;
  padding: 0.12em 0.18em;
  background: var(--color-accent);
}

/* ---------------------------------------------
  6. テーマ適用レイヤー（root の割り当て）
  ※ tokens が先 / foundation は utilities より前が安全
--------------------------------------------- */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* ---------------------------------------------
  3. グローバルトークン確定（CSS vars / theme seeds）
  ※ foundation/theme が参照するので先に出す
--------------------------------------------- */
/* tokens/effects/_effects.scss */
:root {
  /* ==================================================
    0) Layout primitives
    Source of truth: layout layer defaults
  ================================================== */
  --container-max: 2000px;
  --gutter: clamp(var(--dist-16, 16px), 3vw, var(--dist-24, 24px));
  --section-space: clamp(var(--dist-32, 32px), 4vw, var(--dist-64, 64px));
  --stack-gap: var(--dist-24, 24px);
  /* ==================================================
    1) UI core tokens
    Source of truth: tokens/theme/design.themes (mood scale)
    Bridge: none
    Notes:
    - UI全体の基準値（角丸 / 字間 / 行間）
  ================================================== */
  --ui-radius: 10px;
  --ui-letter-spacing: 0.04em;
  --ui-letter-spacing-spaced: 0.08em;
  --ui-letter-spacing-wide: 0.12em;
  --ui-line-height: 1.7;
  --ui-line-height-none: 1;
  --ui-line-height-compact: 1.4;
  --ui-line-height-normal: 1.6;
  --ui-line-height-relaxed: 1.7;
  --ui-line-height-loose: 2;
  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.875rem;
  --ui-font-size-md: 1rem;
  --ui-font-size-lg: 1.125rem;
  --ui-font-size-xl: 1.25rem;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-control-size-sm: 1.125rem;
  --ui-control-size-md: 1.25rem;
  --ui-grid-track-collapsed: 0fr;
  --ui-grid-track-expanded: 1fr;
  --ui-grid-template-cols-1: repeat(1, minmax(0, 1fr));
  --ui-grid-template-cols-2: repeat(2, minmax(0, 1fr));
  --ui-grid-template-cols-4: repeat(4, minmax(0, 1fr));
  --ui-ratio-square: 1 / 1;
  --ui-ratio-standard: 4 / 3;
  --ui-ratio-portrait: 4 / 5;
  --ui-ratio-wide: 16 / 9;
  --ui-opacity-hidden: 0;
  --ui-opacity-visible: 1;
  --ui-opacity-muted: 0.6;
  --ui-cursor-pointer: pointer;
  --ui-pointer-events-auto: auto;
  --ui-size-full: 100%;
  --ui-content-width-sm: 34rem;
  --ui-content-width-lg: 54rem;
  --ui-section-block-fluid: clamp(var(--dist-64), 8vw, var(--dist-128));
  --ui-gap-fluid-sm: clamp(var(--dist-16), 2vw, var(--dist-24));
  --ui-gap-fluid-lg: clamp(var(--dist-28), 4vw, var(--dist-56));
  --ui-panel-width-sm: 360px;
  --ui-panel-width-md: 30rem;
  /* ==================================================
    1.5) Foundation bridge tokens
    Source of truth: foundation decision
    Notes:
    - header / footer / nav などで使う不足変数
    - 既存トークン体系へ寄せるための bridge
  ================================================== */
  --space-1: var(--dist-8, 8px);
  --space-2: var(--dist-12, 12px);
  --space-3: var(--dist-16, 16px);
  --space-4: var(--dist-24, 24px);
  --line: var(--color-border, #e5e7eb);
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --letter-tight: -0.04em;
  --line-width-1: var(--ui-border-1, 1px);
  --line-width-2: var(--ui-border-2, 2px);
  --size-touch-target-md: 44px;
  --size-header-height-md: 64px;
  --size-icon-hamburger-inline: 18px;
  --size-icon-hamburger-block: 12px;
  --angle-45: 45deg;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --marker-bg-soft: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --blur-sm: 6px;
  --blur-md: 10px;
  /* ==================================================
    2) Shadow
  ================================================== */
  --shadow-0: none;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-4: 0 28px 80px rgba(0, 0, 0, 0.18);
  --ui-elev-0: var(--shadow-0, var(--kw-none));
  --ui-elev-1: var(--shadow-1, var(--kw-none));
  --ui-elev-2: var(--shadow-2, var(--kw-none));
  --ui-elev-3: var(--shadow-3, var(--kw-none));
  --ui-elev-4: var(--shadow-4, var(--kw-none));
  --ui-shadow: var(--shadow-2, var(--kw-none));
  --ui-shadow-hover: var(--shadow-3, var(--kw-none));
  --ui-shadow-outline: 0 0 0 0.1875rem rgba(0, 0, 0, 0.1);
  --ui-shadow-inset-press: inset 0.1875rem 0.1875rem 0.25rem rgba(0, 0, 0, 0.2);
  --hover-shadow: var(--shadow-3, var(--kw-none));
  /* ==================================================
    3) Focus ring (a11y)
  ================================================== */
  --ui-focus-ring: 0 0 0 3px rgba(255, 165, 0, 0.35);
  --ui-focus-offset: 2px;
  /* ==================================================
    4) On-colors (text on surfaces)
  ================================================== */
  --ui-on-primary: #fff;
  --ui-on-accent: #fff;
  --ui-on-muted: #111;
  --ui-on-white: #111;
  --ui-on-dark: #fff;
  /* ==================================================
    5) Base UI colors
  ================================================== */
  --ui-focus: #66afe9;
  --ui-bg-base: #fff;
  --ui-bg-muted: #f5f5f5;
  --ui-bg-soft: #f0f0f0;
  --ui-bg-surface: #f9f9f9;
  --ui-bg-accent: #f5faf6;
  --ui-bg-contrast: #101114;
  --ui-bg-success-soft: #e9f7ef;
  --ui-bg-warning-soft: #fff8e1;
  --ui-bg-danger-soft: #fdecee;
  --ui-bg-surface-translucent: color-mix(in srgb, var(--panel-bg) 52%, var(--kw-transparent));
  --ui-text-on-contrast: #fff;
  /* ==================================================
    6) Motion assignment (hover)
  ================================================== */
  --hover-dur: var(--motion-hover);
  --hover-ease: var(--ease-hover);
  /* ==================================================
    7) Colors (theme palette)
  ================================================== */
  --color-primary: #007bff;
  --color-accent: #ffa500;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;
  --color-bg: #fcfcfc;
  --color-surface: #fff;
  --color-surface-soft: var(--surface-soft);
  --color-surface-warm: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  --color-text-heading: #111;
  --color-text-body: #333;
  --color-text-main: #2f4f4f;
  --color-text-sub: #666;
  --color-text-white: #fff;
  --color-border: #e0e6ed;
  --color-link: #007bff;
  --color-link-hover: rgb(0, 98.4, 204);
  --color-link-visited: #6b4bb8;
  --color-form-placeholder: #9ca3af;
  --ui-disabled-bg: #f3f4f6;
  --ui-disabled-border: #d1d5db;
  --ui-disabled-text: #9ca3af;
  /* ==================================================
    8) Overlay
  ================================================== */
  --ui-overlay-strong: rgba(0, 0, 0, 0.45);
  --ui-overlay-weak: rgba(0, 0, 0, 0.06);
  --ui-overlay-warm: rgb(248 244 236 / 74%);
  /* ==================================================
    9) Font
  ================================================== */
  --font-base: Shippori Mincho, Yu Mincho, serif;
  --font-heading: Shippori Mincho, Yu Mincho, serif;
  --font-accent: Shippori Mincho, Yu Mincho, serif;
  /* ==================================================
    10) Z-index
  ================================================== */
  --z-modal: 900;
  --z-overlay: ;
  --z-drawer: 400;
  --z-tooltip: 980;
  --z-dropdown: 100;
  --z-toast: 950;
  --z-header: 200;
  --ui-z-notification: 950;
  /* ==================================================
    11) Header
    Header variants
    Source of truth: layouts/header/_header-variants.scss
  ================================================== */
  --header-glass-bg: var(--color-surface, #fff);
  --header-glass-bg-dark: var(--ui-bg-contrast, #111827);
  --header-glass-bg-scrolled: var(--ui-bg-contrast, #111827);
  --header-glass-blur: var(--blur-md, initial);
  --header-glass-blur-scrolled: var(--blur-sm, initial);
  --header-shadow-scrolled: var(--shadow-2, var(--kw-none));
  --header-shadow-glass-scrolled: var(--shadow-3, var(--kw-none));
  --header-nav-current-color: var(--color-text-heading, #111827);
  --header-nav-current-border: var(--color-accent, #f59e0b);
  --header-nav-pill-bg-current: transparent;
  --header-nav-pill-bg-hover: var(--ui-bg-soft, #f3f4f6);
  --header-nav-pill-bg-current: #eceff3;
  --header-nav-cta-bg: var(--color-accent, #f59e0b);
  --header-nav-cta-bg-hover: var(--color-accent, #f59e0b);
  --header-nav-cta-fg: var(--color-text-heading, #111827);
  --header-nav-link-padding-block: var(--space-2, var(--dist-12, 12px));
  --header-nav-link-padding-inline: var(--space-3, var(--dist-16, 16px));
  --header-nav-toggle-icon-inline: var(--size-icon-hamburger-inline, initial);
  --header-nav-toggle-icon-block: var(--size-icon-hamburger-block, initial);
  --header-nav-toggle-line-thickness: var(--line-width-2, initial);
  --header-nav-toggle-line-offset: var(--space-1, var(--dist-8, 8px));
  --header-h: var(--size-header-height-md, initial);
  --header-toggle-border-scrolled: var(--line, var(--color-border, #e5e7eb));
  --header-padding-block: var(--space-3, var(--dist-16, 16px));
  --touch-target-min: var(--size-touch-target-md, 0px);
  /* ==================================================
     12) Scene
  ================================================== */
  --scene-bg: #f8f5ef;
  --scene-panel-bg: rgba(251, 248, 243, 0.92);
  --scene-min-h: 460px;
  --scene-media-min: 340px;
  --scene-media-min-sp: 260px;
  --scene-panel-max: 460px;
  --scene-panel-shadow: var(--ui-elev-2, var(--kw-none));
}

:root {
  /* ==================================================
    Motion keyframe vars (defaults)
    Source of truth (base motion tokens):
    - tokens/cssvars/_motion.cssvars.scss
    Ownership:
    - This file defines ONLY per-keyframe vars (--kf-*-*)
      to avoid hard-coded transform/opacity inside @keyframes.
    Constraints:
    - Do NOT define canonical motion vars here:
      --dur-*, --delay-*, --ease-*,
      --reveal-*, --anim-*,
      --kf-dur, --kf-ease, --kf-dist
  ================================================== */
  /* ----------------------------------------
    Shared / helpers
  ---------------------------------------- */
  /* (no canonical declarations here; reference existing vars only) */
  /* ----------------------------------------
    kf-fade-in
  ---------------------------------------- */
  --kf-fade-in-o0: 0;
  --kf-fade-in-o1: 1;
  --kf-fade-in-t0: translateY(calc(var(--kf-dist, 28px) * 0.7));
  --kf-fade-in-t1: translateY(0);
  /* ----------------------------------------
    kf-scale-in
  ---------------------------------------- */
  --kf-scale-in-o0: 0;
  --kf-scale-in-o1: 1;
  --kf-scale-in-t0: scale(0.9);
  --kf-scale-in-t1: scale(1);
  /* ----------------------------------------
    kf-slide-in
  ---------------------------------------- */
  --kf-slide-in-o0: 0;
  --kf-slide-in-o1: 1;
  --kf-slide-in-t0: translateY(var(--kf-dist, 28px));
  --kf-slide-in-t1: translateY(0);
  /* ----------------------------------------
    kf-pop-in
  ---------------------------------------- */
  --kf-pop-in-o0: 0;
  --kf-pop-in-o65: 1;
  --kf-pop-in-o100: 1;
  --kf-pop-in-t0: scale(0.82);
  --kf-pop-in-t65: scale(1.06);
  --kf-pop-in-t100: scale(1);
  /* ----------------------------------------
    kf-fade-up
  ---------------------------------------- */
  --kf-fade-up-o0: 0;
  --kf-fade-up-o1: 1;
  --kf-fade-up-t0: translateY(var(--kf-dist, 28px));
  --kf-fade-up-t1: translateY(0);
  /* ----------------------------------------
    kf-toast-in
    - 16px / -2px は tokens 寄せ（距離トークン＋算術で表現）
    - NOTE: -2px 相当は dist-16 * -0.125
  ---------------------------------------- */
  --kf-toast-in-o0: 0;
  --kf-toast-in-o60: 1;
  --kf-toast-in-o100: 1;
  --kf-toast-in-s0: 0.98;
  --kf-toast-in-s60: 1.01;
  --kf-toast-in-s100: 1;
  --kf-toast-in-t0: translateY(var(--kf-toast-in-y0, initial)) scale(var(--kf-toast-in-s0, initial));
  --kf-toast-in-t60: translateY(var(--kf-toast-in-y60, initial))
    scale(var(--kf-toast-in-s60, initial));
  --kf-toast-in-t100: translateY(0) scale(var(--kf-toast-in-s100, initial));
  /* ----------------------------------------
    kf-shake
  ---------------------------------------- */
  --kf-shake-t0: translateX(0);
  --kf-shake-t20: translateX(calc(var(--kf-dist, 28px) * -0.15));
  --kf-shake-t40: translateX(calc(var(--kf-dist, 28px) * 0.15));
  --kf-shake-t60: translateX(calc(var(--kf-dist, 28px) * -0.15));
  --kf-shake-t80: translateX(calc(var(--kf-dist, 28px) * 0.15));
  --kf-shake-t100: translateX(0);
  /* ----------------------------------------
    Spin defaults (component keyframes use vars)
  ---------------------------------------- */
  --icon-spin-from: var(--ui-spin-from, initial);
  --icon-spin-to: var(--ui-spin-to, initial);
  --icon-rotate-45: var(--angle-45, initial);
  /* Swiper timing (token derived) */
  --swiper-speed: calc(var(--dur-400) + var(--dur-400)); /* 800ms */
  --swiper-delay: calc(var(--dur-2000) + var(--dur-2000)); /* 4000ms */
}

/* ==================================================
   Root theme API
   - Generic semantic variables for reusable components
   - Export only
   - Semantic color derivation lives in color.tokens.scss
================================================== */
:root {
  /* --------------------------------------
     Typography
  -------------------------------------- */
  --heading: #ffa500;
  --text: #3c4652;
  --text-soft: rgb(134.1, 140.3, 147.74);
  /* --------------------------------------
     Surface
  -------------------------------------- */
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --panel-bg: rgb(255, 248.7, 237.15);
  /* --------------------------------------
     Border / line
  -------------------------------------- */
  --border: #d5dce5;
  --border-soft: #edf1f5;
  /* --------------------------------------
     Card
     NOTE:
     - card は generic surface variation として
       まだ保留で root に残す
     - badge / cta / price のような strong meaning /
       component-specific var はここに置かない
  -------------------------------------- */
  --card-bg: #ffffff;
  --card-border: #edf1f5;
  /* --------------------------------------
     state
  -------------------------------------- */
  --state-disabled-cursor: not-allowed;
  --state-disabled-opacity: 0.6;
}

/* ---------------------------------------------
  7. レイアウト（骨組み）
--------------------------------------------- */
.c-container {
  max-width: 45rem;
  padding-inline: 1rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .c-container {
    padding-inline: 1.5rem;
  }
}

/* =============================================
  main.scss（最終最適化）
============================================= */
/* ---------------------------------------------
  1. Sass built-in
--------------------------------------------- */
/* ---------------------------------------------
  2. 抽象設計トークン（設計の土台）
--------------------------------------------- */
.l-inner {
  max-width: 60rem;
  padding-inline: 1rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .l-inner {
    padding-inline: 1.5rem;
  }
}

.l-container {
  width: 100%;
  max-width: var(--container-max, 0px);
  padding-inline: var(--gutter, clamp(16px, 5vw, 24px));
  margin-inline: auto;
}

.c-stack {
  display: grid;
  gap: var(--stack-gap, var(--dist-24, 24px));
}

.c-stack--cta {
  --stack-gap: var(--dist-32, 32px);
  align-items: center;
}

.c-stack.c-stack--gap-16 {
  --stack-gap: var(--dist-16, 16px);
}

.c-stack.c-stack--gap-24 {
  --stack-gap: var(--dist-24, 24px);
}

.c-stack.c-stack--gap-32 {
  --stack-gap: var(--dist-32, 32px);
}

.l-layout {
  display: grid;
  grid-template-areas: "sidebar content";
  grid-template-columns: 240px 1fr;
  gap: var(--layout-gap, var(--dist-24, 24px));
}

@media screen and (max-width: 768px) {
  .l-layout {
    grid-template-areas: "content" "sidebar";
    grid-template-columns: 1fr;
  }
}
/* layouts/_section.scss */
/* ==================================================
   Section base
================================================== */
.l-section {
  padding-block: var(--section-space);
  background: var(--color-surface);
}

/* ==================================================
   Section background modifiers
================================================== */
.l-section.is-bg-base {
  background: var(--color-surface);
}

.l-section.is-bg-soft {
  background: var(--color-surface-soft);
}

.l-section.is-bg-warm {
  background: var(--color-surface-warm);
}

.l-section.is-bg-dark {
  background: var(--ui-bg-contrast);
}

/* ==================================================
   Section spacing modifiers
================================================== */
.l-section.is-compact {
  padding-block: clamp(var(--dist-48), 6vw, var(--dist-96));
}

.l-section.is-spacious {
  padding-block: clamp(var(--dist-72), 10vw, var(--dist-144));
}

/* layouts/_grid.scss */
/* base */
.l-grid {
  --grid-gap: var(--dist-24, 24px);
  display: grid;
  gap: var(--grid-gap, var(--dist-24, 24px));
}

/* ==================================================
   Columns (explicit)
   - 例外で2/3/4列が必要な時だけ使う
================================================== */
.l-grid.l-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l-grid.l-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l-grid.l-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ==================================================
   Cards preset
   - カード一覧用のプリセット
================================================== */
/* SP: 1列 / md+: 2列 */
.l-grid.l-grid--cards-2 {
  gap: var(--grid-gap, var(--dist-24, 24px));
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .l-grid.l-grid--cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP: 1列 / md+: 2列 / lg+: 3列 */
.l-grid.l-grid--cards-3 {
  gap: var(--grid-gap, var(--dist-24, 24px));
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .l-grid.l-grid--cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1024px) {
  .l-grid.l-grid--cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* SP: 1列 / md+: 2列 / xl+: 3列 */
.l-grid.l-grid--cards-2xl-3 {
  gap: var(--grid-gap, var(--dist-24, 24px));
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .l-grid.l-grid--cards-2xl-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1280px) {
  .l-grid.l-grid--cards-2xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* SP: 1列 / md+: 2列 */
.l-grid.l-grid--stack-2 {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .l-grid.l-grid--stack-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* cards preset 内では card の幅上限を解除
   - grid cell を素直に埋める
*/
.l-grid.l-grid--cards-2 > .c-card,
.l-grid.l-grid--cards-3 > .c-card,
.l-grid.l-grid--cards-2xl-3 > .c-card {
  max-inline-size: none;
}

/* ==================================================
   Uniform height
================================================== */
.l-grid.l-grid--cards-uniform {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.l-grid.l-grid--cards-uniform .c-card {
  height: 100%;
}

/* gateGrid */
.l-grid.l-grid--cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--grid-gap, var(--dist-16, 16px));
}

/* equal rows */
.l-grid.l-grid--equal-rows {
  grid-auto-rows: minmax(0, 1fr);
}

/* flow column */
.l-grid.l-grid--flow-col {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

/* dense */
.l-grid.l-grid--dense {
  grid-auto-flow: dense;
}

/* ==================================================
   Header structure
================================================== */
.site-header {
  --header-inner-gap: var(--dist-16, 16px);
  --header-inner-min-block: clamp(52px, 6vw, 68px);
  --header-inner-pad-inline: clamp(16px, 3vw, 32px);
  --header-title-logo-width: clamp(120px, 12vw, 180px);
  --header-nav-pad-inline: clamp(16px, 3vw, 32px);
  --header-nav-pad-block-end: var(--dist-8, 8px);
  --header-nav-col-gap: var(--dist-16, 16px);
  --header-nav-row-gap: var(--dist-8, 8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-inner-gap, 0px);
  min-block-size: var(--header-inner-min-block, 0px);
  padding-inline: var(--header-inner-pad-inline, 0px);
}

.site-title {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  line-height: 1.15;
}
.site-title__link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.site-title__logo {
  display: block;
  width: var(--header-title-logo-width, 0px);
  height: auto;
}

.site-nav {
  width: 100%;
  padding-inline: var(--header-nav-pad-inline, 0px);
  padding-block-start: 0;
  padding-block-end: var(--header-nav-pad-block-end, 0px);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--header-nav-col-gap, 0px);
  row-gap: var(--header-nav-row-gap, 0px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* ==================================================
   Header style
================================================== */
.site-header {
  position: sticky;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  padding-block: clamp(10px, 1.2vw, 14px);
  margin: 0;
  line-height: 1;
}

.site-title {
  color: var(--color-text-heading, #111827);
  text-decoration: none;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  letter-spacing: 0.02em;
}

.site-title:visited {
  color: var(--color-text-heading, #111827);
}

.site-title__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-title__link:hover,
.site-title__link:focus-visible {
  opacity: 0.86;
}

.site-title__logo {
  display: block;
  inline-size: auto;
  block-size: clamp(56px, 6vw, 72px);
}

.site-header__inner,
.site-nav {
  position: relative;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--touch-target-min, 0px);
  text-decoration: none;
  color: inherit;
  padding-block: var(--header-nav-link-padding-block, 0px);
  padding-inline: max(6px, var(--header-nav-link-padding-inline, currentColor));
  border-radius: var(--ui-radius-pill, 9999px);
  border: var(--ui-border-1, 1px) var(--ui-border-solid, solid) transparent;
  transition: background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard), color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    border-color: var(--line, var(--color-border, #e5e7eb));
    background-color: var(--header-nav-pill-bg-hover, currentColor);
    color: var(--color-text-heading, #111827);
    opacity: 0.8;
  }
}
.site-nav a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring, var(--kw-none));
}

/* current */
.site-nav a.is-current {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-heading, #111827);
  border-color: var(--header-nav-current-border, var(--color-accent, #f59e0b));
  background-color: transparent;
}

.site-nav a.is-current::after {
  inline-size: 100%;
  opacity: 1;
}

/* header nav CTA */
.site-nav a.site-nav__cta {
  border-color: transparent;
  background: var(--header-nav-cta-bg, currentColor);
  color: var(--header-nav-cta-fg, currentColor);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a.site-nav__cta:hover {
    background: var(--header-nav-cta-bg-hover, currentColor);
    border-color: transparent;
  }
}
.site-nav a.site-nav__cta:focus-visible {
  box-shadow: var(--ui-focus-ring, var(--kw-none));
}

/* ==================================================
   Hamburger button (visual)
================================================== */
.site-nav-toggle {
  inline-size: var(--touch-target-min, 0px);
  block-size: var(--touch-target-min, 0px);
  display: inline-grid;
  place-items: center;
  line-height: 1;
  border: var(--ui-border-1, 1px) var(--ui-border-solid, solid) var(--line, #e5e7eb);
  border-radius: var(--ui-radius-pill, 9999px);
  background: transparent;
  color: var(--color-text-heading, #111827);
  transition: background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}

.site-nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring, var(--kw-none));
}

.site-nav-toggle__icon {
  position: relative;
  display: block;
  inline-size: var(--header-nav-toggle-icon-inline, 0px);
  block-size: 14px;
  color: var(--color-text-heading, #111827);
  background: linear-gradient(currentColor 0 0) center/100% var(--header-nav-toggle-line-thickness, initial) no-repeat;
}

.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--header-nav-toggle-line-thickness, 0px);
  background: currentColor;
  border-radius: var(--ui-radius-pill, 9999px);
  transform-origin: center;
  transition: transform var(--dur-200) var(--ease-standard), inset-block-start var(--dur-200) var(--ease-standard), inset-block-end var(--dur-200) var(--ease-standard), inline-size var(--dur-200) var(--ease-standard);
}

.site-nav-toggle__icon::before {
  inset-block-start: 0;
}

.site-nav-toggle__icon::after {
  inset-block-end: 0;
}

.site-header.is-nav-open .site-nav-toggle__icon {
  background: none;
  block-size: var(--header-nav-toggle-icon-inline, 0px);
}

.site-header.is-nav-open .site-nav-toggle__icon::before,
.site-header.is-nav-open .site-nav-toggle__icon::after {
  inset-inline: 50%;
  inset-block-start: 50%;
  inset-block-end: auto;
  inline-size: var(--header-nav-toggle-icon-inline, 0px);
}

.site-header.is-nav-open .site-nav-toggle__icon::before {
  transform: translate(-50%, -50%) rotate(var(--angle-45, 45deg));
}

.site-header.is-nav-open .site-nav-toggle__icon::after {
  transform: translate(-50%, -50%) rotate(calc(var(--angle-45, 45deg) * -1));
}

/* Skip link styling */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2, var(--dist-12, 12px));
  inset-block-start: -100vh;
  z-index: calc(var(--z-header, 200) + 1);
  padding-block: var(--space-2, var(--dist-12, 12px));
  padding-inline: var(--space-3, var(--dist-16, 16px));
  background: var(--color-surface, #fff);
  color: var(--color-text-heading, #111827);
  text-decoration: none;
  border: var(--ui-border-1, 1px) var(--ui-border-solid, solid) var(--line, #e5e7eb);
  border-radius: var(--ui-radius-8, 8px);
}

.skip-link:focus,
.skip-link:focus-visible {
  clip: auto;
  clip-path: none;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  inset-block-start: var(--space-2, var(--dist-12, 12px));
}

.site-header.is-sticky {
  z-index: 200;
}

.site-nav-overlay {
  z-index: 300;
}

.site-header.site-header--drawer .site-nav {
  z-index: 400;
}

.site-header.site-header--drawer .site-header__inner {
  z-index: 401;
}

.site-header.site-header--drawer .site-nav-toggle {
  z-index: 402;
}

/* ==================================================
   Header variants
================================================== */
/* ------------------------------------------
   Scroll state
------------------------------------------ */
.site-header.is-scrolled {
  color: #fff;
  background-color: #101114;
  box-shadow: var(--header-shadow-scrolled, var(--ui-shadow, var(--kw-none)));
  transition: background-color var(--dur-300) var(--ease-standard), color var(--dur-300) var(--ease-standard);
}

.site-header.is-scrolled .site-nav-toggle {
  color: #fff;
  border-color: var(--header-toggle-border-scrolled, currentColor);
}

/* ------------------------------------------
   Sticky
------------------------------------------ */
.site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 200);
}

/* ==================================================
   Drawer (hamburger)
================================================== */
.site-header.site-header--drawer {
  --nav-panel-bg: var(--color-surface, #fff);
  --nav-panel-fg: var(--color-text-body, #333);
  --nav-panel-pad: var(--dist-16, 16px);
}

/* overlay */
.site-nav-overlay {
  position: fixed;
  inset-inline: 0;
  top: var(--header-h, var(--dist-64, 64px));
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-standard);
  z-index: calc(var(--z-header, 200) + 1);
}

html.is-nav-open .site-nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* nav panel */
.site-header.site-header--drawer .site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--nav-panel-pad, 0px);
  background: var(--nav-panel-bg, currentColor);
  color: var(--nav-panel-fg, currentColor);
  border-bottom: 1px solid var(--line, #e5e7eb);
  max-height: calc(100dvh - var(--header-h, var(--dist-64, 64px)));
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-standard);
  z-index: calc(var(--z-header, 200) + 2);
}

.site-header.site-header--drawer .site-header__inner {
  position: relative;
  z-index: calc(var(--z-header, 200) + 3);
}

.site-header.site-header--drawer .site-nav-toggle {
  position: relative;
  z-index: calc(var(--z-header, 200) + 4);
}

/* open state */
html.is-nav-open .site-header.site-header--drawer .site-nav {
  opacity: 1;
  pointer-events: auto;
}

/* open中はトグルを確実に見える配色に固定 */
.site-header.is-nav-open .site-nav-toggle {
  background: var(--color-surface, #fff);
  color: var(--color-text-body, #333);
  border-color: var(--line, var(--color-border, #e5e7eb));
}

/* ------------------------------------------
   Drawer nav: mobile / tablet common style
------------------------------------------ */
/* 通常drawer：1160px未満だけ */
@media screen and (max-width: 1159px) {
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: stretch;
    justify-items: stretch;
    inline-size: min(100%, 32rem);
    margin-inline: auto;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li {
    position: relative;
    width: 100%;
    padding-block-end: var(--space-2);
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li::after {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 0;
    block-size: var(--dist-10);
    content: "";
    border-block-end: var(--ui-border-1) solid var(--color-border);
    border-radius: 0 0 var(--ui-radius-pill) var(--ui-radius-pill);
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li > a {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
    font-size: 1.125rem;
    font-weight: var(--font-weight-black);
    text-align: left;
    border-block-end: 0;
    border-radius: var(--ui-radius-12);
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li > a::after {
    content: none;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li:has(.site-nav__cta) {
    margin-block-start: var(--space-2);
    padding-block-end: 0;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li:has(.site-nav__cta)::after {
    content: none;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li > a.site-nav__cta {
    inline-size: min(100%, 20rem);
    margin-inline: auto;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
  }
}
@media screen and (max-width: 1159px) and (hover: hover) and (pointer: fine) {
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul > li > a:hover {
    background: var(--ui-bg-soft);
  }
}
/* wide drawer：1430px未満だけ */
@media screen and (max-width: 1429px) {
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: stretch;
    justify-items: stretch;
    inline-size: min(100%, 32rem);
    margin-inline: auto;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li {
    position: relative;
    width: 100%;
    padding-block-end: var(--space-2);
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li::after {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 0;
    block-size: var(--dist-10);
    content: "";
    border-block-end: var(--ui-border-1) solid var(--color-border);
    border-radius: 0 0 var(--ui-radius-pill) var(--ui-radius-pill);
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li > a {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
    font-size: 1.125rem;
    font-weight: var(--font-weight-black);
    text-align: left;
    border-block-end: 0;
    border-radius: var(--ui-radius-12);
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li > a::after {
    content: none;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li:has(.site-nav__cta) {
    margin-block-start: var(--space-2);
    padding-block-end: 0;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li:has(.site-nav__cta)::after {
    content: none;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li > a.site-nav__cta {
    inline-size: min(100%, 20rem);
    margin-inline: auto;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
  }
}
@media screen and (max-width: 1429px) and (hover: hover) and (pointer: fine) {
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav > ul > li > a:hover {
    background: var(--ui-bg-soft);
  }
}
/* ------------------------------------------
   Desktop: inline nav / hide toggle + overlay
------------------------------------------ */
@media screen and (min-width: 1160px) {
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border-bottom: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: auto;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: var(--dist-16, 16px);
    row-gap: 0;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav li {
    width: auto;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav a {
    width: auto;
    justify-content: center;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav ul > li:last-child {
    margin-left: auto;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav-overlay {
    display: none !important;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav-toggle {
    display: none !important;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav li:last-child {
    grid-column: auto;
    display: block;
    justify-content: normal;
  }
}
@media screen and (min-width: 1430px) {
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border-bottom: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: auto;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: var(--dist-16, 16px);
    row-gap: 0;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav li {
    width: auto;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav a {
    width: auto;
    justify-content: center;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav ul > li:last-child {
    margin-left: auto;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav-overlay {
    display: none !important;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav-toggle {
    display: none !important;
  }
  .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav li:last-child {
    grid-column: auto;
    display: block;
    justify-content: normal;
  }
}
/* ------------------------------------------
   Variant: Dark
------------------------------------------ */
.site-header.is-dark {
  --nav-panel-bg: var(--ui-bg-contrast, #111827);
  --nav-panel-fg: var(--ui-on-dark, #fff);
  color: var(--ui-on-dark, #fff);
  background: var(--ui-bg-contrast, #111827);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header.is-dark .site-title,
.site-header.is-dark .site-title:visited,
.site-header.is-dark .site-nav a,
.site-header.is-dark .site-nav a:visited {
  color: var(--ui-on-dark, #fff);
}

.site-header.is-dark .site-nav-toggle {
  color: var(--ui-on-dark, #fff);
  background: var(--ui-bg-contrast, #111827);
  border-color: rgba(255, 255, 255, 0.28);
}

.site-header.is-dark .site-nav-toggle__icon {
  color: #fff;
}

.site-header.is-dark.is-nav-open .site-nav-toggle {
  color: var(--ui-on-dark, #fff);
  background: var(--ui-bg-contrast, #111827);
  border-color: rgba(255, 255, 255, 0.48);
}

/* dark current */
.site-header.is-dark .site-nav a.is-current,
.site-header.is-dark .site-nav a[aria-current=page] {
  color: var(--ui-on-dark, #fff);
  border-color: var(--color-accent, #f59e0b);
  background-color: transparent;
}

/* dark hover */
@media (hover: hover) and (pointer: fine) {
  .site-header.is-dark.site-header--drawer .site-nav a:hover {
    color: var(--color-accent, #f59e0b);
    background-color: transparent;
    opacity: 1;
  }
}
/* dark keyboard focus */
.site-header.is-dark.site-header--drawer .site-nav a:focus-visible {
  color: var(--color-accent, #f59e0b);
  background-color: transparent;
  outline: var(--ui-border-2, 2px) solid var(--color-accent, #f59e0b);
  outline-offset: var(--dist-4, 4px);
}

/* dark drawer：CTA */
.site-header.is-dark.site-header--drawer .site-nav a.site-nav__cta {
  color: var(--ui-on-accent, #111);
  background-color: var(--color-accent, #f59e0b);
  border-color: var(--color-accent, #f59e0b);
}

/* dark drawer：CTA hover */
@media (hover: hover) and (pointer: fine) {
  .site-header.is-dark.site-header--drawer .site-nav a.site-nav__cta:hover {
    color: var(--ui-on-accent, #111);
    background-color: var(--color-accent, #f59e0b);
    border-color: var(--color-accent, #f59e0b);
    opacity: 0.88;
  }
}
/* ------------------------------------------
   Pattern A: Solid
------------------------------------------ */
.site-header.site-header--solid {
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--line, #e5e7eb);
}

/* ------------------------------------------
   Pattern B: Glass
------------------------------------------ */
.site-header.is-glass {
  background: var(--header-glass-bg, var(--color-surface, #fff));
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-glass {
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 10px));
    backdrop-filter: blur(var(--header-glass-blur, 10px));
  }
  .site-header.is-glass.is-dark {
    -webkit-backdrop-filter: blur(var(--header-glass-blur, 10px));
    backdrop-filter: blur(var(--header-glass-blur, 10px));
  }
  .site-header.is-glass.is-scrolled {
    -webkit-backdrop-filter: blur(var(--header-glass-blur-scrolled, 6px));
    backdrop-filter: blur(var(--header-glass-blur-scrolled, 6px));
  }
  @media screen and (max-width: 767px) {
    .site-header.is-glass {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}
/* ------------------------------------------
   Pattern C: Minimal
------------------------------------------ */
.site-header.is-minimal {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.site-header.is-scrolled.is-minimal {
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--line, #e5e7eb);
  box-shadow: var(--header-shadow-scrolled, var(--ui-shadow, var(--kw-none)));
  color: inherit;
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* =========================================
   Header Mega Menu
========================================= */
/*
  前提：
  - PCでは JS が .is-mega-open を付けて開閉する
  - SPでは一旦メガメニューを非表示
  - 既存 .site-nav の横並び指定を、メガメニュー内だけ解除する
*/
/* -----------------------------------------
   Trigger
----------------------------------------- */
.site-nav__item--has-mega {
  position: static;
}

.site-nav__item--has-mega > a {
  position: relative;
  display: flex;
  align-items: center;
}

/* hover / open 時の下線 */
.site-nav__item--has-mega > a::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--dist-8) * -1);
  block-size: var(--ui-border-2, 2px);
  content: "";
  background: currentcolor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity var(--dur-200) var(--ease-out) transform var(--dur-200) var(--ease-out);
}

.site-nav__item--has-mega.is-mega-open > a::after,
.site-nav__item--has-mega:focus-within > a::after {
  opacity: 1;
  transform: scaleX(1);
}

/* -----------------------------------------
   Panel
----------------------------------------- */
.header-mega-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 100;
  color: var(--color-text-body);
  background: var(--color-surface);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  box-shadow: var(--ui-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-out) visibility 0s linear var(--dur-200);
}

/* PCでは非表示 */
.header-mega-menu__back {
  display: none;
}

.site-nav__item--has-mega.is-mega-open .header-mega-menu,
.site-nav__item--has-mega:focus-within .header-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-200) var(--ease-out) visibility 0s linear 0s;
}

/* -----------------------------------------
   Inner layout
----------------------------------------- */
.site-nav .header-mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(10rem, 1fr));
  gap: var(--space-4);
  align-items: start;
  box-sizing: border-box;
  max-inline-size: 1440px;
  margin-inline: auto;
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
}

/* -----------------------------------------
   Groups
----------------------------------------- */
.site-nav .header-mega-menu__group {
  display: block;
  min-inline-size: 0;
  text-align: left;
}

.site-nav .header-mega-menu__heading {
  display: block;
  margin: 0 0 var(--space-2);
  padding-block-end: var(--space-1);
  color: var(--color-text-heading);
  font-size: 1.125rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  text-align: left;
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-text-body);
}

/* -----------------------------------------
   Lists
   既存 site-nav の横並び指定をここで解除
----------------------------------------- */
.site-nav .header-mega-menu__list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-2);
  align-items: start;
  justify-items: start;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
}

.site-nav .header-mega-menu__list > li {
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* -----------------------------------------
   Links
----------------------------------------- */
.site-nav .header-mega-menu__link {
  display: inline-block !important;
  inline-size: auto !important;
  max-inline-size: 100%;
  padding-block: var(--space-1);
  padding-inline: 0;
  margin: 0;
  color: var(--color-text-body);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  text-align: left !important;
  text-decoration: none;
  white-space: normal;
  background: transparent;
  border-radius: 0;
}

.site-nav .header-mega-menu__link:hover,
.site-nav .header-mega-menu__link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--dist-4);
}

/* -----------------------------------------
   SP / Drawer
   まずはSPではメガメニューを非表示
----------------------------------------- */
@media screen and (max-width: 1429px) {
  .site-nav__item--has-mega > a::after {
    content: none;
  }
  .site-nav__item--has-mega > a::before {
    order: 2;
    margin-inline-start: var(--space-2);
    font-size: 1.375rem;
    line-height: 1;
    content: "›";
  }
  .header-mega-menu {
    position: static;
    display: none;
    color: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .header-mega-menu__back {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    inline-size: min(100%, 28rem);
    margin-inline: auto;
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
    color: var(--color-text-body);
    font: inherit;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: left;
    background: transparent;
    border: 0;
    appearance: none;
    cursor: pointer;
  }
  .header-mega-menu__back span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    block-size: 1rem;
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(-0.08em);
  }
  .site-nav.is-submenu-open > ul > li {
    display: none;
  }
  .site-nav.is-submenu-open > ul > li.is-drawer-mega-open {
    display: block;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav.is-submenu-open > ul > li.is-drawer-mega-open > a {
    display: flex;
    pointer-events: none;
    inline-size: min(100%, 28rem);
    margin-inline: auto;
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
    color: var(--color-text-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-black);
    line-height: var(--leading-tight);
    /* 文字そのものへの下線 */
    text-decoration-line: underline;
    text-decoration-color: var(--color-text-heading);
    text-decoration-thickness: var(--ui-border-2, 2px);
    text-underline-offset: var(--dist-6, 6px);
    border-block-end: 0;
    border-radius: 0;
  }
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav.is-submenu-open > ul > li.is-drawer-mega-open > a::before,
  .site-header.site-header--drawer.site-header--drawer-wide .site-nav.is-submenu-open > ul > li.is-drawer-mega-open > a::after {
    content: none;
  }
  .site-nav.is-submenu-open > ul > li.is-drawer-mega-open > .header-mega-menu {
    display: block;
  }
  .site-nav .header-mega-menu__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    inline-size: min(100%, 28rem);
    max-inline-size: none;
    margin-inline: auto;
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
  }
  .site-nav .header-mega-menu__group {
    display: grid;
    gap: var(--space-1);
    text-align: left;
  }
  .site-nav .header-mega-menu__heading {
    margin: var(--space-3) 0 0;
    padding-block: var(--space-2) var(--space-1);
    color: var(--color-text-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-black);
    line-height: var(--leading-tight);
    letter-spacing: 0.02em;
    text-align: left;
    border-block-end: var(--ui-border-1) solid var(--color-border);
  }
  .site-nav .header-mega-menu__group:first-child .header-mega-menu__heading {
    margin-block-start: 0;
  }
  .site-nav .header-mega-menu__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .site-nav .header-mega-menu__list > li {
    display: block;
    inline-size: 100%;
    border-block-end: var(--ui-border-1) solid var(--color-border);
  }
  .site-nav .header-mega-menu__link {
    display: block;
    inline-size: 100%;
    padding-block: var(--space-2);
    padding-inline: 0;
    color: var(--color-text-body);
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    text-align: left;
    text-decoration: none;
  }
  .header-mega-menu__link::before,
  .header-mega-menu__link::after {
    content: none;
  }
}
/* ==================================================
   Footer base (structure)
================================================== */
.site-footer,
.footer {
  padding-block: 2rem;
  margin-top: 0;
}

.site-footer small,
.footer small {
  display: block;
}

.site-footer p,
.footer p {
  margin: 0;
}

/* ==================================================
   Footer Pattern A: Standard (structure)
   html使用例：
   <footer class="site-footer site-footer--standard" aria-labelledby="footer-title">
================================================== */
.site-footer.site-footer--standard .footer__top,
.footer.footer--standard .footer__top {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.site-footer.site-footer--standard .footer__brand,
.footer.footer--standard .footer__brand {
  display: grid;
  gap: 0.5rem;
}

.site-footer.site-footer--standard .footer__cta,
.footer.footer--standard .footer__cta {
  display: grid;
  align-content: start;
  justify-items: start;
}

.site-footer.site-footer--standard .footer__nav,
.footer.footer--standard .footer__nav {
  display: flex;
  justify-content: flex-start;
}

.site-footer.site-footer--standard .footer__links,
.footer.footer--standard .footer__links {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer.site-footer--standard .footer__title,
.footer.footer--standard .footer__title {
  margin: 0 0 2rem;
  font-weight: 700;
}

.site-footer.site-footer--standard .footer__copy,
.footer.footer--standard .footer__copy,
.site-footer.site-footer--standard .copyright,
.footer.footer--standard .copyright {
  margin: 0;
  padding-top: 1rem;
  text-align: center;
}

/* ---- responsive (A: Standard) ---- */
@media screen and (min-width: 768px) {
  .site-footer.site-footer--standard .footer__top,
  .footer.footer--standard .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    align-items: start;
  }
  .site-footer.site-footer--standard .footer__links,
  .footer.footer--standard .footer__links {
    grid-template-columns: repeat(2, max-content);
    column-gap: 2rem;
    row-gap: 0.75rem;
    justify-content: end;
    align-items: start;
  }
}
/* ==================================================
   Footer Pattern B: Mega (structure)
   html使用例：
   <footer class="site-footer site-footer--mega" aria-labelledby="footer-title">
================================================== */
.site-footer.site-footer--mega .footer__top,
.footer.footer--mega .footer__top {
  display: grid;
  gap: 1.5rem;
}

.site-footer.site-footer--mega .footer__brand,
.footer.footer--mega .footer__brand {
  display: grid;
  gap: 0.5rem;
}

.site-footer.site-footer--mega .footer__cta,
.footer.footer--mega .footer__cta {
  display: grid;
  align-content: start;
  justify-items: start;
}

.site-footer.site-footer--mega .footer__nav-grid,
.footer.footer--mega .footer__nav-grid {
  display: grid;
  gap: 1.5rem;
}

.site-footer.site-footer--mega .footer__group,
.footer.footer--mega .footer__group {
  display: grid;
  gap: 0.5rem;
}

.site-footer.site-footer--mega .footer__group-title,
.footer.footer--mega .footer__group-title {
  margin: 0;
  font-weight: 700;
}

.site-footer.site-footer--mega .footer__desc,
.footer.footer--mega .footer__desc {
  margin: 0;
}

.site-footer.site-footer--mega .footer__links,
.footer.footer--mega .footer__links {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer.site-footer--mega .footer__copy,
.footer.footer--mega .footer__copy,
.site-footer.site-footer--mega .copyright,
.footer.footer--mega .copyright {
  margin: 0;
  padding-top: 1rem;
  text-align: center;
}

/* TB: 2 columns */
@media screen and (min-width: 768px) {
  .site-footer.site-footer--mega .footer__top,
  .footer.footer--mega .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    align-items: start;
  }
  .site-footer.site-footer--mega .footer__nav-grid,
  .footer.footer--mega .footer__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}
/* PC: 3 columns */
@media screen and (min-width: 1024px) {
  .site-footer.site-footer--mega .footer__nav-grid,
  .footer.footer--mega .footer__nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Wide: 4 columns (max) */
@media screen and (min-width: 1280px) {
  .site-footer.site-footer--mega .footer__nav-grid,
  .footer.footer--mega .footer__nav-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ==================================================
   Footer base (style)
================================================== */
.site-footer,
.footer {
  background-color: var(--color-surface, #f5f5f5);
  border-top: 1px solid var(--border, var(--color-border, #e0e6ed));
}

.site-footer .footer__title,
.footer .footer__title {
  color: var(--color-text-heading, #111827);
  text-decoration: none;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  letter-spacing: 0.02em;
}

.site-footer .footer__desc,
.site-footer .footer__meta,
.site-footer .footer__copy,
.footer .footer__desc,
.footer .footer__meta,
.footer .footer__copy {
  line-height: 1.7;
}

.site-footer .footer__links a,
.footer .footer__links a {
  display: inline-block;
  padding-block: 0.25rem;
  text-decoration: none;
  line-height: 1.5;
}

.site-footer .footer__links a:focus-visible,
.footer .footer__links a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring, var(--kw-none));
  border-radius: var(--ui-radius-8, 8px);
}

/* ==================================================
   Footer Pattern A: Standard (style)
================================================== */
.site-footer.site-footer--standard .footer__title,
.footer.footer--standard .footer__title {
  color: var(--color-text-heading, #111);
}

.site-footer.site-footer--standard .footer__desc,
.site-footer.site-footer--standard .footer__meta,
.footer.footer--standard .footer__desc,
.footer.footer--standard .footer__meta {
  color: var(--color-text-body, #333);
}

.site-footer.site-footer--standard small,
.footer.footer--standard small {
  color: var(--color-text-sub, #666);
}

.site-footer.site-footer--standard .footer__links a,
.footer.footer--standard .footer__links a {
  color: var(--color-text-heading, #111);
}

.site-footer.site-footer--standard .footer__links a:visited,
.footer.footer--standard .footer__links a:visited {
  color: var(--color-text-body, #333);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer.site-footer--standard .footer__links a:hover,
  .footer.footer--standard .footer__links a:hover {
    color: var(--color-primary, var(--color-text-heading, #111));
    opacity: 0.88;
  }
}
.site-footer.site-footer--standard .footer__copy,
.footer.footer--standard .footer__copy {
  border-top: 1px solid var(--line, var(--color-border, #e0e6ed));
}

.site-footer.site-footer--standard .footer__copy small,
.footer.footer--standard .footer__copy small {
  color: var(--color-text-sub, #666);
}

/* ==================================================
   Footer Pattern B: Mega (style)
================================================== */
.site-footer.site-footer--mega .footer__title,
.footer.footer--mega .footer__title {
  color: var(--heading, var(--color-text-heading, #111));
}

.site-footer.site-footer--mega .footer__desc,
.site-footer.site-footer--mega .footer__meta,
.footer.footer--mega .footer__desc,
.footer.footer--mega .footer__meta {
  color: var(--text, var(--color-text-body, #333));
}

.site-footer.site-footer--mega small,
.footer.footer--mega small {
  color: var(--text-soft, var(--color-text-sub, #666));
}

.site-footer.site-footer--mega .footer__links a,
.footer.footer--mega .footer__links a {
  color: var(--heading, var(--color-text-heading, #111));
}

.site-footer.site-footer--mega .footer__links a:visited,
.footer.footer--mega .footer__links a:visited {
  color: var(--text, var(--color-text-body, #333));
}

@media (hover: hover) and (pointer: fine) {
  .site-footer.site-footer--mega .footer__links a:hover,
  .footer.footer--mega .footer__links a:hover {
    color: var(--heading, var(--color-text-heading, #111));
    opacity: 0.88;
  }
}
.site-footer.site-footer--mega .footer__copy,
.footer.footer--mega .footer__copy {
  border-top: 1px solid var(--border, var(--color-border, #e0e6ed));
}

.site-footer.site-footer--mega .footer__copy small,
.footer.footer--mega .footer__copy small {
  color: var(--text-soft, var(--color-text-sub, #666));
}

.site-footer.site-footer--mega .footer__group,
.footer.footer--mega .footer__group {
  padding-top: 0.5rem;
}

/* ==================================================
   Dark background variant
================================================== */
.site-footer.is-bg-dark,
.footer.is-bg-dark {
  background: var(--ui-bg-contrast, #101114);
  color: var(--ui-on-dark, #fff);
  border-top-color: rgba(255, 255, 255, 0.16);
}

.site-footer.is-bg-dark .footer__title,
.footer.is-bg-dark .footer__title {
  color: var(--ui-on-dark, #fff);
}

.site-footer.is-bg-dark .footer__desc,
.site-footer.is-bg-dark .footer__meta,
.site-footer.is-bg-dark .footer__copy,
.footer.is-bg-dark .footer__desc,
.footer.is-bg-dark .footer__meta,
.footer.is-bg-dark .footer__copy {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer.is-bg-dark .footer__links a,
.site-footer.is-bg-dark .footer__links a:visited,
.footer.is-bg-dark .footer__links a,
.footer.is-bg-dark .footer__links a:visited {
  color: rgba(255, 255, 255, 0.92);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer.is-bg-dark .footer__links a:hover,
  .footer.is-bg-dark .footer__links a:hover {
    color: var(--ui-on-dark, #fff);
    opacity: 1;
  }
}
.site-footer.is-bg-dark .footer__copy,
.footer.is-bg-dark .footer__copy {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.site-footer.is-bg-dark .footer__copy small,
.footer.is-bg-dark .footer__copy small {
  color: rgba(255, 255, 255, 0.82);
}

/* ==================================================
   Optional brand / logo helpers
================================================== */
.footer__brand {
  margin-bottom: 1rem;
}

.footer__logo {
  display: block;
  inline-size: auto;
  block-size: clamp(48px, 5vw, 72px);
}

/* =========================================
   Footer Sitemap
========================================= */
.site-footer--sitemap {
  padding-block: var(--space-6, 64px) var(--space-4, 32px);
  color: var(--color-text-body);
  background: var(--color-surface);
  border-block-start: var(--ui-border-1) solid var(--color-border);
}

.site-footer--sitemap .footer__top {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(42rem, 1.4fr);
  gap: var(--space-5, 64px);
  align-items: start;
}

.site-footer--sitemap .footer__brand {
  max-inline-size: 40rem;
}

.site-footer--sitemap .footer__title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.site-footer--sitemap .footer__desc,
.site-footer--sitemap .footer__meta {
  margin: 0;
  line-height: var(--leading-relaxed);
}

.site-footer--sitemap .footer__nav {
  justify-self: end;
  inline-size: min(100%, 56rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  column-gap: var(--space-5, 48px);
  row-gap: var(--space-4, 32px);
}

.site-footer--sitemap .footer__heading {
  margin: 0 0 var(--space-2, 16px);
  padding-block-end: var(--space-1, 8px);
  color: var(--color-text-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  border-block-end: var(--ui-border-1) solid var(--color-border);
}

.site-footer--sitemap .footer__links {
  display: grid;
  gap: var(--space-2, 16px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer--sitemap .footer__links a {
  color: inherit;
  text-decoration: none;
}

.site-footer--sitemap .footer__links a:hover,
.site-footer--sitemap .footer__links a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--dist-4, 4px);
}

.site-footer--sitemap .footer__copy {
  padding-block-start: var(--space-4, 32px);
  margin: var(--space-5, 48px) 0 0;
  color: var(--color-text-sub);
  text-align: center;
  border-block-start: var(--ui-border-1) solid var(--color-border);
}

@media screen and (max-width: 1100px) {
  .site-footer--sitemap .footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer--sitemap .footer__nav {
    justify-self: stretch;
    inline-size: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 500px) {
  .site-footer--sitemap .footer__nav {
    grid-template-columns: 1fr;
  }
}
/* SNSエリア */
.site-footer--sitemap .footer__sns-label {
  margin: var(--space-3) 0 0;
  color: var(--color-text-sub);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
}

/* SNSアイコン */
.site-footer--sitemap .footer__sns {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer--sitemap .footer__sns a {
  display: inline-grid;
  place-items: center;
  inline-size: var(--dist-40);
  block-size: var(--dist-40);
  color: var(--color-text-body);
  font-size: 0.75rem;
  font-weight: var(--font-weight-black);
  line-height: 1;
  text-decoration: none;
  background: var(--color-surface);
  border: var(--ui-border-1) solid var(--color-border);
  border-radius: var(--ui-radius-pill);
  transition: color var(--dur-200) var(--ease-standard), background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard);
}

.site-footer--sitemap .footer__sns a:hover,
.site-footer--sitemap .footer__sns a:focus-visible {
  color: var(--color-surface);
  background: var(--color-text-heading);
  border-color: var(--color-text-heading);
}

/* アクセスエリア */
.site-footer--has-map .footer__access {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1fr);
  gap: var(--dist-40);
  align-items: stretch;
  inline-size: min(100%, 72rem);
  margin-block-start: var(--dist-40);
  margin-inline: auto;
}

.site-footer--has-map .footer__access-info {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--ui-border-1) solid var(--color-border);
  border-radius: var(--ui-radius-12);
}

.site-footer--has-map .footer__access-title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: 1.125rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.site-footer--has-map .footer__access-name {
  margin: 0;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.site-footer--has-map .footer__address,
.site-footer--has-map .footer__access-meta,
.site-footer--has-map .footer__access-note {
  margin: 0;
  color: var(--color-text-body);
  font-style: normal;
  line-height: var(--leading-relaxed);
}

.site-footer--has-map .footer__access-note {
  color: var(--color-text-sub);
  font-size: 0.875rem;
}

.site-footer--has-map .footer__map {
  overflow: hidden;
  min-block-size: 100%;
  border: var(--ui-border-1) solid var(--color-border);
  border-radius: var(--ui-radius-12);
}

.site-footer--has-map .footer__map-frame {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: clamp(260px, 28vw, 360px);
  border: 0;
}

@media screen and (max-width: 900px) {
  .site-footer--has-map .footer__access {
    grid-template-columns: 1fr;
  }
  .site-footer--has-map .footer__map-frame {
    block-size: clamp(240px, 50vw, 320px);
  }
}
/* フッターマップエリア */
.site-footer--has-map .footer__map {
  overflow: hidden;
  min-block-size: 100%;
  border: var(--ui-border-1) solid var(--color-border);
  border-radius: var(--ui-radius-12);
}

.site-footer--has-map .footer__map-frame {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: clamp(260px, 24vw, 320px);
  border: 0;
}

/* ---------------------------------------------
  8. UIコンポーネント（部品）
--------------------------------------------- */
/* components/nav/_nav.scss */
/* =========================================
   Nav styles (minimal safe base)
   - 見た目装飾ではなくUI安定用
========================================= */
.c-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12, 12px); /* 好みで dist-16 でもOK */
  align-items: center;
}

.c-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius, var(--ui-radius-8, 8px));
  text-decoration: none;
  color: inherit;
  transition: background-color var(--motion-hover) var(--ease-hover), color var(--motion-hover) var(--ease-hover), box-shadow var(--motion-hover) var(--ease-hover);
}

/* hover */
.c-nav a:hover {
  background-color: var(--ui-bg-soft, #f3f4f6);
}

/* focus（アクセシビリティ最重要） */
.c-nav a:focus-visible {
  outline: 0.125rem solid var(--ui-focus, initial);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--ui-focus, initial) 35%, transparent);
}

/* components/nav/_nav-state.scss */
.c-nav a.is-current {
  font-weight: var(--ui-font-weight-bold);
  color: var(--ui-on-primary);
  background-color: var(--color-primary);
  border-bottom: var(--ui-border-2) var(--ui-border-solid) var(--color-accent);
}

.flow-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin-block: 0;
  margin-inline: auto;
  list-style: none;
  border-top: 1px solid var(--line, #e5e7eb);
  max-inline-size: 980px;
}

.flow-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.flow-list__item:not(:last-child)::after {
  position: absolute;
  inset-inline-start: 23px;
  inset-block-end: -10px;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-sub, #666);
  opacity: 0.7;
  content: "↓";
}

.flow-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  margin-top: 2px;
  color: var(--color-primary, #2563eb);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: #fff;
}

.flow-list__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.flow-list__title {
  margin: 0;
}

.flow-list__text {
  margin: 0;
  color: var(--color-text-sub, #666);
  font-size: 0.95rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .flow-list__item {
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 20px 0;
  }
  .flow-list__item:not(:last-child)::after {
    inset-inline-start: 19px;
    inset-block-end: -10px;
  }
  .flow-list__num {
    inline-size: 40px;
    block-size: 40px;
    font-size: 0.8125rem;
  }
  .flow-list__text {
    font-size: 0.9375rem;
  }
}
/* src/scss/components/button/_button.scss */
/* Button entry (forward hub) */
/* =========================================
   Button System

   汎用ボタン:
   - .c-button
   - .c-button--primary
   - .c-button--secondary
   - .c-button--ghost
   - .c-button--option
   - .c-button--filter
   - .c-button--filter-reset
   - .c-button--favorite

   components/button/ で管理するもの:
   - 通常アクションボタン
   - CTA
   - フィルター操作
   - 購入操作
   - お気に入り操作
   - 汎用的に再利用する button modifier

   例外:
   - .c-view-toggle__button
   - .c-quantity-control__button

   例外の理由:
   - 特定component内部でしか意味を持たない小型操作ボタンのため
   - .c-button の見た目体系に含めず、各component側で管理する

   方針:
   - 汎用ボタンとして再利用するものは .c-button modifier に集約する
   - component内部専用の操作ボタンは、そのcomponent側に置く
   - ただし button棚卸し対象には含める
========================================= */
.c-button {
  --button-min-inline: var(--dist-128, 128px);
  --button-min-block: var(--dist-48, 48px);
  --button-pad-block: 0.75rem;
  --button-pad-inline: 1.5rem;
  --button-font-size: 1rem;
  --button-radius: var(--ui-radius-12, 12px);
  --button-text: var(--color-text-body, #333);
  --button-bg: var(--color-surface, #f9f9f9);
  --button-border: var(--color-border, #e0e6ed);
  --button-hover-bg: var(--color-surface-soft, #f0f0f0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--button-min-inline);
  max-inline-size: 100%;
  min-block-size: var(--button-min-block);
  padding: var(--button-pad-block) var(--button-pad-inline);
  color: var(--button-text);
  font-size: var(--button-font-size);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--button-bg);
  border: var(--ui-border-1) var(--ui-border-solid) var(--button-border);
  border-radius: var(--button-radius);
  overflow-wrap: anywhere;
  word-break: keep-all;
  transition: background-color var(--dur-200) var(--ease-standard), filter var(--dur-200) var(--ease-standard), opacity var(--dur-200) var(--ease-standard), transform var(--dur-150) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}

.c-button:hover {
  background-color: var(--button-hover-bg);
}

/* ----------------------------------------
   button 専用 mixins
---------------------------------------- */
/* ==================================================
   Button color variants
================================================== */
a.c-button,
a.c-button:link,
a.c-button:visited,
a.c-button:hover,
a.c-button:active {
  text-decoration: none;
}

.c-button--primary, .c-button--primary:link, .c-button--primary:visited {
  --button-text: #fff;
  --button-bg: #007bff;
  --button-border: #007bff;
  --button-hover-bg: #007bff;
}
.c-button--secondary, .c-button--secondary:link, .c-button--secondary:visited {
  --button-text: #fff;
  --button-bg: #6c757d;
  --button-border: #6c757d;
  --button-hover-bg: #6c757d;
}
.c-button--secondary.is-active {
  --button-text: #fff;
  --button-bg: #dc3545;
  --button-border: #dc3545;
  --button-hover-bg: #dc3545;
}
.c-button.c-button--outline-secondary, .c-button.c-button--outline-secondary:link, .c-button.c-button--outline-secondary:visited {
  --button-text: #6c757d;
  --button-bg: transparent;
  --button-border: #6c757d;
}
.c-button.c-button--outline-secondary:hover, .c-button.c-button--outline-secondary:link:hover, .c-button.c-button--outline-secondary:visited:hover {
  color: #fff;
  background-color: #6c757d;
}
.c-button.c-button--outline-danger, .c-button.c-button--outline-danger:link, .c-button.c-button--outline-danger:visited {
  --button-text: #dc3545;
  --button-bg: transparent;
  --button-border: #dc3545;
}
.c-button.c-button--outline-danger:hover, .c-button.c-button--outline-danger:link:hover, .c-button.c-button--outline-danger:visited:hover {
  color: #fff;
  background-color: #dc3545;
}
.c-button.c-button--ghost, .c-button.c-button--ghost:link, .c-button.c-button--ghost:visited {
  --button-text: #007bff;
  --button-bg: transparent;
  --button-border: currentColor;
  text-decoration: none;
}
.c-button.c-button--ghost:hover, .c-button.c-button--ghost:link:hover, .c-button.c-button--ghost:visited:hover {
  color: #fff;
  background-color: #007bff;
}
.c-button--favorite {
  --button-text: var(--color-danger);
  --button-bg: var(--color-surface);
  --button-border: var(--color-danger);
  --button-hover-bg: var(--ui-bg-danger-soft);
}
.c-button--favorite.is-active {
  --button-text: var(--color-surface);
  --button-bg: var(--color-danger);
  --button-border: var(--color-danger);
  --button-hover-bg: var(--color-danger);
}

.c-button--sm {
  --button-pad-block: 0.5rem;
  --button-pad-inline: 0.75rem;
  --button-font-size: 0.875rem;
}

.c-button--lg {
  --button-pad-block: 1rem;
  --button-pad-inline: 2.5rem;
  --button-font-size: 1.25rem;
}

.c-button--xl {
  --button-pad-block: 1.5rem;
  --button-pad-inline: 4rem;
  --button-font-size: 1.5rem;
}

.c-button--pill {
  --button-radius: var(--ui-radius-pill, 9999px);
  padding-inline: 1.5em;
}
.c-button--square {
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  font-size: 1rem;
  line-height: 3rem;
  text-align: center;
}
.c-button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  border-radius: 50%;
}
.c-button--circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 50%;
}
.c-button--circle.c-button--sm {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.875rem;
}
.c-button--circle.c-button--lg {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  font-size: 1.5rem;
}
.c-button--fit {
  justify-self: start;
  align-self: start;
}
.c-button--fit-center {
  justify-self: center;
  align-self: center;
}

.c-button--icon-left {
  gap: 0.5em;
  align-items: center;
}
.c-button--icon-left i,
.c-button--icon-left svg {
  margin-right: 0.25em;
}
.c-button--icon-right {
  gap: 0.5em;
  align-items: center;
}
.c-button--icon-right i,
.c-button--icon-right svg {
  margin-left: 0.25em;
}

.c-link-button {
  --link-button-text: #007bff;
  --link-button-hover-text: rgb(0, 98.4, 204);
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--link-button-text, currentColor);
  text-decoration: none;
  cursor: pointer;
}
.c-link-button:hover {
  color: var(--link-button-hover-text, currentColor);
  text-decoration: underline;
}

.c-link-button--underline {
  text-decoration: underline;
}
.c-link-button--underline:hover {
  color: var(--link-button-hover-text, currentColor);
  text-decoration: none;
}

.c-link-button--bold {
  font-weight: 700;
}
.c-link-button--bold:hover {
  color: var(--link-button-hover-text, currentColor);
}

.c-button--block {
  display: flex;
  inline-size: 100%;
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
.c-button--fixed--scroll-up {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}
.c-button--fixed--scroll-up.show-scroll-up {
  display: block !important;
  pointer-events: auto;
  opacity: 1;
}
.c-button--fixed--scroll-up.is-visible {
  display: block;
}
.c-button--fixed--scroll-up.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.c-button {
  --button-spinner-border: rgba(255, 255, 255, 0.6);
  --button-spinner-top: #fff;
}

.c-button.is-loading {
  pointer-events: none;
  cursor: wait;
  opacity: 0.6;
}

.c-button.is-loading::after {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  content: "";
  border: 2px solid var(--button-spinner-border, rgba(255, 255, 255, 0.6));
  border-top-color: var(--button-spinner-top, currentColor);
  border-radius: 50%;
  animation: button-spin var(--dur-600) linear infinite;
}

.c-button:disabled,
.c-button.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--color-text-sub);
  background-color: var(--color-surface-soft);
  opacity: 0.6;
}

.c-button.is-active {
  opacity: 1;
  filter: brightness(1);
}

.c-button.is-loading:disabled::after,
.c-button.is-loading.is-disabled::after {
  display: none;
}

/* カート追加完了時の状態 */
.c-button.is-added {
  color: var(--color-success);
  background-color: var(--ui-bg-soft);
  border-color: var(--color-success);
}

@keyframes button-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.c-button--cta {
  --button-min-inline: 13rem;
  --button-text: var(--color-surface, #fff);
  --button-bg: var(--color-accent, #ffa500);
  --button-border: var(--color-accent, #ffa500);
  --button-hover-bg: var(--color-accent, #ffa500);
  box-shadow: var(--ui-shadow, var(--kw-none));
}
.c-button--cta:hover {
  filter: brightness(0.96);
}

/* =========================================
   Button Option
========================================= */
.c-button--option {
  min-inline-size: 56px;
  min-block-size: 44px;
  padding-inline: var(--dist-12);
}

.c-button--option.is-active,
.c-button--option[aria-pressed=true] {
  color: var(--color-surface);
  background: var(--color-text-heading);
  border-color: var(--color-text-heading);
}

.c-button--option.is-disabled,
.c-button--option[aria-disabled=true] {
  color: var(--color-text-sub);
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}

/* =========================================
   Button Filter
========================================= */
.c-button--filter {
  gap: var(--dist-8);
}

.c-button--filter::after {
  content: "";
  inline-size: 0.45em;
  block-size: 0.45em;
  border-inline-end: 2px solid currentcolor;
  border-block-end: 2px solid currentcolor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-200) var(--ease-standard);
}

.c-button--filter.is-active::after,
.c-button--filter[aria-expanded=true]::after {
  transform: rotate(225deg) translateY(-1px);
}

.c-button--filter.is-active,
.c-button--filter[aria-expanded=true] {
  color: var(--color-surface);
  background: var(--ui-border-strong);
  border-color: var(--color-text-heading);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

/* Reset button */
.c-button--filter-reset {
  color: var(--color-danger);
  background: var(--color-surface);
  border-color: var(--color-danger);
}

.c-button--filter-reset::after {
  content: none;
}

.c-button--filter-reset:hover {
  color: var(--color-surface);
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.c-button--filter-reset:active {
  transform: translateY(1px);
}

.c-button--filter,
.c-button--filter-reset {
  min-inline-size: max-content;
  white-space: nowrap;
  min-block-size: 44px;
  padding-block: var(--dist-10);
  padding-inline: var(--dist-16);
  font-weight: 700;
}

/* components/card/_card-structure.scss */
/*
  structure only
  - .c-card
  - media / body / title / text / link は style 側で管理
*/
.c-card {
  display: flex;
  flex-direction: column;
}

/* =========================================
   Card actions
========================================= */
.c-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12, 0.75rem);
  align-items: center;
}

.c-card__actions .c-button {
  inline-size: auto;
  max-inline-size: 100%;
}

.c-card__actions--center {
  justify-content: center;
}

.c-card__actions--end {
  justify-content: flex-end;
}

.c-card__actions--between {
  justify-content: space-between;
}

/* ==================================================
   Card (BASE) : vertical default
   - use in grids/lists
================================================== */
.c-card {
  --card-pad: var(--dist-24, 24px);
  --card-radius: var(--ui-radius-16, 16px);
  --card-bg: var(--color-surface, #fff);
  --card-media-ratio: 16 / 9;
  --card-media-min: auto;
  --card-title-lines: 2;
  --card-text-lines: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* grid/flex配下で「中身が原因で縮まない」を防ぐ */
  min-width: 0;
  background-color: #fff;
  /* line rule */
  border: 0.0625rem solid var(--line, #e5e7eb);
  border-radius: var(--card-radius, var(--ui-radius-8, 8px));
  /* shadow rule */
  box-shadow: var(--ui-shadow, var(--kw-none));
  transition: transform var(--motion-hover) var(--ease-hover), box-shadow var(--motion-hover) var(--ease-hover) var(--delay-50);
}
@media (hover: hover) and (pointer: fine) {
  .c-card {
    /* media hover zoom (img/svg/video/picture all) */
  }
  .c-card:hover {
    box-shadow: var(--ui-shadow-hover, var(--kw-none));
    transform: translateY(-3px);
  }
  .c-card:hover .c-card__media > :is(img, svg, video, picture) {
    transform: scale(1.05);
  }
}
.c-card:focus-within {
  box-shadow: var(--ui-shadow, var(--kw-none)), var(--ui-focus-ring, var(--kw-none));
}

/* ==================================================
   Media
================================================== */
.c-card__media {
  width: 100%;
  aspect-ratio: var(--card-media-ratio, initial);
  min-block-size: var(--card-media-min, 0px);
  overflow: hidden;
  background: #f0f0f0;
}

.c-card__media > :is(img, svg, video, picture) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform var(--dur-350) var(--ease-standard);
}

.c-card__media > img.c-card__img {
  height: 100%;
  object-fit: cover;
}

/* taller media variant (component-level) */
.c-card--media-tall {
  --card-media-ratio: 4 / 3;
  --card-media-min: clamp(200px, 22vw, 320px);
}

/* ==================================================
   Body / Text
================================================== */
.c-card__body {
  display: grid;
  flex: 1;
  gap: var(--space-2, var(--dist-12));
  padding: var(--card-pad);
}

.c-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--card-title-lines, initial);
  line-clamp: var(--card-title-lines, initial);
  font-weight: 700;
  -webkit-box-orient: vertical;
}

.c-card__text {
  display: -webkit-box;
  max-inline-size: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-text-lines, initial);
  line-clamp: var(--card-text-lines, initial);
  font-size: clamp(0.875rem, 1.15vw, 1rem);
  line-height: 1.7;
}

/* ==================================================
   Link
================================================== */
.c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ==================================================
   Card (HORIZONTAL) : explanation card
   - SP: stacked (vertical)
   - md+: 2 columns (media + content)
================================================== */
.c-card--horizontal {
  max-width: 1320px;
  margin-inline: auto;
  /* SP stacked ratio */
}
.c-card--horizontal .c-card__media {
  aspect-ratio: 16/9;
}

@media screen and (min-width: 768px) {
  .c-card--horizontal .c-card__link {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 1.5rem;
    align-items: stretch;
    padding: var(--card-pad, 0px);
  }
  .c-card--horizontal .c-card__media {
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: calc(var(--card-radius, 8px) - 0.0625rem);
  }
  .c-card--horizontal .c-card__body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    max-width: 72ch;
    padding: 0; /* padding is on link */
  }
  /* horizontal modifier : media column width only */
  .c-card--horizontal.is-media-large .c-card__link {
    grid-template-columns: clamp(420px, 38%, 620px) 1fr;
  }
}
@media screen and (min-width: 1600px) {
  .c-card--horizontal.is-media-large .c-card__link {
    grid-template-columns: clamp(520px, 42%, 720px) 1fr;
  }
}
/* optional: visual variant */
.c-card--visual .c-card__body {
  padding: clamp(14px, 1.6vw, 18px);
}

/*
  Card Size Presets
  - .c-card--sm/md/lg/xl/xxl
  - grid/flex でも崩れにくい width / min-height を担当
  - 見た目の差分は local token へ流す
  - media / reveal trigger も size から供給
*/
.c-card--sm {
  inline-size: 100%;
  max-inline-size: 280px;
  min-block-size: 220px;
  --card-pad: 20px;
  --card-radius: 14px;
  --card-media-ratio: 1.6;
  --card-media-min: 180px;
  --reveal-root-margin: 0px 0px -20% 0px;
  --reveal-threshold: 0.18;
}

.c-card--md {
  inline-size: 100%;
  max-inline-size: 360px;
  min-block-size: 300px;
  --card-pad: 28px;
  --card-radius: 16px;
  --card-media-ratio: 1.3333333333;
  --card-media-min: 220px;
  --reveal-root-margin: 0px 0px -28% 0px;
  --reveal-threshold: 0.14;
}

.c-card--lg {
  inline-size: 100%;
  max-inline-size: 420px;
  min-block-size: 400px;
  --card-pad: 32px;
  --card-radius: 16px;
  --card-media-ratio: 1.3333333333;
  --card-media-min: 240px;
  --reveal-root-margin: 0px 0px -38% 0px;
  --reveal-threshold: 0.1;
}

.c-card--xl {
  inline-size: 100%;
  max-inline-size: 520px;
  min-block-size: 480px;
  --card-pad: 48px;
  --card-radius: 18px;
  --card-media-ratio: 1.5;
  --card-media-min: 320px;
  --reveal-root-margin: 0px 0px -48% 0px;
  --reveal-threshold: 0.06;
}

.c-card--xxl {
  inline-size: 100%;
  max-inline-size: 640px;
  min-block-size: 560px;
  --card-pad: 56px;
  --card-radius: 20px;
  --card-media-ratio: 1.6;
  --card-media-min: 440px;
}

.c-card--sm {
  --reveal-dur: var(--dur-600);
  --reveal-dist: var(--dist-24);
}

.c-card--md {
  --reveal-dur: var(--dur-800);
  --reveal-dist: var(--dist-28);
}

.c-card--lg {
  --reveal-dur: var(--dur-1100);
  --reveal-dist: var(--dist-48);
}

.c-card--xl {
  --reveal-dur: var(--dur-1400);
  --reveal-dist: var(--dist-96);
}

/* components/card/_card.state.scss */
/* hover */
.c-card:hover {
  transform: translateY(calc(var(--dist-nudge, 2px) * -1));
  box-shadow: var(--ui-elev-3, var(--kw-none));
}

/* focus */
.c-card:focus-visible {
  outline: 2px solid var(--ui-focus, initial);
  outline-offset: 2px;
}

/* selected */
.c-card.is-selected {
  border-color: var(--color-primary, #2563eb);
  box-shadow: var(--ui-elev-2, var(--kw-none));
}

/* disabled */
.c-card.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* loading */
.c-card.is-loading {
  pointer-events: none;
  position: relative;
}

.c-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #fff 60%, transparent);
}

/* components/card/_card-cta.scss */
.c-card--cta,
.c-card--cta:hover,
.c-card--cta:focus-within {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.c-card--cta .c-card__body {
  grid-template-rows: none;
  align-content: center;
  gap: var(--space-3, var(--dist-16, 16px));
  max-inline-size: none;
  inline-size: 100%;
}

.c-card--cta .c-card__title {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.c-card--cta .c-card__text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: initial;
  font-size: 1rem;
  line-height: 1.8;
  max-inline-size: none;
}

.c-card--cta .c-button {
  justify-self: start;
  margin-top: var(--space-1, var(--dist-8, 8px));
}

/* components/card/_card-arch.scss
  建築/施工実績向けカード（見た目プリセット）
  - motion は u-anim-arch 側で管理（ここでは見た目だけ）
*/
.c-card--arch {
  /* ---- look ---- */
  border: 0.0625rem solid var(--line, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--color-surface, #fff);
  overflow: hidden;
  /* shadow（fallback直書き禁止なので var のみに寄せる） */
  box-shadow: var(--shadow-1, var(--kw-none));
  /* hoverは控えめ（動きは最小） */
  transition: transform var(--dur-200) var(--ease-smooth), box-shadow var(--dur-200) var(--ease-smooth), border-color var(--dur-200) var(--ease-smooth);
}
.c-card--arch:hover {
  transform: translateY(calc(var(--dist-nudge, 2px) * -1));
  box-shadow: var(--shadow-2, var(--kw-none));
  border-color: rgba(0, 0, 0, 0.12);
}

/* 画像エリア */
.c-card--arch .c-card__media {
  position: relative;
  aspect-ratio: 16/10; /* 建築は横長が映える */
  overflow: hidden;
  background: #f3f4f6; /* disabled bg */
}

.c-card--arch .c-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* 画像の“じわっ”を軽く */
  transition: transform var(--dur-600) var(--ease-emphasized);
}

.c-card--arch:hover .c-card__img {
  transform: scale(1.03);
}

/* 本文 */
.c-card--arch .c-card__body {
  padding: 1rem; /* 16 */
  display: grid;
  gap: 0.5rem; /* 8 */
}

.c-card--arch .c-card__title {
  letter-spacing: 0.02em;
  color: #111;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.c-card--arch .c-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 情報（坪数/工期/場所など） */
.c-card--arch .c-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8 */
  font-size: 12px;
  color: #666;
}

.c-card--arch .c-card__pill {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  background: color-mix(in srgb, #000 4%, transparent);
  border: 0.0625rem solid rgba(0, 0, 0, 0.06);
}

/* クリック領域（カード全体リンクにするなら） */
.c-card--arch .c-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.c-caption-card {
  position: relative;
  max-inline-size: 42rem;
  padding: var(--space-4);
  padding-block-start: var(--dist-32);
  color: currentcolor;
  border: var(--ui-border-2) var(--ui-border-solid) currentcolor;
  border-radius: var(--ui-radius-16);
}

.c-caption-card__label {
  position: absolute;
  inset-block-start: calc(var(--dist-24) * -1);
  inset-inline-start: var(--dist-32);
  margin: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  font-size: clamp(var(--dist-18), 2.2vw, var(--dist-24));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  background: var(--color-surface);
  border: var(--ui-border-2) var(--ui-border-solid) currentcolor;
  border-radius: var(--ui-radius-pill);
}

.c-caption-card__text {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

/* ダークテーマ用のスタイル */
.c-caption-card--dark {
  color: var(--ui-on-dark);
  background: var(--ui-overlay-strong);
}

.c-caption-card--dark .c-caption-card__label {
  color: var(--color-text-heading);
}

/* =========================================
   Product Card
========================================= */
.c-product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-2);
}

.c-product-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  margin: 0;
  margin-block-end: var(--space-2);
  background: var(--ui-bg-soft);
}

.c-product-card__badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 1;
  justify-self: auto;
  align-self: auto;
}

.c-product-card__media img {
  display: block;
  inline-size: 88%;
  block-size: 88%;
  object-fit: contain;
}

.c-product-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.c-product-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
  margin-block-start: var(--space-1);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.c-product-card__price-current {
  color: var(--color-danger);
}

.c-product-card__price-original {
  color: var(--color-text-sub);
  font-size: 0.8125rem;
  text-decoration: line-through;
}

/* src/scss/components/card/_card-plan.scss */
/* =========================================
   Plan Card
========================================= */
.c-plan-card {
  display: grid;
  gap: var(--dist-16);
  padding: var(--dist-24);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
}

.c-plan-card__eyebrow,
.c-plan-card__title,
.c-plan-card__price,
.c-plan-card__text {
  margin: 0;
}

.c-plan-card__eyebrow {
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-plan-card__title {
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-line-height-normal);
}

.c-plan-card__price {
  color: var(--color-text-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.c-plan-card__text {
  color: var(--color-text-body);
  line-height: var(--ui-line-height-relaxed);
}

.c-plan-card__list {
  display: grid;
  gap: var(--dist-8);
  padding: 0;
  margin: 0;
  color: var(--color-text-body);
  line-height: var(--ui-line-height-relaxed);
  list-style: none;
}

.c-plan-card__list li {
  display: flex;
  gap: var(--dist-8);
  align-items: baseline;
}

.c-plan-card__list li::before {
  flex: 0 0 auto;
  color: var(--color-success);
  content: "✓";
}

.c-plan-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-10);
  align-items: center;
  padding-block-start: var(--dist-8);
}

.c-plan-card--featured {
  border-color: var(--ui-border-accent);
  box-shadow: var(--ui-elev-1);
}

.c-plan-card--featured .c-plan-card__eyebrow {
  color: var(--color-accent);
}

@media screen and (max-width: 767px) {
  .c-plan-card {
    inline-size: 100%;
    max-inline-size: 520px;
    margin-inline: auto;
  }
}
/* ==================================================
   Form structure
================================================== */
.c-form {
  width: 100%;
  max-width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
@media screen and (min-width: 480px) {
  .c-form {
    max-width: 30rem;
  }
}
@media screen and (min-width: 768px) {
  .c-form {
    max-width: 40rem;
  }
}
@media screen and (min-width: 1024px) {
  .c-form {
    max-width: 50rem;
  }
}
@media screen and (min-width: 1280px) {
  .c-form {
    max-width: 60rem;
  }
}

.c-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.c-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.c-form__item {
  flex: 1 1 100%;
  min-width: 12.5rem;
}
@media screen and (min-width: 768px) {
  .c-form__item {
    flex: 1;
  }
}

.c-form__inner {
  max-width: 40rem;
  margin-inline: auto;
}

.form__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.c-form__group--choice {
  min-inline-size: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  border: 0;
}

.c-form__choices {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

.c-form__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.c-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.name-wrapper {
  display: flex;
  gap: 0.5rem;
}
.name-wrapper input {
  flex: 1;
}

.slider-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.slider-wrapper input[type=range] {
  flex: 1;
}
.slider-wrapper span {
  min-width: 2em;
  font-weight: 700;
  text-align: right;
}

/* ==================================================
   Form style
================================================== */
.c-label {
  margin-bottom: var(--dist-12);
  font-weight: var(--ui-font-weight-semibold);
  color: var(--text);
}

.c-form__notice,
.c-form__note {
  margin-top: var(--dist-8);
  font-size: var(--ui-font-size-sm);
  color: var(--text-soft);
}

.c-form__submit {
  align-self: flex-start;
  width: auto;
  padding: var(--dist-16) var(--dist-48);
  margin-top: var(--dist-24);
}

.c-form__select {
  appearance: none;
  cursor: pointer;
  background-color: var(--color-surface);
}

.c-form__radio,
.c-form__checkbox {
  display: flex;
  gap: var(--dist-12);
  align-items: center;
}

.c-form label {
  font-size: var(--ui-font-size-md);
  color: var(--text);
}

.c-form input[type=radio],
.c-form input[type=checkbox] {
  width: var(--ui-control-size-sm);
  height: var(--ui-control-size-sm);
  accent-color: var(--color-accent);
}

.c-form__radio {
  inline-size: var(--ui-control-size-md);
  block-size: var(--ui-control-size-md);
  margin: 0;
  accent-color: var(--color-accent);
}

.c-form__check {
  inline-size: var(--ui-control-size-md);
  block-size: var(--ui-control-size-md);
  margin: 0;
  accent-color: var(--color-accent);
}

.c-form__choices--inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--dist-20);
  row-gap: var(--dist-8);
  align-items: center;
}

.c-form__choices--inline .c-form__choice {
  display: inline-flex;
  gap: var(--dist-6);
  align-items: center;
}

.test-form {
  padding: var(--dist-24);
  background: var(--ui-bg-soft);
}
@media screen and (min-width: 480px) {
  .test-form {
    max-width: var(--ui-panel-width-md);
    background: var(--color-surface-soft);
  }
}

/* ==================================================
   Form state
================================================== */
.c-form__checkbox.is-disabled-form,
.c-form__radio.is-disabled-form {
  cursor: var(--state-disabled-cursor);
  opacity: var(--ui-opacity-muted);
}
.c-form__checkbox.is-disabled-form input,
.c-form__checkbox.is-disabled-form label,
.c-form__radio.is-disabled-form input,
.c-form__radio.is-disabled-form label {
  pointer-events: var(--ui-pointer-events-auto) !important;
  cursor: var(--state-disabled-cursor);
}

/* ==================================================
   Form validation
================================================== */
.c-form .is-error {
  background-color: var(--ui-bg-danger-soft);
  border-color: var(--color-danger);
}

.c-form__error-message {
  margin-top: var(--dist-4);
  font-size: var(--ui-font-size-sm);
  color: var(--color-danger);
}

/* ==================================================
   Form input style
================================================== */
.c-form .c-form__group .c-input,
.c-form .c-form__group .c-textarea,
.c-form .c-form__group .c-select {
  width: 100%;
  padding: var(--dist-16);
  font-size: var(--ui-font-size-md);
  color: var(--text);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--border-soft);
  border-radius: var(--ui-radius-12);
  transition: border-color var(--dur-300) var(--ease-in-out), box-shadow var(--dur-300) var(--ease-in-out);
}
.c-form .c-form__group .c-input::placeholder,
.c-form .c-form__group .c-textarea::placeholder,
.c-form .c-form__group .c-select::placeholder {
  color: var(--text-soft);
  opacity: var(--ui-opacity-visible);
}
.c-form .c-form__group .c-input:focus,
.c-form .c-form__group .c-textarea:focus,
.c-form .c-form__group .c-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ui-focus-ring);
}
.c-form .c-form__group .c-input:disabled,
.c-form .c-form__group .c-textarea:disabled,
.c-form .c-form__group .c-select:disabled {
  color: var(--text-soft);
  cursor: var(--state-disabled-cursor);
  background-color: var(--ui-bg-soft);
}

.c-form select {
  padding-right: var(--dist-32);
  appearance: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right var(--dist-8) center;
  background-size: var(--dist-16);
}

.c-form select:invalid {
  color: var(--text-soft);
  opacity: var(--ui-opacity-muted);
}

.c-form select:focus,
.c-form input[type=checkbox]:focus,
.c-form input[type=radio]:focus,
.c-form input[type=checkbox]:focus-visible,
.c-form input[type=radio]:focus-visible {
  outline: var(--ui-border-2) var(--ui-border-solid) var(--ui-focus);
  outline-offset: var(--ui-focus-offset);
  box-shadow: var(--ui-focus-ring);
}

.c-form input:disabled,
.c-form textarea:disabled,
.c-form select:disabled,
.c-form input[type=checkbox]:disabled,
.c-form input[type=radio]:disabled {
  cursor: var(--state-disabled-cursor);
}

.c-table {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.7;
  border-collapse: separate;
  border-spacing: 0;
}
.c-table th,
.c-table td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  text-align: left;
}

.c-table--wrapper--narrow {
  max-inline-size: 980px;
}

.c-table--spec {
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 1rem;
  background: #fff;
}
.c-table--spec th,
.c-table--spec td {
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.c-table--spec tr:last-child th,
.c-table--spec tr:last-child td {
  border-bottom: 0;
}
.c-table--spec th {
  width: 24%;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  background: rgba(255, 255, 255, 0.72);
}
.c-table--spec td {
  width: 76%;
  color: #333;
  background: #fff;
}

/* ラベル感を少し強める */
.c-table--spec th {
  position: relative;
}

.c-table--spec th::before {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.625rem;
  vertical-align: middle;
  content: "";
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.35);
}

/* 宿泊料金など長い文でも息苦しくならないように */
.c-table--spec td {
  word-break: break-word;
}

/* SP */
@media screen and (max-width: 767px) {
  .c-table--spec,
  .c-table--spec tbody,
  .c-table--spec tr,
  .c-table--spec th,
  .c-table--spec td {
    display: block;
    width: 100%;
  }
  .c-table--spec {
    border-radius: 0.875rem;
  }
  .c-table--spec tr {
    padding: 1rem 1rem 1.5rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  }
  .c-table--spec tr:last-child {
    border-bottom: 0;
  }
  .c-table--spec th,
  .c-table--spec td {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .c-table--spec th {
    margin-bottom: 0.5rem;
    white-space: normal;
    font-size: 0.8125rem;
    color: #666;
  }
  .c-table--spec td {
    margin-bottom: 0;
    font-size: 0.9375rem;
    color: #333;
  }
  .c-table--spec th::before {
    width: 0.3125rem;
    height: 0.3125rem;
    margin-right: 0.5rem;
  }
}
.c-table thead {
  color: #111;
  background-color: #f5f5f5;
}
.c-table th,
.c-table td {
  border: 0.0625rem solid #e0e6ed;
}
.c-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.c-table--striped tbody tr:nth-child(even) {
  background: var(--color-surface-alt, var(--kw-transparent));
}

/* ==================================================
   Spec table
   - 一覧表ではなく、静かな情報表として見せる
================================================== */
.c-table--spec {
  border-radius: var(--ui-radius-16, 16px);
  overflow: hidden;
  background-color: #fff;
}

.c-table--spec tbody tr:nth-child(even) {
  background-color: transparent;
}

.c-table--spec th,
.c-table--spec td {
  border-inline: 0;
  border-block: 0;
  border-bottom: 0.0625rem solid rgba(17, 17, 17, 0.08);
}

.c-table--spec tbody tr:last-child th,
.c-table--spec tbody tr:last-child td {
  border-bottom: 0;
}

.c-table--spec th {
  position: relative;
  font-weight: 700;
  color: #111;
  background-color: #f7f4ee;
  letter-spacing: 0.02em;
}

.c-table--spec th::before {
  display: inline-block;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  margin-right: 0.625rem;
  vertical-align: middle;
  content: "";
  border-radius: 50%;
  background-color: rgba(17, 17, 17, 0.35);
}

.c-table--spec td {
  background-color: #fff;
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
.c-table tr.is-selected {
  background-color: var(--table-selected-bg, var(--ui-bg-soft, #f0f0f0));
}
.c-table--fixed thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ==================================================
  Comparison Table
  商品比較・スペック比較用
================================================== */
.c-comparison-table {
  display: grid;
  gap: var(--space-3);
  inline-size: min(100%, 72rem);
}

.c-comparison-table__title {
  display: grid;
  margin: 0;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--ui-on-primary);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  background: var(--color-primary);
  border-radius: var(--ui-radius-12) var(--ui-radius-12) 0 0;
}

.c-comparison-table__title-text {
  justify-self: center;
  max-inline-size: 16em;
  text-align: left;
}

.c-comparison-table__scroll {
  overflow-x: auto;
}

.c-comparison-table__scroll::-webkit-scrollbar {
  block-size: var(--dist-8);
}

.c-comparison-table__scroll::-webkit-scrollbar-track {
  background: var(--color-border);
  border-radius: var(--ui-radius-pill);
}

.c-comparison-table__scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--ui-radius-pill);
}

.c-comparison-table__table {
  inline-size: 100%;
  min-inline-size: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.c-comparison-table__table th,
.c-comparison-table__table td {
  padding: var(--space-3);
  color: var(--color-text-body);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  vertical-align: top;
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-comparison-table__table thead th {
  text-align: center;
  background: var(--ui-bg-soft);
}

.c-comparison-table__corner,
.c-comparison-table__table tbody th {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.c-comparison-table__table tbody th {
  inline-size: 9rem;
  color: var(--color-text-heading);
  text-align: center;
}

.c-comparison-table__table td {
  background: var(--color-surface);
}

.c-comparison-table__product {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.c-comparison-table__img {
  display: block;
  inline-size: var(--dist-80);
  block-size: var(--dist-96);
  object-fit: contain;
}

.c-comparison-table__name {
  font-size: 0.875rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.c-comparison-table__hint {
  display: none;
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

@media screen and (max-width: 767px) {
  .c-comparison-table {
    inline-size: 100%;
    gap: var(--space-2);
  }
  .c-comparison-table__title {
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    font-size: 1.25rem;
    line-height: var(--leading-snug);
  }
  .c-comparison-table__scroll {
    overflow-x: auto;
  }
  .c-comparison-table__table {
    min-inline-size: 720px;
  }
  .c-comparison-table__table th,
  .c-comparison-table__table td {
    padding: var(--space-2);
    font-size: 0.875rem;
    line-height: var(--leading-snug);
  }
  .c-comparison-table__table tbody th {
    inline-size: 8rem;
  }
  .c-comparison-table__name {
    font-size: 0.8125rem;
  }
  .c-comparison-table__img {
    inline-size: var(--dist-64);
    block-size: var(--dist-80);
  }
  .c-comparison-table__hint {
    display: block;
  }
}
.c-badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  justify-self: start;
  align-self: start;
  inline-size: max-content;
  max-inline-size: 100%;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  border-radius: var(--ui-radius-pill);
}

/* Override badge alignment when used inside a card body */
.c-card__body > .c-badge {
  justify-self: start;
}

.c-badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--dist-48);
  padding-block: var(--dist-4);
  padding-inline: var(--dist-8);
  color: var(--color-text-heading, #111);
  font-size: 0.75rem;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
  background-color: var(--ui-bg-soft, #f0f0f0);
  border: 0.0625rem solid var(--color-border, #e0e6ed);
  border-radius: var(--ui-radius-pill);
}

.c-badge--neutral {
  color: var(--color-text-heading, #111);
  background-color: var(--color-surface, #f9f9f9);
  border-color: var(--color-border, #e0e6ed);
}

.c-badge--outline {
  color: var(--color-text-heading, #111);
  background-color: transparent;
  border-color: var(--color-border, #e0e6ed);
}

.c-badge--primary {
  color: #fff;
  background-color: var(--color-primary, #007bff);
  border-color: var(--color-primary, #007bff);
}

.c-badge--secondary {
  color: #fff;
  background-color: var(--color-secondary, #6c757d);
  border-color: var(--color-secondary, #6c757d);
}

.c-badge--success {
  color: #fff;
  background-color: var(--color-success, #198754);
  border-color: var(--color-success, #198754);
}

.c-badge--warning {
  color: var(--color-text-body, #333);
  background-color: var(--color-warning, #ffc107);
  border-color: var(--color-warning, #ffc107);
}

.c-badge--danger {
  color: #fff;
  background-color: var(--color-danger, #dc3545);
  border-color: var(--color-danger, #dc3545);
}

.c-badge--info {
  color: #fff;
  background-color: var(--color-info, #0dcaf0);
  border-color: var(--color-info, #0dcaf0);
}

.c-badge--accent {
  color: #fff;
  background-color: var(--color-accent, #ffa500);
  border-color: var(--color-accent, #ffa500);
}

.c-badge--dark {
  color: var(--color-surface, #fff);
  background-color: var(--color-text-body, #333);
  border-color: var(--color-text-body, #333);
}

.c-badge--outline-primary {
  color: var(--color-primary, #007bff);
  background-color: transparent;
  border-color: var(--color-primary, #007bff);
}

.c-badge--outline-accent {
  color: rgb(179.265, 119.325, 9.435);
  background-color: transparent;
  border-color: var(--color-accent, #ffa500);
}

.c-badge--soft {
  color: #111;
  background-color: rgb(255, 190.2, 71.4);
  border-color: rgb(255, 214.5, 140.25);
}

.c-badge--warm {
  color: rgb(16.524, 89.1432, 167.076);
  background-color: rgb(38.25, 142.8, 255);
  border-color: rgb(122.4, 186.36, 255);
}

.c-badge--milky {
  color: rgb(16.83, 81.774, 151.47);
  background-color: rgb(252.9, 252.9, 252.9);
  border-color: rgb(178.5, 215.4, 255);
}

.c-badge--pet {
  color: rgb(153.153, 104.445, 15.147);
  background-color: rgb(255, 184.8, 56.1);
  border-color: rgb(255, 211.8, 132.6);
}

/* size variants */
.c-badge--sm {
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
}

.c-badge--md {
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.875rem;
}

.c-badge--lg {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  font-size: 1rem;
}

/* shape variants */
.c-badge--pill {
  border-radius: var(--ui-radius-pill);
}

.c-badge--square {
  border-radius: 0;
}

.c-badge--round {
  aspect-ratio: 1/1;
  justify-content: center;
  padding-inline: 0;
  border-radius: var(--ui-radius-pill);
}

.c-badge--rounded {
  border-radius: var(--ui-radius-12);
}

.c-attention-badge-wrap {
  position: relative;
  display: inline-grid;
  padding-block-start: var(--dist-16);
  padding-inline-start: var(--dist-16);
  color: currentcolor;
}

.c-attention-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: clamp(var(--dist-96), 18vw, var(--dist-144));
  aspect-ratio: 1;
  padding: var(--space-3);
  font-size: clamp(var(--dist-18), 3.4vw, var(--dist-28));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--ui-letter-spacing);
  text-align: center;
  border: var(--ui-border-2) var(--ui-border-solid) currentcolor;
  border-radius: var(--ui-radius-pill);
  box-shadow: var(--ui-shadow);
}

.c-attention-badge::before {
  position: absolute;
  inset: var(--dist-8);
  content: "";
  border: var(--ui-border-2) var(--ui-border-dotted) currentcolor;
  border-radius: inherit;
  pointer-events: none;
}

.c-attention-badge-spark {
  position: absolute;
  inset-block-start: var(--dist-8);
  inset-inline-start: var(--dist-8);
  inline-size: var(--dist-40);
  block-size: var(--dist-40);
  pointer-events: none;
}

.c-attention-badge-spark span {
  position: absolute;
  display: block;
  block-size: var(--ui-border-3);
  background: currentcolor;
  border-radius: var(--ui-radius-pill);
}

.c-attention-badge-spark span:nth-child(1) {
  inset-block-start: var(--dist-24);
  inset-inline-start: var(--dist-0);
  inline-size: var(--dist-16);
  transform: rotate(35deg);
}

.c-attention-badge-spark span:nth-child(2) {
  inset-block-start: var(--dist-12);
  inset-inline-start: var(--dist-10);
  inline-size: var(--dist-18);
  transform: rotate(55deg);
}

.c-attention-badge-spark span:nth-child(3) {
  inset-block-start: var(--dist-4);
  inset-inline-start: var(--dist-24);
  inline-size: var(--dist-16);
  transform: rotate(75deg);
}

.c-attention-badge-wrap--solid .c-attention-badge::before {
  content: none;
}

/* =========================================
   Chip Base
========================================= */
.c-chip {
  display: inline-flex;
  gap: var(--dist-4);
  align-items: center;
  justify-content: center;
  max-inline-size: 100%;
  min-block-size: 32px;
  padding-block: var(--dist-4);
  padding-inline: var(--dist-8);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--ui-radius-pill);
}

.c-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-chip__remove {
  display: none;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
}

/* size */
.c-chip--md {
  min-block-size: 32px;
  font-size: 0.875rem;
}

.c-chip--sm {
  min-block-size: 26px;
  padding-inline: var(--dist-4);
  font-size: 0.75rem;
}

.c-chip--sm .c-chip__remove {
  inline-size: 18px;
  block-size: 18px;
}

/* =========================================
   Chip Style
========================================= */
.c-chip {
  color: var(--color-text-body);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  box-shadow: none;
}

.c-chip:where(button, a) {
  text-decoration: none;
}

.c-chip:where(button) {
  cursor: pointer;
  appearance: none;
}

.c-chip:where(button, a):focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

.c-chip__remove:hover,
.c-chip__remove:focus-visible {
  color: var(--color-text-heading);
  background-color: var(--color-surface-soft);
  outline: none;
}

/* =========================================
   Chip State
========================================= */
.c-chip.is-active,
.c-chip[aria-pressed=true],
.c-chip[aria-selected=true] {
  color: var(--color-surface);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.c-chip.is-disabled,
.c-chip[disabled],
.c-chip[aria-disabled=true] {
  pointer-events: none;
  color: var(--color-text-sub);
  background-color: var(--color-surface-soft);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.6;
}

.c-chip--removable .c-chip__remove {
  display: inline-grid;
}

.c-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-stepper__item {
  display: inline-flex;
  gap: var(--dist-4);
  align-items: center;
  min-inline-size: 0;
}

.c-stepper__marker {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--dist-28);
  block-size: var(--dist-28);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--ui-radius-pill);
}

.c-stepper__label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  white-space: nowrap;
}

.c-stepper__sep {
  display: inline-block;
  inline-size: var(--dist-24);
  block-size: 0;
  border-top: var(--ui-border-1) solid transparent;
  opacity: 0.6;
}

.c-stepper__marker {
  color: var(--color-text-body);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  box-shadow: var(--ui-elev-0);
}

.c-stepper__label {
  color: var(--color-text-heading);
}

.c-stepper__sep {
  border-top-color: var(--color-border);
}

.c-stepper__item.is-complete .c-stepper__marker {
  color: var(--ui-on-primary);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--ui-shadow);
}
.c-stepper__item.is-complete .c-stepper__label {
  color: var(--color-text-body);
}

.c-stepper__item.is-current .c-stepper__marker {
  color: var(--ui-on-primary);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--ui-shadow);
}
.c-stepper__item.is-current .c-stepper__label {
  color: var(--color-text-heading);
}

.c-stepper__item.is-disabled {
  opacity: var(--ui-opacity-muted);
}
.c-stepper__item.is-disabled .c-stepper__marker {
  color: var(--ui-disabled-text);
  background-color: var(--ui-disabled-bg);
  border-color: var(--ui-disabled-border);
  box-shadow: var(--ui-elev-0);
}
.c-stepper__item.is-disabled .c-stepper__label {
  color: var(--ui-disabled-text);
}

.c-timeline {
  display: grid;
  gap: var(--dist-16);
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--dist-24) 1fr;
  column-gap: var(--dist-12);
  align-items: start;
}

.c-timeline__rail {
  position: relative;
  inline-size: var(--dist-24);
  block-size: 100%;
}

.c-timeline__dot {
  display: inline-grid;
  place-items: center;
  inline-size: var(--dist-12);
  block-size: var(--dist-12);
  margin-block-start: var(--dist-6);
  margin-inline: auto;
  border-radius: var(--ui-radius-pill);
}

.c-timeline__line {
  position: absolute;
  inset-block: var(--dist-24) 0;
  inset-inline-start: 50%;
  inline-size: var(--ui-border-1);
  transform: translateX(-50%);
}

.c-timeline__dot {
  background-color: var(--color-border);
  box-shadow: var(--ui-elev-0);
}

.c-timeline__line {
  background-color: var(--color-border);
}

.c-timeline__title {
  color: var(--color-text-heading);
}

.c-timeline__meta {
  color: var(--color-text-sub);
}

.c-timeline__text {
  color: var(--color-text-body);
}

.c-timeline__item.is-current .c-timeline__dot {
  background-color: var(--color-accent);
}

.c-timeline__item.is-complete .c-timeline__dot {
  background-color: var(--color-primary);
}

.c-toast-stack {
  position: fixed;
  inset-block-end: var(--dist-16);
  inset-inline-end: var(--dist-16);
  z-index: var(--ui-z-notification);
  display: grid;
  gap: var(--dist-8);
  inline-size: calc(100vw - var(--dist-32));
  max-inline-size: var(--ui-panel-width-sm);
}

.c-toast {
  display: grid;
  gap: var(--dist-4);
  padding-block: var(--dist-8);
  padding-inline: var(--dist-8);
  border-radius: var(--ui-radius-12);
}

.c-toast__header {
  display: flex;
  gap: var(--dist-8);
  align-items: start;
  justify-content: space-between;
}

.c-toast__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.c-toast__message {
  margin: 0;
  line-height: 1.6;
}

.c-toast__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--dist-32);
  block-size: var(--dist-32);
  padding: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius-pill);
}

.c-toast {
  color: var(--color-text-body, #333);
  background-color: var(--color-surface, #f9f9f9);
  border: 0.0625rem solid var(--color-border, #e0e6ed);
  box-shadow: var(--ui-elev-3, var(--kw-none));
}

.c-toast__title {
  color: var(--color-text-heading, #111);
}

.c-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring, 0 0 0 calc(0.0625rem * 3) #ffa500);
}

.c-toast__close:hover {
  background-color: var(--ui-bg-soft, #f0f0f0);
}

/* =========================================
   Toast 状態スタイル
   ========================================= */
.c-toast {
  opacity: 0;
  transform: translateY(var(--dist-8));
  transition: opacity var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-standard);
}

.c-toast.is-open {
  opacity: 1;
  transform: translateY(0);
}

.c-toast.is-leaving {
  opacity: 0;
  transform: translateY(var(--dist-8));
}

/* NOTE:
   reduced-motion override for toast

   - components層のため utilities/_a11y.scss より前に出力される
   - 現在は transition: ... を直接指定しているため安全
   - 将来 duration-only 指定に変更する場合は順序に注意
*/
@media (prefers-reduced-motion: reduce) {
  .c-toast {
    transform: none;
    transition: none;
  }
}
/* =============================================
   Alert Structure
============================================= */
.c-alert {
  display: flex;
  gap: var(--dist-12);
  align-items: flex-start;
  padding: var(--dist-16);
  margin-block-end: var(--dist-16);
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: var(--ui-radius-8);
}

.c-alert__icon {
  flex-shrink: 0;
  margin-block-start: 0.125rem;
  font-size: 1.25rem;
  line-height: 1;
}

.c-alert__body {
  flex: 1;
}

.c-alert__title {
  margin-block-end: var(--dist-4);
  font-weight: 700;
}

/* =============================================
   Alert Style
============================================= */
.c-alert {
  color: var(--color-text-body, #333);
  background-color: var(--color-surface, #fff);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border, #e0e6ed);
  box-shadow: none;
}

.c-alert__title {
  color: var(--color-text-heading, #111);
}

.c-alert__icon {
  color: currentcolor;
}

.c-alert--primary {
  color: var(--color-surface, #fff);
  background-color: var(--color-primary, #007bff);
  border-color: var(--color-primary, #007bff);
}

.c-alert--success {
  color: var(--color-surface, #fff);
  background-color: var(--color-success, #198754);
  border-color: var(--color-success, #198754);
}

.c-alert--danger {
  color: var(--color-surface, #fff);
  background-color: var(--color-danger, #dc3545);
  border-color: var(--color-danger, #dc3545);
}

.c-alert--warning {
  color: var(--color-text-heading, #111);
  background-color: var(--color-warning, #ffc107);
  border-color: var(--color-warning, #ffc107);
}

.c-alert--info {
  color: var(--color-surface, #fff);
  background-color: var(--color-secondary, #6c757d);
  border-color: var(--color-secondary, #6c757d);
}

.c-alert--primary .c-alert__title,
.c-alert--success .c-alert__title,
.c-alert--danger .c-alert__title,
.c-alert--info .c-alert__title {
  color: inherit;
}

/* =============================================
   Alert State
============================================= */
.c-alert.is-hidden {
  display: none;
}

.c-icon,
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--dist-20);
  height: var(--dist-20);
  aspect-ratio: var(--ui-ratio-square);
  line-height: var(--ui-line-height-none);
  vertical-align: middle;
}

.c-icon svg,
.c-icon img,
.icon svg,
.icon img {
  display: block;
}

.c-icon--sm {
  width: var(--dist-16);
  height: var(--dist-16);
}

.c-icon--md {
  width: var(--dist-24);
  height: var(--dist-24);
}

.c-icon--lg {
  width: var(--dist-40);
  height: var(--dist-40);
}

.c-icon,
.icon {
  color: currentcolor;
}

.c-icon svg,
.icon svg {
  fill: currentcolor;
  stroke: currentcolor;
}

.c-icon--spin,
.icon--spin {
  animation: icon-spin var(--dur-1000) var(--ease-linear) infinite;
}

@keyframes icon-spin {
  from {
    transform: rotate(var(--ui-spin-from));
  }
  to {
    transform: rotate(var(--ui-spin-to));
  }
}
/* =========================================
   Icon Badge
========================================= */
.c-icon-badge {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--color-accent);
  background-color: var(--color-surface-soft);
  border-radius: var(--ui-radius-pill);
}

.c-icon-badge--success {
  color: var(--color-success);
  background-color: var(--ui-bg-success-soft);
}

.c-icon-badge--warning {
  color: var(--color-warning);
  background-color: var(--ui-bg-warning-soft);
}

.c-icon-badge--danger {
  color: var(--color-danger);
  background-color: var(--ui-bg-danger-soft);
}

/* ==================================================
   Text utilities
================================================== */
.text-sub {
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
  color: var(--text-soft);
}

.text-base {
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-relaxed);
  color: var(--text);
}

/* --------------------------------------------------
   Variants
-------------------------------------------------- */
.text-dark {
  color: var(--heading);
}

.text-light {
  color: var(--ui-on-dark);
}

.text-small {
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
  color: var(--text-soft);
}

.c-display-title {
  max-inline-size: 12em;
  margin: 0;
  color: currentcolor;
  font-family: var(--font-heading);
  font-size: clamp(var(--dist-40), 9vw, var(--dist-96));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--letter-tight);
}

.c-lead-copy {
  max-inline-size: 32em;
  margin: 0;
  color: currentcolor;
  font-size: clamp(var(--dist-18), 2.8vw, var(--dist-28));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--ui-letter-spacing);
}

.c-lead-copy__em {
  color: var(--color-accent);
}

.c-media-decoration,
.img-decoration {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.c-media-card,
.img-card {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--ui-radius);
}

.c-media-frame,
.img-frame {
  aspect-ratio: var(--ui-ratio-wide);
  overflow: hidden;
}
.c-media-frame img,
.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ui-radius);
}

.c-media-circle,
.img-circle {
  display: block;
  overflow: hidden;
  object-fit: cover;
  border-radius: var(--ui-radius-pill);
}

.c-media-center,
.img-center {
  display: block;
  margin-inline: auto;
}

.c-media-shadow,
.img-shadow {
  box-shadow: var(--ui-shadow);
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* =========================================
   Modal structure
========================================= */
.c-modal {
  --modal-panel-width: min(92vw, 520px);
  --modal-panel-max-height: 85vh;
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
}

.c-modal__overlay {
  position: absolute;
  inset: 0;
}

.c-modal__panel {
  position: relative;
  z-index: 901;
  inline-size: var(--modal-panel-width);
  max-block-size: var(--modal-panel-max-height);
  overflow: auto;
  outline: none;
}

.c-modal__header {
  display: flex;
  gap: var(--dist-16);
  align-items: center;
  justify-content: space-between;
}

/* =========================================
   Modal styles
========================================= */
.c-modal__overlay {
  background: var(--ui-overlay-strong, rgba(0, 0, 0, 0.64));
}

.c-modal__panel {
  padding: var(--dist-24);
  color: var(--color-text-body);
  background: var(--color-surface);
  border-radius: var(--ui-radius-12);
  box-shadow: var(--ui-elev-3, var(--ui-shadow, var(--kw-none)));
}

.c-modal__close {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-lg);
  line-height: 1;
  cursor: pointer;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius-pill);
}

.c-modal__close:hover {
  background: var(--ui-overlay-weak, rgba(0, 0, 0, 0.08));
}

.c-modal__close:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

/* =========================================
   Modal state
========================================= */
.c-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-standard), visibility var(--dur-200) var(--ease-standard);
}
.c-modal.is-front {
  z-index: 9999;
}

.c-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-modal-open {
  overflow: hidden;
}

/* =========================================
   Tab Structure
========================================= */
.c-tab__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
}

.c-tab__contents {
  margin-top: var(--dist-16);
}

.c-tab__content {
  /* 表示切替は _tab-state.scss */
}

/* =========================================
   Tab Style
========================================= */
.c-tab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--dist-40);
  padding-block: var(--dist-8);
  padding-inline: var(--dist-16);
  font: inherit;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-none);
  color: var(--color-text-heading);
  cursor: var(--ui-cursor-pointer);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-8);
  transition: color var(--dur-200) var(--ease-standard), background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}

.c-tab__btn:hover {
  background-color: var(--color-surface-soft);
}

.c-tab__btn:focus-visible {
  outline: var(--ui-border-2) var(--ui-border-solid) var(--ui-border-accent);
  outline-offset: var(--ui-focus-offset);
}

/* =========================================
   Tab State
========================================= */
.c-tab__btn.is-active,
.c-tab__btn[aria-selected=true] {
  color: var(--color-surface);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.c-tab__btn.is-disabled,
.c-tab__btn[aria-disabled=true],
.c-tab__btn:disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--color-text-sub);
  background-color: var(--color-surface-soft);
  opacity: 0.6;
}

.c-tab__content {
  display: none;
}

.c-tab__content.is-active,
.c-tab__content[aria-hidden=false] {
  display: block;
}

.c-accordion {
  display: grid;
  gap: 0.875rem;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.c-accordion__item {
  overflow: hidden;
  background-color: #fff;
  border: 0.0625rem solid rgba(17, 17, 17, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.04);
}
.c-accordion__item > h3 {
  margin: 0;
}

.c-accordion__prefix {
  margin-right: 0.5rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}

.c-accordion__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  color: #111;
  cursor: pointer;
  background-color: #fff;
  border: 0;
}
.c-accordion__header:hover {
  background-color: #f5efe6;
}
.c-accordion__header:focus-visible {
  outline: 2px solid #ffa500;
  outline-offset: -2px;
}
.c-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  color: #111;
  cursor: pointer;
  background-color: #f8f4ed;
  border: 0;
}
.c-accordion__trigger:hover {
  background-color: #f5efe6;
}
.c-accordion__trigger:focus-visible {
  outline: 2px solid #ffa500;
  outline-offset: -2px;
}
.c-accordion__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: 0 0 auto;
  color: currentColor;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 50%;
  background: #fff;
  transition: background-color var(--motion-ui) var(--ease-standard), border-color var(--motion-ui) var(--ease-standard);
}
.c-accordion__content {
  padding: 1rem 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #111;
  background-color: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}
.c-accordion__content p {
  margin: 0;
}
.c-accordion__content p + p {
  margin-top: 1em;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
  position: absolute;
  content: "";
  background: currentColor;
  border-radius: 999px;
}

.c-accordion__icon::before {
  inline-size: 0.625rem;
  block-size: 1.5px;
}

.c-accordion__icon::after {
  inline-size: 1.5px;
  block-size: 0.625rem;
}

.c-accordion__item.is-open .c-accordion__icon {
  background-color: #f5efe6;
}

.c-accordion__item.is-open .c-accordion__icon::after {
  opacity: 0;
}

.c-accordion__prefix {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}

.c-accordion__content {
  display: grid;
  grid-template-rows: var(--ui-grid-track-collapsed);
  transition: grid-template-rows var(--dur-350) var(--ease-standard);
}

.c-accordion__content > * {
  overflow: hidden;
}

.c-accordion__item.is-open .c-accordion__content {
  grid-template-rows: var(--ui-grid-track-expanded);
}

/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
.c-tooltip {
  position: relative;
  display: inline-block;
}
.c-tooltip__content {
  position: absolute;
  z-index: 980;
  white-space: nowrap;
}

.c-tooltip__content {
  padding: var(--dist-8) var(--dist-12);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-on-contrast);
  background-color: var(--ui-bg-contrast);
  border-radius: var(--ui-radius-8);
  box-shadow: var(--ui-shadow);
}

.c-tooltip__content {
  visibility: hidden;
  opacity: var(--ui-opacity-hidden);
  transition: opacity var(--dur-200) var(--ease-standard), visibility var(--dur-200) var(--ease-standard);
}

.c-tooltip:hover .c-tooltip__content,
.c-tooltip:focus-within .c-tooltip__content {
  visibility: visible;
  opacity: var(--ui-opacity-visible);
}

/* =========================================
   Pagination Structure
========================================= */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
  align-items: center;
  justify-content: center;
  margin-block: var(--dist-40);
}

.c-pagination__pages,
.c-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
  align-items: center;
  justify-content: center;
}

.c-pagination--start {
  justify-content: flex-start;
}

.c-pagination--end {
  justify-content: flex-end;
}

/* SP  */
@media screen and (max-width: 479px) {
  .c-pagination {
    display: grid;
    gap: var(--dist-10);
    justify-items: center;
  }
  .c-pagination__pages,
  .c-pagination__controls {
    justify-content: center;
  }
  .c-pagination__controls {
    order: 2;
  }
}
/* =========================================
   Pagination Style
========================================= */
.c-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--dist-12);
  color: var(--color-text-body);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
  background: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  cursor: pointer;
  transition: color var(--dur-200) var(--ease-standard), background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard), transform var(--dur-150) var(--ease-standard);
}

.c-pagination__item:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.c-pagination__item:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

.c-pagination__prev,
.c-pagination__next {
  padding-inline: var(--dist-16);
}

.c-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 32px;
  min-block-size: 44px;
  color: var(--color-text-sub);
  font-size: 0.875rem;
  pointer-events: none;
}

/* =========================================
   Pagination State
========================================= */
.c-pagination__item.is-active,
.c-pagination__item[aria-current=page] {
  color: var(--color-surface);
  background: var(--color-text-heading);
  border-color: var(--color-text-heading);
}

.c-pagination__item.is-disabled,
.c-pagination__item[aria-disabled=true] {
  color: var(--color-text-sub);
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.c-loader {
  display: inline-block;
  inline-size: var(--dist-48);
  block-size: var(--dist-48);
  border-style: solid;
  border-width: var(--ui-border-4);
  border-radius: var(--ui-radius-pill);
}

.c-loader--sm {
  inline-size: var(--dist-24);
  block-size: var(--dist-24);
  border-width: var(--ui-border-2);
}

.c-loader--lg {
  inline-size: var(--dist-72);
  block-size: var(--dist-72);
  border-width: var(--ui-border-6);
}

.c-loader__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dist-20);
}

.c-loader {
  border-color: var(--ui-bg-soft);
  border-top-color: var(--color-primary);
}

.c-loader--secondary {
  border-top-color: var(--color-secondary);
}

.c-loader--accent {
  border-top-color: var(--color-accent);
}

.c-loader--inline {
  display: inline-block;
  margin-inline: var(--dist-4);
  vertical-align: middle;
}

.c-loader {
  animation: loader-spin var(--dur-1000) var(--ease-linear) infinite;
}

.c-loader.is-loading {
  pointer-events: none;
  opacity: var(--ui-opacity-muted);
}

@keyframes loader-spin {
  from {
    transform: rotate(var(--ui-spin-from));
  }
  to {
    transform: rotate(var(--ui-spin-to));
  }
}
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* =========================================
   Swiper 共通スタイル（sass-starter-exiga 用）
========================================= */
.swiper {
  width: var(--ui-size-full);
}

.swiper-wrapper {
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

/* =========================================
   バリエーション
========================================= */
/* --- Hero スライダー（トップMV用・全幅カバー） --- */
.swiper--hero {
  --swiper-hero-width: 100vw;
  --swiper-hero-margin-inline: calc(50% - 50vw);
  width: var(--swiper-hero-width, 0);
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  margin-inline: var(--swiper-hero-margin-inline, 0);
}

.swiper--hero .swiper-slide {
  position: relative;
}

.swiper--hero .swiper-slide picture,
.swiper--hero .swiper-slide picture > img {
  --swiper-hero-object-position: 55% 45%;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--swiper-hero-object-position, initial);
}

/* --- Boxed スライダー（従来型・16:9/1080px） --- */
.swiper--boxed {
  --swiper-boxed-max: 1080px;
  --swiper-boxed-ratio: 16 / 9;
  max-width: var(--swiper-boxed-max, 0);
  aspect-ratio: var(--swiper-boxed-ratio, initial);
  margin: 0 auto;
}

.swiper--boxed .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- Wide スライダー（横長・大きめ表示用） --- */
.swiper--wide {
  --swiper-wide-max: 1440px;
  --swiper-wide-ratio: 21 / 9;
  max-width: var(--swiper-wide-max, 1440px);
  aspect-ratio: var(--swiper-wide-ratio, 21/9);
  margin-inline: auto;
  background: var(--ui-bg-soft);
}

.swiper--wide .swiper-slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* =========================================
   Product Slider
========================================= */
.product-slider {
  position: relative;
  display: grid;
  gap: var(--space-4);
  inline-size: 100%;
}

.product-slider--wide {
  max-inline-size: 1440px;
  margin-inline: auto;
}

.product-slider__title {
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.swiper--products {
  position: relative;
  inline-size: 100%;
  padding-block-end: var(--space-4);
  overflow: hidden;
}

.swiper--products .swiper-wrapper {
  align-items: stretch;
}

.swiper--products .swiper-slide {
  box-sizing: border-box;
  display: block;
  block-size: auto;
}

.swiper--products .swiper-scrollbar {
  inset-inline: var(--space-3);
  bottom: var(--space-2);
  block-size: var(--dist-4);
  background: var(--color-border);
  border-radius: var(--ui-radius-pill);
}

.swiper--products .swiper-scrollbar-drag {
  background: var(--color-text-sub);
  border-radius: var(--ui-radius-pill);
}

/* =========================================
   ナビゲーション／ページネーション
========================================= */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  z-index: 20;
  color: var(--ui-on-dark);
  transform: translateY(-50%);
}

.swiper-button-next {
  right: var(--dist-10);
}

.swiper-button-prev {
  left: var(--dist-10);
}

.swiper-pagination-bullet {
  background: var(--ui-on-dark);
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  background: var(--color-primary);
  opacity: 1;
}

/* =========================================
   Manual スライダー用
========================================= */
.swiper.is-manual {
  position: relative;
  overflow: hidden;
}

.swiper.is-manual .swiper-button-next,
.swiper.is-manual .swiper-button-prev {
  display: grid;
  place-items: center;
  inline-size: var(--dist-40);
  block-size: var(--dist-40);
  color: var(--color-primary);
  background: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-pill);
  box-shadow: var(--ui-shadow);
}

.swiper.is-manual .swiper-button-next::after,
.swiper.is-manual .swiper-button-prev::after {
  font-size: var(--dist-18);
  font-weight: var(--font-weight-black);
}

.swiper.is-manual .swiper-button-next {
  right: var(--space-3);
}

.swiper.is-manual .swiper-button-prev {
  left: var(--space-3);
}

/* =========================================
   レスポンシブ調整
========================================= */
@media screen and (width <= 767px) {
  .swiper--hero .swiper-slide picture > img {
    --swiper-hero-object-position: 50% 35%;
  }
}
.c-feature-list {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.c-feature {
  display: grid;
  gap: clamp(var(--dist-20, 20px), 2vw, var(--dist-ui, 28px));
  padding: clamp(var(--dist-24, 24px), 2.4vw, var(--dist-32, 32px));
  border: var(--ui-border-1, 1px) var(--ui-border-solid, solid) var(--line, #e5e7eb);
  border-radius: var(--ui-radius, var(--ui-radius-8, 8px));
  background: var(--color-surface, #fff);
}

.c-feature__num {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.12);
}

.c-feature__media {
  overflow: hidden;
  border-radius: var(--ui-radius-12, 12px);
  aspect-ratio: 16/9;
  background: var(--ui-bg-soft, #f3f4f6);
}

.c-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-feature__media img[data-fit=contain] {
  object-fit: contain;
  background: var(--ui-bg-soft, #f7f7f7);
}

.c-feature__body {
  display: grid;
  align-content: center;
  gap: var(--space-3, var(--dist-16, 16px));
  max-inline-size: none;
}

.c-feature__title {
  margin: 0;
}

.c-feature__text {
  margin: 0;
  max-inline-size: none;
  line-height: 1.8;
}

.c-feature .c-button {
  justify-self: start;
  min-inline-size: 11rem;
  padding-inline: 2rem;
  margin-top: var(--space-1, var(--dist-8, 8px));
}

/* 画像なしでも成立 */
.c-feature:not(:has(.c-feature__media)) .c-feature__body {
  max-inline-size: none;
}

/* components / feature variation */
.c-feature.is-quiet {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.c-feature.is-quiet .c-feature__body {
  display: grid;
  align-content: center;
  gap: var(--space-3, var(--dist-16, 16px));
  padding-inline-start: clamp(var(--dist-24, 24px), 3vw, var(--dist-40, 40px));
  max-inline-size: none;
}

/* --------------------------------------
   Plain variation
-------------------------------------- */
.c-feature.is-plain {
  position: relative;
  grid-template-columns: 1fr;
  padding-inline: 0;
  padding-block: clamp(var(--dist-24, 24px), 2.4vw, var(--dist-32, 32px));
  border: 0;
  border-top: var(--ui-border-1, 1px) var(--ui-border-solid, solid) var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
}

.c-feature.is-plain .c-feature__body {
  max-inline-size: none;
}

.c-feature.is-plain .c-feature__media {
  display: none;
}

.c-feature.is-plain .c-feature__text {
  margin-inline-start: 0;
  max-inline-size: none;
}

.c-feature.is-plain.has-num {
  gap: var(--space-4, var(--dist-24, 24px));
}

.c-feature.is-plain:nth-child(even) {
  padding-inline-start: 0;
}

/* right typography */
.c-feature__aside {
  display: none;
  margin: 0;
  font-size: clamp(2.75rem, 4.2vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.08;
  transform: translate(3%, 14%);
}

/* --------------------------------------
   Default feature layout
-------------------------------------- */
@media screen and (min-width: 768px) {
  .c-feature {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    gap: clamp(24px, 3vw, 40px);
  }
  .c-feature.is-reverse {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
  .c-feature.is-reverse .c-feature__media {
    order: 2;
  }
  .c-feature.is-reverse .c-feature__body {
    order: 1;
    padding-inline-start: var(--space-3, var(--dist-16, 16px));
  }
}
/* --------------------------------------
   Plain variation: wide-only editorial layout
-------------------------------------- */
@media (min-width: 1200px) {
  .c-feature.is-plain {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 30vw);
    align-items: start;
    gap: clamp(16px, 2vw, 24px);
  }
  .c-feature.is-plain .c-feature__body {
    grid-column: 1;
  }
  .c-feature.is-plain .c-feature__aside {
    display: block;
    grid-column: 2;
    justify-self: end;
    align-self: center;
  }
  .c-feature.is-plain:nth-child(even) {
    padding-inline-start: clamp(40px, 8vw, 140px);
  }
  .c-feature.is-plain .c-feature__text {
    margin-inline-start: clamp(16px, 3vw, 40px);
  }
}
/* --------------------------------------
   Wider desktop
-------------------------------------- */
@media (min-width: 1600px) {
  .c-feature {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  }
  .c-feature.is-plain {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 32vw);
  }
  .c-feature.is-plain .c-feature__aside {
    font-size: clamp(3.25rem, 4vw, 6rem);
    opacity: 0.08;
  }
}
/* --------------------------------------
   sp
-------------------------------------- */
@media screen and (max-width: 767px) {
  .c-feature,
  .c-feature.is-reverse {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line, var(--color-border, #e5e7eb));
    border-radius: var(--ui-radius-16, 16px);
    background: var(--color-surface, #fff);
    box-shadow: var(--ui-shadow, var(--kw-none));
  }
  .c-feature__media {
    order: 0;
    margin: 0;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--ui-radius-16, 16px) var(--ui-radius-16, 16px) 0 0;
  }
  .c-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-feature__body {
    order: 1;
    padding: var(--dist-24, 24px);
  }
  .c-feature .c-button {
    inline-size: min(100%, 280px);
    justify-content: center;
    justify-self: center;
  }
}
.c-points {
  display: grid;
  gap: clamp(var(--dist-24, 24px), 4vw, var(--dist-48, 48px));
}

.c-points__media {
  overflow: hidden;
  border-radius: var(--dist-16, 16px);
  aspect-ratio: 5/4;
  background: var(--color-surface-soft, #f3f3f3);
}

.c-points__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-points__list {
  display: grid;
  gap: var(--dist-20, 20px);
}

.c-points__item {
  display: grid;
  grid-template-columns: var(--dist-56, 56px) 1fr;
  gap: var(--dist-16, 16px);
  padding-block-end: var(--dist-20, 20px);
  border-block-end: 1px solid var(--line, var(--color-line, #e5e7eb));
}

.c-points__num {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}

.c-points__body {
  display: grid;
  gap: var(--dist-8, 8px);
}

.c-points__title {
  margin: 0;
}

.c-points__text {
  margin: 0;
  line-height: 1.8;
}

.c-points.is-reverse {
  direction: rtl;
}

.c-points.is-reverse > * {
  direction: ltr;
}

.c-points.is-no-media {
  grid-template-columns: 1fr;
}

.c-points--guide {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.c-points--guide .c-points__list {
  display: grid;
  gap: var(--dist-20, 20px);
}

@media screen and (min-width: 768px) {
  .c-points {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }
  .c-points--no-media,
  .c-points--guide {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .c-points--guide .c-points__list {
    gap: var(--dist-24, 24px);
  }
}
.hero-section {
  padding-block-start: 0;
}

/* --------------------------------------
   Hero: basic image + content
   Mv パターン1
-------------------------------------- */
.c-hero {
  display: grid;
  gap: var(--dist-24, 24px);
  overflow: hidden;
  background: transparent;
  border-radius: 0;
}

.c-hero__media {
  position: relative;
  aspect-ratio: 16/6.8;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ui-radius, var(--ui-radius-8, 8px));
}

.c-hero__caption {
  position: absolute;
  inset-block-end: clamp(88px, 15vw, 170px);
  inset-inline-start: clamp(24px, 6vw, 100px);
  max-inline-size: min(90%, 60rem);
  color: #fff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(255, 255, 255, 0.55), 0 1px 10px rgba(0, 0, 0, 0.18);
}

.c-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-hero__overlay {
  position: static;
  inset: auto;
  z-index: var(--z-content-overlay, 1);
  display: block;
  padding: 0;
  pointer-events: none;
}

.c-hero__content {
  max-inline-size: var(--ui-content-width-lg);
  padding: 0;
  margin-inline: auto;
  color: var(--color-text-body, #333);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-16, 16px);
  justify-content: center;
}

.c-hero__actions .c-button {
  justify-content: center;
  min-inline-size: 14rem;
}

.c-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8, 8px);
  justify-content: center;
  max-inline-size: 100%;
  margin-top: var(--dist-12, 12px);
}

.c-hero__features .c-badge {
  max-inline-size: 100%;
}

.c-hero__eyebrow {
  margin: var(--dist-0) var(--dist-0) var(--dist-16);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-compact);
  color: inherit;
  text-align: left;
  letter-spacing: var(--ui-letter-spacing-spaced);
}

.c-hero__title {
  margin: 0;
  color: var(--color-text-heading, #111827);
}

.c-hero__text {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.9;
  color: inherit;
}

.c-hero__title img,
.c-hero h1 img {
  display: block;
  width: min(100%, 42.5rem);
  height: auto;
}

/* optional: dark glass pattern */
.c-hero--glass-dark .c-hero__content {
  color: var(--ui-on-dark, #fff);
}

.c-hero--glass-dark .c-hero__title,
.c-hero--glass-dark .c-hero__eyebrow,
.c-hero--glass-dark .c-hero__text {
  color: inherit;
}

.c-hero--edge .c-hero__media {
  border-radius: var(--ui-radius-12, 12px);
}

.c-hero__content > .c-badge {
  justify-self: center;
  margin-block-end: clamp(8px, 1.2vw, 12px);
}

@media screen and (max-width: 767px) {
  .c-hero {
    gap: var(--dist-20, 20px);
  }
  .c-hero__media {
    aspect-ratio: 4/3;
  }
  .c-hero__content {
    max-inline-size: 100%;
    text-align: left;
  }
  .c-hero__actions {
    justify-content: center;
  }
  .c-hero__actions .c-button {
    justify-content: center;
    inline-size: min(100%, 280px);
  }
}
@media screen and (max-width: 479px) {
  .c-hero__media {
    display: grid;
    gap: var(--dist-20, 20px);
    aspect-ratio: auto;
    overflow: visible;
  }
  .c-hero__img {
    aspect-ratio: 4/3;
  }
  .c-hero__caption {
    position: static;
    inset: auto;
    max-inline-size: 100%;
    padding-inline: var(--dist-16, 16px);
    color: var(--color-text-heading, #111827);
    text-shadow: none;
  }
  .c-hero__content {
    padding-inline: var(--dist-16, 16px);
    margin-top: 0;
  }
}
/* --------------------------------------
   Hero: stack variant
   - logo / visual / info
   Mv パターン2
-------------------------------------- */
.c-hero--stack {
  display: grid;
  gap: var(--dist-24, 24px);
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.c-hero--stack .c-hero__head {
  align-items: center;
  text-align: center;
  background: transparent;
}

.c-hero--stack .c-hero__logo {
  margin: 0;
}

.c-hero--stack .c-hero__logo img {
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin-inline: auto;
}

.c-hero--stack .c-hero__visual {
  margin: 0;
  background: transparent;
}

.c-hero--stack .c-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ui-radius-12, 12px);
}

.c-hero--stack .c-hero__content,
.c-hero--stack .c-hero__panel {
  max-inline-size: none;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  .c-hero--stack .c-hero__logo img {
    width: min(100%, 480px);
  }
}
/* --------------------------------------
   Hero: stack variant
   MV パターン3
-------------------------------------- */
.mv {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.mv__media {
  position: relative;
  z-index: 0;
  min-height: 100svh;
}

.mv__image {
  position: absolute;
  inset: 0;
  visibility: hidden;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-hero) var(--ease-smooth), visibility var(--motion-hero) var(--ease-smooth);
}

.mv__image.is-active {
  visibility: visible;
  opacity: 1;
}

.mv__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--motion-mv-zoom) var(--ease-smooth);
}

.mv__image.is-active img {
  transform: scale(1.08);
}

.mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mv__content,
.mv__catch {
  position: relative;
  z-index: 3;
}

.mv__content {
  width: min(100%, 980px);
  padding-block: var(--dist-32, 32px);
  padding-inline: var(--dist-20, 20px);
  text-align: center;
}

/* --------------------------------------
   Text area: base
-------------------------------------- */
.mv__texts {
  position: relative;
  width: min(100%, 40rem);
  min-height: 180px;
  margin-inline: auto;
}

.mv__text-set {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  box-sizing: border-box;
  visibility: hidden;
  width: 100%;
  padding-inline: var(--dist-24, 24px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.mv__text-set.is-active {
  visibility: visible;
  opacity: 1;
}

.mv__sub {
  margin: 0 0 var(--dist-8, 8px);
  font-family: var(--font-base, sans-serif);
  font-size: 0.95rem;
  line-height: var(--ui-line-height, 1.6);
  color: var(--ui-on-dark, #fff);
  letter-spacing: var(--ui-letter-spacing, initial);
}

.mv__title {
  margin: 0 0 var(--dist-16, 16px);
  font-family: var(--font-heading, sans-serif);
  font-size: 2.1rem;
  line-height: 1.55;
  color: var(--ui-on-dark, #fff);
  letter-spacing: var(--ui-letter-spacing, initial);
}

.mv__text {
  margin: 0;
  font-family: var(--font-base, sans-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ui-text-on-contrast, #fff);
  letter-spacing: var(--ui-letter-spacing, initial);
}

.mv::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background: linear-gradient(to bottom, var(--ui-overlay-weak, rgba(0, 0, 0, 0.08)), var(--ui-overlay-strong, rgba(0, 0, 0, 0.64)));
}

.mv__sub,
.mv__title,
.mv__text {
  opacity: 0;
  filter: blur(var(--blur-4, 4px));
  transform: translateY(var(--dist-16, 16px)) scale(var(--motion-scale-start, 0.98));
  transition: opacity var(--motion-hero) var(--ease-smooth), transform var(--motion-hero) var(--ease-smooth), filter var(--motion-hero) var(--ease-smooth);
}

.mv__text-set.is-active .mv__sub,
.mv__text-set.is-active .mv__title,
.mv__text-set.is-active .mv__text {
  opacity: 1;
  filter: blur(var(--blur-0, 0));
  transform: translateY(0) scale(1);
}

.mv__text-set.is-active .mv__sub {
  transition-delay: var(--delay-300);
}

.mv__text-set.is-active .mv__title {
  transition-delay: var(--delay-700);
}

.mv__text-set.is-active .mv__text {
  transition-delay: var(--delay-1100);
}

.mv-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--dist-40, 40px);
  margin-bottom: var(--dist-48, 48px);
}

/* --------------------------------------
   sp only
   - 767以下
-------------------------------------- */
@media screen and (max-width: 767px) {
  .mv__texts {
    width: min(100%, 32rem);
    min-height: 180px;
  }
  .mv__text-set {
    padding-inline: var(--dist-24, 24px);
  }
  .mv__title {
    font-size: clamp(1.2rem, 6vw, 1.8rem);
    line-height: 1.8;
  }
  .mv__text {
    line-height: 1.7;
  }
}
.c-cta-block {
  display: grid;
  gap: var(--dist-24, 24px);
  margin-inline: auto;
}

.c-cta-block__heading {
  width: 100%;
  margin: 0;
  text-align: left;
}

.c-cta-block__foot {
  display: grid;
  gap: var(--dist-12, 12px);
  width: 100%;
  margin-inline: auto;
  justify-items: center;
}

.c-cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-16, 16px);
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

.c-cta-block__actions .c-button {
  min-inline-size: 14rem;
  justify-content: center;
}

.c-cta-block__note {
  width: 100%;
  max-inline-size: 34rem;
  margin: 0;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .c-cta-block {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(var(--dist-32, 32px), 5vw, var(--dist-64, 64px));
    align-items: center;
  }
  .c-cta-block__foot {
    justify-items: start;
  }
  .c-cta-block__note {
    max-inline-size: 32rem;
  }
}
@media screen and (max-width: 767px) {
  .c-cta-block__actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
  }
  .c-cta-block__actions .c-button {
    inline-size: 13.75rem;
    max-inline-size: 100%;
  }
  .c-cta-block__foot {
    justify-items: center;
  }
  .c-cta-block__note {
    text-align: left;
  }
}
.c-notice {
  display: grid;
  gap: var(--dist-10);
  padding-block: var(--dist-14);
  padding-inline: var(--dist-18);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  box-shadow: var(--ui-elev-1);
}

.c-notice__label {
  margin: var(--dist-0);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-compact);
  color: var(--color-text-heading);
  letter-spacing: var(--ui-letter-spacing-wide);
}

.c-notice__body {
  display: grid;
  gap: var(--dist-6);
  color: var(--color-text-body);
}

.c-notice__body p {
  margin: var(--dist-0);
}

.c-notice--soft {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.c-notice--soft .c-notice__label {
  color: var(--color-warning);
}

.c-notice--warn {
  background-color: var(--ui-bg-soft);
  border-color: var(--color-border);
  border-left: var(--ui-border-4) var(--ui-border-solid) var(--color-danger);
}

.c-notice--warn .c-notice__label {
  color: var(--color-danger);
}

/* ==================================================
   Scene
   - PC: image + overlay panel
   - SP: stacked layout
================================================== */
.c-scene-list {
  display: grid;
  gap: clamp(var(--dist-24, 24px), 4vw, var(--dist-48, 48px));
}

.c-scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius-16, 16px);
  background: var(--scene-bg, var(--color-surface, #fff));
}

.c-scene__media {
  position: relative;
  margin: 0;
  aspect-ratio: 21/9;
  overflow: hidden;
}

.c-scene__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.c-scene__panel {
  display: grid;
  gap: var(--space-3, var(--dist-16, 16px));
  padding: clamp(var(--dist-24, 24px), 3vw, var(--dist-40, 40px));
  background: var(--scene-panel-bg, rgba(255, 255, 255, 0.86));
}

.c-scene__title {
  margin: 0;
}

.c-scene__text {
  margin: 0;
  max-inline-size: 34em;
}

/* ==================================================
   Scene rotator
================================================== */
.c-scene--rotator {
  --scene-rotate-duration: var(--dur-2000);
}

.c-scene--rotator .c-scene__media {
  min-block-size: var(--scene-media-min, 420px);
}

.c-scene--rotator .c-scene__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--scene-rotate-duration) ease;
}

.c-scene--rotator .c-scene__img.is-active {
  opacity: 1;
}

.c-scene--rotator .c-scene__img:first-child {
  position: relative;
}

html.is-reduced-motion .c-scene--rotator .c-scene__img {
  transition: none;
}

/* ==================================================
   PC overlay
================================================== */
@media screen and (min-width: 768px) {
  .c-scene {
    min-block-size: var(--scene-min-h, 460px);
  }
  .c-scene__img {
    min-block-size: var(--scene-media-min, 360px);
  }
  .c-scene__panel {
    position: absolute;
    inset-block: auto var(--dist-32, 32px);
    max-inline-size: min(var(--scene-panel-max, 460px), 100% - var(--dist-64, 64px));
    border-radius: var(--ui-radius-16, 16px);
    box-shadow: var(--scene-panel-shadow, var(--ui-elev-2, var(--kw-none)));
  }
  .c-scene.is-copy-right .c-scene__panel {
    inset-inline: auto var(--dist-32, 32px);
  }
  .c-scene.is-copy-left .c-scene__panel {
    inset-inline: var(--dist-32, 32px) auto;
  }
}
/* ==================================================
   SP stacked
================================================== */
@media screen and (max-width: 767px) {
  .c-scene__img {
    min-block-size: var(--scene-media-min-sp, 260px);
  }
  .c-scene__panel {
    position: static;
    max-inline-size: none;
    border-radius: 0;
    box-shadow: none;
  }
  .c-scene--rotator .c-scene__media {
    min-block-size: var(--scene-media-min-sp, 260px);
  }
}
.c-gallery-band {
  position: relative;
  padding-block: var(--ui-section-block-fluid);
  overflow: clip;
  isolation: isolate;
}

.c-gallery-band::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background: url("/img/kominka-wallpaper2.webp") center/cover no-repeat;
}

.c-gallery-band::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--ui-overlay-warm);
}

.c-gallery-band__inner {
  display: grid;
  gap: var(--ui-gap-fluid-lg);
  align-items: center;
}

.c-gallery-band__content {
  display: grid;
  gap: var(--dist-20);
  max-width: var(--ui-content-width-sm);
}

.c-gallery-band__text {
  margin: var(--dist-0);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-loose);
  color: var(--text);
}

.c-gallery-band__media {
  display: grid;
  gap: var(--dist-16);
}

.c-gallery-band__item {
  margin: var(--dist-0);
  overflow: hidden;
  background-color: var(--ui-bg-surface-translucent);
  border-radius: var(--ui-radius-12);
  box-shadow: var(--ui-elev-1);
}

.c-gallery-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-gallery-band .c-heading__eyebrow,
.c-gallery-band .c-heading__title {
  margin-inline: 0;
  text-align: left;
}

/* SP */
.c-gallery-band__item--main,
.c-gallery-band__item--top,
.c-gallery-band__item--bottom {
  aspect-ratio: var(--ui-ratio-standard);
}

/* PC */
@media screen and (min-width: 768px) {
  .c-gallery-band__inner {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
  .c-gallery-band__media {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--ui-gap-fluid-sm);
    align-items: start;
  }
  .c-gallery-band__item--main {
    grid-row: 1/3;
    grid-column: 1;
    aspect-ratio: var(--ui-ratio-portrait);
  }
  .c-gallery-band__item--top {
    grid-row: 1;
    grid-column: 2;
    aspect-ratio: var(--ui-ratio-standard);
  }
  .c-gallery-band__item--bottom {
    grid-row: 2;
    grid-column: 2;
    aspect-ratio: var(--ui-ratio-square);
    margin-top: var(--dist-24);
  }
}
/* =========================================
   Product Gallery
========================================= */
.c-gallery-viewer {
  display: grid;
  gap: var(--dist-16);
}

.c-gallery-viewer__main {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ui-radius-8);
  background: var(--color-surface-soft);
}

.c-gallery-viewer__img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.c-gallery-viewer__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
}

.c-gallery-viewer__thumb {
  inline-size: 72px;
  padding: 0;
  overflow: hidden;
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard), transform var(--dur-150) var(--ease-standard);
}

.c-gallery-viewer__thumb:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.c-gallery-viewer__thumb:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

.c-gallery-viewer__thumb.is-active,
.c-gallery-viewer__thumb[aria-current=true] {
  border-color: var(--color-text-heading);
}

.c-gallery-viewer__thumb img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .c-gallery-viewer {
    inline-size: 100%;
    max-inline-size: 600px;
    margin-inline: auto;
  }
  .c-gallery-viewer__img {
    aspect-ratio: 16/9;
  }
}
/* ==================================================
   Showcase
================================================== */
.c-showcase {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.c-showcase figure {
  margin: 0;
}

.c-showcase__featured {
  overflow: hidden;
  padding: clamp(var(--dist-16, 16px), 2vw, var(--dist-24, 24px));
  background-color: var(--color-surface, #fff);
  border: 0.0625rem solid var(--color-border, #e0e6ed);
  border-radius: var(--ui-radius-12, 12px);
  box-shadow: var(--ui-shadow, var(--kw-none));
}

.c-showcase__featured-media,
.c-showcase-item__media {
  inline-size: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ui-bg-soft, #f3f4f6);
  border-radius: var(--ui-radius-12, 12px);
}

.c-showcase__featured-media img,
.c-showcase-item__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.c-showcase__featured-media img {
  object-position: center 35%;
}

.c-showcase-item__media img {
  object-position: center 20%;
}

.c-showcase__featured-body {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-inline: clamp(16px, 3vw, 32px);
}

.c-showcase__featured-body > .c-badge {
  justify-self: start;
}

.c-showcase__featured-name {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-heading, #111);
}

.c-showcase__featured-meta {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-body, #333);
}

.c-showcase__featured-text {
  max-inline-size: 34em;
  margin: 0;
  line-height: 1.85;
  color: var(--color-text-body, #333);
}

.c-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12, 12px);
}

.c-showcase__list {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ==================================================
   Showcase item
================================================== */
.c-showcase-item {
  list-style: none;
}

.c-showcase-item__card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 1rem;
  align-items: center;
  overflow: hidden;
  padding: 1rem;
  background-color: var(--color-surface, #fff);
  border: 0.0625rem solid var(--color-border, #e0e6ed);
  border-radius: var(--ui-radius-12, 12px);
  box-shadow: var(--ui-shadow, var(--kw-none));
}

.c-showcase-item__body {
  display: grid;
  gap: var(--dist-8, 8px);
  min-width: 0;
}

.c-showcase-item__name {
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-heading, #111);
}

.c-showcase-item__meta {
  margin: 0;
  font-size: clamp(0.8125rem, 2.1vw, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-body, #333);
}

.c-showcase-item__text {
  margin: 0;
  font-size: clamp(0.9rem, 2.3vw, 0.95rem);
  line-height: 1.75;
  color: var(--color-text-body, #333);
}

/* ==================================================
   Responsive
================================================== */
@media screen and (min-width: 768px) {
  .c-showcase-item__card {
    grid-template-columns: 120px 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .c-showcase {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }
  .c-showcase__list {
    grid-template-rows: repeat(3, 1fr);
    align-self: stretch;
  }
  .c-showcase-item__card {
    block-size: 100%;
    grid-template-columns: clamp(160px, 14vw, 220px) 1fr;
    min-block-size: clamp(160px, 14vw, 220px);
  }
  .c-showcase-item__media {
    inline-size: clamp(160px, 14vw, 220px);
    block-size: clamp(160px, 14vw, 220px);
  }
  .c-showcase-item__body {
    align-content: center;
    gap: var(--dist-10, 10px);
  }
}
/* 〜1199px：1カラム */
@media (max-width: 1199px) {
  .c-showcase {
    grid-template-columns: 1fr;
  }
  .c-showcase__featured,
  .c-showcase__list,
  .c-showcase-item__card {
    inline-size: 100%;
    max-inline-size: 720px;
    margin-inline: auto;
  }
  .c-showcase__featured-media {
    inline-size: 100%;
    aspect-ratio: 4/3;
  }
}
/* 481〜1199px：サブカードは横並び */
@media (min-width: 481px) and (max-width: 1199px) {
  .c-showcase-item__card {
    grid-template-columns: clamp(112px, 22vw, 168px) 1fr;
  }
  .c-showcase-item__media {
    inline-size: clamp(112px, 22vw, 168px);
    block-size: clamp(112px, 22vw, 168px);
  }
}
/* 〜480px：サブカードも縦積み */
@media (max-width: 480px) {
  .c-showcase-item__card {
    grid-template-columns: 1fr;
    gap: var(--dist-16, 16px);
    padding: var(--dist-18, 18px);
  }
  .c-showcase-item__media {
    inline-size: 100%;
    block-size: clamp(150px, 52vw, 220px);
    aspect-ratio: auto;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1280px) {
  .c-showcase {
    gap: var(--dist-24, 24px);
  }
  .c-showcase__featured {
    padding: var(--dist-20, 20px);
  }
  .c-showcase__list {
    gap: var(--dist-12, 12px);
  }
  .c-showcase-item__card {
    gap: var(--dist-16, 16px);
    padding: var(--dist-16, 16px);
  }
}
.c-price-grid {
  display: grid;
  gap: var(--dist-24, 24px);
  max-inline-size: 980px;
  margin-inline: auto;
}

.c-price-card {
  display: grid;
  gap: var(--dist-16, 16px);
  padding: clamp(var(--dist-24, 24px), 3vw, var(--dist-40, 40px));
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--ui-radius-16, 16px);
  box-shadow: var(--ui-shadow, var(--kw-none));
}

.c-price-card__title,
.c-price-card__lead,
.c-price-card__main,
.c-price-card__list,
.c-price-card__note {
  margin: 0;
}

.c-price-card__main {
  display: flex;
  align-items: baseline;
  gap: var(--dist-8, 8px);
  padding-block-end: var(--dist-16, 16px);
  margin-block: var(--dist-12, 12px);
  border-block-end: 1px solid var(--color-border, #e5e7eb);
}

.c-price-card__price {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
}

.c-price-card__list {
  display: grid;
  gap: var(--dist-8, 8px);
  padding-inline-start: 1.2em;
}

.c-price-card__footer {
  display: grid;
  gap: var(--dist-16, 16px);
  margin-top: var(--dist-8, 8px);
}

.c-price-card__footer .c-button {
  justify-self: start;
}

.c-price-card > .c-badge,
.c-price-card__badge {
  justify-self: start;
  width: auto;
  max-inline-size: max-content;
}

@media screen and (min-width: 768px) {
  .c-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.c-price-range {
  display: grid;
  gap: var(--dist-24);
}

.c-price-range__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dist-12);
}

.c-price-range__field {
  display: grid;
  gap: var(--dist-8);
}

.c-price-range__label {
  font-size: 0.8125rem;
  font-weight: 700;
}

.c-price-range__input {
  inline-size: 100%;
  min-block-size: 48px;
  padding-inline: var(--dist-12);
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  color: var(--color-text-body, #333);
  font: inherit;
  font-weight: 700;
  background: var(--color-surface, #fff);
}

/* 価格フィルターのスライダー部分 */
.c-price-range__slider {
  --price-min-percent: 0%;
  --price-max-percent: 100%;
  position: relative;
  block-size: 32px;
}

.c-price-range__slider::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 4px;
  border-radius: var(--ui-radius-pill);
  background: linear-gradient(to right, #d9dde3 0%, #d9dde3 var(--price-min-percent), #111111 var(--price-min-percent), #111111 var(--price-max-percent), #d9dde3 var(--price-max-percent), #d9dde3 100%);
  transform: translateY(-50%);
}

.c-price-range > .c-button {
  justify-self: center;
}

.c-price-range__control {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  margin: 0;
  pointer-events: none;
  appearance: none;
  background: transparent;
  transform: translateY(-50%);
}

.c-price-range__control::-webkit-slider-runnable-track {
  background: transparent;
}

.c-price-range__control::-moz-range-track {
  background: transparent;
}

.c-price-range__control::-webkit-slider-thumb {
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: #111111;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
}

.c-price-range__control::-moz-range-thumb {
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: #111111;
  cursor: pointer;
  pointer-events: auto;
}

/* 通常マーカー：本文・見出し内で使いやすい */
.c-marker-text {
  background: linear-gradient(transparent 60%, var(--marker-bg-soft) 0%);
}

/* SVGマーカー共通 */
.c-marker-text--scribble,
.c-marker-text--circle,
.c-marker-text--wave {
  position: relative;
  display: inline-block;
}

.c-marker-text--scribble::after,
.c-marker-text--circle::after,
.c-marker-text--wave::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

/* 長い手書き下線 */
.c-marker-text--scribble::after {
  inset-inline-start: calc(var(--dist-16) * -1);
  inset-inline-end: calc(var(--dist-32) * -1);
  inset-block-end: calc(var(--dist-12) * -1);
  block-size: var(--dist-24);
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='24' viewBox='0 0 420 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18 C80 6, 160 8, 250 7 C320 6, 375 5, 416 3' fill='none' stroke='%23ffa500' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 20 C95 9, 180 11, 270 10 C330 9, 380 8, 414 7' fill='none' stroke='%23ffa500' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

/* 手書き囲み */
.c-marker-text--circle::after {
  inset: calc(var(--dist-8) * -1) calc(var(--dist-12) * -1);
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='64' viewBox='0 0 220 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 34 C12 8, 70 2, 136 6 C198 10, 218 28, 204 46 C188 66, 88 60, 34 54 C4 50, 0 40, 8 34Z' fill='none' stroke='%23ffa500' stroke-width='3' stroke-linecap='round' opacity='.95'/%3E%3Cpath d='M14 36 C20 14, 78 8, 140 10 C190 12, 210 28, 198 43 C180 58, 92 56, 40 50 C12 47, 8 40, 14 36Z' fill='none' stroke='%23ffa500' stroke-width='1.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* 波線 */
.c-marker-text--wave::after {
  inset-inline-start: calc(var(--dist-8) * -1);
  inset-inline-end: calc(var(--dist-8) * -1);
  inset-block-end: calc(var(--dist-10) * -1);
  block-size: var(--dist-16);
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='20' viewBox='0 0 240 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12 C18 5, 32 18, 48 11 S78 5, 96 12 S126 18, 144 10 S176 5, 194 12 S222 18, 237 9' fill='none' stroke='%23ffa500' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M10 15 C26 9, 42 18, 58 14 S88 10, 106 15 S136 19, 154 13 S185 9, 204 15 S226 18, 236 13' fill='none' stroke='%23ffa500' stroke-width='1.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* --------------------------------------
   Logo Row ロゴリスト
-------------------------------------- */
.c-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-logo-row__item {
  position: relative;
  display: grid;
  gap: var(--space-1);
  justify-items: center;
  text-align: center;
}

.c-logo-row__item + .c-logo-row__item::before {
  position: absolute;
  inset-block: var(--dist-8);
  inset-inline-start: calc(var(--space-4) * -0.5);
  inline-size: var(--ui-border-1);
  content: "";
  background: currentcolor;
  opacity: 0.4;
}

.c-logo-row__img {
  display: block;
  inline-size: var(--dist-56);
  block-size: var(--dist-56);
  object-fit: contain;
}

.c-logo-row__label {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

@media screen and (max-width: 479px) {
  .c-logo-row {
    gap: var(--space-3);
  }
  .c-logo-row__img {
    inline-size: var(--dist-48);
    block-size: var(--dist-48);
  }
  .c-logo-row__label {
    font-size: 0.75rem;
  }
  .c-logo-row__item + .c-logo-row__item::before {
    inset-inline-start: calc(var(--space-3) * -0.5);
  }
}
/* ---------------------------------------------
    利用メリットのアイコンリスト
     .c-benefit-list
     .c-benefit-list__item
     .c-benefit-list__icon
     .c-benefit-list__title
     .c-benefit-list__text
 --------------------------------------------- */
.c-benefit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-inline-size: 45rem;
  padding: var(--space-3);
  margin: 0;
  list-style: none;
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
  box-shadow: var(--ui-shadow);
}

.c-benefit-list__item {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-3);
  text-align: center;
}

.c-benefit-list__item + .c-benefit-list__item {
  border-inline-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-benefit-list__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--color-accent);
  color: var(--ui-on-accent);
}

.c-benefit-list__title {
  margin: 0;
  font-size: clamp(0.875rem, 1.8vw, 1.125rem);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.c-benefit-list__text {
  margin: 0;
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  line-height: var(--leading-snug);
  color: var(--color-text-sub);
}

@media screen and (max-width: 767px) {
  .c-benefit-list__title,
  .c-benefit-list__text {
    text-align: left;
  }
}
@media screen and (max-width: 479px) {
  .c-benefit-list {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    gap: 0 var(--space-3);
    padding: var(--space-4);
  }
  .c-benefit-list__item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
    gap: var(--space-1) var(--space-3);
    padding-block: var(--space-3);
    padding-inline: 0;
    text-align: left;
  }
  .c-benefit-list__icon {
    grid-row: span 2;
    justify-self: center;
  }
  .c-benefit-list__title,
  .c-benefit-list__text {
    min-inline-size: 0;
    justify-self: stretch;
    text-align: left;
  }
  .c-benefit-list__text {
    overflow-wrap: anywhere;
  }
  .c-benefit-list__item + .c-benefit-list__item {
    border-inline-start: 0;
    border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  }
}
/* ---------------------------------------------
   チャート（グラフ）
--------------------------------------------- */
/* ==================================================
  SVG Pie Chart
================================================== */
.c-chart-svg-wrap {
  max-inline-size: clamp(280px, 100%, 860px);
}

.c-chart-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.c-chart-svg__slice--coding {
  fill: var(--color-primary);
}

.c-chart-svg__slice--design {
  fill: var(--color-accent);
}

.c-chart-svg__slice--wp {
  fill: var(--color-text-sub);
}

.c-chart-svg__slice--other-a {
  fill: var(--color-info);
}

.c-chart-svg__slice--other-b {
  fill: var(--color-danger);
}

.c-chart-svg__line {
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--ui-border-1);
}

.c-chart-svg__note {
  fill: currentcolor;
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.c-chart-svg-legend {
  display: none;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: var(--space-2) var(--dist-48);
  max-inline-size: 32rem;
  margin: var(--space-3) auto 0;
  padding: 0;
  list-style: none;
}

.c-chart-svg-legend__item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-body);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-chart-svg-legend__item::before {
  display: block;
  inline-size: var(--dist-12);
  block-size: var(--dist-12);
  content: "";
  border-radius: var(--ui-radius-pill);
}

.c-chart-svg-legend__item span {
  margin-inline-start: var(--space-1);
  font-weight: var(--font-weight-black);
}

.c-chart-svg-legend__item--coding::before {
  background: var(--color-primary);
}

.c-chart-svg-legend__item--design::before {
  background: var(--color-accent);
}

.c-chart-svg-legend__item--wp::before {
  background: var(--color-text-sub);
}

.c-chart-svg-legend__item--other-a::before {
  background: var(--color-info);
}

.c-chart-svg-legend__item--other-b::before {
  background: var(--color-danger);
}

/* SP表示の調整 */
@media screen and (max-width: 479px) {
  .c-chart-svg-legend {
    grid-template-columns: 1fr;
    justify-content: start;
    max-inline-size: max-content;
  }
}
@media screen and (max-width: 767px) {
  .c-chart-svg__annotations {
    display: none;
  }
  .c-chart-svg {
    margin-block-end: calc(var(--space-3) * -1);
  }
  .c-chart-svg-legend {
    display: grid;
    margin-block-start: 0;
  }
}
/* ==================================================
  Bar Chart
  横型棒グラフ
================================================== */
.c-bar-chart {
  display: grid;
  gap: var(--space-3);
  max-inline-size: 42rem;
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-bar-chart__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-bar-chart__unit,
.c-bar-chart__description {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

.c-bar-chart__list {
  display: grid;
  gap: var(--space-3);
}

.c-bar-chart__item {
  display: grid;
  grid-template-columns: 8em 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

.c-bar-chart__label {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-bar-chart__track {
  overflow: hidden;
  block-size: var(--dist-12);
  background: var(--color-border);
  border-radius: var(--ui-radius-pill);
}

.c-bar-chart__bar {
  display: block;
  block-size: 100%;
  background: var(--color-accent);
  border-radius: inherit;
}

.c-bar-chart__value {
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

.c-bar-chart__bar--90 {
  inline-size: 90%;
}

.c-bar-chart__bar--80 {
  inline-size: 80%;
}

.c-bar-chart__bar--65 {
  inline-size: 65%;
}

/* SP表示の調整 */
@media screen and (max-width: 767px) {
  .c-bar-chart {
    padding: var(--space-3);
  }
  .c-bar-chart__title {
    font-size: 1.375rem;
  }
  .c-bar-chart__item {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }
  .c-bar-chart__label {
    grid-column: 1/-1;
  }
  .c-bar-chart__track {
    grid-column: 1/2;
  }
  .c-bar-chart__value {
    grid-column: 2/3;
  }
}
/* ==================================================
  Column Chart
  縦型棒グラフ
================================================== */
.c-column-chart {
  display: grid;
  gap: var(--space-3);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-column-chart__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-column-chart__unit,
.c-column-chart__hint,
.c-column-chart__axis-title {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-column-chart__hint {
  display: none;
}

.c-column-chart__axis-title--x {
  margin-block-start: var(--space-2);
  text-align: center;
}

.c-column-chart__body {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--space-3);
  align-items: start;
  overflow-x: auto;
}

.c-column-chart__scale {
  position: relative;
  inline-size: var(--dist-40);
  block-size: var(--dist-160);
  margin-block: var(--dist-24);
  color: var(--color-text-sub);
  font-size: 0.75rem;
  line-height: 1;
}

.c-column-chart__scale span {
  position: absolute;
  inset-inline-end: 0;
  transform: translateY(-50%);
}

.c-column-chart__scale span:nth-child(1) {
  inset-block-start: 0;
}

.c-column-chart__scale span:nth-child(2) {
  inset-block-start: 25%;
}

.c-column-chart__scale span:nth-child(3) {
  inset-block-start: 50%;
}

.c-column-chart__scale span:nth-child(4) {
  inset-block-start: 75%;
}

.c-column-chart__scale span:nth-child(5) {
  inset-block-start: 100%;
}

.c-column-chart__scroll {
  overflow-x: visible;
}

.c-column-chart__plot {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: start;
  block-size: calc(var(--dist-160) + var(--dist-24) + var(--dist-24));
  padding-block-start: var(--dist-24);
  padding-inline: var(--space-3);
}

.c-column-chart__grid {
  position: absolute;
  inset-block: var(--dist-24) var(--dist-24);
  inset-inline: 0;
  background: linear-gradient(var(--color-border) 0 0) 0 0/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 25%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 50%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 75%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 100%/100% var(--ui-border-1) no-repeat;
  pointer-events: none;
}

.c-column-chart__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--dist-160) var(--dist-24);
  justify-items: center;
  min-inline-size: var(--dist-48);
}

.c-column-chart__bar-wrap {
  display: flex;
  align-items: end;
  inline-size: var(--dist-32);
  block-size: var(--dist-160);
}

.c-column-chart__bar {
  position: relative;
  display: block;
  inline-size: 100%;
  background: var(--color-accent);
  border-radius: var(--ui-radius-pill) var(--ui-radius-pill) 0 0;
}

.c-column-chart__value {
  position: absolute;
  inset-block-start: calc(var(--dist-18) * -1);
  inset-inline-start: 50%;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  transform: translateX(-50%);
}

.c-column-chart__label {
  align-self: end;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-column-chart__bar--35 {
  block-size: 35%;
}

.c-column-chart__bar--40 {
  block-size: 40%;
}

.c-column-chart__bar--50 {
  block-size: 50%;
}

.c-column-chart__bar--60 {
  block-size: 60%;
}

.c-column-chart__bar--65 {
  block-size: 65%;
}

.c-column-chart__bar--75 {
  block-size: 75%;
}

.c-column-chart__bar--80 {
  block-size: 80%;
}

.c-column-chart__bar--90 {
  block-size: 90%;
}

/* SP表示の調整 */
@media screen and (max-width: 767px) {
  .c-column-chart {
    inline-size: 100%;
    padding: var(--space-3);
  }
  .c-column-chart__hint {
    display: block;
  }
  .c-column-chart__body {
    overflow-x: auto;
  }
  .c-column-chart__plot {
    min-inline-size: max-content;
  }
  .c-column-chart__body::-webkit-scrollbar {
    block-size: var(--dist-8);
  }
  .c-column-chart__body::-webkit-scrollbar-track {
    background: var(--color-border);
    border-radius: var(--ui-radius-pill);
  }
  .c-column-chart__body::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--ui-radius-pill);
  }
}
/* ==================================================
  Stacked Bar Chart
  積み上げ横棒グラフ
================================================== */
.c-stacked-bar-chart {
  display: grid;
  gap: var(--space-3);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--space-4);
  overflow-x: visible;
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-stacked-bar-chart__title {
  inline-size: min(100%, 18em);
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
}

.c-stacked-bar-chart__label {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-bar-chart__unit,
.c-stacked-bar-chart__hint {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-bar-chart__hint {
  display: none;
}

.c-stacked-bar-chart__row {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--space-3);
  align-items: center;
}

.c-stacked-bar-chart__bar {
  display: flex;
  inline-size: clamp(320px, 42vw, 36rem);
  overflow: hidden;
  block-size: var(--dist-32);
  border-radius: var(--ui-radius-pill);
  background: var(--color-border);
}

.c-stacked-bar-chart__segment {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  color: var(--ui-on-accent);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-bar-chart__segment--design {
  background: var(--color-accent);
}

.c-stacked-bar-chart__segment--coding {
  background: var(--color-primary);
}

.c-stacked-bar-chart__segment--wp {
  background: var(--color-text-sub);
}

.c-stacked-bar-chart__segment--35 {
  inline-size: 35%;
}

.c-stacked-bar-chart__segment--45 {
  inline-size: 45%;
}

.c-stacked-bar-chart__segment--20 {
  inline-size: 20%;
}

.c-stacked-bar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-stacked-bar-chart__legend-item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-bar-chart__legend-item::before {
  display: block;
  inline-size: var(--dist-12);
  block-size: var(--dist-12);
  content: "";
  border-radius: var(--ui-radius-pill);
}

.c-stacked-bar-chart__legend-item--design::before {
  background: var(--color-accent);
}

.c-stacked-bar-chart__legend-item--coding::before {
  background: var(--color-primary);
}

.c-stacked-bar-chart__legend-item--wp::before {
  background: var(--color-text-sub);
}

/* SP表示の調整 */
@media screen and (max-width: 767px) {
  .c-stacked-bar-chart {
    inline-size: 100%;
    padding: var(--space-3);
    overflow-x: auto;
  }
  .c-stacked-bar-chart__hint {
    display: block;
  }
  .c-stacked-bar-chart__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    inline-size: max-content;
  }
  .c-stacked-bar-chart__bar {
    inline-size: 320px;
  }
  .c-stacked-bar-chart__legend {
    inline-size: max-content;
    gap: var(--space-3);
  }
  .c-stacked-bar-chart::-webkit-scrollbar {
    block-size: var(--dist-8);
  }
  .c-stacked-bar-chart::-webkit-scrollbar-track {
    background: var(--color-border);
    border-radius: var(--ui-radius-pill);
  }
  .c-stacked-bar-chart::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--ui-radius-pill);
  }
}
/* ==================================================
  Stacked Column Chart
  積み上げ縦棒グラフ
================================================== */
.c-stacked-column-chart {
  display: grid;
  gap: var(--space-4);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-stacked-column-chart__title {
  inline-size: min(100%, 18em);
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
}

.c-stacked-column-chart__unit,
.c-stacked-column-chart__hint {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-column-chart__hint {
  display: none;
}

.c-stacked-column-chart__body {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--space-3);
  align-items: end;
  justify-content: start;
  overflow-x: visible;
}

.c-stacked-column-chart__y-axis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  block-size: 16rem;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  line-height: var(--leading-tight);
}

.c-stacked-column-chart__plot {
  position: relative;
  display: inline-flex;
  inline-size: max-content;
  max-inline-size: 100%;
  gap: var(--space-4);
  align-items: end;
  min-block-size: 16rem;
  padding-inline: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-stacked-column-chart__grid {
  position: absolute;
  inset: 0 0 var(--space-3) 0;
  background: linear-gradient(var(--color-border) 0 0) 0 0/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 25%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 50%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 75%/100% var(--ui-border-1) no-repeat, linear-gradient(var(--color-border) 0 0) 0 100%/100% var(--ui-border-1) no-repeat;
  pointer-events: none;
}

.c-stacked-column-chart__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: var(--space-2);
  min-inline-size: var(--dist-48);
}

.c-stacked-column-chart__stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  inline-size: var(--dist-40);
  block-size: 16rem;
  overflow: hidden;
  border-radius: var(--ui-radius-pill) var(--ui-radius-pill) 0 0;
}

.c-stacked-column-chart__segment {
  display: block;
  inline-size: 100%;
}

.c-stacked-column-chart__segment--design {
  background: var(--color-accent);
}

.c-stacked-column-chart__segment--coding {
  background: var(--color-primary);
}

.c-stacked-column-chart__segment--wp {
  background: var(--color-text-sub);
}

.c-stacked-column-chart__segment--10 {
  block-size: 10%;
}

.c-stacked-column-chart__segment--15 {
  block-size: 15%;
}

.c-stacked-column-chart__segment--20 {
  block-size: 20%;
}

.c-stacked-column-chart__segment--25 {
  block-size: 25%;
}

.c-stacked-column-chart__segment--30 {
  block-size: 30%;
}

.c-stacked-column-chart__segment--35 {
  block-size: 35%;
}

.c-stacked-column-chart__segment--40 {
  block-size: 40%;
}

.c-stacked-column-chart__label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-column-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-stacked-column-chart__legend-item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-stacked-column-chart__legend-item::before {
  display: block;
  inline-size: var(--dist-12);
  block-size: var(--dist-12);
  content: "";
  border-radius: var(--ui-radius-pill);
}

.c-stacked-column-chart__legend-item--design::before {
  background: var(--color-accent);
}

.c-stacked-column-chart__legend-item--coding::before {
  background: var(--color-primary);
}

.c-stacked-column-chart__legend-item--wp::before {
  background: var(--color-text-sub);
}

/* SP表示の調整 */
@media screen and (max-width: 767px) {
  .c-stacked-column-chart {
    inline-size: 100%;
    padding: var(--space-3);
  }
  .c-stacked-column-chart__title {
    font-size: 1.25rem;
  }
  .c-stacked-column-chart__body {
    overflow-x: auto;
  }
  .c-stacked-column-chart__plot {
    min-inline-size: max-content;
  }
  .c-stacked-column-chart__item {
    min-inline-size: var(--dist-48);
  }
  .c-stacked-column-chart__legend {
    gap: var(--space-2);
  }
  .c-stacked-column-chart__hint {
    display: block;
  }
  .c-stacked-column-chart__body::-webkit-scrollbar {
    block-size: var(--dist-8);
  }
  .c-stacked-column-chart__body::-webkit-scrollbar-track {
    background: var(--color-border);
    border-radius: var(--ui-radius-pill);
  }
  .c-stacked-column-chart__body::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--ui-radius-pill);
  }
}
/* 4象限にカードを置く「分類・おすすめ比較」用
商品をタイプ別に整理する
例：軽量 × 高機能、大容量 × 日常使い */
.c-compare-map {
  display: grid;
  gap: var(--space-4);
  inline-size: min(100%, 72rem);
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-compare-map__title {
  inline-size: min(100%, 18em);
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
}

.c-compare-map__canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-block-size: clamp(520px, 58vw, 720px);
  padding: var(--dist-64) var(--dist-96);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--ui-bg-soft);
}

.c-compare-map__axis {
  position: absolute;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  color: var(--ui-on-primary);
  font-size: clamp(var(--dist-12), 1.4vw, var(--dist-18));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  background: var(--color-primary);
  border-radius: var(--ui-radius-pill);
}

.c-compare-map__axis--top {
  inset-block-start: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.c-compare-map__axis--bottom {
  inset-block-end: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.c-compare-map__axis--left {
  inset-block-start: 50%;
  inset-inline-start: var(--space-3);
  transform: translateY(-50%);
}

.c-compare-map__axis--right {
  inset-block-start: 50%;
  inset-inline-end: var(--space-3);
  transform: translateY(-50%);
}

.c-compare-map__axis::after {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  content: "";
}

/* 上ラベル：ラベルの下側に、上向き矢印 */
.c-compare-map__axis--top::after {
  inset-block-start: 100%;
  inset-inline-start: 50%;
  border-inline: var(--dist-8) solid transparent;
  border-block-end: var(--dist-12) solid var(--color-primary);
  transform: translateX(-50%);
}

/* 下ラベル：ラベルの上側に、下向き矢印 */
.c-compare-map__axis--bottom::after {
  inset-block-end: 100%;
  inset-inline-start: 50%;
  border-inline: var(--dist-8) solid transparent;
  border-block-start: var(--dist-12) solid var(--color-primary);
  transform: translateX(-50%);
}

/* 左ラベル：ラベルの右側に、左向き矢印 */
.c-compare-map__axis--left::after {
  inset-block-start: 50%;
  inset-inline-start: 100%;
  border-block: var(--dist-8) solid transparent;
  border-inline-end: var(--dist-12) solid var(--color-primary);
  transform: translateY(-50%);
}

/* 右ラベル：ラベルの左側に、右向き矢印 */
.c-compare-map__axis--right::after {
  inset-block-start: 50%;
  inset-inline-end: 100%;
  border-block: var(--dist-8) solid transparent;
  border-inline-start: var(--dist-12) solid var(--color-primary);
  transform: translateY(-50%);
}

.c-compare-map__axis--left,
.c-compare-map__axis--right {
  writing-mode: horizontal-tb;
}

.c-compare-map__cross {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.c-compare-map__cross::before,
.c-compare-map__cross::after {
  position: absolute;
  content: "";
  background: var(--color-primary);
  opacity: 0.8;
}

.c-compare-map__cross::before {
  inset-block: var(--dist-48);
  inset-inline-start: 50%;
  inline-size: var(--ui-border-2);
  transform: translateX(-50%);
}

.c-compare-map__cross::after {
  inset-inline: var(--dist-96);
  inset-block-start: 50%;
  block-size: var(--ui-border-2);
  transform: translateY(-50%);
}

.c-compare-map__area {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-compare-map__area-title {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--dist-12);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
}

/* アイテムは、画像とテキストを縦に並べる */
.c-compare-map__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.c-compare-map__item {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  align-content: start;
  margin: 0;
  text-align: left;
}

.c-compare-map__item-img {
  display: block;
  inline-size: var(--dist-96);
  block-size: var(--dist-96);
  object-fit: cover;
  border-radius: var(--ui-radius-8);
}

.c-compare-map__item-body {
  display: grid;
  gap: var(--space-1);
  inline-size: min(100%, 10em);
  min-inline-size: 0;
}

.c-compare-map__item-title {
  margin: 0;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  text-align: left;
}

.c-compare-map__item-text {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  line-height: var(--leading-snug);
  text-align: left;
}

@media screen and (min-width: 1024px) {
  .c-compare-map__canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-block-size: clamp(600px, 58vw, 760px);
    padding: var(--dist-64) var(--dist-96);
    border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
    background: var(--ui-bg-soft);
  }
  .c-compare-map__cross,
  .c-compare-map__axis {
    display: block;
  }
}
@media screen and (max-width: 1023px) {
  .c-compare-map {
    inline-size: 100%;
  }
  .c-compare-map__canvas {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-block-size: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .c-compare-map__cross,
  .c-compare-map__axis {
    display: none;
  }
  .c-compare-map__area {
    min-block-size: auto;
    padding: var(--space-4);
  }
  .c-compare-map__items {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .c-compare-map__canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c-compare-map__item {
    grid-template-columns: 1fr;
  }
  .c-compare-map__item-img {
    inline-size: var(--dist-128);
    block-size: var(--dist-128);
  }
}
@media screen and (max-width: 767px) {
  .c-compare-map {
    inline-size: 100%;
  }
  .c-compare-map__canvas {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-block-size: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .c-compare-map__cross,
  .c-compare-map__axis {
    display: none;
  }
  .c-compare-map__area {
    min-block-size: auto;
    padding: var(--space-4);
  }
  .c-compare-map__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .c-compare-map__item-img {
    inline-size: var(--dist-128);
    block-size: var(--dist-128);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .c-compare-map__canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c-compare-map__item {
    grid-template-columns: 1fr;
  }
  .c-compare-map__item-img {
    inline-size: var(--dist-128);
    block-size: var(--dist-128);
  }
}
/* ==================================================
  Position Map
  座標上に点を置く「市場分析・競合分析」用
  例：安い↔高い、シンプル↔多機能
================================================== */
.c-position-map {
  display: grid;
  gap: var(--space-4);
  inline-size: min(100%, 72rem);
  padding: var(--space-4);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

.c-position-map__title {
  inline-size: min(100%, 18em);
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
}

.c-position-map__canvas {
  position: relative;
  min-block-size: clamp(480px, 48vw, 640px);
  padding: var(--dist-64) var(--dist-96);
  overflow: visible;
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
  background: var(--color-surface);
}

/* ==================================================
  Axis labels
================================================== */
.c-position-map__axis {
  position: absolute;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  color: var(--ui-on-primary);
  font-size: clamp(var(--dist-12), 1.4vw, var(--dist-18));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  text-align: center;
  background: var(--color-primary);
  border-radius: var(--ui-radius-pill);
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 上下 */
.c-position-map__axis--top {
  inset-block-start: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.c-position-map__axis--bottom {
  inset-block-end: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* 左右：2行対応 */
.c-position-map__axis--left {
  inset-block-start: 50%;
  inset-inline-start: var(--dist-32);
  max-inline-size: 9em;
  white-space: normal;
  transform: translateY(-50%);
}

.c-position-map__axis--right {
  inset-block-start: 50%;
  inset-inline-end: var(--dist-32);
  max-inline-size: 9em;
  white-space: normal;
  transform: translateY(-50%);
}

/* 念のため左右も横書き */
.c-position-map__axis--left,
.c-position-map__axis--right {
  writing-mode: horizontal-tb;
  inline-size: max-content;
  max-inline-size: none;
  white-space: nowrap;
}

/* ==================================================
  Axis arrows
  - axisに追従させる
  - HTMLに arrow span は不要
================================================== */
.c-position-map__axis::after {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  content: "";
}

/* 上ラベル：下側に上向き矢印 */
.c-position-map__axis--top::after {
  inset-block-start: 100%;
  inset-inline-start: 50%;
  border-inline: var(--dist-8) solid transparent;
  border-block-end: var(--dist-12) solid var(--color-primary);
  transform: translateX(-50%);
}

/* 下ラベル：上側に下向き矢印 */
.c-position-map__axis--bottom::after {
  inset-block-end: 100%;
  inset-inline-start: 50%;
  border-inline: var(--dist-8) solid transparent;
  border-block-start: var(--dist-12) solid var(--color-primary);
  transform: translateX(-50%);
}

/* 左ラベル：バッジの外側に左向き矢印 */
.c-position-map__axis--left::after {
  inset-block-start: 50%;
  inset-inline-end: calc(100% + var(--dist-4));
  border-block: var(--dist-8) solid transparent;
  border-inline-end: var(--dist-12) solid var(--color-primary);
  transform: translateY(-50%);
}

/* 右ラベル：バッジの外側に右向き矢印 */
.c-position-map__axis--right::after {
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--dist-4));
  border-block: var(--dist-8) solid transparent;
  border-inline-start: var(--dist-12) solid var(--color-primary);
  transform: translateY(-50%);
}

/* ==================================================
  Cross lines
================================================== */
.c-position-map__cross {
  position: absolute;
  inset-block: var(--dist-48);
  inset-inline: 128px;
  z-index: 1;
  pointer-events: none;
}

.c-position-map__cross::before,
.c-position-map__cross::after {
  position: absolute;
  content: "";
  background: var(--color-primary);
  opacity: 0.8;
}

.c-position-map__cross::before {
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--ui-border-2);
  transform: translateX(-50%);
}

.c-position-map__cross::after {
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--ui-border-2);
  transform: translateY(-50%);
}

/* ==================================================
  Points
================================================== */
.c-position-map__point {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  inline-size: var(--dist-64);
  aspect-ratio: 1;
  color: var(--color-text-heading);
  font-size: var(--dist-12);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  text-align: center;
  background: var(--marker-bg-soft);
  border-radius: var(--ui-radius-pill);
  transform: translate(-50%, -50%);
}

/* 中央の自店舗だけ強調 */
.c-position-map__point--self {
  z-index: 4;
  inline-size: clamp(var(--dist-96), 8vw, var(--dist-128));
  background: var(--color-accent);
  font-size: var(--dist-18);
  font-weight: var(--font-weight-black);
}

/* ==================================================
  Point positions
  left = 横軸 / top = 縦軸
================================================== */
.c-position-map__point--self {
  inset-inline-start: 50%;
  inset-block-start: 50%;
}

.c-position-map__point--a {
  inset-inline-start: 25%;
  inset-block-start: 62%;
}

.c-position-map__point--b {
  inset-inline-start: 60%;
  inset-block-start: 32%;
}

.c-position-map__point--c {
  inset-inline-start: 25%;
  inset-block-start: 38%;
}

.c-position-map__point--d {
  inset-inline-start: 78%;
  inset-block-start: 32%;
}

.c-position-map__point--e {
  inset-inline-start: 16%;
  inset-block-start: 22%;
}

/* ==================================================
  hint （SPで表示）
================================================== */
.c-position-map__hint {
  display: none;
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.c-position-map__scroll {
  overflow-x: visible;
}

.c-position-map__scroll::-webkit-scrollbar {
  block-size: var(--dist-8);
}

.c-position-map__scroll::-webkit-scrollbar-track {
  background: var(--color-border);
  border-radius: var(--ui-radius-pill);
}

.c-position-map__scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--ui-radius-pill);
}

@media screen and (max-width: 767px) {
  .c-position-map {
    inline-size: 100%;
  }
  .c-position-map__hint {
    display: block;
  }
  .c-position-map__scroll {
    overflow-x: auto;
  }
  .c-position-map__canvas {
    min-inline-size: 720px;
  }
}
/* components/listing/_listing.scss */
/* =========================================
   Listing Layout
========================================= */
.c-listing-layout {
  display: grid;
  gap: var(--dist-24);
}

.c-listing-layout__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
  align-items: end;
  justify-content: space-between;
  padding-block-end: var(--dist-12);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-listing-layout__title {
  margin: 0;
}

.c-listing-layout__body {
  display: grid;
  gap: var(--dist-16);
  min-block-size: 20rem;
}

.c-listing-layout__count,
.c-listing-layout__empty {
  margin: 0;
}

.c-listing-layout__count {
  color: var(--color-text-sub);
  font-weight: var(--font-weight-bold);
}

.c-listing-layout__empty {
  display: grid;
  place-items: center;
  min-block-size: 10rem;
  padding: var(--dist-32);
  margin: 0;
  color: var(--color-text-sub);
  font-weight: var(--font-weight-bold);
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  background: var(--color-surface);
}

.c-listing-layout__empty span {
  max-inline-size: 18em;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .c-listing-layout__header {
    display: grid;
    align-items: start;
  }
}
/* =========================================
   Listing Toolbar
========================================= */
.c-listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12);
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--dist-12);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-listing-toolbar__filters {
  position: relative;
  gap: var(--dist-12);
}

.c-listing-toolbar__controls {
  gap: var(--dist-12);
  margin-inline-start: auto;
}

.c-listing-toolbar__filters,
.c-listing-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
}

/* Responsive Styles */
@media screen and (max-width: 767px) {
  .c-listing-toolbar {
    display: grid;
    gap: var(--dist-16);
    align-items: stretch;
  }
  .c-listing-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dist-8);
    overflow: visible;
  }
  .c-listing-toolbar__controls {
    display: flex;
    gap: var(--dist-8);
    align-items: center;
    justify-content: flex-start;
    margin-inline-start: 0;
  }
}
/* components/filter/_filter.scss */
.c-filter {
  position: static;
  flex: 0 1 auto;
}

.c-filter-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--dist-8));
  inset-inline-start: 0;
  z-index: 100;
  min-inline-size: 260px;
  padding: var(--dist-16);
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8, 8px);
  background: var(--color-surface, #fff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.c-filter-panel[hidden] {
  display: none;
}

/* フィルターパネルのバリエーション：価格フィルター */
.c-filter-panel--price {
  min-inline-size: 440px;
  padding: var(--dist-20) var(--dist-24);
}

.c-filter-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12);
  margin-block-start: var(--dist-12);
}

/* Responsive Styles */
@media screen and (max-width: 767px) {
  .c-filter {
    position: static;
  }
  .c-filter-panel {
    inset-block-start: calc(100% + var(--dist-8));
    inset-inline-start: 0;
    inline-size: min(100%, 320px);
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .c-filter-panel--price {
    inline-size: min(100%, 360px);
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}
/* フィルターパネルのバリエーション：チェックリストフィルター */
.c-filter-checklist {
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.c-filter-checklist__title {
  margin-block-end: var(--dist-10);
  font-weight: 700;
}

.c-filter-checklist__items {
  display: grid;
  gap: var(--dist-8);
}

.c-filter-checklist__item {
  display: flex;
  gap: var(--dist-6);
  align-items: center;
  cursor: pointer;
}

.c-filter-checklist__group-title {
  margin-block: var(--dist-12) var(--dist-6);
  color: var(--color-text-muted, #666);
  font-size: 0.8125rem;
  font-weight: 700;
}

.c-filter-checklist__title + .c-filter-checklist__group-title {
  margin-block-start: 0;
}

/* =========================================
   Breadcrumb
========================================= */
.c-breadcrumb {
  margin-block: var(--dist-16);
  color: var(--color-text-sub);
  font-size: 0.875rem;
  padding-block-end: var(--dist-12);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-6) var(--dist-8);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-breadcrumb__item {
  display: inline-flex;
  gap: var(--dist-8);
  align-items: center;
  min-inline-size: 0;
}

.c-breadcrumb__item:not(:last-child)::after {
  content: "›";
  color: var(--color-text-sub);
}

.c-breadcrumb__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.c-breadcrumb__link:hover {
  color: var(--color-text-heading);
}

.c-breadcrumb__item[aria-current=page] {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

/* =========================================
   Page Header
========================================= */
.c-page-header {
  display: grid;
  gap: var(--dist-12);
  padding-block: var(--dist-40);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
}

.c-page-header__eyebrow,
.c-page-header__title,
.c-page-header__lead {
  margin: 0;
}

.c-page-header__eyebrow {
  color: var(--color-text-sub);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-page-header__title {
  color: var(--color-text-heading);
  font-size: clamp(1.55rem, 5.2vw, 3.2rem);
  line-height: 1.15;
}

.c-page-header__lead {
  max-inline-size: 42rem;
  color: var(--color-text-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.8;
}

.c-page-header--center {
  justify-items: center;
  text-align: center;
}

.c-page-header--center .c-page-header__lead {
  text-align: left;
}

.c-page-header--split {
  align-items: end;
}

.c-page-header__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12);
}

@media screen and (min-width: 768px) {
  .c-page-header--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .c-page-header__action {
    justify-content: flex-end;
  }
}
/* =========================================
   Section Header
========================================= */
.c-section-header {
  display: grid;
  gap: var(--dist-8);
  margin-block-end: var(--dist-24);
}

.c-section-header__eyebrow,
.c-section-header__title,
.c-section-header__lead {
  margin: 0;
}

.c-section-header__eyebrow {
  color: var(--color-text-sub);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-section-header__title {
  color: var(--color-text-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
}

.c-section-header__lead {
  max-inline-size: 42rem;
  color: var(--color-text-body);
  font-size: 1rem;
  line-height: 1.8;
}

.c-section-header__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12);
}

.c-section-header--center {
  justify-items: center;
  text-align: center;
}

.c-section-header--center .c-section-header__lead {
  text-align: left;
}

@media screen and (min-width: 768px) {
  .c-section-header--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .c-section-header--split .c-section-header__action {
    justify-content: flex-end;
  }
}
/* =========================================
   Empty State
========================================= */
.c-empty-state {
  display: grid;
  gap: var(--dist-12);
  place-items: center;
  min-block-size: 10rem;
  padding: var(--dist-32);
  color: var(--color-text-sub);
  text-align: left;
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  background: var(--color-surface);
}

.c-empty-state__title,
.c-empty-state__text {
  margin: 0;
}

.c-empty-state__title {
  max-inline-size: 22em;
  color: var(--color-text-sub);
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
}

.c-empty-state__text {
  max-inline-size: 28em;
  color: var(--color-text-body);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.c-empty-state[hidden] {
  display: none;
}

.c-quantity-control {
  display: inline-flex;
  align-items: center;
  inline-size: max-content;
  overflow: hidden;
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  background: var(--color-surface);
}

.c-quantity-control__button,
.c-quantity-control__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  color: var(--color-text-heading);
  font: inherit;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.c-quantity-control__button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.c-quantity-control__button:hover:not(:disabled) {
  background: var(--color-surface-soft);
}

.c-quantity-control__button:disabled {
  color: var(--color-text-sub);
  cursor: var(--state-disabled-cursor);
  background-color: var(--color-surface-soft);
}

.c-quantity-control__button:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: -2px;
}

.c-quantity-control__value {
  min-inline-size: 52px;
  border-inline: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
}

.c-detail-info {
  display: grid;
  gap: var(--dist-24);
  padding-block: var(--dist-32);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-detail-info__header {
  display: grid;
  gap: var(--dist-8);
}

.c-detail-info__title {
  margin: 0;
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-normal);
  color: var(--color-text-heading);
}

.c-detail-description {
  color: var(--color-text-body);
  line-height: var(--ui-line-height-relaxed);
}

.c-detail-description > * {
  margin-block: 0;
}

.c-detail-description > * + * {
  margin-block-start: var(--dist-16);
}

.c-spec {
  display: grid;
  margin: 0;
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-spec__row {
  display: grid;
  grid-template-columns: minmax(var(--dist-96), 0.32fr) 1fr;
  gap: var(--dist-16);
  padding-block: var(--dist-14);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-spec dt {
  color: var(--color-text-sub);
  font-weight: var(--ui-font-weight-bold);
}

.c-spec dd {
  margin: 0;
  color: var(--color-text-body);
}

@media (max-width: 480px) {
  .c-spec__row {
    grid-template-columns: 1fr;
    gap: var(--dist-6);
  }
}
.c-detail-layout {
  display: grid;
  gap: var(--dist-32);
  max-inline-size: var(--container-max);
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .c-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: start;
    gap: var(--dist-24);
  }
}
@media screen and (min-width: 1024px) {
  .c-detail-layout {
    grid-template-columns: minmax(0, 720px) minmax(360px, 420px);
  }
}
/* =========================================
   Detail Summary
========================================= */
.c-detail-summary {
  display: grid;
  gap: var(--dist-16);
}

.c-detail-summary__category,
.c-detail-summary__title,
.c-detail-summary__badge,
.c-detail-summary__price,
.c-detail-summary__text,
.c-detail-summary__note,
.c-detail-summary__note p {
  margin: 0;
}

.c-detail-summary__category {
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--font-weight-bold);
}

.c-detail-summary__title {
  color: var(--color-text-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: var(--ui-line-height-tight);
}

.c-detail-summary__badge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
}

.c-detail-summary__price {
  color: var(--color-text-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-line-height-none);
}

.c-detail-summary__text {
  color: var(--color-text-body);
  line-height: var(--ui-line-height-relaxed);
}

.c-detail-summary__note {
  display: grid;
  gap: var(--dist-6);
  padding-block-start: var(--dist-16);
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

@media screen and (max-width: 767px) {
  .c-detail-summary {
    inline-size: 100%;
    max-inline-size: var(--ui-content-width-sm);
    margin-inline: auto;
  }
}
.c-availability {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--dist-6);
  padding-block: var(--dist-6);
  padding-inline: var(--dist-12);
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-normal);
  background-color: var(--color-surface-soft);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-pill);
}

.c-availability::before {
  inline-size: var(--dist-8);
  block-size: var(--dist-8);
  content: "";
  background-color: currentcolor;
  border-radius: var(--ui-radius-pill);
}

.c-availability--available {
  color: var(--color-success);
  background-color: var(--ui-bg-success-soft);
  border-color: var(--ui-border-success-soft);
}

.c-availability--limited {
  color: var(--color-warning);
  background-color: var(--ui-bg-warning-soft);
  border-color: var(--ui-border-warning-soft);
}

.c-availability--unavailable {
  color: var(--color-danger);
  background-color: var(--ui-bg-danger-soft);
  border-color: var(--ui-border-danger-soft);
}

.c-purchase {
  display: grid;
  gap: var(--dist-16);
  padding-block-start: var(--dist-20);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-purchase__quantity {
  display: grid;
  gap: var(--dist-8);
}

.c-purchase__label {
  margin: 0;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.c-purchase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-12);
  align-items: center;
}

.c-purchase__note {
  margin: 0;
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

/* =========================================
   Option Group
========================================= */
.c-option-group {
  display: grid;
  gap: var(--dist-20);
}

.c-option-group__group {
  display: grid;
  gap: var(--dist-10);
}

.c-option-group__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
  align-items: baseline;
  justify-content: space-between;
}

.c-option-group__title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-md);
  font-weight: var(--font-weight-bold);
}

.c-option-group__link {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  margin-block-start: calc(var(--dist-4) * -1);
  padding: 0;
  color: var(--color-text-sub);
  font: inherit;
  font-size: var(--ui-font-size-sm);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  background: none;
  border: 0;
}

.c-option-group__link:hover {
  color: var(--color-text-heading);
}

.c-option-group__link:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

.c-option-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-8);
}

@media screen and (max-width: 767px) {
  .c-option-group {
    inline-size: 100%;
    max-inline-size: var(--ui-content-width-sm);
    margin-inline: auto;
  }
}
.c-product-grid {
  display: grid;
  grid-template-columns: var(--ui-grid-template-cols-4);
  gap: var(--dist-24);
}

.c-product-grid--cols-2,
.c-product-grid[data-view="2"] {
  grid-template-columns: var(--ui-grid-template-cols-2);
}

.c-product-grid--cols-4,
.c-product-grid[data-view="4"] {
  grid-template-columns: var(--ui-grid-template-cols-4);
}

/* Responsive Styles */
@media screen and (max-width: 767px) {
  .c-product-grid {
    gap: var(--dist-16);
  }
  .c-product-grid--cols-2,
  .c-product-grid[data-view="2"] {
    grid-template-columns: var(--ui-grid-template-cols-1);
  }
  .c-product-grid--cols-4,
  .c-product-grid[data-view="4"] {
    grid-template-columns: var(--ui-grid-template-cols-2);
  }
}
/* =========================================
   View Toggle
========================================= */
.c-view-toggle {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.c-view-toggle__button {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  color: var(--color-text-body, #333);
  background: var(--color-surface, #fff);
  cursor: pointer;
}

.c-view-toggle__button.is-active {
  color: var(--color-surface, #fff);
  background: var(--color-text-heading, #111);
  border-color: var(--color-text-heading, #111);
}

.c-view-toggle__icon {
  display: grid;
  gap: 3px;
  place-content: center;
}

.c-view-toggle__icon > span {
  display: block;
  inline-size: 5px;
  block-size: 5px;
  background-color: currentcolor;
}

/* 2列：2 × 2 */
.c-view-toggle__icon--2 {
  grid-template-columns: repeat(2, 5px);
}

/* 4列：4 × 3 */
.c-view-toggle__icon--4 {
  grid-template-columns: repeat(4, 4px);
  gap: 2px;
}

.c-view-toggle__icon--4 > span {
  inline-size: 4px;
  block-size: 4px;
}

@media screen and (max-width: 767px) {
  .c-view-toggle {
    flex: 0 0 auto;
  }
  /* アイコン1列2列表示 */
  .c-view-toggle__icon--2 {
    grid-template-columns: 1fr;
  }
  .c-view-toggle__icon--2 span:nth-child(n+3) {
    display: none;
  }
  .c-view-toggle__icon--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-view-toggle__icon--4 span:nth-child(n+5) {
    display: none;
  }
}
.c-sort-select {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  inline-size: max-content;
  color: var(--color-text-body, #333);
}

.c-sort-select__control {
  inline-size: auto;
  min-inline-size: 8.5em;
  min-block-size: 44px;
  padding-block: var(--dist-10);
  padding-inline: var(--dist-12) var(--dist-32);
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  background-color: var(--color-surface, #fff);
  border: var(--ui-border-1) var(--ui-border-solid) var(--ui-border-default);
  border-radius: var(--ui-radius-8);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  direction: ltr;
  text-align: left;
  transition: border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
}

.c-sort-select__control:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.c-sort-select__control:focus-visible {
  outline: 2px solid var(--ui-border-accent);
  outline-offset: 2px;
}

.c-sort-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--dist-12);
  z-index: 1;
  inline-size: 0.45em;
  block-size: 0.45em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

/* src/scss/components/size-guide/_size-guide-base.scss */
.c-size-guide {
  display: grid;
  gap: var(--dist-20);
  padding-block: var(--dist-32);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-size-guide__header {
  display: grid;
  gap: var(--dist-8);
}

.c-size-guide__title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-normal);
}

.c-size-guide__text {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-relaxed);
}

.c-size-guide__table-wrap {
  overflow-x: auto;
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-8);
}

.c-size-guide__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: var(--color-text-body);
  font-size: var(--ui-font-size-sm);
}

.c-size-guide__table th,
.c-size-guide__table td {
  padding-block: var(--dist-12);
  padding-inline: var(--dist-14);
  border-block-end: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  text-align: left;
  vertical-align: top;
}

.c-size-guide__table thead th {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-surface-soft);
}

.c-size-guide__table tbody th {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.c-size-guide__table tbody tr:last-child th,
.c-size-guide__table tbody tr:last-child td {
  border-block-end: 0;
}

.c-size-guide__note {
  margin: 0;
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

/* src/scss/components/rating/_rating-base.scss */
.c-rating {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--dist-6);
  align-items: center;
  color: var(--color-text-body);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

.c-rating__stars {
  color: var(--color-warning);
  letter-spacing: 0.04em;
}

.c-rating__score {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.c-rating__count {
  color: var(--color-text-sub);
}

/* =========================================
   Summary List
========================================= */
.c-summary-list {
  display: grid;
  gap: var(--dist-12);
  padding: var(--dist-20);
  margin: 0;
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-12);
}

.c-summary-list__row {
  display: grid;
  grid-template-columns: minmax(8em, auto) 1fr;
  gap: var(--dist-16);
  align-items: baseline;
}

.c-summary-list__row + .c-summary-list__row {
  padding-block-start: var(--dist-12);
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.c-summary-list__label {
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--font-weight-bold);
}

.c-summary-list__value {
  margin: 0;
  color: var(--color-text-body);
  text-align: right;
}

.c-summary-list__row--total {
  padding-block-start: var(--dist-16);
}

.c-summary-list__row--total .c-summary-list__label,
.c-summary-list__row--total .c-summary-list__value {
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-md);
  font-weight: var(--font-weight-bold);
}

.c-summary-list__note {
  margin: 0;
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

@media screen and (max-width: 479px) {
  .c-summary-list {
    padding: var(--dist-16);
  }
  .c-summary-list__row {
    grid-template-columns: minmax(6em, auto) 1fr;
    gap: var(--dist-12);
  }
}
/* src/scss/components/media-object/_media-object-base.scss */
/* =========================================
   Media Object
========================================= */
.c-media-object {
  display: grid;
  gap: var(--dist-16);
  align-items: start;
}

.c-media-object__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ui-radius-12);
}

.c-media-object__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--ui-ratio-standard);
  object-fit: cover;
}

.c-media-object__body {
  display: grid;
  gap: var(--dist-10);
}

.c-media-object__title,
.c-media-object__text,
.c-media-object__meta {
  margin: 0;
}

.c-media-object__title {
  color: var(--color-text-heading);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-line-height-normal);
}

.c-media-object__text {
  color: var(--color-text-body);
  line-height: var(--ui-line-height-relaxed);
}

.c-media-object__meta {
  color: var(--color-text-sub);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

.c-media-object__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dist-10);
  align-items: center;
}

/* horizontal layout */
.c-media-object--horizontal {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: center;
}

/* reverse */
.c-media-object--reverse {
  direction: rtl;
}

.c-media-object--reverse > * {
  direction: ltr;
}

/* icon配置 */
.c-media-object--icon {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.c-media-object--icon .c-media-object__media {
  display: flex;
}

/* SP */
@media screen and (max-width: 767px) {
  .c-media-object--horizontal {
    grid-template-columns: 1fr;
  }
  .c-media-object--horizontal .c-media-object__media {
    max-inline-size: 420px;
  }
  .c-media-object--icon {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--dist-12);
  }
  .c-media-object--icon .c-media-object__media {
    max-inline-size: none;
  }
}
/* components/link-panel/_link-panel-base.scss */
/* =========================================
   Link panel
========================================= */
.c-link-panel {
  display: grid;
  gap: var(--dist-16);
}

.c-link-panel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dist-20);
  padding: clamp(var(--dist-20), 3vw, var(--dist-28));
  border: 1px solid var(--ui-border-subtle, var(--color-border, #e5e7eb));
  border-radius: var(--ui-radius-lg, 1rem);
  background: var(--color-surface, #fff);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-soft, 0 16px 40px rgba(0, 0, 0, 0.05));
  transition: border-color var(--dur-200) var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--dur-200) var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-200) var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.c-link-panel__item:hover,
.c-link-panel__item:focus-visible {
  border-color: var(--color-accent, #ffa500);
  box-shadow: var(--shadow-lift, 0 20px 56px rgba(0, 0, 0, 0.08));
  transform: translateY(-2px);
}

.c-link-panel__item:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent, #ffa500));
  outline-offset: var(--dist-4, 0.25rem);
}

.c-link-panel__index {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #ffa500) 16%, var(--color-surface, #fff));
  color: var(--color-text-heading, #111);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.c-link-panel__body {
  display: grid;
  gap: var(--dist-6);
}

.c-link-panel__title {
  color: var(--color-text-heading, #111);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
}

.c-link-panel__text {
  color: var(--color-text-body, #555);
  font-size: 0.95rem;
  line-height: 1.7;
}

.c-link-panel__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--ui-border-subtle, var(--color-border, #e5e7eb));
  border-radius: 999px;
  color: var(--color-accent, #ffa500);
  font-weight: 700;
  line-height: 1;
}

@media (width <= 767px) {
  .c-link-panel__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--dist-12);
  }
  .c-link-panel__arrow {
    grid-column: auto;
    justify-self: end;
  }
}
/* ---------------------------------------------
  9. 外部ライブラリ（上書き対象）
--------------------------------------------- */
/* ---------------------------------------------
 10. ユーティリティ（ロジック / 関数）
--------------------------------------------- */
.u-force-text-center {
  text-align: center !important;
}

.u-force-text-left {
  text-align: left !important;
}

.u-force-text-right {
  text-align: right !important;
}

.u-force-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.u-force-w-100 {
  width: 100% !important;
}

.u-force-h-100 {
  height: 100% !important;
}

.u-force-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
}

.u-force-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-force-overflow-hidden {
  overflow: hidden !important;
}

.u-force-overflow-auto {
  overflow: auto !important;
}

.u-force-scroll-x {
  overflow: auto hidden !important;
}

.u-force-block {
  display: block !important;
}

.u-force-inline {
  display: inline !important;
}

.u-force-inline-block {
  display: inline-block !important;
}

/* 表示形式ユーティリティ */
.u-force-flex {
  display: flex !important;
}

.u-force-flex-wrap {
  flex-wrap: wrap !important;
}

.u-force-items-center {
  align-items: center !important;
}

.u-force-grid {
  display: grid !important;
}

.u-force-no-scroll {
  height: 100% !important;
  overflow: hidden !important;
  touch-action: none !important;
}

.u-force-justify-center {
  justify-content: center !important;
}

.u-force-justify-start {
  justify-content: flex-start !important;
}

.u-force-justify-end {
  justify-content: flex-end !important;
}

.u-force-justify-between {
  justify-content: space-between !important;
}

/* utils/_visibility.scss */
.u-hidden {
  display: none !important;
}

/* display は固定せず、visibility 系だけを担当 */
.u-invisible {
  visibility: hidden !important;
}

.u-visible-v {
  visibility: visible !important;
}

/* 視覚的にも操作的にも無効化 */
.u-inert {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* NOTE:
   visible系は再表示時に block を使う。
   inline / flex / grid を復元したい要素には使わず、
   専用 utility または component 側で制御する。
*/
/* sm only */
.u-visible-sm {
  display: block !important;
}
@media screen and (min-width: 768px) {
  .u-visible-sm {
    display: none !important;
  }
}

.u-hidden-sm {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .u-hidden-sm {
    display: block !important;
  }
}

/* md+ */
.u-visible-md {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .u-visible-md {
    display: block !important;
  }
}

@media screen and (min-width: 768px) {
  .u-hidden-md {
    display: none !important;
  }
}

/* lg+ */
.u-visible-lg {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .u-visible-lg {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  .u-hidden-lg {
    display: none !important;
  }
}

/* ==================================================
   Utility modifiers
   - state ではなく単機能の見た目補助だけを置く
   - component 固有の size / variant は各 component 側で持つ
================================================== */
/* ==================================================
   Shape / decoration
================================================== */
.u-rounded-pill {
  border-radius: 9999px;
}

.u-square {
  border-radius: 0;
}

.u-borderless {
  border: none !important;
}

.u-shadow {
  box-shadow: var(--ui-shadow, var(--kw-none));
}

/* ==================================================
   Tone utilities
   - 汎用の配色補助
   - 本番UIの主要見た目は component local token / modifier を優先
================================================== */
.u-tone-primary {
  color: var(--ui-on-primary, #fff);
  background-color: var(--color-primary, #007bff);
}

.u-tone-accent {
  color: var(--ui-on-accent, #fff);
  background-color: var(--color-accent, #ffa500);
}

.u-tone-muted {
  color: var(--ui-on-muted, #333);
  background-color: var(--ui-bg-soft, #f0f0f0);
}

.u-tone-white {
  color: var(--ui-on-white, #111);
  background-color: var(--color-white, #fff);
}

.u-tone-dark {
  color: var(--ui-on-dark, #fff);
  background-color: var(--color-black, #000);
}

/* ==================================================
   Text utilities
================================================== */
.u-text-bold {
  font-weight: 700;
}

.u-text-normal {
  font-weight: 400;
}

.u-text-italic {
  font-style: italic;
}

/* ---------------------------------------------
 11. ユーティリティ（最強上書き層）
--------------------------------------------- */
/* _utility.scss */
/* spacing */
.mt-16 {
  margin-top: var(--dist-16, 16px);
}

.mb-16 {
  margin-bottom: var(--dist-16, 16px);
}

.mt-32 {
  margin-top: var(--dist-32, 32px);
}

.mb-32 {
  margin-bottom: var(--dist-32, 32px);
}

/* text */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* size */
.w-100 {
  width: 100%;
}

.max-w-full {
  max-width: 100%;
}

/* font utility
   原則：コンポーネント内では使用しない
   用途：一時調整 / CMS本文 / テスト用
*/
.fs-14 {
  font-size: 0.875rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-20 {
  font-size: 1.25rem;
}

/* clearfix */
.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

.u-text-marker {
  display: inline;
  inline-size: auto;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(transparent var(--marker-start, 60%), var(--marker-bg, rgba(215, 153, 77, 0.3)) 0%);
}

.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
}

.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  clip: auto !important;
}

/* =============================================
  Reduced Motion (Global Baseline)
  - prefers-reduced-motion の “基盤” はここに集約
  - 各機能（reveal/toast/anim）側は「意味的 override」だけ許可
============================================= */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
.u-elev-0 {
  box-shadow: var(--ui-elev-0, var(--kw-none));
}

.u-elev-1 {
  box-shadow: var(--ui-elev-1, var(--kw-none));
}

.u-elev-2 {
  box-shadow: var(--ui-elev-2, var(--kw-none));
}

.u-elev-3 {
  box-shadow: var(--ui-elev-3, var(--kw-none));
}

.u-elev-4 {
  box-shadow: var(--ui-elev-4, var(--kw-none));
}

.u-radius-0 {
  border-radius: var(--ui-radius-0, 0px);
}

.u-radius-8 {
  border-radius: var(--ui-radius-8, 8px);
}

.u-radius-12 {
  border-radius: var(--ui-radius-12, 12px);
}

.u-radius-16 {
  border-radius: var(--ui-radius-16, 16px);
}

.u-radius-pill {
  border-radius: var(--ui-radius-pill, 9999px);
}

/* ========================================
   Border Utilities
======================================== */
/* base */
.u-border {
  border-color: var(--ui-border-default, var(--color-border, #e5e7eb));
  border-style: var(--ui-border-solid, solid);
  border-width: var(--ui-border-1, 1px);
}

/* width */
.u-border-1 {
  border-width: var(--ui-border-1, 1px);
}

.u-border-2 {
  border-width: var(--ui-border-2, 2px);
}

/* style */
.u-border-solid {
  border-style: var(--ui-border-solid, solid);
}

.u-border-dashed {
  border-style: var(--ui-border-dashed, dashed);
}

/* color */
.u-border-default {
  border-color: var(--ui-border-default, var(--color-border, #e5e7eb));
}

.u-border-strong {
  border-color: var(--ui-border-strong, #cbd5e1);
}

.u-border-accent {
  border-color: var(--ui-border-accent, var(--color-accent, #3b82f6));
}

/* remove */
.u-border-none {
  border: none;
}

.u-bg-base {
  background-color: var(--ui-bg-base, #fff);
}

.u-bg-muted {
  background-color: var(--ui-bg-muted, #f8fafc);
}

.u-bg-soft {
  background-color: var(--ui-bg-soft, #f3f4f6);
}

.u-bg-surface {
  background-color: var(--color-surface, #fff);
}

.u-bg-accent {
  background-color: var(--ui-bg-accent, var(--color-accent, #f59e0b));
}

.u-bg-contrast {
  background-color: var(--ui-bg-contrast, #111827);
}

.u-text-on-contrast {
  color: var(--ui-text-on-contrast, #fff);
}

/* ======================================
   Scroll reveal (transition-based)
====================================== */
/* --------------------------------------
  u-reveal lane
  - JS 有効時だけ motion を有効化
-------------------------------------- */
/* base（軽量：filter無し） */
.has-js .u-reveal {
  --reveal-scale: 1;
  opacity: var(--reveal-opacity-start, 0);
  transform: translate(calc(var(--reveal-x, 0) * var(--reveal-dist, var(--dist-24, 24px))), calc(var(--reveal-y, 0) * var(--reveal-dist, var(--dist-24, 24px)))) scale(var(--reveal-scale-start, var(--reveal-scale, 1)));
  transition: opacity var(--reveal-dur, var(--dur-700)) var(--reveal-ease, var(--ease-smooth)) var(--reveal-delay, var(--delay-0)), transform var(--reveal-dur, var(--dur-700)) var(--reveal-ease, var(--ease-smooth)) var(--reveal-delay, var(--delay-0));
}

.has-js .u-reveal.is-inview {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* blur opt-in（filterを“持つ”のはこの系統だけ） */
.has-js .u-reveal.u-reveal-blur {
  filter: blur(var(--reveal-blur-start, var(--reveal-blur, var(--blur-0, 0px))));
  transition: opacity var(--reveal-dur, var(--dur-700)) var(--reveal-ease, var(--ease-smooth)) var(--reveal-delay, var(--delay-0)), transform var(--reveal-dur, var(--dur-700)) var(--reveal-ease, var(--ease-smooth)) var(--reveal-delay, var(--delay-0)), filter var(--reveal-dur, var(--dur-700)) var(--reveal-ease, var(--ease-smooth)) var(--reveal-delay, var(--delay-0));
}

.has-js .u-reveal.u-reveal-blur.is-inview {
  filter: blur(var(--reveal-blur-end, var(--blur-0, 0px)));
}

/* will-change opt-in（filter込みは blur時だけ欲しい） */
.u-reveal-will-change {
  will-change: opacity, transform;
}

.u-reveal-will-change.u-reveal-blur {
  will-change: opacity, transform, filter;
}

/* direction (set vars only) */
.u-reveal-left {
  --reveal-x: -1;
  --reveal-y: 0;
}

.u-reveal-right {
  --reveal-x: 1;
  --reveal-y: 0;
}

.u-reveal-up {
  --reveal-x: 0;
  --reveal-y: -1;
}

.u-reveal-down {
  --reveal-x: 0;
  --reveal-y: 1;
}

/* effect presets */
.u-reveal-scale-95 {
  --reveal-scale: 0.95;
}

.u-reveal-scale-98 {
  --reveal-scale: 0.98;
}

.u-reveal-blur-2 {
  --reveal-blur: var(--blur-2, 2px);
}

.u-reveal-blur-4 {
  --reveal-blur: var(--blur-4, 4px);
}

/* duration presets（theme tokensに統一） */
.u-reveal-dur-900 {
  --reveal-dur: var(--dur-900);
}

.u-reveal-dur-1200 {
  --reveal-dur: var(--dur-1200);
}

.u-reveal-dur-2000 {
  --reveal-dur: var(--dur-2000);
}

/* delay presets（theme tokensに統一） */
.u-reveal-delay-100 {
  --reveal-delay: var(--delay-100);
}

.u-reveal-delay-200 {
  --reveal-delay: var(--delay-200);
}

.u-reveal-delay-300 {
  --reveal-delay: var(--delay-300);
}

.u-reveal-delay-400 {
  --reveal-delay: var(--delay-400);
}

/* reduced motion: always show */
@media (prefers-reduced-motion: reduce) {
  .u-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ✅ perf をやりたい場合だけ opt-in */
.u-cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 280px;
}

/* --------------------------------------
  JS Hook（例外運用 / Progressive Enhancement）
  - js-reveal は「拾うためのフック」
  - 見た目は各レーンが持つ
-------------------------------------- */
/* JS 無効: 基本は見える（opacityだけ保証）
   ※ transform/filter は潰さない（u-anim/u-kfの常時再生を殺さないため）
*/
html:not(.has-js) .js-reveal {
  opacity: 1;
}

/* JS 有効: inview まで opacity だけ隠す（全レーン共通 / FOUC対策） */
.has-js .js-reveal:not(.is-inview) {
  opacity: 0;
}

/* Effects (任意追加) */
.u-reveal.fx-soft {
  --reveal-scale: 0.96;
}

.u-reveal.fx-blur {
  --reveal-blur: var(--blur-8, 8px);
}

/* DEV only (reveal lane) */
.u-debug-slow-reveal {
  --reveal-dur: var(--dur-2000);
  --reveal-stagger: var(--delay-200);
}

/* ======================================
  utilities/_animate.scss
  .u-anim (transition-based)
  - Source of truth: tokens/cssvars/_motion.cssvars.scss (:root)
  - Distance uses: --anim-dist
====================================== */
/* base */
.u-anim {
  --anim-x: 0;
  --anim-y: 0;
  --anim-dist: var(--motion-dist, initial);
  --anim-dur: var(--dur-700);
  --anim-ease: var(--ease-standard);
  --anim-delay: var(--delay-0);
  --anim-opacity-start: var(--motion-opacity-start, 0);
  --anim-scale-start: var(--motion-scale-start, initial);
  --anim-blur-start: var(--motion-blur-start, initial);
  transition-property: transform, opacity;
  transition-duration: var(--anim-dur, initial);
  transition-timing-function: var(--anim-ease, 0px);
  transition-delay: var(--anim-delay, initial);
}

/* blurは opt-in */
.u-anim.u-anim-blur {
  transition-property: transform, opacity, filter;
}

/* 入る前 */
.u-anim.is-before:not(.is-inview) {
  opacity: var(--anim-opacity-start, 0);
  transform: translate(calc(var(--anim-x, 0) * var(--anim-dist, 28px)), calc(var(--anim-y, 1) * var(--anim-dist, 28px))) scale(var(--anim-scale-start, 1));
}

/* 入った後 */
.u-anim.is-inview {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* blur（opt-in） */
.u-anim.is-before:not(.is-inview).u-anim-blur {
  filter: blur(var(--anim-blur-start, 0px));
}

.u-anim.is-inview.u-anim-blur {
  filter: blur(var(--blur-0, 0px));
}

/* will-change opt-in */
.u-anim-will-change {
  will-change: transform, opacity;
}

/* direction */
.u-anim-dir-left {
  --anim-x: -1;
  --anim-y: 0;
}

.u-anim-dir-right {
  --anim-x: 1;
  --anim-y: 0;
}

.u-anim-dir-up {
  --anim-x: 0;
  --anim-y: -1;
}

.u-anim-dir-down {
  --anim-x: 0;
  --anim-y: 1;
}

/* distance */
.u-anim-dist-8 {
  --anim-dist: var(--dist-8, 8px);
}

.u-anim-dist-16 {
  --anim-dist: var(--dist-16, 16px);
}

.u-anim-dist-24 {
  --anim-dist: var(--dist-24, 24px);
}

.u-anim-dist-32 {
  --anim-dist: var(--dist-32, 32px);
}

.u-anim-dist-48 {
  --anim-dist: var(--dist-48, 48px);
}

.u-anim-dist-64 {
  --anim-dist: var(--dist-64, 64px);
}

/* duration */
.u-anim-dur-150 {
  --anim-dur: var(--dur-150);
}

.u-anim-dur-200 {
  --anim-dur: var(--dur-200);
}

.u-anim-dur-300 {
  --anim-dur: var(--dur-300);
}

.u-anim-dur-400 {
  --anim-dur: var(--dur-400);
}

.u-anim-dur-500 {
  --anim-dur: var(--dur-500);
}

.u-anim-dur-700 {
  --anim-dur: var(--dur-700);
}

.u-anim-dur-900 {
  --anim-dur: var(--dur-900);
}

.u-anim-dur-1200 {
  --anim-dur: var(--dur-1200);
}

.u-anim-dur-1400 {
  --anim-dur: var(--dur-1400);
}

.u-anim-dur-2000 {
  --anim-dur: var(--dur-2000);
}

/* easing */
.u-anim-ease-out {
  --anim-ease: var(--ease-out);
}

.u-anim-ease-in {
  --anim-ease: var(--ease-in);
}

.u-anim-ease-in-out {
  --anim-ease: var(--ease-in-out);
}

.u-anim-ease-smooth {
  --anim-ease: var(--ease-smooth);
}

.u-anim-ease-snap {
  --anim-ease: var(--ease-snap);
}

.u-anim-ease-hover {
  --anim-ease: var(--ease-hover);
}

.u-anim-ease-standard {
  --anim-ease: var(--ease-standard);
}

.u-anim-ease-linear {
  --anim-ease: var(--ease-linear);
}

/* DEV only (anim lane) */
.u-debug-slow-anim {
  --anim-dur: var(--dur-2000);
}

/* ========================================
   Hover Effects
   - hover = motion
   - focus-visible = a11y 表示
   Source of truth: tokens/cssvars/_motion.cssvars.scss
======================================== */
/* 共通transition（基本：filter無し） */
.u-hover {
  transition-timing-function: var(--hover-ease, 0px);
  transition-duration: var(--hover-dur, initial);
  transition-property: transform, box-shadow, opacity;
}

/* hover時だけ最適化（常時は避ける） */
.u-hover:hover {
  will-change: transform;
}

/* filter を使う時だけ（opt-in） */
.u-hover.u-hover-filter {
  transition-property: transform, box-shadow, opacity, filter;
}

.u-hover.u-hover-filter:hover {
  will-change: transform, filter;
}

/* =========================
   拡大
========================= */
.u-hover-scale {
  transform: none;
}

.u-hover-scale:hover {
  transform: scale(var(--scale-hover, 1.015));
}

/* =========================
   浮く
========================= */
.u-hover-lift:hover {
  box-shadow: var(--hover-shadow, var(--ui-elev-3, var(--kw-none)));
  transform: translateY(calc(-1 * var(--dist-8, 8px)));
}

.u-hover-lift:active {
  box-shadow: var(--ui-elev-1, var(--kw-none));
  transform: translateY(var(--dist-0, 0px));
}

/* utilities/_animate-kf.scss */
/* ========================================
   u-kf（keyframes系の汎用モーション）
   - reveal.js は is-inview を付ける
   - u-kf は keyframes を走らせる
   - 値（ms/px）は tokens/cssvars/_motion.cssvars.scss に集約（直書き禁止）
======================================== */
/* base: 初期は隠す（is-inview で表示＋再生） */
.u-kf {
  opacity: 0;
  /* tokens/cssvars 側で --kf-dur / --kf-ease / --delay-0 等が定義されている前提 */
  animation-duration: var(--kf-dur, var(--dur-900));
  animation-timing-function: var(--kf-ease, var(--reveal-ease, var(--ease-smooth)));
  animation-delay: var(--delay-0);
  animation-fill-mode: both;
  animation-iteration-count: var(--kf-iter, 1);
}

.u-kf.is-inview {
  opacity: 1;
  animation-name: var(--kf-name, var(--kw-none));
}

/* infinite */
.u-kf-infinite {
  --kf-iter: infinite;
}

/* ----------------------------------------
   presets（名前を変えない。HTMLの class と一致させる）
---------------------------------------- */
/* fade */
.u-kf-fade-in {
  --kf-name: kf-fade-in;
  --kf-dur: var(--dur-1100);
}

/* scale */
.u-kf-scale-in {
  --kf-name: kf-scale-in;
  --kf-dur: var(--dur-1400);
}

/* slide */
.u-kf-slide-in {
  --kf-name: kf-slide-in;
  --kf-dur: var(--dur-1000);
  --kf-dist: var(--dist-64, 64px);
}

/* pop（現状良いなら維持） */
.u-kf-pop-in {
  --kf-name: kf-pop-in;
  --kf-dur: var(--dur-900);
}

/* fade up */
.u-kf-fade-up {
  --kf-name: kf-fade-up;
  --kf-dur: var(--dur-1000);
  --kf-dist: var(--dist-48, 48px);
}

/* toast */
.u-kf-toast-in {
  --kf-name: kf-toast-in;
  --kf-dur: var(--dur-700);
}

/* shake */
.u-kf-shake {
  --kf-name: kf-shake;
  --kf-dur: var(--dur-600);
}

/* ----------------------------------------
   keyframes (variable-driven)
---------------------------------------- */
@keyframes kf-fade-in {
  from {
    opacity: var(--kf-fade-in-o0, 0);
    transform: var(--kf-fade-in-t0, var(--kw-none));
  }
  to {
    opacity: var(--kf-fade-in-o1, 1);
    transform: var(--kf-fade-in-t1, var(--kw-none));
  }
}
@keyframes kf-scale-in {
  from {
    opacity: var(--kf-scale-in-o0, 0);
    transform: var(--kf-scale-in-t0, var(--kw-none));
  }
  to {
    opacity: var(--kf-scale-in-o1, 1);
    transform: var(--kf-scale-in-t1, var(--kw-none));
  }
}
@keyframes kf-slide-in {
  from {
    opacity: var(--kf-slide-in-o0, 0);
    transform: var(--kf-slide-in-t0, var(--kw-none));
  }
  to {
    opacity: var(--kf-slide-in-o1, 1);
    transform: var(--kf-slide-in-t1, var(--kw-none));
  }
}
@keyframes kf-pop-in {
  0% {
    opacity: var(--kf-pop-in-o0, 0);
    transform: var(--kf-pop-in-t0, var(--kw-none));
  }
  65% {
    opacity: var(--kf-pop-in-o65, 1);
    transform: var(--kf-pop-in-t65, var(--kw-none));
  }
  100% {
    opacity: var(--kf-pop-in-o100, 1);
    transform: var(--kf-pop-in-t100, var(--kw-none));
  }
}
@keyframes kf-fade-up {
  from {
    opacity: var(--kf-fade-up-o0, 0);
    transform: var(--kf-fade-up-t0, var(--kw-none));
  }
  to {
    opacity: var(--kf-fade-up-o1, 1);
    transform: var(--kf-fade-up-t1, var(--kw-none));
  }
}
@keyframes kf-toast-in {
  0% {
    opacity: var(--kf-toast-in-o0, 0);
    transform: var(--kf-toast-in-t0, var(--kw-none));
  }
  60% {
    opacity: var(--kf-toast-in-o60, 1);
    transform: var(--kf-toast-in-t60, var(--kw-none));
  }
  100% {
    opacity: var(--kf-toast-in-o100, 1);
    transform: var(--kf-toast-in-t100, var(--kw-none));
  }
}
@keyframes kf-shake {
  0%, 100% {
    transform: var(--kf-shake-t0, var(--kw-none));
  }
  20% {
    transform: var(--kf-shake-t20, var(--kw-none));
  }
  40% {
    transform: var(--kf-shake-t40, var(--kw-none));
  }
  60% {
    transform: var(--kf-shake-t60, var(--kw-none));
  }
  80% {
    transform: var(--kf-shake-t80, var(--kw-none));
  }
}
@keyframes kf-mv-fade {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  28% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kf-mv-zoom {
  0% {
    transform: scale(1);
  }
  36% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.05);
  }
}
/* ----------------------------------------
   カスタム例（現状は残す）
---------------------------------------- */
.u-kf-card {
  --kf-dist: var(--dist-64, 64px);
  --kf-dur: var(--dur-1400);
}

/* サイズ別：発火タイミング */
.u-rt-sm {
  --reveal-root-margin: 0px 0px -20% 0px;
  --reveal-threshold: 0.18;
}

.u-rt-md {
  --reveal-root-margin: 0px 0px -28% 0px;
  --reveal-threshold: 0.14;
}

.u-rt-lg {
  --reveal-root-margin: 0px 0px -38% 0px;
  --reveal-threshold: 0.1;
}

.u-rt-xl {
  --reveal-root-margin: 0px 0px -48% 0px;
  --reveal-threshold: 0.06;
}

/* utilities/_anim-presets.scss
  Motion presets (purpose-based)
  - .u-anim のカスタムプロパティだけを差し替える
  - reveal / anim / kf の “距離” は tokens/cssvars 側の bridge で一致させる
  Source of truth: tokens/cssvars/_motion.cssvars.scss
*/
/* =========================================================
  PURPOSE PRESETS
========================================================= */
/* 建築/高級：大きく、ゆっくり、上品 */
.u-anim-arch {
  /* distance */
  --anim-dist: var(--dist-arch, initial);
  /* timing */
  --anim-dur: var(--dur-1100);
  --anim-ease: var(--ease-smooth);
  /* start look */
  --anim-opacity-start: 0;
  --anim-scale-start: 0.94;
  --anim-blur-start: var(--blur-8, 8px);
}

/* セクション標準：ほどよく */
.u-anim-section {
  /* distance */
  --anim-dist: var(--dist-section, initial);
  /* timing */
  --anim-dur: var(--dur-900);
  --anim-ease: var(--ease-smooth);
  /* start look */
  --anim-opacity-start: 0;
  --anim-scale-start: 0.98;
  --anim-blur-start: var(--blur-0, 0px);
}

/* UI/操作：小さく、速く、軽い */
.u-anim-ui {
  /* distance */
  --anim-dist: var(--dist-ui, initial);
  /* timing */
  --anim-dur: var(--dur-500);
  --anim-ease: var(--ease-out);
  /* start look */
  --anim-opacity-start: 0;
  --anim-scale-start: 1;
  --anim-blur-start: var(--blur-0, 0px);
}

/* ヒーロー/見出し：ゆったり＋存在感 */
.u-anim-hero {
  /* distance */
  --anim-dist: var(--reveal-dist-fluid, initial);
  /* timing */
  --anim-dur: var(--dur-1400);
  --anim-ease: var(--ease-smooth);
  /* start look */
  --anim-opacity-start: 0;
  --anim-scale-start: 0.96;
  --anim-blur-start: var(--blur-0, 0px);
}

/* =========================================================
  HELPERS
========================================================= */
/* delay util（stagger互換：よく使うやつだけ先に） */
.u-anim-delay-0 {
  --anim-delay: var(--delay-0);
}

.u-anim-delay-60 {
  --anim-delay: var(--delay-60);
}

.u-anim-delay-90 {
  --anim-delay: var(--delay-90);
}

.u-anim-delay-100 {
  --anim-delay: var(--delay-100);
}

.u-anim-delay-120 {
  --anim-delay: var(--delay-120);
}

.u-anim-delay-180 {
  --anim-delay: var(--delay-180);
}

.u-anim-delay-200 {
  --anim-delay: var(--delay-200);
}

.u-anim-delay-260 {
  --anim-delay: var(--delay-260);
}

.u-anim-delay-300 {
  --anim-delay: var(--delay-300);
}

.u-anim-delay-320 {
  --anim-delay: var(--delay-320);
}

.u-anim-delay-400 {
  --anim-delay: var(--delay-400);
}

.u-anim-delay-520 {
  --anim-delay: var(--delay-520);
}

.u-anim-delay-700 {
  --anim-delay: var(--delay-700);
}

.u-anim-delay-900 {
  --anim-delay: var(--delay-900);
}

.u-font-a {
  font-family: "Noto Sans JP", sans-serif;
}

.u-font-b {
  font-family: "Roboto", sans-serif;
}

.u-font-c {
  font-family: "YuGothic", "Yu Gothic", sans-serif;
}

.u-font-d {
  font-family: "Meiryo", sans-serif;
}

.u-font-e {
  font-family: "Georgia", "Times New Roman", serif;
}

.u-font-f {
  font-family: "Courier New", monospace;
}

.u-font-g {
  font-family: "Hiragino Mincho ProN", serif;
}

.u-font-h {
  font-family: "Playfair Display", "Georgia", serif;
}

.u-font-i {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
}

.u-motion-probe {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  /* JS reads resolved values from these */
  transition-duration: var(--swiper-speed, initial);
  transition-delay: var(--swiper-delay, initial);
}

/* utilities/_gap.scss */
/* gap utilities */
.u-gap-4 {
  gap: var(--dist-4, 4px) !important;
}

.u-gap-8 {
  gap: var(--dist-8, 8px) !important;
}

.u-gap-12 {
  gap: var(--dist-12, 12px) !important;
}

.u-gap-16 {
  gap: var(--dist-16, 16px) !important;
}

.u-gap-24 {
  gap: var(--dist-24, 24px) !important;
}

.u-gap-32 {
  gap: var(--dist-32, 32px) !important;
}

/* src/scss/utilities/_measure.scss */
.u-measure-500,
.u-measure-550,
.u-measure-580,
.u-measure-660,
.u-measure-760,
.u-measure-860,
.u-measure-980,
.u-measure-1080,
.u-measure-1200,
.u-measure-1400,
.u-measure-1600,
.u-measure-2000 {
  inline-size: 100%;
  margin-inline: auto;
}

.u-measure-500 {
  max-inline-size: 500px;
}

.u-measure-550 {
  max-inline-size: 550px;
}

.u-measure-580 {
  max-inline-size: 580px;
}

.u-measure-660 {
  max-inline-size: 660px;
}

.u-measure-760 {
  max-inline-size: 760px;
}

.u-measure-860 {
  max-inline-size: 860px;
}

.u-measure-980 {
  max-inline-size: 980px;
}

.u-measure-1080 {
  max-inline-size: 1080px;
}

.u-measure-1200 {
  max-inline-size: 1200px;
}

.u-measure-1400 {
  max-inline-size: 1400px;
}

.u-measure-1600 {
  max-inline-size: 1600px;
}

.u-measure-2000 {
  max-inline-size: 2000px;
}

/* 中身の幅に合わせて箱を縮め、その箱を中央寄せするクラス
(短いUI要素や、文章以外の小さな箱 に向いています) */
.u-measure-fit {
  display: table;
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
}

/* ------------------------------------------
   文章内容幅 measure

   用途：
   - br で改行位置を制御した短めのリード文
   - 1行または数行の短い説明文を、内容幅に合わせて中央配置したい場合
   - 箱自体は中央、箱の中の文章は左揃えにしたい場合

   向いていない用途：
   - ブラウザ幅に応じて自然に折り返したい長めの本文
   - 横幅いっぱいに近い可変テキストブロック
   - SPで自動的に読みやすく折り返したい文章

   注意：
   - max-content は折り返しを避ける性質がある
   - 長い文章では横に広がりやすい
   - SPでは 320px 幅を基準に、ページ/要素単位で inline-size を調整する
   - 自然な折り返しが必要な場合は .u-measure-text を使う

   調整例：
   @media screen and (max-width: 500px) {
     .page-scope .target.u-measure-content {
       inline-size: min(100%, 88vw);
       max-inline-size: 100%;
     }
   }
------------------------------------------ */
.u-measure-content {
  inline-size: max-content;
  max-inline-size: 100%;
  margin-inline: auto;
  text-align: left;
}

/* ------------------------------------------
   自然折り返し文章 measure

   用途：
   - ブラウザ幅に応じて自然に折り返したいリード文
   - PCでは読みやすい最大幅に制限し、SPでは画面内に収めたい文章
   - 箱自体は中央、文章は左揃えにしたい場合
------------------------------------------ */
.u-measure-text {
  max-inline-size: min(100%, 38rem);
  margin-inline: auto;
  text-align: left;
}

/* 文字量・行幅を制限しない：親幅または画面幅いっぱいまで使う */
.u-measure-fluid {
  max-inline-size: min(100%, 100vw - 40px);
  margin-inline: auto;
  text-align: left;
}

/* ---------------------------------------------
 12. 状態（JS連動）
--------------------------------------------- */
.is-hidden {
  display: none !important;
}

.is-invisible {
  visibility: hidden !important;
}

.is-disabled {
  pointer-events: none !important;
}

.is-inert {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/*# sourceMappingURL=main.css.map */