/* ============================================================
   waltsu blog — list & detail
   common.css のデザインシステム（トークン・ヘッダー・フッター・
   パンくず・リッチCTA）を継承し、ブログ固有の見た目を追加する
   ============================================================ */

/* ========================================
   共通：カテゴリチップ（白背景＋カテゴリ色アウトライン）
======================================== */
.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--color-primary);   /* 全カテゴリ waltsu ブルーに統一（一覧・詳細共通） */
}

/* 日付（欧文フォント） */
.post-date {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--color-mute);
}

/* サムネ無し記事のプレースホルダ */
.thumb-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-mute);
  font-family: var(--font-en);
  background:
    linear-gradient(135deg, rgba(3,110,184,.06), rgba(242,157,0,.06)),
    linear-gradient(160deg, #eef2f7 0%, #dde4ee 100%);
}
.thumb-ph b { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; letter-spacing: .06em; }
.thumb-ph i { font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: .32em; opacity: .8; }

/* ========================================
   一覧：2カラムレイアウト（本文 + 右サイドバー）
======================================== */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
}
.blog-main { min-width: 0; }

/* ----- 注目記事（先頭1枚を大きく：横並び画像＋テキスト） ----- */
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  padding-bottom: clamp(36px, 4.5vw, 52px);
  border-bottom: 1px solid var(--color-line);
}
.blog-feature__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  transition: transform .3s var(--ease);
}
.blog-feature__thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-feature__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--color-cta);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.blog-feature__link:hover .blog-feature__thumb { transform: translateY(-3px); }
.blog-feature__link:hover .blog-feature__thumb img { transform: scale(1.04); }
.blog-feature__link:hover { opacity: 1; }
.blog-feature__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.blog-feature__title {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--color-ink);
  transition: color .2s var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;  /* タイトルは最大2行、超過は… */
}
.blog-feature__link:hover .blog-feature__title { color: var(--color-primary); }
.blog-feature__excerpt {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-feature__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.blog-feature__more .i-arrow { transition: transform .2s var(--ease); }
.blog-feature__link:hover .blog-feature__more .i-arrow { transform: translateX(4px); }

/* ----- カードグリッド（2列） ----- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 44px) clamp(20px, 2.4vw, 30px);
}
/* 新着記事カード：common.css の .blog-card（濃紺グラデCTA）が漏れて適用されるのを打ち消し、
   背景なし＋グレー枠のアウトラインカードにする */
.blog-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* common.css の .blog-card{align-items:center} 漏れを打ち消し、サムネ/リンクを幅いっぱいに（WP本番のみサムネが潰れる不具合対策） */
  background: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: clamp(14px, 1.6vw, 18px);
  overflow: hidden;
  box-shadow: none;   /* homepage .blog-card の影を一覧カードに波及させない */
}
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: var(--color-ink); }
.blog-card__link:hover { opacity: 1; }
.blog-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  transition: transform .3s var(--ease);
}
.blog-card__thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card__link:hover .blog-card__thumb { transform: translateY(-3px); }
.blog-card__link:hover .blog-card__thumb img { transform: scale(1.05); }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 15px 2px 0; flex: 1 1 auto; }
.blog-card__meta { display: flex; align-items: center; gap: 10px; }
.blog-card__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--ease);
}
.blog-card__link:hover .blog-card__title { color: var(--color-primary); }
.blog-card__excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-mute);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 準備中（未作成記事）：href を外して無効化したリンクの表示。404を出さず、準備中バッジで明示 */
.blog-card__link--soon { cursor: default; }
.blog-card__link--soon:hover .blog-card__title { color: var(--color-ink); }
.blog-card__link--soon .blog-card__thumb::after {
  content: "準備中";
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 3px 10px;
  background: rgba(10, 37, 64, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 4px;
}
.blog-popular__item--soon { cursor: default; opacity: .5; }

/* ----- ページネーション ----- */
.blog-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(44px, 5vw, 64px);
}
.blog-pager__btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.blog-pager__btn:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
.blog-pager__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; cursor: default; }
.blog-pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.blog-pager__dots { padding: 0 4px; color: var(--color-mute); }

/* ========================================
   サイドバー（一覧・詳細 共通）
======================================== */
.blog-side { min-width: 0; }
.blog-side__block + .blog-side__block { margin-top: clamp(32px, 4vw, 44px); }
.blog-side__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-ink);
}
.blog-side__heading-en {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--color-ink);
}
.blog-side__heading-jp {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-mute);
}

/* 検索 */
.blog-search { display: flex; gap: 0; }
.blog-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--color-ink);
  background: #fff;
}
.blog-search__input::placeholder { color: var(--color-mute); }
.blog-search__input:focus { outline: none; border-color: var(--color-primary); }
/* iOS Safari：入力欄のフォントが16px未満だとフォーカス時に自動ズーム（画面が寄る）するため、
   モバイル幅では16pxに引き上げてズームを抑止（サイトのフォーム共通ルール） */
