/* =====================================================
   services_faq.css（Page-only / services_cargo baseline compatible）
   - 共通（font / header / nav / reveal / underline / footer / buttons）は site.css に委譲
   - 基本は services_cargo のページ基調（紙背景 + sub-hero）
   - Q背景：航空輸送カード色（濃紺グラデ）
   - A背景：淡いガラス（現行の美しさを維持）
   - ★更新：影は「カード外枠（faq-card）」に集約して、全体を浮かせる
===================================================== */

:root{
  --ink:#163a5c;
  --ink2:#244e7a;

  --paper1:#faf7ef;
  --paper2:#f5f1e8;

  /* Q（航空輸送カード系） */
  --svc-card-bg1:#1e3a75;
  --svc-card-bg2:#264d91;
  --svc-card-border: rgba(174,227,255,.22);
  --svc-card-border-strong: rgba(174,227,255,.28);
}

/* 背景（services_cargoと同思想） */
body.services-page{
  --page-bg:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--paper1) 0%, var(--paper2) 100%);
  --page-fg: var(--ink);
  color: var(--page-fg);
}

/* ===== Sub Hero（cargo基調） ===== */
.sub-hero{
  position:relative;
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  margin-top:64px;
}
.sub-hero--faq{
  background:url("../images/services01.jpg") center/cover no-repeat;
}
.sub-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,58,92,.78) 0%, rgba(22,58,92,.72) 100%);
}
.sub-hero__inner{ position:relative; z-index:1; }
.sub-hero__title{
  margin:0;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:900;
  letter-spacing:.02em;
  color:#eaf4ff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.sub-hero__lead{
  margin:6px 0 0;
  font-size:13px;
  letter-spacing:.16em;
  color:#bfe2ff;
  text-transform:uppercase;
}

/* ===== Layout ===== */
.sub-main{ padding:34px 0 0; }
.sub-container{
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px;
}

/* 見出し（サイズ/太さは site.cssの.section-headline に委譲） */
.sec-title{
  margin:0 0 12px;
  color: var(--ink);
}
.sec-lead{
  margin:0 0 24px;
  font-size:16px;
  line-height:1.95;
  color: var(--ink2);
}

/* ===== FAQ list ===== */
.faq-list{
  display:grid;
  gap:14px;
}

/* ★影はカード外枠へ集約 */
.faq-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;

  /* 外側（下側）に溜まる影：カード全体を浮かせる */
  box-shadow:
    0 28px 56px rgba(0,0,0,.18),
    0 12px 28px rgba(0,0,0,.10);
}

/* Q（濃紺カード） */
.faq-q{
  display:flex;
  align-items:center;
  gap:10px;

  padding:16px 14px;

  background: linear-gradient(180deg, var(--svc-card-bg1) 0%, var(--svc-card-bg2) 100%);
  border:1px solid var(--svc-card-border-strong);

  /* ★内部影は持たせない（外枠に集約） */
  box-shadow:none;

  color:#f6fbff;
  position:relative;
}
.faq-q::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 44%);
  opacity:.65;
  pointer-events:none;
}

.faq-badge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.02em;
  flex: 0 0 auto;
  position:relative;
  z-index:1;
}

.faq-badge--q{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#ffffff;
}

.faq-qtext{
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.55;
  position:relative;
  z-index:1;
}

/* A（淡いガラス） */
.faq-a{
  display:flex;
  gap:10px;
  align-items:flex-start;

  padding:14px;

  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.62);
  border-top:0;

  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);

  /* ★内部影は持たせない（外枠に集約） */
  box-shadow:none;
}

.faq-badge--a{
  background: linear-gradient(135deg, #195aa6, #7fb6ff);
  color:#ffffff;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.faq-atext{
  margin:0;
  color: var(--ink2);
  line-height:1.95;
  font-size:15px;
}

/* Responsive */
@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .faq-q{ padding:15px 13px; }
  .faq-a{ padding:13px; }
  .faq-qtext{ font-size:15px; }
}