/* ------------------------------------------- */
/* 共通CSS
/* ------------------------------------------- */

/* デザイントークン */
:root {
  /* フォントファミリー */
  --font-montserrat: "Montserrat", sans-serif;
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-conio: var(--font-montserrat);
  /* フォントウェイトスケール */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  /* タイプスケール（1rem = 16px 換算） */
  --font-size-2xs: 0.625rem; /* 10px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.75rem; /* 60px */
  --font-size-7xl: 4.5rem; /* 72px */
  --font-size-8xl: 6rem; /* 96px */
  --font-size-9xl: 8rem; /* 128px */
  /* スペーシングスケール（1rem = 16px 換算） */
  --spacing-0\.5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-1\.5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-2\.5: 0.625rem; /* 10px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-3\.5: 0.875rem; /* 14px */
  --spacing-4: 1rem; /* 16px */
  --spacing-4\.5: 1.125rem; /* 18px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-28: 7rem; /* 112px */
  --spacing-32: 8rem; /* 128px */
  --spacing-36: 9rem; /* 144px */
  --spacing-40: 10rem; /* 160px */
  --spacing-44: 11rem; /* 176px */
  --spacing-48: 12rem; /* 192px */
  --spacing-52: 13rem; /* 208px */
  --spacing-56: 14rem; /* 224px */
  --spacing-60: 15rem; /* 240px */
  --spacing-64: 16rem; /* 256px */
  --spacing-72: 18rem; /* 288px */
  --spacing-80: 20rem; /* 320px */
  --spacing-96: 24rem; /* 384px */
  /* 角丸スケール（1rem = 16px 換算） */
  --radius-none: 0; /* 0px */
  --radius-2xs: 0.0625rem; /* 1px */
  --radius-xs: 0.125rem; /* 2px */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-4xl: 2rem; /* 32px */
  --radius-full: calc(infinity * 1px); /* 全角丸 */
  /* アニメーション時間スケール */
  --duration-fastest: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-moderate: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-slowest: 500ms;
  /* conio */
  --conio-color-1: #fab23a;
  --conio-color-2: #fa8e3c;
  --conio-color-3: #f76a31;
  --conio-color-4: #e6462e;
  --conio-color-5: #c92725;
  --conio-logo-aspect-ratio: 2160 / 780;
}

/* 基本定義 */
html {
  font-family: var(--font-noto-sans-jp);
  font-size: 16px;
  line-height: 1.25;
}

/* ユーティリティ */
.u_font-conio {
  font-family: var(--font-conio);
  font-weight: var(--font-weight-bold);
}

/* コンポーネント */
.c_button-primary {
  color: white;
  background-color: var(--conio-color-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  padding: var(--spacing-6) var(--spacing-10);
  transition: background-color var(--duration-moderate) linear;
}
.c_button-primary:hover {
  background-color: var(--conio-color-2);
}