@charset "UTF-8";

/* =========================================
   FAQ (よくある質問エリア)
   ========================================= */
.faq {
  /* セクション専用のカラー変数 */
  --color-bg-faq: #ccd9f3;
  --color-faq-title-sub: #ab91f2;
  --color-faq-title-main: #070f4c;
  --color-faq-q: #6d93f4;
  --color-faq-a: #e0dafe;
  --color-faq-a-text: #6b57f4;
  --color-faq-text-q: #05093d;

  background-color: var(--color-bg-faq);
  padding: 12rem 0;
}

.faq__inner {
  padding: 0 2rem;
}

.faq__header-title {
  margin-bottom: 6rem;
}

/* 共通タイトルスタイルのカラー上書き */
.faq__header-title .c-title-en {
  color: var(--color-faq-title-sub);
}
.faq__header-title .c-title-ja {
  color: var(--color-faq-title-main);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* 白ボックス間の余白 */
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}

/* 白ボックスの設定 */
.faq__item {
  width: 100%;
  min-height: 23.2rem;
  padding: 4rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
}

/* --- 質問(Q)と回答(A)の共通レイアウト --- */
.faq__question,
.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  width: 100%;
}

/* --- 丸アイコンのCSS実装 --- */
.faq__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem; 
  height: 4rem;
  border-radius: 50%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: normal; 
}

.faq__icon--q {
  background-color: var(--color-faq-q);
  color: var(--color-white);
}

.faq__icon--a {
  background-color: var(--color-faq-a);
  color: var(--color-faq-a-text);
}

/* --- テキスト装飾 --- */
.faq__question-text {
  color: var(--color-faq-text-q);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 0.6rem; 
}

.faq__answer-text {
  color: var(--color-text-main);
  font-size: 1.6rem; 
  line-height: 1.8;
  font-weight: 500;
  padding-top: 0.2rem;
}

/* =========================================
   Responsive Settings
   ========================================= */

/* タブレット表示 (768px〜1024px) */
@media (max-width: 1024px) {
  .faq {
    padding: 7rem 0; /* PC(12rem)より狭める（少し狭める調整） */
  }
  .faq__header-title {
    margin-bottom: 4.5rem; /* PC(6rem)から少し狭める */
  }
  .faq__item {
    padding: 3.5rem 2.5rem; /* カード内の左右余白を狭める */
    min-height: auto; 
  }
  .faq__question,
  .faq__answer {
    gap: 1.8rem; /* アイコンとテキスト間の余白(横幅)を少し狭める */
  }
  .faq__question-text {
    font-size: 1.8rem; 
  }
}

/* スマホ表示 (767px以下) */
@media (max-width: 767px) {
  .faq {
    padding: 5rem 0; /* タブレットよりもさらに少し狭める */
  }
  .faq__inner {
    padding: 0 5%; 
  }
  .faq__header-title {
    margin-bottom: 3rem; /* よくある質問の下の余白をさらに少し狭める */
  }
  .faq__list {
    gap: 2rem;
  }
  .faq__item {
    padding: 3rem 2.4rem;
    gap: 2rem;
  }
  .faq__question,
  .faq__answer {
    gap: 1.6rem; /* スマホ用にさらに狭める */
  }
  .faq__icon {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.6rem;
  }
  .faq__question-text {
    font-size: 1.6rem;
    padding-top: 0.4rem;
  }
  .faq__answer-text {
    font-size: 1.4rem;
    padding-top: 0.2rem;
  }
}