/* ==========================================================================
   TERRAISE — 下層ページ・LP 共通（pages.css）v2。数値・部品の正本は ROOT/DESIGN.md
   トップ v2（film.css）と同じ言語: 色面の切替・極太タイポ・等幅ラベル・直角・1px 罫線・幾何学タイル・実物の素材
   - 角は 0（ボタン・入力・タグだけ 2px）。影なし。見出し・本文は動かさない（data-reveal は図・カード・写真だけ）
   - 構成: 01 共通（章・ヒーロー・メタ表・タイル・数字・FAQ）→ 02 事例 → 03 各ページ
   LP は pages.css ＋ lp.css を読む
   ========================================================================== */

/* ---------------------------------------------------------------- 01 共通 */
.psec { position: relative; padding-block: var(--section); }
.psec--tight { padding-block: calc(var(--section) * .7); }
.psec + .psec.tone-white, .psec.tone-white + .psec.tone-white { border-top: 1px solid var(--line); }
.i-arrow { flex: none; width: 1.05em; height: 1.05em; transition: transform var(--dur-quick) var(--ease-out); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 等幅のパンくず */
.crumbs { font-size: 11px; color: var(--text-2); text-transform: none; letter-spacing: .08em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .2em .7em; }
.crumbs li + li::before { content: "/"; margin-right: .7em; opacity: .5; }
.crumbs a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-quick) var(--ease-out); }
.crumbs a:hover { text-decoration-color: currentColor; }
.tone-navy .crumbs, .tone-ink .crumbs { color: var(--text-on-dark-2); }
.tone-cyan .crumbs { color: var(--navy); }

/* 章の見出し（ラベル＋h2）。h2 は 700、最大2行 */
.shead { max-width: 52rem; }
.shead__title { margin-top: 8px; font-size: var(--text-h2); font-weight: 700; line-height: 1.3; }
.shead__sub { margin-top: 16px; max-width: 36em; color: var(--text-2); }
.tone-navy .shead__title, .tone-ink .shead__title { color: #fff; }
.tone-navy .shead__sub, .tone-ink .shead__sub { color: var(--text-on-dark-2); }
.tone-cyan .shead__sub { color: var(--navy); }
.shead--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 16px 64px; align-items: end; max-width: none; }
.shead--row .shead__sub { margin: 0; font-size: var(--text-body-sm); }
@media (max-width: 900px) { .shead--row { grid-template-columns: 1fr; } }

