/* ============================================================
   イベマガ Vol.4「AIと組む、イベント担当者の新しい仕事術。」記事CSS
   ------------------------------------------------------------
   ・号固有の値はすべてここ（共有 colors_and_type.css は触らない＝10年キャッシュ）
   ・土台は Vol.3（60-days-out-dilemma/style.css）。表紙・ヘッダー・マニフェスト枠・署名・eh-note・CTA・次号予告・フッターを継ぎ、
     前号のレーン地図・立体図（Three.js）に関する規則は外した
   ・--issue-color は表紙の誌ロゴの赤 #A2292B（2026-10-19 に KV と一緒に決めた）
   ============================================================ */
:root {
  --issue-color: #A2292B;          /* 号の色＝表紙の誌ロゴの赤（デザイン原本の値・2026-10-19）。地 #ECE9E1 との明暗差 6.0:1・白地 7.3:1。変更前：#231815（仮＝Vol.3 の値） */
  --ink: #231815;
  --navy: #1E2380;
  --blue: #0096DB;
  --paper: #F0F3F6;
  --surface: #FFFFFF;
  --surface-tint: #EAF0F6;
  --muted: #59616E;
  --line: #CAD3DF;
  --dark: #151A43;
  --dark-glow: #273361;
  --on-dark: #F3F5FA;
  --on-dark-muted: #BCC8DC;
  --line-dark: #475274;
  --blue-light: #91CFFF;
  --lab: #E3E0DB;                  /* プリンの舞台（標本ルック）の地色。本体 pudding/*.html と同じ値 */
  --lab-ink: #1C1B19;
  --type-section: clamp(1.75rem, 3.4vw, 2.75rem);
  --panel-radius: 4px;
  --panel-shadow: 0 24px 64px -40px #151A4329;
  --gutter: clamp(20px, 4vw, 64px);
  --read: 780px;                   /* 本文の読み幅（Vol.3 の S4/S5 と同じ） */
  --mag-gutter: 32px;
  --mag-max-width: 1200px;
}
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--font-jp), sans-serif; color: var(--ink); background: var(--surface); }
img, svg { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
a:hover { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #0071A8; outline-offset: 5px; }
button { cursor: pointer; }
button, a, p, h2, h3, dd { overflow-wrap: break-word; }
::selection { background: var(--surface-tint); color: var(--navy); }
.wide { width: min(100% - var(--gutter) * 2, 1120px); margin-inline: auto; }
.read { width: min(100% - var(--gutter) * 2, var(--read)); margin-inline: auto; }
.page-grid { width: min(100% - var(--gutter) * 2, 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 720px); gap: 80px; }
.section-space { padding-block: clamp(76px, 8vw, 128px); }
.prose { font-size: 1.125rem; line-height: 2; letter-spacing: .015em; min-width: 0; }
.prose p { margin: 0 0 1.65em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; }
.prose a { color: #006799; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* 字の拡大時に、語のまとまりがカラムを押し広げない（Vol.3 から） */
.nw, .keep-tail, .type-phrase { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; vertical-align: baseline; }
h2, h3 { text-wrap: balance; letter-spacing: -.035em; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 101; background: var(--navy); color: var(--surface); padding: 12px 20px; }
.skip-link:focus { top: 12px; }

/* ============================================================ 見出し（各章） ============================================================ */
.section-head { margin-bottom: 44px; }
.section-no { display: block; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: .22em; color: var(--blue); margin-bottom: 18px; }
.section-head .title { margin: 0; font-size: var(--type-section); font-weight: 900; line-height: 1.5; letter-spacing: -.035em; max-width: 960px; }
.motion-line { display: block; }

/* ============================================================ 確定済みの表紙・ヘッダー（Vol.3 から継ぐ） ============================================================ */
.mag-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 100; background: transparent; pointer-events: none;
}
.mag-progress__bar {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--eh-blue-01);
  transition: transform 80ms linear;
}

.mag-header { border-bottom: 1px solid var(--border-1); padding: 18px 0; }
.mag-header .row {
  max-width: var(--mag-max-width); margin: 0 auto;
  padding: 0 var(--mag-gutter);
  display: flex; align-items: center; justify-content: center;
}
.mag-header .powered {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  font-family: var(--font-en);
  font-size: .625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-2);
}
.mag-header .powered img { height: 30px; width: auto; }

.float-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 35, 128, 0.08);
  transform: translateY(-100%); opacity: 0;
  visibility: hidden;
  transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out), visibility 0s 380ms;
  pointer-events: none;
}
.float-header.is-on {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-header { background: rgba(255, 255, 255, 0.94); }
}
.float-header .fh-row {
  max-width: var(--mag-max-width); margin: 0 auto;
  padding: 14px var(--mag-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.fh-logo { display: block; height: 28px; width: auto; }
.fh-logo path { fill: var(--issue-color); }
.fh-map { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--navy); }
.float-header .fh-right {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-en); font-size: .625rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-2); white-space: nowrap;
}
.float-header .fh-right img { height: 20px; width: auto; }