@media (max-width: 980px) {
  .blog-search__input { font-size: 16px; }
}
.blog-search__btn {
  flex: 0 0 auto;
  width: 50px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-primary);
  color: #fff;
  transition: background-color .2s var(--ease);
}
.blog-search__btn:hover { background: var(--color-primary-dark); }

/* カテゴリ一覧 */
.blog-cat-list { display: flex; flex-direction: column; }
.blog-cat-list li + li { border-top: 1px solid var(--color-line); }
.blog-cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: color .2s var(--ease), padding .2s var(--ease);
}
.blog-cat-list a::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-primary);
  font-weight: 700;
}
.blog-cat-list a span:first-of-type { flex: 1 1 auto; }
.blog-cat-list a:hover { color: var(--color-primary); opacity: 1; padding-left: 8px; }
.blog-cat-list__count { font-family: var(--font-en); font-size: 12px; color: var(--color-mute); }

/* 人気記事ランキング */
.blog-popular { display: flex; flex-direction: column; gap: 16px; }
.blog-popular__item { display: grid; grid-template-columns: 30px 72px 1fr; gap: 12px; align-items: center; color: var(--color-ink); }
.blog-popular__rank {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--color-line);
}
.blog-popular__item:nth-child(1) .blog-popular__rank { color: var(--color-accent); }
.blog-popular__item:nth-child(2) .blog-popular__rank { color: #9aa7b8; }
.blog-popular__item:nth-child(3) .blog-popular__rank { color: #c69a6b; }
.blog-popular__thumb {
  position: relative;
  aspect-ratio: 16 / 10;   /* = 1.6:1。PICK UP（.blog-feature__thumb）と記事カード（.blog-card__thumb）に揃える */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.blog-popular__thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.blog-popular__thumb .thumb-ph b { font-size: 12px; }
.blog-popular__thumb .thumb-ph i { display: none; }
.blog-popular__title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--ease);
}
.blog-popular__item:hover .blog-popular__title { color: var(--color-primary); }

/* タグクラウド */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tags a {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.blog-tags a::before { content: "#"; margin-right: 2px; color: var(--color-primary); }
.blog-tags a:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }

/* サイドCTA（バナー） */
.blog-side-cta {
  display: block;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 30px) clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  text-align: center;
}
/* 斜線テクスチャ（リッチCTA調） */
.blog-side-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(10,37,64,.035) 0 1px, transparent 1px 8px);
}
.blog-side-cta > * { position: relative; z-index: 1; }
.blog-side-cta:hover { opacity: 1; }
.blog-side-cta__en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-cta);
}
.blog-side-cta__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-ink);
}
.blog-side-cta__title .is-em { color: var(--color-cta); }
.blog-side-cta__text {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-ink-soft);
}
.blog-side-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-cta);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 0 var(--color-cta-dark);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s var(--ease);
}
.blog-side-cta:hover .blog-side-cta__btn {
  background: var(--color-cta-dark);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-cta-dark);
}
.blog-side-cta__arrow {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ========================================
   詳細：レイアウト
======================================== */
.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
}
.blog-article { min-width: 0; }

/* ----- 記事ヘッダー ----- */
.article-head { margin-bottom: clamp(28px, 3.4vw, 40px); }
.article-head__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.article-head__title {
  margin: 0 0 20px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--color-primary); /* h1: waltsuブルー */
}
.article-head__info {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.article-head__author { display: inline-flex; align-items: center; gap: 10px; }
.article-head__avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-primary-soft);
  flex: 0 0 auto;
}
.article-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-head__author-name { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.article-head__author-role { font-size: 11px; color: var(--color-mute); }
.article-head__read {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-mute); letter-spacing: .03em;
}

/* アイキャッチ */
.article-hero {
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);   /* 影→薄いグレーの縁に変更 */
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- 目次 ----- */
.article-toc {
  margin: 0 0 clamp(32px, 4vw, 44px);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
/* 目次は本文の最初の h2 直前に差し込む（導入文の下）ため、上下に margin 30px を確保 */
.entry-content .article-toc { margin: 30px 0; }
/* 目次直後に来る最初の h2 の上余白は目次の margin に任せて詰める */
.entry-content .article-toc + h2 { margin-top: 0; }
.article-toc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}
.article-toc__title::before {
  content: "";
  width: 18px; height: 18px;
  background: var(--color-primary);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}
/* 見出し行（タイトル + 右上の開閉ボタン） */
.article-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.article-toc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-mute);
  transition: color .2s var(--ease);
}
.article-toc__toggle:hover { color: var(--color-primary); }
.article-toc__toggle-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;   /* 開＝▲。閉じると180°回転で▼ */
  transition: transform .2s var(--ease);
}
/* 閉じた状態：本文リストを隠し、キャレットを反転 */
.article-toc.is-collapsed .article-toc__list { display: none; }
.article-toc.is-collapsed .article-toc__toggle-caret { transform: rotate(180deg); }

