/*
Theme Name: LEAPS Media
Description: leaps-inc.com/media/ 用のSEOメディアテーマ。サーバーサイド描画でtitle/meta/OGP/構造化データを初期HTMLに出す。AI導入支援LPへの導線を内蔵。
Author: LEAPS
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: leaps-media
*/

/* ------------------------------------------------------------
   トークン
   本体のAI導入支援LP（#2B7FFF / M PLUS Rounded 1c）と揃えて、
   記事からLPへ遷移したときに見た目が途切れないようにする。
------------------------------------------------------------ */
:root {
  --primary: #2b7fff;
  --primary-dark: #1c62d6;
  --primary-soft: #eaf2ff;
  --ink: #1b2330;
  --ink-2: #4a5568;
  --ink-3: #8a94a6;
  --ground: #ffffff;
  --ground-2: #f6f8fc;
  --rule: #e3e8f0;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 2px 12px rgba(27, 35, 48, 0.06);
  --shadow-lg: 0 8px 32px rgba(27, 35, 48, 0.1);

  --font-round: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --wrap: 1080px;
  --wrap-article: 760px;
}
/* ------------------------------------------------------------
   ベース
------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--primary);
  text-underline-offset: 0.2em;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.wrap--article {
  max-width: var(--wrap-article);
}
/* ------------------------------------------------------------
   ボタン
------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn--lg {
  font-size: 1rem;
  padding: 0.95em 1.8em;
}
.btn--primary {
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--primary-dark);
}
.btn--outline {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn--outline:hover {
  background: var(--primary-soft);
}
.btn--ghost {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.btn--ghost:hover {
  background: #dbe8ff;
}
.btn--text {
  color: var(--primary-dark);
  padding-left: 0.4em;
  padding-right: 0.4em;
}
.btn--text:hover {
  text-decoration: underline;
}
/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.site-logo {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1.05rem;
}
.site-logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}
/* ロゴのマーク。うさぎ（usagi AI 由来）を外し、サムネイルと同じ丸ドットにした。
   本来のロゴが決まったら差し替える。 */
.site-logo__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.site-nav {
  margin-left: auto;
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.site-nav__list a {
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav__list a:hover {
  color: var(--primary);
}
.site-header__cta {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* ハンバーガー。デスクトップでは出さない */
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  place-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.site-header[data-nav-open="true"] .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header[data-nav-open="true"] .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header[data-nav-open="true"] .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
    margin-left: auto;
    order: 2;
  }
  .site-header__cta {
    order: 1;
  }
  /* ナビはヘッダー直下のパネルとして開く。
     以前は 900px 以下で丸ごと非表示にしており、
     スマホからカテゴリに辿り着けなかった。 */
  .site-nav {
    order: 3;
    display: none;
    width: 100%;
    margin-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
  }
  .site-header[data-nav-open="true"] .site-nav {
    display: block;
  }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    font-size: 0.9375rem;
  }
  .site-nav__list li {
    border-bottom: 1px solid var(--rule);
  }
  .site-nav__list li:last-child {
    border-bottom: none;
  }
  .site-nav__list a {
    display: block;
    padding: 0.85rem 0.25rem;
    color: var(--ink);
    font-weight: 700;
  }
}
@media (max-width: 520px) {
  .site-logo__text {
    display: none;
  }
  .btn--ghost {
    display: none;
  }
}
/* ------------------------------------------------------------
   パンくず
------------------------------------------------------------ */
.crumbs {
  max-width: var(--wrap);
  margin: 1.25rem auto 0;
  padding: 0 1.25rem;
  font-size: 0.75rem;
  color: var(--ink-3);
  overflow-x: auto;
}
.crumbs ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--rule);
}
.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}
/* ------------------------------------------------------------
   ページ見出し
------------------------------------------------------------ */
.site-main {
  padding-bottom: 5rem;
}
.page-head {
  padding: 3rem 0 2.5rem;
}
.page-head__title {
  font-family: var(--font-round);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
  word-break: auto-phrase; /* 文節折り返し。理由は .article__title を参照 */
}
.page-head__lead {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
  max-width: 60ch;
}
/* ------------------------------------------------------------
   記事カード一覧
------------------------------------------------------------ */
.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* 関連記事など、本文カラム(760px)の中に3枚並べる用。
   通常カードのままだとタイトルが大きすぎてカードを圧迫し、
   サムネイルとの重心が崩れるため、専用に組み直す。 */
