@charset "UTF-8";
/*---------------------------------------------------------
FAQ 固定ページ（page-faq.php）専用スタイル

配色は既存 LP に合わせる:
  メイン赤 #E83428 / テキスト #3B4043 / 薄ピンク #FFF0EF
ブレイクポイントもテーマ既存の 780px に合わせている。
---------------------------------------------------------*/

/* テーマ共通CSSに全体的な box-sizing 指定がないため、このページ内だけ border-box に揃える。
   これがないと width:100% + padding のボタンがカード幅からはみ出す。 */
.faq-page,
.faq-page *,
.faq-page *::before,
.faq-page *::after {
  box-sizing: border-box;
}

.faq-page {
  color: #3B4043;
  background-color: #fff;
  padding-bottom: 80px;
}

/*----------------------------------
FV

画像の配置（.mainView / .mainView img）は interview.css の定義に任せ、
その上に載せるタイトルだけ TOP の導入事例セクション（.h1_bgimg）と同じ
「赤帯なし・白文字＋影＋字間広め＋英字サブタイトル」のデザインに差し替える。

interview.css の .mainView-text p / h1（赤帯 #E83428 + opacity）を打ち消す必要が
あるため、.faq-page を前置してこちらが後勝ちになるようにしている。
字間は h1_bgimg の px 指定（見出し 30px に 6px / 英字 14px に 5px）を em に
置き換え、文字サイズを clamp で縮めても比率が崩れないようにした。
----------------------------------*/

/* FAQ の FV 画像は中央が明るい（白い容器と目玉焼き）ため、白文字を影だけで
   載せると読めない。導入事例と同じ白文字デザインを保ったまま可読性を確保する
   ために、中央にだけ薄い暗幕を敷く。 */
.faq-page .mainView::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 78%);
  pointer-events: none;
}

.faq-page .mainView-text {
  /* 導入事例アーカイブは赤帯の幅を 22% に固定しているが、帯をなくすので幅の制限は外す */
  width: 90%;
  z-index: 1;
}

