@charset "utf-8";
/* ============================================================================
 * AlphaDrive /ax — AX additions only
 * ----------------------------------------------------------------------------
 * 正本： docs/design/AlphaDrive_Design_System_for_AX_v1.0/DESIGN_SYSTEM.md
 *
 * このファイルは「追加仕様」だけを持つ。原典（assets/css/styles.css）の
 * .c-* / .l-* の見た目は上書きしない。すべての追加は .ax-page 配下に限定する。
 * 値は tokens.css（原典値のAX向け別名）と ax-extensions.css を出発点にしている。
 *
 * 例外的に .ax-page 配下で原典クラスに触れている箇所は、
 * 「原典に無い組み合わせ（FAQ＝lead無しのアコーディオン等）」に限り、
 * 各ブロックに理由を明記している。
 * ========================================================================== */

/* --- 1. トークン（原典値のAX向け別名。元サイトに存在した変数名ではない） --- */
:root {
  --ad-ink: #000000;
  --ad-paper: #ffffff;
  --ad-ground: #f1f3f5;
  --ad-brand: #005abe;
  --ad-muted: #919699;
  --ad-font-ja: "A+mfCv-AXIS Font ベーシック R ProN", sans-serif;
  --ad-font-ja-strong: "A+mfCv-AXIS Font ベーシック B ProN", sans-serif;
  --ad-font-display: "marlide-display-variable", sans-serif;
  --ad-font-latin: "nimbus-sans", sans-serif;
  --ad-display-axis: "wght" 300;
  --ad-gutter: 64px;
  --ad-grid-gap: 40px;
  --ad-grid-columns: 12;
  --ad-size-loop: 15rem;
  --ad-size-page-title: 9rem;
  --ad-size-h2: 2.5rem;
  --ad-size-body: .9375rem;
  --ad-size-label: .875rem;
  --ad-section-gap: 56px;
  --ad-header-reserve: 96px;
  --ad-button-height: 64px;
  --ad-button-radius: 32px;
  --ad-reveal-duration: 600ms;
  --ad-char-step: 100ms;
  --ad-bg-duration: 900ms;
  --ad-countup-duration: 500ms;
  --ad-ease: ease;
  --ad-marquee-px-per-second: 25;
}
@media screen and (max-width: 1024px) {
  :root {
    --ad-gutter: 24px;
    --ad-grid-gap: 24px;
    --ad-grid-columns: 2;
    --ad-size-loop: 7.5rem;
    --ad-size-page-title: 4rem;
    --ad-size-h2: 1.75rem;
    --ad-size-body: .8125rem;
    --ad-size-label: .75rem;
    --ad-section-gap: 48px;
    --ad-header-reserve: 64px;
    --ad-button-height: 56px;
  }
}

/* --- 2. 追加：アクセシビリティ（原典に無い保護） --- */
.ax-page :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ad-brand);
  outline-offset: 5px;
}
.ax-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ad-brand);
  color: var(--ad-paper);
  padding: 16px 24px;
  font-size: var(--ad-size-body);
  text-decoration: none;
}
.ax-skip-link:focus {
  left: 0;
}