.card-list--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card-list--3 .card__body {
  padding: 0.8rem 0.9rem 1rem;
  gap: 0.35rem;
}
.card-list--3 .card__title {
  font-size: 0.8125rem;
  line-height: 1.6;
  /* 高さを揃え、1枚だけ極端に伸びるのを防ぐ */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) {
  .card-list--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .card-list--3 {
    grid-template-columns: 1fr;
  }
}
.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card__link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--ground-2);
  overflow: hidden;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイキャッチ未設定時のフォールバック。
   写真が無くても成立するよう、カテゴリ名を組んだタイポグラフィ面にする。
   BtoBメディアでは記事すべてに写真を用意しつづけるのが現実的でないため、
   「画像が無い状態」を例外ではなく通常形として設計しておく。 */
.card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(43, 127, 255, 0.05) 11px 12px
    ),
    linear-gradient(150deg, var(--primary-soft), var(--ground-2));
  position: relative;
}
.card__thumb--empty::before {
  content: attr(data-label);
  font-family: var(--font-round);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
  text-align: center;
  opacity: 0.85;
  max-width: 90%;
}
/* 記事詳細の関連記事など、小さいカードでは文字を詰める */
.card-list--3 .card__thumb--empty::before {
  font-size: 0.8125rem;
}
.card__body {
  padding: 1.1rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.card__cat {
  align-self: flex-start;
  font-family: var(--font-round);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 0.25em 0.7em;
  border-radius: 999px;
}
.card__title {
  font-family: var(--font-round);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  /* 日本語を文節で折り返す。未対応ブラウザでは通常の折り返しになる */
  word-break: auto-phrase;
}
.card__excerpt {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0;
}
.card__date {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: auto;
}
.empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--ink-3);
}
/* ------------------------------------------------------------
   ページネーション
------------------------------------------------------------ */
.pager {
  margin-top: 3rem;
}
.pager .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
}
.pager .page-numbers:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pager .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* ------------------------------------------------------------
   記事本文
