/* ============================================================
   HD Media — /media/ の一覧と、メディア記事（/topics/<slug>/ の "media" 付き）の部品（2026-11-03）
   構成は Astream のブログに寄せ、見た目はサイトの部品（top-v2 の card・case v2 の cs-*）に合わせる。
   背景で区切る所はグレーにせず、ブランドの淡い青（--pale / --pale-2）と青の線で。絵文字は使わない。
   ============================================================ */

/* ---------- 一覧 /media/ ---------- */
.md-hub { position: relative; padding: 110px 0 140px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f5f7fd 100%); }
.md-hub .container { position: relative; z-index: 1; }
.md-intro { max-width: 880px; margin: 0 0 84px; }
.md-intro__lead { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.6; letter-spacing: .03em; color: var(--ink); }
.md-intro__txt { margin-top: 18px; font-size: 15px; line-height: 2; letter-spacing: .05em; color: #333; }
.md-intro__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.md-intro__nav a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #1f2637; box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .45); transition: transform .25s var(--ease), box-shadow .25s; }
.md-intro__nav a i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--dot, var(--c1)); transform: rotate(45deg); }
.md-intro__nav a:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .5); }

.md-block { scroll-margin-top: 110px; }
.md-block + .md-block { margin-top: 96px; }
.md-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.md-block__ttl { display: flex; flex-direction: column; gap: 10px; }
.md-block__en { display: flex; align-items: center; gap: 12px; font-family: var(--fs-en); font-weight: 600; font-size: 14px; letter-spacing: .18em; color: var(--c1); text-transform: uppercase; }
.md-block__en::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--grad-brand); }
.md-block__ja { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: .04em; line-height: 1.4; color: var(--ink); }
.md-block__lead { max-width: 460px; font-size: 14px; line-height: 1.9; letter-spacing: .04em; color: #333; text-align: right; }
.md-block__n { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--pale); color: var(--navy); font-family: var(--fs-en); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.md-block__head--more { align-items: center; }

/* 比較記事のピン留め（大きいカード） */
.md-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.md-feat { --dot: var(--c1); position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid #e3e9f6; box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 30px 60px -40px rgba(15, 23, 42, .45); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.md-feat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: var(--grad-brand); }
.md-feat:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 40px 70px -36px rgba(37, 99, 235, .5); }
.md-feat__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e8edf5; }
.md-feat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.md-feat:hover .md-feat__img img { transform: scale(1.05); }
.md-feat__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 22px; }
.md-feat__tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--btn); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.md-feat__ttl { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.65; letter-spacing: .02em; color: var(--ink); }
.md-feat__ex { margin-top: 10px; font-size: 13px; line-height: 1.85; color: #3a4252; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.md-feat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.md-feat__go { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0b1f5c, #2563eb); color: #fff; transition: transform .3s var(--ease); }
.md-feat__go svg { width: 16px; height: 16px; }
.md-feat:hover .md-feat__go { transform: scale(1.1); }
.md-feats + .md-list { margin-top: 28px; }

.md-date { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #4a5468; white-space: nowrap; }
.md-date time { font-family: var(--fs-en); font-weight: 600; letter-spacing: .06em; }
.md-card .card__foot { justify-content: space-between; gap: 10px; }

/* ---------- 資料（一覧の下・記事の末尾で共通） ---------- */
.md-block--docs { margin-top: 110px; }
.md-docs { position: relative; padding: 40px 44px 36px; border-radius: 26px; background: linear-gradient(135deg, #f4f7ff 0%, #eef4ff 45%, #f1fbff 100%); border: 1px solid #dfe7f8; overflow: hidden; }
.md-docs::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 99, 235, .14), transparent 70%); pointer-events: none; }
.md-docs__label { position: relative; display: flex; align-items: center; gap: 10px; font-family: var(--fs-en); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--c1); }
.md-docs__label::before { content: ""; width: 26px; height: 2px; border-radius: 1px; background: var(--grad-brand); }
.md-docs__ttl { position: relative; margin-top: 10px; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; color: var(--ink); }
.md-docs__lead { position: relative; margin-top: 8px; font-size: 14px; line-height: 1.9; color: #333; }
.md-docs__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.md-hub .md-docs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-docs__list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #e1e8f7; box-shadow: 0 16px 30px -26px rgba(15, 23, 42, .45); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.md-docs__list a:hover { transform: translateY(-3px); border-color: #b9cdf6; box-shadow: 0 20px 36px -24px rgba(37, 99, 235, .45); }
.md-docs__t { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.md-docs__t small { font-size: 12px; font-weight: 500; line-height: 1.6; color: #4a5468; }
.md-docs__go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--btn); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.md-docs__go svg { width: 13px; height: 13px; }

/* ---------- 記事：ヒーローの下（パンくず・日付） ---------- */
.cs-main .md-crumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #4a5468; }
.cs-main .md-crumb a { color: #2a3550; text-decoration: none; }
.cs-main .md-crumb a:hover { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; }
.cs-main .md-crumb span { color: #9aa6bf; }
.cs-main .md-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #3a4252; }
.cs-main .md-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cs-main .md-meta span + span::before { content: ""; width: 4px; height: 4px; border-radius: 1px; background: var(--c1); transform: rotate(45deg); margin-right: 10px; }
.cs-main .md-meta time { font-family: var(--fs-en); font-weight: 600; letter-spacing: .06em; }

/* ---------- 記事：目次 ---------- */
.cs-main .md-toc { margin: 36px 0 0; padding: 26px 30px 24px; border-radius: 18px; background: var(--pale-2); border: 1px solid #e1e8f7; }
.cs-main .md-toc__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.cs-main .md-toc__h::before { content: ""; width: 22px; height: 2px; border-radius: 1px; background: var(--grad-brand); }
.cs-main .md-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.cs-main .md-toc > ol > li { counter-increment: toc; padding: 7px 0; border-top: 1px dashed #d6dff2; }
.cs-main .md-toc > ol > li:first-child { border-top: 0; }
.cs-main .md-toc > ol > li > a { display: flex; gap: 12px; font-size: 14.5px; font-weight: 700; line-height: 1.7; color: #1f2637; text-decoration: none; }
.cs-main .md-toc > ol > li > a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--fs-en); font-weight: 700; color: var(--c1); letter-spacing: .04em; }
.cs-main .md-toc ol ol { margin: 4px 0 2px 34px; }
.cs-main .md-toc ol ol li a { display: block; padding: 2px 0; font-size: 13px; line-height: 1.7; color: #3a4252; text-decoration: none; }
.cs-main .md-toc a:hover { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; }
.cs-main [id^="sec-"] { scroll-margin-top: 110px; }

/* ---------- 記事：本文の部品 ---------- */
/* 結論・ポイント（POINT ラベル） */
.cs-main .md-point { position: relative; margin: 28px 0; padding: 24px 26px 22px; border-radius: 16px; background: #fff; border: 1px solid #dbe5f8; box-shadow: 0 18px 36px -32px rgba(15, 23, 42, .45); }
.cs-main .md-point::before { content: "POINT"; position: absolute; left: 22px; top: -11px; padding: 3px 12px; border-radius: 999px; background: var(--grad-brand); color: #fff; font-family: var(--fs-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; }
.cs-main .md-point--conclusion::before { content: "結論"; font-family: var(--fs-jp); letter-spacing: .12em; }
.cs-main .md-point p { margin: 0 0 .8em; font-size: 15px; line-height: 1.95; }
.cs-main .md-point p:last-child { margin-bottom: 0; }
.cs-main .md-point ul { margin: 6px 0 0; }
.cs-main .md-point li { font-size: 14.5px; }
/* 参考記事・関連リンクの行 */
.cs-main p.md-ref { display: flex; gap: 10px; align-items: baseline; margin: 18px 0 1.6em; padding: 12px 16px; border-radius: 12px; background: var(--pale-2); border-left: 3px solid var(--c1); font-size: 14px; line-height: 1.8; }
.cs-main p.md-ref::before { content: "あわせて読みたい"; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--c1); }
.cs-main p.md-ref a { font-weight: 700; }
/* 表（比較表は 1 列目を固定・自社の行に薄い青） */
.cs-main .md-tablewrap { position: relative; margin: 22px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid #dfe7f6; background: #fff; }
.cs-main .md-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.7; }
.cs-main .md-table th, .cs-main .md-table td { padding: 12px 14px; border-bottom: 1px solid #e6ecf7; border-right: 1px solid #eef2fa; text-align: left; vertical-align: top; color: #1f2637; }
.cs-main .md-table th:last-child, .cs-main .md-table td:last-child { border-right: 0; }
.cs-main .md-table tr:last-child td { border-bottom: 0; }
.cs-main .md-table thead th { position: sticky; top: 0; background: linear-gradient(180deg, #eef3ff, #e7eefc); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--navy); white-space: nowrap; }
.cs-main .md-table td b { color: var(--ink); }
/* 比較表は PC では本文より広く（最大 1100px）出して横スクロールなしで読ませる。スマホは横スクロール＋1 列目固定 */
@media (min-width: 1024px) {
  .cs-main .md-tablewrap--wide { position: relative; left: 50%; width: min(1100px, calc(100vw - 96px)); transform: translateX(-50%); }
  .cs-main .md-tablewrap--wide .md-table { min-width: 0; }
}
.cs-main .md-table--compare th:first-child, .cs-main .md-table--compare td:first-child { position: sticky; left: 0; z-index: 1; min-width: 170px; background: #fff; box-shadow: 1px 0 0 #e6ecf7; font-weight: 700; }
.cs-main .md-table--compare thead th:first-child { z-index: 2; background: linear-gradient(180deg, #eef3ff, #e7eefc); }
.cs-main .md-table--compare td:first-child small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #4a5468; }
.cs-main .md-table tr.is-hd td { background: #f1f6ff; }
.cs-main .md-table tr.is-hd td:first-child { background: #e8f0ff; }
.cs-main .md-table tr.is-hd td:first-child::before { content: "自社"; display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--btn); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; vertical-align: 1px; }
.cs-main .md-table a { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.cs-main .md-table--compare td:last-child { min-width: 128px; }
.cs-main .md-table--compare td:last-child a { word-break: normal; white-space: nowrap; font-size: 12.5px; }
.cs-main .md-note, .cs-main .cs-sec .md-note { margin: 8px 0 1.6em; font-size: 12.5px; line-height: 1.8; color: #4a5468; }
/* 会社ごとの基本情報 */
.cs-main dl.md-spec { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); margin: 14px 0 18px; border: 1px solid #e1e8f7; border-radius: 14px; overflow: hidden; background: #fff; font-size: 14px; line-height: 1.75; }
.cs-main dl.md-spec dt, .cs-main dl.md-spec dd { margin: 0; padding: 10px 14px; border-top: 1px solid #edf1fa; }
.cs-main dl.md-spec dt:first-of-type, .cs-main dl.md-spec dd:first-of-type { border-top: 0; }
.cs-main dl.md-spec dt { background: var(--pale-2); font-size: 12.5px; font-weight: 700; color: var(--navy); }
.cs-main dl.md-spec dd { color: #1f2637; min-width: 0; overflow-wrap: anywhere; }
.cs-main dl.md-spec a { color: var(--c1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 会社名の見出しに付ける番号 */
.cs-main .cs-sec h3 .md-no { display: inline-block; margin-right: 10px; padding: 1px 10px; border-radius: 999px; background: var(--pale); color: var(--navy); font-family: var(--fs-en); font-size: 13px; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; }
.cs-main .cs-sec h3.md-h-hd { padding: 14px 18px; border-left: 0; border-radius: 14px; background: linear-gradient(90deg, #eaf1ff, #f4f8ff 70%, #fff); }
.cs-main .md-fit, .cs-main .cs-sec .md-fit { margin: 0 0 1.6em; padding: 10px 14px; border-radius: 10px; background: var(--pale-2); font-size: 14px; line-height: 1.8; }
.cs-main .md-fit b { color: var(--navy); }
/* 自社の実績の数字（数字は太字の黒にせずブランドのグラデーション） */
.cs-main .md-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 10px; }
.cs-main .md-stat, .cs-main .cs-sec a.md-stat { display: block; padding: 18px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid #e1e8f7; box-shadow: 0 16px 30px -28px rgba(15, 23, 42, .45); color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
.cs-main .cs-sec a.md-stat:hover { transform: translateY(-2px); border-color: #b9cdf6; }
.cs-main .md-stat__v, .cs-main .cs-sec .md-stat__v { margin: 0; font-family: var(--fs-en); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: 0; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-main .md-stat__v small { font-family: var(--fs-jp); font-size: 12px; font-weight: 700; margin-left: 2px; }
.cs-main .md-stat__l, .cs-main .cs-sec .md-stat__l { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #3a4252; }
.cs-main .md-stat__l a { color: inherit; }
/* 流れ */
.cs-main ol.md-steps { display: grid; gap: 10px; margin: 18px 0 1.6em; padding: 0; list-style: none; counter-reset: step; }
.cs-main ol.md-steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 58px; border-radius: 14px; background: #fff; border: 1px solid #e1e8f7; font-size: 14.5px; line-height: 1.8; }
.cs-main ol.md-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font-family: var(--fs-en); font-weight: 700; font-size: 18px; line-height: 1.5; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-main ol.md-steps li b { display: block; color: var(--ink); }
/* 記事の途中のお問い合わせ */
.cs-main .md-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 30px 0; padding: 22px 26px; border-radius: 18px; background: linear-gradient(120deg, #0b1f5c 0%, #1d4ed8 60%, #0891b2 100%); color: #fff; }
.cs-main .md-cta p { margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.7; }
.cs-main .md-cta p small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; opacity: .92; }
.cs-main .cs-sec .md-cta a, .cs-main .md-cta a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cs-main .md-cta a svg { width: 15px; height: 15px; }
/* FAQ */
.cs-main .md-faq details.md-qa { margin: 0 0 10px; border-radius: 14px; background: #fff; border: 1px solid #e1e8f7; overflow: hidden; }
.cs-main .md-faq summary { position: relative; display: block; padding: 16px 48px 16px 50px; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); cursor: pointer; list-style: none; }
.cs-main .md-faq summary::-webkit-details-marker { display: none; }
.cs-main .md-faq summary::before { content: "Q"; position: absolute; left: 18px; top: 14px; font-family: var(--fs-en); font-weight: 700; font-size: 18px; color: var(--c1); }
.cs-main .md-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--c1); border-bottom: 2px solid var(--c1); transform: rotate(45deg); transition: transform .25s; }
.cs-main .md-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cs-main .md-faq .md-a { position: relative; padding: 0 22px 18px 50px; font-size: 14.5px; line-height: 1.9; color: #222; }
.cs-main .md-faq .md-a::before { content: "A"; position: absolute; left: 19px; top: -2px; font-family: var(--fs-en); font-weight: 700; font-size: 18px; color: var(--c4); }

/* ---------- 記事の末尾（資料・この記事について） ---------- */
.cs-main .md-end { margin-top: 72px; display: grid; gap: 20px; }
.cs-main .md-author { padding: 22px 26px; border-radius: 18px; background: #fff; border: 1px solid #e1e8f7; }
.cs-main .md-author__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.cs-main .md-author__h::before { content: ""; width: 22px; height: 2px; border-radius: 1px; background: var(--grad-brand); }
.cs-main .md-author p:not(.md-author__h) { margin: 0 0 .5em; font-size: 13.5px; line-height: 1.85; color: #333; }

/* ---------- 記事の下「あわせて読みたい記事」 ---------- */
.md-rel { padding-bottom: 0; }
.md-rel + .ar__rel { padding-top: 70px; }

/* ---------- スマホ ---------- */
@media (max-width: 1023px) {
  .md-hub { padding: 44px 0 64px; }
  .md-intro { margin-bottom: 40px; }
  .md-intro__lead { font-size: 19px; line-height: 1.55; }
  .md-intro__lead br { display: none; }
  .md-intro__txt { margin-top: 12px; font-size: 13px; line-height: 1.85; }
  .md-intro__nav { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 18px calc(var(--side) * -1) 0; padding: 0 var(--side) 4px; scrollbar-width: none; }
  .md-intro__nav::-webkit-scrollbar { display: none; }
  .md-intro__nav li { flex: none; }
  .md-intro__nav a { padding: 8px 13px 8px 12px; font-size: 12px; white-space: nowrap; }
  .md-block + .md-block { margin-top: 52px; }
  .md-block__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
  .md-block__head--more { flex-direction: row; align-items: flex-end; }
  .md-block__en { font-size: 11px; }
  .md-block__en::before { width: 22px; }
  .md-block__ja { font-size: 19px; }
  .md-block__lead { font-size: 12.5px; line-height: 1.75; text-align: left; }
  .md-feats { grid-template-columns: 1fr; gap: 12px; }
  .md-feat { flex-direction: row; border-radius: 16px; }
  .md-feat__img { flex: none; width: 34%; aspect-ratio: auto; }
  .md-feat__body { padding: 12px 12px 12px 14px; }
  .md-feat__tag { padding: 3px 9px; font-size: 10px; }
  .md-feat__ttl { margin-top: 8px; font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .md-feat__ex { display: none; }
  .md-feat__foot { padding-top: 8px; }
  .md-feat__go { width: 28px; height: 28px; }
  .md-feat__go svg { width: 12px; height: 12px; }
  .md-feats + .md-list { margin-top: 12px; }
  .md-hub .works__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .md-hub .card { padding: 6px 6px 10px; border-radius: 12px; }
  .md-hub .card__img { aspect-ratio: 4 / 3; border-radius: 9px; }
  .md-hub .card__body { padding: 8px 2px 0; }
  .md-hub .card__cat { gap: 6px; margin-bottom: 4px; font-size: 10px; }
  .md-hub .card__cat::before { width: 12px; }
  .md-hub .card__ttl { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 3; }
  .md-hub .card__foot { padding-top: 6px; }
  .md-hub .card .more { display: none; }
  .md-date { font-size: 10px; }
  .md-block--docs { margin-top: 56px; }
  .md-docs { padding: 24px 18px 20px; border-radius: 18px; }
  .md-docs__ttl { font-size: 17px; }
  .md-docs__lead { font-size: 12.5px; }
  .md-docs__list, .md-hub .md-docs__list { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .md-docs__list a { padding: 12px 14px; border-radius: 12px; }
  .md-docs__t { font-size: 13.5px; }
  .md-docs__t small { font-size: 11px; }
  .md-docs__go { padding: 6px 10px; font-size: 11px; }

  .cs-main .md-crumb { font-size: 10.5px; margin-bottom: 10px; }
  .cs-main .md-meta { margin-top: 12px; font-size: 11.5px; gap: 4px 12px; }
  .cs-main .md-toc { margin-top: 24px; padding: 18px 16px 14px; border-radius: 14px; }
  .cs-main .md-toc > ol > li > a { font-size: 13.5px; }
  .cs-main .md-toc ol ol { margin-left: 30px; }
  .cs-main .md-toc ol ol li a { font-size: 12.5px; }
  .cs-main .md-point { padding: 20px 16px 16px; }
  .cs-main .md-point p { font-size: 14px; }
  .cs-main .md-table { font-size: 12.5px; min-width: 680px; }
  .cs-main .md-table th, .cs-main .md-table td { padding: 10px 11px; }
  /* 比較表は PC では本文より広く（最大 1100px）出して横スクロールなしで読ませる。スマホは横スクロール＋1 列目固定 */
@media (min-width: 1024px) {
  .cs-main .md-tablewrap--wide { position: relative; left: 50%; width: min(1100px, calc(100vw - 96px)); transform: translateX(-50%); }
  .cs-main .md-tablewrap--wide .md-table { min-width: 0; }
}
.cs-main .md-table--compare th:first-child, .cs-main .md-table--compare td:first-child { min-width: 128px; }
  .cs-main dl.md-spec { grid-template-columns: 6em minmax(0, 1fr); font-size: 13px; }
  .cs-main dl.md-spec dt, .cs-main dl.md-spec dd { padding: 8px 10px; }
  .cs-main .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cs-main .md-stat { padding: 14px 12px 12px; border-radius: 12px; }
  .cs-main .md-stat__v, .cs-main .cs-sec .md-stat__v { font-size: 22px; }
  .cs-main .md-stat__l, .cs-main .cs-sec .md-stat__l { font-size: 11px; }
  .cs-main ol.md-steps li { padding: 12px 12px 12px 50px; font-size: 13.5px; }
  .cs-main ol.md-steps li::before { left: 13px; top: 12px; font-size: 16px; }
  .cs-main .md-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; }
  .cs-main .md-cta a { justify-content: center; }
  .cs-main .md-faq summary { padding: 14px 40px 14px 42px; font-size: 14px; }
  .cs-main .md-faq summary::before { left: 14px; top: 12px; font-size: 16px; }
  .cs-main .md-faq .md-a { padding: 0 16px 14px 42px; font-size: 13.5px; }
  .cs-main .md-faq .md-a::before { left: 15px; font-size: 16px; }
  .cs-main .md-end { margin-top: 44px; gap: 14px; }
  .cs-main .md-author { padding: 18px 16px; }
  .md-rel + .ar__rel { padding-top: 40px; }
}