:root {
  --color-white: #fff;
  --color-txt: #1e2855;
  --color-accent: #1e78eb;
  --color-accent02: #5e9cf8;
  --color-accent03: #2b7ade;
  --color-gray: #aaa;
  --color-gray02: #c8c8c8;
  --color-gray03: #f6f6f6;
  --color-consulting: #5e9cf8;
  --color-bg: #f4f3ef;
  --color-yellow: #e2f174;
  --color-navy: #47505f;
  --color-dark-navy: #1e2855;
  --color-beige: #f4f3ef;
  --color-red: #e15555;
}

/* =======================================================
bread
======================================================= */
.p-bread {
  width: 85rem;
  padding: 7.8125rem 0 2.9375rem;
  margin: 0 auto;
}

/* =======================================================
コラム詳細の本文幅（Figma 549:5841＝850px、サイド549:6044＝320px、余白90px）
共通common-single.cssの.l-inner幅76.25rem（余白110px・本文810px）は他記事詳細（works/interview）用。
コラムだけ本文が850pxと広いため、ページ専用クラスで.l-innerの幅だけ上書きする。
grid-template-columns: 1fr 20remのまま（共通CSS）で、1fr側が自動で850pxになる。
======================================================= */
.p-column-single__inner {
  width: 78.75rem; /* 1260px＝90+850+90(gap)+320、左右余白90pxになる */
}
@media screen and (max-width: 768px) {
  .p-column-single__inner {
    width: 20.3125rem; /* SPは共通.l-innerと同じ325px幅（Figma 549:6063は左右25px余白） */
  }
}
/* サムネイルの縦横比を固定し、実データの画像比率が違ってもcoverで揃える。
   10/14：Figma比（約1.904:1）だと16:10で作るサムネイル（一覧カードと同じ比率）の上下が切れるため 16:10 に変更 */
.p-column-single__inner .p-single__thumb-wrapper {
  aspect-ratio: 16 / 10;
}
.p-column-single__inner .p-single__thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =======================================================
B19: SPは目次と本文の間、本文の後とも正本にないサイドバー項目を挟まない（Figma 549:6063／549:6093）
正本SPはカテゴリー・関連コラム・CTAのブロックを一切表示せず、本文→AIに聞く→一覧に戻る、と直接つながる。
共通common-single.cssのSPグリッドは .l-single__aside を head→intro→aside→body の順で本文より前に
置いているため、ここで丸ごと非表示にする（single-column.phpでも.--sp版は削除済み）。
======================================================= */
@media screen and (max-width: 768px) {
  .l-single__aside {
    display: none;
  }
}