/* 固定ヘッダー（原典 .l-header は position:fixed）分のアンカー補正 */
.ax-page [id] {
  scroll-margin-top: calc(var(--ad-header-reserve) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* 原典JSを読み込まないため、メニュー展開時のスクロール固定はAX側で持つ */
body.is-menu-open {
  overflow: hidden;
}

/* --- 3. セクションの骨格（原典の間隔値：200px／120px、余白：64px／24px） --- */
.ax-section {
  padding-left: var(--ad-gutter);
  padding-right: var(--ad-gutter);
}
.ax-section + .ax-section,
.ax-section--gap {
  margin-top: var(--ad-section-gap);
}

/* --- 4. リード（原典 .p-home-mv__summary-title の寸法を継承。
       1文字ずつの遅延表示は使わない：原典の遅延列は20要素までのため） --- */
.ax-lead {
  padding-left: var(--ad-gutter);
  padding-right: var(--ad-gutter);
  margin-top: 0;
}
.ax-lead__title {
  font-feature-settings: "palt";
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 400;
  max-width: 22em;
}
@media screen and (max-width: 1024px) {
  .ax-lead__title {
    font-size: 1.375rem;
    letter-spacing: 1.4px;
  }
}
.ax-lead__title::before {
  content: "";
  display: table;
  margin-bottom: calc((1 - 1.5) * .5em);
}
.ax-lead__title::after {
  content: "";
  display: table;
  margin-top: calc((1 - 1.5) * .5em);
}
.ax-lead__desc {
  margin-top: 20px;
  font-size: var(--ad-size-body);
  line-height: 2;
  max-width: 46em;
}
@media screen and (max-width: 1024px) {
  .ax-lead__desc {
    margin-top: 16px;
  }
}

/* --- 5. マスター段落（AIの抜き出し引用用）
       要件：1つの独立した段落。装飾要素で分断しない。
       罫線は原典の編集型レイアウト（1px #000）に準じた追加仕様。 --- */
.ax-master {
  margin-top: 48px;
  padding-left: var(--ad-gutter);
  padding-right: var(--ad-gutter);
}
@media screen and (max-width: 1024px) {
  .ax-master {
    margin-top: 36px;
  }
}
.ax-master__inner {
  border-top: 1px solid var(--ad-ink);
  border-bottom: 1px solid var(--ad-ink);
  padding: 28px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--ad-grid-gap);
}
@media screen and (max-width: 1024px) {
  .ax-master__inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding: 24px 0;
  }
}
.ax-master__label {
  grid-column: 1 / span 3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--ad-font-latin);
  font-feature-settings: "palt";
  font-size: var(--ad-size-label);
  line-height: 1;
  font-weight: 400;
  padding-top: .35em;
}
@media screen and (max-width: 1024px) {
  .ax-master__label {
    grid-column: auto;
    padding-top: 0;
  }
}
.ax-master__label::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--ad-brand);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.ax-master__text {
  grid-column: 4 / span 9;
  font-family: var(--ad-font-ja);
  font-size: 1.125rem;
  line-height: 1.85;
  font-weight: 400;
  font-feature-settings: "palt";
}
@media screen and (max-width: 1024px) {
  .ax-master__text {
    grid-column: auto;
    font-size: .9375rem;
    line-height: 1.85;
  }
}

/* --- 6. 目次（AEO：見出し単位で参照可能にするための追加部品） --- */
.ax-toc {
  margin-top: 48px;
  padding-left: var(--ad-gutter);
  padding-right: var(--ad-gutter);
}
@media screen and (max-width: 1024px) {
  .ax-toc {
    margin-top: 36px;
  }
}
.ax-toc__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--ad-grid-gap);
}
@media screen and (max-width: 1024px) {
  .ax-toc__inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}
.ax-toc__title {
  grid-column: 1 / span 3;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ad-font-latin);
  font-feature-settings: "palt";
  font-size: var(--ad-size-label);
  line-height: 1;
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  .ax-toc__title {
    grid-column: auto;
  }
}
.ax-toc__title::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--ad-brand);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.ax-toc__list {
  grid-column: 4 / span 9;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ad-grid-gap);
  row-gap: 10px;
  counter-reset: ax-toc;
}
@media screen and (max-width: 1024px) {
  .ax-toc__list {
    grid-column: auto;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}
.ax-toc__item {
  counter-increment: ax-toc;
}
.ax-toc__link {
  display: flex;
  gap: 16px;
  align-items: baseline;
  text-decoration: none;
  font-size: var(--ad-size-body);
  line-height: 1.6;
  font-feature-settings: "palt";
  transition: color 600ms ease;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  padding-bottom: 8px;
}
.ax-toc__link::before {
  content: counter(ax-toc, decimal-leading-zero);
  font-family: var(--ad-font-latin);
  font-size: .75rem;
  color: var(--ad-muted);
  flex-shrink: 0;
}
@media (any-hover: hover) {
  .ax-toc__link:hover {
    color: var(--ad-brand);
  }
}

/* --- 7. 巨大英字ループの置き場（原典 .p-home-service 専用値を流用しない） --- */
.ax-marquee {
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 16px;
}
@media screen and (max-width: 1024px) {
  .ax-marquee {
    padding-top: 56px;
    padding-bottom: 8px;
  }
}

/* --- 8. 見出し＋本文の分割（原典 .c-header-group の文法を使うため追加なし）
       ここでは本文側のリズムだけを持つ --- */
.ax-body > * + * {
  margin-top: 1.25em;
}
.ax-body p {
  font-size: var(--ad-size-body);
  line-height: 2;
  font-weight: 400;
}
.ax-body strong {
  font-family: var(--ad-font-ja-strong);
}
.ax-body a {
  color: var(--ad-brand);
  text-underline-offset: .25em;
}
.ax-button-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 32px;
}
@media screen and (max-width: 1024px) {
  .ax-button-row {
    margin-top: 24px;
    column-gap: 16px;
  }
}