.cover {
  position: relative; isolation: isolate;
  padding: 0 0 96px;
  background: linear-gradient(180deg,
    var(--paper) 0%, var(--paper) calc(56.25vw + 40px), var(--surface) 100%);
}
/* 表紙の背景の線（モヤ）は Vol.4 で外した（2026-10-07） */
.cover .cover-photo { position: relative; width: 100%; aspect-ratio: 16 / 9; background: transparent; }
/* KV は全面（末尾の「表紙＝KV全面」の節・2026-10-19）。変更前（右寄せの切り抜きKV＝Vol.3 の型・仮画像の間）：
.cover .cover-illust {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
  height: 100%; width: auto; z-index: 2;
} */
.cover .cover-logo {
  position: absolute; left: 3.5%; top: 9.6%;
  width: 50.9%; height: auto; z-index: 2;
  opacity: 0.88;
}
.cover .cover-logo path { fill: var(--issue-color); }
.cover .cover-vol {
  /* 既刊（Vol.1〜3）と同じ右下 */
  position: absolute; right: 5.53%; bottom: 11.48%;
  width: 11.44%; height: auto; z-index: 2; opacity: .88;
}
.cover .inner {
  position: relative; z-index: 3;
  max-width: var(--mag-max-width); margin: 0 auto;
  padding: 72px var(--mag-gutter) 0; text-align: center;
}
/* 縦組みタイトル。20字＝2行折り（<br> で列を分ける）。line-height が列の間隔 */
.cover .headline {
  display: inline-block;
  writing-mode: vertical-rl; text-orientation: mixed; text-align: start;
  margin: 0;
  font-family: var(--font-jp); font-weight: 900;
  font-size: 68px; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--eh-black);
  /* 縦書き（直交フロー）は列の長さの上限がビューポートの高さになり、15字の列（約1,000px）が途中で折れて3列になる（2026-09-30 実測）。
     自然長で組むために inline 方向の寸法を max-content にする */
  height: max-content;
}
/* 縦中横。半角英字「AI」が上下に割れないようにする（02 §6・§11）。継承プロパティなので .tchar で包み直しても効く */
.cover .headline .tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }
.cover .headline .g90 { color: color-mix(in srgb, var(--issue-color) 90%, var(--eh-black)); }
.cover .headline .g70 { color: color-mix(in srgb, var(--issue-color) 70%, var(--eh-black)); }
.cover .headline .g50 { color: color-mix(in srgb, var(--issue-color) 50%, var(--eh-black)); }
.cover .headline .g30 { color: color-mix(in srgb, var(--issue-color) 30%, var(--eh-black)); }
.cover .headline .g10 { color: color-mix(in srgb, var(--issue-color) 10%, var(--eh-black)); }
.cover .sub {
  margin: 48px auto 0; text-align: center; max-width: 42em; text-wrap: balance;
  font-size: 20px; line-height: 1.7; color: var(--eh-ink-700);
}

/* ============================================================ マニフェスト枠 ============================================================ */
.opening { padding-top: 48px; padding-bottom: 96px; }
.opening .page-grid { display: block; }
.opening .prose { max-width: 820px; margin-inline: auto; }
/* 呼びかけ：前号のリード（44.8px・10字）より長い2文なので、見出しサイズは抑えて2行に収める */
/* 呼びかけ（編集稿S・2026-10-07）：1文目だけ大きい1行。改行は「さて、突然だが、」の後だけ＝テンプレの .nw で決める（balance は文の途中で割るので外した）。2文目 .opening-ask は本文の大きさ */
.opening .opening-lead { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 700; line-height: 1.8; letter-spacing: -.02em; margin-bottom: .9em; }
.opening .opening-ask { margin-bottom: 0; }
.manifesto-sign { margin: 40px 0 0 auto; width: 180px; transform: rotate(-2deg); }
.manifesto-sign svg { display: block; width: 100%; height: auto; }
.manifesto-sign svg path { fill: var(--issue-color); }
.manifesto-sign .sign-line { margin-top: 4px; }

/* ============================================================ プリンの枠（2体共通）。本体は iframe ============================================================ */
/* 上下の余白は対称（02 §8）。前後の段落間隔（1.65em ≒ 30px）より広く取って「置き物」に見せる */
.pudding-frame { margin: 44px 0; }
.pudding-frame iframe { display: block; width: 100%; height: 560px; border: 0; }   /* PC 560px（決定 2026-10-06）。SPは下の max(480px, min(62vh, 560px)) */
/* 枠の上の空きを詰める（決定 2026-10-07）：見下ろしのカメラで描画の上3割が空くので、描画サイズは変えずに親の枠で上を切り落とす（iframe を上にずらして overflow:hidden で隠す）。
   実測＝PC で中身の最上部は上から 冒頭 166px／末尾 186px。プリンは引っ張ると最大 0.75 単位（PC で約100px・SP で約50px）持ち上がり、末尾の吹き出しは最大 140px ほど頭の上に伸びる
   → その余白を残して、PC は冒頭 50px・末尾 60px を隠す（1回目の 120／110 は引っ張ると見切れた） */
.pudding-frame { overflow: hidden; }
.pudding-frame--opening { height: 510px; }
.pudding-frame--opening iframe { margin-top: -50px; }
.pudding-frame--talk { height: 500px; }
.pudding-frame--talk iframe { margin-top: -60px; }