/* 「01」を見出しの「目次」テキスト位置に合わせる（アイコン18px＋gap10px＝28px 右へ） */
.article-toc__list { counter-reset: toc; display: flex; flex-direction: column; gap: 2px; padding-left: 28px; }
.article-toc__item--h2 { counter-increment: toc; }
.article-toc__list a {
  display: flex;
  gap: 10px;
  padding: 8px 2px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-ink-soft);
  transition: color .2s var(--ease);
}
.article-toc__item--h2 > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-primary);
  flex: 0 0 auto;
}
/* h3：字下げ＋ダッシュのサブマーカー（番号なし） */
.article-toc__item--h3 { padding-left: 30px; }
.article-toc__item--h3 > a { padding: 5px 2px; font-size: 12.5px; color: var(--color-mute); }
.article-toc__item--h3 > a::before {
  content: "–";
  font-weight: 700;
  color: var(--color-primary);
  flex: 0 0 auto;
}
.article-toc__list a:hover { color: var(--color-primary); opacity: 1; }

/* 本文内に差し込んだ目次を .entry-content の本文装飾（a の下線/太字・p の行間 等）から保護し、
   元のクリーンな目次デザインを維持する。specificity を .entry-content 系より上げて確実に上書き。 */
.entry-content .article-toc__title { font-size: 15px; line-height: 1.4; color: var(--color-ink); }
.entry-content .article-toc__list a { text-decoration: none; font-weight: 600; color: var(--color-ink-soft); }
.entry-content .article-toc__item--h3 > a { font-weight: 600; color: var(--color-mute); }
.entry-content .article-toc__list a:hover { color: var(--color-primary); opacity: 1; }

/* ========================================
   本文（WordPress .entry-content 相当）
======================================== */
.entry-content {
  font-size: 16px;
  line-height: 2;
  letter-spacing: .03em;
  color: var(--color-ink);
}
.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content > * + * { margin-top: 1.6em; }

.entry-content h2 {
  margin: 2.2em 0 .2em;
  padding: 4px 0 4px 16px;
  border-left: 5px solid var(--color-primary);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--color-primary); /* h2: waltsuブルー */
}
.entry-content h3 {
  margin: 1.9em 0 .2em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-primary); /* h3: waltsuブルー */
}
.entry-content h3::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--color-primary); /* h3のポイント: waltsuブルー */
  transform: translateY(-1px);
}
.entry-content h4 {
  margin: 1.6em 0 .2em;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.entry-content p { font-size: 16px; line-height: 2; color: var(--color-ink); }
.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.entry-content a:hover { opacity: .7; }
.entry-content strong { font-weight: 700; color: var(--color-ink); background: linear-gradient(transparent 62%, rgba(242,157,0,.32) 62%); }

/* リスト */
.entry-content ul, .entry-content ol { padding-left: 0; }
.entry-content ul { list-style: none; }
.entry-content ul li { position: relative; padding-left: 24px; line-height: 1.7; }
.entry-content ul li + li { margin-top: 4px; }
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 3px; top: .62em;
  width: 9px; height: 9px;
  background: var(--color-primary);
  border-radius: 2px;
}
/* 本文の順序リスト（青丸番号）。目次 .article-toc__list は本文内に差し込まれても対象外にする */
.entry-content ol:not(.article-toc__list) { list-style: none; counter-reset: ol; }
.entry-content ol:not(.article-toc__list) li { position: relative; padding-left: 38px; line-height: 1.7; counter-increment: ol; }
.entry-content ol:not(.article-toc__list) li + li { margin-top: 4px; }
.entry-content ol:not(.article-toc__list) li::before {
  content: counter(ol);
  position: absolute;
  left: 0; top: .15em;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
}

/* 引用 */
.entry-content blockquote {
  position: relative;
  margin-inline: 0;
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 34px);
  padding-left: clamp(40px, 5vw, 56px);
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.95;
}
.entry-content blockquote::before {
  content: "“";
  position: absolute;
  left: 16px; top: 8px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: var(--color-primary);
  opacity: .35;
}
.entry-content blockquote p { font-size: 15px; }

/* 画像 */
.entry-content figure { margin-inline: 0; }
.entry-content img { border-radius: var(--radius-md); }
.entry-content figcaption { margin-top: 10px; font-size: 12.5px; color: var(--color-mute); text-align: center; letter-spacing: .02em; }

