@charset "UTF-8";

/* Lusitana は「Q.」「A.」に使う。common.css は Zen Kaku Gothic New しか
   読み込んでいないため、この部品CSSで自前に読み込む
   （ページ側CSSの読み込み有無に依存させない）。 */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');

/* =====================================================================
   ポピンズ professional リニューアル
   よくあるご質問（部品CSS）
   Figma: 海外研修 214:106182 ／ 育児・介護コンサル 129:25828
   ---------------------------------------------------------------------
   ■ このファイルの位置づけ
     ショートコード [professional_faq] が吐くマークアップ専用のCSS。
     renewal/faq.php が「本文にショートコードがあるページだけ」に
     読み込ませる（ページ側の header.php に条件を足す必要はない）。

     FAQは1ページ固有の機能ではなく、海外研修・育児・介護コンサルの
     複数ページで共有する部品なので、ページCSS（renewal/css/pages/*.css）
     ではなくここに置いている。3ページ目以降も [professional_faq] を
     貼るだけで見た目とJSが揃う。

   ■ 命名
     クラスは `rnw-faq-` 接頭辞。ページ側の接頭辞（rnw-global- /
     rnw-care-）とは独立させている。
     セクション枠（背景・上下余白・見出しとの間隔）はページごとに違うため
     ページCSS側が持つ。ここが持つのはタグ行から下だけ。

   ■ 依存
     renewal/css/common.css の CSS変数（--rnw-main / --rnw-text /
     --rnw-white / --rnw-font-jp）と .rnw-btn / .rnw-icon を使う。
     common.css は全ページで読み込まれるので前提にしてよい。
   ===================================================================== */

/* ショートコードが吐く外枠。タグ行とQ&Aの間隔をここで持つ。 */
.rnw-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

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


/* =====================================================================
   1. カテゴリタグ（Figma 214:106184 / 129:25830）
   ---------------------------------------------------------------------
   ラベルは管理画面で登録したタームから動的生成するので、
   ここには文言を持たせない。
   「すべて」の有無はショートコードの all 属性で切り替わる。
   ===================================================================== */

.rnw-faq__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.rnw-faq__tag {
  padding: 12px 8px;
  border: 0.745px solid var(--rnw-main);
  border-radius: 55.96px;
  background-color: var(--rnw-white);
  color: var(--rnw-main);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-faq__tag > span { padding: 0 11.926px; }

.rnw-faq__tag[aria-selected="true"] {
  border-color: var(--rnw-white);
  background-color: var(--rnw-main);
  color: var(--rnw-white);
}


/* =====================================================================
   2. Q&A（Figma 214:106192 / 129:25833）
   ===================================================================== */

.rnw-faq__group[hidden] { display: none; }

.rnw-faq__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 11件目以降は「もっと見る」を押すまで隠す。JSが hidden を外す。 */
.rnw-faq__item {
  margin: 0;
  padding: 0;
}
.rnw-faq__item[hidden] { display: none; }

.rnw-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--rnw-text);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.rnw-faq__mark {
  flex-shrink: 0;
  color: var(--rnw-text);
  font-family: 'Lusitana', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

.rnw-faq__qtext {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

/* ±アイコン（Figma 214:106205 は 13×13 の十字、線幅1px、#444444）。
   開いている間は縦棒を消して「−」にする。 */
.rnw-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.rnw-faq__toggle::before,
.rnw-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--rnw-text);
  transform: translate(-50%, -50%);
}
.rnw-faq__toggle::before { width: 13px; height: 1px; }
.rnw-faq__toggle::after  { width: 1px; height: 13px; }

.rnw-faq__q[aria-expanded="true"] .rnw-faq__toggle::after { display: none; }

.rnw-faq__a {
  display: flex;
  gap: 10px;
  padding: 20px 0 20px 40px;
  border-bottom: 1px solid var(--rnw-text);
}
.rnw-faq__a[hidden] { display: none; }

.rnw-faq__atext {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}
.rnw-faq__atext > * { margin: 0; }
.rnw-faq__atext > *:not(:last-child) { margin-bottom: 1.8em; }


/* =====================================================================
   3.「もっと見る」（Figma 214:106232）
   ---------------------------------------------------------------------
   寸法・角丸・字送りは common.css の .rnw-btn を使い、
   ここでは白地・枠線の配色だけを足す。ページCSS側のボタン修飾クラスに
   依存させない（どのページに貼っても同じ見た目になるように）。
   ===================================================================== */

.rnw-faq__more {
  margin-top: 32px;
  border: 2px solid var(--rnw-main);
  background-color: var(--rnw-white);
  color: var(--rnw-main);
}
.rnw-faq__more .rnw-btn__icon { color: var(--rnw-main); }

/* 隠す件数が無くなったらボタン自体を消す */
.rnw-faq__more[hidden] { display: none; }


/* =====================================================================
   4. 記事が無いとき
   ===================================================================== */

.rnw-faq__empty {
  margin: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}