@charset "utf-8";

/* ==========================================
  Config Variables
========================================== */

:root {
  /* Colors
  ------------------------------ */
  --color__txt: #022953;
  --color__main: #022953;
  --color__gold: #c4b606;
  --color__white: rgb(255, 255, 255, 0.9);
  --color__red: #c72327;
  --color__black: #0a0e18;
  --color__gray: #e7e7e7;
  --color__gray-light: #f9f9f9;
  --color__gray-dark: #aaa;

  /* Gradient Colors
  ------------------------------ */
  --gradient-primary: linear-gradient(
    90deg,
    rgba(186, 64, 181, 0.7) 0%,
    rgba(27, 106, 201, 0.7) 58%,
    rgba(11, 168, 178, 0.7) 100%
  );

  --gradient-secondary: linear-gradient(90deg, #1e2552 0%, #284757 100%);

  /* Typography
  ------------------------------ */
  --font-family__base: "Noto Sans JP", sans-serif;
  --font-family__system: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, sans-serif;
  --font-family__gosic: sans-serif;
  --font-family__mincho: "Noto Serif JP, Shippori Mincho B1", serif;
  --font-family__shippori: "Shippori Mincho", serif;
  --font-size__base: 16px;
  --line-height__base: 1.8;

  /* Container
  ------------------------------ */
  --container__width-px: 1200px;
  --container__width-percentage: 90%;
  --container__width-percentage--sp: 95%;

  /* Spacing
  ------------------------------ */
  --spacing__xs: 0.5rem;
  --spacing__sm: 1rem;
  --spacing__md: 2rem;
  --spacing__lg: 4rem;
  --spacing__xl: 8rem;

  /* Border Radius
  ------------------------------ */
  --radius__sm: 5px;
  --radius__md: 10px;
  --radius__lg: 20px;
  --radius__round: 100px;

  /* Transitions
  ------------------------------ */
  --transition__default: all 0.3s ease;
  --transition__slow: all 0.6s cubic-bezier(0.12, 1.07, 0.15, 1.11);

  /* Z-index
  ------------------------------ */
  --z-index__modal: 1000;
  --z-index__header: 999;
  --z-index__overlay: 998;

  /* Breakpoints
  ------------------------------ */
  --breakpoint__sm: 413.98px;
  --breakpoint__md: 767.98px;
  --breakpoint__lg: 1000px;
  --breakpoint__xl: 1200px;
}