@charset "UTF-8";
:root {
  /* === color ==================================== */
  --color-base: #fbf6ed;
  --color-main: #2a8bb5;
  --color-accent: #e78e10;
  --color-sub-blue: #162469;
  --color-sub-red: #c61124;
  --color-white: #f8f9fa;
  --color-black: #332;
  --color-border-dash: #f8e5c0;

  /* === spacing ==================================== */
  --space-xxs: clamp(0.3rem, 0.162rem + 0.69vw, 0.75rem);
  --space-xs: 1rem;
  --space-s: clamp(1.5rem, 1.056rem + 2.22vw, 3rem);
  --space-m: clamp(2rem, 1.704rem + 1.48vw, 3rem);
  --space-l: clamp(3rem, 2.407rem + 2.96vw, 5rem);
  --space-xl: 64px;
  --space-xxl: 80px;

  /* === font size ==================================== */

  --title-h1: clamp(1.563rem, 1.428rem + 0.67vw, 2rem);
  --title-h2: clamp(1.375rem, 1.26rem + 0.58vw, 1.75rem);
  --title-h3: 1.125rem;
  --title-h4: 1rem;

  /* text */
  --text-xs: 0.75rem;
  --text-s: clamp(0.875rem, 0.4vw + 0.8rem, 1rem);
  --text-m: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  --text-l: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
  --text-xl: clamp(1.5rem, 1vw + 1rem, 3rem);
  /* こっちを使うことにする *******************変換未*****/
  --text-l: 1.125rem;
  --text-m: 1rem;
  --text-s: 0.875rem;

  /* button */
  /* こっちを使うことにする************************* */
  --button-l: 1.25rem;
  --button-m: 1rem;
  --button-s: 0.875rem;

  /* === line height ==================================== */
  --line-height-s: 1.6;
  --line-height-m: 1.8;
  --line-height-l: 2;

  /* === border radius ==================================== */
  --radius-l: 20px;
  --radius-m: 10px;
  --radius-s: 4px;
}