/* テーブル：外枠=影ヒント用（スクロールしない）／内側 __viewport=横スクロール本体 */
.entry-content .table-scroll { position: relative; }
.entry-content .table-scroll__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* スクロールバーも可視化（非オーバーレイ環境向け。iOS等はオーバーレイのため下の影ヒントで担保） */
.entry-content .table-scroll__viewport { scrollbar-width: thin; scrollbar-color: rgba(3, 110, 184, .5) rgba(0, 0, 0, .07); }
.entry-content .table-scroll__viewport::-webkit-scrollbar { height: 9px; -webkit-appearance: none; }
.entry-content .table-scroll__viewport::-webkit-scrollbar-track { background: rgba(0, 0, 0, .07); border-radius: 5px; }
.entry-content .table-scroll__viewport::-webkit-scrollbar-thumb { background: rgba(3, 110, 184, .5); border-radius: 5px; }
/* 右端に「まだ右へ続く」影。スクロール可能かつ終端でないときだけ表示（JSが is-scrollable / at-end を付与） */
.entry-content .table-scroll::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
  background: linear-gradient(to right, rgba(10, 37, 64, 0), rgba(10, 37, 64, .16));
  opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none;
}
.entry-content .table-scroll.is-scrollable:not(.at-end)::after { opacity: 1; }
/* 左端の影（先頭でないとき）。スクロール位置の手掛かりに */
.entry-content .table-scroll::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 26px;
  background: linear-gradient(to left, rgba(10, 37, 64, 0), rgba(10, 37, 64, .12));
  opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none; z-index: 1;
}
.entry-content .table-scroll.is-scrollable:not(.at-start)::before { opacity: 1; }
/* テーブル：三和ニードル参考のミニマルなグリッド（淡いグレーの細罫線・上下中央・太字なし）＋行を「背景なし×ブルー」の交互に */
.entry-content table { width: 100%; border-collapse: collapse; border: 1px solid rgba(0, 0, 0, .1); font-size: 15px; line-height: 1.6; }
.entry-content th, .entry-content td { padding: 6px 20px; border: 1px solid rgba(0, 0, 0, .1); text-align: left; vertical-align: middle; font-weight: 400; color: var(--color-ink); }
/* 概要紹介テーブル（case-single）参考：奇数=背景なし（透明）／偶数=ブルー（--color-primary-soft #e8f1f9） */
.entry-content tbody tr:nth-child(odd) td { background: transparent; }
.entry-content tbody tr:nth-child(even) td { background: var(--color-primary-soft); }
/* 見出しセル（thead / 行頭 th）がある表のみ淡いグレーで軽く強調。プレーンな td 表には影響しない */
.entry-content thead th { background: var(--color-bg-alt); font-weight: 700; }
.entry-content tbody th { background: var(--color-bg-alt); font-weight: 700; white-space: nowrap; }
/* 本文カラムが 540px 未満（2カラム時の本文カラムやSP等）でも詰めず、はみ出し分を横スクロール。
   ブログは ≤980px で単カラム化するうえ 2カラム時の本文カラムも狭い(≈500px)ため、
   ≤560px 限定ではなく無条件に適用してこの帯での崩れ（押し込み・過剰な折返し）を防ぐ。
   本文カラムが 540px 以上あるワイド表示では効果ゼロ（従来どおり width:100%）。 */
.entry-content .table-scroll__viewport > table { min-width: 540px; }
/* 各列に読みやすい最小幅を確保。列数×120px が本文カラムを超える表は、PC でも潰さず横スクロール。
   収まる表（少列）は従来どおり width:100% でフィット（内容に応じて折返し）。 */
.entry-content .table-scroll__viewport th,
.entry-content .table-scroll__viewport td { min-width: 120px; }

/* 区切り */
.entry-content hr { border: 0; border-top: 1px dashed var(--color-line); margin: 2.4em 0; }

/* インラインコード */
.entry-content code {
  padding: 2px 7px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13.5px;
  color: var(--color-cta);
}

/* ポイントボックス（装飾） */
.note-box {
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 2.8vw, 30px);
  background: var(--color-primary-soft);
  border: 1px solid rgba(3,110,184,.18);
  border-radius: var(--radius-md);
}
.note-box__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--color-primary-dark);
}
.note-box__label::before { content: "✓"; font-weight: 900; }
.note-box p { margin: 0; font-size: 15px; line-height: 1.95; }
.note-box ul { margin: 8px 0 0; }

/* 記事内インラインCTA */
.cta-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: clamp(24px, 3vw, 32px) clamp(26px, 3.4vw, 38px);
  background: linear-gradient(160deg, var(--color-ink) 0%, #16344f 100%);
  border-radius: var(--radius-md);
  color: #fff;
}
.cta-inline__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.5; }
.cta-inline__text { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.8); }
.cta-inline__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px;
  background: var(--color-cta);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.cta-inline__btn .i-arrow { transition: transform .2s var(--ease); }
.cta-inline__btn:hover { background: var(--color-cta-dark); opacity: 1; }
.cta-inline__btn:hover .i-arrow { transform: translateX(4px); }
@media (max-width: 560px) {
  .cta-inline { grid-template-columns: 1fr; text-align: center; }
  .cta-inline__btn { justify-content: center; }
}

/* ========================================
   記事フッター（シェア・著者・前後・関連）
======================================== */
/* 記事末尾のリッチCTA。装飾は common.css の .cta-rich。ここでは前後の余白だけ指定する。
   本文の直後（SHARE の区切り線の上）に置く。下の余白は SHARE 側の margin/padding が担う。 */
.cta-rich { margin: clamp(40px, 5vw, 56px) 0 0; }

