/* =========================================================
   ひかり訪問看護 — よくある質問ページスタイル
   ========================================================= */

/* ─── Arkhe コンテナ無効化（全幅レイアウト） ─── */
.page-template-page-faq .l-content__body {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* ─── フェードアップアニメーション ─── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease }
.fade-up.is-visible { opacity: 1; transform: none }

/* ─── カテゴリグリッド ─── */
.fq-cats {
  padding: clamp(48px, 6vw, 72px) var(--gutter);
  background: var(--cream);
}
.fq-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fq-cats__btn {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid rgba(139,111,71,.1); border-radius: 12px;
  text-decoration: none;
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.fq-cats__btn:hover { background: var(--green-50); border-color: rgba(139,111,71,.2); box-shadow: 0 6px 20px -6px rgba(31,77,58,.1) }
.fq-cats__num {
  font-family: var(--latin); font-style: italic;
  font-size: 11px; letter-spacing: .22em; color: var(--brown-500);
}
.fq-cats__label {
  font-family: var(--serif); font-size: 15px; font-weight: 500;
  color: var(--green-900); letter-spacing: .04em; line-height: 1.6;
}
.fq-cats__en {
  font-family: var(--latin); font-style: italic;
  font-size: 10px; letter-spacing: .2em; color: var(--brown-400);
}

/* ─── FAQ セクション ─── */
.fq-section { padding: clamp(64px, 9vw, 120px) var(--gutter) }
.fq-section--paper { background: var(--paper) }
.fq-section--cream { background: var(--cream) }

/* ─── アコーディオン ─── */
.fq-list { display: flex; flex-direction: column; gap: 10px }

.fq-item {
  border: 1px solid rgba(139,111,71,.12);
  border-radius: 10px; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.fq-item:hover { border-color: rgba(42,107,81,.3) }
.fq-item.open  {
  border-color: rgba(42,107,81,.35);
  box-shadow: 0 6px 24px -6px rgba(31,77,58,.12);
}

/* セクション背景に合わせてカード背景を反転させる */
.fq-section--cream .fq-item { background: var(--paper) }
.fq-section--paper .fq-item { background: var(--cream) }

.fq-q {
  display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px;
  cursor: pointer; user-select: none;
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink); line-height: 1.7;
  transition: color .2s;
}
.fq-q:hover { color: var(--green-700) }
.fq-q-icon {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--latin); font-size: 14px; font-weight: 500;
  margin-top: 2px; letter-spacing: 0;
}
.fq-q-text { flex: 1 }
.fq-q-arrow {
  flex: 0 0 20px; width: 20px; height: 20px;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg); margin-top: 8px; margin-right: 4px;
  transition: transform .3s ease;
}
.fq-item.open .fq-q-arrow { transform: rotate(-135deg); margin-top: 14px }

.fq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.fq-item.open .fq-a { grid-template-rows: 1fr }

/* 回答エリア — カードの左右パディングに揃え、アイコン幅分だけインデント */
.fq-a-inner { overflow: hidden; padding: 0 24px 0 74px }
.fq-item.open .fq-a-inner { padding-bottom: 24px }
.fq-a-inner p {
  font-size: 15px; line-height: 2.1; color: var(--ink-2);
  letter-spacing: .04em; margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ─── レスポンシブ ─── */
@media (max-width: 900px) {
  .fq-cats__grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 680px) {
  .fq-cats__grid { grid-template-columns: 1fr }
  .fq-q { font-size: 15px; padding: 16px 16px }
  .fq-a-inner { padding: 0 16px 0 58px }
  .fq-item.open .fq-a-inner { padding-bottom: 20px }
}