/* セクション見出しと本体の間隔 */
.ax-section__body {
  margin-top: 56px;
}
@media screen and (max-width: 1024px) {
  .ax-section__body {
    margin-top: 40px;
  }
}
/* サービス4項目の間隔（原典は144px／96px。情報密度を上げるため詰めている） */
.ax-service-list {
  display: grid;
  gap: 48px;
  margin-top: 28px;
}
/* 罫線は項目の上端に全幅で引く（左の番号と右の本文が同じ線から始まる） */
.ax-service-list > .c-header-group {
  border-top: 1px solid var(--ad-ink);
  padding-top: 28px;
}
@media screen and (max-width: 1024px) {
  .ax-service-list {
    gap: 36px;
    margin-top: 24px;
  }
  .ax-service-list > .c-header-group {
    padding-top: 20px;
  }
}

/* --- 9. 三機能・登壇などの編集型ブロック（細い罫線と余白で構成する） --- */
.ax-blocks {
  display: grid;
  gap: 0;
}
.ax-block {
  border-top: 1px solid var(--ad-ink);
  padding-top: 32px;
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--ad-grid-gap);
}
.ax-block:last-child {
  border-bottom: 1px solid var(--ad-ink);
}
@media screen and (max-width: 1024px) {
  .ax-block {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding-top: 24px;
    padding-bottom: 28px;
  }
}
.ax-block__head {
  grid-column: 1 / span 4;
}
.ax-block__body {
  grid-column: 5 / span 8;
}
@media screen and (max-width: 1024px) {
  .ax-block__head,
  .ax-block__body {
    grid-column: auto;
  }
}
.ax-block__meta {
  margin-top: 10px;
  color: var(--ad-muted);
  font-feature-settings: "palt";
  font-size: .6875rem;
  line-height: 1.5;
}
.ax-block__link {
  margin-top: 20px;
}

/* --- 10. 実績数字（原典 .c-service-block__data の文法を使う。
       付記・単位は数値要素と分ける＝カウントアップの対象を汚さない） --- */
/* --- 11. 比較表（追加仕様。原典に同じ比較表があったという主張ではない） --- */
.ax-proof {
  margin-top: 40px;
}
@media screen and (max-width: 1024px) {
  .ax-proof {
    margin-top: 28px;
  }
}
.ax-proof-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.ax-proof-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--ad-size-body);
  line-height: 1.8;
  border-top: 1px solid var(--ad-ink);
}
.ax-proof-table caption {
  text-align: left;
  margin-bottom: 14px;
  font-feature-settings: "palt";
  font-size: var(--ad-size-body);
  line-height: 1.5;
}
.ax-proof-table :where(th, td) {
  text-align: left;
  padding: 14px 32px 14px 0;
  border-bottom: 1px solid var(--ad-ink);
  vertical-align: top;
  font-weight: 400;
}
.ax-proof-table :where(th, td):last-child {
  padding-right: 0;
}
.ax-proof-table thead th {
  font-family: var(--ad-font-ja-strong);
  padding-left: 16px;
  padding-right: 16px;
}
.ax-proof-table tbody th[scope="row"] {
  color: var(--ad-muted);
  white-space: nowrap;
}
.ax-proof-table tbody td {
  padding-left: 16px;
  padding-right: 16px;
}
.ax-proof-note {
  display: none;
  margin-top: 16px;
  color: var(--ad-muted);
  font-size: .6875rem;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  .ax-proof-note {
    display: block;
  }
}
.ax-proof-closing {
  margin-top: 20px;
  font-size: var(--ad-size-body);
  line-height: 2;
}

/* --- 12. FAQ（原典 .p-service-accordion を適用。
       原典の __desc は __lead の後に置かれる前提で margin-top を持つ。
       FAQは lead を持たないため、AX配下に限ってその上余白を0にする。） --- */