.article-share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--color-line);
}
.article-share__label { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-mute); }
.article-share__links { display: flex; gap: 10px; }
.article-share__btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.article-share__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); opacity: 1; }

/* 著者ボックス */
.author-box {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: clamp(32px, 4vw, 44px);
  padding: clamp(24px, 3vw, 30px);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.author-box__avatar { width: 72px; height: 72px; border-radius: 999px; overflow: hidden; background: var(--color-primary-soft); }
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box__role { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--color-primary); }
.author-box__name { margin: 4px 0 8px; font-size: 16px; font-weight: 800; color: var(--color-ink); }
.author-box__bio { margin: 0; font-size: 13px; line-height: 1.85; color: var(--color-ink-soft); }

/* 前後記事ナビ */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(36px, 4.5vw, 52px);
}
.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.article-nav__link:hover { border-color: var(--color-primary); background: var(--color-primary-soft); opacity: 1; }
.article-nav__dir { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--color-mute); }
.article-nav__link--next { text-align: right; }
.article-nav__title { font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-nav__link:hover .article-nav__title { color: var(--color-primary); }
.article-nav__link--prev.is-empty, .article-nav__link--next.is-empty { visibility: hidden; }

/* 一覧へ戻る */
.article-back { margin-top: clamp(36px, 4.5vw, 52px); text-align: center; }
.article-back a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 46px;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-ink);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.article-back a:hover { background: var(--color-ink); color: #fff; opacity: 1; }
.article-back__arrow { font-family: var(--font-en); font-size: 13px; }

/* ========================================
   関連記事（フル幅・3列）
======================================== */
.related-posts { margin-top: clamp(56px, 7vw, 88px); }
.related-posts__heading { text-align: center; margin-bottom: clamp(32px, 4vw, 44px); }
.related-posts__heading .section-eyebrow { display: block; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 32px);
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 980px) {
  .blog-layout,
  .blog-article-layout {
    grid-template-columns: 1fr;
    gap: clamp(48px, 7vw, 64px);
  }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature__thumb { order: -1; }
}
@media (max-width: 860px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .blog-grid { gap: 28px 16px; }
  .article-head__info { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 520px) {
  .blog-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; }
}

/* SP: 本文・見出しを縮小（参考: tnksanwa / GOLD THEME。PC16px→SP14px） */
@media (max-width: 560px) {
  .entry-content { font-size: 14px; line-height: 1.9; }
  .entry-content p { font-size: 14px; line-height: 1.9; }
  .entry-content ul li, .entry-content ol li { line-height: 1.6; }
  .entry-content h2 { font-size: 19px; }
  .entry-content h3 { font-size: 17px; }
  .entry-content h4 { font-size: 15px; }
  .entry-content blockquote p { font-size: 13.5px; }
  /* SP: 記事タイトルを24pxに */
  .article-head__title { font-size: 24px; }
}

/* ========================================
   ブログ ヒーロー（FV）
======================================== */
.blog-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, #0a2540 0%, #073b66 45%, var(--color-primary) 100%);
  color: #fff;
  padding-block: clamp(20px, 2.6vw, 38px);
}
/* 装飾グラデ（アクセント橙＋ブルーの光） */
.blog-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 90% 6%, rgba(242,157,0,.22), transparent 62%),
    radial-gradient(680px 520px at 2% 104%, rgba(255,255,255,.10), transparent 60%);
}
/* 背景の巨大アウトライン英字「BLOG」 */
.blog-hero__bgtext {
  position: absolute;
  right: clamp(8px, 2vw, 48px);
  bottom: 0.12em;
  z-index: 0;
  font-family: var(--font-en);
  font-size: clamp(92px, 15vw, 240px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.14);
  user-select: none;
  pointer-events: none;
}
.blog-hero__inner { position: relative; z-index: 1; }
.blog-hero__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.blog-hero__title {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #fff;
}
.blog-hero__title em {
  font-style: normal;
  color: var(--color-accent);
}
.blog-hero__lead {
  margin: 0;
  max-width: 680px;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .03em;
  color: rgba(255,255,255,.82);
}
/* SP: ヒーロー（FV）の文字だけ縮小（PCは従来サイズのまま） */
@media (max-width: 560px) {
  .blog-hero__eyebrow { font-size: 12px; margin-bottom: 8px; }
  .blog-hero__title { font-size: 22px; margin-bottom: 14px; }
  .blog-hero__lead { font-size: 12px; }
}
/* SP：リード文の「の」での強制改行をなくす（PCのみ改行） */
@media (max-width: 768px) {
  .blog-hero__lead .br-pc { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .blog-hero__bgtext { transition: none; }
}

/* ヘッダーはTOP（common.css）に統一。以前のブログ専用の微調整（nav詰め・13.5px化）は
   TOPとの差分の原因になっていたため撤去。ナビ項目はheader.php共通で、TOP同様>1200pxでのみ表示。 */

/* ========================================
   ピックアップ カルーセル
======================================== */
.pickup {
  position: relative;
  margin-bottom: clamp(44px, 5.5vw, 68px);
  /* 左右に矢印スペースを確保（矢印がカードに重ならないように） */
  padding-inline: clamp(50px, 5vw, 74px);
}
.pickup__viewport { overflow: hidden; }
.pickup__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pickup__track::-webkit-scrollbar { display: none; }
.pickup__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
/* カルーセル内の横長カードは罫線・余白をリセット */
.pickup .blog-feature {
  margin: 0;
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
}
/* カード内の画像に付く影を消す（四隅の不自然な影を防ぐ） */
.pickup .blog-feature__thumb,
.pickup .blog-feature__link:hover .blog-feature__thumb {
  box-shadow: none;
}
/* 左右ナビ */
.pickup__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--color-ink);
  font-size: 0; /* テキスト矢印(‹ ›)を隠し、下の CSS 描画チェブロンで完全中央化 */
  line-height: 1;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
