/* ============================================================
   事例詳細（/case/<id>）共通
   Figma: 詳細B #サムネロゴver（273:1026）／ SP: 446:6863
   サムネイル: ご支援事例 / thumbnail（410:2263）

   ページ構成
   .case-cover      … サムネイル（背景図形＋ロゴカード＋パンくず）
   .case-article    … 見出し（.case-head）＋概要表（.case-meta）＋インタビュー（.interview / .qa）
   .cta-band        … 青帯の相談導線
   ============================================================ */

:root {
  --case-cover-bg: #1a3962;
  --case-article-width: 768px;
}

/* ---------- button（色バリエーション：白地・青文字） ---------- */
.btn--white { background: #fff; color: var(--mainblue); }

/* ---------- breadcrumb（共通 .breadcrumb の色だけ指定） ---------- */
.case-cover .breadcrumb ol { color: var(--lightblue); }

/* ---------- cover（サムネイル） ---------- */
.case-cover {
  padding-top: var(--header-h);
  background: var(--case-cover-bg);
}
.case-cover__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 668;
  max-height: 668px;
  overflow: hidden;
}
.case-cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.case-cover__card {
  position: absolute;
  top: 23.35%;
  left: 50%;
  transform: translateX(-50%);
  width: min(590px, 40.97%);
  aspect-ratio: 590 / 340;
  border-radius: 40px;
  background: #fff;
  display: grid;
  place-items: center;
}
.case-cover__logo { width: 59.6%; height: auto; }
.case-cover .breadcrumb {
  position: absolute;
  top: 25px;
  left: max(35px, calc((100% - var(--container)) / 2 + 35px));
  right: var(--gutter);
}

/* ---------- article ---------- */
.case-article { padding: 80px var(--gutter) 203px; }
.case-article__inner { max-width: var(--case-article-width); margin: 0 auto; }

/* 見出し */
.case-head { display: flex; flex-direction: column; gap: 31px; }
.case-head__text { display: flex; flex-direction: column; gap: 20px; }
.case-head__date,
.case-head__lead {
  font-family: var(--ff-noto);
  font-weight: 400;
  font-size: var(--fs-body);
}
.case-head__title,
.case-head__lead { text-align: center; }
.case-head__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh); }

/* 概要表 */
.case-meta {
  border: 2px solid var(--darktext);
  border-radius: var(--radius-card);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}
.case-meta__row { display: flex; align-items: center; gap: 32px; }
.case-meta dt { flex: none; width: 96px; font-weight: 700; font-size: var(--fs-body); }
.case-meta dd { flex: 1 1 0; min-width: 0; font-size: var(--fs-body); }

/* インタビュー */
.interview-list { margin-top: 128px; display: flex; flex-direction: column; gap: 88px; }
.interview { display: flex; flex-direction: column; gap: 40px; }
.interview__heading {
  background: var(--mainblue);
  color: #fff;
  border-radius: 30px 30px 0 30px;
  padding: 20px 28px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh);
}

.qa { display: flex; align-items: flex-start; gap: 24px; }
.qa__bubble {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  padding: 20px 24px;
}
.qa--q .qa__bubble {
  border-radius: 0 30px 30px 30px;
  font-size: var(--fs-h4);
  font-weight: 700;
}
.qa--a .qa__bubble {
  border-radius: 30px 0 30px 30px;
  font-size: var(--fs-body);
}
.qa--a .qa__bubble p + p { margin-top: 1.55em; }
.qa__bubble ul { list-style: disc; padding-left: 1.5em; }

.qa__icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.qa__icon img { position: absolute; max-width: none; }
.qa__icon--ms img { left: 29.69%; top: 20.31%; width: 42.18%; height: 60.66%; }
.qa__icon--person img { left: -1.56%; top: 12.5%; width: 104.69%; height: 104.69%; }

/* ---------- CTA（青帯） ---------- */
.cta-band {
  margin-bottom: 126px;
  min-height: 318px;
  padding: 60px var(--gutter);
  background: var(--mainblue);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
}
.cta-band__title { font-size: 32px; font-weight: 500; line-height: var(--lh); }

/* ============================================================
   tablet
   ============================================================ */
@media (max-width: 1100px) {
  .cta-band__title { font-size: 28px; }
}

/* ============================================================
   SP（Figma: 446:6863 393px）
   ============================================================ */
@media (max-width: 767px) {
  /* cover：1440幅の図形を 655幅に縮小して中央を切り出す */
  .case-cover { padding-top: var(--header-h); }
  .case-cover__visual { aspect-ratio: 393 / 304; max-height: none; }
  .case-cover__bg {
    left: 50%;
    width: 166.67%;
    transform: translateX(-50%);
    object-fit: fill;
  }
  .case-cover__card { width: 68.2%; border-radius: 18px; }
  .case-cover .breadcrumb { top: 12px; left: 16px; }

  /* article */
  .case-article { padding: 32px 28px 64px; }
  .case-head__date,
  .case-head__lead { font-family: var(--ff-zen); font-weight: 500; }
  .case-head__title { font-size: 24px; font-weight: 500; }

  .case-meta { border-width: 1px; padding: 20px; gap: 24px; }
  .case-meta__row { align-items: flex-start; gap: 28px; }
  .case-meta dt { width: 84px; font-size: 14px; }

  .interview-list { margin-top: 64px; gap: 40px; }
  .interview { gap: 20px; }
  .interview__heading { border-radius: 20px 20px 0 20px; padding: 16px 20px; font-size: 14px; font-weight: 700; }

  .qa { gap: 16px; }
  .qa--q .qa__bubble { padding: 12px 16px; font-size: 14px; }
  .qa--a .qa__bubble { padding: 20px 24px; }
  .qa__icon { width: 40px; height: 40px; }
  .qa__icon--person img { top: 12.5%; }

  /* cta */
  .cta-band { margin-bottom: 119px; padding: 60px 12px; }
  .cta-band__title { font-size: var(--fs-h2); font-weight: 700; }
}