/* PF FAQ Theme
 * style.css は zcli/Zendesk で Curlybars 処理されない前提でプレーンCSSにする。
 * ここでは Figma「郵政 Design」トークンの既定値を定義し、
 * 管理UIの設定値は document_head.hbs のインライン <style>（テンプレートなので Curlybars 展開される）で上書きする。
 * 参照デザイン: 郵政 Design / node 2778-81110「07.その他/よくある質問」 */

:root {
  --color-brand: #0b2a3a;
  --color-brand-contrast: #fdfdfd;
  --color-service-accent: #cc0000;
  --color-text: #0b2a3a;
  --color-text-muted: #6e828b;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-border: #d7e0e4;
  --color-divider: rgba(11, 42, 58, 0.12);
  --color-link: #0063be;
  --font-family: 'Noto Sans JP', 'Hiragino Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 640px;
  --radius: 12px;
  --page-padding: 24px;
  /* elevationShadow/Lv1（drop + inner）: カテゴリチップ */
  --shadow-lv1: 2px 3px 9px rgba(11, 42, 58, 0.11), inset 0 -1px 1px rgba(11, 42, 58, 0.05);
  /* Shadow-Common/Level1: ヘッダー帯の下端 */
  --shadow-header: 0 2px 4px rgba(11, 42, 58, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-link);
}

/* --- FAQ ページ --------------------------------------------------------- */

.faq-page__inner,
.page__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--page-padding);
}

/* 見出し〜カテゴリチップを上部に固定する帯。
 * 影は Shadow-Common/Level1。clip-path で下方向だけに出し、左右へ回り込ませない。 */
.faq-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
  clip-path: inset(0 0 -8px 0);
}

/* Figma HomeHeader 相当。上端に 4px のアクセントストロークを引く。
 * 左端はカテゴリチップ（.faq-app__chips の padding: 16px）と縦ラインを揃える。 */
.faq-page__service {
  border-top: 4px solid var(--color-service-accent);
  background: var(--color-surface);
  min-height: 52px;
  padding: 6px 0;
  display: flex;
  align-items: center;
}

/* 左端をカテゴリチップと揃えるため、.faq-app__chips と同じ最大幅＋16px パディングにする */
.faq-page__service-title {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

/* Figma AppBar 相当。画面幅いっぱいの帯＋上下線、タイトルは中央揃え。 */
.faq-page__head {
  padding: 6px var(--page-padding);
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.faq-page__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.faq-page__lead {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* --- カテゴリチップ（横スクロール） -------------------------------------
 * Figma の SubTab は画面幅いっぱいの帯（内側 padding 16px）で、
 * チップが画面幅を超えて右に続く＝横スクロール前提。
 * 本文の左右余白の外側まで届くよう負マージンでフルブリードにする。 */

.faq-app__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px;
  overflow-x: auto;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.faq-app__chips::-webkit-scrollbar {
  display: none;
}

.faq-chip {
  flex: 0 0 auto;
  appearance: none;
  white-space: nowrap;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 12px 16px;
  border-radius: 52px;
  box-shadow: var(--shadow-lv1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.012em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.faq-chip[aria-selected='true'] {
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-weight: 600;
}

/* --- カテゴリグループ / アコーディオンカード --------------------------- */

.faq-group {
  margin-bottom: 24px;
}

.faq-group__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.faq-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}

/* deep-link のスクロール先が固定ヘッダーに隠れないようにする
 * （--faq-header-height は script.js が実測値を入れる） */
.faq-item {
  scroll-margin-top: calc(var(--faq-header-height, 180px) + 8px);
}

/* 区切り線はカード内側（padding の内寸）に引く */
.faq-item + .faq-item:not([hidden]) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}

/* 絞り込みで非表示になった項目が余分な区切り線を残さないように */
.faq-item[hidden] {
  display: none;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.faq-item__label {
  flex: 0 0 auto;
}

.faq-item__question-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* シェブロン（Figma: keyboard_arrow_right を回転して下向き／展開時に上向き） */
.faq-item__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z' fill='%236e828b'/%3E%3C/svg%3E")
    no-repeat center / 24px 24px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(-90deg);
}

.faq-item__answer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 20px;
}

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

.faq-item__answer-label {
  flex: 0 0 18px;
  width: 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* --- 記事本文 ----------------------------------------------------------- */

.article-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body > *:last-child {
  margin-bottom: 0;
}

.article-body img {
  max-width: 100%;
  height: auto;
}

.article-body a {
  color: var(--color-link);
  font-weight: 700;
  word-break: break-word;
}

/* 外部リンクは Figma に合わせて open_in_new アイコン＋テキストのみ下線 */
.article-body a.is-external {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  text-decoration: none;
}

/* 折り返しても1行目にアイコンが並ぶよう、行の中心へ寄せる（16px × 1.6 の行box） */
.article-body a.is-external::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H19V12H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z' fill='%230063be'/%3E%3C/svg%3E")
    no-repeat center / 20px 20px;
}

/* 下線はテキスト側だけ（アイコンには引かない）。折り返し時も各行に引く */
.article-body a.is-external .article-body__link-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body table {
  max-width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* --- 状態表示 ----------------------------------------------------------- */

.faq-app__loading,
.faq-app__empty,
.faq-app__error,
.faq-app__noscript,
.page__empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px 0;
}

.faq-app__error {
  color: #b91c1c;
}

/* --- 汎用ページ（category / section / article 等） ---------------------- */

.page__title {
  margin: 0 0 16px;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  border-bottom: 1px solid var(--color-divider);
}

.link-list a {
  display: block;
  padding: 14px 4px;
  text-decoration: none;
}