/* 矢印は border 2辺で描く山括弧。flex で箱を中央化し、tip 偏りを translate で微調整して円の上下左右中央に置く */
.pickup__nav::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.pickup__nav--prev::before { transform: translateX(2px) rotate(-135deg); }
.pickup__nav--next::before { transform: translateX(-2px) rotate(45deg); }
.pickup__nav:hover { background: var(--color-primary); color: #fff; opacity: 1; }
.pickup__nav--prev { left: 2px; }
.pickup__nav--next { right: 2px; }
/* ドット */
.pickup__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}
.pickup__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-line);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.pickup__dot:hover { background: var(--color-mute); }
.pickup__dot.is-active { background: var(--color-primary); transform: scale(1.3); }
@media (max-width: 640px) {
  .pickup { padding-inline: 0; }
  /* SP: 左右の矢印を撤去（スワイプ＋ドットで操作） */
  .pickup__nav { display: none; }
}

/* ========================================
   新着セクション見出し
======================================== */
.blog-section-head { margin: 0 0 clamp(22px, 2.8vw, 30px); }
.blog-section-title {
  margin: 4px 0 0;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-ink);
}

/* ========================================
   下部ウィジェット（旧サイドバー）
======================================== */
.blog-widgets {
  margin-top: clamp(56px, 7vw, 88px);
  padding-block: clamp(48px, 6vw, 76px);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
}
.blog-widgets__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.blog-widgets .blog-side__block + .blog-side__block { margin-top: 28px; }
@media (max-width: 900px) {
  .blog-widgets__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
}
@media (max-width: 520px) {
  .blog-widgets__grid { grid-template-columns: 1fr; }
}

/* ========================================
   一覧グリッド（2カラム左側・2列）のレスポンシブ
======================================== */
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; row-gap: 0; }
  /* SP: 新着記事カードの間に区切り線 */
  .blog-grid .blog-card + .blog-card {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--color-line);
  }
}

/* ブログでは右下フローティングCTAを非表示 */
.floating-cta { display: none; }

/* ========================================
   記事メタのタグ（カテゴリと併記）
======================================== */
.blog-card__tags,
.blog-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}
.blog-card__tags span,
.blog-feature__tags span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-mute);
  letter-spacing: .02em;
}
.blog-card__tags span::before,
.blog-feature__tags span::before {
  content: "#";
  margin-right: 1px;
  color: var(--color-primary);
}
.blog-feature__tags {
  margin-bottom: 18px;
}
.blog-feature__tags span { font-size: 12.5px; }

/* ========================================
   詳細ページ：サイドバーの下端追従（sticky）
   スクロールでサイドバー下端が画面下まで来たら固定され、
   本文を読み進めても人気記事・CTAが画面内に留まる
======================================== */
@media (min-width: 981px) {
  /* サイドバー追従は blog.js が制御。aside を基準にするため relative + 本文と同じ高さ */
  .blog-article-layout .blog-side { align-self: stretch; position: relative; }
  .blog-article-layout .blog-side__inner { will-change: top; }
}

/* ========================================
   記事ヘッダーのタグ（タイトル直下）
======================================== */
.article-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 2px;
}
.article-head__tags span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mute);
  letter-spacing: .02em;
}
.article-head__tags span::before {
  content: "#";
  margin-right: 2px;
  color: var(--color-primary);
}

/* PC（>768px）：カテゴリ/日付/タグを14px、カテゴリ・タイトル・タグの縦間隔を詰める */
@media (min-width: 769px) {
  .article-head__meta { margin-bottom: 12px; }
  .article-head__meta .cat-chip { font-size: 14px; }
  .article-head__meta .post-date { font-size: 14px; }
  .article-head__title { margin-bottom: 12px; }
  .article-head__tags span { font-size: 14px; }
}