/* ---------------- ページヒーロー（色面＋極太見出し＋等幅メタ表） */
.phero { position: relative; overflow: hidden; isolation: isolate; }
.phero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: clamp(480px, 72vh, 760px); padding: calc(var(--header-h) + 28px) 0 clamp(56px, 7vw, 88px); }
.phero__main { display: flex; flex-direction: column; min-width: 0; }
.phero .crumbs { margin-bottom: auto; padding-bottom: 56px; }
.phero__label { margin-bottom: 20px; }
.phero__title { font-size: var(--text-display); font-weight: 900; line-height: 1.12; letter-spacing: var(--tracking-display); max-width: 15.5em; }
.phero--xl .phero__title { font-size: clamp(44px, 1rem + 6.4vw, 112px); line-height: 1.08; }
.phero--md .phero__title { font-size: clamp(34px, 1.1rem + 3.4vw, 68px); line-height: 1.18; max-width: 19em; }
.phero--compact .phero__inner { min-height: clamp(400px, 52vh, 560px); }
.phero__foot { display: grid; grid-template-columns: minmax(0, 32em) minmax(0, 30rem); justify-content: space-between; gap: 32px 64px; align-items: end; margin-top: 40px; }
.phero__lead { font-size: var(--text-lead); line-height: 1.8; font-weight: 500; letter-spacing: var(--tracking-lead); color: var(--text-2); }
.phero__foot > .meta:only-child { grid-column: 2; }
.tone-navy .phero__lead { color: var(--text-on-dark-2); }
.tone-navy .phero__title { color: #fff; }
.phero--deep { background: var(--navy-deep); }
.tone-cyan .phero__lead { color: var(--navy); }
/* 右に素材を置くヒーロー（写真・イラスト） */
.phero--aside .phero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
.phero--aside .phero__foot { grid-template-columns: 1fr; }
.phero__aside { position: relative; min-width: 0; }
@media (max-width: 1100px) { .phero__foot { grid-template-columns: 1fr; } .phero__foot > .meta:only-child { grid-column: 1; } }
@media (max-width: 900px) {
  .phero__inner { min-height: 0; padding: calc(var(--header-h) + 20px) 0 56px; }
  .phero .crumbs { padding-bottom: 72px; }
  .phero--aside .phero__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .phero__title { font-size: clamp(34px, 9.6vw, 56px); max-width: none; }
  .phero--xl .phero__title { font-size: clamp(40px, 11vw, 64px); }
  .phero--md .phero__title { font-size: clamp(28px, 7.6vw, 44px); }
  .phero__foot { margin-top: 28px; }
  .phero__lead { font-size: 16px; }
}

/* ヒーロー下端の幾何学タイル（1段。映像のサービス場面の帯） */
.tilestrip { position: relative; height: 64px; overflow: hidden; background: var(--navy); }
.tilestrip--2 { height: 128px; }
.tiles { display: block; width: auto; max-width: none; height: 100%; }
@media (max-width: 767px) { .tilestrip { height: 40px; } .tilestrip--2 { height: 80px; } }

/* ---------------- 等幅メタ表（Anthropic 型: LABEL / 値） */
.meta { border-top: 1px solid var(--ink); }
.meta__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-strong); }
.meta dt { font-size: 11px; color: var(--cyan-deep); }
.meta dd { font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .03em; }
.tone-navy .meta, .tone-ink .meta { border-top-color: rgba(255,255,255,.7); }
.tone-navy .meta__row, .tone-ink .meta__row { border-bottom-color: var(--line-on-dark); }
.tone-navy .meta dt, .tone-ink .meta dt { color: var(--lt); }
.tone-navy .meta dd, .tone-ink .meta dd { color: #fff; }
.tone-cyan .meta { border-top-color: var(--ink); }
.tone-cyan .meta__row { border-bottom-color: rgba(16,24,32,.22); }
.tone-cyan .meta dt { color: var(--ink); }

/* ---------------- Stat Block */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.stats > .stat { padding: 20px 24px 24px; border-bottom: 1px solid var(--line); }
.stats > .stat + .stat { border-left: 1px solid var(--line); }
.stats > .stat:first-child { padding-left: 0; }
.stat__label { font-size: 15px; font-weight: 500; color: var(--text-2); }
.stat__value { display: flex; align-items: baseline; margin-top: 8px; font-size: clamp(40px, 1.4rem + 2.6vw, 72px); line-height: 1; color: var(--ink); }
.stat__value .num { font-size: 1em; letter-spacing: -.03em; }
.stat__value--text, .stat__text { font-family: var(--font-ja); font-weight: 900; letter-spacing: var(--tracking-display); }
.stat__pre { font-size: .4em; font-weight: 700; margin-right: .08em; }
.stat__note { margin-top: 12px; font-size: 11px; color: var(--text-2); text-transform: none; }
.tone-navy .stats { border-top-color: rgba(255,255,255,.7); }
.tone-navy .stats > .stat { border-color: var(--line-on-dark); }
.tone-navy .stat__label, .tone-navy .stat__note { color: var(--text-on-dark-2); }
.tone-navy .stat__value { color: #fff; }
.tone-cyan .stats > .stat { border-color: rgba(16,24,32,.2); }
.tone-cyan .stat__label, .tone-cyan .stat__note { color: var(--ink); }
@media (max-width: 767px) {
  .stats { grid-template-columns: 1fr; }
  .stats > .stat { padding: 16px 0 20px; }
  .stats > .stat + .stat { border-left: 0; }
}

/* ---------------- Before → After（数日 ——→ 数時間） */
.ba { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; font-weight: 900; line-height: 1; font-size: clamp(36px, 1.2rem + 3vw, 64px); letter-spacing: var(--tracking-display); }
.ba__before { font-size: .6em; color: var(--text-2); font-weight: 700; }
.ba__to { position: relative; flex: none; width: 1.3em; height: 1px; margin: 0 .15em; background: currentColor; }
.ba__to::after { content: "→"; position: absolute; right: -.1em; top: 50%; transform: translateY(-54%); font-family: var(--font-mono); font-size: .32em; font-weight: 500; }
.ba__after { color: var(--cyan-dark); }
.tone-navy .ba__before { color: var(--text-on-dark-2); }
.tone-navy .ba__after { color: var(--cyan); }

/* ---------------- FAQ（左に見出し・右に一覧。動かさない） */
.pfaq { padding-block: var(--section); }
.pfaq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.pfaq__list { border-top: 1px solid var(--ink); }
.pfaq__item { border-bottom: 1px solid var(--line-strong); }
.pfaq__item summary { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 22px; gap: 12px; align-items: baseline; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; line-height: 1.6; }
.pfaq__item summary::-webkit-details-marker { display: none; }
.pfaq__item summary:hover .pfaq__q { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pfaq__no { color: var(--cyan-deep); font-size: 11px; }
.pfaq__icon { position: relative; align-self: center; width: 16px; height: 16px; }
.pfaq__icon::before, .pfaq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transition: transform var(--dur-base) var(--ease-out); }
.pfaq__icon::after { transform: rotate(90deg); }
.pfaq__item[open] .pfaq__icon::after { transform: rotate(0); }
.pfaq__a { padding: 0 38px 24px calc(3.2em + 12px); color: var(--text-2); }
.pfaq__a p { max-width: 36em; }
@media (max-width: 900px) {
  .pfaq__grid { grid-template-columns: 1fr; }
  .pfaq__item summary { grid-template-columns: 2.6em minmax(0, 1fr) 16px; font-size: 16px; padding: 18px 0; }
  .pfaq__a { padding: 0 0 20px calc(2.6em + 12px); }
}


/* ---------------------------------------------------------------- 02 事例（社名＋数字＋動詞） */
.clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.citem[hidden] { display: none; }
.citem__link { display: grid; height: 100%; color: inherit; background: #fff; border: 1px solid var(--line); transition: border-color var(--dur-quick) var(--ease-out); }
.citem__link:hover { border-color: var(--line-strong); }
.citem__media { position: relative; overflow: hidden; background: var(--surf); }
.citem__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.citem__link:hover .citem__media img { transform: scale(1.02); }
.citem__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px; }
.citem__tag { color: var(--cyan-deep); }
.citem__title { margin-top: 12px; font-size: 24px; font-weight: 700; line-height: 1.45; }
.citem__desc { margin-top: 12px; max-width: 34em; font-size: 15px; line-height: 1.8; color: var(--text-2); }
.citem__client { margin-top: 10px; font-size: 14px; font-weight: 700; }
.citem__client span { margin-left: .8em; font-weight: 400; color: var(--text-2); }
.citem__more { display: inline-flex; align-items: center; gap: .5em; margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.citem__link:hover .citem__more { text-decoration-thickness: 2px; }
.citem__link:hover .i-arrow { transform: translateX(4px); }
.citem .ba { margin-top: 24px; }
.citem__stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); width: 100%; }
.citem__stats li { display: flex; flex-direction: column; }
.citem__stats .num { font-size: 36px; line-height: 1.1; color: var(--ink); }
.citem__stats li > span:last-child { font-size: 13px; color: var(--text-2); }
/* 大（イラスト主役・8カラム相当） */
.citem--feature { grid-column: 1 / -1; }
.citem--feature .citem__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.citem--feature .citem__media { min-height: 100%; aspect-ratio: auto; }
.citem--feature .citem__media img { position: absolute; inset: 0; }
.citem--feature .citem__body { padding: 40px; }
.citem--feature .citem__title { font-size: clamp(26px, 1rem + 1.4vw, 36px); line-height: 1.35; }
/* 半幅（イラスト） */
.citem--illust .citem__link { grid-template-rows: auto 1fr; }
.citem--illust .citem__media { aspect-ratio: 16 / 9; }
/* v3: 全事例が絵つきになり、奇数で余る最後の1件は横幅いっぱい（絵 左・文字 右）にして空きセルを作らない */
@media (min-width: 768px) {
  .clist .citem--illust:last-child:nth-child(even) { grid-column: 1 / -1; }
  .clist .citem--illust:last-child:nth-child(even) .citem__link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .clist .citem--illust:last-child:nth-child(even) .citem__media { aspect-ratio: 16 / 9; }
  .clist .citem--illust:last-child:nth-child(even) .citem__body { align-self: center; }
}
/* 1行（数字主役） */
.citem--row { grid-column: 1 / -1; }
.citem--row .citem__link { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: center; background: transparent; border: 0; border-top: 1px solid var(--ink); }
.citem--row + .citem--row .citem__link { border-top-color: var(--line-strong); }
.citem--row .citem__body { padding: 28px 32px 28px 0; }
.citem--row .citem__title { margin-top: 8px; font-size: clamp(20px, 1rem + .6vw, 26px); }
.citem--row .citem__more { padding-top: 12px; }
.citem__fig { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 24px 0; text-align: right; }
.citem__fig .num { font-size: clamp(44px, 1.4rem + 2.8vw, 72px); line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.citem__fig-text { font-size: clamp(32px, 1rem + 2vw, 48px); font-weight: 900; line-height: 1.1; letter-spacing: var(--tracking-display); }
.citem__fig small { font-size: 11px; color: var(--text-2); text-transform: none; }
.clist .citem--row:last-child .citem__link { border-bottom: 1px solid var(--line-strong); }
.citem--row .citem__link:hover .citem__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  .clist { grid-template-columns: 1fr; gap: 16px; }
  .citem--feature .citem__link { grid-template-columns: 1fr; }
  .citem--feature .citem__media { aspect-ratio: 4 / 3; min-height: 0; }
  .citem--feature .citem__body, .citem__body { padding: 24px; }
  .citem--row .citem__link { grid-template-columns: 1fr; }
  .citem--row .citem__body { padding: 20px 0 4px; order: 2; }
  .citem__fig { order: 1; align-items: flex-start; text-align: left; padding: 20px 0 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .citem__fig .num { font-size: 44px; }
}

/* ---------------- 絞り込み（等幅のタブ） */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.filter__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); }
.filter__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__pill { display: inline-flex; align-items: baseline; gap: .6em; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 14px; font-weight: 700; color: var(--ink); background: #fff; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.filter__pill:hover { border-color: var(--ink); }
.filter__pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter__count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .7; }
.filter__empty { padding: 48px 0; color: var(--text-2); }

/* ---------------------------------------------------------------- 03 各ページ */

/* ===== 事業内容（/services/） ===== */
.tiers { border-top: 2px solid var(--ink); }
.tier { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; padding: 48px 0 56px; border-bottom: 1px solid var(--line-strong); scroll-margin-top: calc(var(--header-h) + 16px); }
.tier__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tier__no { display: flex; align-items: center; gap: 12px; color: var(--cyan-deep); }
.tier__stack { display: inline-flex; flex-direction: column-reverse; gap: 3px; }
.tier__stack i { width: 18px; height: 6px; background: var(--line-strong); }
.tier__stack i.is-on { background: var(--cyan); }
.tier__name { margin-top: 8px; font-family: var(--font-en); font-weight: 700; font-size: clamp(40px, 1.4rem + 3vw, 72px); line-height: 1; letter-spacing: -.02em; }
.tier__name--ja { font-family: var(--font-ja); font-weight: 900; letter-spacing: var(--tracking-display); }
.tier__kind { font-size: 20px; font-weight: 700; }
.tier__who { font-size: var(--text-body-sm); color: var(--text-2); }
.tier__fact { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-strong); width: 100%; max-width: 22rem; }
.tier__fact .stat__value { font-size: clamp(36px, 1.2rem + 2vw, 56px); }
.tier__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 16px; font-weight: 700; }
.tier__flow span:not(:last-child)::after { content: "→"; margin-left: 6px; font-family: var(--font-mono); font-weight: 500; color: var(--cyan-deep); }
.tier__body { max-width: 40em; }
.tier__body p { margin-bottom: 1em; }
.tier__body .tier__proof { color: var(--text-2); font-size: var(--text-body-sm); }
.tier__body .link-arrow { margin-top: 8px; }
@media (max-width: 900px) { .tier { grid-template-columns: 1fr; gap: 20px; padding: 32px 0 40px; } }