/* =======================================================
目次（H2自動生成・Figma 549:5849／549:6092）
======================================================= */
.p-single__toc {
  padding: 1.5rem;
  margin-top: 1.625rem;
  background: #f9fafc;
  border-radius: 0;
}
.p-single__toc-ttl {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .p-single__toc-ttl {
    font-size: 1.125rem;
  }
}
/* Figma 549:5851〜5857：番号なしのプレーンな見出しリスト（座標合わせで番号::beforeを削除・2026-10-10） */
.p-single__toc-list {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}
.p-single__toc-item {
  font-size: 0.875rem;
  line-height: 1.8;
}
.p-single__toc-item a {
  color: var(--color-txt);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.p-single__toc-item a:hover {
  text-decoration: none;
}

/* =======================================================
カテゴリー（単記事サイドバー・Figma 549:6044）
======================================================= */
.p-aside__category {
  padding: 1.5rem;
  margin-bottom: 3.25rem; /* Figma 549:6044: category bottom to side CTA. */
  background: #f5f7fb;
  border-radius: 0;
}
.p-aside__category-ttl {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .p-aside__category-ttl {
    font-size: 1.0625rem;
  }
}
.p-aside__category-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
}
.p-aside__category-list a {
  font-size: 1rem;
  color: var(--color-txt);
}
@media screen and (max-width: 768px) {
  .p-aside__category-list a {
    font-size: 0.875rem;
  }
}
.p-aside__category-list a:hover {
  color: var(--color-accent);
}
/* Figma 549:5841 / 549:6084: column typography and spacing are independent of case studies. */
.p-bread { width: 78.75rem; padding: 10rem 0 1.625rem; }
.p-bread__list { justify-content: flex-start; line-height: 1.8; }
.p-bread__item { font-size: .75rem; line-height: 1.8; }
.p-bread__item:last-child { display: none; }
.l-main > article > .p-column-single__inner {
  grid-template-areas: "head aside" "intro aside" "body aside" "ai ai" "btn btn";
  --column-gap: 1.625rem;
}
.p-column-single__inner .p-single__head { padding-bottom: var(--column-gap); }
.p-column-single__inner .p-single__head-intro { letter-spacing: 0; gap: .5rem; margin-bottom: var(--column-gap); font-size: .8125rem; line-height: 1.8; }
.p-column-single__inner .p-single__head-date { display: flex; gap: .5rem; color: inherit; font-size: inherit; line-height: inherit; }
.p-column-single__inner .p-single__head-date-order-wrapper { padding: 0; }
.p-column-single__inner .p-single__head-date-order { font: inherit; }
.p-column-single__inner .p-single__head-cat-wrapper { gap: 0; }
.p-column-single__inner .p-single__head-cat-wrapper::before { content: "｜"; margin-right: .5rem; }
.p-column-single__inner .p-single__head-cat { padding: 0; border: 0; color: inherit; font: inherit; letter-spacing: 0; }
.p-column-single__inner .p-single__head-cat + .p-single__head-cat::before { content: "・"; }
.p-column-single__inner .p-single__head-ttl { font-size: 2rem; font-weight: 700; line-height: 1.8; letter-spacing: 0; }
.p-column-single__inner .p-single__thumb-wrapper { margin-bottom: var(--column-gap); border-radius: .5rem; }
.p-column-single__inner .p-single__overview-def { padding: 1.5rem; gap: .5rem; border: 0; border-radius: 0; background: #f5f7fb; color: var(--color-txt); }
.p-column-single__inner .p-single__overview-dttl { padding: 0; border: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.8; }
.p-column-single__inner .p-single__overview-ditem { font-size: 1rem; line-height: 1.8; letter-spacing: 0; }
.p-column-single__inner .l-single__intro { margin-bottom: var(--column-gap); }
.p-column-single__inner .l-single__aside { padding-top: 5.8125rem; }
.p-aside__category-list a { line-height: 1.8; }
.p-aside__category-list li { line-height: 1.8; }
.p-column-single__inner .l-single__body { margin-bottom: 0; font-size: 1rem; line-height: 1.8; letter-spacing: 0; }
.p-column-single__inner .l-single__body > h2,
.p-column-single__inner .l-single__body > h3 { padding: 0; margin: 0 0 var(--column-gap); font-weight: 700; line-height: 1.8; }
.p-column-single__inner .l-single__body > h2 { font-size: 1.5rem; }
.p-column-single__inner .l-single__body > h3 { font-size: 1.25rem; }
.p-column-single__inner .l-single__body > h2::before,
.p-column-single__inner .l-single__body > h3::before { content: none; }
.p-column-single__inner .l-single__body > p { font-size: 1rem; line-height: 1.8; margin-bottom: var(--column-gap); }
.p-column-single__inner .p-single__bullet-list-wrapper { padding: 0; margin-bottom: var(--column-gap); background: transparent; border-radius: 0; }
.p-column-single__inner .p-single__bullet-list { gap: 0; }
.p-column-single__inner .p-single__bullet-item { font-size: 1rem; line-height: 1.8; }
@media screen and (max-width: 768px) {
  .l-main > article > .p-column-single__inner { grid-template-areas: "head" "intro" "body" "ai" "btn"; --column-gap: 1.5rem; }
  .p-column-single__inner .p-single__head-intro { font-size: .75rem; }
  .p-column-single__inner .p-single__head-ttl { font-size: 1.5rem; }
  .p-column-single__inner .l-single__body > h2 { font-size: 1.3125rem; }
  .p-column-single__inner .l-single__body > h3 { font-size: 1.125rem; }
  .p-column-single__inner .p-single__toc { margin-top: var(--column-gap); }
}

/* 10/10谷：サイドのCTAの下に、AIに聞く（記事）と関連コラム */
@media screen and (min-width: 769px) {
  .p-aside__ai { margin-top: 1.5rem; }
  .p-aside__ai .c-ai-ask--side { width: 100%; }
  .p-aside__ai .c-ai-ask--side .c-ai-ask__label { width: auto; }
  .l-single__aside-inner > .l-single__aside-relation { margin-top: 1.5rem; }
}
@media screen and (max-width: 768px) {
  .p-aside__ai { display: none; } /* SPは本文末の青いボタンで出す */
}