.ax-faq-list {
  display: grid;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .ax-faq-list {
    gap: 12px;
  }
}
.ax-page .ax-faq-list .p-service-accordion__desc {
  margin-top: 0;
}
/* JavaScript無効時でも回答が読める（初期HTMLに存在し、表示もされる） */
.ax-page .ax-faq-list .p-service-accordion__body {
  overflow: hidden;
}

/* --- 13. 関連リンク（ラベルをアンカーテキストにする） --- */
.ax-links {
  display: grid;
  border-top: 1px solid var(--ad-ink);
}
.ax-links__item {
  border-bottom: 1px solid var(--ad-ink);
}
.ax-links__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  text-decoration: none;
  transition: color 600ms ease;
}
@media screen and (max-width: 1024px) {
  .ax-links__link {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
}
.ax-links__label {
  font-size: var(--ad-size-body);
  line-height: 1.6;
  font-feature-settings: "palt";
}
.ax-links__url {
  font-family: var(--ad-font-latin);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--ad-muted);
  word-break: break-all;
}
@media (any-hover: hover) {
  .ax-links__link:hover {
    color: var(--ad-brand);
  }
  .ax-links__link:hover .ax-links__url {
    color: var(--ad-brand);
  }
}

/* --- 13b. 更新日（AEO：鮮度シグナル。JSON-LD の dateModified と一致させる） --- */
.ax-updated {
  margin-top: 32px;
}
@media screen and (max-width: 1024px) {
  .ax-updated {
    margin-top: 24px;
  }
}
.ax-updated__text {
  border-top: 1px solid var(--ad-ink);
  padding-top: 24px;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--ad-muted);
  font-feature-settings: "palt";
}

/* --- 14. フッターCTA（AXは問い合わせ1系統。原典トップの2系統とは分ける） --- */
.ax-page .ax-contact-only {
  grid-template-columns: 1fr;
}

/* --- 15. 動きを減らす設定（原典に無いAXの追加保護） --- */
@media (prefers-reduced-motion: reduce) {
  .ax-page :is(.c-message, .c-title__en-text, .c-title__ja-text, .c-h1-header__ja, .p-service-philosophy-title, .p-service-philosophy-grid__thumb) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  body.ax-route::after {
    transition: none !important;
  }
}
body.ad-motion-paused::after {
  transition: none !important;
}
body.ad-motion-paused .ax-page :is(.c-title__en-text, .c-title__ja-text) {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}


/* --- 17. 画像・ロゴ（docs/design/images の正式アセットのみ。生成画像は使用しない） --- */

/* AX for Revenue ロゴ（明るい地用のreverse版）と シンボル */
.ax-brandmark {
  margin: 0;
}
.ax-brandmark__img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .ax-brandmark__img {
    width: 170px;
  }
}
.ax-master__mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

/* 肖像（提供アセットのみ。生成の人物画像で代替しない） */
.ax-portrait {
  margin-top: 20px;
  max-width: 160px;
}
.ax-portrait__img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ad-paper);
}
@media screen and (max-width: 1024px) {
  .ax-portrait {
    max-width: 120px;
    margin-top: 16px;
  }
}

/* 書籍カバー */
.ax-book {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.ax-book__thumb {
  width: 100px;
  flex-shrink: 0;
}
.ax-book__img {
  width: 100%;
  height: auto;
  display: block;
}
.ax-book__meta {
  font-size: .6875rem;
  line-height: 1.9;
  color: var(--ad-muted);
  font-feature-settings: "palt";
}
.ax-book__title {
  display: block;
  font-size: var(--ad-size-body);
  line-height: 1.6;
  color: var(--ad-ink);
  margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
  .ax-book {
    margin-top: 20px;
    gap: 16px;
  }
  .ax-book__thumb {
    width: 84px;
  }
}

/* 白抜きロゴ用の暗色プレート。
   「大面積の黒背景を足さない」規律を守るため、ロゴ1点ぶんの図要素に限定する。 */
.ax-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #172435;
  padding: 12px 18px;
  min-height: 56px;
  border-radius: 4px;
}
.ax-logo-plate__img {
  display: block;
  height: auto;
}
.ax-logo-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.ax-logo-row .ax-logo-plate__img--jsol { width: 108px; }
.ax-logo-row .ax-logo-plate__img--ecosystem { width: 196px; }
.ax-logo-row .ax-logo-plate__img--techseed { width: 210px; }
@media screen and (max-width: 1024px) {
  .ax-logo-row {
    margin-top: 16px;
    gap: 12px;
  }
  .ax-logo-plate {
    padding: 10px 14px;
    min-height: 48px;
  }
  .ax-logo-row .ax-logo-plate__img--jsol { width: 88px; }
  .ax-logo-row .ax-logo-plate__img--ecosystem { width: 156px; }
  .ax-logo-row .ax-logo-plate__img--techseed { width: 168px; }
}

