/* ============================================================
   contents-detail.css — コンテンツ詳細ページ（追尾TOC + 本文）
   article-layout: 左sticky目次 + 右本文の2カラム
   ============================================================ */

/* --- パンくず: 本文カラム（.article-layout-inner max-width:1200px）の左端に揃える。
   pages.cssの既定(var(--side-pad)のみ)は本文が狭いreadingカラムを持つこのページには
   合わないため、後読み込みのこのファイルでoverride（詳細はdocs/css-architecture-plan.md） */
.breadcrumb{padding:16px max(var(--side-pad), calc((100vw - 1200px) / 2))}

/* --- 記事HERO --- */
.article-hero{padding:48px var(--side-pad) 40px}
.article-hero-inner{max-width:1000px;margin:0 auto}
.article-badge{
  display:inline-block;background:var(--brand-light);color:var(--brand-deep);
  font-size:12px;font-weight:700;letter-spacing:0.08em;
  padding:6px 14px;border-radius:4px;margin-bottom:24px;
}
.article-title{
  font-size:clamp(26px,3.4vw,44px);font-weight:900;line-height:1.45;
  letter-spacing:-0.01em;color:var(--text-primary);margin-bottom:24px;
}
.article-meta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:13px;color:var(--text-muted)}
.article-meta time{font-weight:700;color:var(--text-secondary)}

/* --- 著者プロフィール --- */
.author-profile{
  padding:24px 28px;background:var(--bg-light);border-radius:8px;
  margin-top:32px;border-left:3px solid var(--brand);
}
.author-profile-top{
  display:grid;grid-template-columns:80px 1fr auto;gap:20px;
  align-items:start;margin-bottom:16px;
}
.author-profile-avatar img{width:80px;height:80px;border-radius:50%;object-fit:cover;display:block}
.author-profile-head{display:flex;flex-direction:column;gap:4px}
.author-profile-label{
  font-size:11px;color:var(--brand-deep);letter-spacing:0.15em;
  font-weight:700;text-transform:uppercase;
}
.author-profile-name{font-size:18px;font-weight:700;color:var(--text-primary);margin:2px 0;line-height:1.4}
.author-profile-title{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.5}
.author-profile-sns{display:flex;gap:12px;list-style:none;padding:0;margin:0;align-items:center}
.author-profile-sns-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--bg-white);
  color:var(--text-secondary);border:1px solid var(--border);
  transition:all .2s;text-decoration:none;
}
.author-profile-sns-link:hover{background:var(--brand);color:var(--bg-white);border-color:var(--brand);transform:translateY(-1px)}
.author-profile-desc{font-size:14px;color:var(--text-primary);line-height:1.8;margin:0}

@media(max-width:768px){
  .author-profile{padding:20px;margin-top:24px}
  .author-profile-top{grid-template-columns:64px 1fr;gap:16px;margin-bottom:12px}
  .author-profile-avatar img{width:64px;height:64px}
  .author-profile-sns{grid-column:1 / -1;justify-content:flex-start;margin-top:8px}
  .author-profile-name{font-size:16px}
  .author-profile-title{font-size:12px}
  .author-profile-desc{font-size:13px}
  .author-profile-sns-link{width:32px;height:32px}
  .author-profile-sns-link svg{width:16px;height:16px}
}
@media(max-width:480px){
  .author-profile-top{grid-template-columns:1fr;text-align:center}
  .author-profile-avatar{justify-self:center}
  .author-profile-sns{justify-content:center}
  .author-profile-desc{text-align:left}
}

/* --- この記事でわかること（template-parts/contents-toc-preview.php） --- */
.contents-toc-preview{
  background:#F5F9F7;padding:24px;border-radius:8px;margin-bottom:32px;
}
.contents-toc-preview-title{font-weight:700;color:var(--brand-deep);margin-bottom:12px}
.contents-toc-preview ul{list-style:disc;padding-left:20px;margin:0;color:var(--text-secondary)}
.contents-toc-preview ul li{margin-bottom:4px;line-height:1.7}

/* --- レイアウト（左TOC + 右本文） --- */
/* outer(padding)/inner(max-width)を分離: .article-layoutはフルブリードのpaddingのみ、
   幅確定・グリッド構成は子の.article-layout-innerが担う（詳細はdocs/css-architecture-plan.md） */