/* ========================================
   著者カード（この記事を書いた人）
======================================== */
.author-card {
  margin-top: clamp(36px, 4.5vw, 52px);
}
.author-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--color-ink);
}
.author-card__heading::before {
  content: "";
  width: 5px;
  height: 21px;
  background: var(--color-primary);
  border-radius: 2px;
}
.author-card__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 2.8vw, 34px);
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fff;
}
.author-card__avatar {
  width: 200px;
  height: auto;
  aspect-ratio: 1.6 / 1;
  align-self: start;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card__avatar svg { width: 46px; height: 46px; color: var(--color-mute); }
.author-card__role {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-primary);
}
.author-card__name {
  margin: 0 0 6px;
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: .02em;
}
.author-card__yomi {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--color-mute);
}
.author-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 0;   /* 経歴の下＝最後尾に配置 */
}
.author-card__tags span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mute);
}
.author-card__tags span::before {
  content: "#";
  margin-right: 2px;
  color: var(--color-primary);
}
.author-card__bio {
  margin: 0 0 8px;   /* 経歴の下にタグを配置 */
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-ink-soft);
}
/* SP：著者カードを case/sample「この事例の担当者」のデザインに合わせる
   （見出し=ネイビー＋下線アクセント／本体=枠なしの写真1.6:1＋小さめテキスト横並び） */
@media (max-width: 768px) {
  .author-card__heading {
    display: block;
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #d9d9d9;
    color: #1b254d;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.005em;
    line-height: 1.35;
  }
  .author-card__heading::before {
    position: absolute;
    left: 0;
    top: auto;
    bottom: -2px;
    width: 120px;
    height: 2px;
    background: #1b254d;
    border-radius: 0;
  }
  .author-card__body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: #fff;
  }
  .author-card__avatar {
    width: 120px;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.6 / 1;
    border-radius: 2px;
    background: none;
    flex-shrink: 0;
  }
  .author-card__role {
    margin: 0 0 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    color: var(--color-primary);   /* PCと同じブランドブルー */
  }
  .author-card__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    color: var(--color-ink);
  }
  .author-card__yomi {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    opacity: .7;
  }
  .author-card__tags { display: flex; margin-top: 6px; gap: 2px 16px; }  /* タグ表示・改行時の行間を詰める */
  .author-card__tags span { font-size: 10px; }   /* 役職と同じサイズ */
  .author-card__bio {
    margin: 0;
    font-size: 10px;
    line-height: 1.7;
    opacity: .7;
  }
}

/* ==========================================================================
   監修者（/blog/supervision/）
   ・記事内カード … author-card を流用し、差分だけ --supervisor で上書きする
     （執筆者カードと同じ見た目にしたいので、専用スタイルを作らない）
   ・一覧／詳細  … sv-* 。ブログのカードと同じトークンで揃える
   ========================================================================== */

/* --- 記事内の監修者（「この記事のゴール」の上に出す） ---
   見出し（▌この記事を監修した人）→ 写真＋役職・名前／罫線／プロフィール（3行で省略）→ 詳しく見る。
   リンクは「詳しく見る」だけ。本文の中に置くので .entry-content の a / p を打ち消している。 */
.sv-inline {
  margin-bottom: clamp(26px, 3.2vw, 36px);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 34px);
  background: #fafafa;
  border-radius: var(--radius-md);
}
/* .entry-content p（16px / line-height 2）を打ち消す。
   個別指定にも p を付けること（`.entry-content .sv-inline p` は要素セレクタを含むぶん
   詳細度が高く、クラスだけの指定では負ける） */
.entry-content .sv-inline p { margin: 0; color: inherit; }
/* 見出しは記事末尾の author-card と同じ意匠（青い縦線＋太字）に揃える */
.sv-inline__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--color-ink);
}
.entry-content .sv-inline p.sv-inline__heading { font-size: 20px; line-height: 1.5; margin-bottom: 20px; }
.sv-inline__heading::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 19px;
  background: var(--color-primary);
  border-radius: 2px;
}
.sv-inline__head {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: center;
}
.sv-inline__avatar {
  display: block;
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.sv-inline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-inline__role {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.entry-content .sv-inline p.sv-inline__role { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.sv-inline__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.4;
  color: var(--color-ink);
}
.entry-content .sv-inline p.sv-inline__name { font-size: 22px; line-height: 1.4; }
/* 名前の右にヨミを並べる */
.sv-inline__yomi {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--color-mute);
}
/* 罫線から下がプロフィール本文。3 行を超えたぶんは … で省略し、続きは詳細ページで読ませる */
.sv-inline__detail {
  margin-top: clamp(20px, 2.6vw, 26px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--color-line);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.sv-inline__more {
  margin-top: 14px;
  text-align: right;
}
.entry-content .sv-inline p.sv-inline__more { line-height: 1.6; }
/* リンクはこのボタンだけ（ブロック全体はリンクにしない） */
.sv-inline__more a,
.entry-content .sv-inline__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-primary);
  text-decoration: none;
}
.entry-content .sv-inline__more a:hover { text-decoration: underline; }
.sv-inline__more a span { transition: transform .2s var(--ease); }
.sv-inline__more a:hover span { transform: translateX(3px); }

