/* ============================================================
   ANTiQ 共通コンポーネント  assets/css/components.css
   2026-09-09 新設

   🔴 ページごとの <style> に同じものを書かないこと。
      新しい見せ方が要るときは、ここに追加して全ページで使い回す。

   🔴 部品クラスは必ず aq- で始める（.card や .sec は既存ページで別の意味に使われている）
   前提：各ページの :root が以下の変数を定義していること
      --ink / --ink-muted / --cream / --parchment / --line
      --bronze / --font-en / --font-ja
   ============================================================ */

/* ── セクション見出しの部品（2026-09-09 全ページで統一）──
   値は works/ 系（施工事例11ページ）に揃えた。
   🔴 ここが唯一の定義。ページの <style> に書き直さないこと。 */
.section-label{font-family:var(--font-en);font-style:italic;font-size:0.68rem;letter-spacing:0.4em;color:var(--bronze);display:block;margin-bottom:12px;}
.section-divider{width:28px;height:1px;background:var(--bronze);margin-bottom:24px;}
.section-title{font-family:var(--font-ja);font-size:clamp(1.4rem,4vw,2rem);font-weight:500;letter-spacing:.07em;line-height:1.6;}

/* ── セクションの外枠 ───────────────────────────── */
.aq-sec{padding:80px 24px;}
.aq-sec--cream{background:var(--cream);}
.aq-sec--parchment{background:var(--parchment);}
@media(min-width:768px){.aq-sec{padding:110px 48px;}}

/* ── セクション見出し（中央寄せ）───────────────── */
.aq-sec-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.aq-sec-head .section-label,.aq-sec-head .section-divider{display:inline-block;}
.aq-sec-head .section-divider{margin:12px auto 20px;}
.aq-sec-lead{font-size:.82rem;line-height:2.31;letter-spacing:.06em;color:var(--ink-muted);margin-top:16px;}

/* ── カード一覧（番号つき）─────────────────────── */
.aq-card-list{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2px;}
.aq-card{position:relative;padding:32px 28px;background:var(--cream);border:1px solid var(--line);border-radius:4px;}
.aq-card-num{position:absolute;top:16px;right:20px;font-family:var(--font-en);font-size:3.4rem;font-weight:300;line-height:1;color:rgba(155,120,69,.18);}
.aq-card h3{font-size:1.05rem;font-weight:500;letter-spacing:.08em;line-height:1.8;color:var(--ink);margin-bottom:12px;}
.aq-card p{font-size:.82rem;line-height:2.31;letter-spacing:.05em;color:var(--ink-muted);}

/* ── 横並びの3項目（考え方・特長など）──────────── */
.aq-trio{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:28px;}
.aq-trio-item{text-align:center;padding:0 8px;}
.aq-trio-num{display:block;font-family:var(--font-en);font-style:italic;font-size:.8rem;letter-spacing:.2em;color:var(--bronze);margin-bottom:12px;}
.aq-trio-item h3{font-size:1rem;font-weight:500;letter-spacing:.08em;margin-bottom:10px;}
.aq-trio-item p{font-size:.8rem;line-height:2.2;letter-spacing:.05em;color:var(--ink-muted);}
@media(min-width:768px){.aq-trio{grid-template-columns:repeat(3,1fr);gap:44px;}}

/* ── 一問一答（不安に答える／FAQ）──────────────── */
.aq-qa{max-width:720px;margin:0 auto;list-style:none;}
.aq-qa-item{padding:26px 0;border-bottom:1px solid var(--line);}
.aq-qa-item:last-child{border-bottom:none;}
.aq-qa-q{font-size:.95rem;font-weight:600;letter-spacing:.06em;line-height:1.9;margin-bottom:10px;}
.aq-qa-num{font-family:var(--font-en);font-style:italic;font-size:.8rem;color:var(--bronze);margin-right:10px;}
.aq-qa-a{font-size:.82rem;line-height:2.31;letter-spacing:.05em;color:var(--ink-muted);}

/* ── 数字の並び（実績など）─────────────────────── */
.aq-stats{display:flex;justify-content:center;gap:48px;margin:32px 0 26px;}
.aq-stat .num{font-family:var(--font-en);font-size:2rem;line-height:1.2;color:var(--bronze);}
.aq-stat .num small{font-size:1rem;}
.aq-stat .cap{font-size:.7rem;line-height:1.9;letter-spacing:.06em;color:var(--ink-muted);margin-top:6px;}

/* ── 本文まわりの部品 ──────────────────────────── */
.aq-prose{font-size:.85rem;line-height:2.4;letter-spacing:.06em;color:var(--ink-muted);margin-top:16px;}
.aq-btn-line{display:inline-block;padding:14px 32px;font-size:.8rem;letter-spacing:.14em;color:var(--ink);border:1px solid var(--bronze);border-radius:3px;}