/* ============================================================ 目次 ============================================================ */
.article-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-nav .wide { display: grid; grid-template-columns: repeat(4, 1fr); }
.article-nav a { padding: 28px 16px; font-size: .875rem; font-weight: 700; border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; }
.article-nav a:first-child { padding-left: 0; }
.article-nav a:last-child { border-right: 0; }
.article-nav a > span { font-family: var(--font-en); color: #006799; font-size: .75rem; }
.article-nav a:hover { color: #006799; }
/* 目次ラベル：SP（〜680px）では短い形（375px で3行に折れるため） */
.article-nav .lbl-short { display: none; }

/* ============================================================ 章の地色のリズム：S1 紙 → S2 白 → S3 紙 → S5 濃紺 ============================================================ */
.chapter--s1 { background: var(--paper); }
.chapter--s2 { background: var(--surface); }
.chapter--s3 { background: var(--paper); }

/* S2：3つの条件。太字の1文を見出し扱い（改行して1行立てる）。文は原稿どおり */
.conditions { margin-top: 48px; }
.condition { border-top: 1px solid var(--line); padding: 36px 0; }
.condition:last-child { padding-bottom: 0; }
.condition > p:first-child strong { display: block; font-size: 1.15em; line-height: 1.75; letter-spacing: -.02em; margin-bottom: .7em; text-wrap: pretty; }
.condition p + p { margin-top: 0; }

/* 図解の枠（節目③で中身が入る）。上下の余白は対称 */
.job .fig { margin-top: 44px; }

/* S3：4つの仕事 */
.job { border-top: 1px solid var(--line); padding: 48px 0; }
.job:last-child { padding-bottom: 0; }
.chapter--s3 .section-head + .prose { margin-bottom: 44px; }
.job-head { margin-bottom: 26px; }
.job-head h3 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 900; line-height: 1.6; letter-spacing: -.025em; text-wrap: pretty; }
.job-no { font-family: var(--font-en); color: var(--blue); margin-right: .1em; }
.fig-recap { margin-top: 14px; }

.eh-note { background: var(--surface-tint); margin-top: 44px; padding: 32px; }
.chapter--s3 .eh-note { background: var(--surface); }
.eh-note h3 { font-size: 1.2rem; color: var(--navy); margin: 0 0 20px; }
.eh-note p { font-size: 1rem; line-height: 1.95; margin: 0; text-wrap: pretty; }

/* セミナー告知＝CTAセクション（S3-4 の直後・2026-10-07）：左＝濃紺のビジュアル面「EventHub MCP」／右＝ラベル・イベント名・一言・ボタン。
   カードの格は記事末の主CTA（.offer）と同じ罫＋影。本文の読み幅（.read）の中に置く。SP は縦積み（ビジュアルが上）。
   変更前（10/02〜10/06）は eh-note と同格の白カード＋枠線だけのボタン（.seminar-note） */
.seminar-cta { margin-top: 44px; display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; background: var(--surface); box-shadow: var(--panel-shadow); }
.seminar-visual { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 28px 28px 26px; color: var(--on-dark); background: radial-gradient(120% 90% at 0% 0%, var(--dark-glow) 0%, var(--dark) 62%); overflow: hidden; }
.seminar-visual-eh { display: block; font-family: var(--font-en); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; color: var(--on-dark-muted); }
.seminar-visual-mcp { display: block; margin-top: 2px; font-family: var(--font-en); font-size: 100px; font-weight: 900; line-height: .92; letter-spacing: -.035em; color: var(--blue-light); }
/* 文字色のグラデーション（非対応ブラウザは上の単色のまま）。帯は幅1個分で周期が閉じる並び＝流しても継ぎ目が出ない */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .seminar-visual-mcp { background: linear-gradient(90deg, var(--blue-light) 0%, var(--surface) 12.5%, var(--blue) 25%, var(--surface) 37.5%, var(--blue-light) 50%, var(--surface) 62.5%, var(--blue) 75%, var(--surface) 87.5%, var(--blue-light) 100%); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.seminar-link { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-muted); white-space: nowrap; }
.seminar-link-line { position: relative; flex: 1 1 auto; min-width: 48px; height: 1px; background: var(--line-dark); }
.seminar-link-dot { position: absolute; top: 50%; left: calc(100% - 8px); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 0 3px rgba(145, 207, 255, .22), 0 0 12px rgba(145, 207, 255, .8); }
.seminar-link-end--eh img { display: block; height: 20px; width: auto; }
.seminar-body { min-width: 0; padding: 32px 36px 34px; }
.seminar-label { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.seminar-label span { white-space: nowrap; }
.seminar-label span:not(:last-child)::after { content: "｜"; margin-inline: .3em; color: var(--line); }
.seminar-cta h3 { margin: 0 0 4px; font-size: clamp(1.3rem, 2vw, 1.4rem); font-weight: 900; line-height: 1.5; letter-spacing: -.03em; color: var(--navy); text-wrap: pretty; }
.seminar-series { margin: 0 0 14px; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--eh-blue-text); }
.seminar-dates { list-style: none; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.seminar-dates time { font-variant-numeric: tabular-nums; }
.seminar-date-kind { display: inline-block; margin-left: 8px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.seminar-copy { margin: 0 0 22px; font-size: 1rem; line-height: 1.95; text-wrap: pretty; }
.seminar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: min(100%, 300px); padding: 14px 22px; border-radius: var(--panel-radius); background: var(--navy); color: var(--surface) !important; font-weight: 700; font-size: .9375rem; text-decoration: none !important; transition: background 120ms var(--ease-out); }
.seminar-btn:hover { background: var(--dark); }
.seminar-btn[aria-disabled="true"] { cursor: default; }


/* ============================================================ S5（締め・濃紺） ============================================================ */
.ending { background: var(--dark); color: var(--on-dark); }
.ending .section-no { color: var(--blue-light); }
.ending .title { color: var(--surface); }
.ending .prose { color: var(--on-dark); }
.ending .prose .closing-statement { font-size: 1.35rem; font-weight: 700; line-height: 1.95; margin: 50px 0 0; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.ending .prose .farewell { margin-top: 1.65em; }
.ending .pudding-frame { margin-bottom: 0; }

/* ============================================================ CTA（前号の組み方。①はビジュアル無しの1列） ============================================================ */
.offer { padding: 56px 64px; border: 1px solid var(--line); border-radius: var(--panel-radius);
  background: linear-gradient(115deg, var(--surface) 0%, var(--surface-tint) 45%, var(--surface) 100%); box-shadow: var(--panel-shadow); }
.offer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0 48px; align-items: center; grid-template-areas: "head visual" "copy visual" "btn btn"; }
.offer-grid > * { min-width: 0; }
.offer-grid--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "copy" "btn"; }
/* ビジュアル無しの①：カードを本文と同じ読み幅（.read）に合わせる。ビジュアルが付くなら .wide に戻す */
.offer--text { padding: 48px 56px; }
.offer-head { grid-area: head; }
.offer-copy { grid-area: copy; }
.offer-btn { grid-area: btn; justify-self: stretch; align-self: end; }
.offer-visual { grid-area: visual; align-self: center; position: relative; }
.offer-badge { display: inline-block; background: var(--navy); color: var(--surface); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.offer-title { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.35; letter-spacing: -.02em; color: var(--navy); margin: 0 0 20px; }
.offer-copy { font-size: 1rem; line-height: 1.9; }
.offer-copy p { margin: 0 0 1em; }
.offer-name { font-size: 1.125rem; }
.offer-free { color: var(--muted); font-size: .9375rem; }
.offer-btn { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--navy); color: var(--surface) !important; text-decoration: none !important;
  font-weight: 700; font-size: 1rem; padding: 16px 28px; border-radius: var(--panel-radius); margin-top: 40px; transition: background 120ms var(--ease-out); }
.offer-grid--text .offer-btn { justify-self: start; min-width: min(100%, 360px); margin-top: 28px; }
.offer-btn-label { min-width: 0; }
.offer-btn:hover { background: var(--dark); }
.offer-btn[aria-disabled="true"] { cursor: default; }

/* ============================================================ 次号予告・フッター ============================================================ */
.next-issue { background: var(--paper); border-top: 1px solid var(--line); }
.next-issue > .page-grid { display: block; max-width: 780px; }
.next-meta { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 24px; row-gap: 6px; margin-bottom: 32px; }
.next-meta > span:first-child { font-size: 1rem; font-weight: 700; }
.next-meta time { font-family: var(--font-en); font-size: 1.1rem; margin: 0; }
.next-planned { font-size: .75rem; color: var(--muted); margin: 0; }
.ni-title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 900; line-height: 1.7; margin: 0 0 24px; }
.ni-body { font-size: 1.0625rem; line-height: 2; margin: 0; text-wrap: pretty; }
.mag-footer { padding: 40px 0; background: var(--dark); color: var(--surface); }
.colophon { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.colophon > span { font-family: var(--font-en); font-size: .75rem; }
.colophon img { width: 120px; height: auto; }

/* ============================================================ レスポンシブ ============================================================ */
@media (max-width: 1050px) {
  .page-grid { grid-template-columns: 240px minmax(0,1fr); gap: 48px; }
}
@media (max-width: 900px) {
  .cover .headline { font-size: 56px; }
  .page-grid { grid-template-columns: 1fr; gap: 36px; }
  .opening .prose { max-width: 720px; margin-inline: auto; }
  .offer { padding: 40px 32px; }
  .offer-grid { gap: 0 32px; }
  .seminar-cta { grid-template-columns: 250px minmax(0, 1fr); }
  .seminar-visual { min-height: 260px; padding: 24px 22px 22px; }
  .seminar-visual-mcp { font-size: 84px; }
  .seminar-body { padding: 28px 28px 30px; }
}
@media (max-width: 680px) {
  :root { --mag-gutter: 20px; --gutter: 20px; }
  html { scroll-padding-top: 78px; }
  .mag-header { padding: 10px 0; }
  .mag-header .powered { gap: 8px; }
  .mag-header .powered img { height: 22px; }
  .float-header .fh-row { padding: 12px 20px; gap: 20px; }
  .fh-logo { height: 22px; }
  .float-header .fh-right { display: none; }
  .fh-map { font-size: .875rem; }
  .cover { padding: 0 0 64px; background: linear-gradient(180deg,var(--paper) 0%,var(--paper) calc(133.33vw + 32px),var(--surface) 100%); }
  .cover .cover-photo { aspect-ratio: 3 / 4; }
  /* 変更前（切り抜きKVの SP・2026-10-19 に外した）：.cover .cover-illust { right: 3%; top: 54%; height: auto; width: 76%; } */
  .cover .cover-logo { left: 6.4%; top: 6.3%; width: 54.1%; }
  .cover .cover-vol { right: 5.5%; bottom: 9%; width: 21.1%; }
  .cover .inner { padding-top: 48px; }
  .cover .headline { font-size: 48px; }
  .cover .sub { margin-top: 28px; font-size: 17px; }
  .section-space { padding-block: 72px; }
  .prose { font-size: 1.0625rem; line-height: 1.95; letter-spacing: .01em; }
  .section-head { margin-bottom: 32px; }
  .section-no { margin-bottom: 14px; }
  .section-head .title { line-height: 1.55; }
  .opening { padding-top: 24px; padding-bottom: 64px; }
  .opening .opening-lead { font-size: 1.25rem; }
  .pudding-frame { margin: 32px calc(var(--gutter) * -1); }   /* SP は枠を画面いっぱいに（左右の余白ぶんを張り出す。100vw はスクロールバー幅ではみ出すので使わない）。皿は画面の端で見切れる（決定 2026-10-07） */
  .pudding-frame iframe { height: min(62vh, 560px); min-height: 480px; }   /* SP 62vh・下限480（決定 2026-10-06） */
  .pudding-frame--opening { height: calc(max(480px, min(62vh, 560px)) - 110px); }   /* SP：中身の最上部 194px から引っ張りぶん（約50px）＋余白を残す */
  .pudding-frame--opening iframe { margin-top: -110px; }
  .pudding-frame--talk { height: calc(max(480px, min(62vh, 560px)) - 20px); }   /* SP：3行の吹き出し（セミナーの台詞）が舞台の上端から 42px まで上がるので控えめ */
  .pudding-frame--talk iframe { margin-top: -20px; }
    .article-nav .wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-nav a { font-size: .875rem; gap: 8px; padding: 18px 10px; }
  .article-nav a:nth-child(2) { border-right: 0; }
  .article-nav a:nth-child(3) { padding-left: 0; }
  .article-nav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .article-nav .lbl-long { display: none; }
  .article-nav .lbl-short { display: inline; }
  .conditions { margin-top: 36px; }
  .condition { padding: 28px 0; }
  .fig { margin-top: 40px; }
  .fig-slot { min-height: 260px; }
  .job { padding: 36px 0; }
  .job-head { margin-bottom: 20px; }
  .job-head h3 { font-size: 1.3rem; line-height: 1.65; }
  .eh-note { margin-top: 36px; padding: 26px 22px; }
  .seminar-cta { margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
  .seminar-visual { min-height: 0; padding: 24px 22px 22px; }
  .seminar-visual-mcp { font-size: min(96px, 26vw); }
  .seminar-link { margin-top: 22px; }
  .seminar-body { padding: 24px 22px 26px; }
  .seminar-btn { display: flex; width: 100%; }
  .eh-note p { font-size: 1rem; }
  .ending .prose .closing-statement { font-size: 1.2rem; margin-top: 36px; padding-top: 26px; }
  .manifesto-sign { width: 154px; margin-top: 36px; }
  .offer { padding: 32px 20px; }
  .offer-grid { grid-template-columns: 1fr; gap: 24px; grid-template-areas: "head" "visual" "copy" "btn"; }
  .offer-btn, .offer-grid--text .offer-btn { justify-self: stretch; min-width: 0; justify-content: space-between; white-space: normal; text-align: left; padding: 16px 18px; margin-top: 0; gap: 12px; }
  /* 画像なしの CTA（.offer-grid--text）の SP（2026-10-13）：上の .offer-grid の SP 規則が「画像の段」を足していて、高さ0の段の上下に 24px ずつ空いていた（見出し→品名 68px・PC は 20px）。
     段を作らず、行の間は 0 にしてボタンの上だけ空ける＝見出し→品名 20px・本文→ボタン 24px。変更前：この2行なし */
  .offer-grid--text { grid-template-areas: "head" "copy" "btn"; row-gap: 0; }
  .offer-grid--text .offer-btn { margin-top: 24px; }
  .next-meta time { font-size: .95rem; }
  .ni-title { font-size: 1.6rem; }
  .ni-body { font-size: 1.0625rem; }
  .colophon { flex-direction: column-reverse; align-items: start; }
  .colophon img { width: 112px; }
}
@media (max-width: 440px) { .cover .headline { font-size: 40px; } }
@media (max-width: 360px) {
  .article-nav a { font-size: .8rem; padding-inline: 6px; }
  .opening .opening-lead { font-size: 1.125rem; }   /* 320px：2行目の15字（約265px）が 280px の幅に入る大きさ */
  .ni-title { font-size: 1.35rem; }   /* 320px：次号予告の題の第2文（13字）が 280px の幅に入る大きさ。1.6rem では 321px で文中で割れた（実測 2026-10-07） */
}

/* ============================================================ 動き ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* 署名「イベマガ編集部」：1パスずつ書かれていく（基底＝表示。.mag-js かつ未到達のときだけ隠す＝フェイルセーフ） */
  .mag-js .manifesto-sign .sign-text path { clip-path: inset(-10% 105% -10% -5%); transition: clip-path 280ms var(--ease-out); }
  .mag-js .manifesto-sign.is-in .sign-text path { clip-path: inset(-10% -5% -10% -5%); }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(1) { transition-delay: 300ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(2) { transition-delay: 460ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(3) { transition-delay: 620ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(4) { transition-delay: 780ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(5) { transition-delay: 940ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(6) { transition-delay: 1100ms; }
  .mag-js .manifesto-sign .sign-text path:nth-of-type(7) { transition-delay: 1260ms; }
  .mag-js .manifesto-sign .sign-line { clip-path: inset(-40% 102% -40% -2%); transition: clip-path 460ms cubic-bezier(.7,0,.18,1) 1600ms; }
  .mag-js .manifesto-sign.is-in .sign-line { clip-path: inset(-40% -2% -40% -2%); }
  /* 誌ロゴのストローク・イン。前号はパスごとの遅れを CSS変数と calc で animation に与えていたが、
     禁止パターン（遅れを calc と CSS変数で与える animation）に当たるので、表紙の見出しと同じ
     「JSの setTimeout で .show → CSSは transition だけ」に揃えた。JSが動かなければ基底＝表示 */
  .mag-js .cover-logo.is-drawing path { clip-path: inset(-12% 106% -12% -6%); transition: clip-path 240ms var(--ease-out); }
  .mag-js .cover-logo.is-drawing path.show { clip-path: inset(-12% -6% -12% -6%); }
  .mag-js .cover-vol { animation: coverBadgeIn 1400ms var(--ease-out) 2300ms both; }
  @keyframes coverBadgeIn { from { opacity: 0; transform: translateY(10px); } }
  /* 表紙の1文字ずつ：JS（setTimeout）が .show を付ける。CSSは opacity の transition だけ（02 §3） */
  .mag-js .cover .headline .tchar { opacity: 0; transition: opacity 120ms linear; }
  .mag-js .cover .headline .tchar.show { opacity: 1; }
  /* 大見出しのリビール：行ごとに左→右へワイプ（JSが行に束ねて .show を付ける。ずらし750ms÷長さ900ms＝83%） */
  .mag-js .motion-line { clip-path: inset(-8% 104% -8% -4%); transition: clip-path 900ms cubic-bezier(.65, 0, .15, 1); }
  .mag-js .motion-line.show { clip-path: inset(-8% -4% -8% -4%); }
  /* セミナー告知：入場（ビジュアルの3要素を .32s 刻み÷.4s＝80%）→「MCP」の文字色がゆっくり流れ、線の上を点が「いつものAI」→「EventHub」へ渡り続ける。
     JS が .is-in を付けなければ基底＝表示。遅れは固定値（calc と CSS変数で与えない） */
  .mag-js .seminar-cta .seminar-visual-eh, .mag-js .seminar-cta .seminar-visual-mcp, .mag-js .seminar-cta .seminar-link { opacity: 0; transition: opacity .4s ease; }
  .mag-js .seminar-cta.is-in .seminar-visual-eh, .mag-js .seminar-cta.is-in .seminar-visual-mcp, .mag-js .seminar-cta.is-in .seminar-link { opacity: 1; }
  .mag-js .seminar-cta.is-in .seminar-visual-mcp { transition-delay: .32s; animation: seminarShine 9s linear 1s infinite; }
  .mag-js .seminar-cta.is-in .seminar-link { transition-delay: .64s; }
  @keyframes seminarShine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
  .mag-js .seminar-cta.is-in .seminar-link-dot { animation: seminarTravel 3.6s cubic-bezier(.45, 0, .2, 1) 1.1s infinite; }
  @keyframes seminarTravel {
    0% { left: 0; opacity: 0; transform: scale(.6); }
    10% { opacity: 1; transform: scale(1); }
    72% { left: calc(100% - 8px); opacity: 1; transform: scale(1); }
    84% { left: calc(100% - 8px); opacity: 0; transform: scale(1.8); }
    100% { left: calc(100% - 8px); opacity: 0; transform: scale(1.8); }
  }
}
@supports (animation-timeline: scroll()) {
  .mag-progress__bar { animation: readingProgress linear both; animation-timeline: scroll(root block); transition: none; }
  @keyframes readingProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tchar { opacity: 1 !important; }
  .motion-line { clip-path: none !important; }
}
@media print {
  .float-header, .mag-progress, .article-nav { display: none !important; }
  .section-space { padding-block: 30px; }
  .ending { background: var(--surface); color: var(--ink); }
  .ending .prose, .ending .title { color: var(--ink); }
  .prose { font-size: 12pt; }
  .tchar { opacity: 1 !important; }
  .motion-line { clip-path: none !important; }
  .pudding-frame iframe { height: 240px; }
}

/* ============================================================ 図解（共通）：白いカード。上下の余白は対称 ============================================================ */
.fig { margin: 56px 0 0; }
.fig figcaption { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.fig-no { font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: .22em; color: var(--blue); white-space: nowrap; }
.fig figcaption strong { font-size: 1.125rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.5; }
.fig-card { background: var(--surface); border: 1px solid var(--line); padding: 28px; }
.chapter--s2 .fig-card { background: var(--paper); border-color: transparent; }

/* 図解①：3つの条件（上段）と作る仕事の前提（下段＝土台） */
.cond-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cond-tile { position: relative; padding: 18px 16px 16px; background: var(--surface); border-top: 3px solid var(--navy); min-width: 0; }
.cond-tile-no { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--surface); font-family: var(--font-en); font-weight: 700; font-size: .875rem; align-items: center; justify-content: center; }
.cond-tile-kicker { display: block; margin-top: 12px; font-weight: 900; font-size: 1rem; line-height: 1.5; letter-spacing: -.02em; text-wrap: pretty; }
.cond-tile-head { margin: 8px 0 0; font-size: .9375rem; line-height: 1.75; text-wrap: pretty; }
.cond-tile-act { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8125rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.cond-base { margin-top: 12px; background: var(--navy); color: var(--surface); padding: 16px 20px; display: flex; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.cond-base-head { font-weight: 900; font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; }
.cond-base-items { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: .875rem; line-height: 1.7; }
.cond-base-items li { position: relative; padding-left: 14px; }
.cond-base-items li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--blue-light); }

/* 図解①の再掲：各仕事の見出し下に、効いた条件の印 */
.fig-recap { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 16px; }
.fig-recap[hidden] { display: none; }   /* hidden 属性は author の display に負けるので明示（4の節＝印が決まるまで非表示） */
.fig-recap-label { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.fig-recap-marks { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.fig-recap-marks li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; line-height: 1.5; color: var(--muted); background: var(--surface); }
.fig-recap-marks li i { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-family: var(--font-en); font-size: .6875rem; font-weight: 700; align-items: center; justify-content: center; flex: none; }
.fig-recap-marks li.on { color: var(--navy); border-color: var(--navy); font-weight: 700; }
.fig-recap-marks li.on i { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.fig-recap-marks li.off { opacity: .6; }

/* 図解②：毎日のループ。左＝人が持つ（環の外）／右＝環（内側＝AI） */
.loop-card { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: center; }
.loop-stage { min-width: 0; }
.loop-ring { display: block; width: 100%; height: auto; max-width: 480px; margin-inline: auto; font-family: var(--font-jp); }
.loop-orbit { fill: none; stroke: var(--line); stroke-width: 2; }
.loop-arc { fill: none; stroke: var(--navy); stroke-width: 2; marker-end: url(#loop-arrow); color: var(--navy); }
.loop-in { stroke: var(--blue); color: var(--blue); }
.loop-inner { fill: var(--surface-tint); }
.loop-inner-head { font-size: 15px; font-weight: 900; fill: var(--navy); letter-spacing: -.02em; }
.loop-inner-sub { font-size: 10.5px; fill: var(--muted); }
.loop-note { font-size: 11px; fill: var(--muted); font-weight: 700; }
.loop-node rect { fill: var(--surface-tint); stroke: var(--surface-tint); stroke-width: 1.5; }
.loop-node--human rect { fill: var(--navy); stroke: var(--navy); }
.loop-node--neutral rect { fill: var(--surface); stroke: var(--navy); }
.loop-name { font-size: 14px; font-weight: 700; fill: var(--navy); }
.loop-node--human .loop-name { fill: var(--surface); }
.loop-sub { font-size: 10px; fill: var(--muted); }
.loop-human-head { margin: 0; font-weight: 900; font-size: 1.0625rem; letter-spacing: -.02em; }
.loop-human-head::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--navy); margin-right: 8px; vertical-align: 1px; }
.loop-human-sub { margin: 6px 0 0; font-size: .875rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.loop-quotes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.loop-quotes li { padding: 12px 14px; background: var(--paper); border-left: 3px solid var(--navy); }
.loop-quotes q { display: block; quotes: "「" "」"; font-weight: 700; font-size: .9375rem; line-height: 1.7; text-wrap: balance; }
.loop-quotes span { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.loop-legend { display: none; }
.loop-ring--sp { display: none; }
/* SP の環の矢じり（2026-10-13）：SP の SVG に自前の marker を持たせて参照する。変更前は PC の SVG の #loop-arrow を参照していて、
   PC の SVG が SP で display:none のため矢じりが描かれなかった（弧が棒に見えた） */
.loop-ring--sp .loop-arc { marker-end: url(#loop-arrow-sp); }
.loop-inside-note { display: none; margin: 10px 0 0; font-size: .75rem; line-height: 1.7; color: var(--muted); }
.loop-inside-note b { color: var(--navy); }

/* 図解の見せ方（軽い動き）：カードが上端から64%まで上がったら、タイル／ノードを順に。ずらし≧80%（.32s÷.4s） */
@media (prefers-reduced-motion: no-preference) {
  .mag-js .fig-anim .cond-tile, .mag-js .fig-anim .cond-base, .mag-js .fig-anim .loop-node, .mag-js .fig-anim .loop-human, .mag-js .fig-anim .loop-in, .mag-js .fig-anim .loop-note { opacity: 0; transition: opacity .4s ease; }
  .mag-js .fig-anim .loop-arc:not(.loop-in) { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .5s ease; }
  .mag-js .fig-anim.is-in .cond-tile, .mag-js .fig-anim.is-in .cond-base, .mag-js .fig-anim.is-in .loop-node, .mag-js .fig-anim.is-in .loop-human, .mag-js .fig-anim.is-in .loop-in, .mag-js .fig-anim.is-in .loop-note { opacity: 1; }
  .mag-js .fig-anim.is-in .loop-arc:not(.loop-in) { stroke-dashoffset: 0; }
  .mag-js .fig-anim.is-in .cond-tile:nth-child(2) { transition-delay: .32s; }
  .mag-js .fig-anim.is-in .cond-tile:nth-child(3) { transition-delay: .64s; }
  .mag-js .fig-anim.is-in .cond-base { transition-delay: .96s; }
  .mag-js .fig-anim.is-in .loop-node:nth-of-type(2) { transition-delay: .32s; }
  .mag-js .fig-anim.is-in .loop-node:nth-of-type(3) { transition-delay: .64s; }
  .mag-js .fig-anim.is-in .loop-node:nth-of-type(4) { transition-delay: .96s; }
  .mag-js .fig-anim.is-in .loop-node:nth-of-type(5) { transition-delay: 1.28s; }
  .mag-js .fig-anim.is-in .loop-node:nth-of-type(6) { transition-delay: 1.6s; }
  .mag-js .fig-anim.is-in .loop-arc:not(.loop-in) { transition-delay: .4s; }
  .mag-js .fig-anim.is-in .loop-in, .mag-js .fig-anim.is-in .loop-note { transition-delay: 2s; }
  .mag-js .fig-anim.is-in .loop-human { transition-delay: 2.2s; }
}
@media (max-width: 900px) {
  .loop-card { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 680px) {
  .fig { margin-top: 40px; }
  .fig-card { padding: 18px 16px; }
  .fig figcaption { flex-direction: column; gap: 6px; }
  .cond-tiles { grid-template-columns: 1fr; gap: 10px; }
  .cond-tile { padding: 16px 14px 14px; }
  .cond-base { padding: 14px 16px; }
  .fig-recap { margin-top: 12px; }
  .loop-card { display: flex; flex-direction: column; }
  .loop-human { order: 2; }
  .loop-ring--pc { display: none; }
  .loop-ring--sp { display: block; max-width: 360px; }
  .loop-ring--sp .loop-name { font-size: 15px; }
  .loop-ring--sp .loop-inner-head { font-size: 14px; }
  .loop-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: .75rem; line-height: 1.6; }
  .loop-legend > div { display: flex; gap: 8px; }
  .loop-legend dt { font-weight: 700; color: var(--navy); white-space: nowrap; }
  .loop-legend dd { margin: 0; color: var(--muted); }
  .loop-inside-note { display: block; }
  .loop-human { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
}
@media (max-width: 360px) {
  .loop-legend { grid-template-columns: 1fr; }
}

/* ============================================================ 図解③：1時間ごとに届く速報のイメージ（S3-3・2026-10-14） ============================================================
   s3-3-0 の直後。チャットに届いた1通の投稿を一般化した形（発行人の指示 10/14：チャットで本当に届く書き方＝文字の行だけ。棒グラフ・表組み・箱は使わない）。
   名前・数字は架空（キャプションで明示）。行頭の絵文字は4バイト文字なので使えない（02 §11）→ 同じ位置に小さな図形のアイコン（インラインSVG）。
   チャットツールのロゴ・配色・リアクション欄は真似ない。投稿者の欄は無地の四角＋文字だけ（人型・ロボットは描かない）。動きは付けない。
   本文フローの途中に置くので上下の余白は対称（02 §8）＝同じ節の FIG.2 の上（44px）に揃える。変更前：この節なし */
.job .fig--flash { margin: 44px 0; }
.fig--flash .fig-cap-note { margin-left: .2em; font-size: .8125rem; font-weight: 700; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.chat-post { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.chat-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: var(--navy); color: var(--surface); font-size: .9375rem; font-weight: 700; line-height: 1; }
.chat-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: .9375rem; line-height: 1.5; }
.chat-head b { font-weight: 900; color: var(--ink); }
.chat-head time { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-text { margin-top: 2px; font-size: .9375rem; line-height: 1.75; font-variant-numeric: tabular-nums; }
.chat-text p { margin: 0; text-wrap: pretty; }
.chat-text .chat-title { font-weight: 900; }
.chat-ic { display: inline-block; width: 1.2em; height: 1.2em; margin-right: .3em; vertical-align: -.24em; }
.chat-ic--after { margin: 0 0 0 .25em; }
@media (max-width: 680px) {
  .chat-post { grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; }
  .chat-avatar { width: 32px; height: 32px; font-size: .875rem; }
}

/* ============================================================ 表紙＝KV全面（2026-10-19・Vol.1/2 の型） ============================================================
   KV（写真）は 16:9 枠（SP は 3:4）の全面に object-fit:cover で敷く。誌ロゴ（SVG）と号数マーク（SVG 画像）は上に重ねる。
   ロゴと号数の位置＝デザインの比較ボード（10/13・8案）の焼き込み位置を実測して合わせた（PC）。SP は Vol.1/2 の値。
   号数マーク vol-4.svg は文字の外接矩形で詰めてある＝width はインクの幅（ボードの焼き込みで 11.4%）。
   写真の下端は表紙の地（--cover-zone＝写真の下端の色 #DDD6CA を白へ 40% 寄せた色・高精細版で測り直した。1920 版では #DCD5C9→#EAE6DF）へ溶かす。写真の下端の色より暗くしない（Vol.2 の教訓）。
   SP は写真の左 42% を見せる（左で切る＝ロゴの下地が平らな左上）。
   上の .cover・.cover-logo・.cover-vol の規則はこの節で上書きしている（SP の規則より後ろに置く必要があるので末尾）。変更前：この節なし */
:root {
  --cover-logo-color: var(--issue-color);
  --cover-zone: #EBE6DF;
  --kv-pos: 50% 50%;
  --kv-pos-sp: 0% 50%;
  --kv-fade: 12%;
}
.cover { background: linear-gradient(180deg, var(--cover-zone) 0%, var(--cover-zone) calc(56.25vw + 40px), var(--surface) 100%); }
.cover .cover-photo { overflow: hidden; }
.cover .cover-kv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--kv-pos); z-index: 0; }
.cover .cover-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--kv-fade); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cover-zone)); pointer-events: none; z-index: 1; }
.cover .cover-logo { left: 5.2%; top: 9.9%; width: 44.6%; opacity: 1; }
.cover .cover-logo path { fill: var(--cover-logo-color); }
/* 号数マークの位置（2026-10-19 実測で決めた）：ボードの焼き込みの位置（右3.0%・下8.0%・幅11.4%）だと「4」が濃い緑のノートに半分掛かり、
   赤×濃い緑でまわりの 56% が明暗差 3:1 未満（中央値 2.5:1）→ 右下の角へ寄せて少し小さくした＝まわりの 3:1 未満 14%・中央値 4.9:1。
   変更前：.cover .cover-vol { right: 3.0%; bottom: 8.0%; width: 11.4%; opacity: 1; } */
.cover .cover-vol { right: 1.5%; bottom: 2.5%; width: 9.5%; opacity: 1; }
@media (max-width: 680px) {
  .cover { background: linear-gradient(180deg, var(--cover-zone) 0%, var(--cover-zone) calc(133.33vw + 32px), var(--surface) 100%); }
  .cover .cover-kv { object-position: var(--kv-pos-sp); }
  .cover .cover-logo { left: 6.4%; top: 6.3%; width: 54.1%; }
  /* SP：Vol.1/2 の値（右5.5%・下9%）だと黒いペンの先に掛かる（まわりの 3:1 未満 12%）→ 下 4% へ（4.5%・中央値 5.8:1）。変更前：bottom: 9% */
  .cover .cover-vol { right: 5.5%; bottom: 4%; width: 21.1%; }
}

/* ============================================================ 末尾の CTA＝セミナー申込のカード（2026-10-19） ============================================================
   特典のカード（.offer--text）の型のまま、中身を S3-4 直後のセミナー枠と同じ部品（.seminar-label／-series／-dates／-copy）で組む。
   .offer-copy p の余白（0 0 1em）がセミナー枠の部品の余白より強いので、ここでセミナー枠と同じ間隔に揃え直す（ラベル→題 14・題→2行目 6・2行目→日時 14・日時→一言 16）。
   ボタンは「↗」なし＝ラベルを中央に（SP の space-between より後ろに置く）。変更前：この節なし（特典のカード） */
.offer--seminar .seminar-label { margin: 0 0 14px; }
.offer--seminar .offer-title { margin-bottom: 6px; }
.offer--seminar .offer-copy .seminar-series { margin: 0 0 14px; }
.offer--seminar .seminar-dates { margin: 0 0 16px; }
.offer--seminar .offer-copy .seminar-copy { margin: 0; }
.offer .offer-btn--center { justify-content: center; text-align: center; }
@media (max-width: 360px) { .offer--seminar .offer-title { font-size: 1.45rem; } }   /* 320px：「EventHubを動かす。」（約250px）が 240px の幅に入らず語の途中で割れた（3行）→ 2行に */