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

/* デザイントークン */
:root {
  /* フォントファミリー */
  --font-montserrat: "Montserrat", sans-serif;
  --font-biz-ud-p-gothic: "BIZ UDPGothic", sans-serif;
  --font-m-plus-1: "M PLUS 1", sans-serif;
  --font-body: "Montserrat", "BIZ UDPGothic", sans-serif;
  --font-heading: "Montserrat", "M PLUS 1", 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.75rem; /* 28px */
  --font-size-4xl: 2rem; /* 32px */
  --font-size-5xl: 2.25rem; /* 36px */
  --font-size-6xl: 2.5rem; /* 40px */
  --font-size-7xl: 2.75rem; /* 44px */
  --font-size-8xl: 3rem; /* 48px */
  --font-size-9xl: 3.5rem; /* 56px */
  --font-size-10xl: 4rem; /* 64px */
  --font-size-11xl: 4.5rem; /* 72px */
  --font-size-12xl: 5rem; /* 80px */
  /* 行送りスケール */
  --line-height-shorter: 1;
  --line-height-short: 1.25;
  --line-height-moderate: 1.5;
  --line-height-tall: 1.75;
  --line-height-taller: 2;
  /* スペーシングスケール（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 換算） */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-9: 2.25rem;
  --size-10: 2.5rem;
  --size-11: 2.75rem;
  --size-12: 3rem;
  --size-14: 3.5rem;
  --size-16: 4rem;
  --size-20: 5rem;
  --size-24: 6rem;
  --size-28: 7rem;
  --size-32: 8rem;
  --size-36: 9rem;
  --size-40: 10rem;
  --size-44: 11rem;
  --size-48: 12rem;
  --size-52: 13rem;
  --size-56: 14rem;
  --size-60: 15rem;
  --size-64: 16rem;
  --size-72: 18rem;
  --size-80: 20rem;
  --size-96: 24rem;
  --size-3xs: 14rem;
  --size-2xs: 16rem;
  --size-xs: 20rem;
  --size-sm: 24rem;
  --size-md: 28rem;
  --size-lg: 32rem;
  --size-xl: 36rem;
  --size-2xl: 42rem;
  --size-3xl: 48rem;
  --size-4xl: 56rem;
  --size-5xl: 64rem;
  --size-6xl: 72rem;
  --size-7xl: 80rem;
  --size-8xl: 90rem;
  --size-0\.5: 0.125rem;
  --size-1\.5: 0.375rem;
  --size-2\.5: 0.625rem;
  --size-3\.5: 0.875rem;
  --size-4\.5: 1.125rem;
  --size-1\/2: 50%;
  --size-1\/3: 33.333333%;
  --size-2\/3: 66.666667%;
  --size-1\/4: 25%;
  --size-3\/4: 75%;
  --size-1\/5: 20%;
  --size-2\/5: 40%;
  --size-3\/5: 60%;
  --size-4\/5: 80%;
  --size-1\/6: 16.666667%;
  --size-2\/6: 33.333333%;
  --size-3\/6: 50%;
  --size-4\/6: 66.666667%;
  --size-5\/6: 83.333333%;
  --size-1\/12: 8.333333%;
  --size-2\/12: 16.666667%;
  --size-3\/12: 25%;
  --size-4\/12: 33.333333%;
  --size-5\/12: 41.666667%;
  --size-6\/12: 50%;
  --size-7\/12: 58.333333%;
  --size-8\/12: 66.666667%;
  --size-9\/12: 75%;
  --size-10\/12: 83.333333%;
  --size-11\/12: 91.666667%;
  --size-max: max-content;
  --size-min: min-content;
  --size-fit: fit-content;
  --size-prose: 60ch;
  --size-full: 100%;
  --size-dvh: 100dvh;
  --size-svh: 100svh;
  --size-lvh: 100lvh;
  --size-dvw: 100dvw;
  --size-svw: 100svw;
  --size-lvw: 100lvw;
  --size-vw: 100vw;
  --size-vh: 100vh;
  --size-breakpoint-sm: 480px;
  --size-breakpoint-md: 768px;
  --size-breakpoint-lg: 1024px;
  --size-breakpoint-xl: 1280px;
  --size-breakpoint-2xl: 1536px;
  /* 角丸スケール（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.25rem; /* 20px */
  --radius-4xl: 1.5rem; /* 24px */
  --radius-5xl: 1.75rem; /* 28px */
  --radius-6xl: 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;
  /* 色 */
  --color-conio-1: #fab23a;
  --color-conio-2: #fa8e3c;
  --color-conio-3: #f76a31;
  --color-conio-4: #e6462e;
  --color-conio-5: #c92725;
  --color-bg: #fff;
  --color-bg-muted: #ccc;
  --color-bg-subtle: #999;
  --color-bg-conio: color-mix(in srgb, var(--color-conio-1) 25%, white);
  --color-fg: #000;
  --color-fg-muted: #333;
  --color-fg-subtle: #666;
  --color-border: #ccc;
  --color-button-cta: #4769d1;
  --color-link-hover: var(--color-conio-3);
  /* その他 */
  --conio-logo-aspect-ratio: 2160 / 780;
}

