@charset "UTF-8";

/* カスタムプロパティ
-----------------------------------------------------*/
:root {
  /* ========================================
     カラー(Figmaデザイントークン)
  ======================================== */
  /* Orange */
  --orange-100: #FBE9DF;
  --orange-200: #F4C5A9;
  --orange-300: #FFA979;
  --orange-400: #E67835;
  --orange-500: #F36618;

  /* Blue */
  --blue-100: #F4FAFF;
  --blue-200: #E7F4FF;
  --blue-300: #63B4EF;
  --blue-400: #004EA2;
  --blue-500: #1D2088;
  --blue-bg: #A1D2F5;

  /* Red */
  --red-100: #FFEBEA;
  --red-200: #DA3432;
  --red-300: #C1201E;

  /* Yellow */
  --yellow-100: #FFF9C9;

  /* White */
  --white: #FFFFFF;

  /* Black */
  --black-100: #F0F0F0;
  --black-200: #D9D9D9;
  --black-300: #BFBFBF;
  --black-400: #9D9E9F;
  --black-500: #7B7C7D;
  --black-600: #2A2A2A;

  /* ========================================
     フォントサイズ
  ======================================== */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 2rem;        /* 32px */
  --text-4xl: 2.5rem;      /* 40px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.5rem;      /* 56px */
  --text-7xl: 4rem;        /* 64px */

  /* ========================================
     フォントウェイト
  ======================================== */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ========================================
     行間
  ======================================== */
  --line-height-150: 1.5;
  --line-height-160: 1.6;
  --line-height-180: 1.8;

  /* ========================================
     スペーシング
  ======================================== */
  --spacing-xxxs: 0.25rem;     /* 4px */
  --spacing-xxs: 0.5rem;       /* 8px */
  --spacing-xs: 0.625rem;      /* 10px */
  --spacing-sm: 0.75rem;       /* 12px */
  --spacing-md: 1rem;          /* 16px */
  --spacing-lg: 1.5rem;        /* 24px */
  --spacing-xl: 2rem;          /* 32px */
  --spacing-2xl: 2.5rem;       /* 40px */
  --spacing-3xl: 3rem;         /* 48px */
  --spacing-4xl: 3.5rem;       /* 56px */
  --spacing-5xl: 4rem;         /* 64px */
  --spacing-6xl: 5rem;         /* 80px */
  --spacing-7xl: 6rem;         /* 96px */

  /* ========================================
     ボーダー半径
  ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* ========================================
     コンテンツ幅
  ======================================== */
  --container-max-width: 500px;
}


/* ========================================
   common
======================================== */
* {
  box-sizing: border-box;
}

html {
  overflow: auto;
}
/* ========================================
   ベーススタイル
======================================== */
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-150);
  color: var(--black-600);
  background-color: var(--blue-100);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ========================================
   SPファースト レイアウト設定
======================================== */
/* メインコンテンツエリア - PC時は最大幅500pxで中央寄せ */
.main {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--white);
  padding-top: 64px
}

/* ヘッダー・フッターも同様の設定 */
.header,
.footer {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--white);
}

/* コンテナの基本設定 */
.container {
  width: 100%;
}

/* ========================================
     テキストスタイル
  ======================================== */
.heading-2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  color: var(--blue-400);
  text-align: center;
}

.heading-2sub {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
  text-align: center;
}

.heading-3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
}

.heading-4 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
}

.text-body {
  font-size: var(--text-sm);
  color: var(--black-600);
}

.text-body-sm {
  font-size: var(--text-xs);
  color: var(--black-600);
}

/* =======================================================
  共通ボタンスタイル
======================================================= */
.button-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--orange-500);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border: 2px solid var(--white);
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.button-primary__text {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  line-height: var(--line-height-150);
}

.button-primary__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ========================================
     上付き文字
  ======================================== */
.sup {
  font-size: 0.7em;
  vertical-align: 0.08em;
  line-height: 0;
}

