/*
 * faq.css — ヨガウェア販売サポート｜よくあるご質問ページ
 * クラスプレフィックス: fq-
 * カラーテーマ: くすみセージ・オリーブ・グレーベージュ（リラックス）
 * sales-support-info.css（ss-クラス）と同テイスト
 */

/* ==========================================================================
   CSS変数定義（.fq-wrap スコープ）
   ========================================================================== */
.fq-wrap {
  --fq-primary:      #a5a492; /* サブカラー：くすみセージ */
  --fq-primary-dark: #585d3d; /* アクセント：ダークオリーブ */
  --fq-gold:         #B8875A; /* ゴールド */
  --fq-bg-alt:       #e4e5d6; /* メインカラー：淡いセージグレー */
  --fq-dark:         #585d3d; /* アクセント：ダークオリーブ */
  --fq-text:         #585d3d; /* 本文テキスト：アクセント（ダークオリーブ） */
  --fq-border:       #c8c9b5; /* ボーダー（くすみセージ淡） */
  --fq-white:        #ffffff;
  --fq-shadow:       rgba(88, 93, 61, 0.08);

  /* タイポグラフィ */
  --fq-font:         "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --fq-radius:       8px;

  /* レイアウト */
  overflow-x: clip; /* sticky等への影響を避けるためclipを使用 */
  font-family: var(--fq-font);
  color: var(--fq-text);
  line-height: 1.8;
  background: #eae9e6; /* ベースカラー（ページ全体の背景） */
}

/* ==========================================================================
   コンテナ（最大幅860px・中央寄せ）
   ========================================================================== */
.fq-container {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
   ヒーローセクション（セージグリーン背景・白文字）
   ========================================================================== */
.fq-hero {
  background-color: var(--fq-primary);
  background-image: linear-gradient(135deg, var(--fq-primary) 0%, var(--fq-primary-dark) 100%);
  color: var(--fq-white);
  padding: 64px 0 56px;
  text-align: center;
}

/* サービス名ラベル */
.fq-label {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  color: var(--fq-white);
  border-radius: 20px;
  padding: 4px 16px;
  margin-bottom: 16px !important;
}

/* ページタイトル */
.fq-h1 {
  font-size: 2rem !important;
  font-weight: 700;
  color: var(--fq-white) !important;
  margin: 0 0 16px !important;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* リードテキスト */
.fq-lead {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 !important;
}

/* ==========================================================================
   カテゴリナビゲーション（クリーム背景・横並びボタン型）
   ========================================================================== */
.fq-nav {
  background: var(--fq-bg-alt);
  border-bottom: 1px solid var(--fq-border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.fq-nav__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.fq-nav__list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ナビボタン型リンク */
.fq-nav__list a {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fq-primary-dark) !important;
  background: var(--fq-white);
  border: 1.5px solid var(--fq-primary);
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.fq-nav__list a:hover {
  background: var(--fq-primary);
  color: var(--fq-white) !important;
}

/* ==========================================================================
   FAQセクション（白 / クリーム交互）
   ========================================================================== */
.fq-section {
  background: var(--fq-white);
  padding: 56px 0;
}

/* クリーム背景（偶数カテゴリ）*/
.fq-section--alt {
  background: var(--fq-bg-alt);
}

/* ==========================================================================
   カテゴリ見出し h2（左にセージグリーンのボーダー）
   ========================================================================== */
.fq-cat {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: var(--fq-dark) !important;
  border-left: 4px solid var(--fq-primary);
  padding: 8px 0 8px 16px !important;
  margin: 0 0 28px !important;
  line-height: 1.5;
}

/* ==========================================================================
   アコーディオンアイテム（details / summary）
   ========================================================================== */

/* カード型 details */
.fq-item {
  background: var(--fq-white);
  border: 1.5px solid var(--fq-border);
  border-radius: var(--fq-radius);
  margin-bottom: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px var(--fq-shadow);
  transition: box-shadow 0.2s;
}

.fq-item:last-child {
  margin-bottom: 0 !important;
}

/* open時にシャドウ強調 */
.fq-item[open] {
  box-shadow: 0 4px 14px var(--fq-shadow);
  border-color: var(--fq-primary);
}

/* ==========================================================================
   質問行（summary）— Qマーク・矢印アイコン
   ========================================================================== */
.fq-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--fq-dark);
  padding: 18px 20px;
  cursor: pointer;
  list-style: none; /* デフォルト三角を非表示 */
  user-select: none;
  line-height: 1.6;
  transition: background 0.15s;
}

/* Firefoxのデフォルト三角を消す */
.fq-q::-webkit-details-marker {
  display: none;
}

/* Qマーク（セージグリーンのアイコン） */
.fq-q::before {
  content: "Q";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fq-primary);
  color: var(--fq-white);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 1px;
}

/* 右側の▼矢印 */
.fq-q::after {
  content: "▼";
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--fq-primary);
  transition: transform 0.25s;
  padding-left: 12px;
  padding-top: 4px;
}

