/* Subpages1：FAQs 01（21st.dev @ln-dev7/faqs-01、shadcn/ui の Accordion）を移植。
   原作の構成と寸法：上下 80px（640px 以上 112px）、幅 768px（max-w-3xl）・左右 24px（640px 以上 40px）、中央揃えの見出し群
   （ピル型の小さなバッジ「FAQ」＋ sparkles アイコン、見出し clamp(1.85rem,4vw,2.75rem)・字間 -.03em・行間 1.08、説明文 max-w-xl）、
   48px 下に質問の一覧：各行は下に 1px の罫線、質問の行は上下 16px・14px・medium・ポインターで下線、右に chevron-down（開くと 180°）、
   回答は 14px・下 16px、高さのアニメーション（accordion-down／up 200ms ease-out）。最後に破線の枠の「ほかの質問」案内と丸いボタン。
   TOP に合わせて変えたところ：見出しを明朝、黒・灰を TOP の墨色・文字色に（原作の #0a0a0a／#737373）。罫線は原作の #e5e5e5。
   Fix2（2026-10-13）：案内の枠の地を紙色から原作の中立色（#f5f5f5 の 40%）に、案内のアイコンは白地・罫線（墨色の丸をやめた）。
   バッジのアイコン色は原作の amber-500（#f59e0b）から TOP のボタンのオレンジ #ff5f00 へ。案内のボタンは TOP の ArrowFillButton。
   質問・回答は日本語のため 15〜16px。原作は1問ずつ開く方式だが、読んでいる回答が閉じないよう各質問を個別に開閉する。 */
.hal-faq1{--faq-fg:#1b1813;--faq-text:#3d3931;--faq-muted:#6b6356;--faq-line:#e5e5e5;--faq-card:#fff;
  box-sizing:border-box;padding:80px 0;background:#fff;color:var(--faq-fg)}
.hal-faq1 *,.hal-faq1 *::before,.hal-faq1 *::after{box-sizing:border-box}
@media (min-width:640px){.hal-faq1{padding:112px 0}}
.hal-faq1__inner{max-width:768px;margin:0 auto;padding:0 24px}
@media (min-width:640px){.hal-faq1__inner{padding:0 40px}}
@media (max-width:767.98px){.hal-faq1__inner{padding:0 16px}}
.hal-faq1__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hal-faq1__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--faq-line);border-radius:999px;background:var(--faq-card);font-family:var(--hal-mono,'Space Mono',monospace);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.06em;color:var(--faq-muted);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.hal-faq1__badge-icon{width:12px;height:12px;color:#ff5f00}
.hal-faq1__title{margin:0;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:clamp(1.7rem,4vw,2.6rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--faq-fg);text-wrap:balance}
.hal-faq1__lead{margin:0;max-width:36rem;font-size:15px;line-height:1.85;color:var(--faq-muted);text-wrap:balance}
/* Fix6（2026-10-14、v03 A03）：見出しへのリンク（調査詳細の #hal-svc-faq-ttl、FAQ ページの #faq-*）で、見出しと上のバッジ「FAQ」が固定ヘッダーに
   隠れない位置へ着地させる（以前は見出しの上端が画面の最上部に来て、ヘッダーの下に隠れていた）。表示・余白は変えない（スクロールの止まる位置だけ）。 */
.hal-faq1__title[id]{scroll-margin-top:132px}
@media (max-width:767.98px){.hal-faq1__title[id]{scroll-margin-top:104px}}

.hal-faq1__list{margin-top:48px;border-top:0}
.hal-faq1__item{border-bottom:1px solid var(--faq-line)}
.hal-faq1__q{margin:0;padding:0;border:0;background:none;font:inherit}
.hal-faq1__trigger{all:unset;box-sizing:border-box;display:flex;flex:1;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 0;cursor:pointer;
  font-family:var(--hal-sans,'Zen Kaku Gothic New',sans-serif);font-size:15px;font-weight:500;line-height:1.7;color:var(--faq-fg);text-align:left;-webkit-tap-highlight-color:transparent;transition:all .15s}
@media (min-width:768px){.hal-faq1__trigger{font-size:16px}}
@media (hover:hover){.hal-faq1__trigger:hover .hal-faq1__qtext{text-decoration:underline;text-underline-offset:4px}}
.hal-faq1__trigger:focus-visible{outline:2px solid var(--faq-fg);outline-offset:2px;border-radius:4px}
.hal-faq1__qtext{min-width:0;overflow-wrap:anywhere}
.hal-faq1__chev{flex:0 0 auto;width:16px;height:16px;color:var(--faq-muted);transition:transform .2s}
.hal-faq1__item.is-open .hal-faq1__chev{transform:rotate(180deg)}
html:not(.hal-sub1-js) .hal-faq1__chev{transform:rotate(180deg)}

.hal-faq1__a{display:grid;grid-template-rows:1fr}
.hal-sub1-js .hal-faq1__a{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease-out,visibility 0s linear .2s}
.hal-sub1-js .hal-faq1__item.is-open .hal-faq1__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s ease-out,visibility 0s}
.hal-faq1__a-inner{min-height:0;overflow:hidden}
.hal-faq1__a-body{padding:0 0 18px;font-size:15px;line-height:1.9;color:var(--faq-text)}
@media (min-width:768px){.hal-faq1__a-body{font-size:15.5px}}
.hal-faq1__a-body p{margin:0 0 .8em}
.hal-faq1__a-body p:last-child{margin-bottom:0}
.hal-faq1__a-body a{color:var(--faq-fg);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.hal-faq1__chev,.hal-sub1-js .hal-faq1__a,.hal-sub1-js .hal-faq1__item.is-open .hal-faq1__a{transition:none}}

.hal-faq1__callout{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding:20px;border:1px dashed #d4d4d4;border-radius:16px;background:rgba(245,245,245,.4)}
@media (min-width:640px){.hal-faq1__callout{flex-direction:row}}
.hal-faq1__callout-main{display:flex;align-items:center;gap:12px;min-width:0}
.hal-faq1__callout-icon{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:1px solid var(--faq-line);border-radius:999px;background:#fff;color:var(--faq-fg)}
.hal-faq1__callout-icon svg{width:16px;height:16px}
.hal-faq1__callout-text{display:flex;flex-direction:column;line-height:1.5}
.hal-faq1__callout-head{margin:0;font-size:14px;font-weight:500;color:var(--faq-fg)}
.hal-faq1__callout-sub{margin:2px 0 0;font-size:12.5px;color:var(--faq-muted)}
.hal-faq1__callout .hal-afb{flex:0 0 auto}
@media (max-width:639.98px){.hal-faq1__callout{align-items:stretch}}

/* モバイルの縦の長さを抑える（余白と文字の大きさだけ。上の規則より後に置く） */
@media (max-width:767.98px){.hal-faq1{padding:32px 0}.hal-faq1__head{gap:8px}.hal-faq1__lead{font-size:13.5px;line-height:1.75}.hal-faq1__list{margin-top:16px}.hal-faq1__trigger{padding:14px 0;font-size:14.5px}.hal-faq1__callout{margin-top:24px;padding:14px;gap:12px}.hal-faq1__callout-sub{font-size:12px}}

/* Fix2：テーマ（Astra）の button:hover／:focus（青い地・白い文字）が質問の行に出ないよう、状態ごとに打ち消す */
.hal-faq1 .hal-faq1__trigger:is(:hover,:focus,:focus-visible,:active){background:none;color:var(--faq-fg);box-shadow:none;border:0}