/* =======================================================
  共通アコーディオンコンポーネント
======================================================= */
/* アコーディオンコンテンツ - 初期状態は非表示 */
.js-accordion .about__accordion-content,
.js-accordion .flow__accordion-content {
  display: none;
  padding: var(--spacing-sm) 0 var(--spacing-xxs);
  flex-direction: column;
  gap: var(--spacing-xxs);
  background-color: var(--white);
}

/* 開いている時 */
.js-accordion.is-open .about__accordion-content,
.js-accordion.is-open .flow__accordion-content {
  display: flex;
}

/* アコーディオンアイコン共通スタイル */
.about__accordion-icon,
.flow__accordion-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
}

.about__accordion-icon img,
.flow__accordion-icon img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

/* プラスアイコン（閉じている時） */
.about__accordion-icon-plus,
.flow__accordion-icon-plus {
  opacity: 1;
}

.about__accordion-icon-minus,
.flow__accordion-icon-minus {
  opacity: 0;
}

/* マイナスアイコン（開いている時） */
.js-accordion.is-open .about__accordion-icon-plus,
.js-accordion.is-open .flow__accordion-icon-plus {
  opacity: 0;
}

.js-accordion.is-open .about__accordion-icon-minus,
.js-accordion.is-open .flow__accordion-icon-minus {
  opacity: 1;
}

/* =======================================================
  ヘッダー
======================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;  /* 最大幅500pxにとどめるための指定 */
  right: 0;  /* 最大幅500pxにとどめるための指定 */
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--white);
  z-index: 100;
}

.header__container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  padding-top: var(--spacing-xs);
}

.header__logo {
  width: 160px;
  height: auto;
}

/* =======================================================
  KVセクション
======================================================= */
.kv {
  position: relative;
  max-width: var(--container-max-width);
  margin: 0 auto;
  background: var(--blue-bg);
  padding: 0 var(--spacing-lg) var(--spacing-xl);
  overflow: hidden;
}

.kv__background {
  position: absolute;
  top: -5px;
  width: 210%;
  transform: translateX(-27%);
  height: auto;
  opacity: 0.5;
  z-index: 0;
}

.kv__background img {
  width: 100%;
  height: auto;
  display: block;
}

.kv__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.kv__text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.kv__main-copy,
.kv__campaign-details {
  width: 100%;
}

.kv__campaign-details {
  margin-top: -1px;
  /* 最大幅500pxにとどめるための指定 */
}

.kv__main-copy img,
.kv__campaign-details img {
  width: 100%;
  height: auto;
  display: block;
}

.kv__interest-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.kv__interest-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kv__interest-chart img {
  width: 100%;
  height: auto;
  display: block;
}

.kv__interest-notes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  width: 100%;
}

.kv__interest-note {
  font-size: var(--text-xs);
}

.kv__cta {
  width: 100%;
}

.kv__inline-link {
  display: inline;
  align-items: center;
  font-weight: var(--font-weight-bold);
  color: var(--black-600);
  text-decoration: underline;
  font-size: var(--text-xs);
}

.kv__inline-link-icon {
  display: inline-block;
  align-items: center;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 2px;
}

.kv__inline-link-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* =======================================================
  パスカル支店についてセクション
======================================================= */
.about {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--blue-200);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.about__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  margin-bottom: var(--spacing-xl);
}

.about__illust {
  width: 100%;
  max-width: 270px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.about__block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.about__block-title {
  padding-bottom: var(--spacing-xxs);
  border-bottom: 1.5px solid var(--blue-300);
}

.about__block-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.about__note {
  font-size: var(--text-xs);
}

.about__accordion-container {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-sm);
}

.about__accordion {
  background-color: var(--white);
  border-bottom: 1.5px solid rgba(99, 180, 239, 0.4);
  padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-xs);
}