/* 方法（Navy Deep に Blender のベルトコンベアの3コマ） */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.fig__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF1F4; }
.fig__frame img { width: 100%; height: 100%; object-fit: cover; }
.fig__cap { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-on-dark); }
.fig__cap .mono-label { color: var(--cyan); font-size: 11px; }
.fig__cap b { font-size: 20px; font-weight: 700; color: #fff; }
.fig__desc { margin-top: 6px; font-size: var(--text-body-sm); color: var(--text-on-dark-2); }
.fig--process .fig__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--cyan); pointer-events: none; }
@media (max-width: 900px) { .figs { grid-template-columns: 1fr; gap: 32px; } }

/* 到達点は3段階（高さの違う3本の面。動かさない） */
.lvls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 40px; }
.lvl { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.lvl h3 { font-size: 20px; font-weight: 700; line-height: 1.45; }
.lvl p { font-size: var(--text-body-sm); line-height: 1.7; }
.lvl .mono-label { font-size: 11px; }
.lvl--3 { order: 1; min-height: 200px; background: var(--lt); color: var(--ink); }
.lvl--2 { order: 2; min-height: 280px; background: var(--cyan-deep); color: #fff; }
.lvl--1 { order: 3; min-height: 360px; background: var(--cyan); color: var(--ink); }
.lvls__note { margin-top: 24px; font-size: 18px; font-weight: 700; }
@media (max-width: 767px) {
  .lvls { grid-template-columns: 1fr; gap: 8px; }
  .lvl { min-height: 0 !important; }
  .lvl--1 { order: 1; } .lvl--2 { order: 2; width: 88%; } .lvl--3 { order: 3; width: 76%; }
}

/* 教育機関向け（Cyan の全面） */
.edu2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
.edu2__text { margin-top: 24px; max-width: 36em; }
.edu2__text p + p { margin-top: 1em; }
.edu2__menu { margin-top: 32px; border-top: 1px solid var(--ink); }
.edu2__menu li { display: grid; grid-template-columns: 3em minmax(0, 12em) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(16,24,32,.22); }
.edu2__menu .mono-label { font-size: 11px; }
.edu2__menu b { font-size: 18px; font-weight: 700; }
.edu2__menu span:last-child { font-size: var(--text-body-sm); color: var(--navy); }
.edu2__fig { background: #fff; }
.edu2__fig img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.edu2__fig figcaption { padding: 12px 16px; font-size: 11px; color: var(--text-2); border-top: 1px solid var(--line); }
.edu2 .stats { margin-top: 48px; grid-column: 1 / -1; border-top-color: var(--ink); }
.edu2 .stat__value--text { font-size: clamp(40px, 1.4rem + 2.6vw, 72px); }
@media (max-width: 900px) { .edu2 { grid-template-columns: 1fr; } .edu2__menu li { grid-template-columns: 2.4em 1fr; } .edu2__menu span:last-child { grid-column: 2; } }

/* 料金・導入の流れ */
.price2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.price2__text { max-width: 36em; }
.price2__text p + p { margin-top: 1em; }
.factors { border-top: 1px solid var(--ink); }
.factors li { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-strong); font-size: 18px; font-weight: 700; }
.factors li small { display: block; font-size: 13px; font-weight: 400; color: var(--text-2); }
.factors .mono-label { color: var(--cyan-deep); font-size: 11px; }
.price2__advisor { margin-top: 32px; }
.flow2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 48px; counter-reset: fl; }
.flow2 li { position: relative; padding: 16px 20px 0 0; border-top: 2px solid var(--line-strong); }
.flow2 li:first-child { border-top-color: var(--cyan); }
.flow2 .mono-label { color: var(--cyan-deep); font-size: 11px; }
.flow2 b { display: block; margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.flow2 .flow2__period { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-2); }
.flow2 p { margin-top: 8px; font-size: var(--text-body-sm); color: var(--text-2); line-height: 1.7; }
.tone-navy .flow2 li { border-top-color: var(--line-on-dark); }
.tone-navy .flow2 li:first-child { border-top-color: var(--cyan); }
.tone-navy .flow2 .mono-label { color: var(--lt); }
.tone-navy .flow2 b { color: #fff; }
.tone-navy .flow2 .flow2__period, .tone-navy .flow2 p { color: var(--text-on-dark-2); }
@media (max-width: 1000px) { .price2 { grid-template-columns: 1fr; } .flow2 { grid-template-columns: 1fr; } .flow2 li { display: grid; grid-template-columns: 5.5em 1fr; column-gap: 12px; padding: 14px 0; } .flow2 li > * { grid-column: 2; } .flow2 li .mono-label { grid-column: 1; grid-row: 1 / span 3; } }

/* ===== AX Academy（/academy/） ===== */
.phero__photo { position: absolute; inset: 0 calc((100vw - min(100vw - var(--gutter) * 2, var(--container))) / -2) 0 0; background: var(--navy-2); }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; }
.phero__photo figcaption { position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.phero--photo .phero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.intro2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; }
.intro2__text p { max-width: 36em; }
.intro2__text { margin-top: 32px; }
.intro2__fig { margin: 0; }
.intro2__ill { position: relative; aspect-ratio: 4 / 3; background: var(--surf); overflow: hidden; }
.intro2__ill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.intro2__fig figcaption { margin-top: 10px; font-size: 11px; color: var(--text-2); text-transform: none; letter-spacing: .06em; }
.intro2__text p + p { margin-top: 1em; }
.intro2 .stats { grid-column: 1 / -1; margin-top: 32px; }
.intro2 .stat__value--text { font-size: clamp(32px, 1.2rem + 2vw, 56px); }
@media (max-width: 900px) { .intro2 { grid-template-columns: 1fr; } .intro2__ill { margin-inline: calc(var(--gutter) * -1); } }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; align-items: start; }
.two__col { padding-top: 16px; border-top: 1px solid var(--ink); }
.tone-navy .two__col { border-top-color: rgba(255,255,255,.7); }
.two__col h3 { margin: 8px 0 16px; font-size: var(--text-h3); font-weight: 700; line-height: 1.45; }
.tone-navy .two__col h3 { color: #fff; }
.two__col p { max-width: 36em; }
.two__col p + p { margin-top: 1em; }
.tone-navy .two__col p { color: var(--text-on-dark-2); }
.two__col .link-arrow, .two__col .factors { margin-top: 24px; }
.tone-navy .factors { border-top-color: rgba(255,255,255,.7); }
.tone-navy .factors li { border-bottom-color: var(--line-on-dark); color: #fff; }
.tone-navy .factors .mono-label { color: var(--lt); }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* 人（経営陣・運営チーム）。実写は角 0・モノクロにしない */
.people { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; padding: 40px 0; border-bottom: 1px solid var(--line-strong); }
.person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); max-width: 360px; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
.person__role { color: var(--cyan-deep); }
.person__name { margin: 8px 0 16px; font-size: clamp(28px, 1rem + 1.6vw, 40px); font-weight: 700; line-height: 1.3; }
.person__name span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); color: var(--text-2); text-transform: uppercase; }
.person__text { max-width: 36em; color: var(--text-2); }
.person--text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.person--text .person__photo { display: none; }
.person--text .person__body { grid-column: 2; }
@media (max-width: 900px) {
  .person { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .person__photo { max-width: 240px; }
  .person--text .person__body { grid-column: 1; }
}
/* 経営陣4人を同格のカードで（/about/・2026-09-26）。PC 4列 → 1100px以下 2×2（SPも2×2） */
.people--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
.people--grid .person { grid-template-columns: 1fr; align-content: start; gap: 0; padding: 32px 0 40px; }
.people--grid .person__photo { max-width: none; }
.people--grid .person__body { margin-top: 20px; }
.people--grid .person__name { margin: 6px 0 14px; font-size: clamp(24px, 1rem + .7vw, 30px); }
.people--grid .person__text { font-size: 14px; line-height: 1.85; }
@media (max-width: 1100px) {
  .people--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people--grid .person__photo { max-width: 320px; } /* 関根の原画が小さい（切り出し320px）ため、2列時に写真を拡大しすぎない */
}
@media (max-width: 600px) {
  .people--grid { column-gap: 16px; }
  .people--grid .person { padding: 24px 0 28px; }
  .people--grid .person__body { margin-top: 14px; }
  .people--grid .person__role { min-height: 2.6em; font-size: 10px; line-height: 1.3; letter-spacing: .06em; } /* 英字の役職が2行になっても名前の高さを揃える */
  .people--grid .person__name { font-size: 20px; margin: 4px 0 10px; }
  .people--grid .person__name span { min-height: 2.8em; font-size: 11px; line-height: 1.4; letter-spacing: .06em; }
  .people--grid .person__text { font-size: 13px; line-height: 1.8; }
}

/* ===== 会社概要（/about/） ===== */
.phero--cyan .phero__title { color: var(--ink); }
.about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.about-intro__lead { font-size: var(--text-lead); line-height: 1.9; font-weight: 500; max-width: 34em; }
.vision { margin-top: 32px; font-size: clamp(26px, 1rem + 1.8vw, 44px); font-weight: 700; line-height: 1.45; letter-spacing: var(--tracking-heading); font-feature-settings: "palt"; }
@media (max-width: 900px) { .about-intro { grid-template-columns: 1fr; } }
/* バリュー 7項目: 幾何学タイル1枚＋言葉（映像のサービス場面の語彙） */
.values2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.7); }
.values2 li { display: grid; grid-template-columns: 48px 3em minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-on-dark); }
.values2 .tiles { width: 48px; height: 48px; }
.values2 .mono-label { color: var(--lt); font-size: 11px; }
.values2 b { font-size: clamp(18px, .9rem + .6vw, 24px); font-weight: 700; color: #fff; line-height: 1.4; }
@media (max-width: 900px) { .values2 { grid-template-columns: 1fr; } .values2 li { grid-template-columns: 40px 2.4em 1fr; } .values2 .tiles { width: 40px; height: 40px; } }
/* 体制 */
.team2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; margin-top: 64px; }
.team2 .stats { --n: 2; }
.team2__dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 18rem; margin-top: 20px; }
.team2__dots i { aspect-ratio: 1; border-radius: 50%; background: var(--navy); }
.team2__dots i.is-core { background: var(--cyan); }
.team2__text { margin-top: 20px; max-width: 36em; color: var(--text-2); }
.team2__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.team2__photo figcaption { margin-top: 8px; font-size: 11px; color: var(--text-2); }
@media (max-width: 900px) { .team2 { grid-template-columns: 1fr; } }
/* 会社情報の表（th は折り返さない） */
.company2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.ctable table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.ctable thead { display: none; }
.ctable th, .ctable td { padding: 16px 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.ctable td:first-child, .ctable th:first-child { width: 9.5em; padding-right: 24px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--cyan-deep); white-space: nowrap; }
.ctable td:last-child { font-size: 15px; font-weight: 500; }
.ctable a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 4px; }
.map2 { position: relative; aspect-ratio: 4 / 3; background: var(--surf); border: 1px solid var(--line); }
.map2 iframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(.4); }
.map2__cap { margin-top: 12px; }
.map2__cap b { display: block; font-size: 16px; font-weight: 700; }
.map2__cap span { font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) { .company2 { grid-template-columns: 1fr; } .ctable td:first-child { width: 7em; white-space: normal; } }