/* --- 監修者一覧 --- */
.sv-lead {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
.sv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 22px);
}
.sv-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sv-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.sv-card__link {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
  padding: clamp(18px, 2.2vw, 26px);
  text-decoration: none;
  color: inherit;
}
.sv-card__avatar {
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.sv-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-card__role {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.sv-card__name {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--color-ink);
}
.sv-card__yomi {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mute);
}
.sv-card__bio {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-ink-soft);
  /* 3行を超えたぶんは … で省略。続きは詳細ページで読ませる */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.sv-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sv-card__count {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-mute);
}
/* カード全体が <a> なので、これは見た目だけのラベル（入れ子の a は作れない） */
.sv-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-primary);
}
.sv-card__more span { transition: transform .2s var(--ease); }
.sv-card__link:hover .sv-card__more span { transform: translateX(3px); }

/* --- 監修者詳細 ---
   上段＝円形サムネ + 名前まわり、罫線をはさんで下段＝プロフィール本文（全幅）。 */
.sv-profile {
  margin-bottom: clamp(36px, 4.5vw, 52px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fff;
}
.sv-profile__head {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(24px, 3.4vw, 44px);
  align-items: center;
}
.sv-profile__avatar {
  display: block;
  width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.sv-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-profile__role {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.sv-profile__name {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--color-ink);
}
.sv-profile__yomi {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--color-mute);
}
.sv-profile__detail {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--color-line);
}
.sv-profile__detail p {
  margin: 0 0 1.1em;
  font-size: 14.5px;
  line-height: 2;
  color: var(--color-ink-soft);
}
.sv-profile__detail h2 {
  margin: 2em 0 .7em;
  padding: 2px 0 2px 12px;
  border-left: 4px solid var(--color-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--color-ink);
}
.sv-profile__detail h3 {
  margin: 1.8em 0 .7em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--color-ink);
}
.sv-profile__detail ul,
.sv-profile__detail ol {
  margin: 0 0 1.1em;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-ink-soft);
}
.sv-profile__detail ul { list-style: none; }
.sv-profile__detail ul li { position: relative; padding-left: 20px; }
.sv-profile__detail ol { list-style: none; counter-reset: sv-ol; }
.sv-profile__detail ol li { position: relative; padding-left: 32px; counter-increment: sv-ol; }
.sv-profile__detail li + li { margin-top: 8px; }
.sv-profile__detail ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .7em;
  width: 8px; height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
}
.sv-profile__detail ol li::before {
  content: counter(sv-ol);
  position: absolute;
  left: 0; top: .15em;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
}
/* 本文中のリンクは記事本文（.entry-content a）と同じ見た目に揃える。
   指定が無いと本文と同じ色・下線なしになり、リンクだと分からない */
.sv-profile__detail a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.sv-profile__detail a:hover { opacity: .7; }
/* 先頭の見出しは詰める。最後の余白は罫線と重ならないよう落とす */
.sv-profile__detail > :first-child { margin-top: 0; }
.sv-profile__detail > :last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  /* 上段は 写真｜役職・名前・ヨミ の横並び。紹介文と本数は下に全幅で回す
     （本文まで横に並べると読める幅が残らないため）。
     .sv-card__body を display:contents にして、中の要素を直接グリッドに置いている */
  .sv-card__link {
    grid-template-columns: 110px 1fr;
    column-gap: 14px;
    row-gap: 0;
  }
  .sv-card__body { display: contents; }
  .sv-card__avatar { width: 110px; grid-column: 1; grid-row: 1 / 3; }
  /* 役職を下寄せ・名前を上寄せにして、2つのかたまりを写真の高さの中央に置く */
  .sv-card__role { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 6px; }
  .sv-card__name { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 21px; }
  .sv-card__yomi { display: block; margin-left: 0; margin-top: 4px; }
  /* 紹介文は全幅で読ませるので、SP は 4 行まで見せる */
  .sv-card__bio { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; -webkit-line-clamp: 4; line-clamp: 4; }
  .sv-card__foot { grid-column: 1 / -1; grid-row: 4; }
  /* 監修者詳細：写真は中央に置き、テキストは下に回す */
  .sv-profile__head {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    text-align: center;
  }
  .sv-profile__avatar { width: 140px; }
  .sv-profile__info { text-align: left; }

  /* 記事内の監修者：上段の横並びは保ったまま写真だけ縮める */
  .sv-inline__head { grid-template-columns: 84px 1fr; gap: 16px; }
  .sv-inline__avatar { width: 84px; }
  .sv-inline__heading,
  .entry-content .sv-inline p.sv-inline__heading { font-size: 17px; margin-bottom: 16px; }
  .sv-inline__name,
  .entry-content .sv-inline p.sv-inline__name { font-size: 19px; }
  /* 名前が長いとヨミが押し出されるので、SP では下に落とす */
  .sv-inline__yomi { display: block; margin-left: 0; margin-top: 4px; }
  /* SP は 4 行まで見せる */
  .sv-inline__detail { -webkit-line-clamp: 4; }
}