.article-layout{
  padding:56px var(--side-pad) 96px;
}
.article-layout-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:clamp(220px,22vw,280px) 1fr;
  gap:clamp(40px,5vw,80px);align-items:start;
}

/* --- 追尾TOC --- */
.article-toc{
  position:sticky;top:calc(var(--header-height) + 20px);align-self:start;
  max-height:calc(100vh - 120px);   /* 長い目次はTOC内でスクロール */
  overflow-y:auto;
  scrollbar-width:thin;             /* Firefox */
  scrollbar-color:var(--border) transparent;
}
/* スクロールバー装飾（WebKit、控えめに） */
.article-toc::-webkit-scrollbar{width:4px}
.article-toc::-webkit-scrollbar-track{background:transparent}
.article-toc::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.article-toc::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.article-toc-label{
  font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.article-toc-label::before{content:'';width:24px;height:1.5px;background:var(--brand)}
.article-toc ul{list-style:none;margin:0;padding:0}
.article-toc li{margin-bottom:2px}
.article-toc a{
  display:block;padding:8px 0 8px 16px;font-size:13px;line-height:1.6;
  color:var(--text-muted);text-decoration:none;
  border-left:2px solid var(--border);
  transition:color .2s,border-color .2s;
}
.article-toc a:hover{color:var(--brand-deep)}
.article-toc a.active{color:var(--brand-deep);font-weight:700;border-left-color:var(--brand)}

/* TOC見出し（折りたたみ操作なし。全幅で常に「目次」ラベルとして表示） */
.article-toc-toggle{
  display:flex;align-items:center;
  width:100%;
}

/* --- ミニ目次（タブレット/スマホ限定）---
   TOC本体（.article-toc）をスクロールで通過すると、現在のセクション名を
   表示する1行バーに切り替わる。PC（≥1025px）では常時非表示。 */
.toc-mini{
  display:none;align-items:center;gap:10px;
  position:sticky;top:var(--header-height);z-index:20;
  background:#fff;border-bottom:1px solid var(--border);
  padding:14px var(--side-pad);
  font-size:13px;font-weight:700;color:var(--text-primary);
}
.toc-mini.visible{display:flex}
.toc-mini-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0}
.toc-mini-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1025px){
  .toc-mini{display:none !important}
}

/* --- 本文タイポグラフィ --- */
.article-body{max-width:760px;min-width:0;font-size:15px;line-height:1.95;color:var(--text-primary)}
.article-body > * + *{margin-top:28px}
.article-body h2{
  font-size:clamp(22px,2.5vw,28px);font-weight:900;line-height:1.4;
  color:var(--text-primary);
  margin-top:48px;margin-bottom:20px;
  padding-left:16px;border-left:4px solid var(--brand);border-bottom:none;
  scroll-margin-top:calc(var(--header-height) + 16px);
}
.article-body h2:first-child{margin-top:0}
.article-body h3{
  font-size:clamp(17px,1.8vw,21px);font-weight:700;line-height:1.5;
  margin-top:36px;margin-bottom:16px;color:var(--text-primary);
  padding-left:12px;border-left:2px solid var(--brand-light);scroll-margin-top:calc(var(--header-height) + 16px);
}
.article-body p{color:var(--text-secondary);line-height:1.95}
.article-body strong{font-weight:700;color:var(--text-primary)}
/* マーカー（蛍光ペン風ハイライト）: コンテンツ記事（投稿タイプcontents）専用の装飾。
   .article-bodyはcase_study（支援実績）・post（お知らせ）詳細でも共用クラスのため、
   body.single-contents（WP標準のsingle-{post_type}クラス）でスコープし、
   他の投稿タイプではemタグがブラウザ既定の斜体（semanticな強調のみ）に留まるようにする。 */
body.single-contents .article-body em{
  font-style:normal;font-weight:700;
  background:linear-gradient(transparent 62%, var(--brand-light) 62%);
}
.article-body a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.article-body a:hover{color:var(--brand-darkest)}
.article-body ul,.article-body ol{padding-left:24px;color:var(--text-secondary)}
.article-body ul li{list-style:disc;margin-bottom:12px;line-height:1.85}
.article-body ol li{list-style:decimal;margin-bottom:12px;line-height:1.85}
.article-body img{max-width:100%;height:auto;border-radius:8px;display:block}