/* ===== 導入事例 一覧（/cases/） ===== */
.cases-note { margin-top: 32px; font-size: 13px; color: var(--text-2); }

/* ===== 事例詳細（/cases/<slug>/） ===== */
/* イラストが主役のヒーロー（白い面にアイソメイラスト） */
.chero { position: relative; }
.chero__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "head head" "main aside"; gap: 40px 64px; align-items: end; padding: calc(var(--header-h) + 28px) 0 72px; }
.chero__head { grid-area: head; min-width: 0; }
.chero__main { grid-area: main; min-width: 0; }
.chero .crumbs { margin-bottom: 64px; }
.chero__tag { color: var(--cyan-deep); }
.tone-navy .chero__tag { color: var(--lt); }
.chero__title { margin-top: 16px; font-size: clamp(34px, 1.1rem + 3.6vw, 72px); font-weight: 900; line-height: 1.16; letter-spacing: var(--tracking-display); }
.tone-navy .chero__title { color: #fff; }
.chero__lead { max-width: 34em; font-size: var(--text-lead); line-height: 1.8; font-weight: 500; color: var(--text-2); }
.tone-navy .chero__lead { color: var(--text-on-dark-2); }
.chero .meta { margin-top: 32px; }
.chero__media { grid-area: aside; position: relative; aspect-ratio: 4 / 3; background: var(--surf); border: 1px solid var(--line); overflow: hidden; }
.chero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chero__media figcaption { position: absolute; left: 16px; bottom: 14px; color: var(--text-2); font-size: 11px; }
/* 数字が主役のヒーロー（Navy の面に巨大な数字） */
.chero__num { grid-area: aside; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; min-width: 0; }
.bignum { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.7); }
.bignum + .bignum { border-top-color: var(--line-on-dark); }
.bignum__label { color: var(--lt); font-size: 11px; }
.bignum__value { display: flex; align-items: baseline; margin-top: 8px; color: var(--cyan); line-height: .9; }
.bignum__value .num { font-size: clamp(96px, 2rem + 11vw, 220px); letter-spacing: -.05em; }
.bignum__value .num__unit { font-size: .3em; letter-spacing: 0; margin-left: .12em; }
.bignum--sub .bignum__value .num { font-size: clamp(56px, 1.4rem + 5vw, 104px); }
.bignum__text { font-size: clamp(64px, 1.4rem + 7vw, 144px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--cyan); }
.bignum__sub { margin-top: 12px; font-size: 18px; font-weight: 700; color: #fff; }
@media (max-width: 900px) {
  .chero__inner { grid-template-columns: 1fr; grid-template-areas: "head" "aside" "main"; padding-top: calc(var(--header-h) + 20px); gap: 32px; }
  .chero .crumbs { margin-bottom: 40px; }
  .chero__media { margin: 0 calc(var(--gutter) * -1); border-width: 1px 0; aspect-ratio: 16 / 10; } /* 2026-09-27: 1:1 → 16:10（SP で絵1枚が画面の半分を占めていた） */
  .chero__lead { font-size: 16px; }
  .chero__title { font-size: clamp(28px, 7.8vw, 44px); }
  .bignum__value .num { font-size: clamp(88px, 28vw, 140px); }
  .bignum__text { font-size: clamp(56px, 17vw, 96px); }
}
/* 成果の帯（数字） */
.cresult { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: end; }
.cresult .ba { font-size: clamp(48px, 1.4rem + 5vw, 104px); }
.cresult__label { color: var(--cyan-deep); margin-bottom: 16px; }
.csteps { display: flex; flex-wrap: wrap; gap: 8px; }
.csteps li { display: inline-flex; align-items: baseline; gap: .7em; padding: 12px 16px; border: 1px solid var(--ink); font-size: 18px; font-weight: 700; }
.csteps li .mono-label { color: var(--cyan-deep); font-size: 11px; }
.csteps li + li { position: relative; }
@media (max-width: 900px) { .cresult { grid-template-columns: 1fr; } }
/* 01 課題 / 02 やったこと / 03 成果 */
.chaps { border-top: 2px solid var(--ink); }
.chap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 64px; padding: 40px 0 48px; border-bottom: 1px solid var(--line-strong); }
.chap__head .mono-label { color: var(--cyan-deep); }
.chap__title { margin-top: 8px; font-size: var(--text-h3); font-weight: 700; }
.chap__body { max-width: 40em; font-size: 16px; }
.chap__body p + p, .chap__body p + ol, .chap__body ol + p, .chap__body ul + p { margin-top: 1em; }
.chap__body ol { counter-reset: st; border-top: 1px solid var(--line); }
.chap__body ol li { position: relative; padding: 12px 0 12px 3em; border-bottom: 1px solid var(--line); counter-increment: st; }
.chap__body ol li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label); color: var(--cyan-deep); }
.chap__body ul li { position: relative; padding-left: 1.2em; }
.chap__body ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; background: var(--cyan); }
.chap__body strong { font-family: var(--font-en); font-weight: 700; }
.chap__body a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .chap { grid-template-columns: 1fr; padding: 28px 0 32px; } }
.cphoto { margin-top: 64px; }
.cphoto img { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; } /* 2026-09-27: 21:9 → 4:1（写真1枚が画面を占めないよう低い帯に。SP は下の 4:3） */
.cphoto figcaption { margin-top: 10px; font-size: 11px; color: var(--text-2); }
@media (max-width: 767px) { .cphoto img { aspect-ratio: 4 / 3; } }
/* IPO脚注（等幅の表） */
.ipot { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ipot > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 16px 64px; align-items: end; }
.ipot > div:first-child .ipot__note { margin-top: 0; }
.ipot__table table { width: 100%; border-collapse: collapse; border-top: 1px solid rgba(255,255,255,.7); }
.ipot__table thead th { padding: 0 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-label); color: var(--text-on-dark-2); text-align: left; border: 0; }
.ipot__table thead { display: none; }
.ipot__table td { padding: 20px 0; border-bottom: 1px solid var(--line-on-dark); vertical-align: baseline; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.6; }
.ipot__table td:first-child { width: 12em; padding-right: 24px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.ipot__table tr:last-child td { color: var(--cyan); font-weight: 700; }
.ipot__table tr:last-child td:first-child { color: var(--lt); }
.ipot__note { margin-top: 24px; font-size: var(--text-body-sm); color: var(--text-on-dark-2); max-width: 36em; }
.ipot__note .link-arrow { margin-top: 12px; }
@media (max-width: 900px) { .ipot > div:first-child { grid-template-columns: 1fr; } .ipot__table td { font-size: 16px; } .ipot__table td:first-child { width: 6.5em; } }
/* 関連サービス（行） */
.rels { border-top: 1px solid var(--ink); }
.rel { border-bottom: 1px solid var(--line-strong); }
.rel a { display: grid; grid-template-columns: 8em minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 32px; align-items: baseline; padding: 24px 0; }
.rel .mono-label { color: var(--cyan-deep); font-size: 11px; }
.rel b { font-family: var(--font-en); font-size: clamp(24px, 1rem + 1vw, 32px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.rel b.ja { font-family: var(--font-ja); letter-spacing: 0; }
.rel span { color: var(--text-2); font-size: var(--text-body-sm); }
.rel .i-arrow { width: 1.4em; height: 1.4em; }
.rel a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.rel a:hover .i-arrow { transform: translateX(4px); }
@media (max-width: 767px) { .rel a { grid-template-columns: 1fr auto; } .rel .mono-label { grid-column: 1 / -1; } .rel span { grid-column: 1; } }

/* ===== お知らせ（/news/） ===== */
.nrows { border-top: 1px solid var(--ink); }
.nrow[hidden] { display: none; }
.nrow > a, .nrow > div { display: grid; grid-template-columns: 7.5em 10em minmax(0, 1fr) 1.4em; gap: 16px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line-strong); }
.nrow time { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--text-2); }
.nrow__cat { color: var(--cyan-deep); font-size: 11px; }
.nrow__title { font-size: 16px; font-weight: 500; line-height: 1.7; }
.nrow__go { font-family: var(--font-mono); color: var(--text-2); transition: transform var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.nrow > a:hover .nrow__title { text-decoration: underline; text-underline-offset: 5px; }
.nrow > a:hover .nrow__go { transform: translateX(4px); color: var(--ink); }
.news-src { margin-top: 32px; font-size: 13px; color: var(--text-2); }
.news-src a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .nrow > a, .nrow > div { grid-template-columns: auto 1fr 1.4em; grid-template-areas: "date cat go" "title title go"; row-gap: 6px; padding: 18px 0; }
  .nrow time { grid-area: date; } .nrow__cat { grid-area: cat; } .nrow__title { grid-area: title; } .nrow__go { grid-area: go; }
}

/* ===== コラム一覧（/column/） ===== */
.colrows { border-top: 1px solid var(--ink); }
.colrow a { display: grid; grid-template-columns: 128px minmax(0, 1fr) 1.6em; gap: 16px 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-strong); }
.colrow__tile { width: 128px; height: 128px; overflow: hidden; background: var(--navy); }
.colrow__tile .tiles { width: 128px; height: 128px; }
.colrow__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--cyan-deep); }
.colrow__meta span + span { color: var(--text-2); }
.colrow__title { margin-top: 8px; font-size: clamp(20px, 1rem + .8vw, 28px); font-weight: 700; line-height: 1.45; }
.colrow__desc { margin-top: 8px; max-width: 44em; font-size: var(--text-body-sm); color: var(--text-2); }
.colrow .i-arrow { width: 1.4em; height: 1.4em; }
.colrow a:hover .colrow__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.colrow a:hover .i-arrow { transform: translateX(4px); }
@media (max-width: 767px) { .colrow a { grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; align-items: start; } .colrow__tile, .colrow__tile .tiles { width: 72px; height: 72px; } .colrow .i-arrow { display: none; } }
/* 業界・目的別（LP への行リンク） */
.lprows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.lprows a { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 20px 20px 24px 0; border-bottom: 1px solid var(--line-strong); }
.lprows li + li a { padding-left: 20px; border-left: 1px solid var(--line-strong); }
.lprows .mono-label { color: var(--cyan-deep); font-size: 11px; }
.lprows b { font-size: 18px; font-weight: 700; line-height: 1.45; }
.lprows span { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.lprows .i-arrow { margin-top: auto; }
.lprows a:hover b { text-decoration: underline; text-underline-offset: 5px; }
.lprows a:hover .i-arrow { transform: translateX(4px); }
@media (max-width: 1000px) { .lprows { grid-template-columns: 1fr; } .lprows li + li a { padding-left: 0; border-left: 0; } .lprows a { padding: 16px 0 20px; } }

/* ===== コラム記事（/column/<slug>/） ===== */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 2px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
.ahero { padding: calc(var(--header-h) + 28px) 0 56px; border-bottom: 1px solid var(--line); }
.ahero .crumbs { margin-bottom: 64px; }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px 64px; align-items: end; }
.ahero__title { margin-top: 16px; font-size: clamp(30px, 1.1rem + 2.4vw, 56px); font-weight: 900; line-height: 1.22; letter-spacing: var(--tracking-display); }
.ahero__lead { margin-top: 24px; max-width: 36em; font-size: var(--text-lead); line-height: 1.8; font-weight: 500; color: var(--text-2); }
.ahero__tiles { height: 64px; margin-top: 48px; overflow: hidden; }
/* 監修者と最終更新日（コラム。2026-09-26） */
.ahero__byline { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.ahero__byline a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ahero__byline time { font-family: var(--font-mono); letter-spacing: .02em; }
@media (max-width: 900px) { .ahero__grid { grid-template-columns: 1fr; } .ahero__title { font-size: clamp(26px, 7vw, 36px); } .ahero .crumbs { margin-bottom: 40px; } }
.article { padding-block: 64px var(--section); }
.article__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.article__side { position: sticky; top: calc(var(--header-h) + 24px); }
.toc { border-top: 1px solid var(--ink); }
.toc__title { padding: 12px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--line); }
.toc__list { counter-reset: tc; }
.toc__list li { counter-increment: tc; border-bottom: 1px solid var(--line); }
.toc__list a { display: grid; grid-template-columns: 2.4em 1fr; gap: 4px; padding: 10px 0; font-size: 13px; line-height: 1.6; color: var(--text-2); transition: color var(--dur-quick) var(--ease-out); }
.toc__list a::before { content: counter(tc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--cyan-deep); padding-top: 1px; }
.toc__list a:hover, .toc__list a.is-active { color: var(--ink); font-weight: 700; }
.toc__list a.is-active::before { color: var(--ink); }
.share { margin-top: 32px; }
.share__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); }
.share__list { display: flex; gap: 8px; margin-top: 10px; }
.share__list a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.share__list a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.share__list svg { width: 16px; height: 16px; }
.article__main { min-width: 0; }
.article__rail { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; background: var(--navy); color: #fff; }
.article__rail .mono-label { color: var(--lt); font-size: 11px; }
.article__rail p { margin: 10px 0 16px; font-size: 13px; line-height: 1.7; color: var(--text-on-dark-2); }
.article__rail .btn { width: 100%; white-space: normal; }
@media (max-width: 1100px) { .article__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .article__rail { display: none; } }
@media (max-width: 900px) { .article__layout { grid-template-columns: 1fr; gap: 32px; } .article__side { position: static; } .share { display: none; } }
/* 本文の組版（Markdown） */
.prose2 { font-size: 16px; line-height: 1.95; max-width: 40em; }
.prose2 > * + * { margin-top: 1.2em; }
.prose2 h2 { margin-top: 2.8em; padding-top: 20px; border-top: 1px solid var(--ink); font-size: clamp(22px, 1rem + .9vw, 30px); font-weight: 700; line-height: 1.45; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose2 h2:first-child { margin-top: 0; }
.prose2 h3 { margin-top: 2em; font-size: 19px; font-weight: 700; line-height: 1.5; }
.prose2 h3 + p, .prose2 h2 + p { margin-top: .9em; }
.prose2 ul li { position: relative; padding-left: 1.3em; }
.prose2 ul li + li { margin-top: .4em; }
.prose2 ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 6px; background: var(--cyan); }
.prose2 ol { counter-reset: po; }
.prose2 ol li { position: relative; padding-left: 2.4em; counter-increment: po; }
.prose2 ol li + li { margin-top: .5em; }
.prose2 ol li::before { content: counter(po, decimal-leading-zero); position: absolute; left: 0; top: .3em; font-family: var(--font-mono); font-size: 12px; color: var(--cyan-deep); }
.prose2 a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 4px; }
.prose2 a:hover { text-decoration-thickness: 2px; }
.prose2 strong { font-weight: 700; }
.prose2 blockquote { margin-left: 0; padding: 16px 20px; border-left: 3px solid var(--cyan); background: var(--pale); }
.prose2 hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose2 table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.prose2 th, .prose2 td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.prose2 thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-label); color: var(--text-2); border-bottom-color: var(--ink); white-space: nowrap; }
.prose2 td:first-child { font-weight: 700; white-space: nowrap; }
/* 4列以上の表（コラムの比較表・2026-09-26）: 1列目の折り返しを許し、各列に最小幅を持たせて縦に細長く潰れないようにする（はみ出す分は表だけ横スクロール） */
.prose2 table:has(thead th:nth-child(4)) th, .prose2 table:has(thead th:nth-child(4)) td { min-width: 8.5em; }
.prose2 table:has(thead th:nth-child(4)) td:first-child { white-space: normal; min-width: 7em; }
.prose2 table:has(thead th:nth-child(4)) thead th { white-space: normal; }
/* 記事末: 関連LP（Navy の帯）と著者 */
.alp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; margin-top: 64px; padding: 32px; background: var(--navy); color: #fff; }
.alp .mono-label { color: var(--lt); font-size: 11px; }
.alp__title { margin-top: 8px; font-size: clamp(20px, 1rem + .8vw, 28px); font-weight: 700; line-height: 1.4; }
.alp__desc { margin-top: 8px; font-size: 14px; color: var(--text-on-dark-2); max-width: 36em; }
@media (max-width: 767px) { .alp { grid-template-columns: 1fr; padding: 24px; } .alp .btn { width: 100%; } }
.author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.author__photo { width: 72px; height: 72px; overflow: hidden; }
.author__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.author .mono-label { color: var(--text-2); font-size: 11px; }
.author b { display: block; margin-top: 4px; font-size: 16px; }
.author p { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.8; }
.author .author__org { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }

