:root {
  /* プリミティブカラー */
  --color-white: #FFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000;
  --color-yellow-50: #FFFDE7;
  --color-yellow-400: #FFEE58;
  --color-yellow-600: #FDD835;
  --color-yellow-800: #F9A825;
  --color-teal-50: #E0F2F1;
  --color-teal-400: #26A69A;
  --color-teal-600: #00897B;
  --color-teal-800: #00695C;
  /* セマンティックカラー */
  --color-surface-0: var(--color-black);
  --color-surface-10: var(--color-gray-900);
  --color-surface-20: var(--color-gray-800);
  --color-surface-30: var(--color-gray-700);
  --color-surface-40: var(--color-gray-600);
  --color-surface-50: var(--color-gray-500);
  --color-surface-60: var(--color-gray-400);
  --color-surface-70: var(--color-gray-300);
  --color-surface-80: var(--color-gray-200);
  --color-surface-90: var(--color-gray-100);
  --color-surface-95: var(--color-gray-50);
  --color-surface-100: var(--color-white);
  --color-primary-20: var(--color-yellow-800);
  --color-primary-40: var(--color-yellow-600);
  --color-primary-60: var(--color-yellow-400);
  --color-primary-95: var(--color-yellow-50);
  --color-secondary-20: var(--color-teal-800);
  --color-secondary-40: var(--color-teal-600);
  --color-secondary-60: var(--color-teal-400);
  --color-secondary-95: var(--color-teal-50);
  /* タイポグラフィ */
  --font-family-ja: "Noto Sans JP";
  --font-family-en: "Roboto";
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-8xl: 6rem;
  --leading-4: 1rem;
  --leading-6: 1.5rem;
  --leading-8: 2rem;
  --leading-9: 2.25rem;
  --leading-none: 1;
  --leading-tight: 1.25rem;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  /* コーナー */
  --rounded-none: 0px;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-lg: 0.5rem;
  --rounded-2xl: 1rem;
  --rounded-full: 9999px;
  /* 長さ */
  --length-0: 0px;
  --length-2: 0.5rem;
  --length-4: 1rem;
  --length-8: 2rem;
  --length-10: 2.5rem;
  --length-14: 3.5rem;
  --length-24: 6rem;
  --length-40: 10rem;
  --length-66: 16.5rem;
  --length-72: 18rem;
  --length-160: 40rem;
  --length-282: 70.5rem;
  --length-px: 1px;
  --length-90px: 90px;
  /* 透明度 */
  --opacity-0: 0;
  --opacity-100: 1;
  /* 配置 */
  --position-0: 0px;
  --position-4: 1rem;
  --position-1_2: 50%;
  ---position-4: -1rem;
  ---position-1_2: -50%;
  /* 変形 */
  --rotate-45: 45deg;
  ---rotate-180: -180deg;
  /* 遷移 */
  --duration-150: 150ms;
  /* 重なり */
  ---z-1: -1;
  --z-10: 10;

  /* キーワード値によるサイズのアニメーション */
  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }
}

body {
  font-family: var(--font-family-ja);
}

/* フォントスタイルヘルパー */
.font-family-en {
  font-family: var(--font-family-en);
}

/* カラーヘルパー */
.color-surface-100 {
  color: var(--color-surface-100);
}

.color-secondary-20 {
  color: var(--color-secondary-20);
}

.color-secondary-60 {
  color: var(--color-secondary-60);
}

.bg-color-surface-95 {
  background-color: var(--color-surface-95);
}

.bg-color-surface-100 {
  background-color: var(--color-surface-100);
}

.bg-color-secondary-20 {
  background-color: var(--color-secondary-20);
}

.bg-color-secondary-95 {
  background-color: var(--color-secondary-95);
}

/* サイジングヘルパー */
.w-66 {
  width: var(--length-66);
}

.max-w-282 {
  max-width: var(--length-282);
}

.h-160 {
  height: var(--length-160);
}

.top-90px {
  top: var(--length-90px);
}

/* ボーダーヘルパー */
.border-surface0 {
  border: var(--length-px) solid var(--color-surface-0);
}

.border-bottom-surface60 {
  border-bottom: var(--length-px) solid var(--color-surface-60);
}

.border-right-surface60 {
  border-right: var(--length-px) solid var(--color-surface-60);
}

.border-left-surface60 {
  border-left: var(--length-px) solid var(--color-surface-60);
}

/* 重なり */
.-z-1 {
  z-index: var(---z-1);
}

/* CTAボタン */
.cta-button {
  font-family: var(--font-family-ja);
  font-weight: var(--font-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  padding: var(--length-4);
  background-color: var(--color-primary-60);
  border-radius: var(--rounded-lg);
  width: var(--length-72);
  height: var(--length-14);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スモールCTAボタン */
.small-cta-button {
  font-family: var(--font-family-ja);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  padding: var(--length-4);
  background-color: var(--color-primary-60);
  border-radius: var(--rounded);
  height: var(--length-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* セグメントボタン */
.segmented-button {
  font-family: var(--font-family-ja);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  padding-inline: var(--length-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-full);

  &.text {

    &.selected {
      border: var(--length-px) solid var(--color-surface-0);
    }
  }
}

/* アイコンボタン */
.icon-button {
  min-width: var(--length-10);
  height: var(--length-10);
  border-radius: var(--rounded-full);
  display: flex;
  justify-content: center;
  align-items: center;

  &.outlined {
    border: var(--length-px) solid var(--color-surface-0);
  }
}

/* swiper ナビゲーションボタン */
.swiper-button-prev,
.swiper-button-next {
  width: var(--length-10);
  height: var(--length-10);
  border-radius: var(--rounded-full);
  border: var(--length-px) solid var(--color-surface-0);
  background-color: var(--color-surface-100);

  &::after {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-surface-0);
  }
}

/* ReCaptcha */
.grecaptcha-badge {
  z-index: var(--z-10);
}

.section05 {
  margin-top: var(--length-0);
}