/* 基本定義 */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-short);
  color: var(--color-fg);
  background-color: var(--color-bg);
}

/* ユーティリティ */
.u_controlled-break {
  white-space: normal;
  word-break: keep-all;
}

/* コンポーネント - ボタン */
.c_button-primary,
.c_button-secondary {
  --button-color: var(--color-conio-3);
  --button-hover-color: var(--color-conio-1);
  --button-border-width: 2px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: var(--line-height-short);
  padding: 0.75em 1em;
  transition: background-color var(--duration-moderate) linear;
  &.c_button-primary {
    color: white;
    background-color: var(--button-color);
    &:hover {
      background-color: var(--button-hover-color);
    }
  }
  &.c_button-secondary {
    color: var(--button-color);
    background-color: white;
    box-shadow: 0 0 0 var(--button-border-width) var(--button-color) inset;
    &:hover {
      background-color: color-mix(in srgb, var(--button-hover-color) 30%, white);
    }
  }
  &.size-xs {
    --button-border-width: 1.5px;
    font-size: var(--font-size-xs);
  }
  &.size-sm {
    --button-border-width: 1.5px;
    font-size: var(--font-size-sm);
  }
  &.size-md {
    font-size: var(--font-size-md);
    @media (width < 1024px) {
      font-size: var(--font-size-sm);
    }
  }
  &.size-lg {
    font-size: var(--font-size-lg);
    @media (width < 1024px) {
      font-size: var(--font-size-md);
    }
  }
  &.size-xl {
    font-size: var(--font-size-lg);
    @media (width < 768px) {
      font-size: var(--font-size-md);
    }
    @media (width < 480px) {
      font-size: var(--font-size-md);
    }
  }
  &.size-2xl {
    font-size: var(--font-size-xl);
    @media (480px <= width < 768px) {
      font-size: var(--font-size-lg);
    }
    @media (width < 480px) {
      font-size: var(--font-size-md);
    }
  }
  &.size-3xl {
    font-size: var(--font-size-2xl);
    @media (768px <= width) {
      --button-border-width: 3px;
    }
    @media (768px <= width < 1024px) {
      font-size: var(--font-size-xl);
    }
    @media (480px <= width < 768px) {
      font-size: var(--font-size-lg);
    }
    @media (width < 480px) {
      font-size: var(--font-size-md);
    }
  }
  &.variant-cta {
    --button-color: var(--color-button-cta);
    --button-hover-color: color-mix(in srgb, var(--button-color) 75%, white);
  }
}

/* コンポーネント - リンク */
.c_link-simple {
  --color: var(--color-fg);
  color: var(--color);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) linear, text-decoration-color
    var(--duration-fast) linear;
  &:hover {
    --color: var(--color-link-hover);
    text-decoration-color: color-mix(in srgb, var(--color) 25%, transparent);
  }
}