@charset "UTF-8";

:root {
  --color-primary: #FFD600;
  --color-accent: #8E4CFC;
  --color-sub-black: #222222;
  --color-sub-white: #FFFFFF;
  --color-orange: #FFB800;
  --color-text: #222222;
  --color-text_white: #FFFFFF;
  --color-text-diable: #ACACAC;
  --color-text_link: #4A6CE3;
  --system-gray-extra-light-gray: #F6F6F6;
  --system-gray-light-gray: #D1D1D1;
  --system-gray-gray: #737373;
  --system-gray-dark-gray: #3D3D3D;
  --status-infomation: #0959D1;
  --status-infomation-bg: #E6EFFC;
  --status-alert: #D50000;
  --status-alert-bg: #FCEDED;
  --status-success: #0DAE1D;

  --size-xxxl: clamp(3.75rem, 2.946rem + 3.57vw, 5.625rem); /* 60 - 90 */ /* 360 - 1200 */
  --size-xxl: clamp(3rem, 2.909rem + 0.45vw, 3.25rem); /* 42 - 52 */ /* 360 - 1200 */
  --size-xl: clamp(2.375rem, 2.148rem + 1.14vw, 3rem); /* 38 - 48 */
  --size-l: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem); /* 30 - 40 */
  --size-m: clamp(1.5rem, 1.364rem + 0.68vw, 1.875rem); /* 24 - 30 */
  --size-ms: clamp(1.25rem, 1.143rem + 0.48vw, 1.5rem); /* 24 - 20 */
  --size-s: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /* 16 - 20 */
  --size-ss: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); /* 14 - 16 */
  --size-sss: clamp(0.75rem, 0.696rem + 0.24vw, 0.875rem); /* 12 - 14 */
  --size-ssss: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); /* 10 - 12 */
  --size-default: clamp(1rem, 0.977rem + 0.11vw, 1.063rem); /* 16 - 17 */

  --width-max: 1920px;
  --width-xl: 1280px;
  --width-l: 900px;
  --width-m: 768px;
  --width-ms: 640px;
  --width-s: 480px;
  --width-ss: 320px;
  --responsive: clamp(8px, 4.25vw, 12px);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-20: 20px;
  --space-32: 32px;
  --space-40: 40px;
  --space-52: 52px;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  min-width: 320px;
  max-width: var(--width-max);
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text);
}

header,footer {
  max-width: var(--width-max);
}

html {
  scroll-behavior: smooth;
}

main {
  min-height: 40vh;
}

button:focus-visible {
  outline: 2px solid orange;
}

.l-center {
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------
 * PADDING
 * ---------------------- */
 /* padding 上 */
 .l-pt-4 {
  padding-top: var(--space-4);
}

.l-pt-8 {
  padding-top: var(--space-8);
}

.l-pt-12 {
  padding-top: var(--space-12);
}

.l-pt-20 {
  padding-top: var(--space-20);
}

.l-pt-32 {
  padding-top: var(--space-32);
}

.l-pt-40 {
  padding-top: var(--space-40);
}

/* padding 下 */
.l-pb-4 {
  padding-bottom: var(--space-4);
}

.l-pb-8 {
  padding-bottom: var(--space-8);
}

.l-pb-12 {
  padding-bottom: var(--space-12);
}

.l-pb-20 {
  padding-bottom: var(--space-20);
}

.l-pb-32 {
  padding-bottom: var(--space-32);
}

.l-pb-40 {
  padding-bottom: var(--space-40);
}

/* all */
.l-pd-4 {
  padding: var(--space-4);
}

.l-pd-12 {
  padding: var(--space-12);
}

.l-pd-20 {
  padding: var(--space-20);
}

/* ----------------------
 * MARGIN
 * ---------------------- */
 /* margin 上 */
 .l-mt-4 {
  margin-top: var(--space-4);
}

.l-mt-8 {
  margin-top: var(--space-8);
}

.l-mt-12 {
  margin-top: var(--space-12);
}

.l-mt-20 {
  margin-top: var(--space-20);
}

.l-mt-32 {
  margin-top: var(--space-32);
}

.l-mt-40 {
  margin-top: var(--space-40);
}

.l-mt-52 {
  margin-top: var(--space-52);
}

/* margin 下 */
.l-mb-4 {
  margin-bottom: var(--space-4);
}

.l-mb-8 {
  margin-bottom: var(--space-8);
}

.l-mb-12 {
  margin-bottom: var(--space-12);
}

.l-mb-20 {
  margin-bottom: var(--space-20);
}

.l-mb-32 {
  margin-bottom: var(--space-32);
}

.l-mb-40 {
  margin-bottom: var(--space-40);
}

.l-mb-52 {
  margin-bottom: var(--space-52);
}