/* 収益進化AIサミット */
.ax-summit__logo {
  width: 180px;
  max-width: 70%;
  height: auto;
  display: block;
}
@media screen and (max-width: 1024px) {
  .ax-summit__logo {
    width: 150px;
  }
}
.ax-summit__visual {
  display: block;
}
.ax-summit__visual img {
  width: 100%;
  height: auto;
  display: block;
}
.ax-summit__facts {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  border-top: 1px solid var(--ad-ink);
  padding-top: 14px;
}
@media screen and (max-width: 1024px) {
  .ax-summit__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ad-grid-gap);
  }
}
.ax-summit__facts dt {
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--ad-muted);
  font-feature-settings: "palt";
  margin-bottom: 2px;
}
.ax-summit__facts dd {
  font-size: var(--ad-size-body);
  line-height: 1.6;
  font-feature-settings: "palt";
}
.ax-summit__pair {
  min-width: 0;
}


/* ============================================================================
 * 18. 意匠の強化（/service/philosophy/ の構成語彙を踏襲）
 * ----------------------------------------------------------------------------
 * 参照：docs/design/AlphaDriveのフィロソフィー….html
 *   - .p-service-block__title-number … Marlide の巨大数字＋右罫
 *   - .p-service-philosophy-title    … 青ドット＋青文字のセクションラベル
 *   - .p-service-philosophy-grid     … 全幅のドットグリッド面
 *   - .p-service-philosophy-grid__title … 青の左罫を持つラベルチップ
 *   - .p-service-philosophy-grid__data-item … 実績数値のカード
 * これらは原典クラスをそのまま使う。ここで定義するのは、原典に対応部品がない
 * 「セクション見出しの帯」と、原典のJS描画に依存する部分のCSS代替のみ。
 * ========================================================================== */

/* --- 18.1 セクション見出しの帯（原典 .p-service-block__title の寸法を踏襲） --- */
.ax-section-head {
  display: flex;
  gap: 32px;
  align-items: stretch;
}
@media screen and (max-width: 1024px) {
  .ax-section-head {
    gap: 20px;
  }
}
.ax-section-head__number {
  flex-shrink: 0;
  border-right: 1px solid var(--ad-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-feature-settings: "palt";
  font-family: var(--ad-font-display);
  font-variation-settings: var(--ad-display-axis);
  font-size: 4.5rem;
  line-height: 1;
  padding-right: 32px;
  color: var(--ad-ink);
}
.ax-section-head__number::before {
  content: "";
  display: table;
  margin-bottom: calc((0.85 - 1) * .5em);
}
.ax-section-head__number::after {
  content: "";
  display: table;
  margin-top: calc((0.55 - 1) * .5em);
}
@media screen and (max-width: 1024px) {
  .ax-section-head__number {
    font-size: 2.5rem;
    padding-right: 20px;
  }
}
.ax-section-head__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* セクション本文：見出しは全幅の帯、本文は12列グリッドの 5/span 8 */
.ax-section-body {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--ad-grid-gap);
}
@media screen and (max-width: 1024px) {
  .ax-section-body {
    margin-top: 28px;
    grid-template-columns: 1fr;
  }
}
.ax-section-body__main {
  grid-column: 5 / span 8;
  min-width: 0;
}
.ax-section-body__wide {
  grid-column: 1 / span 12;
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  .ax-section-body__main,
  .ax-section-body__wide {
    grid-column: auto;
  }
}

/* 項目番号（サービス4件）。セクション帯の巨大数字と階層を分けるため中サイズ。 */
.ax-item-number {
  font-feature-settings: "palt";
  font-family: var(--ad-font-display);
  font-variation-settings: var(--ad-display-axis);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--ad-ink);
  margin-bottom: 16px;
}
.ax-item-number::before {
  content: "";
  display: table;
  margin-bottom: calc((0.85 - 1) * .5em);
}
@media screen and (max-width: 1024px) {
  .ax-item-number {
    font-size: 2rem;
    margin-bottom: 12px;
  }
}