.faq-page .mainView-text h1,
.faq-page .mainView-text .mainView-text__en {
  background-color: transparent;
  opacity: 1;
  padding: 0;
  margin: 0;
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.faq-page .mainView-text h1 {
  font-size: clamp(18px, 2.4vw, 30px);
  letter-spacing: 0.2em;
  /* letter-spacing は最後の1文字の右にも入るため、同量の text-indent で光学的に中央へ戻す */
  text-indent: 0.2em;
  margin-bottom: clamp(10px, 1.8vw, 27px);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.faq-page .mainView-text .mainView-text__en {
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/*----------------------------------
共通ラッパー
----------------------------------*/

.faq-wrap {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/*----------------------------------
パンくずリスト
----------------------------------*/

.faq-breadcrumb {
  margin: 32px 0 0;
  font-size: 13px;
  color: #707070;
}

.faq-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-breadcrumb li {
  list-style: none;
}

.faq-breadcrumb li + li::before {
  content: ">";
  margin: 0 0.6em;
  color: #ABABAB;
}

.faq-breadcrumb a {
  color: #707070;
  text-decoration: none;
}

.faq-breadcrumb a:hover {
  text-decoration: underline;
}

/*----------------------------------
リード文
----------------------------------*/

.faq-head {
  margin-top: 40px;
  text-align: center;
}

.faq-head__lead {
  margin: 0 auto;
  max-width: 760px;
  font-size: 15px;
  line-height: 2;
  color: #707070;
}

.faq-head__lead a {
  color: #E83428;
  text-decoration: underline;
}

/*----------------------------------
カテゴリー選択ボタン（ピル型）
----------------------------------*/

.faq-catnav {
  margin-top: 44px;
}

/* 6カテゴリーを上3・下3の2段に固定する。
   列幅を auto にしているのでボタン自体は文字数なりの幅を保つ。 */
.faq-catnav ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-catnav li {
  list-style: none;
}

.faq-catnav__btn {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid #3B4043;
  border-radius: 999px;
  background-color: #fff;
  color: #3B4043;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-catnav__btn:hover,
.faq-catnav__btn:focus-visible {
  background-color: #E83428;
  border-color: #E83428;
  color: #fff;
}

/*----------------------------------
カテゴリー見出し
----------------------------------*/

.faq-category {
  margin-top: 72px;
  /* 固定ヘッダー(約75px)に見出しが隠れないようにする */
  scroll-margin-top: 100px;
}

.faq-category__title {
  margin: 0 0 28px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: left;
}

/*----------------------------------
Q&A アコーディオンカード
----------------------------------*/

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-card {
  background-color: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.faq-card__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 質問行（トグルボタン） */
.faq-card__q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 24px 28px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #3B4043;
  text-align: left;
  cursor: pointer;
}

.faq-card__q:focus-visible {
  outline: 2px solid #E83428;
  outline-offset: -2px;
}

.faq-card__q .faq-card__text {
  flex: 1;
}

/* 左側の Q / A マーク */
.faq-card__mark {
  flex-shrink: 0;
  width: 1.4em;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #ABABAB;
  text-align: center;
}

.faq-card__mark--a {
  color: #E83428;
}

/* 右側の丸枠 +/− トグルアイコン */
.faq-card__toggle {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid #E83428;
  border-radius: 999px;
}

.faq-card__toggle::before,
.faq-card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background-color: #E83428;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 縦棒。開いている間は消して「−」にする */
.faq-card__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-card__q[aria-expanded="true"] .faq-card__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* 回答パネル */
.faq-card__panel {
  padding: 0 28px;
  overflow: hidden;
}

/* JS 無効時は hidden を無視して全問開いた状態で読めるようにする。
   JS が有効なときだけ .js が付き、通常のアコーディオン挙動になる（初期表示のちらつきなし）。 */
.faq-card__panel[hidden] {
  display: block;
}

.js .faq-card__panel[hidden] {
  display: none;
}

.faq-card__a {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0 26px;
  border-top: 1px solid #E8E8E8;
}

.faq-card__a .faq-card__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.9;
  color: #707070;
}

.faq-card__a a {
  color: #E83428;
  text-decoration: underline;
}

/* JS 無効時はトグルアイコンを出さない（操作できないため） */
html:not(.js) .faq-card__toggle {
  display: none;
}

/*----------------------------------
SP（テーマ既存のブレイクポイントに合わせる）
----------------------------------*/

@media screen and (max-width: 780px) {
  .faq-page {
    padding-bottom: 56px;
  }

  .faq-wrap {
    width: 88%;
  }

  .faq-breadcrumb {
    margin-top: 24px;
    font-size: 12px;
  }

  .faq-head {
    margin-top: 28px;
  }

  .faq-head__lead {
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }

  .faq-catnav {
    margin-top: 32px;
  }

  /* SP幅では3列だと横に収まらないため、grid をやめて自然な折り返しに戻す */
  .faq-catnav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .faq-catnav__btn {
    padding: 10px 18px;
    font-size: 13px;
  }

  .faq-category {
    margin-top: 48px;
    scroll-margin-top: 90px;
  }

  .faq-category__title {
    margin-bottom: 20px;
    font-size: 21px;
  }

  .faq-list {
    gap: 12px;
  }

  .faq-card__q {
    gap: 10px;
    padding: 18px 16px;
    font-size: 15px;
  }

  .faq-card__mark {
    font-size: 18px;
  }

  .faq-card__toggle {
    width: 28px;
    height: 28px;
  }

  .faq-card__toggle::before,
  .faq-card__toggle::after {
    width: 12px;
  }

  .faq-card__panel {
    padding: 0 16px;
  }

  .faq-card__a {
    gap: 10px;
    padding: 16px 0 20px;
  }

  .faq-card__a .faq-card__text {
    font-size: 14px;
    line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-card__toggle::before,
  .faq-card__toggle::after,
  .faq-catnav__btn {
    transition: none;
  }
}