/* AIディア v4 — coherent editorial UI, 2026-08-30 */
:root {
  --v4-canvas: #f3f6f7;
  --v4-surface: #ffffff;
  --v4-ink: #062d42;
  --v4-orange: #e84e0f;
  --v4-blue: #3c7696;
  --v4-teal: #15909a;
  --v4-muted: #637078;
  --v4-line: #d7d0c5;
  --v4-pale: #e7f1f3;
  --v4-shell: 1440px;
  --v4-body: 760px;
  --paper: var(--v4-canvas);
  --surface: var(--v4-surface);
  --text: var(--v4-ink);
  --text-weak: var(--v4-muted);
  --line: var(--v4-line);
  --rule: var(--v4-line);
  --accent: var(--v4-orange);
  --blue: var(--v4-blue);
  --lime: var(--v4-pale);
  --pink: var(--v4-orange);
}

html { scroll-padding-top: 82px; }
body {
  color: var(--v4-ink);
  background: var(--v4-canvas);
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* Header: one dark plane, one orange action. */
.site-header { min-height: 64px; }
.site-header__nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: rgba(6, 45, 66, .98);
  backdrop-filter: blur(14px);
}
.site-header__nav .nav-inner {
  min-height: 64px;
  max-width: var(--v4-shell);
  padding-inline: clamp(18px, 3vw, 48px);
}
.site-header__nav .main-nav { align-self: stretch; }
.site-header__nav .main-nav a {
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  margin: 0;
  padding-block: 0;
  line-height: 1;
}
.wordmark--nav .wordmark-mark {
  background: var(--v4-orange);
  color: #fff;
}
.site-header__nav .main-nav a { color: rgba(255, 255, 255, .76); }
.site-header__nav .main-nav a:hover,
.site-header__nav .main-nav a.is-active { color: #fff; }
.nav-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  background: var(--v4-orange);
  color: #fff;
  box-shadow: none;
  line-height: 1;
}
.nav-contact:hover { background: #fff; color: var(--v4-ink); }

/* Shared CTA: copy must inherit the high-contrast orange-band palette. */
.contact-band { background: var(--v4-orange); color: #fff; }
.contact-band__eyebrow,
.contact-band__title,
.contact-band__copy { color: #fff; }
.contact-band__copy { opacity: .82; }
.contact-band .btn { border-color: #fff; background: #fff; color: var(--v4-ink); }
.contact-band .btn:hover { border-color: var(--v4-ink); background: var(--v4-ink); color: #fff; }

/* Playground hub: an interactive editorial showcase, not a utility index. */
.playground-hero {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: min(680px, calc(100svh - 64px));
  border-bottom: 1px solid var(--v4-line);
  background: #fff;
}
.playground-hero__copy {
  display: flex;
  flex-direction: column;
  padding: clamp(56px, 7vw, 116px) clamp(28px, 7vw, 128px);
  background: var(--v4-orange);
  color: #fff;
}
.playground-eyebrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.72);
  color:#fff;
  font:600 11px/1 var(--mono);
  letter-spacing:.08em;
}
.playground-eyebrow strong { color:#fff; font:700 12px/1 "Zen Kaku Gothic New",sans-serif; letter-spacing:.02em; }
.playground-hero__text { margin:auto 0; padding:clamp(38px,5vh,72px) 0 12px; }
.playground-hero__copy h1 {
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(3rem, 3.9vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.075em;
}
.playground-hero__copy h1 span,
.playground-hero__copy h1 em { display: block; white-space: nowrap; }
.playground-hero__copy h1 em { color: var(--v4-ink); font-style: normal; }
.playground-hero__text > p {
  max-width: 34em;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.9;
}
.playground-hero__stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background:
    linear-gradient(130deg, transparent 0 47%, rgba(255,255,255,.6) 47% 48%, transparent 48%),
    var(--v4-canvas);
}
.playground-hero__stage::before,
.playground-hero__stage::after {
  position: absolute;
  content: "";
  border-radius: 50%;
}
.playground-hero__stage::before {
  width: 52%; aspect-ratio: 1;
  right: -13%; top: -14%;
  border: clamp(28px, 4vw, 70px) solid var(--v4-blue);
}
.playground-hero__stage::after {
  width: 44%; height: 18%;
  left: -9%; bottom: 5%;
  border-radius: 999px;
  background: var(--v4-teal);
  transform: rotate(-12deg);
}
.playground-window {
  position: absolute;
  z-index: 2;
  border: 3px solid var(--v4-ink);
  background: #fff;
  box-shadow: 14px 16px 0 var(--v4-ink);
}
.playground-window--back {
  width: 48%; height: 32%;
  left: 10%; top: 18%;
  background: var(--v4-blue);
  transform: rotate(-7deg);
}
.playground-window--back span {
  position: absolute; left: 9%; bottom: 9%;
  color: #fff; font-family: var(--mono); font-size: clamp(12px,1vw,16px); letter-spacing: .12em;
}
.playground-window--front {
  display: flex;
  align-items: flex-end;
  width: 58%; height: 48%;
  right: 9%; top: 30%;
  padding: 8% 7%;
  transform: rotate(4deg);
}
.playground-window__bar { position:absolute; inset:0 0 auto; height:34px; border-bottom:2px solid var(--v4-ink); padding:10px 12px; }
.playground-window__bar i { display:inline-block; width:9px; height:9px; margin-right:6px; border:1px solid var(--v4-ink); border-radius:50%; }
.playground-window--front strong { position:relative; z-index:2; color:var(--v4-ink); font-family:var(--display); font-size:clamp(2.6rem,4.8vw,6.4rem); line-height:.82; letter-spacing:-.06em; }
.playground-window__pulse { position:absolute; z-index:1; width:46%; aspect-ratio:1; right:2%; top:18%; border-radius:50%; background:var(--v4-orange); }
.playground-sticker { position:absolute; z-index:4; display:flex; align-items:center; justify-content:center; border:2px solid var(--v4-ink); color:var(--v4-ink); background:#fff; font:700 clamp(10px,1vw,14px)/1.05 var(--mono); text-align:center; }
.playground-sticker--one { width:110px; aspect-ratio:1; right:7%; top:9%; border-radius:50%; background:#d9ff43; transform:rotate(7deg); }
.playground-sticker--two { left:8%; bottom:10%; padding:13px 18px; background:#fff; transform:rotate(-5deg); }

.playground-index { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px); background: #fff; }
.playground-index .index-inner { max-width: 1440px; margin: 0 auto 24px; padding: 0; }
.playground-section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0;
  padding-bottom:16px;
  border-bottom:1px solid var(--v4-line);
  color:var(--v4-ink);
  font:600 11px/1 var(--mono);
  letter-spacing:.08em;
}
.playground-section-label strong { color:var(--v4-ink); font:700 12px/1 "Zen Kaku Gothic New",sans-serif; letter-spacing:.02em; }
.playground-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto;
  border: 0;
  gap: 24px;
}
.playground-card {
  display: grid;
  grid-template-rows: clamp(240px, 22vw, 340px) auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--v4-ink);
  background: #fff;
  color: var(--v4-ink);
  box-shadow: 8px 8px 0 var(--v4-ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.playground-card:hover { background:#fff; transform:translate(-3px,-3px); box-shadow:14px 14px 0 var(--v4-ink); }
.playground-card__visual { position:relative; display:block; min-width:0; overflow:hidden; border-bottom:2px solid var(--v4-ink); }
.playground-card__body { display:flex; min-width:0; flex-direction:column; padding:clamp(24px,3vw,42px); }
.playground-card__meta { display:flex; justify-content:space-between; gap:16px; color:var(--v4-muted); font:600 11px/1.2 var(--mono); letter-spacing:.06em; }
.playground-card h2 { margin:22px 0 12px; color:var(--v4-ink); font-size:clamp(1.55rem,2.3vw,2.65rem); line-height:1.25; letter-spacing:-.035em; }
.playground-card p { max-width:38em; margin:0; color:var(--v4-muted); font-size:14px; line-height:1.85; }
.playground-card__action { display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:18px; border-top:1px solid var(--v4-line); color:var(--v4-ink); font-size:13px; font-weight:900; }
.playground-card__action b { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:var(--v4-orange); color:#fff; font-size:18px; }

.playground-card__visual--motion { background:var(--v4-ink); }
.playground-card__visual--motion b { position:absolute; z-index:3; left:7%; bottom:8%; color:#fff; font-family:var(--display); font-size:clamp(3rem,6vw,6.8rem); line-height:.8; letter-spacing:-.05em; }
.motion-orbit,.motion-core { position:absolute; display:block; border-radius:50%; }
.motion-orbit { border:3px solid #fff; }
.motion-orbit--one { width:58%; aspect-ratio:1; right:-8%; top:-13%; border-color:var(--v4-orange); animation:playground-spin 9s linear infinite; }
.motion-orbit--one::after { position:absolute; width:28px; aspect-ratio:1; right:8%; bottom:15%; border-radius:50%; background:var(--v4-orange); content:""; }
.motion-orbit--two { width:32%; aspect-ratio:1; right:15%; top:20%; border-width:18px; border-color:var(--v4-blue); }
.motion-core { width:11%; aspect-ratio:1; right:26%; top:37%; background:#d9ff43; animation:playground-pulse 1.8s ease-in-out infinite; }

.playground-card__visual--banner { display:block; background:#191917; }
.playground-card__visual--banner img { display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; object-position:center; border:0; box-shadow:none; }

.playground-card__visual--sim { padding:7%; background:#dceeff; }
.playground-card__visual--sim .sim-label { display:block; color:var(--v4-ink); font:600 12px/1 var(--mono); letter-spacing:.09em; }
.playground-card__visual--sim strong { display:block; margin-top:4%; color:var(--v4-orange); font-family:var(--display); font-size:clamp(5rem,10vw,11rem); line-height:.8; letter-spacing:-.05em; }
.playground-card__visual--sim strong small { color:var(--v4-ink); font-size:.25em; }
.sim-bars { position:absolute; display:flex; align-items:end; gap:3%; right:7%; bottom:8%; width:48%; height:48%; }
.sim-bars i { flex:1; border:2px solid var(--v4-ink); background:var(--v4-blue); }
.sim-bars i:nth-child(1){height:30%}.sim-bars i:nth-child(2){height:45%}.sim-bars i:nth-child(3){height:62%}.sim-bars i:nth-child(4){height:78%}.sim-bars i:nth-child(5){height:100%;background:var(--v4-orange)}

.playground-card__visual--diagnosis { display:flex; flex-wrap:wrap; align-content:center; gap:12px; padding:8%; background:var(--v4-teal); }
.diagnosis-q { width:100%; margin-bottom:3%; color:#fff; font-size:clamp(1.5rem,3vw,3.4rem); font-weight:900; letter-spacing:-.04em; }
.playground-card__visual--diagnosis i { padding:12px 20px; border:2px solid var(--v4-ink); border-radius:999px; background:#fff; color:var(--v4-ink); font-style:normal; font-weight:900; }
.playground-card__visual--diagnosis i:nth-of-type(3) { background:#d9ff43; }
.playground-card__visual--diagnosis b { position:absolute; right:5%; bottom:6%; color:rgba(255,255,255,.7); font:700 12px/1 var(--mono); letter-spacing:.1em; }

@keyframes playground-spin { to { transform:rotate(360deg); } }
@keyframes playground-pulse { 50% { transform:scale(.72); } }

@media (prefers-reduced-motion: reduce) {
  .motion-orbit--one,.motion-core { animation:none; }
}

@media (max-width: 900px) {
  .playground-hero { grid-template-columns:1fr; min-height:0; }
  .playground-hero__copy { min-height:480px; padding:40px 28px 54px; }
  .playground-hero__text { padding:36px 0 4px; }
  .playground-hero__copy h1 { margin:0 0 24px; }
  .playground-hero__stage { min-height:440px; }
  .playground-grid { grid-template-columns:1fr; }
  .playground-card { grid-template-rows:clamp(230px,58vw,320px) auto; }
}

@media (max-width: 560px) {
  .playground-hero__copy { min-height:430px; }
  .playground-hero__copy h1 { font-size:clamp(2rem,9vw,2.4rem); letter-spacing:-.08em; }
  .playground-hero__stage { min-height:360px; }
  .playground-window--front { width:66%; height:52%; right:6%; }
  .playground-window--back { width:58%; }
  .playground-sticker--one { width:82px; }
  .playground-index { padding-inline:14px; }
  .playground-grid { gap:18px; }
  .playground-card { grid-template-rows:210px auto; box-shadow:5px 5px 0 var(--v4-ink); }
  .playground-card__body { padding:24px 20px; }
  .playground-card__meta { font-size:9px; }
}

/* First view is the pickup slideshow and never exceeds one viewport.
   高さは右カラムの画像（1200:630）が収まりきる寸法に合わせる。固定高だと
   左のオレンジだけが下に伸び、右の画像の上下に白い余りが出ていた（2026-09-02 指摘）。
   スライドは絶対配置で親の高さを作れないので、スライド領域に aspect-ratio を持たせ、
   画像の比率と右カラムの幅比（58%）から高さを決める。 */
.hero-slider {
  position: relative;
  width: min(100%, 1774px);
  height: auto;
  padding-bottom: 66px; /* 下部コントロールの高さ */
  margin: 0 auto;
  overflow: hidden;
  background: var(--v4-orange);
}
/* 高さは「右画像がぴったり収まる高さ」と「左の文章が必要とする高さ」の大きいほうで決める。
   58vw が右カラムの幅、1.905 が画像の縦横比（1200:630）。
   - 下限 430px … これを切ると左のピックアップ文とCTAが overflow:hidden で切れる
                  （2026-09-02 に aspect-ratio だけで組んで1280pxで実際に切れた）
   - 上限 560px … v3仕様「PCは825px以内」に対し、コントロール66pxを足しても余裕を残す
   固定760pxだった頃は右画像の上下に大きな白い余りが出ていた。 */
.hero-slider__slides {
  position: relative;
  height: clamp(390px, calc(58vw / 1.905), 560px);
}
.hero-slide.pickup-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity .42s ease, transform .42s ease;
}
.hero-slide.pickup-slide.is-active {
  position: absolute;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.hero-slide__link {
  display: grid;
  grid-template-columns: minmax(440px, 42%) minmax(0, 58%);
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.hero-slide__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 64px);
  color: #fff;
  background: var(--v4-orange);
}
.hero-slider__brand p {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}
.hero-slider__brand h1,
.hero-slider__title-clone {
  margin: 0;
  font-size: clamp(2.9rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.07em;
}
.hero-slider__brand > span {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero-slide__story { max-width: 34rem; margin-top: 30px; }
.hero-slide__label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 13px;
  padding-top: 13px;
  border-top: 2px solid rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 900;
}
.hero-slide__label b { font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.hero-slide__story h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 2.45vw, 2.75rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.05em;
  word-break: auto-phrase;
  text-wrap: balance;
}
.hero-slide__story > p:not(.hero-slide__label) {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1.75;
}
.hero-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 900;
}
.hero-slide__cta b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: #fff;
  color: var(--v4-ink);
  font-size: 20px;
}
/* 左カラムの圧縮（2026-09-02）。
   依頼は「右画像の高さに左を合わせて縮める」。器を伸ばすと右に白い余りが戻るので、
   左の文字組と余白を詰めて、画像比率から決まる高さに収める。
   1280pxで文章とCTAが overflow:hidden に切られていたのを、ここで解消する。 */
.hero-slide__copy {
  padding: clamp(20px, 2.4vw, 40px) clamp(24px, 2.8vw, 48px);
}
.hero-slider__brand p { margin: 0 0 8px; }
.hero-slider__brand h1,
.hero-slider__title-clone {
  font-size: clamp(2.1rem, 2.9vw, 3.1rem);
  line-height: 1.06;
}
.hero-slider__brand > span { margin-top: 10px; font-size: 13px; }
.hero-slide__story { margin-top: 16px; }
.hero-slide__label { margin: 0 0 8px; padding-top: 9px; }
.hero-slide__story h2 {
  font-size: clamp(1.4rem, 1.85vw, 2.05rem);
  line-height: 1.22;
}
.hero-slide__story > p:not(.hero-slide__label) {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hero-slide__cta { margin-top: 14px; }

.hero-slide__visual {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}
.hero-slide__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-slider__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 66px 1fr 66px;
  height: 66px;
  border-block: 1px solid rgba(255, 255, 255, .78);
  color: #fff;
  background: var(--v4-ink);
}
.hero-slider__arrow,
.hero-slider__dot {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.hero-slider__arrow { font-size: 20px; }
.hero-slider__arrow:hover { background: var(--v4-blue); }
.hero-slider__dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-slider__dot {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-inline: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .58);
  text-align: left;
}
.hero-slider__dot span { font: 600 10px/1 "IBM Plex Mono", monospace; }
.hero-slider__dot b { overflow: hidden; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hero-slider__dot.is-active { color: #fff; background: var(--v4-orange); }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 40px;
}
.section-heading > p:first-child {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--v4-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.section-heading > p:first-child span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  place-items: center;
  color: #fff;
  background: var(--v4-orange);
  font: 700 10px/1 "IBM Plex Mono", monospace;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.065em;
  word-break: auto-phrase;
}
.section-heading > a {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--v4-ink);
  color: var(--v4-ink);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

/* One-color metrics plane: data is the decoration. */
.editorial-metrics {
  max-width: none;
  margin: 0;
  padding: clamp(72px, 8vw, 120px) max(var(--gutter), calc((100vw - var(--v4-shell)) / 2));
  color: #fff;
  background: var(--v4-ink);
}
.section-heading--inverse > p:first-child { color: rgba(255, 255, 255, .64); }
.section-heading--inverse h2 { color: #fff; }
.editorial-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.editorial-metrics__grid article {
  min-width: 0;
  padding: clamp(26px, 3vw, 44px);
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.editorial-metrics__grid article:first-child { border-left: 0; }
.editorial-metrics__grid p { margin: 0; font-size: 13px; font-weight: 900; }
.editorial-metrics__grid strong {
  display: block;
  /* 2026-09-16: 320px で 16vw=51.2px になり「3,224」が2行に折れていた。
     数値は途中で折らない。サイズは下の 380px 以下の指定で詰める。 */
  white-space: nowrap;
  margin: 16px 0 14px;
  color: #fff;
  font: 600 clamp(3rem, 5vw, 5.6rem)/.9 "Oswald", sans-serif;
  letter-spacing: -.04em;
}
.editorial-metrics__grid em { margin-left: 5px; font: 700 15px/1 "Zen Kaku Gothic New", sans-serif; }
.editorial-metrics__grid small { color: rgba(255, 255, 255, .55); font-size: 10px; }
.editorial-metrics__note {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  line-height: 1.8;
}
.editorial-metrics__note a { color: #fff; text-underline-offset: 3px; }

/* Visual cards replace the old dense ledger list. */
.latest-grid {
  max-width: var(--v4-shell);
  margin: 0 auto;
  padding: clamp(80px, 9vw, 132px) var(--gutter);
}
.latest-grid .ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: start;
}
.latest-grid .ledger > li { position: relative; min-width: 0; border: 0; }
.latest-grid .ledger-link {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v4-line);
  color: var(--v4-ink);
  background: var(--v4-surface);
  text-decoration: none;
  transform: none;
  transition: transform .2s ease, border-color .2s ease;
}
.latest-grid .ledger-link:hover {
  border-color: var(--v4-ink);
  background: var(--v4-surface);
  transform: translateY(-5px);
}
.latest-grid .ledger-num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: var(--v4-ink);
  font: 700 10px/1 "IBM Plex Mono", monospace;
}
.latest-grid .ledger-thumb {
  order: 0;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--v4-line);
  background: var(--v4-canvas);
  aspect-ratio: 1200 / 630;
}
.latest-grid .ledger-thumb img {
  width: 100%;
  height: 100%;
  filter: none;
  object-fit: cover;
  transition: transform .35s ease;
}
.latest-grid .ledger-link:hover .ledger-thumb img { transform: scale(1.025); }
.latest-grid .ledger-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 12px;
}
.latest-grid .ledger-tag {
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  color: var(--v4-orange);
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}
.latest-grid .ledger-title {
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.035em;
  /* 日本語を語の途中で折らない。「どっちを使う？」が「う？」だけ次行に
     落ちる崩れが出ていた（2026-09-02 指摘）。FVの見出しと同じ指定に揃える。 */
  word-break: auto-phrase;
  text-wrap: pretty;
}
.latest-grid .ledger-title span { border: 0; }
.latest-grid .ledger-summary {
  display: -webkit-box;
  margin-top: 14px;
  overflow: hidden;
  color: var(--v4-muted);
  font-size: 12px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.latest-grid .ledger-date {
  order: 3;
  padding: 0 24px 22px;
  color: var(--v4-muted);
  font: 500 10px/1 "IBM Plex Mono", monospace;
}
.latest-grid .ledger > li:first-child { grid-column: span 2; }
.latest-grid .ledger > li:first-child .ledger-link {
  display: grid;
  grid-template-columns: 57% 43%;
  grid-template-rows: auto auto;
  min-height: 0;
}
.latest-grid .ledger > li:first-child .ledger-thumb { grid-row: 1 / 3; aspect-ratio: 1200 / 630; align-self: center; }
.latest-grid .ledger > li:first-child .ledger-content { grid-column: 2; grid-row: 1; justify-content: flex-start; padding: 26px 28px 10px; }
.latest-grid .ledger > li:first-child .ledger-date { grid-column: 2; grid-row: 2; padding: 0 28px 22px; }
.latest-grid .ledger > li:first-child .ledger-title { font-size: clamp(1.45rem, 2.2vw, 2.3rem); line-height: 1.3; }

.making {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 7vw, 110px);
  padding: clamp(84px, 9vw, 140px) max(var(--gutter), calc((100vw - var(--v4-shell)) / 2));
  border-top: 1px solid var(--v4-line);
  background: var(--v4-surface);
}
.section-heading--compact { display: block; margin: 0; }
.section-heading--compact > p:first-child { margin-bottom: 28px; }
.section-heading--compact h2 { font-size: clamp(2rem, 3.5vw, 3.6rem); }
.section-heading__lead { margin: 30px 0 0; color: var(--v4-muted); font-size: 14px; line-height: 1.9; }
.making__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--v4-ink);
}
.making__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(120px, .55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 88px;
  border-bottom: 1px solid var(--v4-line);
}
.making__steps span { color: var(--v4-orange); font: 700 11px/1 "IBM Plex Mono", monospace; }
.making__steps strong { font-size: 17px; }
.making__steps p { margin: 0; color: var(--v4-muted); font-size: 12px; line-height: 1.6; }

.top-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  align-items: end;
  padding: clamp(72px, 8vw, 120px) max(var(--gutter), calc((100vw - var(--v4-shell)) / 2));
  color: #fff;
  background: var(--v4-orange);
}
.top-service__eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.top-service h2 {
  max-width: 18em;
  margin: 0;
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.06em;
}
.top-service div > p:last-child { max-width: 50em; margin: 28px 0 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.85; }
.top-service__cta {
  display: flex;
  min-width: 260px;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 24px 0 30px;
  color: #fff;
  background: var(--v4-ink);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}
.top-service__cta span { font-size: 24px; }
.top-service__cta:hover { color: var(--v4-ink); background: #fff; }

/* Article pages: calm body, evidence-first header, one accent. */
.article { color: var(--v4-ink); background: var(--v4-canvas); }
.article-header {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v4-line);
  background: var(--v4-canvas);
}
.article-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 45%);
  max-width: var(--v4-shell);
  gap: clamp(42px, 6vw, 96px);
  align-items: center;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 106px) var(--gutter);
}
.article-header__copy h1 {
  max-width: 14em;
  margin-top: 28px;
  color: var(--v4-ink);
  font-size: clamp(2.4rem, 4.7vw, 4.8rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.065em;
  word-break: auto-phrase;
  text-wrap: balance;
}
.article-header__lead { max-width: 46em; color: var(--v4-muted); font-size: 16px; line-height: 1.9; }
.article-meta-row { color: var(--v4-muted); font-size: 11px; }
.article-meta-row .tag-box { border: 0; color: #fff; background: var(--v4-orange); }
.article-default-kv {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--v4-line);
  background: #fff;
  box-shadow: none;
  transform: none;
}
.article-default-kv img { display: block; width: 100%; height: auto; filter: none; aspect-ratio: 1200 / 630; object-fit: cover; }
.article-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
  background: var(--v4-canvas);
}
.reader-brief {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(54px, 7vw, 90px) var(--gutter) 0;
  border: 0;
  background: transparent !important;
}
.reader-brief__summary {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--v4-line);
  border-top: 6px solid var(--v4-orange);
  background: #fff;
}
.reader-brief__eyebrow { color: var(--v4-orange); font-size: 11px; font-weight: 900; }
.reader-brief h2 { color: var(--v4-ink); font-size: clamp(1.7rem, 3vw, 2.7rem); }
.reader-brief__lead { color: var(--v4-ink); font-size: 17px; line-height: 1.9; }
.reader-brief__points li::marker { color: var(--v4-orange); }
.reader-brief__meta { color: var(--v4-muted); }
.article-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(230px, 280px);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 96px) var(--gutter) 120px;
}
.article-toc-rail {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 82px;
  max-height: calc(100svh - 102px);
  overflow: auto;
}
.article-toc {
  padding: 24px;
  border: 1px solid var(--v4-line);
  border-top: 5px solid var(--v4-orange);
  background: #fff;
}
.article-toc__title { color: var(--v4-ink); font-size: 13px; font-weight: 900; }
.article-toc li::before { color: var(--v4-orange); }
.article-toc a { color: var(--v4-muted); font-size: 12px; line-height: 1.65; }
.article-toc a:hover { color: var(--v4-orange); }
.article-body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid var(--v4-line);
  color: #24333b;
  background: #fff;
  font-size: 17px;
  line-height: 1.9;
}
.article-body > p { margin: 1.4em 0; }
/* 2026-09-14: 全ての strong にマーカーが乗り、1画面4〜6箇所で強調が機能していなかった。
   マーカーは段落直下の strong のみに限定し、リスト内は太字だけにする。 */
.article-body > p strong {
  padding-inline: .08em;
  background: linear-gradient(transparent 62%, rgba(232, 78, 15, .16) 62%);
}
.article-body li strong { background: none; }
.article-body mark {
  padding: .08em .24em;
  color: var(--v4-ink);
  background: rgba(21, 144, 154, .18);
}
.article-body > h2 {
  margin: 5.5rem 0 1.6rem;
  padding: 1.35rem 0 0;
  border: 0;
  border-top: 1px solid var(--v4-line);
  color: var(--v4-ink);
  background: transparent;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: -.045em;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.article-body > h2::before,
.article--case-file .article-body > h2::before,
.article--field-notes .article-body > h2::before,
.article--decision-guide .article-body > h2::before,
.article--lab-notes .article-body > h2::before,
.article--news-desk .article-body > h2::before,
.article--conversation .article-body > h2::before {
  display: block;
  width: 52px;
  height: 7px;
  margin: -1.65rem 0 1.4rem;
  padding: 0;
  color: transparent;
  background: var(--v4-orange);
  content: "";
}
.article-body > h3 { margin: 3.3rem 0 1rem; color: var(--v4-ink); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.5; }
.article-body img,
.article-body video,
.article-body iframe { display: block; max-width: 100%; height: auto; margin-inline: auto; }
/* 2026-09-14: H2が「確認できた / 3社」のように不自然に折れていた */
.article-body h2, .reader-brief h2, .article-header__copy h1 {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.article-body figure { max-width: 100%; margin: 2.8rem 0; }
.article-body figure img,
.article--case-file .article-picture img,
.article--case-file .article-visual > img,
.article--case-file .article-video > video {
  border: 1px solid var(--v4-line);
  box-shadow: none;
}
.article-body figcaption { color: var(--v4-muted); font-size: 12px; line-height: 1.7; }
.article-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 1.7rem;
  border: 0;
  border-left: 6px solid var(--v4-orange);
  color: var(--v4-ink);
  background: var(--v4-pale);
}
.article-body table {
  display: block;
  width: 100%;
  min-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--v4-line);
  background: #fff;
  white-space: normal;
}
.article-body table th,
.article-body table td { padding: 14px 16px; }
.article-body th { color: #fff; background: var(--v4-ink) !important; }
.article-body td { background: #fff; }
.article-body a { color: var(--v4-orange); text-underline-offset: 3px; }
.faq-box { margin-top: 5rem; border-top: 3px solid var(--v4-ink); }
.faq-box__heading { color: var(--v4-ink); font-size: 1.6rem; font-weight: 900; }
.faq-item { border-bottom: 1px solid var(--v4-line); }

/* 2026-09-15: 記事中CTAが細い罫線2本＋小さいグレー文字で、CTAに見えていなかった。
   面を持たせてボタン化する。下部CTA（ネイビー面）とは階層を分け、淡色面＋オレンジのボタンにする。 */
.article-body .cta-inline {
  display: block;
  margin: 3.4rem 0;
  padding: clamp(22px, 3vw, 32px);
  border: 0;
  border-left: 6px solid var(--v4-accent, #E84E0F);
  background: var(--v4-pale, #E7F1F3);
}
.article-body .cta-inline__label {
  display: inline-block;
  margin-bottom: .6rem;
  padding: 3px 10px;
  color: #fff;
  background: var(--v4-accent, #E84E0F);
  font-size: 11px;
  letter-spacing: .04em;
}
.article-body .cta-inline__text {
  margin: 0 0 1rem;
  color: var(--v4-ink, #062D42);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.7;
}
.article-body .cta-inline__act { margin: 0; }
.article-body .cta-inline__act a {
  display: inline-block;
  padding: 13px 26px;
  border: 0;
  color: #fff;
  background: var(--v4-ink, #062D42);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.article-body .cta-inline__act a:hover { background: var(--v4-accent, #E84E0F); }

.cta-box {
  margin-top: 5rem;
  padding: clamp(30px, 5vw, 56px);
  border: 0;
  color: #fff;
  background: var(--v4-ink);
}
.cta-box .tick { display: none; }
.cta-box__menu.tag-box { padding: 0; border: 0; color: #fff; background: transparent; font-size: 11px; }
.cta-box h3 { max-width: 22em; color: #fff; font-size: clamp(1.55rem, 3vw, 2.6rem); line-height: 1.35; }
.cta-box > p { color: rgba(255,255,255,.72); }
.cta-box .btn {
  border: 0;
  color: #fff;
  background: var(--v4-orange);
  box-shadow: none;
}
.cta-box .btn:hover { color: var(--v4-ink); background: #fff; }
.cta-box__light { display: none; }

.site-footer { color: #fff; background: var(--v4-ink); }
.site-footer a { color: rgba(255,255,255,.72); }

/* Category archives use the same visual evidence cards as the top page. */
.index {
  padding: 0 var(--gutter) clamp(84px, 9vw, 132px);
  background: var(--v4-canvas);
}
.index .index-inner { max-width: var(--v4-shell); padding-inline: 0; }
.index > .ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px);
  max-width: var(--v4-shell);
  border: 0;
}
.index > .ledger > li { position: relative; min-width: 0; border: 0; }
.index > .ledger .ledger-link {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v4-line);
  background: #fff;
  transform: none;
}
.index > .ledger .ledger-link:hover { border-color: var(--v4-ink); background: #fff; transform: translateY(-4px); }
.index > .ledger .ledger-num { position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--v4-ink); font-size: 10px; }
.index > .ledger .ledger-thumb { order: 0; width: 100%; height: auto; margin: 0; border: 0; border-bottom: 1px solid var(--v4-line); aspect-ratio: 1200 / 630; }
.index > .ledger .ledger-thumb img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.index > .ledger .ledger-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 12px; }
.index > .ledger .ledger-tag { margin-bottom: 14px; padding: 0; border: 0; color: var(--v4-orange); background: transparent; font-size: 10px; }
.index > .ledger .ledger-title { font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.45; }
.index > .ledger .ledger-title span { border: 0; }
.index > .ledger .ledger-summary { display: -webkit-box; margin-top: 14px; overflow: hidden; color: var(--v4-muted); font-size: 12px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.index > .ledger .ledger-date { order: 3; padding: 0 24px 22px; color: var(--v4-muted); font-size: 10px; }

@media (min-width: 761px) {
  .article-body table { display: table; table-layout: auto; border-collapse: collapse; }
}

@media (max-width: 1080px) {
  .hero-slide__link { grid-template-columns: minmax(360px, 45%) minmax(0, 55%); }
  .hero-slider__brand h1,
  .hero-slider__title-clone { font-size: clamp(2.6rem, 5.8vw, 4rem); }
  .hero-slide__story > p:not(.hero-slide__label) { display: none; }
  .latest-grid .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest-grid .ledger > li:first-child { grid-column: 1 / -1; }
  .index > .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .making { grid-template-columns: 1fr; }
  .top-service { grid-template-columns: 1fr; align-items: start; }
  .top-service__cta { width: min(100%, 360px); }
  .article-header__grid { grid-template-columns: 1fr; }
  .article-default-kv { max-width: 800px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .site-header,
  .site-header__nav,
  .site-header__nav .nav-inner { min-height: 56px; }
  .site-header__nav .main-nav a { min-height: 56px; }

  .hero-slider { height: calc(100svh - 56px); min-height: 0; }
  .hero-slider__slides { height: calc(100% - 54px); }
  .hero-slide__link { grid-template-columns: 1fr; grid-template-rows: 62% 38%; }
  .hero-slide__copy { grid-row: 1; padding: clamp(20px, 6vw, 30px) 22px; }
  .hero-slide__visual { grid-row: 2; }
  .hero-slider__brand p { margin-bottom: 8px; font-size: 10px; }
  .hero-slider__brand h1,
  .hero-slider__title-clone { font-size: clamp(2.25rem, 11vw, 3rem); line-height: 1.02; }
  .hero-slider__brand > span { display: none; }
  .hero-slide__story { margin-top: 12px; }
  .hero-slide__label { margin-bottom: 8px; padding-top: 8px; font-size: 10px; }
  .hero-slide__story h2 { font-size: clamp(1.35rem, 6.2vw, 1.8rem); line-height: 1.25; }
  .hero-slide__cta { margin-top: 10px; }
  .hero-slide__cta b { width: 30px; height: 30px; font-size: 16px; }
  .hero-slider__controls { grid-template-columns: 52px 1fr 52px; height: 54px; }
  .hero-slider__dot { justify-content: center; padding: 6px; }
  .hero-slider__dot b { display: none; }

  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading > p:first-child { margin-bottom: 22px; }
  .section-heading > a { display: inline-block; margin-top: 22px; }
  .section-heading h2 { font-size: clamp(2.2rem, 12vw, 3.4rem); }

  .editorial-metrics { padding-block: 72px; }
  .editorial-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-metrics__grid article { min-height: 160px; padding: 24px 18px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .editorial-metrics__grid article:nth-child(odd) { border-left: 0; }
  .editorial-metrics__grid strong { font-size: clamp(3rem, 16vw, 4.6rem); }
}

@media (max-width: 380px) {
  /* 2026-09-16: 4桁＋カンマが2カラムのセル幅に収まらない。 */
  .editorial-metrics__grid strong { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .editorial-metrics__grid article { padding: 22px 14px; }
}

/* 2026-09-21: 上の 380px ブロックが、09-16 の挿入時に 760px ブロックを分断し、以降のモバイル用ルールを
   飲み込んでいた。381〜760px の端末（ほぼ全てのスマホ）で本文余白・h1/h2 サイズ・一覧の1カラム化が
   効かず、390px で本文幅が272pxまで狭まっていた。760px ブロックとして開き直す。 */
@media (max-width: 760px) {
  .latest-grid { padding-block: 78px; }
  .latest-grid .ledger { grid-template-columns: 1fr; }
  .latest-grid .ledger > li:first-child { grid-column: auto; }
  .latest-grid .ledger > li:first-child .ledger-link { display: flex; }
  .latest-grid .ledger > li:first-child .ledger-thumb { aspect-ratio: 1200 / 630; }
  .latest-grid .ledger > li:first-child .ledger-content { padding: 24px 24px 12px; }
  .latest-grid .ledger > li:first-child .ledger-date { padding-inline: 24px; }
  .latest-grid .ledger > li:first-child .ledger-title { font-size: 1.35rem; }

  .making { padding-block: 78px; }
  .making__steps li { grid-template-columns: 34px 1fr; gap: 14px; padding: 17px 0; }
  .making__steps p { grid-column: 2; }
  .top-service { padding-block: 74px; }
  .top-service h2 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .top-service__cta { min-width: 0; width: 100%; }

  .article-header__grid { padding-block: 42px 54px; }
  .article-header__copy h1 { margin-top: 22px; font-size: clamp(2.25rem, 10.8vw, 3.4rem); line-height: 1.18; }
  .article-header__lead { font-size: 15px; }
  .article-reading-layout { display: block; padding-top: 42px; padding-bottom: 80px; }
  .article-toc-rail { position: static; max-height: none; margin-bottom: 44px; }
  .article-body { font-size: 16px; line-height: 1.88; }
  .article-body > h2 { margin-top: 4.5rem; font-size: clamp(1.7rem, 8vw, 2.25rem); }
  .reader-brief { padding-top: 38px; }
  .reader-brief__summary { padding: 26px 22px; }
  .article-body { padding: 28px 22px; }
  .index { padding-inline: var(--gutter); }
  .index > .ledger { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.pickup-slide,
  .latest-grid .ledger-link,
  .latest-grid .ledger-thumb img { transition: none; }
}

/* スクロールで要素を立ち上げる（2026-09-02）。v3 は「パキッとした」なので、
   ふわっと長く動かさず、短く・少しだけ上げる。動きを嫌う設定の人には出さない。 */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .42s cubic-bezier(.22, .8, .3, 1),
                transform .42s cubic-bezier(.22, .8, .3, 1);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  /* 数値カードは左から順に。間隔を詰めて、待たされる感じを出さない */
  .editorial-metrics__grid > article[data-reveal]:nth-child(2) { transition-delay: .07s; }
  .editorial-metrics__grid > article[data-reveal]:nth-child(3) { transition-delay: .14s; }
  .editorial-metrics__grid > article[data-reveal]:nth-child(4) { transition-delay: .21s; }
}
/* 数値そのものは、カウント中に少しだけ詰まって見えるよう字送りを締める */
.editorial-metrics__grid strong { font-variant-numeric: tabular-nums; }

/* 相談CTAの帯（2026-09-02）。オレンジの無地だけで面積を取っていて目立たなかったので、
   左に v3 のブロック図像を敷き、右のオレンジ面に文字を置く。
   画像は装飾なので alt を持たない背景として扱い、文字は必ずHTML側に残す。 */
.contact-band {
  position: relative;
  overflow: hidden;
  background-color: var(--v4-orange);
  background-image: url("/assets/img/brand/cta-band-v3-20260902.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
.contact-band .shell { position: relative; z-index: 2; }
.contact-band__inner { min-height: clamp(200px, 20vw, 280px); }
/* 文字が図像に重ならないよう、左半分を空ける */
.contact-band__inner > div { max-width: 46ch; margin-left: auto; }
.contact-band__inner > .btn { flex: 0 0 auto; }
@media (max-width: 900px) {
  /* 幅が狭いと図像と文字が重なるので、図像は右上の小さなアクセントに退避させる */
  .contact-band {
    background-position: right -18% top -12%;
    background-size: auto 62%;
  }
  .contact-band__inner > div { max-width: none; margin-left: 0; }
}

/* トップの相談CTA（2026-09-02 再設計）。
   オレンジの無地に文字を置くだけで「論外」との指摘。見出しごと画像で作り、
   ボタンだけを画像の上に重ねる。HTML の見出しは sr-only で残し、SEO と読み上げを落とさない。 */
.top-service {
  position: relative;
  display: block;
  padding: 0;
  background: var(--v4-orange);
}
.top-service__art {
  display: block;
  width: 100%;
  height: auto;
}
.top-service__cta {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 72px);
  bottom: clamp(20px, 4vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 1.6vw, 24px) clamp(24px, 2.6vw, 40px);
  border: 2px solid var(--v4-ink);
  background: var(--v4-ink);
  color: #fff;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 900;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.top-service__cta:hover {
  background: #fff;
  color: var(--v4-ink);
  transform: translateY(-2px);
}
.top-service__cta span { font-size: 1.4em; }

@media (max-width: 760px) {
  /* 画像が縮むとボタンが重なって読めない。画像の下にオレンジの帯で置く。 */
  .top-service { padding-bottom: clamp(64px, 18vw, 96px); }
  .top-service__cta {
    right: auto;
    bottom: clamp(16px, 5vw, 28px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--gutter));
    justify-content: center;
  }
  .top-service__cta:hover { transform: translateX(-50%); }
}

/* ==========================================================================
   2026-09-02 指摘対応
   ========================================================================== */

/* 結論ボックスを本文＋目次の2カラム幅に揃える。
   .article-reading-layout が 1260px なのに .reader-brief が 1180px で、左右がずれていた。 */
.reader-brief { max-width: 1260px; }

/* FV左カラムが space-between で間延びしていた。中央寄せ＋一定の間隔にする。 */
.hero-slide__copy {
  justify-content: center;
  gap: clamp(12px, 2vh, 30px);
}

/* 大きい1枚目カードの画像が枠からはみ出していた。
   align-self:center + aspect-ratio だと行より高くなった分が外へ出る。 */
/* height:100% は aspect-ratio を上書きしてしまい、横が切れて「Claude」が「laude」に
   なっていた（2026-09-02）。比率を保ったまま上端に揃える。 */
.latest-grid .ledger > li:first-child .ledger-thumb {
  align-self: stretch;
  height: 100%;
  aspect-ratio: auto;
}
.latest-grid .ledger > li:first-child .ledger-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コードブロックのハイライト。style.css の .article-body code に地色が付いており、
   pre の中の code にも乗って、暗いコードブロックの上にベージュ面が出ていた。 */
.article-body pre {
  border: 1px solid var(--v4-ink);
  background: var(--v4-ink);
  color: #fff;
}
.article-body pre code {
  padding: 0;
  border: 0;
  background: transparent !important;
  color: inherit;
  font-size: inherit;
}
.article-body :not(pre) > code {
  padding: 2px 6px;
  border: 1px solid var(--v4-line);
  background: var(--v4-pale) !important;
  color: var(--v4-ink);
}

/* 旧トンマナのクリーム地が残っていた箇所（v3 はクリームを使わない） */
.article-body table { border-color: var(--v4-line); background: #fff; }
.article-body blockquote { background: var(--v4-pale); }

/* 本文中の図版が枠から出ないようにする */
.article-body img,
.article-body svg,
.article-body video,
.article-body iframe { max-width: 100%; height: auto; }
.article-body figure,
.article-body .callout { max-width: 100%; overflow-x: auto; }

/* 2026-09-15: 図解が本文カラム（約712px）に対して880px実寸で入っており、
   デスクトップでも右端のラベルが切れていた。図だけカラムから左右へはみ出させ、
   880pxを確保する。収まらない画面幅では等比縮小する（SVGなので劣化しない）。 */
.article-body p:has(> img[width="880"]),
.article-body figure:has(> img[width="880"]) {
  width: min(880px, 100%);
  max-width: none;
  margin-inline: calc((100% - min(880px, 100%)) / 2);
}
/* 2026-09-16: 上のはみ出し指定と 880px 固定が SP で本文段落にも波及し、
   本文テキストが右端で切れていた。SPでは本文をカラム幅に戻す。 */
@media (max-width: 760px) {
  .article-body p:has(> img[width="880"]),
  .article-body figure:has(> img[width="880"]) {
    width: 100%;
    margin-inline: 0;
  }
  .article-body > p,
  .article-body > ul,
  .article-body > ol,
  .article-body > h2,
  .article-body > h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 1100px) {
  .article-body p:has(> img[width="880"]),
  .article-body figure:has(> img[width="880"]) {
    width: 880px;
    margin-inline: calc(50% - 440px);
  }
}
.article-body img[width="880"] { width: 100%; height: auto; }

/* 料金表：事業者名・プラン名が1文字ずつ折れていた（2026-09-15） */
/* 2026-09-15: 料金表が本文カラム幅（約712px）に収まらず、日本語が1文字ずつ折れていた。
   図解と同じく、表もカラムから左右へはみ出させて幅を確保する。 */
.article-body table { table-layout: auto; }
.article-body table th { white-space: nowrap; }
.article-body table td:first-child,
.article-body table td:nth-child(2) { white-space: nowrap; }
@media (min-width: 1100px) {
  .article-body > table,
  .article-body > .table-scroll {
    width: 880px;
    max-width: none;
    margin-inline: calc(50% - 440px);
  }
}

/* 2026-09-14: モバイルで図の数値が見えない問題の対応。
   図解SVGは880px実寸で、390pxビューポートでは44%しか映らず、
   その44%がラベル列のため「棒もデータも画面外・スクロールの合図なし」になっていた。
   横スクロールは維持しつつ、(1)スクロールできることを示す (2)右端をフェードさせる。 */
.article-body figure.is-scrollable,
.article-body .fig-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 760px) {
  .article-body img[width="880"] {
    max-width: none;
  }
  .article-body p > img[width="880"] {
    display: block;
  }
  /* 画像を内包する段落を横スクロール領域にし、スクロール可能であることを明示する */
  .article-body p:has(> img[width="880"]) {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .4rem;
  }
  .article-body p:has(> img[width="880"])::after {
    content: "→ 横スクロールで数値が見えます";
    display: block;
    position: sticky;
    left: 0;
    margin-top: .5rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--v4-accent, #E84E0F);
    letter-spacing: .02em;
  }
  /* 2026-09-15: ここに content:none を書いており、コメント（合図を出す）と実装が真逆だった。
     表は display:block + overflow-x:auto にしているため ::after が引っかからない。
     ラッパで包まず、表の直後に合図を出す形にする。 */
}

@media (max-width: 760px) {
  /* 表の横スクロール合図（2026-09-15）。320pxで可視16%、合図ゼロだったため追加。
     table を block 化してスクロールさせ、直後に擬似要素でヒントを出す。 */
  .article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: .2rem;
  }
  .article-body table::-webkit-scrollbar { height: 6px; }
  /* 2026-09-16: 表は build.py が <div class="table-scroll"> で包むため、
     `.article-body > table + p` は構造上一致しない（3回目の失敗）。
     ラッパそのものに ::after を付ける。ラッパは overflow していないので描画される。 */
  .article-body .table-scroll {
    position: relative;
    overflow: visible;
    margin-bottom: 1.6rem;
  }
  .article-body .table-scroll > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
  }
  .article-body .table-scroll::after {
    content: "→ 表は横スクロールできます";
    display: block;
    margin-top: .5rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--v4-accent, #E84E0F);
    letter-spacing: .02em;
  }
}

@media (max-width: 760px) {
  /* 表は折り返さず横スクロールにする。日本語が1文字ずつ折れて読めなくなっていた。 */
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .article-body table th,
  .article-body table td { white-space: nowrap; }

  /* SPのカードサムネ。上下に余白が入り、比率も崩れていた。 */
  .latest-grid .ledger-thumb,
  .index > .ledger .ledger-thumb {
    align-self: stretch;
    height: auto;
    margin: 0;
    aspect-ratio: 1200 / 630;
  }
  .latest-grid .ledger > li:first-child .ledger-thumb { grid-row: auto; }
  .latest-grid .ledger-thumb img,
  .index > .ledger .ledger-thumb img { height: 100%; object-fit: cover; }
}

/* カードは並び順に沿って少しずつ遅らせる（2026-09-02「動きが数字だけ」への対応）。
   1枚ずつ間隔を空けすぎると待たされるので 60ms 刻みに留める。 */
@media (prefers-reduced-motion: no-preference) {
  .latest-grid .ledger > li[data-reveal]:nth-child(2) { transition-delay: .06s; }
  .latest-grid .ledger > li[data-reveal]:nth-child(3) { transition-delay: .12s; }
  .latest-grid .ledger > li[data-reveal]:nth-child(4) { transition-delay: .18s; }
  .latest-grid .ledger > li[data-reveal]:nth-child(5) { transition-delay: .24s; }
  .latest-grid .ledger > li[data-reveal]:nth-child(6) { transition-delay: .3s; }
  .latest-grid .ledger > li[data-reveal]:nth-child(7) { transition-delay: .36s; }

  /* 見出しは下線が引かれてから文字が立つ */
  .section-heading[data-reveal] { transform: translateY(10px); }

  /* カードのホバーを少しだけ持ち上げる（クリックできることを body で伝える） */
  .latest-grid .ledger-link { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
  .latest-grid .ledger-link:hover { transform: translateY(-4px); box-shadow: 0 10px 0 -4px var(--v4-ink); }
}

/* 1枚目カードの連番バッジがKVの左上コピーに重なっていた（2026-09-02）。大きいカードだけ右上へ。 */
.latest-grid .ledger > li:first-child .ledger-num { right: 12px; left: auto; }

/* ==========================================================================
   FV 確定版（2026-09-02）
   このファイルは同じルールセットを2箇所に持っており、前半を直しても後半の複製に
   打ち消される。ここは最終行なので、ここに書いたものが必ず勝つ。
   ========================================================================== */
.hero-slider {
  height: auto;
  max-height: none;
  padding-bottom: 66px;
  overflow: hidden;
}
.hero-slider__slides {
  height: clamp(390px, calc(58vw / 1.905), 560px);
  aspect-ratio: auto;
  max-height: none;
}
.hero-slide__copy { justify-content: center; gap: clamp(12px, 2vh, 30px); }

@media (max-width: 760px) {
  /* SPは1カラム。高さを固定すると画像が消えたり文字が画面外へ出るので、
     アクティブなスライドだけを通常フローに置いて中身に高さを作らせる。 */
  .hero-slider { height: auto; padding-bottom: 54px; }
  .hero-slider__slides { height: auto; }
  /* .hero-slide.pickup-slide.is-active は3クラスで詳細度が高く、
     2クラスの指定では position:absolute に負ける。同じ強さで書く。 */
  .hero-slide.pickup-slide.is-active {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1;
  }
  .hero-slide.pickup-slide:not(.is-active) { display: none; }
  .hero-slide__link {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  /* KVを上、文字を下にする */
  .hero-slide__visual {
    order: -1;
    height: auto;
    aspect-ratio: 1200 / 630;
  }
  .hero-slide__visual img { height: 100%; object-fit: cover; }
  .hero-slide__copy {
    grid-row: auto;
    justify-content: flex-start;
    padding: 24px 22px 30px;
  }
  .hero-slide__story h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); }
}

@media (max-width: 760px) {
  /* KVを上、文字を下。grid の明示配置が order より強いので、行番号で指定する。 */
  .hero-slide__visual { grid-row: 1; order: 0; }
  .hero-slide__copy { grid-row: 2; }

  /* 2026-09-02: 横はみ出しを疑って overflow-x:clip を入れたが、Playwright で
     実測すると scrollWidth と clientWidth はどちらも 390 で、はみ出しは存在しなかった。
     page_screenshot.py の出力が切れて見えていただけ。マスクは実害を隠すので入れない。 */
  .site-header__nav .main-nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header__nav .main-nav::-webkit-scrollbar { display: none; }
  /* 2026-09-16: 320px では scrollWidth 606 / clientWidth 114 で、
     スクロールできることを示す合図がゼロだった（「ニュー」で切れて見える）。
     スクロール領域そのものに擬似要素を置くと一緒に流れるので、
     親側にフェードを重ねる。クリックは透過させる。 */
  .site-header__nav .nav-inner { position: relative; }
  .site-header__nav .nav-inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 84px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(6, 45, 66, 0), rgba(6, 45, 66, .92));
  }
  /* 見出しは語の途中で折らず、必ず折り返す */
  .hero-slide__story h2,
  .section-heading h2,
  .editorial-metrics h2 {
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  /* 横はみ出しの封じ込め（2026-09-02）。flexの子が縮まず、
     ナビ・FVコントロール・見出しが右で切れていた。 */
  .site-header__nav .nav-inner { min-width: 0; max-width: 100%; }
  .site-header__nav .main-nav { flex: 1 1 0; min-width: 0; }
  .hero-slider,
  .hero-slider__slides,
  .hero-slide__link,
  .hero-slider__controls,
  .editorial-metrics__grid,
  .latest-grid,
  .top-service { max-width: 100%; min-width: 0; }
  .hero-slide__copy,
  .hero-slide__story,
  .hero-slide__visual { min-width: 0; max-width: 100%; }
  .hero-slider__dots { min-width: 0; }
  .hero-slider__dot { min-width: 0; }
}

/* 診断ページのヒーロー（2026-09-02「全然ワクワクしない」への対応）。
   白箱にテキストだけだったので、KVを主役にした2カラムへ。 */
.shindan-hero {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  width: min(100%, 1774px);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) max(var(--gutter), calc((100vw - var(--v4-shell)) / 2));
  border-bottom: 1px solid var(--v4-line);
  background: var(--v4-surface);
}
.shindan-hero__eyebrow {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--v4-orange);
  color: var(--v4-blue);
  font: 900 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  display: inline-block;
}
.shindan-hero h1 {
  margin: 0 0 20px;
  color: var(--v4-ink);
  font-size: clamp(1.8rem, 2.9vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -.03em;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.shindan-hero__lead { margin: 0 0 24px; color: var(--v4-muted); font-size: 15px; line-height: 1.9; }
.shindan-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.shindan-hero__meta span {
  padding: 6px 12px;
  border: 1px solid var(--v4-line);
  background: var(--v4-pale);
  color: var(--v4-ink);
  font: 700 11px/1.4 "IBM Plex Mono", monospace;
}
.shindan-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 34px;
  border: 2px solid var(--v4-ink);
  background: var(--v4-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.shindan-hero__cta:hover { background: var(--v4-orange); border-color: var(--v4-orange); transform: translateY(-2px); }
.shindan-hero__cta span { font-size: 1.35em; }
.shindan-hero__art { margin: 0; }
.shindan-hero__art img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .shindan-hero { grid-template-columns: 1fr; padding-top: 28px; }
  .shindan-hero__art { order: -1; }
}

@media (max-width: 760px) {
  /* 図解のSPでの可読性（2026-09-02）。
     880px幅のSVGが296pxに縮小され、文字が実効6px程度になっていた。
     フォントを上げるだけでは足りないので、表と同じく実寸のまま横スクロールさせる。
     markdown の画像は <p> に包まれるので、その <p> をスクロール容器にする。 */
  .article-body p:has(> img[width="880"]) {
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-body p:has(> img[width="880"]) > img[width="880"] {
    width: 880px;
    max-width: none;
  }
  /* 2026-09-15: ここに content:none があり、同ファイル前方（1360行付近）で追加した
     「→ 横スクロールで数値が見えます」のヒントを後勝ちで打ち消していた。
     実測で390px時の図の可視率33.6%、数値セルが画面外のまま合図も出ない状態だった。
     コメントは「グラデーションを出す」と書いてあるが実装は消すだけだったため撤回する。 */
}

/* ==========================================================================
   新着カードを全部そろえる（2026-09-03）
   1枚目だけ2カラム幅＋画像左の特別扱いにしていたが、KVの文字が横に切れる不具合を
   繰り返した（「Windowsで」が「indowsで」になる等）。植木さん指示により特別扱いを廃止し、
   最初から3列の同一レイアウトにする。ここはファイル末尾なので前方の指定に必ず勝つ。
   ========================================================================== */
.latest-grid .ledger > li:first-child { grid-column: auto; }
.latest-grid .ledger > li:first-child .ledger-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
}
.latest-grid .ledger > li:first-child .ledger-thumb {
  grid-row: auto;
  grid-column: auto;
  align-self: stretch;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
}
.latest-grid .ledger > li:first-child .ledger-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.latest-grid .ledger > li:first-child .ledger-content {
  grid-column: auto;
  grid-row: auto;
  padding: 24px 24px 12px;
  justify-content: flex-start;
}
.latest-grid .ledger > li:first-child .ledger-date {
  grid-column: auto;
  grid-row: auto;
  padding: 0 24px 22px;
}
.latest-grid .ledger > li:first-child .ledger-title {
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.45;
}

/* 連番バッジをサムネの上から外す。KV内の見出しと重なって読めなくなっていた
   （「AIDIA 座談会 04」にバッジが被った）。本文側の先頭へ置く。 */
.latest-grid .ledger-num {
  position: static;
  display: inline-grid;
  width: auto;
  min-width: 34px;
  height: 22px;
  margin: 0 0 10px;
  padding: 0 8px;
  place-items: center;
  color: #fff;
  background: var(--v4-ink);
  font: 600 10px/1 "IBM Plex Mono", monospace;
}
.latest-grid .ledger-link { position: relative; }
.latest-grid .ledger-content { order: 2; }
.latest-grid .ledger-thumb { order: 1; }
.latest-grid .ledger-date { order: 3; }

@media (max-width: 1080px) {
  .latest-grid .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .latest-grid .ledger { grid-template-columns: 1fr; }
}

/* CTAの画像が高すぎた件（2026-09-03 指摘）。
   当初は object-fit: cover で切り抜いて高さを詰めたが、それは構図を壊すごまかしだった
   （2026-09-04 指摘）。画像自体を帯の構図で作り直し、切り抜きは一切しない。
   PC = 横帯（1536x465・比率3.3）／SP = 正方形（横帯だと日本語が潰れるため別画像）。 */
.top-service__art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* ボタンを画像に重ねると、画像内のネイビーのブロックに埋もれて読めなくなった（2026-09-04）。
   重ねるのをやめ、画像の下のオレンジ帯に置く。白地＋ネイビー文字でオレンジから浮かせる。 */
.top-service {
  display: flex;
  flex-direction: column;
  /* 旧グリッド指定の align-items: end / gap: 50px が残っていて、
     帯と picture が幅を失い、画像と帯の間に空きが出ていた（2026-09-04） */
  align-items: stretch;
  gap: 0;
}
.top-service picture { display: block; width: 100%; }
.top-service__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 4vw, 72px);
}
.top-service__lead {
  margin: 0;
  color: #fff;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  line-height: 1.9;
}
.top-service__cta {
  position: static;
  flex-shrink: 0;
  margin: 0;
  border-color: #fff;
  background: #fff;
  color: var(--v4-ink);
}
.top-service__cta:hover {
  background: var(--v4-ink);
  border-color: var(--v4-ink);
  color: #fff;
}

@media (max-width: 760px) {
  .top-service { padding-bottom: 0; }
  .top-service__bar {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(16px, 4vw, 22px);
    padding: clamp(20px, 5vw, 28px) var(--gutter) clamp(22px, 6vw, 32px);
  }
  .top-service__lead { font-size: 13px; line-height: 1.85; }
  .top-service__lead br { display: none; }
  .top-service__cta {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    justify-content: center;
  }
  .top-service__cta:hover { transform: none; }
}

/* 2026-09-18 修正: 記事の1カラム化が @media (max-width:380px) に入っていたため、
   390px以上の端末（iPhone 13以降・Pixel など現行機のほぼ全て）では
   .article-reading-layout が2カラム grid のままだった。
   第2列が minmax(230px,280px) で最低幅を確保する一方、第1列は minmax(0,820px) で
   0まで潰れるため、本文が1文字ずつ折り返されて読めない状態になっていた。
   GA4実測のモバイル エンゲージ16.4% / 平均滞在23秒（PCは40.4% / 172秒）の原因。
   2カラムに必要な幅は 820+280+gap ≒ 1140px のため、1080px以下で1カラムへ戻す。 */
@media (max-width: 1080px) {
  .article-reading-layout { display: block; padding-top: 42px; padding-bottom: 80px; }
  .article-toc-rail { position: static; max-height: none; margin-bottom: 44px; }
}

/* 2026-09-21: 12文字前後の切れない語（例: コンテンツマーケティング）は既定の h1 サイズだと1行に入らず、
   auto-phrase でも語中で折れる。frontmatter の h1_compact: true で opt-in する縮小サイズ。既定の見出しには影響しない。 */
.article-header__copy h1.is-compact { font-size: clamp(2rem, 3.3vw, 3.2rem); }
@media (max-width: 760px) {
  .article-header__copy h1.is-compact { font-size: clamp(1.375rem, 7.2vw, 2.4rem); }
}