/* ===== お問い合わせ（/contact/） ===== */
.contact2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: start; }
.contact2__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.contact2__title { margin-top: 8px; font-size: var(--text-h2); font-weight: 700; line-height: 1.3; }
.contact2__lead { margin-top: 16px; max-width: 34em; color: var(--text-2); }
.contact2__steps { margin-top: 32px; border-top: 1px solid var(--ink); }
.contact2__steps li { display: grid; grid-template-columns: 3em 1fr; gap: 8px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-strong); font-weight: 700; }
.contact2__steps .mono-label { color: var(--cyan-deep); font-size: 11px; }
.contact2__direct { margin-top: 40px; }
.contact2__mail { display: inline-block; margin-top: 8px; font-family: var(--font-en); font-size: clamp(22px, 1rem + 1vw, 30px); font-weight: 700; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.contact2__mail:hover { text-decoration-thickness: 2px; }
.contact2__address { margin-top: 16px; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.contact2__direct .link-arrow { margin-top: 12px; }
@media (max-width: 1000px) { .contact2 { grid-template-columns: 1fr; } .contact2__aside { position: static; } }
/* フォーム（DESIGN.md Input: 高さ 48px・白・1px・角 2px・16px。focus は --ring-focus） */
.cform { padding: 40px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--ink); }
.cform__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cform__title { font-size: var(--text-h3); font-weight: 700; }
.cform__req-note { font-size: 13px; color: var(--text-2); }
.cform__sub { flex-basis: 100%; margin-top: -2px; font-size: 14px; color: var(--text-2); }
/* 営業・ご提案の入口（contact_sales/A案）: タブ帯の下・本文の右上に控えめなテキストリンク */
.contact2__salesbar { display: flex; justify-content: flex-end; margin-top: calc(var(--section) * -0.55); margin-bottom: calc(var(--section) * 0.25); }
.contact2__sales { display: inline-flex; align-items: center; gap: .5em; font-size: 14px; font-weight: 700; color: var(--navy-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.contact2__sales svg { width: 14px; height: 14px; }
.contact2__sales:hover { text-decoration-thickness: 2px; }
.contact2__sales[aria-current="true"] { color: var(--text-2); }
.req { display: inline-block; margin-left: .8em; padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--radius); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; color: var(--cyan-dark); vertical-align: 2px; line-height: 1.3; }
.opt { margin-left: .6em; font-size: 12px; font-weight: 400; color: var(--text-2); }
.cform__grid { display: grid; gap: 24px; margin-top: 24px; }
.field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field[hidden] { display: none; }
.field__label { font-size: 14px; font-weight: 700; line-height: 1.5; }
.field__input { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: .02em; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.field__input:hover { border-color: var(--text-3); }
.field__input:focus, .field__input:focus-visible { border-color: var(--cyan-deep); box-shadow: var(--ring-focus); }
textarea.field__input { min-height: 168px; resize: vertical; }
.field__select { position: relative; }
.field__select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__select select { padding-right: 40px; cursor: pointer; }
.field.is-invalid .field__input { border: 2px solid var(--ink); padding: 11px 13px; }
.field__error { display: flex; align-items: baseline; gap: .6em; font-size: 13px; font-weight: 700; color: var(--ink); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 11px; border-radius: 999px; }
.field__error[hidden] { display: none; }
.check { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 700; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check__box { flex: none; position: relative; width: 22px; height: 22px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); transition: background-color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out); }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); }
.check input:focus-visible + .check__box { box-shadow: var(--ring-focus); }
.field.is-invalid .check__box { border: 2px solid var(--ink); }
.cform__policy { display: inline-flex; align-items: center; gap: .4em; margin-left: 34px; font-size: 13px; color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 4px; }
.cform__policy svg { width: 14px; height: 14px; }
.cform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.cform__submit { min-width: 16rem; }
.cform__submit[disabled] { opacity: .6; cursor: progress; }
.cform__note { font-size: 13px; color: var(--text-2); }
.cform__status { padding: 16px 20px; border-left: 3px solid var(--ink); background: var(--surf); font-size: 14px; line-height: 1.8; outline: none; }
.cform__status--success { border-left-color: var(--cyan); background: var(--pale); }
.cform__status--error { border-left-color: var(--ink); background: #fff; border: 2px solid var(--ink); }
.cform__status a { color: var(--cyan-dark); text-decoration: underline; }
.cform.is-sent .cform__head { border-bottom: 0; }
@media (max-width: 767px) { .cform { padding: 24px 16px; } .field__row { grid-template-columns: 1fr; } .cform__submit { width: 100%; } .cform__policy { margin-left: 0; } }

/* ===== プライバシーポリシー（/privacy/） ===== */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px 64px; align-items: start; padding-block: 64px var(--section); }
.legal__side { position: sticky; top: calc(var(--header-h) + 24px); }
.legal .prose2 h2 { font-size: clamp(22px, 1rem + .8vw, 28px); }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; } .legal__side { position: static; } }

