@charset "UTF-8";
/* Nexum 事例紹介プラグイン 追加スタイル */

/* ==========================================================
   事例紹介（case）：一覧カードの複数タグ／詳細ページ
========================================================== */

/* --- 一覧カード：タグを複数並べる --- */
section.archive--case .card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
section.archive--case .card__tags .card__tag { margin-bottom: 0; }
/* 実記事があるときは本文量に応じて伸びるようにする（プレースホルダー時は固定高を維持） */
section.archive--case:not(.archive--placeholder) .card__body { height: auto; min-height: 158px; }
section.archive--case:not(.archive--placeholder) .card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* --- 詳細ページ --- */
.single--case .single-article__head { margin-bottom: 18px; }
.single--case .single-article__meta { flex-wrap: wrap; gap: 10px 12px; }
.single-case__company {
  margin: 0;
  color: #6b6b6b;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 事例サマリ（業種／支援内容／支援期間） */
.case-summary {
  margin: 26px 0 0;
  padding: 22px 28px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fbf9f5;
}
.case-summary__row {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px dashed #e0dcd4;
}
.case-summary__row:first-child { padding-top: 0; }
.case-summary__row:last-child { padding-bottom: 0; border-bottom: 0; }
.case-summary dt {
  flex: 0 0 96px;
  color: #8a7a63;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}
.case-summary dd {
  margin: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
}

/* 成果ハイライト */
.case-results { margin: 28px 0 0; }
.case-results__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #444;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.case-results__title::before {
  width: 22px;
  height: 4px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9c21, #f7c535);
}
.case-results__list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  padding: 20px 18px;
  border: 1px solid #f3d9ae;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf1, #fff);
  text-align: center;
}
.case-result__label { color: #8a7a63; font-size: 14px; font-weight: 700; line-height: 1.3; }
.case-result__value {
  color: #ee8c35;
  font-family: var(--font-en), var(--font-ja);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
}
.case-result__note { color: #8b8b8b; font-size: 12px; line-height: 1.5; }
.case-results__disclaimer { margin: 12px 0 0; color: #999; font-size: 12px; line-height: 1.6; }

/* 記事詳細レイアウトの横スクロール防止
   （既存ルールは body.single-post 限定だったため、事例・ブログの詳細にも効くようにする） */
html:has(.article-layout),
body:has(.article-layout) { overflow-x: hidden; }

/* 目次：件数に応じて伸縮させる */
.article-toc--auto { height: auto; }

/* 本文（インタビュー体裁） */
.single-case__body { margin-top: 44px; font-size: 16px; line-height: 1.95; }
.single-case__body h2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 52px;
  margin: 48px 0 20px;
  padding: 12px 24px;
  border-left: 4px solid #ff9d21;
  background: #f6f6f6;
  color: #3c3c3c;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
}
.single-case__body h3 {
  margin: 36px 0 14px;
  color: #3c3c3c;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.single-case__body p { margin: 0 0 22px; color: #333; }
/* 「ーー」で始まるインタビュアーの質問 */
.single-case__body .interview-q {
  margin: 30px 0 18px;
  padding-left: 16px;
  border-left: 3px solid #dcdcdc;
  color: #666;
  font-weight: 700;
}
/* 話者名 */
.single-case__body .interview-name {
  margin: 0 0 8px;
  color: #ee8c35;
  font-size: 15px;
  font-weight: 700;
}
/* 写真キャプション */
.single-case__body figure { margin: 28px 0; }
.single-case__body figcaption {
  margin-top: 8px;
  color: #8b8b8b;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
/* 引用・ポイントボックス */
.single-case__body .case-point {
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 12px;
  background: #eaf1fa;
  color: #2b3f66;
  font-size: 15px;
  line-height: 1.9;
}
.single-case__body .case-point strong { color: #2e4e8f; }

.single--case .single__back { margin-top: 56px; }

@media (max-width: 768px) {
  section.archive--case:not(.archive--placeholder) .card__body { min-height: 134px; }
  section.archive--case .card__tags { gap: 5px; margin-bottom: 7px; }

  .single-case__company { font-size: 14px; }
  .case-summary { margin-top: 20px; padding: 16px 18px; border-radius: 10px; }
  .case-summary__row { flex-direction: column; gap: 2px; padding: 8px 0; }
  .case-summary dt { flex: none; font-size: 13px; }
  .case-summary dd { font-size: 14px; }

  .case-results { margin-top: 22px; }
  .case-results__title { font-size: 17px; }
  .case-results__list { grid-template-columns: 1fr; gap: 12px; }
  .case-result { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 12px; padding: 14px 16px; text-align: left; }
  .case-result__value { font-size: 26px; }
  .case-result__note { flex: 1 0 100%; }

  .single-case__body { margin-top: 28px; font-size: 14px; line-height: 1.85; }
  .single-case__body h2 { min-height: 0; margin: 32px 0 16px; padding: 10px 14px; font-size: 16px; line-height: 1.45; }
  .single-case__body h3 { margin: 26px 0 10px; font-size: 16px; }
  .single-case__body p { margin-bottom: 18px; }
  .single-case__body .interview-q { margin: 22px 0 14px; padding-left: 12px; }
  .single-case__body .case-point { padding: 16px 18px; font-size: 14px; }
  .single--case .single__back { margin-top: 36px; }
}

/* ----------------------------------------------------------
   冒頭：要約リード＋導入文（本文の最初の見出しより前）
---------------------------------------------------------- */
.single--case .single-article__intro {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  color: #2b2b2b;
  letter-spacing: .01em;
}
.single-case__intro-body {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.95;
  color: #333;
}
.single-case__intro-body p { margin: 0 0 20px; }
.single-case__intro-body p:last-child { margin-bottom: 0; }
.single-case__intro-body figure { margin: 26px 0 0; }
.single-case__intro-body img,
.single-case__body img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.single-case__intro-body figcaption,
.single-case__body figcaption {
  margin-top: 10px;
  color: #8b8b8b;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
/* 「▼実際の制作事例」のような小見出し */
.single-case__body h3 {
  padding-left: 14px;
  border-left: 3px solid #f2a03d;
}

@media (max-width: 768px) {
  .single--case .single-article__intro { font-size: 16px; line-height: 1.7; }
  .single-case__intro-body { margin-top: 16px; font-size: 14px; line-height: 1.85; }
  .single-case__intro-body p { margin-bottom: 16px; }
  .single-case__intro-body figcaption,
  .single-case__body figcaption { font-size: 12px; }
}

/* インタビュアーの質問を見出し相当の強さにする */
.single-case__body .interview-q {
  margin: 38px 0 20px;
  padding-left: 18px;
  border-left: 3px solid #d8d8d8;
  color: #3c3c3c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}
@media (max-width: 768px) {
  .single-case__body .interview-q { margin: 26px 0 14px; padding-left: 12px; font-size: 15px; line-height: 1.6; }
}

/* ----------------------------------------------------------
   記事最上部のアイキャッチ（タイトルより上に配置）
---------------------------------------------------------- */
.single-case__hero {
  margin: 0 0 24px;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}
.single-case__hero img { width: 100%; height: auto; display: block; }
/* 会社名の頭にダッシュを添える */
.single-case__company::before {
  content: "—";
  margin-right: .55em;
  color: #c2c2c2;
  font-weight: 400;
}
@media (max-width: 768px) {
  .single-case__hero { margin-bottom: 18px; border-radius: 10px; }
}

/* ----------------------------------------------------------
   事例カードのサムネイル比率
   事例のアイキャッチは写真ではなく作り込んだ図版のため、
   カード枠（16:10・3:2・2.15:1）でトリミングされると文字が切れる。
   画像がまるごと収まるよう、事例カードだけ 1200×630 と同じ比率にする。
---------------------------------------------------------- */
section.case .card__img,
section.archive--case .card__img {
  aspect-ratio: 1.905 / 1;
  height: auto;
}
section.case .card__img .ph-img,
section.archive--case .card__img .ph-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   本文中の動画埋め込み（縦型ショートは幅を絞って中央に置く）
---------------------------------------------------------- */
.single-case__body .wp-block-embed { margin: 28px 0; }
.single-case__body .wp-block-embed__wrapper { position: relative; }
.single-case__body .wp-block-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.single-case__body .wp-block-embed.wp-embed-aspect-9-16 { max-width: 330px; margin-inline: auto; }
.single-case__body .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
.single-case__body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.single-case__body .wp-block-embed figcaption { margin-top: 10px; color: #8b8b8b; font-size: 13px; text-align: center; }