/* テーブル（比較表）
   .article-table-wrapで角丸+枠線+横スクロールを持たせ、table自体は
   border-collapse:collapseのため角丸をtable側に持たせず親のwrapに寄せている。 */
.article-table-wrap{
  overflow-x:auto;border:1px solid var(--brand-light);border-radius:8px;
  -webkit-overflow-scrolling:touch;
}
/* min-widthがないとスマホでtableがコンテナ幅まで縮み、セルが折り返して縦長化する。
   min-width指定でtableの実寸を保ち、wrap側のoverflow-x:autoで横スクロールさせる。 */
.article-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.article-body thead th{background:var(--brand-deep);color:#fff;font-weight:700;text-align:left;padding:14px 16px;white-space:nowrap}
.article-body tbody th{background:var(--bg-dark);font-weight:700;text-align:left;padding:14px 16px;white-space:nowrap}
.article-body tbody td{padding:14px 16px;border-bottom:1px solid var(--brand-light);color:var(--text-secondary);white-space:nowrap}
.article-body tbody tr:last-child td{border-bottom:none}
.article-body tbody tr:nth-child(even) td{background:var(--bg-dark)}
@media (max-width:768px){
  .article-body thead th,.article-body tbody td{padding:10px 12px;font-size:13px}
}

/* 引用 */
.article-body blockquote{
  padding:20px 28px;background:var(--bg-dark);
  border-left:4px solid var(--brand);border-radius:0 6px 6px 0;
  font-size:15px;color:var(--text-secondary);
}
.article-body blockquote p{margin:0;font-style:italic;color:var(--text-secondary)}
.article-body blockquote cite{display:block;font-size:12px;color:var(--text-muted);font-style:normal;margin-top:10px}

/* callout / 注釈 */
.article-body .callout{
  padding:20px 24px;background:var(--brand-light);border-radius:8px;
  font-size:14px;color:var(--brand-darkest);line-height:1.8;
}
.article-body .callout strong{display:block;color:var(--brand-deep);margin-bottom:6px;font-size:13px;letter-spacing:0.04em}

/* --- TOCなしの1カラム構成（news-detail.html等、短文の単独記事用） ---
   padding(var(--side-pad))とmax-widthは別要素に分離する
   （同一要素に両方指定すると、side-padが大きい超ワイド画面でwidth:auto計算が
   負値になり0にクランプされてしまうため。.article-body自体のmax-width:760pxは
   既存定義（TOCレイアウト共用）を流用し、ここではmargin:0 autoだけ追加する） */
.article-body-solo{padding:56px var(--side-pad) 0;margin-bottom:40px}
.article-body-solo > .article-body{margin:0 auto}
.article-detail-back{padding:0 var(--side-pad);margin-top:56px;text-align:center}
.article-detail-back-inner{max-width:760px;margin:0 auto}
.btn-back{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border:1.5px solid var(--text-primary);
  font-size:13px;font-weight:700;letter-spacing:0.06em;
  color:var(--text-primary);text-decoration:none;background:transparent;
  transition:background .2s,color .2s,gap .2s;
}
.btn-back::before{content:'←';font-size:15px;transition:transform .2s}
.btn-back:hover{background:var(--text-primary);color:#fff;gap:14px}
.btn-back:hover::before{transform:translateX(-4px)}

/* --- レスポンシブ ---
   タブレット/スマホ（1024px以下）共通：1カラム化。TOCは初期状態で全展開表示し
   （PCと同じ、折りたたみ操作なし）、スクロールで.toc-miniに切り替わる（JS制御）。 */
@media (max-width:1024px){
  .article-layout-inner{grid-template-columns:1fr;gap:0}
  .article-toc{
    position:static;
    background:#fff;border:1px solid var(--border);border-radius:4px;
    padding:20px 20px 8px;
    margin-bottom:32px;
  }
  .article-toc-label{font-size:14px;color:var(--text-primary);letter-spacing:0.08em}
  .article-toc-label::before{display:none}
}
@media (max-width:768px){
  .article-toc{padding:16px 16px 4px}
}

/* --- 記事内CTA（template-parts/contents-cta.php、4種切替）---
   article-body内（本文直後）に配置。白背景+brand-deep枠線の囲み記事風デザインで、
   緑背景のフッター上共通CTA（#footer-cta、sections.css）とは明確に区別する。
   article-body内に入れ子になるため、.article-body h2/a等の既存スタイルより
   優先させるために.article-body配下でのセレクタとして定義している。 */
.article-body .article-cta{
  display:block;background:#fff;border:2px solid var(--brand-deep);border-radius:8px;
  padding:24px 32px;margin-top:48px;
  scroll-margin-top:calc(var(--header-height) + 16px);
}
.article-body .article-cta-eyebrow{
  font-size:12px;font-weight:900;letter-spacing:0.06em;color:var(--brand-deep);
  display:block;
}
.article-body .article-cta-sublabel{
  font-size:12px;font-weight:500;letter-spacing:0.1em;color:var(--text-muted);
  display:block;margin-top:4px;
}
.article-body .article-cta-title{
  font-size:24px;font-weight:900;line-height:1.5;color:var(--text-primary);
  margin:12px 0 0;border-left:none;padding-left:0;
}
.article-body .article-cta-title em{font-style:normal;color:var(--brand-deep)}
.article-body .article-cta-text{
  font-size:17px;line-height:1.9;color:var(--text-secondary);
  margin-top:12px;
}
.article-body .article-cta-actions{margin-top:20px}
.article-body .article-cta-button{
  display:inline-block;background:var(--accent);color:#fff;
  padding:0 32px;height:44px;line-height:44px;
  font-size:18px;font-weight:700;letter-spacing:0.03em;
  text-decoration:none;border-radius:4px;
  transition:background .2s,transform .15s;
}
.article-body .article-cta-button:hover,
.article-body .article-cta-button:focus{background:#C25510;color:#fff;transform:translateY(-2px)}
@media (max-width:768px){
  .article-body .article-cta{padding:20px 24px}
  .article-body .article-cta-title{font-size:20px}
  .article-body .article-cta-text{font-size:15px}
  .article-body .article-cta-button{font-size:15px;padding:0 24px}
}

/* --- 記事末尾FAQ（template-parts/faq-section.php）---
   contents/case_study/postの3投稿タイプで共通利用するため、それぞれ個別に読み込まれる
   contents-detail.cssにまとめて定義する（enqueue.phpのis_singular('contents'|'case_study'|'post')
   分岐で常に読み込まれるファイルのため、case-detail.css側への追加は不要）。
   article-body内に入れ子になるため、幅はarticle-body（max-width:760px）にそのまま
   従わせる（旧来のmax-width:1200px/margin:auto/padding指定は不要になったため撤去）。 */
.article-faq{margin-top:56px;scroll-margin-top:calc(var(--header-height) + 16px)}
.article-faq-title{font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text-primary);border-left:4px solid var(--brand);padding-left:16px}
/* コンテンツ記事はarticle-body内にFAQが入れ子になるため、.article-body h2の
   汎用スタイル（font-size/margin-top等）に上書きされないよう明示的に再指定する */
.article-body .article-faq-title{
  font-size:24px;font-weight:700;margin:0 0 32px;color:var(--text-primary);
  border-left:4px solid var(--brand);padding-left:16px;
}
/* /faq/ページ（page-templates/template-faq.php、.faq-item等）とデザインを統一
   （白背景+枠線、gap/padding/マーク寸法をsections.cssの.faq-*と揃える） */
.article-faq-list{display:flex;flex-direction:column;gap:32px}
.article-faq-item{background:#fff;border:1px solid var(--border);border-radius:8px;padding:32px 36px}
.article-faq-question{font-size:18px;font-weight:700;color:var(--text-primary);display:flex;gap:16px;align-items:flex-start;margin:0 0 20px 0;line-height:1.6}
.article-faq-answer{display:flex;gap:16px;align-items:flex-start}
.article-faq-answer-body{flex:1;line-height:1.9;color:var(--text-secondary);font-size:15px}
.article-faq-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;font-size:15px;flex-shrink:0}
.article-faq-mark-a{background:var(--accent)}
@media (max-width:768px){
  .article-faq-title{font-size:20px}
  .article-body .article-faq-title{font-size:20px}
  .article-faq-item{padding:24px}
  .article-faq-question{font-size:16px}
  .article-faq-answer-body{font-size:14px}
}