/* 導入事例ページだけで使うスタイル（共通部品は design-system/css/site.css。値は tokens.css の変数だけを使う） */

/* ---- 質問と回答（インタビュー）：旧サイトと同じチャット形式。質問＝右、回答＝左 ---- */
.prose > .chat {
  margin-top: var(--sp-5);
}
.prose > .chat + blockquote,
.prose > .chat + figure {
  margin-top: var(--sp-6);
}
.chat {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 85%;
}
.chat--q {
  flex-direction: row-reverse;
  margin-left: auto;
}
.chat__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
}
.chat--q .chat__avatar {
  background: var(--c-blue);
}
.chat__avatar .icon {
  width: 24px;
  height: 24px;
}
.chat__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.chat--q .chat__body {
  align-items: flex-end;
}
.prose .chat__name {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-ink);
}
.chat__bubble {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-ink);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.prose .chat__bubble p {
  margin: 0;
}
.chat__bubble strong {
  color: var(--c-blue-deep);
  font-weight: 700;
}
.chat--q .chat__bubble {
  background: var(--c-blue-deep);
  color: var(--c-white);
  font-weight: 700;
}
.chat--q .chat__bubble strong {
  color: inherit;
}
/* しっぽ（各話者の最初の吹き出しだけ。アイコンの側に向ける） */
.chat__name + .chat__bubble::before {
  content: "";
  position: absolute;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.chat--a .chat__name + .chat__bubble::before {
  left: -9px;
  border-right: 10px solid var(--c-white);
}
.chat--q .chat__name + .chat__bubble::before {
  right: -9px;
  border-left: 10px solid var(--c-blue-deep);
}
@media (max-width: 640px) {
  .chat {
    gap: var(--sp-2);
    max-width: 96%; /* アイコン分を除いた吹き出しの幅が画面の85%前後になる */
  }
  .chat__avatar {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
  }
  .chat__avatar .icon {
    width: 20px;
    height: 20px;
  }
  .chat__bubble {
    padding: 10px 14px;
  }
}
.qa-who {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-blue-deep);
}
.prose blockquote.pull-quote {
  background: var(--c-white);
  border-left: 4px solid var(--c-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.7;
}
.prose blockquote.pull-quote .qa-who {
  margin-top: var(--sp-2);
  font-weight: 500;
}

/* ---- 章の見出しとリード ---- */
.prose h2[id] {
  scroll-margin-top: 96px;
  line-height: 1.5;
}
.case-chapter-lead,
.case-tagline {
  color: var(--c-gray-600);
  font-weight: 500;
}
.case-tagline {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--c-ink);
  font-weight: 700;
}
.prose figure {
  margin-top: var(--sp-6);
}
.prose figure img {
  width: 100%;
  height: auto;
}
/* 縦長の写真は大きくなりすぎないよう高さを抑えて中央に置く */
.prose figure.is-portrait img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin-inline: auto;
}
.prose figure.is-portrait figcaption {
  text-align: center;
}

/* ---- 目次・指標 ---- */
.case-toc {
  padding-left: 1.5em;
  display: grid;
  gap: var(--sp-2);
}
.case-toc a {
  color: var(--c-blue-deep);
}
.case-stats {
  margin-top: var(--sp-5);
}
.page-hero h1 {
  overflow-wrap: anywhere;
}

.case-toc-box {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.page-hero h1 {
  text-wrap: balance;
}

/* 吹き出しの人物写真（元サイトのインタビュアー・ご担当者様の写真） */
.chat__avatar--img { width: 56px; height: 56px; padding: 0; overflow: hidden; background: var(--c-white); box-shadow: 0 2px 8px rgba(17, 40, 80, 0.15); }
.chat__avatar--img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 事例ページ下：前の事例／次の事例 */
.case-pager { display: grid; gap: var(--sp-4); }
.case-pager__link {
  display: grid;
  gap: 4px;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1.5px solid #c9d6ea;
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.case-pager__link:hover { border-color: var(--c-blue); box-shadow: 0 8px 20px rgba(30, 95, 190, 0.15); }
.case-pager__link span { font-size: var(--fs-sm); font-weight: 700; color: var(--c-blue); }
.case-pager__link strong { font-size: var(--fs-md); }
.case-pager__link--prev span::before { content: "← "; }
.case-pager__link--next { text-align: right; }
.case-pager__link--next span::after { content: " →"; }
@media (min-width: 768px) {
  .case-pager { grid-template-columns: 1fr 1fr; }
  .case-pager__link--next:only-child { grid-column: 2; }
}

/* 前後の事例：目立つボタンにする（田中さん指示 2026-11-03） */
.case-pager__link { position: relative; background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); box-shadow: 0 6px 18px rgba(30, 95, 190, 0.25); padding: var(--sp-5) var(--sp-8); }
.case-pager__link:hover { background: var(--c-blue-dark, #1e5fbe); border-color: var(--c-blue-dark, #1e5fbe); box-shadow: 0 10px 24px rgba(30, 95, 190, 0.35); }
.case-pager__link span { color: rgba(255, 255, 255, 0.85); }
.case-pager__link strong { color: var(--c-white); font-size: var(--fs-lg, 1.25rem); }
.case-pager__link--prev span::before, .case-pager__link--next span::after { content: none; }
.case-pager__link::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.75rem; font-weight: 900; color: var(--c-white); }
.case-pager__link--prev::after { content: "‹"; left: var(--sp-4); }
.case-pager__link--next::after { content: "›"; right: var(--sp-4); }
.case-pager__link span { display: block; color: var(--c-white); font-size: var(--fs-xl, 1.5rem); font-weight: 900; letter-spacing: .04em; }
.case-pager__link strong { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); font-weight: 700; }