.about__accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.about__accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.about__accordion-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  padding: var(--spacing-sm) 0;
}

.about__note-item {
  display: flex;
  gap: 2px;
}

.about__note-mark {
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.about__note-text {
  font-size: var(--text-xs);
}

.about__points {
  display: flex;
  flex-direction: column;
}

.about__points-title {
  padding-bottom: var(--spacing-xxs);
  border-bottom: 1.5px solid var(--blue-300);
}

.about__point-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding: var(--spacing-sm) 0;
}

.about__point-header {
  display: flex;
  gap: 6px;
}

.about__point-number {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--blue-200);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
}

.about__point-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
}

.about__point-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.about__fee-table img {
  width: 100%;
}

.about__notice {
  background-color: var(--red-100);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.about__notice-header {
  display: flex;
  gap: var(--spacing-xxxs);
  align-items: center;
}

.about__notice-title {
  font-weight: var(--font-weight-bold);
  color: var(--red-300);
}

.about__notice-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.about__notice-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.about__notice-links {
  display: flex;
  flex-direction: column;
}

.about__notice-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxxs);
  text-decoration: none;
}

.about__notice-link-dot {
  width: 4px;
  height: 4px;
  background-color: var(--black-500);
  border-radius: 50%;
  flex-shrink: 0;
}

.about__notice-link-text {
  font-size: var(--text-sm);
  color: var(--blue-400);
  text-decoration: underline;
}

.about__notice-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =======================================================
  キャンペーン内容セクション
======================================================= */
.campaign {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--white);
  padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl);
}

.campaign__header {
  margin-bottom: var(--spacing-xl);
}

.campaign__content {
  display: flex;
  flex-direction: column;
}

.campaign__item {
  display: flex;
  flex-direction: column;
}

.campaign__item-title {
  background-color: var(--blue-200);
  padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xs);
}

.campaign__title-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
}

.campaign__item-content {
  padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.campaign__note-item {
  display: flex;
  gap: 2px;
}

.campaign__note-mark {
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.campaign__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.campaign__list-item {
  display: flex;
  gap: var(--spacing-xxs);
  align-items: flex-start;
}

.campaign__list-dot {
  width: 4px;
  height: 4px;
  background-color: var(--blue-300);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.campaign__list-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.campaign__app-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.campaign__app-badge {
  display: block;
  padding: 6px 0;
}

.campaign__app-badge img {
  height: 40px;
  width: auto;
  display: block;
}

.campaign__link {
  display: inline;
}

.campaign__inline-link {
  display: inline;
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
  text-decoration: underline;
  font-size: var(--text-sm);
}

.campaign__inline-link-icon {
  display: inline-block;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
}

.campaign__inline-link-icon--big {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-left: 2px;
}

.campaign__link-text {
  font-size: var(--text-sm);
  color: var(--blue-400);
  text-decoration: underline;
}

.campaign__link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 番号付きリスト */
.campaign__numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  padding-left: 0;
  list-style: none;
  counter-reset: numbered-list;
}

.campaign__numbered-list-item {
  display: flex;
  align-items: flex-start;
  counter-increment: numbered-list;
}

.campaign__numbered-list-item::before {
  content: counter(numbered-list) "：";
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* =======================================================
  流れセクション
======================================================= */
.flow {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--blue-200);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.flow__header {
  margin-bottom: var(--spacing-xl);
}

.flow__description {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-160);
  margin-bottom: var(--spacing-xl);
}

.flow__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

/* STEPコンテナ */
.flow__step {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* STEPヘッダー */
.flow__step-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  background-color: var(--white);
  border-left: 3px solid var(--blue-300);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-sm) var(--spacing-xxs);
}

.flow__step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxs);
  width: 48px;
  flex-shrink: 0;
}

.flow__step-number {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-black);
  color: var(--blue-400);
  line-height: 1;
}

