/* ==== faq.css (FAQページ専用) ==== */
:root{
  --bg:#edf5fb; --ink:#0f172a; --muted:#475569; --card:#ffffff; --line:#e6eef6;
  --brand:#2563eb; --accent:#60a5fa; --pill:#1d4ed8; --hero-from:#eff6ff; --hero-to:#e0f2fe;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --radius:16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#eef2ff;
  color:#1e40af;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  font-size:12px;
  border:1px solid #dbeafe;
}

/* hero */
.hero{
  background:linear-gradient(135deg,var(--hero-from),var(--hero-to));
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid;
  gap:20px;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
}
.hero-visual{
  aspect-ratio:4/3;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(96,165,250,.2), transparent 60%),
    radial-gradient(800px 400px at 120% 120%, rgba(37,99,235,.15), transparent 55%),
    linear-gradient(135deg,#ffffff,#f8fcff);
  position:relative;
  overflow:hidden;
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    rgba(37,99,235,.04) 10px 20px
  );
}

/* tabs */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  display:inline-block;
}
.tab.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}

/* accordion */
.faq{
  display:grid;
  gap:12px;
  margin-top:12px;
}
details{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease;
}
details[open]{
  box-shadow:0 3px 30px rgba(37,99,235,.12), 0 1px 2px rgba(15,23,42,.06);
  border-color:#d7e6ff;
}

/* ▼ 質問行（Q：テキスト | 矢印） */
summary{
  padding:14px 16px;
  list-style:none;
  cursor:pointer;
  font-weight:800;
  display:flex;
  align-items:flex-start; /* テキスト複数行時の先頭行に合わせる */
  gap:8px;
  color:var(--ink);
}
summary::marker{display:none}

/* Q: ラベル（カラー＝--pill） */
summary::before{
  content:"Q：";
  font-weight:800;
  color:var(--pill);
  margin-right:4px;
  flex-shrink:0; /* 折り返し時に潰れないよう固定 */
}

/* 右端の三角アイコン（開閉で回転） */
summary::after{
  content:"▾";
  font-size:18px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .2s ease;
  color:#334155;
  margin-left:auto;   /* 左側（Q＋質問テキスト）と矢印を分離するポイント */
  flex-shrink:0;
  align-self:center;  /* 縦方向は中央寄せ */
}
details[open] > summary::after{
  transform:rotate(180deg);
}

/* 回答は全体を薄い青背景に（可読性は黒文字） */
.answer{
  background:var(--hero-from);
  border-top:1px solid #dbeafe; /* 質問との区切り */
}

.faq p{
  margin:0;
  padding:12px 16px 16px;
  color:var(--ink);
}

/* ▼ A：ラベル＋テキスト（複数行でもきれいに揃える） */
.answer > p{
  position:relative;
  padding-left:40px; /* テキストの開始位置を「A：」の右側に統一 */
}
.answer > p::before{
  content:"A：";
  font-weight:800;
  color:var(--pill);
  position:absolute;
  left:16px;  /* 親の左右パディングに合わせて左端から16px */
  top:12px;   /* 1行目のテキストとだいたい揃う位置 */
}

/* 備考 */
.faq .note{
  background:#f8fafc;
  color:#0f172a;
  border-top:1px dashed var(--line);
  padding:12px 16px;
}

/* CTA BAND（幅いっぱいの帯） */
.cta-band{
  margin:28px 0 0;
  padding:32px 0;
  background:linear-gradient(135deg, var(--hero-from), #e7f0ff);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-band__inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}
@media(max-width:900px){
  .cta-band__inner{grid-template-columns:1fr}
}
.cta-eyebrow{
  display:inline-block;
  background:#eef2ff;
  color:#1e40af;
  border:1px solid #dbeafe;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.cta-title{
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.2;
  margin:8px 0 4px;
  font-weight:900;
  letter-spacing:.01em;
}
.cta-lead{
  color:#0f172a;
  opacity:.85;
  font-size:16px;
}
.cta-band__actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
}
.btn--lg{
  font-size:18px;
  padding:14px 22px;
  border-radius:12px;
}
.cta-note{
  font-size:12px;
  color:#334155;
}

/* スマホ表示では予約CTAを非表示 */
@media (max-width: 768px) {
  .cta-band {
    display: none;
  }
}