/*************************************************
variables.css
**************************************************/
/* 変数 */
:root {
  /* Layout */
  /* ビューポートの最小幅 (ピクセル単位) */
  --min-viewport-width: 375;
  /* ビューポートの最大幅 (ピクセル単位) */
  --max-viewport-width: 1400;

  /* ------- typography ------- */
  --font-primary: Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  /* ------- Font Size ------- */
  /* ratio */
  --font-size-base: 16;
  --em: 1em / 16;
  --rem: 1rem / 16;
  /* value */
  --font-size: calc(var(--font-size-base) * var(--em)); /* 1em */
  /* property */
  --font-size-14: calc(14 / var(--font-size-base) * var(--font-size)); /* 0.875em */
  --font-size-16: var(--font-size); /* 1em */
  --font-size-18: calc(18 / var(--font-size-base) * var(--font-size)); /* 1.125em */
  --font-size-20: calc(20 / var(--font-size-base) * var(--font-size)); /* 1.25em */
  --font-size-22: calc(22 / var(--font-size-base) * var(--font-size)); /* 1.375em */
  --font-size-24: calc(24 / var(--font-size-base) * var(--font-size)); /* 1.5em */
  --font-size-26: calc(26 / var(--font-size-base) * var(--font-size)); /* 1.625em */
  --font-size-28: calc(28 / var(--font-size-base) * var(--font-size)); /* 1.75em */
  --font-size-30: calc(30 / var(--font-size-base) * var(--font-size)); /* 1.875em */
  --font-size-32: calc(32 / var(--font-size-base) * var(--font-size)); /* 2em */
  --font-size-36: calc(36 / var(--font-size-base) * var(--font-size)); /* 2.25em */
  --letter-spacing: normal;

  /* ------- Font Weight ------- */
  /* value */
  --FontWeight-400: 400;
  --FontWeight-500: 500;
  /* property */
  --fontweight-regular: var(--FontWeight-400);
  --fontweight-medium: var(--FontWeight-500);

  /* ------- Letter Spacing ------- */
  /* ratio */
  --tracking-unit: 0.1em;
  /* value */
  --tracking-value-0: 0; /* 0 (0) */
  --tracking-value-1: 0.1; /* 0.01em (1%) */
  --tracking-value-2: 0.2; /* 0.02em (2%) */
  --tracking-value-3: 0.3; /* 0.03em (3%) */
  --tracking-value-4: 0.4; /* 0.04em (4%) */
  --tracking-value-5: 0.5; /* 0.05em (5%) */
  --tracking-value-6: 0.6; /* 0.06em (6%) */
  --tracking-value-7: 0.7; /* 0.07em (7%) */
  --tracking-value-8: 0.8; /* 0.08em (8%) */
  --tracking-value-9: 0.9; /* 0.09em (9%) */
  --tracking-value-10: 1; /* 0.1em (10%) */
  /* property */
  --tracking-0: calc(var(--tracking-value-0) * var(--tracking-unit));
  --tracking-1: calc(var(--tracking-value-1) * var(--tracking-unit));
  --tracking-2: calc(var(--tracking-value-2) * var(--tracking-unit));
  --tracking-3: calc(var(--tracking-value-3) * var(--tracking-unit));
  --tracking-4: calc(var(--tracking-value-4) * var(--tracking-unit));
  --tracking-5: calc(var(--tracking-value-5) * var(--tracking-unit));
  --tracking-6: calc(var(--tracking-value-6) * var(--tracking-unit));
  --tracking-7: calc(var(--tracking-value-7) * var(--tracking-unit));
  --tracking-8: calc(var(--tracking-value-8) * var(--tracking-unit));
  --tracking-9: calc(var(--tracking-value-9) * var(--tracking-unit));
  --tracking-10: calc(var(--tracking-value-10) * var(--tracking-unit));

  /* Border-radius */
  --rounded-4: 4px;
  --rounded-6: 6px;
  --rounded-8: 8px;
  --rounded-12: 12px;
  --rounded-16: 16px;
  --rounded-24: 24px;
  --rounded-32: 32px;
  --rounded-full: calc(infinity * 1px);

  /* Border-width */
  --border-width-sm: 0.5px;
  --border-width-md: 1px;
  --border-width-lg: 2px;
  --border-width-xl: 4px;

  /* Outline-width */
  --outline-width-md: 1px;
  --outline-width-lg: 2px;
  --outline-width-xl: 4px;

  /* ------- Colors from Design System ------- */
  /* neutral */
  --color-neutral-100: #000;
  --color-neutral-90: #1a1a1a; /*#000 90%*/
  --color-neutral-80: #333; /*#000 80%*/
  --color-neutral-70: #4d4d4d; /*#000 70%*/
  --color-neutral-60: #666; /*#000 60%*/
  --color-neutral-54: #767676; /*#000 54%*/
  --color-neutral-50: #7f7f7f; /*#000 50%*/
  --color-neutral-42: #949494; /*#000 42%*/
  --color-neutral-40: #999; /*#000 40%*/
  --color-neutral-30: #b3b3b3; /*#000 30%*/
  --color-neutral-20: #ccc; /*#000 20%*/
  --color-neutral-10: #e6e6e6; /*#000 10%*/
  --color-neutral-5: #f5f5f5; /*#000 5%*/
  --color-neutral-0: #fff; /*#000 0%*/

  /* primary */
  --color-primary-01: #e975a3;
  --color-primary-02: #fc9ab6;
  --color-primary-03: #f9b2c3;
  --color-primary-04: #fcd4d5;
  --color-secondary-01: #fafcb4;
  --color-category-01: #ffb2c8;
  --color-category-02: #f0e69f;
  --color-category-border-02: #f0c29f;
  --color-category-03: #99e7dc;
  --color-category-border-03: #85c8bf;
  --color-text: #362115;
  --color-gray: var(--color-neutral-54);
  --color-right-gray: var(--color-neutral-42);
  --color-white: var(--color-neutral-0);
  --color-black: var(--color-neutral-100);
  --color-link: #3922ad;

  --color-main: var(--color-primary-02);
  --color-subtle: var(--color-primary-03);
  --color-subtler: var(--color-primary-04);
  --color-bold: var(--color-primary-01);
  --color-accent: var(--color-secondary-01);

  /* Semantic Colors:Text Colors */
  --color-text-default: var(--color-text);
  --color-text-subtle: var(--color-right-gray);
  --color-text-subtler: var(--color-neutral-42);
  --color-text-accent: var(--color-bold);
  --color-text-link: var(--color-link);
  --color-text-placeholder: var(--color-text-subtler);
  --color-text-inverse: var(--color-white);
  --color-text-disabled: var(--color-gray);
  --color-text-important: var(--color-bold);
  --color-text-bredcrumb: var(--color-text);
  --color-text-bredcrumb-link: var(--color-link);

  /* Semantic Colors:Background Colors */
  --color-background-default: var(--color-white);
  --color-background-main: var(--color-main);
  --color-background-subtle: var(--color-subtle);
  --color-background-subtler: var(--color-subtler);
  --color-background-accent: var(--color-accent);
  --color-background-hover: var(--color-accent);

  /* Semantic Colors:Border Colors */
  --border-default: var(--color-text);
  --border-accent: var(--color-accent);
  --border-black: var(--color-black);
  --border-table: var(--color-right-gray);
  --border-main: var(--color-main);
  --border-subtle: var(--color-subtle);
  --border-subtler: var(--color-subtler);
  --border-bold: var(--color-bold);
  --border-inverse: var(--color-white);

  /* Semantic Colors:Category Colors */
  --category-library--background: var(--color-category-01);
  --category-library--border: var(--color-border-bold);
  --category-main--background: var(--color-category-02);
  --category-main--border: var(--color-category-border-02);
  --category-branch--background: var(--color-category-03);
  --category-branch--border: var(--color-category-border-03);

  /* Semantic Colors:Marker Colors */
  --marker-close: #f4b4d0;
  --marker-event: #dce49c;

  /* Semantic Colors:Button Colors */
  --button-color-default: var(--color-text-default);
  --color-link-default: #a6e2eb;

  /* Elevation */
  --elevation-01: 0px 2px 8px 1px rgba(0, 0, 0, 0.1), 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
  --elevation-02: 0px 2px 12px 2px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-03: 0px 4px 16px 3px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-04: 0px 6px 20px 4px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-05: 0px 8px 24px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
  --elevation-06: 0px 10px 30px 6px rgba(0, 0, 0, 0.1), 0px 3px 12px 0px rgba(0, 0, 0, 0.3);
  --elevation-07: 0px 12px 36px 7px rgba(0, 0, 0, 0.1), 0px 3px 14px 0px rgba(0, 0, 0, 0.3);
  --elevation-08: 0px 14px 40px 7px rgba(0, 0, 0, 0.1), 0px 3px 16px 0px rgba(0, 0, 0, 0.3);

  /* Buttons */
  --button-size--min-mobile: 48px; /*andriod*/
  --button-size--min-ios: 44px; /*ios*/

  /* ------- Branding ------- */
  --branding-title-font-size: calc(30 / 16 * 1rem);
  --branding-title-font-size-mobile: calc(20 / 16 * 1rem);
  --branding-title-font-weight: var(--fontweight-regular);
  --branding-title-line-height: 1.5;
  --branding-title-letter-spacing: var(--tracking-10);
  --branding-span-font-size: calc(18 / 16 * 1rem);
  --branding-span-font-size-mobile: calc(14 / 16 * 1rem);
  --branding-span-font-weight: var(--fontweight-regular);
  --branding-span-letter-spacing: var(--tracking-7);
  --branding-span-line-height: 1.2;
  --branding-logo-size: 100px;
  --branding-logo-size-mobile: calc(var(--branding-logo-size) * 0.8);

  /* ------- Navigation ------- */
  /* Main Navigation */
  --header-gnav-font-family: var(--font-primary);
  --header-gnav-font-size: calc(22 / 16 * 1rem);
  --header-gnav-font-weight: var(--fontweight-medium);
  --header-gnav-color-link-text: var(--color-text-default);
  --header-gnav-color-link-hover: var(--color-background-subtler);
  --header-gnav-color-border: var(--color-border-default);

  /* Drawer Navigation */
  --drawer-nav-font-size: calc(22 / 16 * 1rem);
  --drawer-nav-font-weight: var(--fontweight-medium);
  --drawer-nav-color-link-text: var(--color-text-default);
  --drawer-nav-color-link-hover: var(--color-background-subtler);
  --drawer-nav-color-border: var(--color-border-default);

  /* Footer Navigation */
  --footer-nav-font-size: calc(18 / 16 * 1rem);
  --footer-nav-font-weight: var(--fontweight-regular);
  --footer-nav-color-link-text: var(--color-text-default);
  --footer-nav-color-border: var(--color-border-default);

  /* ------- Page Control ------- */
  /* Page Control */

  /* ------- Common ------- */
  /* Spacing */
  --space-measure: unset;

  /* Negative */
  --negative-1: -1px;
  --negative-2: -2px;
  --negative-4: -4px;
  --negative-8: -8px;
  --negative-12: -12px;
  --negative-16: -16px;
  --negative-24: -24px;

  /* 基本space */
  --space-unit: calc(8 * var(--rem));
  --space-none: 0;
  --space-2: calc(2 * var(--rem)); /* 2px */
  --space-4: calc(4 * var(--rem)); /* 4px */
  --space-6: calc(6 * var(--rem)); /* 6px */
  --space-8: var(--space-unit); /* 8px */
  --space-12: calc(12 * var(--rem)); /* 12px */
  --space-16: calc(16 * var(--rem)); /* 16px */
  --space-24: calc(24 * var(--rem)); /* 24px */
  --space-32: calc(32 * var(--rem)); /* 32px */
  --space-40: calc(40 * var(--rem)); /* 40px */
  --space-48: calc(48 * var(--rem)); /* 48px */
  --space-64: calc(64 * var(--rem)); /* 64px */
  --space-80: calc(80 * var(--rem)); /* 80px */
  --space-96: calc(96 * var(--rem)); /* 96px */
  --space-128: calc(128 * var(--rem)); /* 128px */
  --space-160: calc(160 * var(--rem)); /* 160px */

  /* Responsive */
  --max-content-width: 1120px;
  --container-content: calc(var(--max-content-width) + calc(var(--space-16) * 2));
  --device-width-sm: 576px;
  --device-width-md: 768px;
  --device-width-lg: 992px;
  --device-width-xl: 1200px;
  --device-width-xxl: 1440px;

  /* Aspect-ratio */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-video-vertical: 9 / 16;
  --aspect-golden: 1.618 / 1;
  --aspect-photo: 4 / 3;
  --aspect-photo-vertical: 3 / 4;
  --aspect-landscape: 3 / 2;
  --aspect-portrait: 2 / 3;
  --aspect-thumbnail: 1.91 / 1;

  /* z-index */
  --stack-top: calc(infinity);
  --stack-drawer: 300;
  --stack-head: 200;
  --stack-foot: 100;
  --stack-foreground: 1;
  --stack-background: -1;
}