------------------------------------------------------------ */
.article {
  padding: 2.5rem 0 0;
}
.article__cat {
  display: inline-block;
  font-family: var(--font-round);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  text-decoration: none;
}
.article__title {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 4.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.45;
  margin: 1rem 0 0;
  text-wrap: balance;
  /* 日本語の折り返しを文節単位にする。これが無いと「Chatworkの過去ロ/グ」
     「情シスがいない会社が選/ぶべき」のように語の途中で改行される。
     text-wrap:balance は行の長さを揃えるだけで、切れ目は見ていない。
     auto-phrase 非対応のSafariには media.js が BudouX で同じ結果を当てる */
  word-break: auto-phrase;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.article__hero {
  margin: 2rem 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* 目次 */
.toc {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--ground-2);
  border-radius: var(--radius-lg);
}
.toc__title {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.toc ol {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.875rem;
}
.toc__item--h3 {
  margin-left: 1.1em;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.toc a {
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
}
/* 本文タイポグラフィ */
.article__body {
  margin-top: 2.5rem;
  font-size: 1rem;
  line-height: 2;
}
.article__body > * + * {
  margin-top: 1.5rem;
}
/* h2 と h3 が両方とも青い線で、階層が見た目で区別できていなかった。
   h2 は連番チップ付きの帯、h3 は細い縦線に分けて、
   いま記事のどこを読んでいるかが流し読みでも分かるようにする。 */
.article__body {
  counter-reset: h2-counter;
}
.article__body h2 {
  counter-increment: h2-counter;
  font-family: var(--font-round);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.5;
  margin-top: 4rem;
  padding: 0.85rem 1rem 0.85rem 0.9rem;
  background: linear-gradient(100deg, var(--primary-soft), transparent 85%);
  border-left: 6px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  scroll-margin-top: 5rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.article__body h2::before {
  content: counter(h2-counter, decimal-leading-zero);
  flex: none;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--primary);
  padding: 0.2em 0.55em;
  border-radius: 6px;
  transform: translateY(-0.15em);
}
.article__body h3 {
  font-family: var(--font-round);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 2.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--ink-3);
  scroll-margin-top: 5rem;
}
.article__body h4 {
  font-family: var(--font-round);
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2rem;
}
.article__body p {
  margin-top: 1.5rem;
}
.article__body ul,
.article__body ol {
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.article__body li::marker {
  color: var(--primary);
}
.article__body a {
  font-weight: 500;
}
.article__body strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, #ffe9a8 62%);
}
.article__body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--rule);
  background: var(--ground-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.article__body blockquote > :first-child {
  margin-top: 0;
}
/* 引用元。本文より一段落として、出典であることを見た目でも示す。 */
.article__body blockquote p.cite {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, var(--ink-2));
  font-style: normal;
}
.article__body img,
.article__body figure {
  border-radius: var(--radius);
  overflow: hidden;
}
.article__body figcaption {
  font-size: 0.75rem;
  color: var(--ink-3);
  text-align: center;
  margin-top: 0.6rem;
}
/* 表は横スクロールさせ、本文ごと横に伸びるのを防ぐ */
.article__body .wp-block-table,
.article__body figure.wp-block-table {
  overflow-x: auto;
}
.article__body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.875rem;
}
.article__body th,
.article__body td {
  border: 1px solid var(--rule);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.article__body thead th {
  background: var(--ground-2);
  font-family: var(--font-round);
  font-weight: 700;
  white-space: nowrap;
}
.article__body pre {
  overflow-x: auto;
  background: #1b2330;
  color: #e6edea;
  padding: 1.25rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.article__body code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9em;
}
.article__body :not(pre) > code {
  background: var(--ground-2);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}
/* ------------------------------------------------------------
   記事中CTA

   記事末CTAだけだと、長い記事で最後まで読まれなかった場合に
   導線がゼロになる。上位表示されている記事は本文中に2〜3箇所置いていた。
   末尾CTAより控えめにして、読む流れを止めない。
------------------------------------------------------------ */
.inline-cta {
  margin: 2.75rem 0;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--ground-2);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.inline-cta__title {
  font-family: var(--font-round);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}
.inline-cta p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: 0.6rem 0 0;
}
.inline-cta__actions {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.inline-cta .btn {
  font-size: 0.875rem;
  padding: 0.6rem 1.25rem;
}
@media (max-width: 600px) {
  .inline-cta {
    padding: 1.25rem 1.15rem;
  }
  .inline-cta__actions .btn {
    width: 100%;
    text-align: center;
  }
}
/* ------------------------------------------------------------
   記事末CTA
------------------------------------------------------------ */
.cta {
  margin: 4.5rem 0 0;
  padding: 2.5rem 2rem;
  background: linear-gradient(160deg, var(--primary-soft), #fff);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta__eyebrow {
  font-family: var(--font-round);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  margin: 0;
}
.cta__title {
  font-family: var(--font-round);
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  font-weight: 800;
  line-height: 1.55;
  margin: 0.6rem 0 0;
  text-wrap: balance;
  word-break: auto-phrase; /* 文節折り返し。理由は .article__title を参照 */
}
.cta__lead {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: 0.9rem auto 0;
  max-width: 44ch;
}
.cta__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
/* ------------------------------------------------------------
   関連記事・前後ナビ
------------------------------------------------------------ */
.related {
  margin-top: 4.5rem;
}
.related__title {
  font-family: var(--font-round);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 1.5rem;
}
.post-nav {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.875rem;
}
.post-nav a {
  text-decoration: none;
}
.post-nav a:hover {
  text-decoration: underline;
}
.post-nav__next {
  margin-left: auto;
  text-align: right;
}
/* ------------------------------------------------------------
   404
------------------------------------------------------------ */
.notfound {
  padding: 5rem 0 3rem;
  text-align: center;
}
.notfound__code {
  font-family: var(--font-round);
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  line-height: 1;
}
.notfound__title {
  font-family: var(--font-round);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 1rem 0 0;
}
.notfound__lead {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
}
.notfound__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* ------------------------------------------------------------
   フッター
------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.site-footer__name {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0;
}
.site-footer__desc {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 50ch;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  font-size: 0.8125rem;
}
.site-footer__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer__copy {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .card__link:hover {
    transform: none;
  }
}
/* ------------------------------------------------------------
   囲みボックス

   本文が5,000字を超えると、流し読みの人には文字の壁になる。
   種類ごとに色とアイコンを変えて、拾い読みでも引っかかるようにする。
------------------------------------------------------------ */
.callout {
  --callout-accent: var(--primary);
  --callout-bg: var(--primary-soft);
  margin: 2.25rem 0;
  padding: 1.25rem 1.35rem 1.3rem 3.4rem;
  position: relative;
  background: var(--callout-bg);
  border: 1px solid color-mix(in srgb, var(--callout-accent) 28%, transparent);
  border-left: 5px solid var(--callout-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout::before {
  content: attr(data-icon);
  position: absolute;
  left: 1.1rem;
  top: 1.2rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: var(--callout-accent);
  border-radius: 50%;
  line-height: 1;
}
.callout__title {
  font-family: var(--font-round);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--callout-accent);
}
.callout > p {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout--warn { --callout-accent: #c77700; --callout-bg: #fff6e6; }
.callout--ng   { --callout-accent: #cc3d47; --callout-bg: #fdeef0; }
.callout--ok   { --callout-accent: #1f8a5b; --callout-bg: #e9f7f0; }
/* 囲みの中の強調は、本文と同じ黄色マーカーだとうるさい */
.callout strong {
  background: none;
  color: var(--callout-accent);
}
@media (max-width: 600px) {
  .callout { padding: 1.1rem 1.1rem 1.15rem 3rem; }
  .callout::before { left: 0.85rem; }
}
/* ------------------------------------------------------------
   判定表

   ○×△を文字で書くだけだと表の中に埋もれる。
   バッジにして色を付け、表そのものを図として読めるようにする。
------------------------------------------------------------ */
.article__body .tbl--judge td:first-child,
.article__body .tbl--judge th:first-child {
  white-space: nowrap;
}
.mark {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  vertical-align: -0.3em;
}
.mark--ok  { background: #1f8a5b; }
.mark--ng  { background: #cc3d47; }
.mark--mid { background: #c77700; }
/* 行そのものを薄く着色して、○の行と×の行を面で見分ける */
.article__body .tbl--judge tr.is-ng td  { background: #fdeef0; }
.article__body .tbl--judge tr.is-ok td  { background: #e9f7f0; }
.article__body .tbl--judge tr.is-mid td { background: #fff6e6; }
/* ------------------------------------------------------------
   図解

   本文中の画像が31本すべてで0枚だった。上位記事は平均7.9枚。
   写真ではなく、内容そのものを図にする。

   最初はSVGに座標指定でテキストを置いたが、日本語が折り返せず
   文字も小さくなって読めなかった。HTML/CSSで組んで、
   本文と同じ文字サイズ・同じフォントで、幅に追従させる。
------------------------------------------------------------ */
.diagram {
  margin: 2.75rem 0;
}
.diagram figcaption {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: center;
}
/* ------------------------------------------------------------
   配布資料のスタック

   実物の紙面を1枚だけ大きく載せたら、本文で全部読めてしまい
   ダウンロードする理由が消えていた。
   複数枚を重ねて小さく置き、「読ませる」のではなく「量を見せる」。
------------------------------------------------------------ */
.docstack {
  --sheet-w: 8.5rem;
  position: relative;
  height: 13rem;
  margin: 0.25rem 0 1.25rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.docstack__sheet {
  position: absolute;
  top: 0;
  width: var(--sheet-w);
  height: auto;
  background: #fff;
  border: 1px solid #d5dde9;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(27, 35, 48, 0.16);
  transform-origin: 50% 100%;
  transition: transform 0.25s ease;
}
/* 扇状に少しずつずらす。奥ほど傾けて小さく見せる */
.docstack__sheet:nth-child(1) { transform: translateX(-9.5rem) rotate(-9deg)   scale(0.9);  z-index: 1; }
.docstack__sheet:nth-child(2) { transform: translateX(-5.9rem) rotate(-5.5deg) scale(0.94); z-index: 2; }
.docstack__sheet:nth-child(3) { transform: translateX(-2.4rem) rotate(-2deg)   scale(0.97); z-index: 3; }
.docstack__sheet:nth-child(4) { transform: translateX(1.2rem)  rotate(2deg)    scale(0.97); z-index: 4; }
.docstack__sheet:nth-child(5) { transform: translateX(4.8rem)  rotate(5.5deg)  scale(0.94); z-index: 3; }
.docstack__sheet:nth-child(6) { transform: translateX(8.4rem)  rotate(9deg)    scale(0.9);  z-index: 2; }
/* 下端をぼかして、続きがあることを示す */
.docstack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(transparent, var(--ground-2) 78%);
  pointer-events: none;
  z-index: 10;
}
.docstack__count {
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-round);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .docstack {
    --sheet-w: 6.2rem;
    height: 10rem;
  }
  .docstack__sheet:nth-child(1) { transform: translateX(-6.9rem) rotate(-9deg)   scale(0.9); }
  .docstack__sheet:nth-child(2) { transform: translateX(-4.3rem) rotate(-5.5deg) scale(0.94); }
  .docstack__sheet:nth-child(3) { transform: translateX(-1.7rem) rotate(-2deg)   scale(0.97); }
  .docstack__sheet:nth-child(4) { transform: translateX(0.9rem)  rotate(2deg)    scale(0.97); }
  .docstack__sheet:nth-child(5) { transform: translateX(3.5rem)  rotate(5.5deg)  scale(0.94); }
  .docstack__sheet:nth-child(6) { transform: translateX(6.1rem)  rotate(9deg)    scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .docstack__sheet { transition: none; }
}
/* 資料スタックを含むCTAは中央寄せにする */
.inline-cta--doc {
  text-align: center;
}
.inline-cta--doc .inline-cta__actions {
  justify-content: center;
}
/* --- 書類の完成イメージ ---------------------------------- */
.docmock {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}
.docmock__head {
  background: var(--primary);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
}
.docmock__body {
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}
.docmock__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.docmock__block {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: var(--ground-2);
}
.docmock__block--ng { background: #fdeef0; border-color: #f2ccd1; }
.docmock__block--ok { background: #e9f7f0; border-color: #bfe3d1; }
.docmock__block--note { background: #fff6e6; border-color: #f0dcb0; }
/* .article__body p が margin-top:1.5rem を当ててくるので、
   詳細度で確実に勝つよう .article__body 側から書く */
.article__body .docmock__label,
.article__body .docmock__text,
.article__body .flow__title,
.article__body .flow__desc,
.article__body .flow__warn {
  margin-top: 0;
}
.article__body .flow__desc { margin-top: 0.3rem; }
.article__body .flow__warn { margin-top: 0.7rem; }
.docmock__label {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 0.875rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
  line-height: 1.4;
}
.docmock__block--ng .docmock__label { color: #b3323c; }
.docmock__block--ok .docmock__label { color: #1a7550; }
.docmock__block--note .docmock__label { color: #8a5a00; }
.docmock ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.docmock p.docmock__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-2);
}
@media (max-width: 560px) {
  .docmock__cols { grid-template-columns: 1fr; }
}
/* --- 手順のフロー ----------------------------------------- */
.flow {
  display: grid;
  gap: 0;
  counter-reset: flow;
}
.flow__step {
  counter-increment: flow;
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  padding: 0 0 1.1rem;
}
.flow__step:last-child { padding-bottom: 0; }
/* 縦の連結線。最後の手順には引かない */
.flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.5rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--rule);
}
.flow__num {
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-3);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1rem;
}
.flow__step--key .flow__num { background: var(--primary); }
.flow__body {
  padding-top: 0.2rem;
  min-width: 0;
}
.flow__title {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.45;
}
.flow__desc {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.flow__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: 0.15em;
}
/* 手順の途中に差し込む注意書き */
.flow__warn {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  background: #fdeef0;
  border-left: 3px solid #cc3d47;
  border-radius: 0 8px 8px 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #7a3038;
}
.flow__warn strong { background: none; color: #b3323c; }
/* ------------------------------------------------------------
   資料ハブ（/media/ のトップ）

   最初は白地に白いカードを並べただけで、参考にした2社
   （KnowledgeWork / Stockmark SAT）が持っているものが
   1つも無かった。共通していたのは3つ。

     1. 明暗のコントラスト（黒や濃紺のセクションがある）
     2. 実物が大きく載っている（写真・プロダクト画面）
     3. 密度がある

   写真は用意できないが、配布資料の紙面と記事のOG画像は実物として
   持っているので、そこを主役にする。
------------------------------------------------------------ */

/* ==========================================================
   トップの見出し部
   BtoBオウンドメディア各社（SmartHR Mag. / サイボウズ式 /
   Money Forward Bizpedia）を見ると、FVという塊を持たず
   ヘッダー直下がもう記事で、名乗りは1行のタグライン。
   以前ここに置いていた帯（名乗り＋リード＋CTA2つ）は、
   メディアではなくサービスLPの型だったのでやめた。
   ========================================================== */
.hub-head {
  padding: 0.5rem 0 1.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.hub-head__title {
  font-family: var(--font-round);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
.hub-head__tagline {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin: 0.4rem 0 0;
}
/* ==========================================================
   テーマ（カテゴリ）。記事一覧の下に置く
   ========================================================== */
.topics {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.topics__title {
  font-family: var(--font-round);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.topics__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.8rem;
}
.topics__item {
  display: block;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.topics__item:hover,
.topics__item:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.topics__name {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 0.9375rem;
  margin: 0;
}
.topics__desc {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0.5rem 0 0;
}
.topics__count {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
}
@media (prefers-reduced-motion: reduce) {
  .topics__item { transition: none; }
}
/* --- セクション --- */
.hub__sec {
  margin-top: 2.5rem;
}
.hub__sec-eyebrow {
  font-family: var(--font-round);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin: 0;
}
.hub__sec-title {
  font-family: var(--font-round);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.5;
  margin: 0.55rem 0 0;
  text-wrap: balance;
}
.hub__sec-lead {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0.8rem 0 0;
  max-width: 44rem;
}
/* --- 配布資料 ---
   紙面はヒーローで大きく見せているので、ここは一覧として小さく。
   サムネイルを左、文言を右に置いて縦の場所を取らない形にする。 */
.hub__docs {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem;
}
.hub__doc {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.hub__doc-sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 12px rgba(27, 35, 48, 0.12);
}
.hub__doc-name {
  font-family: var(--font-round);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
}
.hub__doc-meta {
  display: inline-block;
  font-family: var(--font-round);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--ink);
  padding: 0.25em 0.6em;
  border-radius: 4px;
  margin: 0.45rem 0 0;
}
.hub__doc-desc {
  font-size: 0.78125rem;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0.5rem 0 0;
}
/* --- 記事一覧の下に置く配布資料 ---
   一覧の直後なので、区切り線を引いて別ブロックだと分かるようにする。 */
.hub__sec--docs {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.hub__docs-action {
  margin: 1.75rem 0 0;
  text-align: center;
}
@media (max-width: 900px) {
}
@media (max-width: 600px) {
}

/* トップの1本目だけ大きく。2カラムぶんの幅を取り、横並びにする。
   参考各社が揃ってこの形（最新1本を大きく、以下グリッド）。 */
.card--lead {
  grid-column: 1 / -1;
}
.card--lead .card__link {
  flex-direction: row;
  align-items: stretch;
}
.card--lead .card__thumb {
  flex: 0 0 55%;
  aspect-ratio: 16 / 9;
}
.card--lead .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 2rem;
}
.card--lead .card__title {
  font-size: 1.25rem;
  line-height: 1.5;
}
.card--lead .card__excerpt {
  -webkit-line-clamp: 4;
}

@media (max-width: 700px) {
  /* 横並びだと画像も文字も潰れるので、狭いときは通常のカードに戻す */
  .card--lead .card__link { flex-direction: column; }
  .card--lead .card__thumb { flex: none; }
  .card--lead .card__body { padding: 1.1rem 1.3rem 1.4rem; }
  .card--lead .card__title { font-size: 1.05rem; }
}