/* --- 18.2 ヒーローのグリッド意匠
       原典は #js-grid-area に p5.js で 24px・#d4d6d7 の線を描く。
       vendor.bundle.js を読み込まないため、同じ見えを静的CSSで再現する。 --- */
.ax-hero-grid {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(50% - 20px);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, #d4d6d7 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, #d4d6d7 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  opacity: .9;
}
@media screen and (max-width: 1024px) {
  .ax-hero-grid {
    width: 50%;
    right: -11px;
    background-image:
      repeating-linear-gradient(to right, #d4d6d7 0 1px, transparent 1px 16px),
      repeating-linear-gradient(to bottom, #d4d6d7 0 1px, transparent 1px 16px);
  }
}

/* ヒーローの上部ラベル（原典 .c-title-service__parent の文法） */
.ax-hero-eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
@media screen and (max-width: 1024px) {
  .ax-hero-eyebrow {
    gap: 12px;
    margin-bottom: 16px;
  }
}
.ax-hero-eyebrow__en {
  font-family: var(--ad-font-latin);
  font-feature-settings: "palt";
  font-size: var(--ad-size-label);
  line-height: 1;
  color: var(--ad-brand);
}
.ax-hero-eyebrow__ja {
  font-feature-settings: "palt";
  font-size: .75rem;
  line-height: 1;
  color: var(--ad-muted);
}

/* --- 18.3 パネル内で使う補助 --- */
/* 原典 .p-service-philosophy-grid はコンテナ側の64px余白を前提に -64px でフルブリードする。
   .ax-section も同じ余白を持つため、そのまま入れ子にできる。 */
/* ドットグリッド面の上に置く表は、可読性のため紙面カードに載せる
   （原典が図版を面の上に置くのと同じ扱い）。背景の状態に合わせて反転する。 */
.ax-page .ax-proof .ax-proof-table-scroll {
  background-color: var(--ad-paper);
  transition: background-color 600ms ease;
  padding: 16px 24px;
}
body.is-bg-white .ax-page .ax-proof .ax-proof-table-scroll {
  background-color: var(--ad-ground);
}
@media screen and (max-width: 1024px) {
  .ax-page .ax-proof .ax-proof-table-scroll {
    padding: 12px 16px;
  }
}
.ax-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* --- 18.4 実績数値カード（原典 .p-service-philosophy-grid__data-* を使う際の調整） --- */
.ax-data {
  margin-top: 28px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 1024px) {
  .ax-data {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* 原典の data-item は #F1F3F5。AXでは地がグレーの区画に置くため、
   背景の状態（body.is-bg-white）に対して原典 .c-message--gray と同じ反転をさせる。
   .ax-data 配下に限定した調整で、原典部品そのものの見た目は変えない。 */
.ax-page .ax-data .p-service-philosophy-grid__data-item {
  background-color: var(--ad-paper);
  transition: background-color 600ms ease;
}
body.is-bg-white .ax-page .ax-data .p-service-philosophy-grid__data-item {
  background-color: var(--ad-ground);
}
/* 原典は1枚目を2列ぶち抜きにする（3枚構成のため）。AXは2枚なので等幅に戻す。 */
.ax-page .ax-data .p-service-philosophy-grid__data-item:first-child {
  grid-column: auto;
}
.ax-page .ax-data .p-service-philosophy-grid__data-item {
  padding-top: 18px;
  padding-bottom: 18px;
}
.ax-page .ax-data .p-service-philosophy-grid__data-number {
  font-size: 3.5rem;
}
@media screen and (max-width: 1024px) {
  .ax-page .ax-data .p-service-philosophy-grid__data-number {
    font-size: 2.75rem;
  }
}

/* ============================================================================
 * 19. 情報密度の調整（1画面あたりの情報量を増やす）
 * ----------------------------------------------------------------------------
 * 原典の見出し・余白は「ブランドサイトの1メッセージ／1画面」を前提にした寸法で、
 * 情報を読みに来るこのページでは1画面に入る量が少なすぎた。
 * 原典クラスの寸法は .ax-page 配下に限って縮める（原典部品そのものは変えない）。
 * ========================================================================== */

/* --- 19.1 ページタイトル --- */
.ax-page .c-page-header {
  min-height: 0;
  padding: 56px 64px 48px;
}
.ax-page .c-title {
  gap: 24px;
}
@media screen and (min-width: 1025px) {
  .ax-page .c-title__en {
    font-size: 6.5rem;
  }
}
@media screen and (max-width: 1024px) {
  .ax-page .c-page-header {
    padding: 40px 24px 32px;
  }
  .ax-page .c-title {
    gap: 14px;
  }
  .ax-page .c-title__en {
    font-size: 3.25rem;
  }
}

/* --- 19.2 見出し（H2 / H3） --- */
.ax-page .c-h1-header {
  gap: 14px;
}
.ax-page .c-h3-header {
  gap: 10px;
}
@media screen and (min-width: 1025px) {
  .ax-page .c-h1-header__ja {
    font-size: 1.875rem;
    letter-spacing: 1.5px;
  }
  .ax-page .c-h3-header__ja {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 1024px) {
  .ax-page .c-h1-header {
    gap: 10px;
  }
  .ax-page .c-h1-header__ja {
    font-size: 1.375rem;
    letter-spacing: 1px;
  }
  .ax-page .c-h3-header__ja {
    font-size: 1.0625rem;
  }
}

/* --- 19.3 巨大英字ループ（装飾帯の高さを抑える） --- */
@media screen and (min-width: 1025px) {
  .ax-page .c-message__item {
    font-size: 9rem;
  }
}
@media screen and (max-width: 1024px) {
  .ax-page .c-message__item {
    font-size: 4.5rem;
  }
}

/* --- 19.4 ドットグリッド面・サービス項目 --- */
@media screen and (min-width: 1025px) {
  .ax-page .p-service-philosophy-grid {
    margin: 40px -64px;
    padding: 40px 64px;
  }
}
@media screen and (max-width: 1024px) {
  .ax-page .p-service-philosophy-grid {
    margin: 28px -24px;
    padding: 28px 24px;
  }
  .ax-page .c-header-group-content {
    margin-top: 20px;
  }
}
.ax-page .ax-section-body__wide > .p-service-philosophy-grid:only-child {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- 19.5 見出しを本文の左に置く（広い画面のみ）
       見出しの帯を全幅で1行使うと、本文の左4列が常に空く。
       その空きに見出しを置き、見出しの高さぶんの縦スクロールをなくす。
       対象は .ax-section--side を付けた区画だけ（図版やリストが全幅で続く区画は帯のまま）。 --- */
@media screen and (min-width: 1280px) {
  .ax-section--side {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ad-grid-gap);
    align-items: start;
  }
  .ax-section--side > .ax-section-head {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--ad-header-reserve) + 32px);
    gap: 24px;
  }
  .ax-section--side .ax-section-head__number {
    font-size: 3.5rem;
    padding-right: 24px;
  }
  .ax-section--side .c-h1-header__ja {
    font-size: 1.625rem;
  }
  .ax-section--side > .ax-section-body {
    grid-column: 5 / span 8;
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .ax-section--side .ax-section-body__main {
    grid-column: auto;
  }
}

/* サービス区画：見出しの帯のすぐ下にリード文、続けて項目リスト */
.ax-section--list > .ax-section-body {
  margin-top: 16px;
}
@media screen and (min-width: 1025px) {
  .ax-section--list .ax-section-body__main {
    grid-column: 1 / -1;
  }
}
@media screen and (max-width: 1024px) {
  .ax-section--list > .ax-section-body {
    margin-top: 12px;
  }
}

/* 項目の末尾に置いたドットグリッド面は、下の余白を持たない（区画間の余白と二重になるため） */
.ax-page .c-header-group-content > .p-service-philosophy-grid:last-child {
  margin-bottom: 0;
}

/* --- 19.6 画像の横にボタンを置く行 --- */
.ax-media-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.ax-media-row .ax-logo-plate {
  min-height: 40px;
  padding: 8px 14px;
}
.ax-media-row .ax-logo-plate__img--ecosystem { width: 116px; }
.ax-media-row .ax-logo-plate__img--jsol { width: 56px; }
.ax-media-row .ax-logo-plate__img--techseed { width: 160px; }
@media screen and (max-width: 1024px) {
  .ax-media-row {
    margin-top: 20px;
    gap: 12px;
  }
  .ax-media-row .ax-logo-plate__img--ecosystem { width: 104px; }
  .ax-media-row .ax-logo-plate__img--jsol { width: 50px; }
  .ax-media-row .ax-logo-plate__img--techseed { width: 140px; }
}

/* 書籍：カバーの横に書誌とボタン */
.ax-book__side {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 14px;
}

/* サミット：キービジュアルの横に開催事実とボタン */
.ax-summit__media {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ax-summit__side {
  display: grid;
  justify-items: start;
  gap: 16px;
}
.ax-summit__side .ax-summit__facts {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .ax-summit__media {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --- 19.7 ヘッダー：サービス配下の現在地 --- */
.l-header-nav__child-list-pc-link[aria-current="page"],
.l-header-nav__child-list-sp-link[aria-current="page"] {
  color: var(--ad-brand);
}

/* ============================================================================
 * 20. 区画内の見出し・索引・研究ブロック
 * ========================================================================== */

/* --- 20.1 区画の余白（全幅の図版区画の前後を詰める） --- */
.ax-section--wide > .ax-section-body {
  margin-top: 8px;
}
@media screen and (min-width: 1025px) {
  .ax-page .ax-section--wide .p-service-philosophy-grid {
    padding-top: 20px;
    padding-bottom: 32px;
  }
}
.ax-section--wide + .ax-section {
  margin-top: 48px;
}
@media screen and (max-width: 1024px) {
  .ax-section--wide > .ax-section-body {
    margin-top: 8px;
  }
  .ax-page .ax-section--wide .p-service-philosophy-grid {
    padding-top: 16px;
    padding-bottom: 24px;
  }
  .ax-section--wide + .ax-section {
    margin-top: 40px;
  }
}

/* --- 20.2 区画内の小見出し（旧：ラベルチップ）
       H2 と H3 の間の階層として、青の縦罫＋一段大きい文字で見せる。 --- */
.ax-subhead {
  position: relative;
  margin-bottom: 36px;
  padding-left: 18px;
  font-feature-settings: "palt";
  font-size: 1.75rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 1px;
}
.ax-subhead::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 3px;
  background-color: var(--ad-brand);
}
@media screen and (max-width: 1024px) {
  .ax-subhead {
    margin-bottom: 24px;
    padding-left: 14px;
    font-size: 1.25rem;
  }
}
/* AXIS B が読み込めない環境でも太く見えるよう weight を併記。
   AXIS B（単一ウェイト）に疑似ボールドを重ねないよう font-synthesis を切る。 */
.ax-subhead--strong {
  font-family: var(--ad-font-ja-strong);
  font-weight: 700;
  font-synthesis: none;
  font-size: 1.375rem;
}
@media screen and (max-width: 1024px) {
  .ax-subhead--strong {
    font-size: 1.125rem;
  }
}

/* --- 20.3 サービス導入のリード --- */
.ax-services-lead {
  font-feature-settings: "palt";
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  .ax-services-lead {
    font-size: 1.0625rem;
  }
}

/* --- 20.4 研究：研究機関と研究成果を分けて並べる --- */
.ax-subitems {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}
.ax-subitem {
  border-top: 1px solid rgba(0, 0, 0, .12);
  padding-top: 24px;
}
.ax-subitem__label {
  margin-bottom: 14px;
  font-family: var(--ad-font-ja-strong);
  font-weight: 700;
  font-synthesis: none;
  font-feature-settings: "palt";
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ad-ink);
}
.ax-subitem__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.ax-subitem__logo {
  display: block;
  width: 140px;
  height: auto;
}
.ax-subitem .ax-book {
  margin-top: 0;
}
@media screen and (max-width: 1024px) {
  .ax-subitems {
    margin-top: 20px;
    gap: 16px;
  }
  .ax-subitem__logo {
    width: 120px;
  }
}

/* --- 20.6 フッターCTAの上余白（原典 280px／120px は1画面1メッセージ前提の値） --- */
.ax-page .c-cta {
  margin-top: 40px;
}
@media screen and (max-width: 1024px) {
  .ax-page .c-cta {
    margin-top: 32px;
  }
}

/* --- 16. 印刷（AIクローラではなく人間向けの保険） --- */
@media print {
  .l-header,
  .l-footer__pagetop,
  .ax-toc,
  .c-cta {
    display: none !important;
  }
  .ax-page .p-service-accordion__body {
    display: block !important;
    height: auto !important;
  }
}