:root {
  --button-size-ios: 44px;
  --button-size-android: 48px;
  /* Spacing基準 */
  --rem: 1rem / 16; /* 1rem/16 = 1px */
  --space-unit: calc(8 * var(--rem)); /* 8px */
  --space-measure: unset;
  /* Space変数 - space-unitを使用した表現 */
  --space-none: 0; /* 0px */
  --space-2: calc(var(--space-unit) / 4); /* 2px */
  --space-4: calc(var(--space-unit) / 2); /* 4px */
  --space-6: calc(var(--space-unit) * 0.75); /* 6px */
  --space-8: var(--space-unit); /* 8px */
  --space-12: calc(var(--space-unit) * 1.5); /* 12px */
  --space-16: calc(var(--space-unit) * 2); /* 16px */
  --space-24: calc(var(--space-unit) * 3); /* 24px */
  --space-32: calc(var(--space-unit) * 4); /* 32px */
  --space-40: calc(var(--space-unit) * 5); /* 40px */
  --space-48: calc(var(--space-unit) * 6); /* 48px */
  --space-64: calc(var(--space-unit) * 8); /* 64px */
  --space-80: calc(var(--space-unit) * 10); /* 80px */
  --space-96: calc(var(--space-unit) * 12); /* 96px */
  --space-128: calc(var(--space-unit) * 16); /* 128px */
  --space-160: calc(var(--space-unit) * 20); /* 160px */
  /* Negative値 - space-unitを使用した表現 */
  --negative-none: 0;
  --negative-1: -1;
  --negative-2: -2;
  --negative-4: -3;
  /* container */
  --container-none: 0px;
  --container-card-swiper: ;
  --container-content: 980px;
  --container-mincontent: calc(350px - calc(var(--space-16, 16px) * 2));
  --container-maxcontent: 1120px;
  --container-container-size: 1152px;
  /* Responsive */
  --conteinar-size-sp: 430px;
  --container-size-sm: 574px;
  --container-size-md: 768px;
  --container-size-lg: 1080px;
  --container-size-xl: 1280px;
  --container-size-height: calc(852px - var(--header-height));
  /* 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;
  /* Border-radius */
  --rounded-none: 0px;
  --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);
  /* BorderWidth */
  --borderwidth-none: 0px;
  --borderwidth-sm: 0.5px;
  --borderwidth-md: 1px;
  --borderwidth-lg: 2px;
  --borderwidth-xl: 4px;
  /* OutlineWidth */
  --outlinewidth-none: 0px;
  --outlinewidth-sm: 1px;
  --outlinewidth-md: 2px;
  --outlinewidth-lg: 4px;
  /* z-index */
  --stack-top: calc(infinity * 1);
  --stack-head: 1000;
  --stack-foot: 100;
  --stack-drawer: 2000;
  --stack-toggle: 3000;
  --stack-modal: 4000;
  --stack-swiper: 10;
  --stack-foreground: 1;
  --stack-background: -1;
  /* Elevation */
  --elevation-1: 0px 2px 8px 1px rgba(0, 0, 0, 0.1), 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
  --elevation-2: 0px 2px 12px 2px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-3: 0px 4px 16px 3px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-4: 0px 6px 20px 4px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-5: 0px 8px 24px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
  --elevation-6: 0px 12px 36px 7px rgba(0, 0, 0, 0.1), 0px 3px 14px 0px rgba(0, 0, 0, 0.3);
  --elevation-7: 0px 14px 40px 7px rgba(0, 0, 0, 0.1), 0px 3px 16px 0px rgba(0, 0, 0, 0.3);
  /* Opacity */
  --opacity-solid: 1;
  --opacity-medium: 0.5;
  --opacity-faded: 0.3;
  --opacity-transparent: 0;
  /* ------- Colors ------- */
  /* red */
  --color-red-90: #fdebe9;
  --color-red-80: #fbd6d3;
  --color-red-70: #f8c2bc;
  --color-red-60: #f6aea6;
  --color-red-50: #f2857a;
  --color-red-40: #ed5d4d;
  --color-red-30: #e93421;
  --color-red-20: #be2a1b;
  --color-red-10: #932115;
  --color-red-5: #69170e;
  /* yellow */
  --color-yellow-90: #fffbed;
  --color-yellow-80: #fef8db;
  --color-yellow-70: #fef4c9;
  --color-yellow-60: #fef1b7;
  --color-yellow-50: #fdea92;
  --color-yellow-40: #fde36e;
  --color-yellow-30: #fcdc4a;
  --color-yellow-20: #cfb43b;
  --color-yellow-10: #a18c2c;
  --color-yellow-5: #74641e;
  /* purple	 */
  --color-purple-90: #f6f0f7;
  --color-purple-80: #eee2ee;
  --color-purple-70: #e5d3e6;
  --color-purple-60: #dcc5dd;
  --color-purple-50: #cba7cc;
  --color-purple-40: #b98abb;
  --color-purple-30: #a86daa;
  --color-purple-20: #8c5a8e;
  --color-purple-10: #704871;
  --color-purple-5: #543555;
  /* pink */
  --color-pink-90: #fdf2f2;
  --color-pink-80: #fbe4e6;
  --color-pink-70: #fad7d9;
  --color-pink-60: #f8c9cc;
  --color-pink-50: #f4afb3;
  --color-pink-40: #f19499;
  --color-pink-30: #ed7980;
  --color-pink-20: #c86268;
  --color-pink-10: #a24850;
  --color-pink-5: #7d3539;
  /* navy */
  --color-navy-90: #e6edf3;
  --color-navy-80: #ccdae7;
  --color-navy-70: #b3c8db;
  --color-navy-60: #99b6cf;
  --color-navy-50: #6691b8;
  --color-navy-40: #336da0;
  --color-navy-30: #004888;
  --color-navy-20: #003a6d;
  --color-navy-10: #002b52;
  --color-navy-5: #001d36;
  /* solidgray Colors */
  --color-solidgray-100: #000; /*black 100%*/
  --color-solidgray-90: #1a1a1a; /*black 90%*/
  --color-solidgray-80: #333; /*black 80%*/
  --color-solidgray-70: #4d4d4d; /*black 70%*/
  --color-solidgray-60: #666; /*black 60%*/
  --color-solidgray-54: #767676; /*black 54%*/
  --color-solidgray-50: #7f7f7f; /*black 50%*/
  --color-solidgray-42: #949494; /*black 42%*/
  --color-solidgray-40: #999; /*black 40%*/
  --color-solidgray-30: #b3b3b3; /*black 30%*/
  --color-solidgray-20: #ccc; /*black 20%*/
  --color-solidgray-10: #e6e6e6; /*black 10%*/
  --color-solidgray-5: #f2f2f2; /*black 5%*/
  --color-solidgray-0: #fff; /*black 0%*/
  /* ------- Colors from Design System ------- */
  /* Danger Colors */
  --color-danger-90: #f8ebec;
  --color-danger-80: #f0d7d9;
  --color-danger-70: #e9c3c5;
  --color-danger-60: #e1afb2;
  --color-danger-50: #d3868c;
  --color-danger-40: #c45e65;
  --color-danger-30: #b5363f;
  --color-danger-20: #912b32;
  --color-danger-10: #6d2026;
  --color-danger-5: #481619;
  /* Success Colors */
  --color-success-90: #f1f5ec;
  --color-success-80: #e3ecda;
  --color-success-70: #d5e2c7;
  --color-success-60: #c7d8b5;
  --color-success-50: #aac58f;
  --color-success-40: #8eb16a;
  --color-success-30: #729e45;
  --color-success-20: #5b7e37;
  --color-success-10: #445f29;
  --color-success-5: #2e3f1c;
  /* Semantic Color */
  --color-semantic-success--1: ;
  --color-semantic-success--2: ;
  --color-semantic-error--1: ;
  --color-semantic-error--2: ;
  --color-semantic-warning-yellow--1: ;
  --color-semantic-warning-yellow--2: ;
  --color-semantic-warning-orange--1: ;
  --color-semantic-warning-orange--2: ;
  /* Theme Color */
  --color-white: var(--color-solidgray-0);
  --color-black: var(--color-solidgray-100);
  --color-inverse: var(--color-white);
  --color-primary-90: var(--color-yellow-90);
  --color-primary-80: var(--color-yellow-80);
  --color-primary-70: var(--color-yellow-70);
  --color-primary-60: var(--color-yellow-60);
  --color-primary-50: var(--color-yellow-50);
  --color-primary-40: var(--color-yellow-40);
  --color-primary-30: var(--color-yellow-30);
  --color-primary-20: var(--color-yellow-20);
  --color-primary-10: var(--color-yellow-10);
  --color-primary-5: var(--color-yellow-5);
  --color-main: var(--color-primary-30);
  --color-subtle: var(--color-primary-40);
  --color-subtler: var(--color-primary-70);
  --color-accent: #ffd100;
  --color-accent-dark: #014e6f;
  --color-accent-red: var(--color-red-30);
  --color-accent-pink: var(--color-pink-30);
  --color-accent-purple: var(--color-purple-30);
  /* Semantic Colors:Text Colors */
  --color-text-default: var(--color-solidgray-90);
  --color-text-subtle: var(--color-solidgray-70);
  --color-text-subtler: var(--color-solidgray-54);
  --color-text-link: var(--color-navy-30);
  --color-text-success: ;
  --color-text-inverse: var(--color-inverse);
  --color-text-accent-red: var(--color-accent-red);
  --color-text-accent-pink: var(--color-accent-pink);
  --color-text-accent-purple: var(--color-accent-purple);
  /* Semantic Colors:Border Colors */
  --color-border-default: var(--color-solidgray-42);
  --color-border-subtle: var(--color-subtle);
  --color-border-subtler: var(--color-subtler);
  --color-border-bold: var(--color-main);
  --color-border-hover: var(--color-accent);
  --color-border-button: var(--color-solidgray-42);
  --color-border-accent: var(--color-accent);
  --color-border-contrast: var(--color-solidgray-90);
  --color-border-inverse: var(--color-inverse);
  --color-border-focused: var(--color-navy-5);
  --color-border-red: var(--color-accent-red);
  --color-border-pink: var(--color-accent-pink);
  --color-border-purple: var(--color-accent-purple);
  /* Semantic Color:marker Colors */
  --color-marker-default: var(--color-accent);
  /* Semantic Colors:Background Colors */
  --color-background-default: var(--color-white);
  --color-background-disabled: var(--color-solidgray-10);
  --color-background-active: var(--color-accent);
  --color-background-hover: var(--color-subtler);
  --color-background-inverse: var(--color-white);
  --color-background-main: var(--color-main);
  --color-background-subtle: var(--color-subtle);
  --color-background-subtler: var(--color-subtler);
  --color-background-table: var(--color-solidgray-5);
  --color-background-accent-red: var(--color-red-60);
  --color-background-accent-purple: var(--color-purple-60);
  --color-background-footer: var(--color-primary-50);
  --color-background-accent: var(--color-accent);
  /* Semantic Colors:Link Colors */
  --link-border-enabled: var(--color-text-default);
  --link-bg-enabled: none;
  --link-bg-hoverd: var(--color-background-main);
  /* Font Family */
  --FontFamily-Sans: 'Noto Sans JP', sans-serif;
  --font-family-base: var(--FontFamily-Sans);
  /* Font Size */
  --font-size: calc(var(--font-size-base) * var(--rem)); /* 1rem */
  --font-size-12: calc(12 / var(--font-size-base) * var(--font-size)); /* 0.75rem */
  --font-size-14: calc(14 / var(--font-size-base) * var(--font-size)); /* 0.875rem */
  --font-size-16: var(--font-size); /* 1rem */
  --font-size-18: calc(18 / var(--font-size-base) * var(--font-size)); /* 1.125rem */
  --font-size-20: calc(20 / var(--font-size-base) * var(--font-size)); /* 1.25rem */
  --font-size-22: calc(22 / var(--font-size-base) * var(--font-size)); /* 1.375rem */
  --font-size-24: calc(24 / var(--font-size-base) * var(--font-size)); /* 1.5rem */
  --font-size-26: calc(26 / var(--font-size-base) * var(--font-size)); /* 1.625rem */
  --font-size-28: calc(28 / var(--font-size-base) * var(--font-size)); /* 1.75rem */
  --font-size-30: calc(30 / var(--font-size-base) * var(--font-size)); /* 1.875rem */
  --font-size-32: calc(32 / var(--font-size-base) * var(--font-size)); /* 2rem */
  --font-size-36: calc(36 / var(--font-size-base) * var(--font-size)); /* 2.25rem */
  --font-size-40: calc(40 / var(--font-size-base) * var(--font-size)); /* 2.5rem */
  --font-size-48: calc(48 / var(--font-size-base) * var(--font-size)); /* 3rem */
  --font-size-56: calc(56 / var(--font-size-base) * var(--font-size)); /* 3.5rem */
  --font-size-64: calc(64 / var(--font-size-base) * var(--font-size)); /* 4rem */
  /* Font Size:Clamp */
  --font-size-clamp-32-48: clamp(2rem, 2rem + 1.25vw, 3rem);
  --font-size-clamp-30-44: clamp(1.6rem, 1.625rem + 1.25vw, 2.8rem);
  --font-size-clamp-28-36: clamp(1.75rem, 1.75rem + 0.5vw, 2.25rem);
  --font-size-clamp-20-32: clamp(1.275rem, 1.275rem + 0.5vw, 2rem);
  --font-size-clamp-26-30: clamp(1.625rem, 1.5rem + 0.75vw, 1.875rem);
  --font-size-clamp-22-28: clamp(1.375rem, 1.375rem + 0.5vw, 1.75rem);
  --font-size-clamp-20-24: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
  --font-size-clamp-18-22: clamp(1.125rem, 1.125rem + 0.25vw, 1.375rem);
  --font-size-clamp-18-20: clamp(1.125rem, 1.125rem + 0.25vw, 1.25rem);
  --font-size-clamp-16-20: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
  --font-size-clamp-14-18: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
  /* Font Weight */
  --fontweight-400: 400;
  --fontweight-500: 500;
  --fontweight-600: 600;
  --fontweight-700: 700;
  --fontweight-regular: var(--fontweight-400);
  --fontweight-medium: var(--fontweight-500);
  --fontweight-semibold: var(--fontweight-600);
  --fontweight-bold: var(--fontweight-700);
  /* ------- 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%) */
  /* letter-spacing */
  --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-10: calc(var(--tracking-value-10) * var(--tracking-unit));
}