/* open時に矢印を▲に切り替え */
details[open] .fq-q::after,
.fq-item[open] > .fq-q::after {
  content: "▲";
}

/* hover時の背景 */
.fq-q:hover {
  background: rgba(107, 155, 122, 0.06);
}

/* ==========================================================================
   回答エリア（.fq-a）— 左ボーダー付き
   ========================================================================== */
.fq-a {
  padding: 0 20px 20px 56px; /* 左はQマーク幅に合わせてインデント */
  border-top: 1px solid var(--fq-border);
  /* アニメーション：opacityとpadding-topで対応（max-heightは使わない） */
  opacity: 0;
  padding-top: 0;
  transition: opacity 0.25s ease, padding-top 0.25s ease;
}

/* open時にフェードイン */
details[open] .fq-a,
.fq-item[open] > .fq-a {
  opacity: 1;
  padding-top: 16px;
}

/* 回答テキスト */
.fq-a p {
  font-size: 0.93rem;
  color: var(--fq-text);
  margin: 0 0 12px !important;
  line-height: 1.85;
}

.fq-a p:last-child {
  margin-bottom: 0 !important;
}

/* 回答内リスト */
.fq-a ul,
.fq-a ol {
  margin: 8px 0 12px 1.2em !important;
  padding: 0;
  font-size: 0.93rem;
}

.fq-a li {
  margin-bottom: 6px !important;
  line-height: 1.7;
}

/* 回答内リンク */
.fq-a a {
  color: var(--fq-gold) !important;
  text-decoration: underline;
  word-break: break-all;
}

.fq-a a:hover {
  color: var(--fq-primary-dark) !important;
}

/* ==========================================================================
   CTAブロック（ダークグリーン背景・ゴールドボタン）
   ========================================================================== */
.fq-cta {
  background: var(--fq-dark);
  padding: 56px 0;
  text-align: center;
}

.fq-cta__text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px !important;
  letter-spacing: 0.04em;
}

/* ゴールドボタン */
.fq-cta__btn {
  display: inline-block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--fq-dark) !important;
  background: var(--fq-gold);
  border-radius: 4px;
  padding: 14px 40px;
  text-decoration: none !important;
  letter-spacing: 0.06em;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fq-cta__btn:hover {
  background: #a07040; /* ゴールドを少し暗く */
  transform: translateY(-1px);
  color: var(--fq-white) !important;
}

/* ==========================================================================
   WordPressデフォルトmarginの上書き
   ========================================================================== */
.fq-wrap h1,
.fq-wrap h2,
.fq-wrap h3,
.fq-wrap p,
.fq-wrap ul,
.fq-wrap ol {
  margin-top: 0 !important;
}

/* details要素のWPデフォルトスタイルリセット */
.fq-wrap details {
  display: block;
}

/* ==========================================================================
   レスポンシブ対応（モバイル 600px以下）
   ========================================================================== */
@media screen and (max-width: 600px) {

  /* ヒーロー */
  .fq-hero {
    padding: 44px 0 36px;
  }

  .fq-h1 {
    font-size: 1.5rem !important;
  }

  .fq-lead {
    font-size: 0.88rem;
  }

  /* ナビ */
  .fq-nav {
    padding: 14px 0;
    position: static; /* モバイルではstickyを解除 */
  }

  .fq-nav__list {
    gap: 6px;
  }

  .fq-nav__list a {
    font-size: 0.77rem;
    padding: 5px 12px;
  }

  /* セクション */
  .fq-section {
    padding: 40px 0;
  }

  .fq-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* カテゴリ見出し */
  .fq-cat {
    font-size: 1.05rem !important;
  }

  /* 質問行 */
  .fq-q {
    font-size: 0.9rem;
    padding: 14px 16px;
  }

  /* 回答エリア */
  .fq-a {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }

  .fq-a p,
  .fq-a ul,
  .fq-a ol {
    font-size: 0.88rem;
  }

  /* CTA */
  .fq-cta {
    padding: 44px 0;
  }

  .fq-cta__btn {
    font-size: 0.9rem;
    padding: 12px 28px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    text-align: center;
  }
}