/** * faq.css * よくある質問（/faq/ ＝ page-faq.php）のカテゴリタブ＋ページ内検索専用スタイル。 * * 役割分担： * ・タブの帯／ピルの見た目 → components.css の .seg-tabbar / .seg-tab（共用・ここでは触らない）。 * ・アコーディオン1件の見た目 → components.css / global.css の .faq-*（共用・ここでは触らない）。 * ・このファイルが持つのは「検索ボックス・件数・結果ゼロ・パネルの表示制御」だけ。 * * プログレッシブエンハンスメント： * タブ／検索ボックスは既定 hidden（HTML 側の hidden 属性）。JS が有効になったら faq.js が * data-faq-enhanced を系へ付け、下の規則で表示する。JS 無効なら全パネルが縦に並んで見える。 */ /* ── JS 有効時だけタブ／検索を出す（PE） ── */ /* faq.js が表示制御を引き受けたら hidden 属性を外す（属性除去＝表示）。ここでは「JS 無効でうっかり表示されない」ことだけを保証すればよいので追加指定は最小限。 */ .faq-tabbar[hidden], .faq-search[hidden] { display: none; } /* タブ帯の下に余白（共用 .seg-tabbar は margin-bottom:0＝詰まって見えるため faq だけ上書き）。タブ直下にカテゴリ見出しが来る通常時も、検索ボックスが来る時も、この余白でゆとりを作る。 */ .faq-tabbar { margin-bottom: 30px; } /* タブ帯と検索ボックスの間（タブが無いページ＝1カテゴリ時は検索だけが上に来る）。 */ .faq-search { max-width: 640px; margin: 18px auto 4px; } /* タブの直後に検索ボックスが来るときは、タブの下余白(30px)が効くので検索側の上余白は詰める（合算で開きすぎ防止）。 */ .faq-tabbar + .faq-search { margin-top: 0; } .faq-search-field { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--faq-line, rgba(28, 28, 28, .14)); /* 旧 var(--line,…)はグローバルのLINE緑#04802fを拾う実バグ→ローカル名--faq-lineに改名（2026-07-09） */ border-radius: 999px; background: var(--warm-white, #fff); box-shadow: inset 0 1px 2px rgba(28, 28, 28, .05); transition: border-color var(--t), box-shadow var(--t); } .faq-search-field:focus-within { border-color: var(--gold, #c8a86a); box-shadow: 0 0 0 3px rgba(200, 168, 106, .18); } .faq-search-ico { font-size: .95rem; line-height: 1; opacity: .55; flex: 0 0 auto; } .faq-search-field input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--sans); font-size: 1rem; /* 16px＝iOS で focus 時にズームしない下限 */ color: var(--text, #1c1c1c); -webkit-appearance: none; appearance: none; } .faq-search-field input[type="search"]::placeholder { color: var(--warm-gray, #8a8278); opacity: 1; } /* ネイティブのクリア（×）は残す＝検索のリセットに使える。 */ .faq-search-count { margin: 8px 4px 0; min-height: 1.2em; /* 件数の出現でレイアウトが跳ねないよう高さを確保 */ font-family: var(--sans); font-size: .82rem; color: var(--warm-gray, #8a8278); letter-spacing: .02em; } /* ── パネル表示制御 ── JS 有効時：faq.js が現在カテゴリの .faq-panel だけ .is-active を残し、ほかを隠す。検索中：body[data-faq-searching] のとき全パネルを表示しヒット項目だけ残す。 */ .faq-panels[data-faq-enhanced] .faq-panel { display: none; } .faq-panels[data-faq-enhanced] .faq-panel.is-active { display: block; } /* data-faq-enhanced は page-faq.php が最初から出す（JS を待つと縮んで画面が跳ねるため）。よって JS 無効時の全件表示はここで戻す＝タブも検索も出ない環境では全カテゴリを縦に並べる。 html.no-js が付いたままになるのは JS が動かなかった時だけ（header.php の1行スクリプト）。 */ html.no-js .faq-panels[data-faq-enhanced] .faq-panel { display: block; } /* タブと検索窓も同じ理由で最初から出す（後から出すと下が押し下げられる）。JS が動かない環境ではどちらも操作できないので隠す。 */ html.no-js [data-faq-tabbar], html.no-js [data-faq-search] { display: none; } /* 検索中は全カテゴリを横断して見せる（タブ選択を一時オーバーライド）。このとき各カテゴリ見出しは「ヒットがある時だけ」出す（faq.js が .faq-panel--empty を付ける）。 */ .faq-panels[data-faq-searching] .faq-panel { display: block; } /* .faq-panel も重ねて詳細度を上げる＝上の .faq-panel.is-active に負けて、選択中タブのカテゴリがノーヒットのとき見出しだけ空で残っていた（2026-07-28 修正）。 */ .faq-panels[data-faq-searching] .faq-panel.faq-panel--empty { display: none; } /* 検索でヒットしなかった個別 FAQ は隠す。 */ .faq-item.faq-hit-hidden { display: none; } /* 結果ゼロ。 */ .faq-noresult { margin: 28px auto 0; max-width: 640px; text-align: center; font-family: var(--sans); font-size: .95rem; line-height: 1.9; color: var(--warm-gray, #8a8278); overflow-wrap: anywhere; /* 検索語をそのまま埋め込む（faq.js の noTermEl）＝長い貼り付けで横に伸びないよう折る */ } .faq-noresult[hidden] { display: none; } @media (min-width: 600px) { .faq-search { margin-top: 22px; } }