/* ===== 404 ===== */
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.nf .phero__inner { flex: 1; min-height: 0; }
.nf__code { font-family: var(--font-en); font-weight: 700; font-size: clamp(120px, 3rem + 18vw, 320px); line-height: .82; letter-spacing: -.05em; color: var(--cyan); margin-bottom: 32px; }
.nf__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-on-dark); font-size: 14px; font-weight: 700; }
.nf__links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nf__links a:hover { text-decoration-thickness: 2px; }
.nf .btn-row { margin-top: 40px; }
.nf .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.nf .btn--ghost:hover { border-color: #fff; }

/* 表示（1回だけ。図・カード・写真だけ）。見出し・本文には付けない */
@media (prefers-reduced-motion: reduce) { .citem__media img { transition: none; } }

/* 原稿（Markdown）由来のリンクを Secondary Link の見た目に */
.two__col p a:not(.btn), .price2__text p a:not(.btn) { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.two__col p a:not(.btn):hover, .price2__text p a:not(.btn):hover { text-decoration-thickness: 2px; }
.tone-navy .two__col p a:not(.btn) { color: #fff; }
/* ヒーローの実写はヘッダーの下端からヒーローの下端まで（右は画面端まで）。SP は見出しの上に全幅で */
.phero--photo .phero__aside { margin-top: -28px; margin-bottom: calc(clamp(56px, 7vw, 88px) * -1); }
@media (max-width: 900px) {
  .phero--photo .phero__inner { grid-template-columns: 1fr; }
  .phero--photo .phero__aside { order: -1; margin: -20px calc(var(--gutter) * -1) 0; height: 64vw; }
  .phero--photo .phero__photo { inset: 0; }
  .phero--photo .crumbs { padding-bottom: 40px; }
}
/* 事例ヒーロー: イラストが主役の案件は素材側を広く */
.chero--illust .chero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* v3: ビフォーアフターの比較をヒーローに（比較スライダー本体は main.css .ba-cmp） */
.chero__ba { grid-area: aside; min-width: 0; }
.cresult__num { color: var(--cyan-dark); line-height: 1; }
.cresult__num .num { font-size: clamp(64px, 2rem + 5vw, 120px); font-weight: 700; letter-spacing: -.03em; }
.cresult__side { display: grid; gap: 32px; min-width: 0; }
.cba { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--ink); }
.cba > div { padding: 16px 24px 0 0; }
.cba > div + div { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.cba dt { font-size: 11px; color: var(--text-2); }
.cba .is-after dt { color: var(--cyan-deep); }
.cba dd { margin-top: 6px; font-size: 15px; line-height: 1.85; }
.cba .is-after dd { font-weight: 700; }
@media (max-width: 900px) { .chero__ba { margin-inline: calc(var(--gutter) * -1); } .chero__ba .ba-cmp__cap { padding-inline: var(--gutter); } }
@media (max-width: 600px) { .cba { grid-template-columns: 1fr; } .cba > div + div { padding: 16px 0 0; border-left: 0; margin-top: 16px; border-top: 1px solid var(--line-strong); } }
@media (max-width: 900px) { .chero--illust .chero__inner { grid-template-columns: 1fr; } }

/* ===== お問い合わせ: 2つのゴールのタブ（相談 / 資料請求）。選んだタブは下の紙の面とつながる ===== */
.ctabs { background: var(--navy); }
.ctabs__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ctabs__tab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 24px 22px; text-align: left; color: #fff; background: var(--navy-2); border-top: 2px solid transparent; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.ctabs__tab .mono-label { font-size: 11px; color: var(--lt); }
.ctabs__tab b { font-size: clamp(16px, .9rem + .4vw, 20px); font-weight: 700; line-height: 1.4; }
.ctabs__tab:hover { background: #134573; }
.ctabs__tab[aria-selected="true"] { background: var(--surf); color: var(--ink); border-top-color: var(--cyan); }
.ctabs__tab[aria-selected="true"] .mono-label { color: var(--cyan-deep); }
.ctabs__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.ctabs__tab:disabled { cursor: default; }
.page-contact .ctabs + .psec { padding-top: calc(var(--section) * .6); }
.cform__doc-note { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding: 12px 16px; background: var(--pale); font-size: 14px; font-weight: 700; }
.cform__doc-note .mono-label { font-size: 11px; color: var(--cyan-dark); }
.cform__doc-note[hidden] { display: none; }
@media (max-width: 767px) { .ctabs__tab { padding: 14px 14px 16px; } .ctabs__tab b { font-size: 15px; } }
/* 締めの相談帯の副ゴール（会社紹介資料の請求） */
.cta-band__doc { margin-top: 4px; }
.cta-band__doc .link-arrow { color: #fff; }
.cform.is-sent .cform__doc-note { display: none; }
/* SP: 見出し → フォーム → メール・住所の順に（フォームまでの距離を短く） */
@media (max-width: 1000px) {
  .contact2__aside { display: contents; }
  .contact2__aside > [data-mode-only] { order: 1; }
  .contact2__form { order: 2; }
  .contact2__direct { order: 3; margin-top: 16px; }
  .contact2__steps { display: none; }
}
.nf .phero__main { justify-content: flex-end; }

/* ===== コラムのサムネイル・図解（2026-09-26。UI案: デザイン/UIパターン/column_visual/） =====
   絵の左 40% は色面（cyan / navy）＋下端 12.7% に幾何学タイル。キャッチはその色面の上に HTML で重ねる */
.cthumb { position: relative; display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--surf); container-type: inline-size; }
.cthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cthumb__panel { position: absolute; left: 0; top: 0; width: 40%; height: 87.3%; display: flex; flex-direction: column; padding: 4cqw 3.4cqw 2.6cqw; }
.cthumb__label { font-family: var(--font-mono); font-size: clamp(9px, 1.6cqw, 13px); font-weight: 500; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.cthumb__catch { margin-block: auto; font-size: clamp(11px, var(--catch, 5.2cqw), 52px); font-weight: 900; line-height: 1.28; letter-spacing: -.01em; font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance; }
.cthumb__catch .phrase { white-space: nowrap; }
.cthumb--cyan .cthumb__panel { color: var(--ink); }
.cthumb--navy .cthumb__panel { color: #fff; }
.cthumb--navy .cthumb__label { color: var(--lt); }
.cthumb--tiles { background: var(--navy); }
.cthumb--tiles .tiles { width: 100%; height: 100%; }
@container (max-width: 200px) { .cthumb__catch, .cthumb__label { display: none; } }
a:hover .cthumb img { transform: scale(1.02); }
.cthumb img { transition: transform var(--dur-base) var(--ease-out); }

/* 一覧: 特集1本（絵 7 : 文 5）＋ 2列のカード */
.colfeat a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--line-strong); }
.colfeat__title { margin-top: 12px; font-size: clamp(24px, 1rem + 1.4vw, 36px); font-weight: 700; line-height: 1.4; font-feature-settings: "palt"; }
.colfeat__desc { margin-top: 16px; font-size: var(--text-body-sm); line-height: 1.85; color: var(--text-2); }
.colfeat .i-arrow { margin-top: 24px; width: 1.4em; height: 1.4em; transition: transform var(--dur-quick) var(--ease-out); }
.colfeat a:hover .colfeat__title, .colcard a:hover .colcard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.colfeat a:hover .i-arrow { transform: translateX(4px); }
.colgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 8px; }
.colcard a { display: flex; flex-direction: column; height: 100%; padding: 40px 0 32px; border-bottom: 1px solid var(--line-strong); }
.colcard .colrow__meta { margin-top: 20px; }
.colcard__title { margin-top: 8px; font-size: clamp(18px, .9rem + .5vw, 22px); font-weight: 700; line-height: 1.5; }
.colfeat .colrow__meta { margin-top: 0; }
@media (max-width: 900px) {
  .colfeat a { grid-template-columns: 1fr; padding-bottom: 32px; }
  .colgrid { grid-template-columns: 1fr; }
  .colcard a { padding: 32px 0 28px; }
}

/* 関連記事の行（同じテーマ・ほかの記事・LP）: 128px のタイル → 小さなサムネイル */
.colrow--thumb a { grid-template-columns: 240px minmax(0, 1fr) 1.6em; }
.colrow--thumb .cthumb { width: 240px; }
@media (max-width: 767px) { .colrow--thumb a { grid-template-columns: 128px minmax(0, 1fr); } .colrow--thumb .cthumb { width: 128px; } .colrow--thumb .colrow__title { margin-top: 4px; font-size: 16px; } }

/* 記事上部のアイキャッチ（幾何学タイル1段の代わり） */
.ahero__eye { margin-top: 48px; }
@media (max-width: 767px) { .ahero__eye { margin-top: 32px; margin-inline: calc(var(--gutter) * -1); } }

/* 本文の図解（build.py が ![説明](fig-N) を <figure class="afig"> に変換。スマホは縦に組み直した 800px 版） */
.prose2 .afig { margin: 2.2em 0 2.4em; }
.afig picture, .afig img { display: block; width: 100%; height: auto; }
.afig img { border: 1px solid var(--line); }
.afig figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.afig__no { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--cyan-deep); }

/* ===== 記事カード v2（2026-09-26。代表指摘「PC いっぱいに情報のない画像」への修正）=====
   一覧・関連記事は PC 3列／タブレット 2列／SP 1列。サムネイルは文字入り（tools/column_images.py）。タイトルは3行で省略 */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin-top: 48px; }
.cgrid--related { margin-top: 32px; }
.ccard[hidden] { display: none; }
.ccard a { display: flex; flex-direction: column; height: 100%; }
.ccard .cthumb, .ccard .anthumb { flex: none; }
.ccard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; color: var(--text-2); }
.ccard__cat { color: var(--cyan-deep); }
.ccard__title { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.55; letter-spacing: .02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ccard a:hover .ccard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (max-width: 1023px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 599px) { .cgrid { grid-template-columns: 1fr; gap: 36px; } .ccard__title { font-size: 17px; } }

.ccard__cat { text-transform: none; letter-spacing: .06em; }

/* =====================================================================
   2026-09-27 v3（代表指摘「画面一面に1枚が大きく出る」「3列で見せる」「アニメーションを足してよい」「スマホで動かない」）
   ===================================================================== */

/* ---- 一覧ページのヒーロー（コラム・AIニュース・事例・お知らせ）: 低い帯にして、PC 1440×900 の最初の画面でカードの1段目が見える高さに */
.phero--list .phero__inner { min-height: 0; padding: calc(var(--header-h) + 20px) 0 36px; }
.phero--list .crumbs { margin-bottom: 0; padding-bottom: 28px; }
.phero--list .phero__label { margin-bottom: 12px; }
.phero--list .phero__title { font-size: clamp(28px, 1rem + 1.7vw, 44px); line-height: 1.24; max-width: none; }
.phero--list .phero__foot { margin-top: 20px; gap: 16px 64px; align-items: start; }
.phero--list .phero__lead { font-size: 15px; line-height: 1.8; }
.phero--list .meta__row { padding: 6px 0; }
.phero--list + .psec { padding-top: 40px; }
.phero--list + .psec .filter { margin-bottom: 28px; }
.phero--list + .psec .cgrid { margin-top: 0; }
@media (max-width: 767px) {
  .phero--list .phero__inner { padding: calc(var(--header-h) + 16px) 0 28px; }
  .phero--list .crumbs { padding-bottom: 20px; }
  .phero--list .phero__title { font-size: clamp(24px, 6.6vw, 32px); }
  .phero--list .phero__foot { margin-top: 14px; }
  .phero--list .phero__lead { font-size: 14px; }
  .phero--list .phero__meta { display: none; }   /* SP は件数などの表を省き、最初の画面にカードを出す */
  .phero--list + .psec { padding-top: 28px; }
}

/* ---- 事例のカード一覧（/cases/・LP・AX Academy）: PC 3列／タブレット 2列／SP 1列。絵は 16:9 */
.clist--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.clist--grid .citem--illust:last-child:nth-child(even) { grid-column: auto; }
.clist--grid .citem--illust:last-child:nth-child(even) .citem__link { grid-template-columns: none; grid-template-rows: auto 1fr; }
.clist--grid .citem--illust:last-child:nth-child(even) .citem__body { align-self: stretch; }
.clist--grid .citem__body { padding: 20px 22px 24px; }
.clist--grid .citem__title { margin-top: 10px; font-size: 19px; line-height: 1.5; }
.clist--grid .citem__desc { margin-top: 10px; font-size: 14px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clist--grid .citem__more { padding-top: 16px; font-size: 14px; }
.clist__aside { grid-column: span 2; align-self: center; }
.clist__aside .lpnote { margin-top: 0; }
@media (max-width: 1023px) { .clist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .clist__aside { grid-column: 1 / -1; } }
@media (max-width: 599px) { .clist--grid { grid-template-columns: 1fr; gap: 20px; } .clist--grid .citem__title { font-size: 18px; } }

/* ---- 記事冒頭 v3: タイトル・リード・監修を左、サムネイルを右に小さく（コンテナの約40%・最大480px）。メタ表はその下に横並び。SP はタイトル → サムネ（幅100%）→ 本文 */
.ahero { padding-bottom: 40px; }
.ahero .crumbs { margin-bottom: 32px; }
.ahero__grid--eye { grid-template-columns: minmax(0, 1fr) min(40%, 480px); grid-template-areas: "text eye" "meta meta"; align-items: center; column-gap: clamp(32px, 4vw, 64px); row-gap: 36px; }
.ahero__grid--eye .ahero__text { grid-area: text; }
.ahero__grid--eye .ahero__eye { grid-area: eye; margin: 0; width: 100%; max-width: 480px; justify-self: end; }
.ahero__grid--eye .ahero__title { font-size: clamp(28px, 1rem + 1.6vw, 44px); line-height: 1.28; }
.ahero__grid--eye .ahero__lead { margin-top: 18px; font-size: 16px; }
.ahero__grid--eye .ahero__meta { grid-area: meta; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); column-gap: 24px; }
.ahero__grid--eye .ahero__meta .meta__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
.ahero__eye .cthumb { border: 1px solid var(--line); }
.ahero__eye .anthumb--hero { aspect-ratio: 1200 / 630; }
@media (max-width: 900px) {
  .ahero__grid--eye { grid-template-columns: 1fr; grid-template-areas: "text" "eye" "meta"; row-gap: 24px; }
  .ahero__grid--eye .ahero__eye { max-width: none; justify-self: stretch; }
  .ahero__grid--eye .ahero__title { font-size: clamp(24px, 6.6vw, 34px); }
  .ahero__grid--eye .ahero__lead { font-size: 15px; }
  .ahero__grid--eye .ahero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ---- カードの動き: 画面に入ると順に立ち上がり（main.js）、絵は 1.06 → 1 に落ち着く。hover で絵が 1.04 倍にゆっくり寄り、下線が伸びる */
.ccard a, .citem__link { position: relative; }
.ccard a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-reveal) var(--ease-out); }
.citem__link::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-reveal) var(--ease-out); }
.citem--row .citem__link::after { left: 0; right: 0; }
.ccard a:hover::after, .ccard a:focus-visible::after, .citem__link:hover::after, .citem__link:focus-visible::after { transform: scaleX(1); }
.cthumb img, .citem__media img { transition: transform 900ms var(--ease-out); transition-delay: var(--rv-delay, 0ms); }
.js .ccard[data-reveal] .cthumb img, .js .citem[data-reveal] .citem__media img { transform: scale(1.06); }
.js .ccard.is-visible .cthumb img, .js .citem.is-visible .citem__media img { transform: scale(1); transition-duration: 1200ms; }
.ccard a:hover .cthumb img, .js .ccard.is-visible a:hover .cthumb img, .citem__link:hover .citem__media img, .js .citem.is-visible .citem__link:hover .citem__media img { transform: scale(1.04); transition-duration: 900ms; transition-delay: 0ms; }
.ccard a:active .cthumb img, .citem__link:active .citem__media img { transform: scale(1.02); transition-duration: var(--dur-quick); }
@media (prefers-reduced-motion: reduce) { .js .ccard[data-reveal] .cthumb img, .js .citem[data-reveal] .citem__media img { transform: none; } }
html[data-motion="off"].js .ccard .cthumb img, html[data-motion="off"].js .citem .citem__media img { transform: none !important; }

/* ---- 事例詳細のヒーロー v3: 絵・ビフォーアフターは右に小さく（コンテナの約42%・最大520px）。見出しを少し下げ、PC の最初の画面に絵と概要が収まる */
.chero--illust .chero__inner { grid-template-columns: minmax(0, 1fr) min(42%, 520px); align-items: center; padding-bottom: 56px; }
.chero--illust .chero__title { font-size: clamp(30px, 1rem + 2.6vw, 58px); }
.chero--illust .crumbs { margin-bottom: 40px; }
@media (max-width: 900px) { .chero--illust .chero__inner { grid-template-columns: 1fr; } }