@charset "utf-8";
/* =========================================
   よくあるご質問（FAQ）
   株式会社スリーエス

   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま（増やしていません）
   ・幅は .content-inner（max-width 1200px ＋ 左右40px）
   ・色は :root の既存カラーのみを使用（新規カラーなし）
   ・開閉は <details> のブラウザ標準動作。JSは使っていません
========================================= */

.faq-section {
  /* --- 表示アニメーション（他セクションと同じ仕組み） ---
       0.00s  大見出し … 1文字ずつ上がる
       0.45s  小見出し … 左からワイプ
       0.95s  質問     … 上から順に出る
  ------------------------------------------------------- */
  --faq-lead-delay: 0.45s;
  --faq-items-delay: 0.95s;

  --faq-title: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); /* 他セクションの見出しと同値 */
  --faq-lead-size: calc(var(--faq-title) * 0.5);
  --faq-group-size: calc(var(--faq-title) * 0.55);
  --faq-q-size: calc(var(--faq-title) * 0.42);
  --faq-radius: 10px;
  --faq-mark: 32px; /* Q / A の丸バッジ */

  background: var(--color-surface);
}

/* =========================================
   見出し
========================================= */
.faq-section__head {
  margin-bottom: var(--space-40);
  text-align: center;
}

.faq-section__title {
  color: var(--color-teal);
  font-size: var(--faq-title);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.faq-section__lead {
  --wipe-delay: var(--faq-lead-delay);
  margin-top: var(--space-10);
  color: var(--color-text-strong);
  font-size: var(--faq-lead-size);
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
  line-break: strict;
}

/* =========================================
   目次（カテゴリーへのページ内リンク）
========================================= */
.faq-index {
  --deal-base: var(--faq-lead-delay);
  margin-bottom: var(--space-40);
}

.faq-index__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}

.faq-index__item {
  min-width: 0;
}

.faq-index__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  height: 100%;
  padding: 12px var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--faq-radius);
  background: var(--color-white);
  color: var(--color-text-strong);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
  line-break: strict;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.faq-index__link:hover,
.faq-index__link:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal);
  transform: translateY(-2px);
}

.faq-index__num {
  flex: 0 0 auto;
  color: var(--color-teal);
  font-family: var(--font-en), var(--font-base);
  font-size: 1.125em;
  letter-spacing: 0.04em;
}

.faq-index__text {
  min-width: 0;
}

/* =========================================
   カテゴリーのまとまり
========================================= */
.faq-section__body {
  --deal-base: var(--faq-items-delay);
}

.faq-group + .faq-group {
  margin-top: var(--space-60);
}

/*
 * 目次から飛んだときに、固定ヘッダーの下に見出しが隠れないようにする。
 * --header-h は header.css がブレイクポイントごとに設定しています。
 */
.faq-group {
  scroll-margin-top: calc(var(--header-h, 100px) + var(--space-20));
}

.faq-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  margin-bottom: var(--space-20);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-strong);
  font-size: var(--faq-group-size);
  font-weight: 900;
  line-height: 1.4;
  word-break: auto-phrase;
  line-break: strict;
}

.faq-group__num {
  flex: 0 0 auto;
  color: var(--color-teal);
  font-family: var(--font-en), var(--font-base);
  letter-spacing: 0.04em;
}

.faq-group__text {
  min-width: 0;
}

/* =========================================
   質問と回答（<details> / <summary>）
========================================= */
.faq-list {
  display: grid;
  gap: var(--space-10);
}

.faq-item {
  border-radius: var(--faq-radius);
  background: var(--color-white);
}

/* --- 質問（クリックで開閉する行） --- */
.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20);
  color: var(--color-text-strong);
  font-size: var(--faq-q-size);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  word-break: auto-phrase;
  line-break: strict;
  transition: color 0.3s ease;
  /* ブラウザ標準の三角マーカーを消す（自前の＋アイコンを使うため） */
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover {
  color: var(--color-teal);
}

/* キーボード操作時のフォーカスを分かるようにする */
.faq-item__q:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: -2px;
  border-radius: var(--faq-radius);
}

.faq-item__q-text {
  min-width: 0;
  flex: 1 1 auto;
}

/* --- Q / A の丸バッジ --- */
.faq-item__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--faq-mark);
  height: var(--faq-mark);
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-en), var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.faq-item__mark--a {
  background: var(--color-teal);
}

/* --- ＋アイコン（開くと×になる） --- */
.faq-item__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--color-teal);
  font-size: 0.875rem;
  line-height: 1;
}

.faq-item__icon i {
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__icon i {
  transform: rotate(45deg);
}

/* --- 回答 --- */
.faq-item__a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  padding: 0 var(--space-20) var(--space-20);
}

.faq-item__a-text {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--color-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  word-break: auto-phrase;
  line-break: strict;
}

/* 回答は本文なので、段落の間だけ余白を付ける（グローバルには触らない） */
.faq-item__a-text > * + * {
  margin-top: var(--space-10);
}

.faq-item__a-text a {
  color: var(--color-teal);
  text-decoration: underline;
}

/* =========================================
   もっと見るボタン
========================================= */
.faq-section__action {
  margin-top: var(--space-40);
  text-align: center;
}

/* =========================================
   1439px以下：small-pc
========================================= */
@media screen and (max-width: 1439px) {
  .faq-section__head {
    margin-bottom: var(--space-30);
  }

  .faq-index {
    margin-bottom: var(--space-30);
  }
}

/* =========================================
   1199px以下：タブレット
   目次は2列にする（3列だと1マスが細く、カテゴリー名が折れるため）
========================================= */
@media screen and (max-width: 1199px) {
  .faq-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-group + .faq-group {
    margin-top: var(--space-40);
  }
}

/* =========================================
   700px以下：スマートフォン
========================================= */
@media screen and (max-width: 700px) {
  .faq-section {
    --faq-mark: 28px;
  }

  .faq-index__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-item__q {
    gap: var(--space-10);
    padding: var(--space-10) var(--space-20);
  }

  .faq-item__a {
    gap: var(--space-10);
    padding: 0 var(--space-20) var(--space-20);
  }

  .faq-section__action .ts-button {
    margin-inline: auto;
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .faq-section {
    --faq-mark: 24px;
  }

  .faq-item__q,
  .faq-item__a {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* =========================================
   カテゴリーの絞り込み（固定ページのFAQ一覧）

   ボタンの見た目は common.css の .ts-chip です
   （導入実績の絞り込みと共通。ここには書きません）。
========================================= */
.faq-filter {
  margin-bottom: var(--space-40);
}

.faq-filter__label {
  margin-bottom: var(--space-10);
  color: var(--color-text-strong);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: 1.5;
}

.faq-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  min-width: 0;
}

.faq-filter__empty {
  padding: var(--space-40) var(--space-20);
  color: var(--color-text-mute);
  text-align: center;
}

/* =========================================
   700px以下：スマートフォン
========================================= */
@media screen and (max-width: 700px) {
  .faq-filter {
    margin-bottom: var(--space-30);
  }
}

/* =========================================
   固定ページの本文に差し込んだとき（[threes_faq]）

   .faq-section のクラスは、中で使う文字サイズなどの
   設定を持たせるために付けています。
   本文の中では背景色だけ外して、白いまま読めるようにします。
========================================= */
.page-body__content .faq-section {
  background: transparent;
}