@charset "utf-8";

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

:root {

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

  /* Primary */
  --cp-color-primary: #404040;
  --cp-color-primary-dark: #404040;

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

  /* Neutral */
  --cp-color-text: #404040;
  --cp-color-text-secondary: #727272;
  --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: #FFC52F;

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

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

  --cp-icon-favorite: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTNlM2UzIj48cGF0aCBkPSJtMzA1LTcwNCAxMTItMTQ1cTEyLTE2IDI4LjUtMjMuNVQ0ODAtODgwcTE4IDAgMzQuNSA3LjVUNTQzLTg0OWwxMTIgMTQ1IDE3MCA1N3EyNiA4IDQxIDI5LjV0MTUgNDcuNXEwIDEyLTMuNSAyNFQ4NjYtNTIzTDc1Ni0zNjdsNCAxNjRxMSAzNS0yMyA1OXQtNTYgMjRxLTIgMC0yMi0zbC0xNzktNTAtMTc5IDUwcS01IDItMTEgMi41dC0xMSAuNXEtMzIgMC01Ni0yNHQtMjMtNTlsNC0xNjVMOTUtNTIzcS04LTExLTExLjUtMjNUODAtNTcwcTAtMjUgMTQuNS00Ni41VDEzNS02NDdsMTcwLTU3Wm00OSA2OS0xOTQgNjQgMTI0IDE3OS00IDE5MSAyMDAtNTUgMjAwIDU2LTQtMTkyIDEyNC0xNzctMTk0LTY2LTEyNi0xNjUtMTI2IDE2NVptMTI2IDEzNVoiLz48L3N2Zz4K");
  --data-icon-insta: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0LjMgMjQuMyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDMwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4xIEJ1aWxkIDEyMykgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjMTMxMzEzOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iSW5zdGFncmFtX0dseXBoX0JsYWNrIiBjbGFzcz0ic3QwIiBkPSJNNy4xLDBjLTEsMC0yLC4yLTMsLjYtMS42LjYtMi45LDEuOS0zLjUsMy42LS40LjktLjUsMS45LS42LDNDMCw4LjUsMCw4LjksMCwxMi4yczAsMy43LDAsNWMwLDEsLjIsMiwuNiwzLC42LDEuNiwxLjksMi45LDMuNiwzLjYuOS40LDEuOS41LDMsLjYsMS4zLDAsMS43LDAsNSwwczMuNywwLDUsMGMxLDAsMi0uMiwyLjktLjYsMS42LS42LDIuOS0xLjksMy41LTMuNi40LS45LjUtMS45LjYtMywwLTEuMywwLTEuNywwLTVzMC0zLjcsMC01YzAtMS0uMi0yLS42LTMtLjMtLjgtLjgtMS41LTEuNC0yLjItLjYtLjYtMS4zLTEuMS0yLjItMS40LS45LS40LTEuOS0uNS0zLS42QzE1LjksMCwxNS40LDAsMTIuMSwwcy0zLjcsMC01LDBNNy4zLDIyLjFjLS44LDAtMS41LS4xLTIuMy0uNC0uNS0uMi0xLS41LTEuNC0uOS0uNC0uNC0uNy0uOS0uOS0xLjQtLjMtLjctLjQtMS41LS40LTIuMywwLTEuMywwLTEuNywwLTQuOXMwLTMuNiwwLTQuOWMwLS44LjEtMS41LjQtMi4zLjItLjUuNS0xLC45LTEuNC40LS40LjktLjcsMS40LS45LjctLjMsMS41LS40LDIuMy0uNCwxLjMsMCwxLjcsMCw0LjksMHMzLjYsMCw0LjksMGMuOCwwLDEuNS4xLDIuMy40LDEuMS40LDEuOSwxLjIsMi4zLDIuMy4zLjcuNCwxLjUuNCwyLjMsMCwxLjMsMCwxLjcsMCw0LjlzMCwzLjYsMCw0LjljMCwuOC0uMSwxLjUtLjQsMi4zLS40LDEuMS0xLjIsMS45LTIuMywyLjMtLjcuMy0xLjUuNC0yLjMuNC0xLjMsMC0xLjcsMC00LjksMHMtMy42LDAtNC45LDBNMTcuMiw1LjdjMCwuOC43LDEuNSwxLjUsMS41LjgsMCwxLjUtLjcsMS41LTEuNSwwLS44LS43LTEuNS0xLjUtMS41LS44LDAtMS41LjctMS41LDEuNU01LjksMTIuMmMwLDMuNCwyLjgsNi4yLDYuMyw2LjIsMy40LDAsNi4yLTIuOCw2LjItNi4zLDAtMy40LTIuOC02LjItNi4zLTYuMiwwLDAsMCwwLDAsMC0zLjQsMC02LjIsMi44LTYuMiw2LjMsMCwwLDAsMCwwLDBNOC4xLDEyLjJjMC0yLjIsMS44LTQuMSw0LTQuMSwyLjIsMCw0LjEsMS44LDQuMSw0LDAsMi4yLTEuOCw0LjEtNCw0LjEtMi4yLDAtNC4xLTEuOC00LjEtNGgwIi8+Cjwvc3ZnPg==);
  --slider-arrow: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBpZD0i44Kw44Or44O844OXXzQ5MTgwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA0OTE4MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTk5MyAxNjE3LjA3NSkgcm90YXRlKC05MCkiPgogICAgPGNpcmNsZSBpZD0i5qWV5YaG5b2iXzQwMiIgZGF0YS1uYW1lPSLmpZXlhoblvaIgNDAyIiBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1OTMuMDc1IDk5MykiIGZpbGw9IiM0MDQwNDAiLz4KICAgIDxnIGlkPSLjgrDjg6vjg7zjg5dfMjgxMjIiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDI4MTIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTk5LjcyMiAxMDAxLjk3NykiPgogICAgICA8cGF0aCBpZD0i44OR44K5XzEyNDg5IiBkYXRhLW5hbWU9IuODkeOCuSAxMjQ4OSIgZD0iTTcuNTE5LDguMDE5SC0uNVYwaDFWNy4wMTlINy41MTlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC42MzQgNS4zMTYpIHJvdGF0ZSgxMzUpIiBmaWxsPSIjZmZmIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);

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

  --cp-font-base: "Noto Sans JP", 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: 93%;
  --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;
  }
}