/* --------------------
Color Settings
-------------------- */
:where(:host, :root) {
  /* Primitive colors */
  /* /Mono/ */
  --primitive-mono-000: #ffffff;
  --primitive-mono-050: #f6f6f6;
  --primitive-mono-100: #f2f2f2;
  --primitive-mono-150: #ebebeb;
  --primitive-mono-200: #e5e5e5;
  --primitive-mono-300: #d1d1d1;
  --primitive-mono-400: #b2b2b2;
  --primitive-mono-500: #8c8c8c;
  --primitive-mono-600: #737373;
  --primitive-mono-700: #4d4d4d;
  --primitive-mono-800: #333333;
  --primitive-mono-900: #191919;
  /* RAG Blue */
  /* --blue-000: ; */
  --primitive-blue-050: #f5f7fa;
  --primitive-blue-100: #e8f1ff;
  --primitive-blue-150: #cce0ff;
  --primitive-blue-200: #a7c8fa;
  --primitive-blue-300: #87b6fd;
  --primitive-blue-400: #5498ff;
  --primitive-blue-500: #0066ff;
  --primitive-blue-600: #1156bd;
  --primitive-blue-700: #5f728e;
  --primitive-blue-800: #173259;
  --primitive-blue-900: #001a41;
  /* Orange */
  /* --primitive-orange-000: ; */
  /* --primitive-orange-050: ; */
  --primitive-orange-100: #fff7f2;
  /* --primitive-orange-150: ; */
  --primitive-orange-200: #fdede3;
  --primitive-orange-300: #edc0af;
  /* --primitive-orange-400: ; */
  --primitive-orange-500: #ff8a3c;
  --primitive-orange-600: #ed650d;
  --primitive-orange-700: #de4605;
  --primitive-orange-800: #b23804;
  --primitive-orange-900: #AB3604;

  /* Red */
  /* --primitive-red-000: ; */
  /* --primitive-red-050: ; */
  --primitive-red-100: #fff7f7;
  /* --primitive-red-150: ; */
  --primitive-red-200: #fdeded;
  /* --primitive-red-300: ; */
  --primitive-red-400: #eab8b8;
  /* --primitive-red-500: ; */
  --primitive-red-600: #e92d2d;
  --primitive-red-700: #c30303;
  --primitive-red-800: #751a1a;
  /* --primitive-red-900: ; */
  /* Green */
  /* --primitive-green-000: ; */
  /* --primitive-green-050: ; */
  --primitive-green-100: #f0faf5;
  --primitive-green-150: #e6faef;
  --primitive-green-200: #cdfae2;
  --primitive-green-300: #8cffc2;
  /* --primitive-green-400: ; */
  --primitive-green-500: #69bf91;
  --primitive-green-600: #00a54d;
  --primitive-green-700: #197a47;
  --primitive-green-800: #004d24;
  /* --primitive-green-900: ; */

  /* Sky */
  /* --primitive-sky-000: ; */
  /* --primitive-sky-050: ; */
  /* --primitive-sky-100: ; */
  --primitive-sky-150: #e9fafd;
  --primitive-sky-200: #d9f3fa;
  --primitive-sky-300: #80e7ff;
  /* --primitive-sky-400: ; */
  --primitive-sky-500: #009cbf;
  /* --primitive-sky-600: ; */
  --primitive-sky-700: #005e73;
  /* --primitive-sky-800: ; */
  /* --primitive-sky-900: ; */

  /* Yellow */
  /* --primitive-yellow-000: ; */
  /* --primitive-yellow-050: ; */
  /* --primitive-yellow-100: ; */
  --primitive-yellow-150: #f9f7d1;
  /* --primitive-yellow-200: ; */
  --primitive-yellow-300: #ffef0a;
  /* --primitive-yellow-400: ; */
  /* --primitive-yellow-500: ; */
  --primitive-yellow-600: #fcb830;
  --primitive-yellow-700: #805500;
  /* --primitive-yellow-800: ; */
  /* --primitive-yellow-900: ; */

  /* Purple */
  /* --primitive-purple-000: ; */
  /* --primitive-purple-050: ; */
  /* --primitive-purple-100: ; */
  --primitive-purple-150: #f3e4f7;
  /* --primitive-purple-200: ; */
  --primitive-purple-300: #efabff;
  /* --primitive-purple-400: ; */
  --primitive-purple-500: #6e43b8;
  /* --primitive-purple-600: ; */
  --primitive-purple-700: #43188a;
  /* --primitive-purple-800: ; */
  /* --primitive-purple-900: ; */

  /* Semantic colors */
  /* Object */
  --Object-Primary: var(--primitive-blue-800);
  --Object-Secondary: var(--primitive-mono-800);
  --Object-Static: var(--primitive-mono-900);
  --Object-Caption: var(--primitive-mono-700);
  --Object-Disabled: var(--primitive-mono-400);
  --Object-White: var(--primitive-mono-000);
  --Object-Emphasis: var(--primitive-blue-600);
  --Object-Alert: var(--primitive-orange-800);
  --Object-Success: var(--primitive-green-800);

  /* Stroke */
  --Stroke-White: var(--primitive-mono-000);
  --Stroke-Divider: var(--primitive-mono-200);
  --Stroke-Info: var(--primitive-blue-600);
  --Stroke-Focus-general: var(--primitive-blue-500);
  --Stroke-Focus-blue: var(--primitive-blue-800);
  --Stroke-Alert: var(--primitive-orange-800);
  --Stroke-Success: var(--primitive-green-800);
  --Stroke-Accent: var(--primitive-orange-700);
  --Stroke-Clickable: var(--primitive-mono-300);
  --Stroke-Table: var(--primitive-blue-700);
  --Stroke-box-dark: var(--primitive-mono-900);

  /* Surface */
  /* Interactive */
  --Surface-Interactive-Primary: var(--primitive-orange-700);
  --Surface-Interactive-Primary-hover: var(--primitive-orange-600);
  --Surface-Interactive-Primary-pressed: var(--primitive-orange-800);
  --Surface-Interactive-Secondary: var(--primitive-blue-500);
  --Surface-Interactive-Secondary-hover: var(--primitive-blue-400);
  --Surface-Interactive-Secondary-pressed: var(--primitive-blue-600);
  --Surface-Interactive-White: var(--primitive-mono-000);
  --Surface-Interactive-White-hover: var(--primitive-mono-050);
  --Surface-Interactive-White-pressed: var(--primitive-blue-100);
  --Surface-Interactive-Disable: var(--primitive-mono-100);
  --InteractiveSurface-Button-White-White_Hover: #f5f6fa;
  --Surface-Interactive-dark: var(--primitive-mono-900);
  --Surface-Interactive-dark-hover: var(--primitive-mono-700);
  --Surface-Interactive-dark-focus: var(--primitive-mono-600);
  --Surface-Interactive-dark-pressed: var(--primitive-mono-050);

  /* Shadow/TertiaryButtonShadow */
  box-shadow: 0px 1px 2px 0px rgba(166, 166, 166, 0.2);

  /* Container */
  --Surface-Container-White: var(--primitive-mono-000);
  --Surface-Container-dark: var(--primitive-mono-900);
  --Surface-Container-gray-light: var(--primitive-mono-200);
  --Surface-Container-gray: var(--primitive-mono-300);
  --Surface-Container-Footer: var(--primitive-blue-050);
  --Surface-Container-Brand: var(--primitive-blue-600);
  --Surface-Container-Table-title: var(--primitive-blue-100);
  --Surface-Container-Table-subtitle: var(--primitive-mono-050);
  --Surface-Container-Alert: var(--primitive-orange-100);
  --Surface-Container-focus: var(--primitive-orange-900);
  --Surface-Container-Success: var(--primitive-green-100);

  /* Label */
  --Surface-Label-Neutral: var(--primitive-blue-800);
  --Surface-Label-Closed: var(--primitive-mono-700);
  --Surface-Label-Light-Red: var(--primitive-orange-100);
  --Surface-Label-Gray: var(--primitive-mono-150);
  --Surface-Label-Unread: var(--primitive-sky-200);
  --Surface-Label-Suggestion: var(--primitive-blue-100);

  /* Tag */
  --Surface-Tag-Light-Blue: var(--primitive-blue-100);
  --Surface-Tag-Light-Green: var(--primitive-green-150);
  --Surface-Tag-Gray: var(--primitive-mono-150);

  /* Background */
  --Surface-Background-Base: var(--primitive-mono-050);
  --Surface-Background-Blue: var(--primitive-blue-600);
}

