@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル
   よくあるご質問（FAQ）ショートコードの出力用CSS
   Figma: SP 129:27424（タグ 129:27432 ／ Q&A 129:27440 ／ もっと見る 129:27480）
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が「FAQを置いているページ」のときだけ、
     renewal/css/common.css の後に読み込む。
     対象ページは header.php の is_page() 条件を参照
     （現状：service/school-children ／ service/nursery-school）。

   ■ 名前空間
     出力元は renewal/faq.php のショートコード [educare_faq] で、
     複数ページで共通に使う。そのためページ固有の接頭辞（rnw-as- /
     rnw-ns-）ではなく `rnw-faq-` を使っている。
     配置される場所は各ページの本文ラッパー（.rnw-as / .rnw-ns）の内側なので、
     見出し・リストの既定マージン打ち消しはそちらのリセットが効く。

   ■ フォント
     Figmaの「Q.」「A.」は Rounded M+ 1c bold、質問・回答は MOBO-SemiBold。
     どちらもWeb配信が未確定のため Zen Kaku Gothic New にフォールバックする
     （--rnw-font-jp / --rnw-font-educare-title。定義は common.css）。

   ■ アイコン
     ・開閉（＋／－）は1pxの直線2本だけなので、画像を持たずCSSで描いている
       （Figma 129:27453 / 129:27446 とも stroke-width 1 の直線）。
     ・「もっと見る」の丸矢印は既存 img/icon_arrow_circle.svg を流用。
       Figmaのアセットは線の色が違うだけで、円・シェブロンのパスは
       完全一致することを確認済み（maskで描くので色はCSSから渡す）。

   ■ JS
     renewal/js/faq.js（タブ絞り込みと「もっと見る」）。
     アコーディオンの開閉は <details>/<summary> に任せていてJSは触らない。
   ===================================================================== */

.rnw-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* Figma実測 タブ → Q&A → もっと見る */
  width: 100%;
}

.rnw-faq *,
.rnw-faq *::before,
.rnw-faq *::after { box-sizing: border-box; }

/* JSが hidden を付け外しして絞り込む。display 指定に負けないよう明示する。 */
.rnw-faq [hidden] { display: none !important; }


/* =====================================================================
   1. カテゴリータブ（Figma 129:27432）
   ---------------------------------------------------------------------
   タブは登録カテゴリーから動的に生成される（renewal/faq.php）。
   カテゴリー上限は5個＋「すべて」＝6個の想定だが、
   flex-wrap なので6個以上になっても折り返すだけで崩れない。
   ===================================================================== */

.rnw-faq__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;  /* Figma実測 */
  width: 100%;
}

.rnw-faq__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 19.926px;  /* Figma実測 py12 ＋ 内側の px11.926 */
  border: 0.745px solid var(--rnw-main2);  /* Figma実測 */
  border-radius: 55.96px;
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);  /* Figma SP/button/small */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* 選択中（初期は「すべて」）。Figma 129:27433 */
.rnw-faq__tab.is-active {
  border-color: #FFFFFF;
  background-color: var(--rnw-main2);
  color: #FFFFFF;
}


/* =====================================================================
   2. Q&A（Figma 129:27440）
   ===================================================================== */

.rnw-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 1件ごとに下罫線。Figmaでは開いている項目だけQ行とA行の間にも罫線が入るので、
   その1本は details[open] > summary 側で足している。 */
.rnw-faq__item {
  border-bottom: 1px solid var(--rnw-text);
}

.rnw-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;       /* Figma実測 */
  padding: 20px 0; /* Figma実測 */
  cursor: pointer;
  list-style: none;  /* Firefox等の既定マーカーを消す */
}

.rnw-faq__q::-webkit-details-marker { display: none; }

/* 開いているときはQ行の下にも罫線（Figma 129:27442） */
.rnw-faq__details[open] > .rnw-faq__q {
  border-bottom: 1px solid var(--rnw-text);
}

/* 「Q.」「A.」。Figmaは Rounded M+ 1c bold 24px / line-height 36px。 */
.rnw-faq__mark {
  flex-shrink: 0;
  font-family: var(--rnw-font-jp);  /* Figma Rounded M+ 1c のフォールバック */
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;  /* Figma実測（倍率ではなく実数指定） */
  color: var(--rnw-text);
}

.rnw-faq__q-text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 開閉アイコン（Figma 129:27453 ＋ ／ 129:27446 －）。
   1pxの直線2本なので画像を持たずに描いている。開いたら縦線だけ消す。 */
.rnw-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 13px;   /* Figma実測 */
  height: 13px;
}

.rnw-faq__toggle::before,
.rnw-faq__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--rnw-text);
}

/* 横線 */
.rnw-faq__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
}

/* 縦線（開いたら消す＝マイナスになる） */
.rnw-faq__toggle::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
}

.rnw-faq__details[open] > .rnw-faq__q .rnw-faq__toggle::after {
  content: none;
}

/* 回答（Figma 129:27447）。左の40pxは「Q.」より1段下げるためのインデント。 */
.rnw-faq__a {
  display: flex;
  gap: 10px;                 /* Figma実測 */
  padding: 20px 0 20px 40px; /* Figma実測 上の20pxはQ行との間隔 */
}

.rnw-faq__a-text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 回答は wpautop() を通すので <p> で出る。段落間だけ余白を入れる。 */
.rnw-faq__a-text > p { margin: 0; }
.rnw-faq__a-text > p + p { margin-top: 1.8em; }

.rnw-faq__a-text a {
  color: var(--rnw-main);
  text-decoration: underline;
}


/* =====================================================================
   3. もっと見る（Figma 129:27480）
   ===================================================================== */

.rnw-faq__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 55px;        /* Figma実測 */
  padding: 16px 32px;  /* Figma実測 */
  border: 2px solid var(--rnw-main);
  border-radius: 65.96px;
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);  /* Figma SP/button/big */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* 丸矢印。アセットは下向きで書き出されているので -90度回して右向きにする
   （footer.php の .rnw-footer__search-arrow / 本文の施設検索カードと同じ扱い）。 */
.rnw-faq__more-icon {
  flex-shrink: 0;
  width: 22px;  /* Figma実測 */
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url('../img/icon_arrow_circle.svg');
          mask-image: url('../img/icon_arrow_circle.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: rotate(-90deg);
}