.flow__step-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.flow__step-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.flow__step-text {
  font-size: var(--text-sm);
  line-height: var(--line-height-180);
}

.flow__action-box {
  background-color: var(--red-100);
  border-radius: var(--spacing-xxs);
  padding: var(--spacing-md) var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.flow__alert {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.flow__alert-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxxs);
}

.flow__alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.flow__alert-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.flow__alert-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--red-300);
}

.flow__alert-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.flow__alert-emphasis {
  font-weight: var(--font-weight-bold);
  color: var(--red-300);
}

.flow__inline-link {
  display: inline;
  align-items: center;
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
  text-decoration: underline;
}

.flow__inline-link-icon {
  display: inline-block;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 2px;
}

.flow__inline-link-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.flow__accordion-list {
  display: flex;
  flex-direction: column;
}

.flow__accordion {
  background-color: var(--white);
  border-bottom: 1.5px solid rgba(99, 180, 239, 0.4);
  padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-xs);
}

.flow__accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.flow__arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.flow__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.flow__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.flow__list-item {
  display: flex;
  gap: var(--spacing-xxs);
  align-items: flex-start;
}

.flow__list-dot {
  width: 4px;
  height: 4px;
  background-color: var(--blue-300);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.flow__list-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
}

.flow__note-item {
  display: flex;
  gap: 2px;
}

.flow__note-mark {
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.flow__note-text {
  font-size: var(--text-xs);
}


/* =======================================================
  備えませんかセクション
======================================================= */
.recommend {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--white);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.recommend__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  margin-bottom: var(--spacing-xl);
}

.recommend__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.recommend__description {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-160);
}

.recommend__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.recommend__card {
  background-color: var(--blue-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.recommend__card-header {
  display: flex;
  gap: var(--spacing-xxxs);
  align-items: center;
  padding-bottom: var(--spacing-xxxs);
  border-bottom: 1.5px solid var(--blue-300);
}

.recommend__card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.recommend__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.recommend__card-item {
  display: flex;
  gap: var(--spacing-xxxs);
  align-items: flex-start;
}

.recommend__card-item img {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.recommend__card-item .text-body {
  font-size: var(--text-sm);
  flex: 1;
}

/* =======================================================
  CTAセクション
======================================================= */
.cta {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: var(--blue-300);
  padding: var(--spacing-lg);
}

.cta__container {
  background-color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.cta__contact {
  width: 100%;
  background-color: var(--blue-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
}

.cta__contact-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  /* 10px */
}

.cta__contact-label {
  background-color: var(--white);
  border-radius: 24px;
  padding: var(--spacing-xxxs) var(--spacing-md);
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.cta__contact-label-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
  text-align: center;
}

.cta__contact-phone {
  display: flex;
  align-items: center;
}

.cta__contact-phone-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.cta__contact-phone-number {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--blue-400);
  line-height: 1;
  text-align: center;
}

.cta__contact-hours {
  font-size: var(--text-xs);
  text-align: center;
}

.cta__contact-note {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta__contact-note-text {
  font-size: var(--text-xs);
  text-align: center;
}

.cta__illust {
  width: 221px;
  height: auto;
  display: flex;
  justify-content: center;
}

.cta__illust img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 350px) {
  .cta__contact-phone-number {
    font-size: 28px;
  }
}

/* =======================================================
  フッター
======================================================= */
.footer {
  max-width: var(--container-max-width);
  padding: var(--spacing-md) 0;
  margin: 0 auto;
  background-color: var(--white);
}

.footer__copyright {
  font-size: var(--text-xs);
  text-align: center
}


/* =======================================================
  SP追従メニュー
======================================================= */
.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: var(--container-max-width);
  background-color: var(--white);
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
  z-index: 99;
  transition: transform 0.3s ease;
}

.fixed-cta.show {
  transform: translateX(-50%) translateY(0);
}

.fixed-cta__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  padding: var(--spacing-md) var(--spacing-lg);
}