/* ==========================================================================
   AOKI TRAVEL — page-faq.css（よくある質問・固有）
   FAQ：の型：筆記体h1＋スクイグル → 紺の箱型タブ4 → 紙色の面にアコーディオン
   ＋ 右に「Get in touch」の白カード（SPでは下へ回す）
   値は tokens.css の変数のみ。base.css のクラスは再定義しない（ページ内スコープの微調整のみ）。
   ========================================================================== */

/* ---------- ページ見出し ---------- */
.page-faq .page-head{padding-bottom:34px}
.page-faq .page-head__lead{line-height:1.9}

/* ---------- 質問一覧セクション ---------- */
.faq{padding-top:40px;padding-bottom:var(--sec-pb)}
@media (max-width:1023px){.faq{padding-top:32px}}
@media (max-width:767px){.faq{padding-top:24px}}

/* ---------- パネル（橙の上辺バー → 紺タブ → 紙色の本体） ---------- */
.faq-tabs{position:relative;background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);overflow:hidden}
.faq-tabs::before{content:"";display:block;height:5px;background:var(--orange)}

/* タブ：紺の帯は base（.tabs--boxed）。角丸だけ外し、アクティブは紙色にして本体とつなぐ */
.faq-tabs .tabs__nav{border-radius:0}
.faq-tabs .tabs__btn{letter-spacing:.02em}
.faq-tabs .tabs__btn[aria-selected="true"]{background:var(--paper)}
@media (max-width:767px){
  .faq-tabs .tabs__nav{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .faq-tabs .tabs__btn{padding:12px 6px;font-size:14px;line-height:1.45}
}

/* ---------- 本体：左＝アコーディオン ／ 右＝Get in touch ---------- */
.faq-box{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;padding:38px 40px 46px}
@media (max-width:1023px){.faq-box{grid-template-columns:minmax(0,1fr);gap:30px;padding:30px 26px 36px}}
@media (max-width:767px){.faq-box{gap:26px;padding:24px 18px 30px}}

.faq-box__main{min-width:0}
.faq-box .tabs__panel{padding-top:0}
.faq-box__title{margin-bottom:16px}
.faq-box .acc__btn{padding:18px 2px}
.faq-box .acc__body{padding:0 2px 20px;max-width:60em}
.faq-box .acc__body p:last-child{margin-bottom:0}

/* ---------- 右カード（紙カードを白地にして面の上で立たせる） ---------- */
.faq-side{background:var(--white);padding:30px 28px 32px}
.faq-side__script{display:inline-block;color:var(--olive);margin-bottom:12px}
.faq-side__title{margin:0 0 8px}
.faq-side__txt{margin:0 0 18px}
.faq-side .btn{width:100%}
.faq-side__contact{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.faq-side__contact dt{font-weight:700;color:var(--orange-text);margin-top:14px}
.faq-side__contact dt:first-child{margin-top:0}
.faq-side__contact dd{margin:3px 0 0;color:var(--ink-2);line-height:1.75}
.faq-side__contact a{font-weight:700;color:var(--ink)}
.faq-side__contact a:hover{color:var(--orange-text)}
@media (min-width:768px) and (max-width:1023px){
  .faq-side{max-width:520px}
  .faq-side .btn{width:auto;min-width:220px}
}
@media (max-width:767px){
  .faq-side{padding:26px 22px 28px}
}