@charset "UTF-8";

:root {
  --color-primary: #0b3974;
  --color-primary-deep: #062855;
  --color-primary-bright: #1763ba;
  --color-sky: #eaf4ff;
  --color-surface: #f7fafd;
  --color-teal: #3c9f9a;
  --color-yellow: #f2c75d;
  --color-text: #14243a;
  --color-muted: #5a6478;
  --color-line: #e6eef7;
  --color-line-strong: #dfe8f3;
  --color-white: #fff;
  --container: 1200px;
  /* SPの左右セーフガター。::marker・章番号・太字グリフの
     サイドベアリングがボックス外へ数px出ても視認欠けしない余白を確保する。
     Yu Gothic / Meiryo の合成ボールドは字形が左へ滲むため、
     1〜2pxしか余裕のない設計にしない（Standard v1.0共通）。 */
  --sp-gutter: 16px;
  --header-height: 129px;
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; color: var(--color-text); background: var(--color-white); font-family: var(--font-sans); line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.is-menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* PC幅だけ意味の区切りで改行する。SP幅では無効化し、画面幅に応じて自然に折り返す。 */
.br-pc { display: inline; }
@media (max-width: 767px) { .br-pc { display: none; } }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; color: var(--color-white); background: var(--color-primary-deep); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }

/* Header */
.site-header { position: sticky; z-index: 100; top: 0; background: var(--color-white); transition: box-shadow var(--transition); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(12, 42, 77, 0.07); }
.site-header__top { border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; width: min(calc(100% - 48px), var(--container)); margin-inline: auto; padding-block: 14px; align-items: center; gap: 24px; }
.brand { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: 10px; }
.brand__logo { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 50%; }
/* ヘッダーはワードマーク＋タグライン一体型のロックアップSVG1枚。フッターは従来どおり */
/* viewBoxを実描画域＋安全余白まで詰めたため、containで等倍表示（cover依存を解消） */
.site-header .brand__logo { width: 180px; height: 50px; border-radius: 0; object-fit: contain; object-position: center; }
/* ブランド名・サブコピーはロゴ内に含まれるため、テキスト側は非表示（HTMLは残置＝復帰可能） */
.site-header .brand__copy { display: none; }
.brand__copy { display: grid; min-width: 0; gap: 2px; }
.brand__name { color: var(--color-primary-deep); font-size: 1rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1.25; }
.brand__descriptor { color: var(--color-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; }
.header-search { display: flex; flex: 1; max-width: 400px; padding: 9px 16px; align-items: center; gap: 10px; background: #f2f4f8; border-radius: 999px; }
.header-search__input { flex: 1; min-width: 0; padding: 0; color: #33405c; background: transparent; border: 0; font-size: 0.875rem; }
.header-search__input:disabled { color: #98a2b5; -webkit-text-fill-color: #98a2b5; opacity: 1; cursor: default; }
.header-search__input::placeholder { color: #98a2b5; }
.header-search__icon { flex: none; color: #8a93a6; }
.header-social { display: flex; flex: none; margin-left: auto; align-items: center; gap: 18px; }
.header-social svg { color: var(--color-primary-deep); }
.desktop-nav { border-bottom: 1px solid var(--color-line); }
.desktop-nav__list { display: flex; width: min(calc(100% - 48px), var(--container)); margin-inline: auto; align-items: center; gap: 40px; }
.desktop-nav__list a { display: block; padding-block: 13px 11px; color: var(--color-primary-deep); border-bottom: 2px solid transparent; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; transition: color var(--transition), border-color var(--transition); }
.desktop-nav__list a:hover { color: var(--color-primary-bright); border-bottom-color: var(--color-primary-bright); }
.menu-button, .mobile-menu { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; background-color: var(--color-primary-bright); background-image: conic-gradient(from 150deg at 50% 0, rgba(6,40,85,0.05) 0deg 60deg, transparent 60deg), conic-gradient(from -30deg at 50% 100%, rgba(11,57,116,0.035) 0deg 60deg, transparent 60deg), linear-gradient(100deg, #0f4f9e 0%, #1763ba 48%, #2a7ad4 100%); background-size: 120px 104px, 120px 104px, 100% 100%; background-repeat: repeat, repeat, no-repeat; border-bottom: 1px solid rgba(255,255,255,0.14); }
.hero__inner { display: flex; min-height: 340px; align-items: center; justify-content: space-between; gap: 32px; }
.hero__copy { flex: 0 1 53%; max-width: 600px; padding-block: 40px; }
.hero__label { display: inline-block; margin-bottom: 20px; padding: 6px 18px 6px 14px; color: var(--color-primary-bright); background: var(--color-white); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5; }
.hero__name { margin-bottom: 16px; color: var(--color-white); font-size: clamp(2.5rem, 4.6vw, 3.5rem); font-weight: 900; letter-spacing: 0.01em; line-height: 1.05; }
.hero__lead { color: rgba(255,255,255,0.88); font-size: 1rem; font-weight: 600; line-height: 1.7; word-break: normal; line-break: strict; }
.hero__art { position: relative; display: flex; flex: 0 0 46%; align-items: flex-end; justify-content: flex-end; align-self: stretch; min-width: 0; }
.hero__deco { position: absolute; z-index: 0; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; }
.hero__deco--blob-main { top: 2%; right: -30px; width: 460px; height: 78%; background-image: url("../images/hero-deco-blob-main.webp"); opacity: 0.32; }
.hero__deco--blob-sub { top: 38%; right: 220px; width: 260px; height: 46%; background-image: url("../images/hero-deco-blob-sub.webp"); opacity: 0.22; }
.hero__deco--dotgrid { top: 6%; right: 10px; width: 80px; height: 54px; background-image: url("../images/hero-deco-dotgrid.webp"); opacity: 0.3; }
.hero__deco--arc { top: 8%; right: 40px; width: 200px; height: 96px; background-image: url("../images/hero-deco-arc-dots.webp"); opacity: 0.35; transform: scaleX(-1); }
.hero__deco--dot { z-index: 1; top: 14%; right: 130px; width: 16px; height: 16px; background-image: url("../images/hero-deco-dot-yellow.webp"); opacity: 0.85; }
.hero__illustration { position: relative; z-index: 2; width: 100%; max-width: 360px; height: 80%; min-height: 240px; object-fit: contain; object-position: bottom; transform: translateY(-24px); }

/* Category nav */
.category-nav { background: linear-gradient(180deg, #eef5fc, var(--color-white) 60%); border-bottom: 1px solid #eef2f7; }
.category-nav__list { display: flex; min-height: 58px; align-items: center; flex-wrap: wrap; gap: 6px 32px; }
.category-nav__list span { display: block; padding-block: 6px 4px; color: var(--color-primary-deep); border-bottom: 2px solid transparent; font-size: 0.875rem; font-weight: 500; }
.category-nav__list .is-current { border-bottom-color: var(--color-primary-bright); font-weight: 700; }

/* Section headings */
.section-head { margin-bottom: 28px; }
.section-head__label { margin-bottom: 6px; color: var(--color-primary-bright); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.5; }
.section-head h2 { color: var(--color-primary-deep); font-size: clamp(1.45rem, 2.2vw, 1.625rem); font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.section-head--aside h2 { font-size: 1.1875rem; }

/* Editorial layout */
.editorial { padding-block: 56px 60px; background: var(--color-white); }
.editorial__grid { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 320px; gap: 60px 40px; }
/* SPの読み順（PICK UP → START HERE → NEW ARTICLES）をDOM順で確定させ、
   PCだけグリッド配置でSTART HEREを右カラムへ戻す。 */
.editorial__grid > .pickup { grid-column: 1; grid-row: 1; }
.editorial__grid > .start-here { grid-column: 2; grid-row: 1; }
.editorial__grid > .new-articles { grid-column: 1; grid-row: 2; }

/* Editorial image placeholders */
.story-visual { --thumb-bg: #e6f2fc; --thumb-shape: #fff; --thumb-line: #7eb5e3; position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--thumb-bg); border-radius: 8px; }
.story-visual::before { position: absolute; top: -20%; right: -5%; width: 58%; aspect-ratio: 1; background: rgba(255,255,255,0.62); border-radius: 50%; content: ""; }
.story-visual::after { position: absolute; right: 12%; bottom: 17%; width: 42%; height: 1px; background: var(--thumb-line); content: ""; transform: rotate(-9deg); }
.story-visual > span { position: absolute; top: 29%; left: 16%; width: 27%; height: 42%; background: var(--thumb-shape); border: 1px solid rgba(11,57,116,0.08); border-radius: 6px; transform: rotate(-7deg); }
.story-visual > span::before, .story-visual > span::after { position: absolute; right: 18%; left: 18%; height: 1px; background: var(--thumb-line); content: ""; }
.story-visual > span::before { top: 38%; }
.story-visual > span::after { top: 58%; }
.story-visual--ai { --thumb-bg: #dcecff; --thumb-line: #5c9bd4; }
.story-visual--ai > span { width: 31%; height: auto; aspect-ratio: 1; border-radius: 50%; transform: none; }
.story-visual--excel { --thumb-bg: #e3f2ef; --thumb-line: #559f98; }
.story-visual--excel > span { top: 24%; left: 19%; width: 32%; height: 50%; transform: rotate(4deg); }
.story-visual--improve { --thumb-bg: #eef0fa; --thumb-line: #6785bc; }
.story-visual--improve > span { top: 31%; left: 17%; width: 34%; height: 34%; border-radius: 50% 6px 50% 6px; transform: rotate(-12deg); }
.story-visual--chat { --thumb-bg: #e5f2ff; --thumb-line: #4e91cd; }
.story-visual--copy { --thumb-bg: #e8f3f1; --thumb-line: #4b9992; }
.story-visual--copy > span { left: 22%; transform: rotate(5deg); }
.story-visual--accounting { --thumb-bg: #f5f0e3; --thumb-line: #bd9341; }
.story-visual--accounting > span { width: 34%; transform: rotate(-3deg); }
.story-visual--social { --thumb-bg: #e8effa; --thumb-line: #668cc0; }
.story-visual--social > span { width: 32%; height: 36%; border-radius: 10px; transform: none; }
.story-visual--sheet { --thumb-bg: #e1f2ef; --thumb-line: #3f9d93; }
.story-visual--sheet > span { top: 23%; width: 36%; height: 54%; transform: rotate(3deg); }
.story-visual--basic { --thumb-bg: #eef1f7; --thumb-line: #7088ad; }
.story-visual--basic > span { width: 29%; height: auto; aspect-ratio: 1; border-radius: 50%; transform: none; }

/* Shared meta line */
.story-meta { display: flex; margin-bottom: 8px; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--color-primary-bright); font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.story-meta__cat::after { margin-left: 8px; color: #9db3d1; content: "／"; }

/* Pick up */
.pickup { min-width: 0; }
.pickup__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
/* 矢印は「大カード列の右端」に揃える。見出し行に乗りつつ、
   右の小カード2件やSTART HERE側へはみ出して見えないようにするため、
   見出し行の幅を .pickup__layout の1カラム目（1.4fr / 全2.4fr、gap 36px）と一致させる。 */
@media (min-width: 768px) {
  .pickup__head { width: calc((100% - 36px) * 1.4 / 2.4); }
}
.pickup__heading { min-width: 0; }
.pickup__nav { display: flex; flex: none; gap: 8px; }
.pickup__nav[hidden] { display: none; }
.pickup__btn { display: inline-flex; width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; color: var(--color-primary-bright); background: var(--color-white); border: 1px solid var(--color-line-strong); border-radius: 50%; cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
.pickup__btn:hover { color: var(--color-white); background: var(--color-primary-bright); border-color: var(--color-primary-bright); }

/* Pick up：Phase Aのレイアウト（左=大カード / 右=固定小カード2件）。
   大カードだけ5記事をグリッドの同じセルに重ね、opacityでクロスフェードする。
   重ねているので枠の高さは常に「一番高い記事」に決まり、切り替えでCLSが起きない。 */
.pickup__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; }
/* 真正のクロスフェード。旧記事 1→0 と新記事 0→1 を同一セルで同時に進める。
   時間はCSSを唯一の出典にし、JS側は算出値を読んでタイマーを組む。
   イージングは (0.5, 0.5) を通る対称カーブ。ほぼ等速なので宣言した時間が
   そのまま見た目に出て、中間時点で両記事がちょうど 0.5 / 0.5 で重なる。 */
.pickup-lead { --pickup-fade: 2600ms; display: grid; min-width: 0; }
/* 退場：opacity 1→0。visibilityは消え切ってから落とす。 */
.pickup-lead__item { position: relative; z-index: 0; min-width: 0; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--pickup-fade) cubic-bezier(0.33, 0.3, 0.67, 0.7), visibility var(--pickup-fade); }
/* 登場：opacity 0→1。同じ曲線・同じ時間なので左右対称に入れ替わる。 */
.pickup-lead__item.is-active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--pickup-fade) cubic-bezier(0.33, 0.3, 0.67, 0.7), visibility 0s; }
/* クリック対象の受け渡し。前半は画面で優勢な旧記事へ、後半は新記事へ渡す。
   （新記事は上に重なるが pointer-events:none の間は当たり判定を素通りする）
   JSが動かない場合はこの2クラスが付かないため .is-active が普通に押せる。 */
.pickup-lead__item.is-active.is-arriving { pointer-events: none; }
.pickup-lead__item.is-leaving { pointer-events: auto; }
.pickup-lead .article-thumb { margin-bottom: 18px; }
.pickup-lead h3 { margin-bottom: 10px; color: var(--color-primary-deep); font-size: clamp(1.125rem, 1.6vw, 1.25rem); font-weight: 900; line-height: 1.5; word-break: normal; line-break: strict; }
.pickup-lead__summary { max-width: 34em; margin-bottom: 12px; color: var(--color-muted); font-size: 0.875rem; line-height: 1.8; word-break: normal; line-break: strict; }
.pickup-side { display: flex; min-width: 0; flex-direction: column; gap: 24px; }
.pickup-story { display: flex; min-width: 0; gap: 14px; }
.pickup-story .pickup-story__link { display: flex; min-width: 0; align-items: flex-start; flex: 1 1 auto; gap: 14px; }
.pickup-story .article-thumb { width: 120px; flex: none; aspect-ratio: 16 / 9; border-radius: 6px; }
.pickup-story__body { min-width: 0; }
.pickup-story h3 { color: var(--color-primary-deep); font-size: 0.875rem; font-weight: 700; line-height: 1.6; word-break: normal; line-break: strict; }

/* prefers-reduced-motion による時間の上書きは意図的に置いていない。
   この切り替えは translate / scale / rotate / blur を一切使わず opacity だけで行うため、
   酔い・不快感の原因になる「動き」には当たらず、むしろ reduced-motion 時の
   代替表現として推奨される手法だから。速度を変える場合は --pickup-fade を触ること。 */

/* New articles */
.article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
.article-preview { min-width: 0; }
.article-preview .story-visual { margin-bottom: 14px; aspect-ratio: 12 / 5; border-radius: 6px; }
.article-preview h3 { color: var(--color-primary-deep); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; }

/* Popular sidebar */
.popular { min-width: 0; padding-top: 20px; border-top: 2px solid var(--color-primary-bright); }
.popular__list { display: grid; }
.popular-item { display: grid; min-width: 0; padding-block: 14px; align-items: center; grid-template-columns: 28px 64px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--color-line); }
.popular-item:last-child { border-bottom: 0; }
.popular-item__rank { color: #a9c0dd; font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.popular-item .story-visual { width: 64px; aspect-ratio: 4 / 3; border-radius: 5px; }
.popular-item h3 { min-width: 0; color: var(--color-primary-deep); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; }

/* Topics */
.topics { padding-block: 64px 60px; background: var(--color-surface); }
.topic-list li { display: grid; min-width: 0; padding-block: 20px; align-items: baseline; grid-template-columns: 44px minmax(0, 1fr); gap: 24px; border-bottom: 1px solid var(--color-line-strong); }
.topic-list li:last-child { border-bottom: 0; }
.topic-list__num { color: var(--color-primary-bright); font-size: 1.375rem; font-weight: 900; line-height: 1.3; }
.topic-list strong { display: block; margin-bottom: 4px; color: var(--color-primary-deep); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.topic-list p { max-width: 34em; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.7; word-break: normal; line-break: strict; }

/* About */
.about { padding-block: 64px; background: var(--color-surface); }
/* SERVICE撤去でTOPICSとABOUTが同じ背景色のまま隣接するようになり、
   両者のpadding（60px+64px）が二重に効いて余白が開きすぎるため、
   隣接したときだけ上側を詰める。 */
.topics + .about { padding-top: 12px; }
.about__inner { max-width: 760px; text-align: center; }
.about .section-head__label { margin-bottom: 14px; }
.about__text { margin-inline: auto; color: var(--color-primary-deep); font-size: 1.0625rem; line-height: 1.9; word-break: normal; line-break: strict; }

/* Article detail */
.article-page { min-width: 0; background: var(--color-white); }
.article-page :focus-visible, .articles-page :focus-visible { outline-color: var(--color-primary-deep); box-shadow: 0 0 0 5px var(--color-yellow); }
.article-breadcrumb { width: min(calc(100% - 48px), 840px); margin-inline: auto; padding-block: 24px 16px; }
.article-breadcrumb ol { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 6px 0; list-style: none; }
.article-breadcrumb li { display: inline-flex; min-width: 0; align-items: baseline; color: var(--color-muted); font-size: 0.75rem; line-height: 1.7; overflow-wrap: anywhere; }
.article-breadcrumb li + li::before { margin-inline: 10px; color: #9db3d1; content: ">"; }
.article-breadcrumb a { color: var(--color-primary-bright); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--transition); }
.article-breadcrumb a:hover { text-decoration-color: currentColor; }
.article-breadcrumb [aria-current="page"] { color: var(--color-text); }
.article-detail { min-width: 0; padding-bottom: 80px; }
.article-header { width: min(calc(100% - 48px), 840px); margin-inline: auto; padding-block: 20px 36px; }
.article-category { margin-bottom: 18px; padding-left: 12px; color: var(--color-primary-bright); border-left: 3px solid var(--color-primary-bright); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; }
.article-header h1 { max-width: 18em; margin-bottom: 24px; color: var(--color-primary-deep); font-size: clamp(2rem, 4.2vw, 3.125rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.42; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-lead { max-width: 34em; margin-bottom: 24px; color: #334a68; font-size: 1.0625rem; line-height: 1.9; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-meta { display: flex; margin: 0; align-items: center; flex-wrap: wrap; gap: 8px 24px; color: var(--color-muted); font-size: 0.75rem; line-height: 1.6; }
.article-meta div { display: flex; align-items: baseline; gap: 6px; }
.article-meta dt { color: var(--color-muted); font-weight: 500; }
.article-meta dd { margin: 0; color: var(--color-text); }
.article-eyecatch { width: min(calc(100% - 48px), 840px); margin: 0 auto 56px; overflow: hidden; border-radius: 10px; }
.article-eyecatch__image, .article-eyecatch__placeholder { display: block; width: 100%; aspect-ratio: 16 / 9; }
.article-eyecatch__image { height: auto; object-fit: cover; }
/* アイキャッチを切り抜かず、実寸比率のまま表示する */
.article-eyecatch__image--full { aspect-ratio: auto; }
.article-eyecatch__placeholder { position: relative; display: flex; overflow: hidden; padding: clamp(28px, 6vw, 64px); justify-content: center; flex-direction: column; color: var(--color-white); background-color: var(--color-primary-bright); background-image: linear-gradient(135deg, rgba(6,40,85,0.48), transparent 62%), radial-gradient(circle at 84% 18%, rgba(255,255,255,0.2) 0 10%, transparent 10.5%); }
.article-eyecatch__placeholder::before { position: absolute; right: -6%; bottom: -34%; width: 52%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.34); border-radius: 50%; content: ""; }
.article-eyecatch__placeholder::after { position: absolute; right: 13%; bottom: 15%; width: 26%; height: 2px; background: var(--color-yellow); content: ""; transform: rotate(-10deg); }
.article-eyecatch__eyebrow, .article-eyecatch__title { position: relative; z-index: 1; display: block; }
.article-eyecatch__eyebrow { margin-bottom: 12px; color: #dcecff; font-size: clamp(0.6875rem, 1.4vw, 0.8125rem); font-weight: 800; letter-spacing: 0.14em; line-height: 1.5; }
.article-eyecatch__title { max-width: 14em; font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.4; }
.article-eyecatch__shape { position: absolute; top: 16%; right: 17%; width: 17%; aspect-ratio: 1; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.34); border-radius: 14px; transform: rotate(9deg); }
.article-body { width: min(calc(100% - 48px), 680px); margin-inline: auto; }
.article-toc { margin-bottom: 56px; padding-block: 28px 30px; border-block: 1px solid var(--color-line-strong); }
.article-toc h2 { margin-bottom: 20px; color: var(--color-primary-deep); font-size: 1.125rem; font-weight: 900; line-height: 1.5; }
/* padding-leftはol(16px)基準、::markerはli(14px)＋font-weight:700で描画されるため、
   1.5em(24px)では「10.」以降の2桁マーカーが収まらず左端で欠ける。
   2桁分の実測幅（約23px）＋余裕を確保する。1桁のみの記事は字下げが揃うだけ。 */
.article-toc ol { display: grid; padding-left: 2.2em; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; list-style: decimal; }
.article-toc li { min-width: 0; padding-left: 2px; color: var(--color-primary-bright); font-size: 0.875rem; line-height: 1.7; }
.article-toc li::marker { color: var(--color-primary-bright); font-weight: 700; }
.article-toc a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; overflow-wrap: anywhere; transition: text-decoration-color var(--transition); }
.article-toc a:hover { text-decoration-color: currentColor; }
.article-content section { scroll-margin-top: calc(var(--header-height) + 22px); }
.article-content h2 { margin: 64px 0 22px; padding-bottom: 12px; color: var(--color-primary-deep); border-bottom: 1px solid var(--color-line-strong); font-size: clamp(1.5rem, 2.6vw, 1.75rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.5; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-content section:first-child h2 { margin-top: 0; }
.article-content h3 { margin: 36px 0 14px; color: var(--color-primary-deep); font-size: 1.1875rem; font-weight: 800; line-height: 1.55; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-content p, .article-content li { color: var(--color-text); font-size: 1.0625rem; line-height: 1.9; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-content p { max-width: 36em; margin-bottom: 1.55em; }
.article-content ul, .article-content ol { max-width: 36em; margin: 0 0 30px; padding-left: 1.45em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { padding-left: 0.25em; }
.article-content li + li { margin-top: 8px; }
.article-content li::marker { color: var(--color-primary-bright); font-weight: 800; }
.article-content strong { color: var(--color-primary-deep); font-weight: 800; }
.article-content a, .mervelta-guide a { color: var(--color-primary-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.article-content blockquote { max-width: 36em; margin: 36px 0; padding: 2px 0 2px 22px; border-left: 4px solid var(--color-teal); }
.article-content blockquote p { margin: 0; color: #334a68; font-size: 1rem; font-weight: 600; line-height: 1.9; }
.article-content pre { max-width: 100%; margin: 28px 0 30px; padding: 20px 22px; overflow-x: auto; color: #e9f1fb; background: var(--color-primary-deep); border-radius: 6px; font-size: 0.875rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.article-content code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.article-content :not(pre) > code { padding: 0.1em 0.35em; color: var(--color-primary-deep); background: var(--color-sky); border-radius: 3px; font-size: 0.9em; }
.article-table-scroll { max-width: 100%; margin: 38px 0 42px; overflow-x: auto; border-block: 1px solid var(--color-line-strong); }
.article-table-scroll:focus-visible { outline-offset: 4px; }
.article-content table { width: 100%; min-width: 600px; border-collapse: collapse; color: var(--color-text); font-size: 0.875rem; line-height: 1.7; }
.article-content caption { padding: 0 0 12px; color: var(--color-primary-deep); font-weight: 800; text-align: left; }
.article-content th, .article-content td { padding: 14px 16px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.article-content thead th { color: var(--color-primary-deep); background: var(--color-surface); font-weight: 800; }
.article-content tbody th { color: var(--color-primary-deep); font-weight: 700; white-space: nowrap; }
.article-content tbody tr:last-child > * { border-bottom: 0; }
.article-note { max-width: 36em; margin: 34px 0 38px; padding: 20px 22px; border-left: 4px solid var(--color-primary-bright); background: var(--color-sky); }
.article-note--caution { border-left-color: #c69322; background: #fff9e9; }
.article-note--point { background: var(--color-white); border: 1px solid var(--color-line-strong); border-left: 4px solid var(--color-primary-deep); }
.article-note--point h3 { color: var(--color-primary-bright); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; }
.article-note h3 { margin: 0 0 8px; font-size: 1rem; }
.article-note p { margin: 0; font-size: 0.9375rem; line-height: 1.8; }
.article-keypoints { margin: 0 0 44px; }
.article-keypoints h2 { margin: 0 0 12px; color: var(--color-primary-deep); font-size: 1.0625rem; font-weight: 900; line-height: 1.5; }
.article-keypoints ul { padding-left: 1.3em; list-style: disc; }
.article-keypoints li { color: var(--color-text); font-size: 0.9375rem; line-height: 1.8; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-keypoints li + li { margin-top: 7px; }
.article-keypoints li::marker { color: var(--color-primary-bright); }
.article-content .article-steps { display: grid; max-width: none; margin: 30px 0 34px; padding-left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; list-style: none; }
.article-content .article-steps__item { position: relative; display: flex; min-width: 0; margin: 0; padding: 18px 14px 20px; align-items: center; flex-direction: column; gap: 9px; text-align: center; background: var(--color-sky); border-top: 3px solid var(--color-primary-bright); border-radius: 6px; }
.article-steps__num { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--color-white); background: var(--color-primary-deep); border-radius: 50%; font-size: 0.8125rem; font-weight: 900; line-height: 1; }
.article-steps__label { color: var(--color-primary-deep); font-size: 0.9375rem; font-weight: 800; line-height: 1.55; word-break: normal; line-break: strict; }
.article-steps__item + .article-steps__item::before { position: absolute; top: 50%; left: -16px; width: 9px; height: 9px; border-top: 2px solid #9db3d1; border-right: 2px solid #9db3d1; content: ""; transform: translateY(-50%) rotate(45deg); }
/* 検討の順番を記事の核心として見せるブロック */
.article-stepflow { margin: 34px 0 38px; padding: 26px 26px 24px; background: var(--color-white); border: 1px solid var(--color-line-strong); border-top: 3px solid var(--color-primary-deep); border-radius: 8px; }
.article-stepflow__eyebrow { margin-bottom: 8px; color: var(--color-primary-bright); font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.14em; line-height: 1.5; }
.article-content .article-stepflow__eyebrow { max-width: none; margin-bottom: 8px; font-size: 0.6875rem; }
.article-content .article-stepflow__title { max-width: none; margin-bottom: 22px; color: var(--color-primary-deep); font-size: 1.1875rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.55; }
.article-content .article-steps--flow { margin: 0; }
.article-steps--flow .article-steps__item { padding: 16px 12px 18px; gap: 6px; }
.article-steps__step { color: var(--color-primary-bright); font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1.4; }
.article-steps__desc { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.65; word-break: normal; line-break: strict; }
.article-content .article-stepflow__note { max-width: none; margin: 18px 0 0; padding-top: 14px; color: var(--color-muted); border-top: 1px solid var(--color-line); font-size: 0.8125rem; line-height: 1.75; }
/* 10項目の途中に置く、読者への問いかけ */
.article-check { position: relative; max-width: 36em; margin: 36px 0 40px; padding: 22px 24px; background: var(--color-sky); border-radius: 6px; }
.article-check::before { position: absolute; top: 26px; left: 0; width: 3px; height: 30px; background: var(--color-primary-bright); border-radius: 0 2px 2px 0; content: ""; }
.article-content .article-check__label { max-width: none; margin-bottom: 8px; color: var(--color-primary-bright); font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.14em; line-height: 1.5; }
.article-content .article-check__title { margin: 0 0 10px; color: var(--color-primary-deep); font-size: 1.125rem; font-weight: 800; line-height: 1.6; }
.article-content .article-check p:last-child { max-width: none; margin: 0; font-size: 0.9375rem; line-height: 1.85; }
.article-faq { margin: 26px 0 6px; }
.article-faq__item { padding-block: 22px; border-top: 1px solid var(--color-line-strong); }
.article-faq__item:last-child { border-bottom: 1px solid var(--color-line-strong); }
.article-content .article-faq__q { display: grid; margin: 0 0 12px; grid-template-columns: 1.7em minmax(0, 1fr); font-size: 1.0625rem; }
.article-content .article-faq__a { display: grid; max-width: none; margin: 0; grid-template-columns: 1.7em minmax(0, 1fr); color: #334a68; font-size: 1rem; }
.article-faq__q::before, .article-faq__a::before { font-weight: 900; }
.article-faq__q::before { color: var(--color-primary-bright); content: "Q."; }
.article-faq__a::before { color: var(--color-teal); content: "A."; }
.article-detail--hero .article-header { padding-block: 18px 26px; }
.article-detail--hero .article-eyecatch { margin-bottom: 30px; }
.article-header h1.article-title { max-width: none; margin-bottom: 0; }
/* 「10の仕事」は意味のまとまりとして常に同一行へ保つ */
.article-title__keep { white-space: nowrap; }
.article-intro { width: min(calc(100% - 48px), 840px); margin: 0 auto 52px; }
.article-intro .article-meta { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.article-intro .article-lead { margin-bottom: 0; }
.article-figures { display: flex; margin: 32px 0 36px; padding: 22px 18px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px; }
.article-figures__item { display: flex; min-width: 0; align-items: center; flex-direction: column; gap: 5px; text-align: center; }
.article-figures__num { color: var(--color-primary-deep); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.article-figures__item--result .article-figures__num { color: var(--color-primary-bright); }
.article-figures__unit { margin-left: 3px; font-size: 0.58em; font-weight: 800; }
.article-figures__label { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.article-figures__op { flex: none; width: 9px; height: 9px; border-top: 2px solid #9db3d1; border-right: 2px solid #9db3d1; transform: rotate(45deg); }
.article-tasknav { margin: 28px 0 42px; border-top: 1px solid var(--color-line-strong); }
.article-content .article-tasknav ol { display: grid; max-width: none; margin: 0; padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; list-style: none; }
.article-content .article-tasknav li { margin: 0; padding-left: 0; }
.article-content .article-tasknav a { display: grid; padding-block: 12px; align-items: baseline; grid-template-columns: 2.3em minmax(0, 1fr); gap: 4px; color: var(--color-primary-deep); border-bottom: 1px solid var(--color-line); text-decoration: none; transition: color var(--transition); }
.article-content .article-tasknav a:hover { color: var(--color-primary-bright); }
.article-tasknav__num { color: var(--color-primary-bright); font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.03em; line-height: 1.7; }
.article-tasknav__label { font-size: 0.9375rem; font-weight: 700; line-height: 1.6; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-content .article-task-heading { scroll-margin-top: calc(var(--header-height) + 22px); }
.article-task-heading__num { margin-right: 1px; color: var(--color-primary-bright); font-size: 1.05em; font-weight: 900; }
.article-actionbox { max-width: 36em; margin: 32px 0 36px; padding: 22px 24px; background: var(--color-sky); border-radius: 8px; }
.article-content .article-actionbox ol { display: grid; max-width: none; margin: 0; padding-left: 0; gap: 14px; list-style: none; }
.article-content .article-actionbox li { display: grid; margin: 0; padding-left: 0; align-items: start; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.article-actionbox__num { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; margin-top: 2px; color: var(--color-white); background: var(--color-primary-deep); border-radius: 50%; font-size: 0.8125rem; font-weight: 900; line-height: 1; }
.article-actionbox__text { color: var(--color-primary-deep); font-size: 0.9375rem; font-weight: 700; line-height: 1.7; word-break: normal; line-break: strict; }
.article-split { display: grid; max-width: 36em; margin: 30px 0 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px 30px; }
.article-split__col { min-width: 0; padding-top: 13px; border-top: 3px solid var(--color-primary-bright); }
.article-split__col--human { border-top-color: var(--color-primary-deep); }
.article-split__head { margin-bottom: 12px; color: var(--color-primary-deep); font-size: 0.9375rem; font-weight: 900; line-height: 1.5; }
.article-split__note { display: block; margin-top: 3px; color: var(--color-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.article-content .article-split ul { max-width: none; margin: 0; padding-left: 1.2em; }
.article-content .article-split li { font-size: 0.9375rem; line-height: 1.7; }
.article-content .article-split li + li { margin-top: 7px; }
/* 記事1 Section 04：既製サービスと専用化を1枚で比較する判断パネル */
.article-decision-panel { display: grid; width: 100%; margin: 30px 0 18px; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-sky); border: 1px solid var(--color-line-strong); border-radius: 8px; }
.article-decision-panel__option { min-width: 0; padding: 24px 26px 25px; }
.article-decision-panel__option + .article-decision-panel__option { border-left: 1px solid var(--color-line-strong); }
.article-detail--standard .article-content h3.article-decision-panel__title { margin: 0 0 10px; color: var(--color-primary-deep); font-size: 1.0625rem; font-weight: 700; line-height: 1.65; }
.article-content .article-decision-panel__description { margin: 0 0 14px; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.8; }
.article-content .article-decision-panel__checks { display: grid; max-width: none; margin: 0; padding: 0; gap: 7px; list-style: none; }
.article-content .article-decision-panel__check { position: relative; margin: 0; padding-left: 1.45em; color: var(--color-text); font-size: 0.9375rem; line-height: 1.7; }
.article-decision-panel__check::before { position: absolute; top: 0; left: 0; color: var(--color-primary-bright); content: "✓"; font-weight: 700; }
.article-decision-point { margin: 0 0 34px; padding: 10px 16px 11px; background: var(--color-surface); border-left: 3px solid var(--color-primary-bright); }
.article-content .article-decision-point__label { margin: 0 0 3px; color: var(--color-primary-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; }
.article-content .article-decision-point__text { margin: 0; color: var(--color-text); font-size: 1rem; font-weight: 500; line-height: 1.85; }
.article-closing { margin-top: 72px; }
.mervelta-guide { padding: 28px 0; border-block: 1px solid var(--color-line-strong); }
.mervelta-guide h2, .article-related h2 { margin-bottom: 12px; color: var(--color-primary-deep); font-size: 1.25rem; font-weight: 900; line-height: 1.5; }
.mervelta-guide p { max-width: 34em; margin: 0; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.8; word-break: normal; line-break: strict; }
.mervelta-guide p + p { margin-top: 10px; }
@media (min-width: 768px) {
  .mervelta-guide p.mervelta-guide__description--wide { max-width: none; }
}
.article-related { padding-top: 48px; }
.article-related__note { margin-bottom: 18px; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.7; }
.article-related ul { display: grid; border-top: 1px solid var(--color-line); }
.article-related li { display: flex; min-width: 0; padding-block: 16px; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--color-line); }
.article-related li span { min-width: 0; color: var(--color-primary-deep); font-size: 0.9375rem; font-weight: 700; line-height: 1.6; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-related li a { min-width: 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--transition); }
.article-related li a:hover { text-decoration-color: var(--color-primary-bright); }
.article-related li a:hover span { color: var(--color-primary-bright); }
.article-related li small { flex: none; color: var(--color-muted); font-size: 0.6875rem; line-height: 1.5; }

/* Articles index */
.articles-page { min-width: 0; background: var(--color-white); }
.articles-page .article-breadcrumb { width: min(calc(100% - 48px), var(--container)); }
.articles-header { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; padding-block: 20px 42px; }
.articles-header .section-head__label { margin-bottom: 8px; }
.articles-header h1 { margin-bottom: 14px; color: var(--color-primary-deep); font-size: clamp(2rem, 3.8vw, 2.75rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.45; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.articles-header > p:last-child { max-width: 34em; color: var(--color-muted); font-size: 1rem; line-height: 1.8; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.articles-category-nav { border-top: 1px solid #eef2f7; }
.articles-index { padding-block: 60px 72px; }
.articles-index__head { display: flex; margin-bottom: 30px; padding-bottom: 18px; align-items: baseline; justify-content: space-between; gap: 16px 28px; border-bottom: 1px solid var(--color-line-strong); }
.articles-index__head h2 { color: var(--color-primary-deep); font-size: clamp(1.45rem, 2.2vw, 1.625rem); font-weight: 900; line-height: 1.5; }
.articles-index__head p { color: var(--color-muted); font-size: 0.75rem; line-height: 1.6; }
.articles-index__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 36px; }
.article-entry { min-width: 0; padding-bottom: 34px; border-bottom: 1px solid var(--color-line); }
.article-entry__link { display: block; min-width: 0; }
.article-entry__visual { margin-bottom: 18px; aspect-ratio: 16 / 9; }
/* 記事アイキャッチをカードのサムネイルに使う枠（図版の文字を切らないためcontain） */
.article-thumb { min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-white); border-radius: 8px; }
.article-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.article-preview .article-thumb { margin-bottom: 14px; border-radius: 6px; }
.article-entry__body { min-width: 0; }
.article-entry .story-meta { margin-bottom: 9px; }
.article-entry h3 { margin-bottom: 10px; color: var(--color-primary-deep); font-size: 1.125rem; font-weight: 800; line-height: 1.55; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-entry__excerpt { max-width: 34em; margin-bottom: 14px; color: var(--color-muted); font-size: 0.875rem; line-height: 1.8; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.article-entry__action { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary-bright); font-size: 0.75rem; font-weight: 800; line-height: 1.5; }
.article-entry__status { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.article-entry__link h3, .article-entry__link .article-entry__visual { transition: color var(--transition), opacity var(--transition); }
.article-entry__link:hover h3 { color: var(--color-primary-bright); }
.article-entry__link:hover .article-entry__visual { opacity: 0.9; }

/* Articles index: Webメディア型レイアウト（メイン＋右サイドバー）。/articles/ のみに適用し、categoryページの一覧は現状維持 */
.articles-index__layout { display: grid; width: min(calc(100% - 48px), 1160px); margin-inline: auto; align-items: start; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.articles-index__main { min-width: 0; }
.articles-index__aside { position: sticky; top: calc(var(--header-height) + 24px); min-width: 0; }
.articles-index__aside .section-head { margin-bottom: 10px; }
.articles-index__aside-note { margin-bottom: 4px; color: var(--color-muted); font-size: 0.75rem; line-height: 1.7; word-break: normal; line-break: strict; }
.popular-item--compact { align-items: start; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.popular-item--compact .popular-item__rank { font-size: 1.0625rem; }
.popular-item--compact h3 { margin-bottom: 4px; font-size: 0.875rem; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
.popular-item--compact a { transition: color var(--transition); }
.popular-item--compact a:hover { color: var(--color-primary-bright); }
.popular-item__cat { color: var(--color-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; }

/* START HERE（トップページ右カラム。将来POPULARへ差し替える想定の静的リスト） */
.start-here__note { margin-bottom: 4px; color: var(--color-muted); font-size: 0.75rem; line-height: 1.7; word-break: normal; line-break: strict; }
.articles-about { padding-block: 48px; background: var(--color-surface); }
.articles-about__inner { max-width: 760px; }
.articles-about h2 { margin-bottom: 10px; color: var(--color-primary-deep); font-size: 1.25rem; font-weight: 900; line-height: 1.5; }
.articles-about p { max-width: 34em; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.8; word-break: normal; line-break: strict; }
.articles-about p + p { margin-top: 10px; }
.articles-about a { color: var(--color-primary-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

@media (max-width: 1180px) {
  .articles-index__layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
}

@media (max-width: 1023px) {
  .articles-index__layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .articles-index__aside { position: static; top: auto; }
}

@media (max-width: 767px) {
  .articles-index__layout { width: calc(100% - var(--sp-gutter) * 2); gap: 40px; }
}

@media (max-width: 374px) {
  /* レイアウト幅も --sp-gutter に従う（個別の28px指定は撤去） */
  /* 320px幅で「｜」が行頭に落ちるのを避けるため、サイドバー見出しのみ僅かに縮める */
  .popular-item--compact h3 { font-size: 0.8125rem; }
}

/* Footer */
.site-footer { padding-block: 56px 28px; color: #c9d6e8; background: var(--color-primary-deep); }
.site-footer__grid { display: grid; margin-bottom: 40px; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.site-footer__brand > .brand { display: inline-flex; margin-bottom: 12px; align-items: center; gap: 10px; }
.site-footer__brand .brand__name { color: var(--color-white); font-size: 0.9375rem; }
.site-footer__brand .brand__logo { width: 32px; height: 32px; }
.site-footer__brand p { max-width: 34em; color: #9db3d1; font-size: 0.8125rem; line-height: 1.8; word-break: normal; line-break: strict; }
.site-footer__col { min-width: 0; }
.site-footer__heading { margin-bottom: 14px; color: var(--color-white); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; }
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__legal { margin-top: 14px; }
.site-footer__col a, .site-footer__col span { display: block; color: #9db3d1; font-size: 0.8125rem; line-height: 1.5; }
.site-footer__col a { transition: color var(--transition); }
.site-footer__col a:hover { color: var(--color-white); }
.site-footer__copy { padding-top: 20px; border-top: 1px solid #16407a; color: #7d95b8; font-size: 0.75rem; }

@media (max-width: 900px) {
  /* 5列のままだと1列が104pxまで痩せ、「MERVELTAについて」など8文字以上の
     footerリンクが1文字だけ次行へ落ちる。編集エリアが1カラムへ切り替わるのと
     同じ900pxで、footerも2列へ落として1行に収める。 */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  :root { --header-height: 79px; }
  .desktop-nav, .header-search { display: none; }
  .header-social { margin-left: auto; }
  /* 検索・SNSを撤去したため、メニューボタン自身を右端に寄せる */
  .menu-button { margin-left: auto; }
  .menu-button { display: inline-flex; width: 48px; height: 48px; padding: 0; align-items: center; justify-content: center; color: var(--color-primary); background: transparent; border: 1px solid var(--color-line); border-radius: 50%; cursor: pointer; }
  .menu-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-button__icon { display: grid; width: 20px; gap: 4px; }
  .menu-button__icon i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
  .menu-button[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: 99; top: var(--header-height); right: 0; bottom: 0; left: 0; display: block; overflow-y: auto; background: rgba(255,255,255,0.985); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__nav { width: min(calc(100% - 40px), 620px); margin-inline: auto; padding-block: 26px 46px; }
  .mobile-menu__list a { display: flex; min-height: 54px; padding: 14px 4px; align-items: center; justify-content: space-between; color: var(--color-primary-deep); border-bottom: 1px solid var(--color-line); font-size: 0.95rem; font-weight: 700; }
  .mobile-menu__list a::after { color: var(--color-primary-bright); content: "→"; }
  .editorial__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px 32px; }
  .hero__deco--blob-sub { right: 42%; }
  .hero__deco--dot { right: 30%; }
}

@media (max-width: 900px) {
  .editorial__grid { grid-template-columns: 1fr; gap: 56px; }
  .editorial__grid > .pickup,
  .editorial__grid > .start-here,
  .editorial__grid > .new-articles { grid-column: 1; grid-row: auto; }
  .pickup-story .article-thumb { width: 96px; }
  .popular__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .popular-item:nth-last-child(2) { border-bottom: 0; }
  .start-here .popular__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .start-here .popular-item { border-bottom: 0; }
  .hero__inner { min-height: 300px; }
  .hero__illustration { max-width: 300px; }
}

/* 記事h1のみ、意味の区切りで行を分ける（PCは2行に収まるサイズ） */
.article-title__line { display: block; }
@media (min-width: 768px) {
  .article-header h1.article-title { font-size: clamp(2rem, 3.4vw, 2.8125rem); letter-spacing: -0.03em; }
}

@media (max-width: 767px) {
  :root { --header-height: 67px; }
  .container { width: min(calc(100% - var(--sp-gutter) * 2), var(--container)); }
  /* ヘッダーだけ12pxで内側の記事本文(16px)と左端がずれていたため、ガターを統一する */
  .site-header__inner { width: calc(100% - var(--sp-gutter) * 2); padding-block: 11px; gap: 12px; }
  .brand__logo { width: 36px; height: 36px; }
  .site-header .brand__logo { width: 148px; height: 41px; }
  .brand__name { font-size: 0.875rem; }
  .brand__descriptor { display: none; }
  .header-social { gap: 14px; }
  .menu-button { width: 44px; height: 44px; }
  .hero__inner { min-height: auto; padding-block: 36px 0; align-items: stretch; flex-direction: column; gap: 8px; }
  .hero__copy { flex: none; max-width: none; padding-block: 0; }
  .hero__label { margin-bottom: 16px; font-size: 0.6875rem; }
  .hero__name { margin-bottom: 12px; }
  .hero__lead { font-size: 0.9375rem; }
  .hero__art { flex: none; height: 260px; justify-content: center; }
  .hero__illustration { max-width: 260px; height: 100%; min-height: 0; transform: none; }
  .hero__deco--blob-main { right: -10px; width: 300px; }
  .hero__deco--blob-sub { right: 55%; width: 180px; }
  .hero__deco--arc { width: 140px; }
  .hero__deco--dotgrid { width: 60px; }
  .hero__deco--dot { right: 24%; }
  .category-nav__list { min-height: 0; padding-block: 12px; gap: 8px 20px; }
  .editorial { padding-block: 44px 48px; }
  .editorial__grid { gap: 48px; }
  .section-head { margin-bottom: 22px; }
  .pickup__layout { grid-template-columns: 1fr; gap: 28px; }
  .pickup__btn { width: 34px; height: 34px; }
  .article-list { grid-template-columns: 1fr; gap: 30px; }
  .popular__list { grid-template-columns: 1fr; }
  .popular-item:nth-last-child(2) { border-bottom: 1px solid var(--color-line); }
  .start-here .popular__list { grid-template-columns: 1fr; }
  .start-here .popular-item { border-bottom: 1px solid var(--color-line); }
  .start-here .popular-item:last-child { border-bottom: 0; }
  .topics { padding-block: 48px 44px; }
  .topic-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .about { padding-block: 48px; }
  .about__inner { text-align: left; }
  .about__text { font-size: 1rem; }
  .article-breadcrumb { width: calc(100% - var(--sp-gutter) * 2); padding-block: 18px 10px; }
  .articles-page .article-breadcrumb { width: calc(100% - var(--sp-gutter) * 2); padding-block: 18px 10px; }
  .article-breadcrumb li + li::before { margin-inline: 8px; }
  .article-header { width: calc(100% - var(--sp-gutter) * 2); padding-block: 16px 28px; }
  .article-category { margin-bottom: 14px; }
  .article-header h1 { margin-bottom: 18px; font-size: clamp(1.75rem, 8.5vw, 2.25rem); line-height: 1.45; }
  /* 長いタイトルをSPでも意味のまとまりごとに1行へ収める */
  .article-header h1.article-title { font-size: clamp(1.625rem, 7.6vw, 2.125rem); }
  .article-lead { margin-bottom: 20px; font-size: 1rem; line-height: 1.85; }
  /* 公開／更新／著者はSPでは1行に畳み、記事情報が本文を押し下げないようにする */
  .article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .article-meta div { display: flex; align-items: baseline; gap: 5px; }
  .article-intro .article-meta { margin-bottom: 10px; padding-bottom: 10px; }
  .article-eyecatch { width: calc(100% - var(--sp-gutter) * 2); margin-bottom: 40px; border-radius: 8px; }
  .article-eyecatch__placeholder { padding: 24px; }
  .article-eyecatch__title { max-width: 10em; font-size: clamp(1.35rem, 7vw, 1.875rem); }
  .article-body { width: calc(100% - var(--sp-gutter) * 2); }
  .article-toc { margin-bottom: 30px; padding-block: 16px 18px; }
  .article-toc ol { grid-template-columns: 1fr; gap: 4px; }
  .article-content h2 { margin-top: 40px; margin-bottom: 16px; padding-bottom: 10px; font-size: 1.4375rem; }
  .article-content h3 { margin-top: 24px; font-size: 1.125rem; }
  .article-content p, .article-content li { font-size: 1rem; line-height: 1.85; }
  .article-content p { margin-bottom: 1.5em; }
  .article-content ul, .article-content ol { margin-bottom: 22px; padding-left: 1.3em; }
  .article-content blockquote { margin-block: 30px; padding-left: 18px; }
  .article-content pre { padding: 18px; font-size: 0.8125rem; }
  .article-table-scroll { margin-block: 24px 28px; }
  .article-content th, .article-content td { padding: 12px 14px; }
  .article-note { margin-block: 24px 28px; padding: 15px 16px; }
  .article-keypoints { margin-block: 0 28px; }
  .article-content .article-steps { margin-block: 26px 30px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .article-content .article-steps__item { padding: 15px 14px 17px; }
  .article-stepflow { margin-block: 30px 34px; padding: 20px 16px; }
  .article-content .article-stepflow__title { margin-bottom: 18px; font-size: 1.0625rem; }
  .article-check { margin-block: 30px 34px; padding: 18px 18px 20px; }
  .article-check::before { top: 22px; }
  .article-content .article-check__title { font-size: 1.0625rem; }
  .article-steps__item + .article-steps__item::before { top: -15px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .article-faq__item { padding-block: 6px; }
  .article-content .article-faq__q { margin-bottom: 10px; grid-template-columns: 1.6em minmax(0, 1fr); font-size: 1rem; }
  .article-content .article-faq__a { grid-template-columns: 1.6em minmax(0, 1fr); font-size: 0.9375rem; }
  .article-detail--hero .article-header { padding-block: 14px 20px; }
  .article-detail--hero .article-eyecatch { margin-bottom: 24px; }
  .article-intro { width: calc(100% - var(--sp-gutter) * 2); margin-bottom: 28px; }
  .article-figures { margin-block: 28px 32px; padding: 16px 10px; gap: 10px; }
  .article-figures__num { font-size: 1.375rem; }
  .article-figures__label { font-size: 0.6875rem; }
  .article-tasknav { margin-block: 24px 34px; }
  .article-content .article-tasknav ol { grid-template-columns: minmax(0, 1fr); }
  .article-content .article-tasknav a { padding-block: 11px; }
  .article-split { margin-block: 26px 30px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .article-decision-panel { margin-block: 26px 16px; grid-template-columns: minmax(0, 1fr); }
  .article-decision-panel__option { padding: 19px 18px 20px; }
  .article-decision-panel__option + .article-decision-panel__option { border-top: 1px solid #cddded; border-left: 0; }
  .article-detail--standard .article-content h3.article-decision-panel__title { font-size: 1.0625rem; }
  .article-content .article-decision-panel__description { margin-bottom: 12px; font-size: 0.9375rem; line-height: 1.75; }
  .article-content .article-decision-panel__checks { gap: 5px; }
  .article-content .article-decision-panel__check { font-size: 0.9375rem; line-height: 1.7; }
  .article-decision-point { margin-bottom: 30px; padding: 10px 14px 11px; }
  .article-content .article-decision-point__text { font-size: 0.9375rem; line-height: 1.8; }
  .article-actionbox { margin-block: 28px 32px; padding: 18px 16px; }
  .article-content .article-actionbox ol { gap: 12px; }
  .article-closing { margin-top: 40px; }
  .mervelta-guide { padding-block: 18px; }
  .article-related { padding-top: 26px; }
  .article-related li { padding-block: 12px; align-items: flex-start; flex-direction: column; gap: 3px; }
  .articles-header { width: calc(100% - var(--sp-gutter) * 2); padding-block: 14px 32px; }
  .articles-header h1 { margin-bottom: 10px; font-size: 1.875rem; }
  .articles-header > p:last-child { font-size: 0.9375rem; }
  .articles-index { padding-block: 44px 52px; }
  .articles-index__head { margin-bottom: 24px; padding-bottom: 14px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .articles-index__grid { grid-template-columns: 1fr; gap: 34px; }
  .article-entry { padding-bottom: 28px; }
  .article-entry__visual { margin-bottom: 15px; }
  .article-entry h3 { font-size: 1.0625rem; }
  .article-entry__excerpt { margin-bottom: 12px; font-size: 0.875rem; }
  .articles-about { padding-block: 40px; }
  .site-footer { padding-block: 44px 24px; }
  .site-footer__grid { margin-bottom: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 374px) {
  /* 320px級でも14pxまで詰めない。ガターは全SP幅で --sp-gutter に統一する */
  .hero__art { height: 220px; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .desktop-nav__list a, .menu-button__icon i, .site-footer__col a { transition-duration: 0.01ms; }
}


/* ============================================================
   MERVELTA Article Standard v1.0 ／ .article-detail--standard
   ------------------------------------------------------------
   正式記事の共通Typography。記事1・記事2が適用済み。
   1. 標準モディファイア（本文18px/400、strong・h3・h2は700 ほか）
   2. 記事固有パーツ（作業ラベル / 選択肢リスト / 3列ステップ / FAQ補足）
   .article-detail 本体には統合しない。Standard未適用の記事へ
   副作用を出さないため、必ずモディファイア経由で適用する。
   本文サイズの引き上げは p / li の「クラスなし要素」に限定し、
   ラベル・見出し系パーツの独自スタイルを潰さないようにしている。
   ============================================================ */

/* --- 1. 標準モディファイア（PC基準） --- */
.article-detail--standard {
  --standard-sub: #2b3f5c;
  --standard-muted: #45536b;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", Meiryo, "メイリオ", sans-serif;
  letter-spacing: 0.02em;
}
.article-detail--standard .article-category { font-size: 0.875rem; }
.article-detail--standard .article-meta { color: var(--standard-muted); font-size: 0.8125rem; }
.article-detail--standard .article-meta dt { color: var(--standard-muted); font-weight: 400; }
.article-detail--standard .article-meta dd { font-weight: 400; }
.article-detail--standard .article-lead { max-width: 32em; color: var(--standard-sub); font-size: 1.1875rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.95; }
.article-detail--standard .article-keypoints h2 { font-size: 1.1875rem; font-weight: 700; }
.article-detail--standard .article-keypoints li { color: var(--color-text); font-size: 1.0625rem; font-weight: 400; line-height: 1.9; }
.article-detail--standard .article-keypoints li + li { margin-top: 9px; }
.article-detail--standard .article-toc h2 { font-size: 1.1875rem; font-weight: 700; }
.article-detail--standard .article-toc li { font-size: 1rem; font-weight: 400; line-height: 1.8; }
.article-detail--standard .article-content h2 { font-size: clamp(1.625rem, 2.8vw, 1.875rem); font-weight: 700; letter-spacing: 0.01em; line-height: 1.5; }
.article-detail--standard .article-content h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.6; }
.article-detail--standard .article-content strong { font-weight: 700; }
.article-detail--standard .article-content th { font-size: 1rem; font-weight: 700; }
.article-detail--standard .article-content td { font-size: 1rem; font-weight: 400; }

/* 本文（クラスを持たないp / li）のみサイズ・太さ・行間を引き上げる */
.article-detail--standard .article-content p:not([class]),
.article-detail--standard .article-content li:not([class]) { color: var(--color-text); font-size: 1.125rem; font-weight: 400; line-height: 1.95; }
.article-detail--standard .article-content p:not([class]) { max-width: 34em; margin-bottom: 1.6em; }
.article-detail--standard .article-content ul:not([class]),
.article-detail--standard .article-content ol:not([class]) { max-width: 34em; margin-bottom: 32px; font-size: 1.125rem; }
.article-detail--standard .article-content li:not([class]) + li:not([class]) { margin-top: 10px; }
/* 上の行間ルールは「本文の箇条書き」向け。クラスを持たないliを使う
   コンポーネント（項目ナビ・行動リスト）には効かせない。
   効いてしまうと2列グリッドの1行目だけ10pxずれる。 */
.article-detail--standard .article-content .article-tasknav li:not([class]) + li:not([class]),
.article-detail--standard .article-content .article-actionbox li:not([class]) + li:not([class]) { margin-top: 0; }

@media (min-width: 768px) {
  .article-detail--first-steps .article-content p:not([class]) { max-width: none; }
}

/* パーツ内の文字も本文に合わせて底上げする（各パーツの役割は保つ） */
.article-detail--standard .article-steps__label { font-size: 1.0625rem; font-weight: 700; }
.article-detail--standard .article-steps__desc { color: var(--standard-muted); font-size: 0.8125rem; font-weight: 400; line-height: 1.7; }
.article-detail--standard .article-content .article-stepflow__title { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; }
.article-detail--standard .article-content .article-stepflow__note { color: var(--standard-muted); font-size: 0.875rem; font-weight: 400; }
.article-detail--standard .article-tasknav__label { font-size: 1.0625rem; font-weight: 700; }
.article-detail--standard .article-tasknav__num { font-size: 0.875rem; }
.article-detail--standard .article-split__head { font-size: 1.0625rem; font-weight: 700; }
.article-detail--standard .article-content .article-split li { color: var(--color-text); font-size: 1.0625rem; font-weight: 400; line-height: 1.8; }
/* 行動リスト（記事1で使用）も他パーツと同じ17pxへ。役割上ウェイトは700のまま */
.article-detail--standard .article-actionbox__text { font-size: 1.0625rem; font-weight: 700; }
.article-detail--standard .article-content .article-check__title { font-size: 1.1875rem; font-weight: 700; }
.article-detail--standard .article-content .article-check p:last-child { color: var(--color-text); font-size: 1.0625rem; font-weight: 400; line-height: 1.9; }
/* Q./A.マーカーはgridではなくぶら下げインデントで置く。
   gridのままだとQ/A本文中の<strong>等が独立したグリッドアイテムになり、
   1.7em幅の列へ落ちて1文字ずつ縦積みになるため。 */
.article-detail--standard .article-content .article-faq__q,
.article-detail--standard .article-content .article-faq__a { position: relative; display: block; padding-left: 1.7em; }
.article-detail--standard .article-faq__q::before,
.article-detail--standard .article-faq__a::before { position: absolute; top: 0; left: 0; }
.article-detail--standard .article-content .article-faq__q { font-size: 1.1875rem; font-weight: 700; }
.article-detail--standard .article-content .article-faq__a { color: var(--color-text); font-size: 1.0625rem; font-weight: 400; }
.article-detail--standard .article-content .article-faq__body { color: var(--standard-sub); font-size: 1.0625rem; font-weight: 400; }
.article-detail--standard .article-content ul.article-faq__body li { font-size: 1.0625rem; font-weight: 400; line-height: 1.9; }
.article-detail--standard .article-related li span { font-size: 1rem; }

/* --- 2-1. 15業務の小見出しラベル（どんな作業か／なぜ自動化しやすいか／方法の例） --- */
.article-content .article-tasklabel { max-width: none; margin: 24px 0 7px; color: var(--color-primary-bright); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; line-height: 1.5; }
.article-content h3 + .article-tasklabel { margin-top: 16px; }

/* --- 2-2. 自動化方法の選択肢リスト --- */
.article-content .article-optionlist { display: grid; max-width: none; margin: 30px 0 36px; padding-left: 0; border-top: 1px solid var(--color-line-strong); list-style: none; }
.article-content .article-optionlist li { display: grid; margin: 0; padding: 15px 0; align-items: baseline; grid-template-columns: 2.6em minmax(0, 1fr); border-bottom: 1px solid var(--color-line); }
.article-optionlist__num { color: var(--color-primary-bright); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.03em; line-height: 1.7; }
.article-optionlist__body { min-width: 0; }
.article-optionlist__term { display: block; color: var(--color-primary-deep); font-size: 1.0625rem; font-weight: 800; line-height: 1.6; word-break: normal; line-break: strict; }
.article-optionlist__desc { display: block; margin-top: 2px; color: #45536b; font-size: 0.9375rem; font-weight: 500; line-height: 1.75; word-break: normal; line-break: strict; overflow-wrap: anywhere; }

/* --- 2-3. 3列ステップ（特徴カードは順序ではないので矢印を出さない） --- */
.article-content .article-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-steps--traits .article-steps__item + .article-steps__item::before { content: none; }
/* BudouXが語中で切ってしまう箇所の改行抑止（原稿の文字列は変更しない） */
.article-nobr { white-space: nowrap; }

/* --- 2-4. FAQの補足段落・箇条書き（A.マーカーの字下げに合わせる） --- */
.article-content .article-faq__body { max-width: none; margin: 10px 0 0 1.7em; color: #334a68; font-size: 1rem; }
.article-content ul.article-faq__body { margin-bottom: 0; padding-left: 1.3em; }
.article-content ul.article-faq__body li { font-size: 1rem; }

/* --- 2-5. h1の意味区切り（PCは2行、SPは3行） --- */
.article-title__seg { display: inline; }

@media (max-width: 767px) {
  .article-detail--standard .article-lead { font-size: 1.0625rem; line-height: 1.9; }
  .article-detail--standard .article-keypoints h2 { font-size: 1.125rem; }
  .article-detail--standard .article-keypoints li { font-size: 1.0625rem; line-height: 1.85; }
  .article-detail--standard .article-toc h2 { font-size: 1.125rem; }
  .article-detail--standard .article-toc li { font-size: 1rem; line-height: 1.75; }
  .article-detail--standard .article-content h2 { font-size: 1.5rem; line-height: 1.5; }
  .article-detail--standard .article-content h3 { font-size: 1.1875rem; }
  .article-detail--standard .article-content p:not([class]),
  .article-detail--standard .article-content li:not([class]) { font-size: 1.0625rem; line-height: 1.9; }
  .article-detail--standard .article-content p:not([class]) { margin-bottom: 1.55em; }
  .article-detail--standard .article-content ul:not([class]),
  .article-detail--standard .article-content ol:not([class]) { margin-bottom: 22px; font-size: 1.0625rem; }
  .article-detail--standard .article-content th,
  .article-detail--standard .article-content td { font-size: 0.9375rem; }
  .article-detail--standard .article-content .article-stepflow__title { font-size: 1.125rem; }
  .article-detail--standard .article-content .article-check__title { font-size: 1.125rem; }
  .article-detail--standard .article-content .article-faq__q,
  .article-detail--standard .article-content .article-faq__a { padding-left: 1.6em; }
  .article-detail--standard .article-content .article-faq__q { font-size: 1.125rem; }
  .article-header h1.article-title--auto { font-size: clamp(1.5rem, 7vw, 2rem); }
  .article-title__seg { display: block; }
  .article-content .article-tasklabel { margin-top: 20px; }
  .article-content .article-optionlist { margin-block: 26px 30px; }
  .article-content .article-optionlist li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .article-content .article-steps--three { grid-template-columns: minmax(0, 1fr); }
  .article-content .article-faq__body { margin-left: 1.6em; }
}

/* ============================================================
   Standard v1.0：章表現とVisual強化
   ------------------------------------------------------------
   A. h2を「章タイトル」として見せる（章番号＋章の切れ目）※共通
   C. 中盤のCHECKブロックを休憩地点として強化 ※共通
   B. 業務番号バッジ（記事2固有：01〜15）
   D. METHODパネル（記事2固有：方法の選び方）
   A・Cは .article-detail--standard を持つ全記事に効く。
   章番号は CSS counter なので、目次の順序と section の順序が
   一致していることが前提（記事1は01〜05、記事2は01〜07）。
   本文のサイズ・ウェイト・行間には一切触れない。
   ============================================================ */

/* --- A. 章タイトル --- */
.article-detail--standard .article-content { counter-reset: article-chapter; }
.article-detail--standard .article-content > section {
  margin-top: 88px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line-strong);
  counter-increment: article-chapter;
}
/* 章の頭は section 側の罫線で示すため、h2の全幅下線は外す */
.article-detail--standard .article-content section > h2 {
  margin: 0 0 26px;
  padding-bottom: 0;
  border-bottom: 0;
}
/* 短いブルーバー＋章番号（目次の番号と一致する） */
.article-detail--standard .article-content section > h2::before {
  display: block;
  margin-bottom: 14px;
  padding-left: 46px;
  background: linear-gradient(var(--color-primary-bright), var(--color-primary-bright)) left 0.45em / 34px 3px no-repeat;
  color: var(--color-primary-bright);
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.4;
  content: counter(article-chapter, decimal-leading-zero);
}

/* --- B. 15業務の番号バッジ（ぶら下げインデント。gridは使わない） --- */
.article-detail--standard .article-content .article-task-heading--badge {
  margin-top: 44px;
  padding-left: 3.35rem;
  text-indent: -3.35rem;
}
.article-task-heading__badge {
  display: inline-block;
  width: 2.6rem;
  margin-right: 0.75rem;
  padding: 3px 0;
  color: var(--color-primary-bright);
  background: var(--color-sky);
  border-radius: 5px;
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.55;
  text-align: center;
  text-indent: 0;
  vertical-align: 0.1em;
}

/* --- C. CHECKブロック --- */
.article-detail--standard .article-check {
  margin: 56px 0 60px;
  padding: 28px 30px 30px;
  border-left: 4px solid var(--color-primary-bright);
  border-radius: 0 8px 8px 0;
}
.article-detail--standard .article-check::before { content: none; }
.article-detail--standard .article-content .article-check__label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  color: var(--color-white);
  background: var(--color-primary-bright);
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

/* --- D. METHODパネル（自動化の方法の選び方） --- */
.article-methodpanel {
  margin: 34px 0 40px;
  padding: 26px 28px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-top: 3px solid var(--color-primary-deep);
  border-radius: 8px;
}
.article-content .article-methodpanel__eyebrow {
  max-width: none;
  margin-bottom: 4px;
  color: var(--color-primary-bright);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.article-methodpanel .article-optionlist { margin: 0; border-top: 0; }
/* 番号を丸バッジ化し、縦線でつないで「検討の順番」を示す */
.article-content .article-methodpanel .article-optionlist li {
  position: relative;
  padding: 16px 0 18px;
  align-items: start;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  border-bottom: 1px solid var(--color-line);
}
.article-content .article-methodpanel .article-optionlist li:last-child { border-bottom: 0; }
.article-methodpanel .article-optionlist__num {
  position: relative;
  z-index: 1;
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--color-primary-bright);
  background: var(--color-white);
  border: 1px solid var(--color-primary-bright);
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
}
/* 起点（既製ツール）だけ塗りにして、まずここから検討することを示す */
.article-methodpanel .article-optionlist li:first-child .article-optionlist__num {
  color: var(--color-white);
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}
/* 番号の中心を通る縦線。バッジは白背景＋z-indexで線を抜くので連続して見える */
.article-content .article-methodpanel .article-optionlist li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.875rem;
  width: 1px;
  background: var(--color-line-strong);
  content: "";
}
.article-content .article-methodpanel .article-optionlist li:first-child::before { top: 31px; }
.article-content .article-methodpanel .article-optionlist li:last-child::before { bottom: calc(100% - 31px); }
/* パネル内の説明文は本文に近い大きさにして、山場としての読み応えを出す */
.article-methodpanel .article-optionlist__desc { margin-top: 3px; font-size: 1rem; line-height: 1.8; }

@media (max-width: 767px) {
  .article-detail--standard .article-content > section { margin-top: 64px; padding-top: 30px; }
  .article-detail--standard .article-content section > h2 { margin-bottom: 20px; }
  .article-detail--standard .article-content section > h2::before {
    margin-bottom: 11px;
    padding-left: 38px;
    background-size: 28px 3px;
    font-size: 0.875rem;
  }
  .article-detail--standard .article-content .article-task-heading--badge { margin-top: 36px; padding-left: 3rem; text-indent: -3rem; }
  .article-task-heading__badge { width: 2.35rem; margin-right: 0.65rem; font-size: 0.875rem; }
  .article-detail--standard .article-check { margin-block: 44px 48px; padding: 22px 20px 24px; }
  .article-methodpanel { margin-block: 30px 34px; padding: 22px 18px 6px; }
  .article-content .article-methodpanel .article-optionlist li { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .article-content .article-methodpanel .article-optionlist li::before { left: 0.8rem; }
}

/* ============================================================
   Standard v1.0：font-weight階層と字間
   ------------------------------------------------------------
   参考サイト（1st-net.jp/blog/seotrend/）の実測値に合わせ、
   本文400 → 強調/ラベル700 → h3 700 → h2 700 の階層へ統一する。
   参考サイトの実測：本文16px/400/lh2.00、h1・h2・h3・h4すべて700、
   letter-spacing +0.8px（正の値）、Webフォント読み込みなし。
   日本語本文に負のletter-spacingは使わない（0〜+0.02em）。
   サイズ・行間・文字色は前段のTypographyのまま据え置く。
   ============================================================ */

/* h1：900→800。マイナストラッキングをやめて硬さを取る */
.article-detail--standard .article-header h1.article-title { font-weight: 800; letter-spacing: 0; }
.article-detail--standard .article-category { font-weight: 700; }

/* 小ラベル（CHECK / METHOD / MERVELTA POINT / STEP / どんな作業か 等）は一律700 */
.article-detail--standard .article-check__label,
.article-detail--standard .article-content .article-tasklabel,
.article-detail--standard .article-stepflow__eyebrow,
.article-detail--standard .article-content .article-methodpanel__eyebrow,
.article-detail--standard .article-steps__step { font-weight: 700; }

/* 番号類（章番号・業務バッジ・ナビ番号・Q./A.マーカー・リストマーカー）も700 */
.article-detail--standard .article-content section > h2::before,
.article-detail--standard .article-task-heading__badge,
.article-detail--standard .article-tasknav__num,
.article-detail--standard .article-optionlist__num,
.article-detail--standard .article-faq__q::before,
.article-detail--standard .article-faq__a::before { font-weight: 700; }
.article-detail--standard .article-content li::marker,
.article-detail--standard .article-toc li::marker { font-weight: 700; }

/* パーツ内の見出し語は700／説明文は400 */
.article-detail--standard .article-optionlist__term { font-weight: 700; }
.article-detail--standard .article-optionlist__desc { font-weight: 400; }
.article-detail--standard .article-related li span { font-weight: 700; }

/* パンくずも記事本文と同じ書体でそろえる（:has非対応ブラウザは従来書体のまま） */
.article-page:has(.article-detail--standard) .article-breadcrumb {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", Meiryo, "メイリオ", sans-serif;
  font-weight: 400;
}

/* 320px級では業務バッジのぶら下げ幅を詰め、h3が1文字だけ次行へ落ちるのを防ぐ */
@media (max-width: 374px) {
  .article-detail--standard .article-content .article-task-heading--badge { padding-left: 2.5rem; text-indent: -2.5rem; }
  .article-detail--standard .article-task-heading__badge { width: 2rem; margin-right: 0.5rem; }
}

/* ============================================================
   Standard v1.0：本文の改行制御
   ------------------------------------------------------------
   本文系（p / li / lead / FAQ回答 / 補足文）はBudouX
   （word-break:keep-all）を外し、ブラウザ標準の日本語禁則＋
   改行に任せて行末をそろえる。HTML側の data-budoux 除去と対で運用する。
   実測（SP360px 本文p 右端SD）：記事2 28.7px相当 → 7.3px、
   記事1 28.7px → 移行後の値は完了報告に記載。
   見出し・短いラベル・目次・この記事でわかることはBudouXを継続。
   サイズ・ウェイト・行間・文字色には一切触れていない。
   ============================================================ */
.article-detail--standard .article-lead,
.article-detail--standard .article-content p:not([class]),
.article-detail--standard .article-content li:not([class]),
.article-detail--standard .article-content .article-faq__a,
.article-detail--standard .article-content .article-faq__body,
.article-detail--standard .article-content .article-stepflow__note,
.article-detail--standard .article-optionlist__desc {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* リードは1〜3行の短いブロック。共通ルールの pretty より balance の方が
   行長が均され、行末に数文字だけ取り残される尻切れが出ない（実測でPC1440px 31/6字 → 18/19字）。 */
.article-detail--standard .article-lead { text-wrap: balance; }
/* リードは意味単位（phrase）でのみ改行させ、「仕事」「自動化」等の語中分割を防ぐ */
.article-lead__phrase { white-space: nowrap; }

/* ============================================================
   記事詳細 2カラム共通レイアウト（記事1・記事2・今後の記事で再利用）
   ------------------------------------------------------------
   ・1023px以下は従来どおり1カラム。.article-layout は幅を持たず、
     既存ブロックの幅指定（840px / 680px）をそのまま生かす。
   ・1024px以上で「左：本文／右：サイドバー」の2カラムへ切り替える。
   ・記事2専用の .article-detail--standard には一切依存しない。
   ============================================================ */
.article-layout { width: 100%; }
.article-layout__main { min-width: 0; }
.article-sidebar { display: none; }   /* SP/タブレットではサイドバーUIのみ非表示（本文は常に表示） */

@media (min-width: 1024px) {
  .article-layout {
    display: grid;
    width: min(calc(100% - 48px), 1168px);
    margin-inline: auto;
    /* align-items は既定の stretch のまま。start にすると sidebar が縮み、
       position: sticky の可動域が無くなって追従しなくなる。 */
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
  }
  /* パンくず分だけ下げ、サイドバーがH1より上で目立たないようにする */
  .article-sidebar { display: block; min-width: 0; padding-top: 60px; }
  .article-sidebar__inner { position: sticky; top: calc(var(--header-height) + 24px); }

  /* 2カラム時は各ブロックの中央寄せを解除し、本文の左端をそろえる */
  .article-layout__main .article-breadcrumb,
  .article-layout__main .article-header,
  .article-layout__main .article-eyecatch,
  .article-layout__main .article-intro { width: 100%; margin-inline: 0; }
  /* 本文は現在の読みやすい幅（680px）を保ったまま左寄せ。横長にはしない */
  .article-layout__main .article-body { width: min(100%, 680px); margin-inline: 0; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
}

/* --- サイドバー中身（主役は本文、サイドバーは副役） --- */
.article-sidebar__section + .article-sidebar__section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--color-line-strong); }
.article-sidebar__title { margin-bottom: 16px; padding-left: 11px; color: var(--color-primary-deep); border-left: 3px solid var(--color-primary-bright); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.article-sidebar__list { display: grid; gap: 22px; }
.article-sidebar__card { display: block; }
.article-sidebar__thumb { margin-bottom: 10px; border-radius: 6px; transition: opacity var(--transition); }
.article-sidebar__cat { margin-bottom: 5px; color: var(--color-primary-bright); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; }
.article-sidebar__cardtitle { color: var(--color-primary-deep); font-size: 0.875rem; font-weight: 700; line-height: 1.65; word-break: normal; line-break: strict; overflow-wrap: anywhere; transition: color var(--transition); }
.article-sidebar__card:hover .article-sidebar__cardtitle { color: var(--color-primary-bright); }
.article-sidebar__card:hover .article-sidebar__thumb { opacity: 0.9; }
.article-sidebar__cats { display: grid; border-top: 1px solid var(--color-line); }
.article-sidebar__cats li { border-bottom: 1px solid var(--color-line); }
.article-sidebar__cats a { display: block; padding-block: 11px; color: var(--color-text); font-size: 0.875rem; font-weight: 500; line-height: 1.5; transition: color var(--transition); }
.article-sidebar__cats a:hover { color: var(--color-primary-bright); }
.article-sidebar__cats a[aria-current] { color: var(--color-primary-bright); font-weight: 700; }

/* ============================================================
   記事3固有：個人事業主の業務効率化アイデア15選
   ------------------------------------------------------------
   ・大型Visualは「4動詞フレーム」と「5段階フロー」の2つだけ。
     3条件は既存の .article-steps--three/--traits を再利用し、
     章内ナビは .article-tasknav のモディファイアで済ませる。
   ・15アイデアはカード化せず、h4＋番号（.article-task-heading__num）
     の軽い構成にして、SPでの縦長化を抑える。
   ・記事1・記事2が使うクラスの既存宣言には一切手を入れていない。
     追記はすべて新規クラス、または記事3だけが付ける
     モディファイア（--long / --quote / --groups）に閉じている。
   ============================================================ */

/* --- 1. h1：記事3専用サイズ ---
   H1が21文字＋16文字と長いため、記事1・2の45px級では
   PC1440pxでも1行目が収まらない。記事3だけサイズを下げ、
   PCは「…15選｜」までで1行、SPはphrase単位で4行に落とす。 */
.article-header h1.article-title--long { font-size: clamp(1.375rem, 6.4vw, 1.875rem); }
@media (min-width: 768px) {
  .article-header h1.article-title--long { font-size: clamp(1.75rem, 2.9vw, 2.25rem); }
}

/* --- 2. opening quote（冒頭の一言） ---
   通常のリードより一段小さくし、本文ではなく「声」として見せる。 */
.article-detail--standard .article-lead--quote {
  max-width: 30em;
  padding-left: 16px;
  border-left: 3px solid var(--color-primary-bright);
  color: var(--standard-muted);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.85;
}

/* --- 3. 4動詞フレーム（記事3の最重要Visual） --- */
.article-verbframe {
  margin: 34px 0 40px;
  padding: 26px 26px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-top: 3px solid var(--color-primary-deep);
  border-radius: 8px;
}
.article-content .article-verbframe__eyebrow {
  max-width: none;
  margin-bottom: 16px;
  color: var(--color-primary-bright);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.article-content .article-verbframe__list {
  display: grid;
  max-width: none;
  margin: 0;
  padding-left: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.article-content .article-verbframe__item {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 18px 14px 20px;
  align-content: start;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
}
.article-verbframe__num { color: var(--color-primary-bright); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; }
.article-verbframe__verb { color: var(--color-primary-deep); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.5; word-break: normal; line-break: strict; }
.article-verbframe__desc { color: var(--standard-muted); font-size: 0.8125rem; font-weight: 400; line-height: 1.75; word-break: normal; line-break: strict; overflow-wrap: break-word; }

/* --- 4. 章内グループナビ（4動詞＋最後の1つ） ---
   15件を並べると SP で15行になるため、5行のグループナビに置き換える。 */
.article-content .article-tasknav--groups ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-content .article-tasknav--groups a { grid-template-columns: 4em minmax(0, 1fr); }

/* --- 5. 5段階フロー（記事3の大型Visual その2） ---
   濃紺のパネルに白文字。記事2のMETHODパネル（淡色）と対になる見え方にし、
   縦フローにすることで長い一文でも折り返しが破綻しないようにする。 */
.article-orderflow {
  margin: 34px 0 40px;
  padding: 26px 28px 28px;
  background: var(--color-primary-deep);
  border-radius: 8px;
}
.article-content .article-orderflow__eyebrow {
  max-width: none;
  margin-bottom: 16px;
  color: #9dc4f0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.article-content .article-orderflow__list { display: grid; max-width: none; margin: 0; padding-left: 0; list-style: none; }
.article-content .article-orderflow__item {
  position: relative;
  display: grid;
  margin: 0;
  padding: 14px 0 16px;
  align-items: start;
  grid-template-columns: 2.75rem minmax(0, 1fr);
}
.article-content .article-orderflow__item + .article-orderflow__item { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
/* 番号の中心を通る縦線。バッジ側を塗りにして線を抜く */
.article-content .article-orderflow__item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.9375rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.26);
  content: "";
}
.article-content .article-orderflow__item:first-child::before { top: 30px; }
.article-content .article-orderflow__item:last-child::before { bottom: calc(100% - 30px); }
.article-orderflow__num {
  position: relative;
  z-index: 1;
  display: flex;
  width: 1.875rem;
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: #cfe3fb;
  background: var(--color-primary-deep);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
/* 起点（やめる）だけ塗りにして、まずここから考えることを示す */
.article-orderflow__item:first-child .article-orderflow__num { color: var(--color-primary-deep); background: var(--color-white); border-color: var(--color-white); }
.article-orderflow__text { color: var(--color-white); font-size: 1.0625rem; font-weight: 700; line-height: 1.75; word-break: normal; line-break: strict; overflow-wrap: break-word; }

/* --- 6. チップフロー（軽量Visual） ---
   原稿が「→」「↓」で並べている箇所を、文字を保ったまま流れとして見せる。
   大型Visualにしないため、余白も文字サイズも本文寄りに抑える。 */
.article-chipflow { display: flex; margin: 24px 0 30px; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.article-chipflow__chip {
  display: inline-block;
  max-width: 100%;
  padding: 7px 15px;
  color: var(--color-primary-deep);
  background: var(--color-sky);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.65;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
.article-chipflow__chip--plain { color: var(--standard-sub); background: transparent; border: 1px solid var(--color-line-strong); }
.article-chipflow__arrow { flex: none; color: #7fa4d4; font-size: 0.875rem; font-weight: 700; line-height: 1; }
/* 矢印だけが行頭へ落ちないよう、矢印＋チップを折り返しの1単位にする */
.article-chipflow__step { display: inline-flex; max-width: 100%; align-items: center; gap: 10px; }
/* 原稿が「↓」で縦に並べている箇所 */
.article-chipflow--stack { align-items: flex-start; flex-direction: column; gap: 3px; }
.article-chipflow--stack .article-chipflow__arrow { padding-left: 16px; }
/* 「変化がない → 何もしない」の対を2行に固定する */
.article-chipflow--rows { display: grid; justify-content: start; align-items: center; grid-template-columns: max-content max-content minmax(0, max-content); gap: 10px; }
/* 矢印を持たない並列（覚える／考える／入力する／確認する） */
.article-chipflow--plainset { gap: 8px; }

/* --- 7. h4（15アイデアの各項目） ---
   カード化せず、h3より一段小さい見出し＋青番号で並べる。 */
.article-detail--standard .article-content h4 {
  margin: 40px 0 14px;
  color: var(--color-primary-deep);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.6;
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
/* 「そして最後のアイデア」だけは区切りとして残す（見出しには昇格させない） */
.article-content .article-lastidea {
  max-width: none;
  margin: 52px 0 0;
  padding-top: 22px;
  color: var(--color-primary-bright);
  border-top: 1px solid var(--color-line-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.article-detail--standard .article-content .article-lastidea + h4 { margin-top: 16px; }

/* --- 8. 記事末CTA（営業LP化させない小型ボックス） --- */
.article-cta { margin: 64px 0 0; padding: 28px 30px 30px; background: var(--color-sky); border-radius: 8px; }
.article-detail--standard .article-content .article-cta__title {
  margin: 0 0 14px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--color-primary-deep);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.6;
}
.article-detail--standard .article-content .article-cta p { max-width: none; margin: 0 0 12px; color: var(--standard-sub); font-size: 1rem; font-weight: 400; line-height: 1.85; }
.article-detail--standard .article-content .article-cta .article-cta__foot { margin: 18px 0 0; }
.article-content .article-cta__action {
  display: inline-block;
  padding: 13px 26px;
  color: var(--color-white);
  background: var(--color-primary-deep);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background var(--transition);
}
.article-content .article-cta__action:hover { background: var(--color-primary-bright); }

/* --- 4分類表：PCは列幅を固定して、セル内の1文字残りを防ぐ ---
   SPではtableをblock化して縦積みにするため、この列幅はPC幅のみへ限定する
   （かけたままだと分類名のセルが18%＝53px幅に潰れて語中で折れる）。 */
@media (min-width: 768px) {
  .article-content .article-table--stack { table-layout: fixed; }
  .article-content .article-table--stack th:nth-child(1) { width: 18%; }
  .article-content .article-table--stack th:nth-child(2) { width: 46%; }
  .article-content .article-table--stack th:nth-child(3) { width: 36%; }
}

@media (max-width: 1023px) {
  .article-content .article-verbframe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .article-detail--standard .article-lead--quote { padding-left: 12px; font-size: 1rem; line-height: 1.8; }
  .article-verbframe { margin-block: 30px 34px; padding: 20px 16px 22px; }
  .article-content .article-verbframe__eyebrow { margin-bottom: 14px; }
  .article-content .article-verbframe__list { gap: 12px; }
  .article-content .article-verbframe__item { padding: 14px 13px 16px; gap: 6px; }
  .article-verbframe__verb { font-size: 1.0625rem; }
  .article-content .article-tasknav--groups ol { grid-template-columns: minmax(0, 1fr); }
  .article-orderflow { margin-block: 30px 34px; padding: 22px 18px 24px; }
  .article-content .article-orderflow__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .article-content .article-orderflow__item::before { left: 0.875rem; }
  .article-content .article-orderflow__item:first-child::before { top: 28px; }
  .article-content .article-orderflow__item:last-child::before { bottom: calc(100% - 28px); }
  .article-orderflow__num { width: 1.75rem; height: 1.75rem; }
  .article-orderflow__text { font-size: 1rem; }
  .article-chipflow { margin-block: 18px 22px; }
  .article-chipflow__chip { padding: 6px 13px; font-size: 0.875rem; }
  .article-detail--standard .article-content h4 { margin-top: 24px; font-size: 1.125rem; }
  .article-content .article-lastidea { margin-top: 44px; padding-top: 18px; }
  .article-cta { margin-top: 52px; padding: 22px 18px 24px; }
  .article-detail--standard .article-content .article-cta__title { font-size: 1.125rem; }
  .article-detail--standard .article-content .article-cta p { font-size: 0.9375rem; }

  /* --- 4分類表：SPは横スクロールをやめて1行1ブロックへ積む ---
     min-width:600pxのまま横スクロールさせると3列目（見直す方向）が
     画面外に出て気付かれないため、SPだけ列見出しをdata-labelで出す。
     role属性をHTML側に明示しているので、display変更後も表として読める。 */
  .article-table-scroll--stack { overflow-x: visible; border-block: 0; }
  .article-content .article-table--stack { display: block; min-width: 0; }
  .article-content .article-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .article-content .article-table--stack tbody,
  .article-content .article-table--stack tr,
  .article-content .article-table--stack th,
  .article-content .article-table--stack td { display: block; }
  /* table自体をblock化するとcaptionが匿名テーブルへ入り1文字幅に潰れるため、blockへ戻す */
  .article-content .article-table--stack caption { display: block; padding-bottom: 9px; text-align: left; }
  .article-content .article-table--stack tbody tr { padding: 12px 0 13px; border-bottom: 1px solid var(--color-line); }
  .article-content .article-table--stack tbody tr:first-child { border-top: 1px solid var(--color-line-strong); }
  .article-content .article-table--stack tbody tr:last-child { border-bottom: 1px solid var(--color-line-strong); }
  .article-content .article-table--stack tbody th { padding: 0 0 7px; border-bottom: 0; font-size: 1.0625rem; white-space: normal; }
  .article-content .article-table--stack td { padding: 0; border-bottom: 0; }
  .article-content .article-table--stack td + td { margin-top: 7px; }
  .article-content .article-table--stack td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--color-primary-bright);
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }
}

@media (max-width: 374px) {
  /* 272px級では2列にすると説明文が4行以上に割れるため、1列へ落とす */
  .article-content .article-verbframe__list { grid-template-columns: minmax(0, 1fr); }
  .article-chipflow--rows { grid-template-columns: max-content max-content minmax(0, 1fr); gap: 8px; }
}

/* ============================================================
   記事3固有：Mobile Compact Pass
   ------------------------------------------------------------
   本文・情報量はそのままに、SPでの縦の伸びだけを圧縮する。
   すべて .article-detail--self-employed-efficiency 配下＋
   @media (max-width: 767px) に閉じてあるので、記事1・2および
   PC表示には一切影響しない。
   本文の行間は1.8、段落下マージンは1.4emを下限として守る
   （CLAUDE.mdの組版ルール：line-height 1.7〜1.9 / 段落間1.4〜1.8倍）。
   ============================================================ */

/* --- FAQアコーディオン（SPのみ。DOMはJSが組み立てる） ---
   HTMLは全回答を開いた状態で出力しているため、JS無効時は
   このセレクタに一致する要素が生成されず、全文表示のまま残る。 */
.article-faq__summary {
  position: relative;
  display: block;
  /* ::before/::after のtop:1.72em(27.5px)を質問1行目の中心へ合わせるための値 */
  padding-block: 13px;
  padding-right: 28px;
  cursor: pointer;
  list-style: none;
}
.article-faq__summary::-webkit-details-marker { display: none; }
/* ＋／− のトグル表示（開くと横棒だけになる） */
.article-faq__summary::before,
.article-faq__summary::after {
  position: absolute;
  /* summaryのpadding-top(14px)＋1行目の中心。＋印を質問1行目へ合わせる */
  top: 1.72em;
  right: 3px;
  width: 13px;
  height: 2px;
  background: var(--color-primary-bright);
  content: "";
  transition: transform var(--transition);
}
.article-faq__summary::after { transform: rotate(90deg); }
.article-faq__details[open] > .article-faq__summary::after { transform: rotate(0deg); }
.article-faq__summary:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .article-faq__summary::before,
  .article-faq__summary::after { transition-duration: 0.01ms; }
}

@media (max-width: 767px) {
  /* --- FV・導入まわり --- */
  .article-detail--self-employed-efficiency .article-header { padding-block: 14px 22px; }
  .article-detail--self-employed-efficiency .article-eyecatch { margin-bottom: 30px; }
  .article-detail--self-employed-efficiency .article-keypoints { margin-bottom: 30px; }
  .article-detail--self-employed-efficiency .article-note { padding: 16px 15px 17px; }
  .article-detail--self-employed-efficiency .article-keypoints li + li { margin-top: 6px; }
  .article-detail--self-employed-efficiency .article-toc { margin-bottom: 30px; padding-block: 16px 18px; }
  .article-detail--self-employed-efficiency .article-toc h2 { margin-bottom: 14px; }
  .article-detail--self-employed-efficiency .article-toc ol { gap: 4px; }
  .article-detail--self-employed-efficiency .article-detail--standard .article-toc li,
  .article-detail--self-employed-efficiency .article-toc li { line-height: 1.7; }

  /* --- 章・見出し・本文の余白（10〜20%圧縮。行間と段落間は規定内に収める） --- */
  .article-detail--self-employed-efficiency .article-content > section { margin-top: 44px; padding-top: 24px; }
  .article-detail--self-employed-efficiency .article-content section > h2 { margin-bottom: 16px; }
  .article-detail--self-employed-efficiency .article-content section > h2::before { margin-bottom: 9px; }
  .article-detail--self-employed-efficiency .article-content h3 { margin: 25px 0 11px; }
  .article-detail--self-employed-efficiency .article-content h4 { margin: 25px 0 10px; }
  .article-detail--self-employed-efficiency .article-content p:not([class]) { margin-bottom: 1.4em; line-height: 1.8; }
  .article-detail--self-employed-efficiency .article-content li:not([class]) { line-height: 1.8; }
  .article-detail--self-employed-efficiency .article-content ul:not([class]),
  .article-detail--self-employed-efficiency .article-content ol:not([class]) { margin-bottom: 20px; }
  .article-detail--self-employed-efficiency .article-content li:not([class]) + li:not([class]) { margin-top: 6px; }
  .article-detail--self-employed-efficiency .article-lead { margin-bottom: 0; }

  /* --- 4動詞フレーム：320pxまで2×2を維持し、カード感を弱める --- */
  .article-detail--self-employed-efficiency .article-verbframe { margin-block: 26px 30px; padding: 18px 14px 20px; }
  .article-detail--self-employed-efficiency .article-content .article-verbframe__eyebrow { margin-bottom: 12px; }
  .article-detail--self-employed-efficiency .article-content .article-verbframe__list { gap: 10px; }
  .article-detail--self-employed-efficiency .article-content .article-verbframe__item { padding: 12px 11px 13px; gap: 4px; }
  .article-detail--self-employed-efficiency .article-verbframe__verb { font-size: 1.0625rem; line-height: 1.45; }
  .article-detail--self-employed-efficiency .article-verbframe__desc { font-size: 0.8125rem; line-height: 1.65; }

  /* --- 4分類表：カードではなく「4つの情報行」へ。ラベルは値の左へ回す --- */
  .article-detail--self-employed-efficiency .article-table-scroll { margin-block: 24px 28px; }
  .article-detail--self-employed-efficiency .article-content .article-table--stack caption { padding-bottom: 9px; }
  .article-detail--self-employed-efficiency .article-content .article-table--stack tbody tr { padding: 11px 0 12px; }
  .article-detail--self-employed-efficiency .article-content .article-table--stack tbody th { padding: 0 0 6px; font-size: 0.9375rem; line-height: 1.5; }
  .article-detail--self-employed-efficiency .article-content .article-table--stack td {
    display: block;
    padding-left: 3.6rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    text-indent: -3.6rem;
  }
  .article-detail--self-employed-efficiency .article-content .article-table--stack td + td { margin-top: 4px; }
  .article-detail--self-employed-efficiency .article-content .article-table--stack td::before {
    display: inline-block;
    width: 3.3rem;
    margin-right: 0.3rem;
    margin-bottom: 0;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    line-height: 2.55;
    text-indent: 0;
    white-space: nowrap;
  }

  /* --- 5段階フロー：濃紺パネルは残しつつ1段の高さを詰める --- */
  .article-detail--self-employed-efficiency .article-orderflow { margin-block: 26px 30px; padding: 16px 14px 17px; }
  .article-detail--self-employed-efficiency .article-content .article-orderflow__eyebrow { margin-bottom: 10px; }
  .article-detail--self-employed-efficiency .article-content .article-orderflow__item { padding: 8px 0 9px; grid-template-columns: 2.25rem minmax(0, 1fr); }
  .article-detail--self-employed-efficiency .article-content .article-orderflow__item::before { left: 0.75rem; }
  .article-detail--self-employed-efficiency .article-content .article-orderflow__item:first-child::before { top: 20px; }
  .article-detail--self-employed-efficiency .article-content .article-orderflow__item:last-child::before { bottom: calc(100% - 20px); }
  .article-detail--self-employed-efficiency .article-orderflow__num { width: 1.5rem; height: 1.5rem; margin-top: 2px; font-size: 0.6875rem; }
  .article-detail--self-employed-efficiency .article-orderflow__text { font-size: 0.9375rem; line-height: 1.6; }

  /* --- 3条件・章内ナビ・行動リスト・チップフロー・CTA --- */
  .article-detail--self-employed-efficiency .article-content .article-steps { margin-block: 22px 26px; gap: 10px; }
  .article-detail--self-employed-efficiency .article-content .article-steps__item { padding: 12px 12px 13px; gap: 4px; }
  .article-detail--self-employed-efficiency .article-content .article-tasknav { margin-block: 20px 26px; }
  .article-detail--self-employed-efficiency .article-content .article-tasknav a { padding-block: 9px; }
  .article-detail--self-employed-efficiency .article-actionbox { margin-block: 22px 26px; padding: 15px 14px; }
  .article-detail--self-employed-efficiency .article-content .article-actionbox ol { gap: 10px; }
  .article-detail--self-employed-efficiency .article-chipflow { margin-block: 18px 24px; }
  .article-detail--self-employed-efficiency .article-content .article-lastidea { margin-top: 34px; padding-top: 15px; }
  .article-detail--self-employed-efficiency .article-content .article-lastidea + h4 { margin-top: 13px; }
  .article-detail--self-employed-efficiency .article-cta { margin-top: 40px; padding: 18px 15px 20px; }
  .article-detail--self-employed-efficiency .article-detail--standard .article-content .article-cta p,
  .article-detail--self-employed-efficiency .article-content .article-cta p { margin-bottom: 10px; line-height: 1.8; }
  .article-detail--self-employed-efficiency .article-content .article-cta .article-cta__foot { margin-top: 14px; }
  .article-detail--self-employed-efficiency .article-closing { margin-top: 48px; }

  /* --- FAQ：SPは質問だけを並べ、タップで回答を開く --- */
  .article-detail--self-employed-efficiency .article-faq { margin-block: 20px 4px; }
  .article-detail--self-employed-efficiency .article-faq__item { padding-block: 0; }
  .article-detail--self-employed-efficiency .article-faq__summary { padding-block: 14px; }
  /* summary内の質問はh3のmargin（本文用の25px）を持ち込まない */
  .article-detail--self-employed-efficiency .article-content .article-faq__summary .article-faq__q { margin: 0; line-height: 1.55; }
  .article-detail--self-employed-efficiency .article-faq__answer { padding-bottom: 16px; }
  .article-detail--self-employed-efficiency .article-content .article-faq__answer .article-faq__a { margin-bottom: 0; }
  .article-detail--self-employed-efficiency .article-content .article-faq__answer .article-faq__body { margin-top: 8px; }
}

@media (max-width: 374px) {
  /* 320px級でも4動詞は2×2を維持する（1列4段にすると一気に縦へ伸びるため）。
     余白・文字だけを一段落として、可読性とタップ領域は確保する。 */
  .article-detail--self-employed-efficiency .article-content .article-verbframe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .article-detail--self-employed-efficiency .article-verbframe { padding: 16px 12px 18px; }
  .article-detail--self-employed-efficiency .article-content .article-verbframe__item { padding: 11px 9px 12px; }
  .article-detail--self-employed-efficiency .article-verbframe__verb { font-size: 1rem; }
  .article-detail--self-employed-efficiency .article-verbframe__desc { font-size: 0.75rem; line-height: 1.6; }
}

/* ============================================================
   記事4固有：4条件（手順・条件・入力・出力）の○△×診断表
   ------------------------------------------------------------
   ・.article-table--stack の列幅指定（18%/46%/36%）は3列表を前提に
     しており、5列表へそのまま当てると4・5列目が0幅へ潰れる。
     5列版だけPCの列幅を上書きし、SPの縦積み自体は --stack へ委ねる。
   ・SPはラベルと値を1行に並べ、「1つの仕事＝1カード」として読ませる。
     --stack が overflow-x を切るため横スクロールは発生しない。
   ・追記は --stack-5 が付いた表だけに閉じており、
     既存の3列表（.article-table--stack 単体）には影響しない。
   ============================================================ */
@media (min-width: 768px) {
  .article-content .article-table--stack-5 th:nth-child(1) { width: 40%; }
  .article-content .article-table--stack-5 th:nth-child(2),
  .article-content .article-table--stack-5 th:nth-child(3),
  .article-content .article-table--stack-5 th:nth-child(4),
  .article-content .article-table--stack-5 th:nth-child(5) { width: 15%; }
}

@media (max-width: 767px) {
  /* ラベル（手順／条件／入力／出力）を左、○△×を右へ並べた4行構成 */
  .article-content .article-table--stack-5 td { display: grid; align-items: baseline; grid-template-columns: 4.5em minmax(0, 1fr); }
  .article-content .article-table--stack-5 td::before { margin-bottom: 0; }
  .article-content .article-table--stack-5 td + td { margin-top: 6px; }
}

/* ============================================================
   SP最狭幅のセーフティ（Standard v1.0共通・.article-nobr の定義より後段に置く）
   ------------------------------------------------------------
   .article-nobr は「意味のまとまりを1行に保つ」ための指定だが、
   320px級では語句自体が1行に収まらず、nowrapのまま桁あふれして
   右端へ突き抜ける（例：まとめh2の「任せられる部分を切り出す」= 291px > 288px）。
   この幅だけ折り返しを許可する。BudouXが文節境界にZWSPを入れており
   word-break:normal / line-break:strict も効いているため語中では折れない。
   収まっている nobr は normal でも1行のままなので、記事1〜3の表示は変わらない。
   ============================================================ */
@media (max-width: 374px) {
  .article-nobr { white-space: normal; }
}

/* ============================================================
   記事5固有：本文中の図版と、2列／方法一覧の表
   ------------------------------------------------------------
   ・.article-figure は本文の途中に置く説明画像。アイキャッチ
     （.article-eyecatch）とは役割が違うため別クラスにしている。
     幅・高さ属性を持たない場合でも height:auto で崩れない。
   ・.article-table--stack の列幅（18%/46%/36%）は3列表前提のため、
     2列表（--stack-2）と方法一覧（--methods）だけPCの列幅を上書きする。
     SPの縦積みは --stack にそのまま委ねる。
   ・追記はいずれも新規クラスへ閉じており、記事1〜4には影響しない。
   ============================================================ */
.article-content .article-figure { max-width: none; margin: 34px 0 40px; }
.article-content .article-figure__image { display: block; width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px; }
.article-content .article-figure__caption { max-width: none; margin: 10px 0 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.75; word-break: normal; line-break: strict; }

@media (min-width: 768px) {
  .article-content .article-table--stack-2 th:nth-child(1) { width: 30%; }
  .article-content .article-table--stack-2 th:nth-child(2) { width: 70%; }
  /* 「スクリプト・専用ツール」が18%＝約122pxのnowrapセルからあふれるため、
     1列目を広げたうえで、この表だけ行見出しの折り返しを許可する。 */
  .article-content .article-table--methods th:nth-child(1) { width: 26%; }
  .article-content .article-table--methods th:nth-child(2) { width: 34%; }
  .article-content .article-table--methods th:nth-child(3) { width: 40%; }
  .article-content .article-table--methods tbody th { white-space: normal; }
}

@media (max-width: 767px) {
  .article-content .article-figure { margin-block: 26px 32px; }
  /* 2列表は値が1つしかなく、全行に同じdata-label（例：書く内容）が並ぶと
     ノイズになるため、SPでは列見出しのラベルを出さない。 */
  .article-content .article-table--stack-2 td::before { display: none; }
}

/* ============================================================
   記事5固有：SP最適化（PC表示は変更しない）
   ------------------------------------------------------------
   ・5ステップ図はSPで文字が5px級まで縮むため、SPだけ画像を隠し、
     既存の .article-steps--flow（SPで1列＋下向き矢印）へ差し替える。
     PCは従来どおり画像のみを表示し、レイアウトは変わらない。
   ・目次はSPだけ<details>へ畳む（DOMはmain.jsが組み立てる）。
     JS無効時はsummaryが生成されないため、目次は開いたまま残る。
   ============================================================ */
/* PCは画像のみ。SP代替は隠す（.article-content .article-steps の display:grid を上書き） */
.article-content .article-figure__steps { display: none; }

/* --- 目次アコーディオン（SPのみ。DOMはJSが組み立てる） --- */
.article-toc__summary {
  position: relative;
  display: block;
  padding-block: 10px;
  padding-right: 28px;
  color: var(--color-primary-deep);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.article-toc__summary::-webkit-details-marker { display: none; }
/* ＋／− のトグル表示（開くと横棒だけになる） */
.article-toc__summary::before,
.article-toc__summary::after {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 13px;
  height: 2px;
  margin-top: -1px;
  background: var(--color-primary-bright);
  content: "";
  transition: transform var(--transition);
}
.article-toc__summary::after { transform: rotate(90deg); }
.article-toc__details[open] > .article-toc__summary::after { transform: rotate(0deg); }
.article-toc__summary:focus-visible { outline-offset: 2px; }
.article-toc__details[open] > ol { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .article-toc__summary::before,
  .article-toc__summary::after { transition-duration: 0.01ms; }
}

@media (max-width: 767px) {
  /* 5ステップ図：画像をやめ、同じ内容の縦積みへ */
  .article-content .article-figure__image { display: none; }
  .article-content .article-figure__steps { display: grid; margin: 0; }
  /* 補足文は既定0.8125remだと図の代替として小さいため、本文寄りへ一段上げる */
  .article-figure__steps .article-steps__desc { font-size: 0.9375rem; line-height: 1.7; }
  /* 目次はsummaryが見出しを兼ねるため、畳んだ状態の余白を詰める */
  .article-toc:has(> .article-toc__details) { padding-block: 8px 10px; }
}

/* ============================================================
   記事6固有：業務効率化ツール早見表（4列）と概念図
   ------------------------------------------------------------
   ・.article-table--stack の列幅（18%/46%/36%）は3列表前提のため、
     4列版（--tools）だけPCの列幅を上書きする。SPの縦積みは
     --stack にそのまま委ねる＝「1つの困りごと＝1カード」になる。
   ・行見出し（こんな面倒）は最長17文字あり、共通の
     tbody th { white-space: nowrap } のままだと桁あふれするため
     この表だけ normal へ戻す（記事5の --methods と同じ扱い）。
   ・行見出しは該当セクションへの章内リンクを兼ねる。下線は残しつつ
     色は行見出しの濃紺のままにして、表の見た目を壊さない。
   ・.article-figure__image はSP共通で display:none にしている
     （記事5の5ステップ図をSP代替へ差し替えるため）。記事6の
     概念図は文字を持たず縮小しても読めるので --concept で戻す。
   ・追記はすべて記事6が付けるクラスへ閉じており、記事1〜5には影響しない。
   ============================================================ */
.article-content .article-table--tools tbody th a { color: inherit; text-decoration-color: var(--color-primary-bright); }
.article-content .article-table--tools tbody th a:hover { color: var(--color-primary-bright); }
/* ※注記は表に属する文なので、表の下マージンを詰めて近づける */
.article-content .article-tablenote { max-width: none; margin: 0 0 34px; color: var(--color-muted); font-size: 0.875rem; line-height: 1.8; word-break: normal; line-break: strict; }
.article-content .article-table-scroll:has(+ .article-tablenote) { margin-bottom: 12px; }

@media (min-width: 768px) {
  .article-content .article-table--tools { table-layout: fixed; }
  /* 表が680pxの帯（768〜1263px）の列比率。
     3列目は20%だと内寸111pxしかなく、「ビジネスチャット」「クラウドストレージ」
     「請求・会計サービス」（いずれも約135px必要）が1〜2文字だけ次行へ落ちる。
     2・4列目から少しずつ譲って3列目を広げ、泣き別れを解消する。
     820pxへ拡張する1264px以上では、下の @media で元の 24/28/20/28% へ戻す。 */
  .article-content .article-table--tools th:nth-child(1) { width: 24%; }
  .article-content .article-table--tools th:nth-child(2) { width: 27%; }
  .article-content .article-table--tools th:nth-child(3) { width: 24%; }
  .article-content .article-table--tools th:nth-child(4) { width: 25%; }
  /* 列を詰めた分、左右パディングを2px削って各セルの内寸を戻す。
     2列目の見出し「ツールの前に試すこと」（約150px）が1文字だけ折れるのを防ぐ。
     820pxへ拡張する1264px以上では、下の @media で12pxへ戻す。 */
  .article-content .article-table--tools th,
  .article-content .article-table--tools td { padding: 13px 10px; }
  /* 4列を680pxへ収めるため、この表だけ本文より一段小さい級数にする */
  .article-detail--standard .article-content .article-table--tools th,
  .article-detail--standard .article-content .article-table--tools td { font-size: 0.9375rem; line-height: 1.7; }
  .article-content .article-table--tools tbody th { white-space: normal; }

  /* --- 罫線：4列の対応関係を目で追えるよう、薄い縦横グリッドを引く ---
     ・内側の格子はセルの border-right / border-bottom だけで作る。
       border-collapse: collapse でも隣り合う線が二重にならず、
       外周は下のラッパー側の枠線1本だけになる。
     ・右端列の border-right と最終行の border-bottom は外周と重なるので出さない
       （最終行は共通の tbody tr:last-child > * { border-bottom: 0 } がそのまま効く）。
     ・色は既存の罫線トークン（--color-line-strong / 外周は一段濃い青みグレー）。
       黒や濃いグレーは使わず、本文の可読性より前へ出ないようにする。 */
  .article-detail--tools-guide .article-table-scroll--wide { border: 1px solid #cfdeef; }
  .article-content .article-table--tools th,
  .article-content .article-table--tools td { border-right: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line-strong); }
  .article-content .article-table--tools th:last-child,
  .article-content .article-table--tools td:last-child { border-right: 0; }
  /* ヘッダー行：面を本文行より一段濃くし、下の区切りも2pxにして見出しだと分かるようにする */
  .article-content .article-table--tools thead th { background: var(--color-sky); border-bottom: 2px solid #cfdeef; }
  /* 交互背景：白 / --color-surface(#f7fafd) のごく薄い差だけ。
     横方向に1行を追うときの手がかりにする（塗りつぶしとして目立たせない）。 */
  .article-content .article-table--tools tbody tr:nth-child(even) { background: var(--color-surface); }
}

/* 本文680pxの右側（サイドバーとの間）に余白が残る幅でだけ、
   早見表を本文幅の外へ伸ばして1行あたりの文字数を稼ぐ。
   1168pxのgrid（1fr + 300px + gap 48px）で本文カラムは820px。
   スクロールバー幅を考慮しても820pxを超えないよう、
   発動は1264px以上に限定しているため横スクロールは発生しない。 */
@media (min-width: 1264px) {
  .article-detail--tools-guide .article-table-scroll--wide { width: 820px; max-width: none; }
  /* 820pxあれば3列目は20%でも1行に収まるので、本来の列比率とパディングへ戻す */
  .article-content .article-table--tools th,
  .article-content .article-table--tools td { padding: 13px 12px; }
  .article-content .article-table--tools th:nth-child(2) { width: 28%; }
  .article-content .article-table--tools th:nth-child(3) { width: 20%; }
  .article-content .article-table--tools th:nth-child(4) { width: 28%; }
}

/* --- 困りごと10項目のSPアコーディオン（SPのみ。DOMはmain.jsが組み立てる） ---
   HTMLは全項目を開いた状態で出力しているため、JS無効時は
   このセレクタに一致する要素が生成されず、全項目の本文が表示されたまま残る。 */
.article-problem__summary {
  position: relative;
  display: block;
  padding-right: 30px;
  cursor: pointer;
  list-style: none;
}
.article-problem__summary::-webkit-details-marker { display: none; }
/* ＋／− のトグル表示（開くと横棒だけになる） */
.article-problem__summary::before,
.article-problem__summary::after {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 13px;
  height: 2px;
  margin-top: -1px;
  background: var(--color-primary-bright);
  content: "";
  transition: transform var(--transition);
}
.article-problem__summary::after { transform: rotate(90deg); }
.article-problem__details[open] > .article-problem__summary::after { transform: rotate(0deg); }
.article-problem__summary:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .article-problem__summary::before,
  .article-problem__summary::after { transition-duration: 0.01ms; }
}

@media (max-width: 767px) {
  /* 概念図：文字を持たない図なので、SPでも縮小表示のまま内容が読み取れる */
  .article-content .article-figure--concept .article-figure__image { display: block; }
  .article-content .article-figure--concept { margin-block: 22px 26px; }

  /* --- 早見表：SPは「1つの困りごと＝縦型ミニテーブル」に見せる ---
     見出し帯（薄いブルー）＋「ラベル列｜値列」の2列を3行、という表の形にする。
     ラベルはPCの列見出しの短縮形（data-label-sp）。列見出しの原文は
     視覚的に隠した<thead>にそのまま残るので、支援技術へは従来どおり伝わる。
     ラベル列は ::before を絶対配置で高さいっぱいに伸ばし、表のセルらしく見せる。
     ::before の幅75pxと td の padding-left 86px は対で調整すること
     （em にすると td と ::before で font-size が違うためズレる）。 */
  .article-content .article-table--tools tbody tr {
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfdeef;
    border-radius: 5px;
  }
  .article-content .article-table--tools tbody tr + tr { margin-top: 16px; }
  .article-content .article-table--tools tbody tr:first-child { border-top: 1px solid #cfdeef; }
  .article-content .article-table--tools tbody tr:last-child { border-bottom: 1px solid #cfdeef; }
  /* 見出し帯（困りごと。章内リンクを兼ねる） */
  .article-detail--standard .article-content .article-table--tools tbody th {
    padding: 9px 11px;
    background: var(--color-sky);
    border-bottom: 1px solid #cfdeef;
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  /* 値のセル：左にラベル列ぶんの余白を空け、そこへ ::before を敷く */
  .article-content .article-table--tools td {
    position: relative;
    margin: 0;
    padding: 9px 11px 9px 86px;
  }
  .article-content .article-table--tools td + td { margin-top: 0; border-top: 1px solid var(--color-line-strong); }
  .article-content .article-table--tools td::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 75px;
    margin: 0;
    padding: 9px 8px;
    align-items: flex-start;
    color: var(--color-primary-deep);
    background: var(--color-surface);
    border-right: 1px solid var(--color-line-strong);
    content: attr(data-label-sp);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.55;
  }
  .article-detail--standard .article-content .article-table--tools td { font-size: 1rem; line-height: 1.75; }
  .article-content .article-tablenote { margin-bottom: 24px; font-size: 0.8125rem; }

  /* --- 困りごと10項目：畳んだときは見出しだけの一覧に見せる ---
     :has() で「JSがdetailsを作れたときだけ」罫線を出す。
     JS無効時は従来どおり見出し＋本文が続けて並ぶ（罫線は出ない）。 */
  .article-content .article-problems:has(.article-problem__details) {
    margin-top: 6px;
    border-top: 1px solid var(--color-line-strong);
  }
  .article-problem:has(> .article-problem__details) { border-bottom: 1px solid var(--color-line-strong); }
  .article-problem__summary { padding-block: 13px; }
  .article-detail--standard .article-content .article-problem__summary h3 { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
  .article-problem__body { padding-bottom: 8px; }
  .article-detail--standard .article-content .article-problem__body > :first-child { margin-top: 0; }
}

@media (max-width: 374px) {
  /* 320px級：見出し帯と値の級数を1段だけ落とす。
     本文の下限（line-height 1.7以上）は維持する。 */
  .article-detail--standard .article-content .article-table--tools tbody th { font-size: 1rem; }
  .article-detail--standard .article-content .article-table--tools td { font-size: 0.9375rem; line-height: 1.75; }
  /* ラベル列は「まず試す」(4文字)が1行に収まる最小幅まで詰める */
  .article-content .article-table--tools td { padding-left: 78px; }
  .article-content .article-table--tools td::before { width: 67px; padding-inline: 6px; }
}

/* ============================================================
   記事4固有：定型業務と非定型業務の比較表（3列）
   ------------------------------------------------------------
   ・この表だけ「左右対称の比較表」として見せる。共通の
     .article-table--stack の列幅（18%/46%/36%）は「分類／意味／説明」型の
     3列表を前提にしており、そのままだと定型業務(46%)と非定型業務(36%)が
     非対称になる。--compare が付いた表だけ 20%/40%/40% へ上書きする。
   ・罫線とヘッダーの考え方は記事6の早見表（--tools）から流用するが、
     4列表のための設定（列幅・--wide の820px化・0.9375remへの縮小・
     長い行見出し対策）は持ち込まない。級数は本文どおり1remのまま。
   ・SPは「1つの判断軸＝1つの縦型ミニテーブル」へ積み替える。
     判断軸（手順／発生／判断／例）を薄ブルーの帯にし、その下へ
     「ラベル列｜値列」の2行を置くことで、定型／非定型の対が
     隣り合ったまま残る（--stack 既定の単純縦積みでは対が上下に分断される）。
     ラベルは既存の data-label をそのまま使うので、HTMLはクラス追加のみで
     data-label-sp のような属性の追加は不要。
   ・記述はすべて --compare が付いた表へ閉じてあり、第4記事の他3表
     （4条件・工程分解・○△×診断）および記事1〜3・5・6には影響しない。
     共通ルール側（--stack / .article-content table）は無改変。
   ============================================================ */
@media (min-width: 768px) {
  /* 列幅：左右の比較列を同じ幅にして、視線が一定のリズムで横へ跳べるようにする。
     本文680px（外枠1px×2を引いて678px）換算で 135.6 / 271.2 / 271.2px、
     padding 16px×2 を引いた内寸は 103.6 / 239.2 / 239.2px。
     最長セル「定期的・反復的なことが多い」は13字＝208pxなので、
     12セルすべてが1行に収まり泣き別れは発生しない。
     行見出し（手順／発生／判断／例）は最長2字＝32pxで、
     共通の tbody th { white-space: nowrap } のままで足りる。 */
  .article-content .article-table--compare th:nth-child(1) { width: 20%; }
  .article-content .article-table--compare th:nth-child(2),
  .article-content .article-table--compare th:nth-child(3) { width: 40%; }

  /* 外枠：表の輪郭を1本だけ出す。共通の border-block（上下のみ）は
     border ショートハンドが四辺ごと上書きする。 */
  .article-table-scroll--compare { border: 1px solid #cfdeef; }
  /* 内側の格子：セルの border-right / border-bottom だけで作る。
     border-collapse: collapse なので隣り合う線は二重にならず、
     外周はラッパー側の1本だけになる。右端列の border-right は外周と
     重なるので出さない（最終行の border-bottom は共通の
     tbody tr:last-child > * { border-bottom: 0 } がそのまま消す）。 */
  .article-content .article-table--compare th,
  .article-content .article-table--compare td { border-right: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line-strong); }
  .article-content .article-table--compare th:last-child,
  .article-content .article-table--compare td:last-child { border-right: 0; }
  /* ヘッダー行：面を本文行より一段濃くし、下の区切りも2pxにして
     「定型業務／非定型業務」が列見出しだと分かるようにする */
  .article-content .article-table--compare thead th { background: var(--color-sky); border-bottom: 2px solid #cfdeef; }
}

@media (max-width: 767px) {
  /* --- SP：1つの判断軸＝1つの縦型ミニテーブル ---
     ::before（ラベル列）を絶対配置で行の高さいっぱいに伸ばし、
     td 側は同じぶんだけ padding-left を空けて値を逃がす。
     ::before の width と td の padding-left は対で調整すること
     （em にすると ::before と td で font-size が違うためズレる）。
     ラベルは「非定型業務」の5字が最長で 0.8125rem＝約65px必要なため、
     左右 padding 8px を足した84pxを確保している。 */
  .article-content .article-table--compare tbody tr {
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfdeef;
    border-radius: 5px;
  }
  .article-content .article-table--compare tbody tr + tr { margin-top: 14px; }
  .article-content .article-table--compare tbody tr:first-child { border-top: 1px solid #cfdeef; }
  .article-content .article-table--compare tbody tr:last-child { border-bottom: 1px solid #cfdeef; }
  /* 判断軸の帯（手順／発生／判断／例）。級数は --stack の1.0625remを引き継ぐ */
  .article-content .article-table--compare tbody th {
    padding: 8px 11px;
    background: var(--color-sky);
    border-bottom: 1px solid #cfdeef;
  }
  /* 値のセル：左にラベル列ぶんの余白を空け、そこへ ::before を敷く */
  .article-content .article-table--compare td {
    position: relative;
    margin: 0;
    padding: 9px 11px 9px 95px;
  }
  .article-content .article-table--compare td + td { margin-top: 0; border-top: 1px solid var(--color-line-strong); }
  .article-content .article-table--compare td::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 84px;
    margin: 0;
    padding: 9px 8px;
    align-items: flex-start;
    color: var(--color-primary-deep);
    background: var(--color-surface);
    border-right: 1px solid var(--color-line-strong);
    content: attr(data-label);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.55;
  }
}

@media (max-width: 374px) {
  /* 320px級（本文288px、行の内寸286px）：値側を1行に収めるための幅配分。
     最長セルは「定期的・反復的なことが多い」「データ入力、集計、定型連絡」の
     13字＝195px。ラベル列を84pxのままにすると値側が190pxしか残らず、
     13字目だけが次行へ落ちる「泣き別れ」になる（.article-nobr は
     style.css の最終セーフティでこの幅だけ normal へ戻るため、
     nobr では防げない）。そこでラベル列だけを詰めて値側へ198pxを渡す。
     ・ラベルの級数だけ 0.6875rem へ落とす。実測で「非定型業務」5字＝56.5px、
       内寸58px（64px − padding 3px×2）に収まる。この0.6875remは
       --stack 既定のラベル級数と同じで、改修前から縮んでいない。
     ・値の級数 0.9375rem は据え置く（本文側は一切小さくしない）。
       これで値側に205pxを渡せ、最長199.2pxに対して約6pxの余裕が残る。 */
  .article-content .article-table--compare td { padding: 9px 8px 9px 73px; }
  .article-content .article-table--compare td::before { width: 64px; padding-inline: 3px; font-size: 0.6875rem; }
}

/* ============================================================
   記事7固有：入力元別早見表（3列）・5方法の比較表（4列）・30秒チェック
   ------------------------------------------------------------
   ・表は記事6の --tools（PCの罫線グリッド＋SPの縦型ミニテーブル）を
     そのまま再利用し、列数が違うぶんのPC列幅だけを記事7側で上書きする。
     --tools のPC列幅（24/27/24/25%）と1264px以上の再配分（24/28/20/28%）は
     記事6の4列早見表に合わせた実測値で、3列表では1列目が潰れ、
     4列の比較表でも3列目（導入前に確認したいこと）が20%まで縮んで
     1行1〜2文字の細長い段になるため。
   ・外枠は記事6が --tools-guide に閉じているので、記事7は --framed で持つ。
     820pxへの拡張（--wide）は使わず、表は本文幅680pxのまま置く。
   ・SPの縦型ミニテーブル（見出し帯＋ラベル列｜値列）は --tools の実装を
     そのまま使うので、記事7側でSPの追記は行わない（ラベルは data-label-sp）。
   ・追記はすべて .article-detail--data-entry-automation 配下へ閉じてあり、
     記事1〜6には影響しない。共通ルール側（--stack / --tools / --compare）は無改変。
   ============================================================ */

/* この記事のポイント：既存 .article-note--point の中へ箇条書きを置く。
   本文用ulの下マージン（22〜30px）だけ外して、枠内の上下余白をそろえる。 */
.article-detail--data-entry-automation .article-content .article-note--point ul { max-width: none; margin: 0; padding-left: 1.3em; list-style: disc; }
.article-detail--data-entry-automation .article-content .article-note--point li { font-size: 0.9375rem; line-height: 1.8; }
.article-detail--data-entry-automation .article-content .article-note--point li + li { margin-top: 7px; }

/* 30秒チェック：既存CHECKブロックの中身を「□＋項目」の一覧にする。
   □を本文の文字として置くと2行目以降の字下げが揃わないため、
   リストマーカーを消して ::before の四角で描く（本文の級数は変えない）。 */
.article-detail--data-entry-automation .article-content .article-check ul { max-width: none; margin: 0 0 18px; padding-left: 0; list-style: none; }
.article-detail--data-entry-automation .article-content .article-check li { position: relative; padding-left: 1.75em; }
.article-detail--data-entry-automation .article-content .article-check li::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.95em;
  height: 0.95em;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary-bright);
  border-radius: 3px;
  content: "";
}

@media (min-width: 768px) {
  /* 外枠。内側の格子・ヘッダー面・交互背景は --tools のセル罫線がそのまま引く。
     共通の .article-table-scroll は border-block（上下のみ）なので、
     borderショートハンドで四辺へ置き換える。 */
  .article-detail--data-entry-automation .article-table-scroll--framed { border: 1px solid #cfdeef; }

  /* 早見表（3列）。1列目は「Webフォームの内容を別の表へ入れ直している」が最長。
     本文678px換算で 26%＝176px（内寸156px）だと3行に割れて行が伸びるため、
     30%＝203px（内寸183px／0.9375rem＝12文字）まで広げて全行2行にそろえる。
     2列目と3列目は同じ幅にして、「まず確認すること」と「向いている方法」を
     同じリズムで左右に読めるようにする。 */
  .article-detail--data-entry-automation .article-content .article-table--sources th:nth-child(1) { width: 30%; }
  .article-detail--data-entry-automation .article-content .article-table--sources th:nth-child(2),
  .article-detail--data-entry-automation .article-content .article-table--sources th:nth-child(3) { width: 35%; }

  /* 比較表（4列）。3列目「サービス同士を接続できるか、変更時に維持できるか」が
     最長（24字＝約360px）なので、ここへ36%（内寸225px＝2行）を割り当てる。
     4列目は「ケース次第」5字＝約75pxが収まる17%で足り、
     その余りを2・3列目へ回している。 */
  .article-detail--data-entry-automation .article-content .article-table--ways th:nth-child(1) { width: 20%; }
  .article-detail--data-entry-automation .article-content .article-table--ways th:nth-child(2) { width: 27%; }
  .article-detail--data-entry-automation .article-content .article-table--ways th:nth-child(3) { width: 36%; }
  .article-detail--data-entry-automation .article-content .article-table--ways th:nth-child(4) { width: 17%; }
}

/* ============================================================
   記事9・10共通：自動化しやすさの評価表と、方法ガイド
   ------------------------------------------------------------
   ・記事9でインラインに置いていた宣言をここへ移した。記事10も
     同じ「作業｜自動化しやすさ（◎○△×）」の2列表を使うため、
     記事ごとに同じCSSを二重に持たないようにする。宣言内容は
     記事9の実装から変更していない（表示は従来どおり）。
   ・.article-rating-table は共通の .article-table 系とは別系統。
     2列目が記号1つだけの評価列で、共通表のSP縦積み（td::before に
     data-label を出す）へ渡すとラベルの方が長くなるため、
     table-layout: fixed の2列表としてPC・SPとも同じ形で見せる。
   ・.article-method-guide は「やりたいこと｜実現する手段」の対を
     表ではなく定義リストで並べるためのブロック。
   ============================================================ */
.article-content .article-rating-table-wrap {
  max-width: none;
  margin: 30px 0 36px;
  border-block: 1px solid var(--color-line-strong);
}
.article-content .article-rating-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.9375rem;
}
.article-rating-table__task { width: 76%; }
.article-rating-table__score { width: 24%; }
.article-content .article-rating-table th,
.article-content .article-rating-table td {
  padding: 10px 16px;
  border-bottom-color: var(--color-line);
  vertical-align: middle;
}
.article-content .article-rating-table thead th {
  color: var(--color-primary-deep);
  background: var(--color-sky);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.article-content .article-rating-table thead th:last-child,
.article-content .article-rating-table tbody td { text-align: center; }
.article-content .article-rating-table tbody th {
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: normal;
}
.article-content .article-rating-table tbody tr:nth-child(even) { background: var(--color-surface); }
.article-rating-badge {
  display: inline-flex;
  min-width: 3.4em;
  padding: 4px 9px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-primary-deep);
  border: 1px solid var(--color-primary-bright);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.article-content .article-method-guide {
  max-width: none;
  margin: 30px 0 36px;
  border-top: 1px solid var(--color-line-strong);
}
.article-content .article-method-guide__list { margin: 0; }
.article-method-guide__item {
  position: relative;
  padding: 13px 14px 14px 18px;
  border-bottom: 1px solid var(--color-line);
}
.article-method-guide__item::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 2px;
  background: var(--color-primary-bright);
  content: "";
}
.article-method-guide__item dt,
.article-method-guide__item dd {
  margin: 0;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
.article-method-guide__item dt {
  color: var(--color-primary-deep);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
}
.article-method-guide__item dd {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.75;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .article-content .article-rating-table-wrap,
  .article-content .article-method-guide { margin-block: 24px 30px; }
  .article-rating-table__task { width: 66%; }
  .article-rating-table__score { width: 34%; }
  .article-content .article-rating-table th,
  .article-content .article-rating-table td { padding: 9px 10px; }
  .article-content .article-rating-table thead th { font-size: 0.75rem; }
  .article-content .article-rating-table tbody th { font-size: 0.9375rem; }
  .article-rating-badge { min-width: 3.2em; padding: 4px 8px; }

  .article-method-guide__item { padding: 12px 0 13px 14px; }
  .article-method-guide__item::before { top: 14px; bottom: 14px; }
  .article-method-guide__item dt { font-size: 0.9375rem; }
  .article-method-guide__item dd { margin-top: 3px; font-size: 1rem; }
}