@charset "utf-8";

/* ==========================================================================
   cp-tokens.css — coordinate-pick デザイントークン（カスタムプロパティ）
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Color
     -------------------------------------------------------------------------- */

  /* Primary */
  --cp-color-primary: #212121;
  --cp-color-primary-dark: #0565AD;

  /* Semantic */
  --cp-color-danger: #DC3545;
  --cp-color-warning: #F5A623;
  --cp-color-success: #28A745;

  /* Neutral */
  --cp-color-text: #212121;
  --cp-color-text-secondary: #212121;
  --cp-color-text-on-primary: #FFFFFF;

  --cp-color-border: #D1D1D1;
  --cp-color-bg: #FFFFFF;
  --cp-color-bg-muted: #F0F0F0;
  --cp-color-bg-warm: #F4F3EF;
  --cp-color-surface: #FFFFFF;

  /* Accent */
  --cp-color-accent: #FFC52F;
  --cp-color-accent-light: #FFF983;

  /* Favorite */
  --cp-color-favorite: #FF6B6B;

  /* LINE */
  --cp-color-line: #06C755;

  /* --------------------------------------------------------------------------
     Icon
     -------------------------------------------------------------------------- */

  --cp-icon-favorite: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTNlM2UzIj48cGF0aCBkPSJtMzA1LTcwNCAxMTItMTQ1cTEyLTE2IDI4LjUtMjMuNVQ0ODAtODgwcTE4IDAgMzQuNSA3LjVUNTQzLTg0OWwxMTIgMTQ1IDE3MCA1N3EyNiA4IDQxIDI5LjV0MTUgNDcuNXEwIDEyLTMuNSAyNFQ4NjYtNTIzTDc1Ni0zNjdsNCAxNjRxMSAzNS0yMyA1OXQtNTYgMjRxLTIgMC0yMi0zbC0xNzktNTAtMTc5IDUwcS01IDItMTEgMi41dC0xMSAuNXEtMzIgMC01Ni0yNHQtMjMtNTlsNC0xNjVMOTUtNTIzcS04LTExLTExLjUtMjNUODAtNTcwcTAtMjUgMTQuNS00Ni41VDEzNS02NDdsMTcwLTU3Wm00OSA2OS0xOTQgNjQgMTI0IDE3OS00IDE5MSAyMDAtNTUgMjAwIDU2LTQtMTkyIDEyNC0xNzctMTk0LTY2LTEyNi0xNjUtMTI2IDE2NVptMTI2IDEzNVoiLz48L3N2Zz4K");

  /* --------------------------------------------------------------------------
     Typography — Font Family
     -------------------------------------------------------------------------- */

  --cp-font-base: "Noto Sans JP", "Roboto", sans-serif;
  --cp-font-en: "Roboto", "Noto Sans JP", sans-serif;
  --cp-font-heading-en: "Montserrat", "Roboto", sans-serif;

  /* --------------------------------------------------------------------------
     Typography — Font Size（clamp によるリキッド）
     -------------------------------------------------------------------------- */

  --cp-font-size-2xs: clamp(8px, 0.8vw, 9px);
  --cp-font-size-xs: clamp(10px, 1.1vw, 11px);
  --cp-font-size-sm: clamp(12px, 1.2vw, 13px);
  --cp-font-size-base: clamp(14px, 1.5vw, 16px);
  --cp-font-size-lg: clamp(16px, 1.8vw, 18px);
  --cp-font-size-xl: clamp(18px, 2vw, 22px);
  --cp-font-size-2xl: clamp(22px, 2.5vw, 28px);
  --cp-font-size-3xl: clamp(25px, 3vw, 35px);

  /* モバイル固定値（SP用上書き時に使用） */
  --cp-font-size-base-fixed: 14px;
  --cp-font-size-sm-fixed: 12px;
  --cp-font-size-xs-fixed: 10px;

  /* --------------------------------------------------------------------------
     Typography — Letter Spacing
     -------------------------------------------------------------------------- */

  --cp-letter-spacing: 0.1em;
  --cp-letter-spacing-tight: 0.05em;
  --cp-letter-spacing-wide: 0.15em;

  /* --------------------------------------------------------------------------
     Typography — Line Height
     -------------------------------------------------------------------------- */

  --cp-line-height-body: 1.7;
  --cp-line-height-body-sp: 1.6;
  --cp-line-height-heading: 1.3;
  --cp-line-height-tight: 1.2;

  /* --------------------------------------------------------------------------
     Spacing Scale（clamp によるリキッド）
     -------------------------------------------------------------------------- */

  --cp-space-2xs: clamp(4px, 0.5vw, 5px);
  --cp-space-xs: clamp(5px, 1.1vw, 10px);
  --cp-space-sm: clamp(10px, 1.2vw, 15px);
  --cp-space-md: clamp(15px, 1.7vw, 20px);
  --cp-space-lg: clamp(20px, 2.5vw, 30px);
  --cp-space-xl: clamp(30px, 3.5vw, 50px);
  --cp-space-2xl: clamp(40px, 4.5vw, 60px);
  --cp-space-3xl: clamp(50px, 5.5vw, 80px);

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */

  --cp-layout-inner-width-pc: 95%;
  --cp-layout-inner-width-sp: 87.2%;
  --cp-layout-max-width: 1200px;
  --cp-layout-max-width-narrow: 800px;

  --cp-layout-section-gap: clamp(80px, 10vw, 120px);
  --cp-layout-section-gap-half: calc(var(--cp-layout-section-gap) / 2);

  /* --------------------------------------------------------------------------
     Z-index Scale
     -------------------------------------------------------------------------- */

  --cp-z-base: 0;
  --cp-z-dropdown: 10;
  --cp-z-sticky: 20;
  --cp-z-overlay: 50;
  --cp-z-modal: 100;

  /* --------------------------------------------------------------------------
     Shadow（Elevation）
     -------------------------------------------------------------------------- */

  --cp-shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.16);
  --cp-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.16);

  /* --------------------------------------------------------------------------
     Transition & Animation
     -------------------------------------------------------------------------- */

  --cp-transition-base: 0.3s ease;
  --cp-transition-slow: 0.5s ease;

}

/* --------------------------------------------------------------------------
   メディアクエリ — モバイル（767px以下）での上書き値
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  :root {
    --cp-layout-section-gap: 50px;
  }
}