/* --------------------
Base Styles
-------------------- */
html,
body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body,
h1,
h2,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

picture {
  line-height: 0;
}

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

@media (min-width: 768px) {
  .pc-hide {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .sp-hide {
    display: none !important;
  }
}

/* --------------------
Utilities
-------------------- */
.u-mt-4 {
  margin-top: 4px;
}

.u-mt-8 {
  margin-top: 8px;
}

.u-mt-10 {
  margin-top: 10px;
}

.u-mt-12 {
  margin-top: 12px;
}

.u-mt-16 {
  margin-top: 16px;
}

.u-mt-24 {
  margin-top: 24px;
}

.u-mt-32 {
  margin-top: 32px;
}
.u-mt-40 {
  margin-top: 40px;
}
.u-mt-48 {
  margin-top: 48px;
}
.u-mt-56 {
  margin-top: 56px;
}

@media (min-width: 768px) {
  .u-mt-4-pc {
    margin-top: 4px;
  }

  .u-mt-8-pc {
    margin-top: 8px;
  }

  .u-mt-10-pc {
    margin-top: 10px;
  }

  .u-mt-12-pc {
    margin-top: 12px;
  }

  .u-mt-16-pc {
    margin-top: 16px;
  }

  .u-mt-24-pc {
    margin-top: 24px;
  }

  .u-mt-32-pc {
    margin-top: 32px;
  }

  .u-mt-40-pc {
    margin-top: 40px;
  }

  .u-mt-48-pc {
    margin-top: 48px;
  }

  .u-mt-56-pc {
    margin-top: 56px;
  }
}