/* ============================================================================
   faq.html 専用スタイル
   v0.9.13j-fix119（2026-06-01）: inline <style> 外部 CSS 化（R4 案 X 4 ページ目、堅牢性最優先）
   読込順: cookie-consent → variables → base → style → home → page-hero → faq
   ============================================================================ */

/* faq.html 固有スタイル — pricing.html / about.html のトークン体系に準拠 */
/* TODO Phase B 05/16: assets/css/faq.css へ抽出 */

html { scroll-snap-type: none !important; }
section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
/* 2026-06-17 平田氏指示: hero を about と統一。about は body padding-top 指定なし＝共有 0 のため、旧 desktop/tablet 80px を撤去し全幅で 0 に揃える（hero のヘッダークリアは page-hero.css の padding-top:124px が担う）。mobile は元々 0 で不変 */

/* HERO + breadcrumb は assets/css/page-hero.css の共通テンプレートに統一（v0.9.13c 2026-05-06） */
/* faq 固有: container 幅 900px、lead 幅 720px / line-height 1.9 のみ上書き */
.faq-page-hero .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-page-hero .lead {
  max-width: 720px;
  line-height: 1.9;
}

/* セクション共通（pricing-section パターン準拠、v0.9.10c でスペース縮小＋装飾線削除） */
.faq-section { padding: 24px 0; }
.faq-section.alt-bg { background: var(--c-base-washi, #faf8f5); }
.faq-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
  /* v0.9.13j-fix116: セクション内 eyebrow override 削除（home.css base .eyebrow + body.pd-b10 override 統一規約に移譲） */
.faq-section h2 {
  text-align: left;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--c-text-sumi, #333);
  letter-spacing: 0.04em;
}

/* アコーディオン本体（design-spec §17.5 v0.9.0 準拠、HTML5 details name 排他制御） */
.faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--c-brand-white);
  border: 1px solid #E9ECEF;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--turquoise-400, #57C3C2); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 56px;
  position: relative;
  font-weight: 500;
  font-size: 15px;
  color: var(--c-text-sumi, #333);
  line-height: 1.6;
  transition: background 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { background: #f5fafa; }
.faq-item[open] summary { background: #E8F5F5; color: var(--ocean-500, #2F5D62); }
/* Q マーク（左の circular badge） */
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--turquoise-400, #57C3C2);
  color: white;
  font-family: var(--font-sans-en, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* +/− 開閉アイコン（右、details[open] で − に変化） */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 22px;
  line-height: 18px;
  font-weight: 300;
  color: var(--turquoise-400, #57C3C2);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
  content: "−";
  color: var(--ocean-500, #2F5D62);
  transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
  display: block; /* home.css line 853 の display: flex を上書き、text node と faq-feedback の 2 カラム化を防止 */
  padding: 0 24px 20px 56px;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
  background: #fcfdfd;
  border-top: 1px solid #E9ECEF;
}
.faq-answer::before {
  content: "A ";
  color: var(--turquoise-400, #57C3C2);
  font-weight: 600;
  margin-left: -32px;
  margin-right: 8px;
}
/* 回答本文内のインラインリンク（deep ocean #2F5D62、hover ターコイズ＝footer リンク慣習に統一、2026-06-13） */
.faq-answer a {
  color: var(--ocean-500, #2F5D62);
  transition: color 0.2s ease;
}
.faq-answer a:hover {
  color: var(--turquoise-400, #57C3C2);
}
@supports (interpolate-size: allow-keywords) {
  .faq-item::details-content { transition: block-size 0.3s ease; }
}

/* v0.9.13j-fix114: 旧 .faq-cta padding override 削除（home-cta-area 共通 padding 規約に統一） */

/* 仮文 placeholder 視認性低下 */
.placeholder-note { font-style: italic; color: #999; font-size: 12px; margin-top: 8px; opacity: 0.7; }

/* 検索窓（HERO 直下、sticky 固定、ピルボックス＋グラスモーフィズム） */
.faq-search-bar {
  position: sticky;
  top: 80px;
  z-index: 50;
  background: rgba(245, 250, 250, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(232, 236, 237, 0.6);
  padding: 18px 0;
}
.faq-search-bar .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.faq-search-input {
  width: 100%;
  padding: 14px 52px 14px 52px;
  font-size: 15px;
  border: 1px solid rgba(233, 236, 239, 0.8);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #333;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(47, 93, 98, 0.06);
  -webkit-appearance: none;
  appearance: none;
}
/* Safari / Webkit のネイティブ × を抑止（カスタム .faq-search-clear と二重表示を防止） */
.faq-search-input::-webkit-search-cancel-button,
.faq-search-input::-webkit-search-decoration,
.faq-search-input::-webkit-search-results-button,
.faq-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Edge / IE 旧版の × も抑止 */
.faq-search-input::-ms-clear,
.faq-search-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.faq-search-input::placeholder { color: #aaa; }
.faq-search-input:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(87, 195, 194, 0.4);
}
.faq-search-input:focus {
  outline: none;
  background: var(--c-brand-white);
  border-color: var(--turquoise-400, #57C3C2);
  box-shadow: 0 0 0 4px rgba(87, 195, 194, 0.15), 0 4px 16px rgba(47, 93, 98, 0.1);
}
.faq-search-bar .container::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357C3C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.faq-search-clear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: none;
  background: rgba(47, 93, 98, 0.08);
  cursor: pointer;
  color: #666;
  font-size: 16px; line-height: 1;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq-search-bar.has-query .faq-search-clear { display: flex; }
.faq-search-clear:hover {
  background: var(--turquoise-400, #57C3C2);
  color: white;
}
.faq-search-status {
  text-align: center;
  font-size: 12px;
  color: var(--turquoise-400, #57C3C2);
  margin: 10px 0 0;
  display: none;
  letter-spacing: 0.05em;
}
.faq-search-bar.has-query .faq-search-status { display: block; }

/* カテゴリアコーディオン（大見出し） */
.faq-category {
  border: 1px solid #E9ECEF;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-brand-white);
  transition: border-color 0.2s ease;
}
.faq-section.alt-bg .faq-category { background: var(--c-brand-white); }
.faq-category[open] { border-color: var(--turquoise-400, #57C3C2); }
.faq-category > summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 60px 24px 32px;
  position: relative;
  background: var(--c-brand-white);
  transition: background 0.2s ease;
}
.faq-category > summary::-webkit-details-marker { display: none; }
.faq-category > summary::marker { content: ""; }
.faq-category > summary:hover { background: #f5fafa; }
.faq-category[open] > summary { background: #E8F5F5; border-bottom: 1px solid #E9ECEF; }
.faq-category > summary > .eyebrow,
.faq-category > summary > h2 { margin: 3px 0 0; }
.faq-category > summary > h2 { margin: 4px 0 0; }
.faq-category > summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  text-align: center;
  font-size: 26px;
  line-height: 22px;
  font-weight: 300;
  color: var(--turquoise-400, #57C3C2);
  transition: color 0.2s ease;
}
.faq-category[open] > summary::after {
  content: "−";
  color: var(--ocean-500, #2F5D62);
}
.faq-category-content {
  padding: 24px 32px 32px;
}

/* 検索フィルタ用クラス */
.faq-item.is-hidden { display: none; }
.faq-section.is-empty { display: none; }

/* 大見出し h2 内のカウンター */
.faq-count {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-brand-gray, #555);
  letter-spacing: 0;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .faq-search-bar { top: 60px; padding: 12px 0; }
  .faq-search-bar .container { padding: 0 16px; }
  .faq-search-bar .container::before { left: 30px; }
  .faq-search-input { padding: 12px 40px 12px 40px; font-size: 16px; }
  .faq-search-clear { right: 28px; }
  .faq-category > summary { padding: 18px 50px 18px 20px; }
  .faq-category > summary::after { right: 16px; }
  .faq-category-content { padding: 18px 0 24px; }
  /* 2026-06-12: summary（質問箱 .faq-item）の枠線を消す（mobile）。共有 home.css の .faq-item:first-child(0,2,0) を上回るため 0,2,0 で上書き。隙間 12px は維持。desktop は枠線維持 */
  .faq-category-content .faq-item { border: none; }
}

/* ================================================================
   v0.9.10d: FAQ 強化機能（提案 #1-#10、2026-05-05）
   ================================================================ */

/* #1 検索ハイライト */
mark.faq-highlight {
  background: rgba(87, 195, 194, 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

/* #2 結果なしメッセージ */
.faq-no-results {
  display: none;
  max-width: 720px;
  margin: 40px auto;
  padding: 32px 24px;
  background: #fff8f3;
  border: 1px solid var(--copper-300, #eba38f);
  border-radius: 12px;
  text-align: center;
}
.faq-no-results.is-visible { display: block; }
.faq-no-results h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ocean-500, #2F5D62);
  font-weight: 600;
}
.faq-no-results p { font-size: 14px; color: #555; margin: 0 0 16px; line-height: 1.8; }
.faq-no-results .quick-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.faq-no-results .quick-links a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--c-brand-white);
  border: 1px solid var(--turquoise-400, #57C3C2);
  color: var(--turquoise-400, #57C3C2);
  text-decoration: none;
  font-size: 13px;
  border-radius: 9999px;
  transition: 0.2s ease;
}
.faq-no-results .quick-links a:hover {
  background: var(--turquoise-400, #57C3C2);
  color: white;
}

/* #3 カテゴリチップ */
.faq-category-chips {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.faq-chip {
  display: inline-block;
  padding: 8px 16px;
  background: var(--c-brand-white);
  border: 1px solid #E9ECEF;
  color: #555;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  transition: 0.2s ease;
  font-family: inherit;
  cursor: pointer;
}
.faq-chip:hover {
  background: var(--turquoise-400, #57C3C2);
  border-color: var(--turquoise-400, #57C3C2);
  color: white;
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  /* 2026-06-12: mobile はカテゴリチップ帯を非表示。HERO 背景に覆われ視認できず余白（約75px）だけ占有していたため、about と同じ eyebrow＋本文＋padding 構成に詰める。desktop は表示維持 */
  .faq-category-chips { display: none; }
}

/* #6 breadcrumb は assets/css/page-hero.css の共通テンプレートに統一（v0.9.13c 2026-05-06） */
/* faq 固有: container 幅 900px のみ上書き */
.faq-breadcrumb .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* #5 キーボードショートカットヒント（マイクアイコンと重ならないよう左配置） */
.faq-search-shortcut {
  position: absolute;
  right: 110px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #aaa;
  letter-spacing: 0.05em;
  pointer-events: none;
  background: rgba(233, 236, 239, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-sans-en, monospace);
}
.faq-search-bar.has-query .faq-search-shortcut,
.faq-search-input:focus + .faq-search-shortcut { display: none; }
@media (max-width: 767px) { .faq-search-shortcut { display: none; } }

/* #8 フィードバック（最小限実装、block + text-align: right） */
.faq-feedback {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #E9ECEF;
  text-align: right;
  font-size: 12px;
  color: #888;
}
.faq-feedback > span { margin-right: 12px; vertical-align: middle; }
.faq-feedback-buttons { display: inline-flex; gap: 6px; vertical-align: middle; }
.faq-feedback-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #E9ECEF;
  background: var(--c-brand-white);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocean-500, #2F5D62);
  transition: 0.2s ease;
  padding: 0;
}
.faq-feedback-btn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.faq-feedback-btn[data-vote="yes"]:hover { border-color: var(--turquoise-400, #57C3C2); color: var(--turquoise-400, #57C3C2); transform: scale(1.1); }
.faq-feedback-btn[data-vote="no"]:hover { border-color: var(--copper-500, #C87A56); color: var(--copper-500, #C87A56); transform: scale(1.1); }
.faq-feedback-btn.is-active { background: var(--turquoise-400, #57C3C2); border-color: var(--turquoise-400, #57C3C2); color: white; }
.faq-feedback-thanks { color: var(--turquoise-400, #57C3C2); font-weight: 500; display: none; }
.faq-feedback.is-submitted .faq-feedback-buttons { display: none; }
.faq-feedback.is-submitted .faq-feedback-thanks { display: inline; }

/* #10 音声検索ボタン */
.faq-search-voice {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--turquoise-400, #57C3C2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.2s ease;
}
.faq-search-voice:hover { background: rgba(87, 195, 194, 0.1); }
.faq-search-voice.is-listening {
  background: var(--turquoise-400, #57C3C2);
  color: white;
  animation: voice-pulse 1.5s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 195, 194, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(87, 195, 194, 0); }
}
.faq-search-bar.has-query .faq-search-voice,
.faq-search-bar.has-query .faq-search-shortcut { display: none; }

/* #4 ハッシュリンクで開いた item をハイライト */
.faq-item:target {
  border-color: var(--turquoise-400, #57C3C2);
  box-shadow: 0 0 0 3px rgba(87, 195, 194, 0.15);
}

/* #7 印刷用 CSS */
@media print {
  .faq-search-bar,
  .faq-category-chips,
  .faq-breadcrumb,
  .home-header,
  .home-cta-area,
  .footer-b,
  .cookie-consent,
  .placeholder-note,
  .faq-feedback { display: none !important; }
  .faq-page-hero { padding: 20px 0; background: var(--c-brand-white); }
  .faq-page-hero::before, .faq-page-hero::after { display: none; }
  .faq-section { padding: 12px 0 !important; background: var(--c-brand-white) !important; page-break-inside: avoid; }
  .faq-category, .faq-item {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  /* details を強制展開 */
  .faq-category, .faq-item { display: block !important; }
  .faq-category > summary::after, .faq-item summary::after { display: none; }
  details > * { display: block !important; }
}

@media (max-width: 767px) {
  /* faq-page-hero モバイル時は assets/css/page-hero.css の共通テンプレートに従う */
  /* 2026-06-11: モバイル上下 30px・左右インセット 40px を TOP に統一（従来 16px / 16px。faq は accordion のため要 desktop 目視確認） */
  .faq-section { padding: 30px 0; }
  .faq-section .container { padding: 0 calc(5% + 20px); }
  /* HERO container も本文と同じ左右インセット calc(5%+20px)=39.5px に揃え、eyebrow・本文・他ページと一致させる。2026-06-12 mobile のみ（desktop の 24px は不変） */
  .faq-page-hero .container { padding: 0 calc(5% + 20px); }
  .faq-item summary { padding: 16px 50px 16px 52px; font-size: 14px; }
  .faq-item summary::before { width: 24px; height: 24px; font-size: 12px; left: 14px; }
  .faq-answer { padding: 0 20px 16px 52px; font-size: 13px; }
  .faq-answer::before { margin-left: -28px; }
}

/* ===== 2026-06-17: tablet(768-1023px) 調整。TOP(index.html L708-718) の tablet 基準を再現＝本文セクションを flat 40px ガター＋上下 40px に統一（media/news/care と同型）。
   - .faq-section .container を flat 40px（faq.css:31-35 の max-width:900/padding:0 24px=詳細度0,2,0 を後勝ち上書き）。
   - .faq-section 上下 padding を 40px（faq.css:29 の 24px 0 を後勝ち上書き。mobile(≤767) は min-width:768 で除外＝faq.css:533 域が不変）。
   - HERO/breadcrumb の container（faq 固有 24px）と sticky 検索バー（max-width:720 中央・全 breakpoint 共通、desktop と同条件）は据え置き。footer-cta(.home-cta-area) は共有 style.css:1213 で tablet 40px 済。
   - アコーディオン（details/summary）は単一カラム積層で多列なし。eyebrow は home.css base で TOP 統一済。
   desktop(≥1024)・mobile(≤767) は一切不変。共有 home.css/style.css/page-hero.css は不変（faq.css 内で完結）。 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .faq-section .container { max-width: none; padding: 0 40px; }
  .faq-section { padding-top: 40px; padding-bottom: 40px; }

  /* 2026-06-17 平田氏指示: hero を about/mobile に揃える。padding(124/80)・top・eyebrow・h1 は about と同一だが、faq hero は営業日/登録番号の meta 2行で高さが増えている。
     mobile（page-hero.css:92-93）同様に tablet でも hours/license を非表示にし、compact な hero に揃える。desktop(≥1024) は meta 表示のまま不変 */
  .faq-page-hero .hero-meta--hours,
  .faq-page-hero .hero-meta--license { display: none; }

  /* 2026-06-17 平田氏指示: faq-category 以下を tablet でも mobile 同様の体裁に（faq.css:312-340 / 530-541 の mobile アコーディオン規則を tablet に適用）。desktop は不変 */
  .faq-category > summary { padding: 18px 50px 18px 20px; }
  .faq-category > summary::after { right: 16px; }
  .faq-category-content { padding: 18px 0 24px; }
  .faq-category-content .faq-item { border: none; }
  .faq-item summary { padding: 16px 50px 16px 52px; font-size: 14px; }
  .faq-item summary::before { width: 24px; height: 24px; font-size: 12px; left: 14px; }
  .faq-answer { padding: 0 20px 16px 52px; font-size: 13px; }
  .faq-answer::before { margin-left: -28px; }
}