/* ============================================================
   IMPL-CSS-CONSOLIDATE-001
   AIページ群（top.html / usecases.html / user.html / ai-native-dev.html）
   追記CSSの集約ファイル。CMS標準CSS（intra-mart-sub.css 等）の
   デフォルトを上書きしない範囲で、各ページ固有の見た目とレスポンシブ
   崩れの調整のみをここに置く。
   ============================================================ */

/* ============================================================
   共通セクション（複数ページで再利用するスタイル）
   ============================================================ */

/* --- 共通: 比較・仕様表 -----------------------------------------
   user.html の .ty-re-compare-table と ai-native-dev.html の
   .ty-dev-table は構造がほぼ同一のため、1つの定義に統合する。 */
.ty-re-compare-table__wrap,
.ty-dev-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ty-re-compare-table,
.ty-dev-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: #fff;
}
.ty-re-compare-table th,
.ty-re-compare-table td,
.ty-dev-table th,
.ty-dev-table td {
  border: 1px solid #d8dde3;
  padding: 16px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.7;
}
.ty-re-compare-table thead th,
.ty-dev-table thead th {
  background: #f4f6f8;
  font-weight: 700;
}
.ty-re-compare-table tbody th {
  background: #f5f7fa;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 690px) {
  .ty-re-compare-table,
  .ty-dev-table {
    min-width: 520px;
  }
  .ty-re-compare-table th,
  .ty-re-compare-table td,
  .ty-dev-table th,
  .ty-dev-table td {
    padding: 12px;
    font-size: 14px;
  }
}

/* --- 共通: 丸数字バッジ付き縦フローリスト -------------------------
   user.html で使用。IMPL-CSS-CONSOLIDATE-001 修正7で
   ai-native-dev.html の「開発の手順」「エンタープライズの土台」にも
   適用し、CMSの ol/ul { list-style: none } リセットで
   番号・マーカーが消える問題に対応する。 */
.ty-re-flow-list {
  list-style: none;
  counter-reset: ty-flow-step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}
.ty-re-flow-list > li {
  position: relative;
  padding: 20px 20px 20px 56px;
  background: #f5f7fa;
  border-radius: 12px;
}
.ty-re-flow-list > li::before {
  counter-increment: ty-flow-step;
  content: counter(ty-flow-step);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #1a2b49;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}
/* 修飾: 順序を持たない並列項目向け（丸数字ではなく中点マーカー）。
   IMPL-CSS-CONSOLIDATE-001 FIX_ONLY追補: ai-native-dev.html
   「エンタープライズの土台」のような並列3項目に丸数字を付けると
   順序があるように誤認されるため、番号の代わりに中点を表示する。 */
.ty-re-flow-list.-unordered > li::before {
  counter-increment: none;
  content: "•";
  font-size: 18px;
}

/* --- 共通: 中央寄せの2ボタンCTA ----------------------------------
   top.html の「できること」直後、usecases.html の中間CTAで使用。
   CMS既定の .ty-re-submv__content__btns（2列グリッドでボタンが
   コンテナ幅いっぱいに伸び、直後のセクションの列見出しに見えてしまう）
   を上書きし、内容幅のボタンを中央に横並びさせる。 */
.ai-top-midcta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.ai-top-midcta .ty-re-submv-btn {
  flex: 0 1 auto;
}
.ai-top-midcta a {
  min-width: 220px;
}
@media (max-width: 690px) {
  .ai-top-midcta {
    flex-direction: column;
    align-items: center;
  }
  .ai-top-midcta a {
    min-width: 0;
    width: 100%;
  }
}

/* --- 共通: 3カードiconlistのタブレット帯1列化 ---------------------
   top.html（AIの位置づけ／できること）・user.html（作る・把握する・
   守る）の .ty-re-iconlist__list.-list3 が、CMS既定では691px以上で
   常に3列になり691〜980pxで窮屈になるため、その帯だけ1列にする。
   981px以上はCMS既定の3列（変更なし）。 */
@media (min-width: 691px) and (max-width: 980px) {
  .ty-re-iconlist__list.-list3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ============================================================
   aipコンポーネント（ADR-0012）
   旧ドラフト（Phase 0独自デザイン）の視覚言語を、CMS骨格
   （head・共通ヘッダー/フッター・ヒーロー・CONTACT帯・ブレークポイント
   690/980px）はそのまま維持したうえで、本文セクション内だけに適用する
   独自コンポーネント群。IMPL-V2-TOP-001でtop.htmlへ初適用。
   既存の ty-re-* / ai-top-* クラスは変更しない。
   ============================================================ */

/* --- eyebrow: セクション上部の小さな英字ラベル ------------------- */
.aip-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1873ad;
}
.aip-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #1873ad;
}

/* --- コンセプト: 転換の1行＋h3×3（1つは図つき） ------------------- */
.aip-concept-turn {
  margin: 0 0 0.75em;
  font-size: 1.05rem;
  font-weight: 700;
  color: #17243d;
}
.aip-concept-list {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}
.aip-concept-item__h3 {
  margin: 0 0 0.5em;
  font-size: 1.1rem;
  color: #17243d;
}
.aip-concept-item__body {
  margin: 0;
  color: #444;
  line-height: 1.8;
}
.aip-figure {
  margin: 24px 0 0;
  max-width: 720px;
}
.aip-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* --- できること: アイコンなし3カード（左テキスト・右カードではなく
   横並びカードグリッド）。981px以上3列、980px以下（タブレット・スマホ）
   1列。 --------------------------------------------------------- */
.aip-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .aip-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aip-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  height: 100%;
  padding: 28px;
  background: #fff;
  border: 1px solid #dde2e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 36, 61, 0.05);
}
.aip-card__for {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7684;
}
.aip-card__h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #17243d;
}
.aip-card__body {
  margin: 0;
  color: #444;
  line-height: 1.8;
}
.aip-card__list {
  margin: 0.4em 0 0;
  padding-left: 1.2em;
  color: #444;
  line-height: 1.8;
}
.aip-card__list li {
  margin-bottom: 0.3em;
}
.aip-card__link {
  margin-top: auto;
  padding-top: 0.5em;
}
.aip-card__link a {
  color: #1873ad;
  font-weight: 700;
}
.aip-cards-note {
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: #6b7684;
}

/* --- 購買申請の1枚図: 番号チップ＋矢印区切りの横並び4ステップ ------
   981px以上4列＋矢印、691〜980pxは2列（矢印は隠す）、
   690px以下は1列縦積み（区切りは↓）。既存 .ty-uc-flow と同じ考え方だが、
   独立クラスとして新規定義する。 ------------------------------------ */
.aip-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.aip-step {
  position: relative;
  padding: 24px;
  background: #fff;
  border: 1px solid #dde2e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 36, 61, 0.05);
}
.aip-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(50%, -50%);
  font-size: 1.2em;
  line-height: 1;
  color: #9aa5b1;
}
.aip-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0.75em;
  border-radius: 50%;
  background: #17243d;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.aip-step__name {
  margin: 0 0 0.6em;
  font-size: 1.05rem;
  color: #17243d;
}
.aip-step__ai,
.aip-step__human {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
}
.aip-step__ai {
  color: #1873ad;
  font-weight: 700;
}
.aip-step__human {
  color: #444;
}
@media (min-width: 691px) and (max-width: 980px) {
  .aip-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
  .aip-step:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 690px) {
  .aip-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .aip-step:not(:last-child)::after {
    content: "↓";
    top: auto;
    left: 50%;
    right: auto;
    bottom: -28px;
    transform: translate(-50%, 0);
  }
}
.aip-steps-link {
  margin: 20px 0 0;
}
.aip-steps-link a {
  color: #1873ad;
  font-weight: 700;
}

/* --- 製品＋CTA: 製品3枚（上部にブランド色の細罫線）＋CTA本文 ------- */
.aip-products {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 691px) {
  .aip-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.aip-product {
  padding: 24px;
  background: #fff;
  border-top: 3px solid #1873ad;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(23, 36, 61, 0.05);
}
.aip-product__name {
  margin: 0 0 0.5em;
  font-size: 1.1rem;
}
.aip-product__name a {
  color: #17243d;
}
.aip-product__body {
  margin: 0;
  color: #444;
  line-height: 1.8;
}
.aip-products-link {
  margin: 20px 0 0;
}
.aip-products-link a {
  color: #1873ad;
  font-weight: 700;
}
.aip-cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #dde2e8;
}
.aip-cta__body {
  margin: 0 0 1em;
  color: #444;
  line-height: 1.8;
}

/* ============================================================
   top.html 固有
   ============================================================ */

/* ADR-0018: 初期案の情報構成をCMS共通デザインへ合わせる。
   書体・見出し・セクション・ボタン・背景は ty-re-* を使用する。
   以下はTOP本文内の配置、図版、タブに必要な補助スタイルのみ。 */
:has(.aip-story-section) .container {
  --aip-header-bottom: 96px;
  --aip-nav-height: 62px;
  --aip-border: #d8dde3;
  --aip-radius: 12px;
}
.aip-story-section,
.aip-story #tagline {
  scroll-margin-top: calc(
    var(--aip-header-bottom) + var(--aip-nav-height) + 16px
  );
}
.aip-story-section.ty-re-bg-gradient .ty-re-title__h2,
.aip-story-section.ty-re-bg-gradient .ty-re-text,
.aip-story-section.ty-re-bg-gradient .ty-re-sup {
  color: #fff;
  border-color: #fff;
}
.aip-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
}
.aip-story-grid > * {
  min-width: 0;
}
.aip-story-head {
  max-width: 960px;
}
.aip-story .ty-re-title__h2 {
  margin-top: 16px;
  text-wrap: balance;
}
.aip-story .aip-card .ty-re-title__h3,
.aip-story .aip-product .ty-re-title__h3 {
  font-size: 2rem;
  line-height: 1.6;
  margin: 8px 0;
}
.aip-story .aip-card .ty-re-text,
.aip-story .aip-product .ty-re-text {
  margin: 0;
}
.aip-story .aip-card:not(.aip-story-card-emphasis) {
  border-color: var(--aip-border);
}
.aip-story .aip-card,
.aip-story .aip-story-diagram,
.aip-story .aip-workflow-map,
.aip-story .aip-product-catalog .aip-product {
  border-radius: var(--aip-radius);
}
.aip-story-grid > .aip-story-diagram {
  width: 100%;
  justify-self: center;
}
/* Miniature diagrams explain the numbered concept and development steps. */
.aip-card-visual {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}
.aip-card-visual > img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 5 / 3;
}
.aip-card-visual > .aip-story-step-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.aip-visual-cards > .aip-card {
  gap: 8px;
}
.aip-story .aip-visual-cards .ty-re-title__h3 {
  margin: 0 0 4px;
  text-wrap: balance;
}
.aip-story-label {
  display: block;
  color: #1873ad;
  font-size: 1.4rem;
  font-weight: 600;
}
.aip-story-card-emphasis {
  border-color: #1873ad;
}
.aip-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1873ad;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.aip-story-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.aip-story-icon {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  color: #1873ad;
}
.aip-story-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.aip-story-features {
  display: grid;
  gap: 20px;
}
.aip-story-feature {
  display: flex;
  align-items: center;
  gap: 16px;
}
.aip-story-figure {
  min-width: 0;
  margin: 0;
  background: #fff;
}
.aip-story-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.aip-story-figure figcaption {
  padding: 16px 20px;
  color: #666;
  font-size: 1.2rem;
  line-height: 1.8;
}
.aip-story-note {
  padding-top: 24px;
  border-top: 1px solid #d8dde3;
}
.aip-story-proof {
  padding: 32px;
  border: 1px solid #d8dde3;
  border-radius: 12px;
  background: #fff;
  color: #333;
}
.aip-story-number {
  font-size: clamp(4.8rem, 5vw, 6.4rem);
  line-height: 1.3;
  color: #1873ad;
}
.aip-story-proof-label {
  font-weight: 600;
  margin: 8px 0;
}
.aip-story-caption {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #666;
}
.aip-story-proof .ty-re-submv__content__btns {
  grid-template-columns: minmax(0, 1fr);
}
.aip-story-diagram {
  padding: 24px;
  background: #fff;
  border: 1px solid #d8dde3;
  border-radius: 12px;
  color: #333;
}
/* Keep output names readable within the shared cards. */
.aip-story-output-cards .ty-re-title__h3 span {
  display: inline-block;
}
/* Keep the existing illustration within the shared diagram frame. */
.aip-generation-figure,
.aip-governance-figure,
.aip-illustration-figure {
  margin: 0;
}
.aip-generation-figure img,
.aip-governance-figure img,
.aip-illustration-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
}
.aip-illustration-figure img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.aip-governance-figure img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.aip-figure-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  color: #17243d;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
}
.aip-figure-labels > span {
  padding: 8px 4px;
  border-radius: 4px;
  background: #f4f9fc;
}
.aip-story-diagram > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.aip-story-track {
  fill: none;
  stroke: #d8dde3;
  stroke-width: 6;
  stroke-linecap: round;
}
.aip-story-flow {
  fill: none;
  stroke: #1873ad;
  stroke-width: 3;
  stroke-linecap: round;
}
.aip-story-loop {
  fill: none;
  stroke: #666;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.aip-story-legend,
.aip-story-legend span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.2rem;
}
.aip-story-legend {
  gap: 16px;
}
.aip-story-legend-human,
.aip-story-legend-ai {
  width: 10px;
  height: 10px;
  background: #17243d;
  border-radius: 50%;
}
.aip-story-legend-ai {
  border: 2px solid #1873ad;
  border-radius: 0;
  background: #fff;
  transform: rotate(45deg);
}
.aip-story a:focus-visible {
  outline: 3px solid #1873ad;
  outline-offset: 4px;
}
.aip-story-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aip-story-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #333;
  text-decoration: none;
}
.aip-story-product .aip-story-link {
  margin-top: auto;
  padding-top: 24px;
}
a.aip-story-product:hover {
  box-shadow: 0 2px 8px rgba(23, 36, 61, 0.12);
}
.aip-story-output-cards,
.aip-story-process-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}
.aip-story-development-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  list-style: none;
  padding: 0;
}
.aip-story-development-steps > .aip-card {
  position: relative;
}
.aip-story-development-steps > .aip-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #1873ad;
  border-right: 2px solid #1873ad;
  transform: translateY(-50%) rotate(45deg);
}
.aip-development-title-phrase {
  display: inline-block;
}
.aip-concept-title-phrase {
  display: inline-block;
}
/* The connectors follow 1 → 2 → 3 → 4 → 1 at each breakpoint. */
.aip-concept-cycle {
  position: relative;
  margin-top: 32px;
  padding-bottom: 40px;
  color: #1873ad;
}
.aip-concept-cycle .aip-story-process-steps {
  gap: 40px;
  margin: 0;
}
.aip-concept-cycle .aip-card {
  position: relative;
  color: #333;
}
.aip-concept-next {
  position: absolute;
  display: block;
  top: calc(50% - 10px);
  left: calc(100% + 4px);
  width: 32px;
  height: 20px;
  color: #1873ad;
  pointer-events: none;
}
.aip-concept-next img {
  display: block;
  width: 100%;
  height: 100%;
}
.aip-concept-cycle .aip-card:last-child .aip-concept-next {
  display: none;
}
.aip-concept-loop {
  position: absolute;
  bottom: 0;
  left: calc((100% - 120px) / 8);
  right: calc((100% - 120px) / 8);
  height: 40px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  pointer-events: none;
}
.aip-concept-loop::before,
.aip-concept-loop::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.aip-concept-loop::before {
  top: 2px;
  left: -6px;
  transform: rotate(45deg);
}
.aip-concept-loop::after {
  bottom: -6px;
  left: 50%;
  transform: rotate(-45deg);
}
@media (min-width: 691px) and (max-width: 980px) {
  .aip-concept-cycle {
    padding-bottom: 0;
  }
  .aip-concept-cycle .aip-story-process-steps {
    grid-template-areas: "one two" "four three";
    grid-auto-rows: 1fr;
  }
  .aip-concept-cycle .aip-card:nth-child(1) {
    grid-area: one;
  }
  .aip-concept-cycle .aip-card:nth-child(2) {
    grid-area: two;
  }
  .aip-concept-cycle .aip-card:nth-child(3) {
    grid-area: three;
  }
  .aip-concept-cycle .aip-card:nth-child(4) {
    grid-area: four;
  }
  .aip-concept-cycle .aip-card:nth-child(2) .aip-concept-next {
    top: calc(100% + 10px);
    left: calc(50% - 16px);
    transform: rotate(90deg);
  }
  .aip-concept-cycle .aip-card:nth-child(3) .aip-concept-next {
    left: -36px;
    transform: rotate(180deg);
  }
  .aip-concept-cycle .aip-card:nth-child(4) .aip-concept-next {
    display: block;
    top: -30px;
    left: calc(50% - 16px);
    transform: rotate(-90deg);
  }
  .aip-concept-loop {
    display: none;
  }
}
@media (max-width: 690px) {
  .aip-concept-cycle {
    padding: 0 28px 0 0;
  }
  .aip-concept-cycle .aip-story-process-steps {
    gap: 32px;
    grid-auto-rows: 1fr;
  }
  .aip-concept-next {
    top: calc(100% + 6px);
    left: calc(50% - 16px);
    transform: rotate(90deg);
  }
  .aip-concept-loop {
    top: calc((100% - 96px) / 8);
    bottom: calc((100% - 96px) / 8);
    left: auto;
    right: 0;
    width: 28px;
    height: auto;
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 0 20px 20px 0;
  }
  .aip-concept-loop::before {
    top: -6px;
    left: 2px;
    transform: rotate(-45deg);
  }
  .aip-concept-loop::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -6px;
    transform: rotate(45deg);
  }
}
@media (min-width: 691px) {
  .aip-story-process-steps .ty-re-title__h3 {
    min-height: 3.2em;
  }
}
.aip-story-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #17243d;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
}
@media (max-width: 980px) {
  .aip-story {
    --aip-header-bottom: 68px;
  }
  .aip-story-output-cards,
  .aip-story-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aip-story-development-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .aip-story-development-steps > .aip-card:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -21px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .aip-story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .aip-story-diagram {
    max-width: 600px;
    width: 100%;
  }
}
@media (max-width: 690px) {
  .aip-story {
    --aip-nav-height: 102px;
  }
  .aip-story-output-cards,
  .aip-story-process-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .aip-story-products {
    grid-template-columns: minmax(0, 1fr);
  }
  .aip-story-proof,
  .aip-story-diagram {
    padding: 24px;
  }
}

/* ADR-0016: TOP内で完結するLP。既存ページへの影響を避けて専用クラスに限定。 */
.aip-lp-nav {
  position: sticky;
  top: var(--aip-header-bottom, 96px);
  z-index: 900;
  background: #fff;
  border-block: 1px solid #dde2e8;
  box-shadow: 0 3px 8px rgba(23, 36, 61, 0.04);
}
.aip-lp-nav > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  padding-block: 8px;
}
.aip-lp-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #17243d;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.aip-lp-nav a[aria-current="location"] {
  color: #1873ad;
  border-bottom-color: currentColor;
}
.aip-lp-nav a:hover {
  color: #1873ad;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.aip-lp-nav a:focus-visible,
.aip-lp-section a:focus-visible {
  outline: 3px solid #1873ad;
  outline-offset: 4px;
}
.aip-lp-section {
  scroll-margin-top: 120px;
  padding-block: clamp(48px, 6vw, 88px);
}
.aip-lp-section .aip-eyebrow {
  font-size: 1.4rem;
}
.aip-lp-subtitle {
  margin: 32px 0 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #17243d;
}
.aip-lp-steps,
.aip-lp-dev-steps {
  padding: 0;
  list-style: none;
}
.aip-lp-steps .aip-step__ai,
.aip-lp-steps .aip-step__human,
.aip-lp-dev-steps .aip-step__human {
  font-size: 1.6rem;
}
.aip-lp-steps .aip-step__human {
  margin-top: 8px;
}
.aip-lp-step-detail {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #dde2e8;
  color: #444;
  font-size: 1.6rem;
  line-height: 1.8;
}
.aip-lp-note {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 3px solid #1873ad;
  background: #fff;
}
.aip-lp-note h3 {
  margin: 0 0 8px;
  color: #17243d;
  font-size: 1.8rem;
  font-weight: 700;
}
.aip-lp-note p {
  margin: 0;
  font-size: 1.6rem;
  color: #444;
  line-height: 1.8;
}
.aip-lp-products .aip-product {
  display: flex;
  flex-direction: column;
}
.aip-lp-products .aip-card__link {
  padding-top: 24px;
}
.aip-lp-related {
  margin: 12px 0 0;
  font-size: 1.4rem;
}
.aip-lp-related a {
  color: #1873ad;
}
@media (min-width: 981px) {
  .aip-lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 691px) and (max-width: 980px) {
  .aip-lp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 690px) {
  .aip-lp-nav > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    padding-block: 6px;
  }
  .aip-lp-nav a {
    justify-content: center;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .aip-lp-note {
    padding: 20px;
  }
}

/* CMSでは1rem=10px。LP内の見出し・本文・補助ラベルの可読性を揃える。 */
.aip-lp-section .ty-re-text,
.aip-lp-section .aip-card__body,
.aip-lp-section .aip-product__body,
.aip-lp-section .aip-cta__body,
.aip-lp-section .aip-card__link {
  font-size: 1.6rem;
  line-height: 1.8;
}
.aip-lp-section .aip-card__h3,
.aip-lp-section .aip-product__name,
.aip-lp-section .aip-step__name {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
.aip-lp-section .aip-step__num {
  font-size: 1.4rem;
}
.aip-lp-section.ty-re-bg-gradient .aip-eyebrow {
  color: #fff;
}
.aip-lp-section.ty-re-bg-gradient .aip-eyebrow::before {
  background: #fff;
}
#tagline .ai-top-hero-meta p {
  font-size: 1.4rem;
}

/* IMPL-RENEWAL-002 / IMPL-CSS-CONSOLIDATE-001 修正2:
   3ドア化に伴う ty-opinion のグリッド調整（このページのみ）。
   3列表示は981px以上のみとし、691〜980pxは1列にする。 */
.ty-opinion.ty-opinion--doors3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 981px) {
  .ty-opinion.ty-opinion--doors3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ty-opinion-item__image--usecase img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* IMPL-FIX-TOP-002: ADR-0007の原文差し替えで3本柱見出しが長くなったための最小調整（このページのみ） */
.ty-re-iconlist__list.-list3 .ty-re-iconlist__list__title {
  line-height: 1.4;
}
@media (min-width: 691px) {
  .ty-re-iconlist__list.-list3 .ty-re-iconlist__list__title {
    min-height: calc(1.8rem * 1.4 * 3);
  }
}
/* IMPL-TONE-TOP-002: ヒーロー直下の提供時期・信頼シグナル行（このページのみ） */
.ai-top-hero-meta {
  margin-top: 0.75rem;
}
.ai-top-hero-meta p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}
/* IMPL-TONE-TOP-002: 3ドアの「このページでわかること」リスト（このページのみ） */
.ai-top-door-points {
  margin-top: 1rem;
}
.ai-top-door-points__label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
}
.ai-top-door-points__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-top-door-points__list li {
  position: relative;
  padding-left: 1.1em;
  font-size: 0.9rem;
  line-height: 1.6;
}
.ai-top-door-points__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
/* IMPL-COPY-TOP-001: AIの位置づけカードの製品名リンク行（このページのみ） */
.ai-top-positioning-product {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}
.ai-top-positioning-product a {
  color: inherit;
}
/* IMPL-IMG-EMBED-001: AIの位置づけの図（このページのみ）。
   AI生成イラストに差し替え済み。.ty-img-radius（CMS共通ユーティリティ）
   で角丸をつけ、既存の見た目に馴染ませる。紺〜青のグラデーション背景
   （.ty-re-bg-gradient）の上でも違和感がないよう幅は親要素いっぱいに
   広げる。 */
.ai-top-positioning-figure {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   usecases.html 固有
   ============================================================ */

/* IMPL-TONE-UC-002: 手順リスト・分担表（このページのみ） */
.ty-uc-steps {
  padding-left: 1.4em;
}
.ty-uc-steps > li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}
.ty-uc-role-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ty-uc-role-table th,
.ty-uc-role-table td {
  border: 1px solid #d8dde3;
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: top;
}
.ty-uc-role-table th {
  background: #f4f6f8;
  font-weight: 700;
}
.ty-uc-role-table ul {
  margin: 0;
  padding-left: 1.2em;
}
.ty-uc-role-table ul li {
  margin-bottom: 0.3em;
}
@media (max-width: 690px) {
  .ty-uc-role-table,
  .ty-uc-role-table thead,
  .ty-uc-role-table tbody,
  .ty-uc-role-table th,
  .ty-uc-role-table td,
  .ty-uc-role-table tr {
    display: block;
    width: 100%;
  }
  .ty-uc-role-table thead {
    display: none;
  }
  .ty-uc-role-table td {
    border: none;
    border-bottom: 1px solid #d8dde3;
    padding: 0.5em 0;
  }
  .ty-uc-role-table td:last-child {
    border-bottom: none;
  }
  .ty-uc-role-table td::before {
    content: attr(data-role-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.3em;
  }
}
/* IMPL-UC-V5-001: 購買申請フロー（4ステージ横断図）＋関連場面カード（このページのみ） */
.ty-uc-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
}
.ty-uc-flow__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  height: 100%;
  padding: 1.5em;
  border: 1px solid #d8dde3;
  border-radius: 8px;
}
.ty-uc-flow__stage:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(50%, -50%);
  font-size: 1.4em;
  line-height: 1;
  color: #55636b;
}
.ty-uc-flow__label {
  margin: 0;
  font-size: 0.85em;
  font-weight: 700;
  color: #55636b;
}
/* IMPL-CSS-CONSOLIDATE-001 修正4:
   691〜980pxは4列のままだとバッジ・ボタンが窮屈に崩れるため、
   2×2グリッドにする。矢印は2列時の折返し位置で不自然になるため
   非表示にし、①〜④ラベルで順序を示す。981px以上4列・690px以下1列は現状維持。 */
@media (min-width: 691px) and (max-width: 980px) {
  .ty-uc-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
  .ty-uc-flow__stage:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 690px) {
  .ty-uc-flow {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ty-uc-flow__stage:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 50%;
    bottom: -28px;
    transform: translate(50%, 0);
  }
}
.ty-uc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
}
@media (max-width: 980px) {
  .ty-uc-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ty-uc-cards > li:last-child {
    grid-column: span 2;
  }
}
@media (max-width: 690px) {
  .ty-uc-cards {
    grid-template-columns: 1fr;
  }
  .ty-uc-cards > li:last-child {
    grid-column: auto;
  }
}
.ty-uc-card {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  height: 100%;
  padding: 1.5em;
  border: 1px solid #d8dde3;
  border-radius: 8px;
}
.ty-uc-card__cat {
  margin: 0;
  font-size: 0.85em;
  color: #55636b;
}
.ty-uc-card__h {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.6;
}
/* IMPL-FIX-UCCSS-001: 「使う人」「効果」行（このページのみ）。
   使う人は .ty-uc-card__cat と同じ控えめなメタ表示。
   効果は「動くとき」と同系色だが太字にせず、本文より軽く強調する。 */
.ty-uc-card__user {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.7;
  color: #55636b;
}
.ty-uc-card__when {
  margin: 0;
  line-height: 1.7;
  font-weight: 700;
  color: #0f5fa8;
}
.ty-uc-card__ai,
.ty-uc-card__human {
  margin: 0;
  line-height: 1.7;
}
.ty-uc-card__effect {
  margin: 0;
  line-height: 1.7;
  color: #0f5fa8;
}
.ty-uc-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3em 0.9em;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
}
.ty-uc-badge--planned {
  background: #e6f4ea;
  border-color: #b7dfc3;
  color: #1e7f4a;
}
.ty-uc-badge--study {
  background: #fff6d9;
  border-color: #f0dfa0;
  color: #8a6d00;
}
.ty-uc-badge--demo {
  background: #eceff1;
  border-color: #cfd8dc;
  color: #55636b;
}
.ty-uc-card__detail-link {
  margin-top: auto;
}

/* ============================================================
   user.html 固有
   ============================================================ */
/* IMPL-IMG-EMBED-001: 「組み込みの流れ」直後の図（このページのみ）。
   AI生成イラストに差し替え済み。top.htmlの .ai-top-positioning-figure
   と同じ考え方で幅を絞り、中央寄せにする。 */
.ty-re-figure-placeholder {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* 比較表（.ty-re-compare-table）は共通セクションを、
   フローリスト（.ty-re-flow-list）と作る・把握する・守るの
   3カード1列化（.ty-re-iconlist__list.-list3）も共通セクションを参照。 */

/* ============================================================
   ai-native-dev.html 固有
   ============================================================ */

/* IMPL-TONE-DEV-002: 仕様書サンプル（このページのみ） */
.ty-dev-spec-sample {
  overflow-x: auto;
  background: #1d1f27;
  color: #e8eaf0;
  padding: 1.2em 1.4em;
  border-radius: 8px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  line-height: 1.6;
}
.ty-dev-spec-sample code {
  white-space: pre;
}
/* 比較表（.ty-dev-table）は共通セクションを参照。
   IMPL-CSS-CONSOLIDATE-001 修正7: 「開発の手順」「エンタープライズの
   土台」は共通の .ty-re-flow-list を適用（CMSの ol/ul リセットで
   番号・マーカーが表示されない問題への対応）。 */

/* ADR-0025: 文脈のある製品導線と、担当・成果物を示す図解。 */
.aip-related-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid #cbd9e2;
  border-left: 3px solid #1873ad;
  border-radius: 8px;
  background: #fff;
  color: #333;
  text-decoration: none;
}
.aip-related-product:hover {
  border-color: #1873ad;
  background: #f4f9fc;
}
.aip-related-product-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.aip-related-product-label {
  color: #666;
  font-size: 1.2rem;
  line-height: 1.6;
}
.aip-related-product-copy strong {
  color: #1873ad;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
}
.aip-related-product-context {
  font-size: 1.3rem;
  line-height: 1.8;
}
.aip-related-product-action {
  display: grid;
  justify-items: center;
  gap: 6px;
  flex: none;
  color: #1873ad;
  font-size: 1.1rem;
}
.aip-related-product-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #b6cedf;
  border-radius: 50%;
  font-size: 2rem;
}
.aip-governance-product,
.aip-usecase-product {
  margin-top: 32px;
}
.aip-governance-product .aip-related-product-label,
.aip-usecase-product .aip-related-product-label {
  color: #17243d;
  font-size: 1.4rem;
  font-weight: 600;
}
@media (max-width: 480px) {
  .aip-governance-product,
  .aip-usecase-product {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .aip-governance-product .aip-related-product-action,
  .aip-usecase-product .aip-related-product-action {
    display: flex;
    align-self: flex-end;
    align-items: center;
    gap: 8px;
  }
  .aip-governance-product .aip-related-product-arrow,
  .aip-usecase-product .aip-related-product-arrow {
    width: 32px;
    height: 32px;
  }
}
.aip-process-diagram,
.aip-handoff-diagram,
.aip-spec-diagram {
  margin: 0;
}
/* 業務フローを主軸に、AIの処理をひとつの工程として示す。 */
.aip-process-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 28px;
  padding: 0;
  list-style: none;
}
.aip-process-chain > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  border: 1px solid #cbd9e2;
  border-radius: 6px;
  color: #17243d;
  text-align: center;
}
.aip-process-chain > li + li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 17px;
  border-top: 1px solid #91b3ca;
}
.aip-process-chain > li + li::after {
  content: "";
  position: absolute;
  left: -7px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-top: 1px solid #1873ad;
  border-right: 1px solid #1873ad;
  transform: rotate(45deg);
}
.aip-process-chain > .aip-process-step-ai {
  border-color: #1873ad;
  background: #edf6fb;
  color: #176799;
}
.aip-process-actor {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 1.1rem;
  line-height: 1.5;
}
.aip-process-actor > svg {
  width: 26px;
  height: 26px;
}
.aip-process-chain strong {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.6;
}
.aip-process-mobile-break {
  display: none;
}
.aip-process-examples {
  padding: 18px 12px;
  border-radius: 6px;
  background: #f4f9fc;
}
.aip-process-examples > p {
  margin: 0 0 14px;
  color: #176799;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.aip-process-examples > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.aip-process-examples li {
  padding: 0 8px;
  color: #17243d;
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: center;
}
.aip-process-examples li + li {
  border-left: 1px solid #cbd9e2;
}
@media (max-width: 480px) {
  .aip-process-chain {
    gap: 12px;
    margin-top: 24px;
  }
  .aip-process-chain > li {
    gap: 14px;
    padding: 14px 2px;
  }
  .aip-process-chain > li + li::before {
    left: -12px;
    width: 11px;
  }
  .aip-process-chain > li + li::after {
    left: -6px;
    width: 5px;
    height: 5px;
    top: calc(50% - 2px);
  }
  .aip-process-actor {
    min-height: 67px;
    font-size: 1rem;
  }
  .aip-process-chain strong {
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.2rem;
  }
  .aip-process-mobile-break {
    display: inline;
  }
  .aip-process-separator {
    display: none;
  }
  .aip-process-examples {
    padding: 16px 4px;
  }
  .aip-process-examples > p {
    font-size: 1.2rem;
  }
  .aip-process-examples li {
    padding: 0 4px;
    font-size: 1.2rem;
  }
  .aip-process-diagram .aip-diagram-foundation {
    gap: 8px;
    font-size: 1.1rem;
    line-height: 1.6;
  }
}
.aip-handoff-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 24px 0 16px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #17243d;
}
.aip-handoff-head > :last-child {
  color: #1873ad;
}
.aip-handoff-body {
  position: relative;
}
.aip-handoff-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 304px;
}
.aip-handoff-steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, 64px);
  gap: 16px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.aip-handoff-steps > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #b9c2cf;
  border-radius: 6px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
}
.aip-handoff-steps > li:nth-child(1) {
  grid-area: 1 / 1;
}
.aip-handoff-steps > li:nth-child(2) {
  grid-area: 2 / 2;
}
.aip-handoff-steps > li:nth-child(3) {
  grid-area: 3 / 1;
}
.aip-handoff-steps > li:nth-child(4) {
  grid-area: 4 / 2;
}
.aip-handoff-steps > li:nth-child(even) {
  border-color: #1873ad;
  background: #edf6fb;
  color: #176799;
}
.aip-handoff-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #17243d;
  color: #fff;
  font-size: 1.1rem;
}
.aip-handoff-steps > li:nth-child(even) .aip-handoff-number {
  background: #1873ad;
}
.aip-handoff-next {
  position: absolute;
  top: 59px;
  right: -36px;
  color: #1873ad;
  font-size: 2rem;
  line-height: 1;
  background: #fff;
  padding: 2px;
}
.aip-handoff-steps > li:nth-child(even) .aip-handoff-next {
  right: auto;
  left: -36px;
}
.aip-diagram-foundation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding: 16px 4px 0;
  border-top: 1px solid #dde2e8;
  color: #666;
  font-size: 1.2rem;
}
.aip-diagram-foundation svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: #1873ad;
}
.aip-spec-set {
  position: relative;
  margin-top: 24px;
  padding-left: 28px;
}
.aip-spec-document {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 12px;
  border: 1px solid #9db7c9;
  background: #f4f9fc;
  border-radius: 6px;
  color: #17243d;
}
.aip-spec-document svg {
  width: 36px;
  height: 44px;
  flex: none;
  color: #1873ad;
}
.aip-spec-document > div {
  display: grid;
  gap: 4px;
}
.aip-spec-document strong {
  font-size: 1.8rem;
  font-weight: 600;
}
.aip-spec-document span {
  font-size: 1.3rem;
}
.aip-spec-document small {
  font-size: 1.2rem;
  color: #666;
}
.aip-spec-generation {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 0 4px;
  color: #1873ad;
  font-size: 1.2rem;
}
.aip-spec-generation > svg {
  display: block;
  width: 100%;
  height: 24px;
}
.aip-spec-outputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.aip-spec-outputs > div {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid #cbd9e2;
  border-radius: 6px;
  text-align: center;
}
.aip-spec-outputs svg {
  width: 44px;
  height: 40px;
  color: #1873ad;
}
.aip-spec-outputs strong {
  font-size: 1.6rem;
  font-weight: 600;
}
.aip-spec-outputs span {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #666;
}
.aip-spec-check {
  margin-top: 16px;
  padding: 12px 4px;
  background: #f3f5f7;
  color: #17243d;
  font-size: 1.3rem;
  text-align: center;
  border-radius: 4px;
}
.aip-spec-update {
  width: fit-content;
  margin: 14px auto 0;
  padding: 0 8px;
  position: relative;
  z-index: 1;
  background: #fff;
  color: #1873ad;
  font-size: 1.2rem;
}
.aip-spec-return {
  position: absolute;
  top: 54px;
  bottom: 10px;
  left: 0;
  right: 48%;
  border: 1.5px solid #91b3ca;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 12px;
}
.aip-spec-return::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  border-top: 1.5px solid #91b3ca;
}
.aip-spec-return::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 18px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #1873ad;
  border-right: 1.5px solid #1873ad;
  transform: rotate(45deg);
}

/* Simple product cards on the TOP LP. */
@media (min-width: 1000px) {
  .aip-product-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.aip-product-catalog .aip-product {
  min-width: 0;
  padding: 28px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
}
.aip-product-catalog a.aip-product:hover {
  border-color: #1873ad;
}
@media (max-width: 690px) {
  .aip-product-catalog .aip-product {
    padding: 24px;
  }
}
@media (max-width: 690px) {
  .aip-related-product {
    padding: 16px;
    gap: 12px;
  }
  .aip-related-product-label {
    font-size: 1.1rem;
  }
  .aip-related-product-context {
    font-size: 1.2rem;
  }
  .aip-handoff-head {
    gap: 28px;
  }
  .aip-handoff-steps {
    column-gap: 28px;
  }
  .aip-handoff-steps > li {
    flex-direction: column;
    gap: 4px;
    padding: 6px 3px;
    font-size: 1.2rem;
  }
  .aip-handoff-number {
    width: 18px;
    height: 18px;
    font-size: 1rem;
  }
  .aip-handoff-next {
    right: -30px;
  }
  .aip-handoff-steps > li:nth-child(even) .aip-handoff-next {
    left: -30px;
  }
  .aip-spec-document {
    gap: 8px;
    padding: 16px 8px;
  }
  .aip-spec-document svg {
    width: 28px;
  }
  .aip-spec-document span {
    font-size: 1.1rem;
  }
  .aip-spec-outputs {
    gap: 10px;
  }
  .aip-spec-check {
    font-size: 1.1rem;
  }
}
.aip-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ADR-0029: 開発資料に沿った備品申請を、横一列の業務フローで示す。 */
.aip-workflow-map {
  margin: 32px 0 0;
  padding: 28px;
  border: 1px solid #d8dde3;
  border-radius: 12px;
  background: #fff;
}
.aip-flow-explorer [hidden] {
  display: none;
}
.aip-flow-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #555;
}
.aip-flow-caption > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.aip-flow-caption strong {
  color: #176799;
  font-weight: 600;
}
.aip-flow-hint {
  margin: 12px 0 16px;
  font-size: 1.1rem;
  color: #777;
  line-height: 1.7;
}
.aip-flow-hint-mobile {
  display: none;
}
.aip-flow-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #bad0df #f3f6f8;
}
.aip-flow-board {
  position: relative;
  min-width: 880px;
  padding: 8px 4px 16px;
}
.aip-flow-connections {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.aip-flow-links {
  position: absolute;
  display: block;
  inset: 0;
}
.aip-flow-link,
.aip-flow-link-progress {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  transform-origin: left center;
  border-radius: 999px;
}
.aip-flow-link {
  height: 1.5px;
  margin-top: -0.75px;
  background: #becbd5;
}
.aip-flow-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #becbd5;
  border-right: 1.5px solid #becbd5;
  transform: translateY(-50%) rotate(45deg);
}
.aip-flow-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #1873ad;
  border-right: 2px solid #1873ad;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
}
.aip-flow-link.is-complete::after {
  animation: fadeIn 0.3s ease 0.7s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.aip-flow-link-progress {
  height: 2.5px;
  margin-top: -1.25px;
  background: #1873ad;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s ease;
}
.aip-flow-link-progress.is-complete {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.aip-flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aip-flow-node {
  --actor-color: #17243d;
  min-width: 0;
}
.aip-flow-node--ai {
  --actor-color: #1873ad;
}
.aip-flow-node--system {
  --actor-color: #357a80;
}
.aip-flow-select {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  height: 142px;
  padding: 14px 12px;
  overflow: hidden;
  border: 1px solid #c5d0d8;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.aip-flow-select:disabled {
  cursor: default;
}
.aip-flow-node--ai .aip-flow-select {
  background: #f1f8fd;
  border-color: #92bcd6;
}
.aip-flow-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.aip-flow-node-number {
  font-size: 1rem;
  color: #748491;
  font-weight: 600;
}
.aip-flow-node-role {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: var(--actor-color);
}
.aip-flow-role-icon {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
}
.aip-flow-role-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.aip-flow-node-title {
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.aip-flow-node-sub {
  margin-top: auto;
  color: #777;
  font-size: 1rem;
  line-height: 1.6;
}
.aip-flow-node.is-complete .aip-flow-select {
  border-color: #8fafc3;
}
.aip-flow-node.is-active .aip-flow-select {
  border-color: var(--actor-color);
  box-shadow: 0 0 0 3px #1873ad14;
}
.aip-flow-node.is-active .aip-flow-node-title {
  color: var(--actor-color);
}
.aip-flow-node.is-active .aip-flow-select::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--actor-color);
}
.aip-flow-select:focus-visible {
  outline: 3px solid #1873ad;
  outline-offset: 3px;
}
.aip-flow-details {
  margin-top: 12px;
  border-top: 1px solid #e2e8ed;
}
.aip-flow-detail {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: center;
  gap: 32px;
  min-height: 310px;
  padding: 24px 4px 0;
}
.aip-flow-detail + .aip-flow-detail {
  margin-top: 24px;
  border-top: 1px solid #e2e8ed;
}
/* Keep the detail area stable as the active workflow step changes. */
.aip-flow-explorer.is-enhanced .aip-flow-details {
  display: grid;
}
.aip-flow-explorer.is-enhanced .aip-flow-detail {
  grid-area: 1 / 1;
  margin-top: 0;
  border-top: 0;
}
.aip-flow-explorer.is-enhanced .aip-flow-detail[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}
.aip-flow-explorer.is-enhanced .aip-flow-detail[hidden] .aip-flow-scene * {
  animation: none !important;
}
.aip-flow-detail-role {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: #176799;
  font-size: 1.2rem;
}
.aip-flow-detail-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}
.aip-flow-detail-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.aip-flow-detail-count {
  margin-left: 8px;
  color: #8996a0;
  font-size: 1.1rem;
}
.aip-flow-detail h3 {
  margin: 0 0 12px;
  font-size: 2.2rem;
  line-height: 1.65;
  font-weight: 600;
  color: #333;
}
.aip-flow-detail-copy > p:not(.aip-flow-detail-role) {
  margin: 0;
  color: #666;
  font-size: 1.3rem;
  line-height: 1.8;
}
.aip-flow-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr);
  align-items: center;
  gap: 8px;
  height: 286px;
  padding: 20px;
  background: #f5f9fc;
  border-radius: 8px;
  color: #176799;
  font-size: 1.2rem;
}
.aip-request-sheet {
  position: relative;
  min-width: 0;
  padding: 18px 14px;
  border: 1px solid #b5cbd9;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 9px #17243d05;
}
.aip-request-sheet-label {
  display: block;
  margin-bottom: 16px;
  color: #7a8c99;
  font-size: 1rem;
  line-height: 1.7;
}
.aip-request-sheet strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.7;
}
.aip-request-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 14px;
  color: #536b7e;
}
.aip-request-value > span {
  color: #8796a1;
  font-size: 1rem;
}
.aip-request-value b {
  font-size: 1.2rem;
  font-weight: 500;
}
.aip-request-file {
  display: block;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #e1e8ed;
  color: #8494a0;
  font-size: 1rem;
}
.aip-request-transfer {
  text-align: center;
  color: #7ba9c7;
}
.aip-request-transfer > span {
  display: block;
  font-size: 2.5rem;
  line-height: 1.4;
  animation: aip-request-transfer 2.8s ease both;
}
.aip-request-transfer small {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #7b919f;
}
.aip-request-need,
.aip-request-finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  line-height: 1.8;
}
.aip-request-icon {
  display: block;
  flex: none;
}
.aip-request-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.aip-request-need .aip-request-icon {
  width: 56px;
  height: 56px;
}
.aip-request-need b {
  font-size: 1.2rem;
  font-weight: 500;
}
.aip-request-need > span,
.aip-request-finish > span {
  color: #8193a0;
  font-size: 1rem;
}
.aip-request-filled {
  margin: 12px 0;
}
.aip-request-filled > span,
.aip-request-reason > span {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: #8796a1;
}
.aip-request-filled b {
  display: block;
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 500;
  animation: aip-request-fill 2.8s ease both;
  animation-delay: calc(var(--item) * 0.2s);
}
.aip-request-reason {
  padding-top: 10px;
  border-top: 1px solid #e2eaf0;
}
.aip-request-reason p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #536b7e;
  animation: aip-request-reveal 2.8s ease both;
}
.aip-request-scan {
  position: absolute;
  top: 24px;
  left: -4px;
  right: -4px;
  height: 2px;
  background: #3c9bcc;
  box-shadow: 0 0 10px #56b5dc;
  opacity: 0;
  animation: aip-request-scan 2.8s ease both;
}
.aip-request-amount {
  margin: 12px 0;
  font-size: 1.2rem;
  line-height: 1.7;
}
.aip-request-snippet {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e2eaf0;
  color: #6f8594;
  font-size: 1.1rem;
  line-height: 1.8;
}
.aip-request-checkline {
  margin: 12px 0;
  color: #536b7e;
  font-size: 1.1rem;
  line-height: 1.7;
}
.aip-request-complete {
  display: block;
  margin-top: 18px;
  padding: 10px;
  border-radius: 4px;
  background: #e8f3f1;
  color: #357a80;
  text-align: center;
  font-size: 1.2rem;
  animation: aip-request-reveal 2.8s ease both;
}
.aip-request-references {
  display: grid;
  gap: 14px;
}
.aip-request-references > div {
  padding: 14px 12px;
  border: 1px solid #c6d6e0;
  border-radius: 4px;
  background: #fff;
}
.aip-request-references span {
  display: block;
  margin-bottom: 8px;
  color: #8296a3;
  font-size: 1rem;
}
.aip-request-references b {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.7;
}
.aip-request-check-result {
  margin-top: 16px;
  animation: aip-request-fill 2.8s ease both;
  animation-delay: calc(var(--item) * 0.18s);
}
.aip-request-check-result b {
  display: block;
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 500;
}
.aip-request-check-result span {
  display: block;
  margin-top: 6px;
  color: #80939f;
  font-size: 1rem;
  line-height: 1.7;
}
.aip-request-destination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  text-align: center;
}
.aip-request-destination > .aip-request-icon {
  width: 34px;
  height: 34px;
}
.aip-request-destination > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 14px 8px;
  border: 1px solid #b5cbd9;
  border-radius: 4px;
  background: #fff;
  animation: aip-request-reveal 2.8s ease both;
}
.aip-request-destination > div .aip-request-icon {
  width: 24px;
  height: 24px;
}
.aip-request-destination strong {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
}
.aip-request-finish > .aip-request-icon {
  width: 36px;
  height: 36px;
}
.aip-request-approved {
  width: 100%;
  padding: 10px;
  background: #357a80;
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
  animation: aip-request-fill 2.8s ease both;
}
.aip-request-finish .aip-request-complete {
  margin-top: 0;
  padding: 0;
  background: none;
  font-weight: 500;
}
.aip-flow-example-note {
  margin: 16px 4px 0;
  color: #87939b;
  font-size: 1rem;
  line-height: 1.7;
  text-align: right;
}
@keyframes aip-request-fill {
  0%,
  20% {
    opacity: 0;
    transform: translateY(5px);
  }
  55%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes aip-request-reveal {
  0%,
  48% {
    opacity: 0;
    transform: translateY(5px);
  }
  80%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes aip-request-transfer {
  0%,
  10% {
    opacity: 0.3;
    transform: translateX(-5px);
  }
  45%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes aip-request-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    transform: translateY(120px);
  }
  75%,
  100% {
    opacity: 0;
    transform: translateY(120px);
  }
}
@media (max-width: 1199px) {
  .aip-workflow-map {
    padding: 24px;
  }
  .aip-flow-detail {
    gap: 24px;
  }
  .aip-flow-detail h3 {
    font-size: 2rem;
  }
  .aip-flow-scene {
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr);
    gap: 6px;
  }
  .aip-request-sheet {
    padding: 14px 10px;
  }
}
@media (max-width: 1000px) {
  .aip-flow-hint-desktop {
    display: none;
  }
  .aip-flow-hint-mobile {
    display: inline;
  }
}
@media (max-width: 760px) {
  .aip-workflow-map {
    padding: 18px;
  }
  .aip-flow-caption {
    font-size: 1.2rem;
    gap: 10px;
  }
  .aip-flow-hint {
    font-size: 1rem;
  }
  .aip-flow-detail {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 470px;
    padding: 20px 0 0;
    align-content: start;
  }
  .aip-flow-detail-copy {
    min-height: 144px;
  }
  .aip-flow-detail-role {
    margin-bottom: 10px;
  }
  .aip-flow-detail h3 {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }
  .aip-flow-detail-copy > p:not(.aip-flow-detail-role) {
    font-size: 1.2rem;
  }
  .aip-flow-scene {
    width: 100%;
    max-width: 460px;
    justify-self: center;
    height: 286px;
    padding: 16px 10px;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.15fr);
    gap: 4px;
  }
  .aip-request-sheet-label {
    margin-bottom: 12px;
    font-size: 0.9rem;
  }
  .aip-request-sheet strong {
    font-size: 1.1rem;
  }
  .aip-request-sheet {
    padding: 14px 8px;
  }
  .aip-request-transfer small {
    font-size: 0.8rem;
  }
  .aip-request-need b {
    font-size: 1.1rem;
  }
  .aip-request-amount,
  .aip-request-value b {
    font-size: 1.1rem;
  }
  .aip-request-references > div {
    padding: 12px 8px;
  }
}
@media (max-width: 370px) {
  .aip-workflow-map {
    padding: 12px;
  }
  .aip-flow-scene {
    padding: 12px 6px;
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.15fr);
    gap: 3px;
    height: 306px;
  }
  .aip-flow-detail {
    min-height: 490px;
  }
  .aip-request-sheet {
    padding: 12px 7px;
  }
  .aip-request-filled b,
  .aip-request-reason p,
  .aip-request-check-result b {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aip-flow-explorer *,
  .aip-flow-explorer *::after {
    animation: none !important;
    transition: none !important;
  }
  .aip-request-scan {
    display: none;
  }
}

/* Editorial placeholders for planned TOP demo videos. */
.aip-demo-visual {
  position: relative;
  width: 100%;
  isolation: isolate;
}
.aip-demo-visual video,
.aip-demo-visual iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aip-demo-visual > img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.18;
}
.aip-demo-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #172640;
  text-align: center;
  line-height: 1.7;
}
.aip-demo-note small {
  color: #0075b9;
  font-size: 12px;
  font-weight: 700;
}
.aip-demo-note strong {
  font-size: 16px;
  font-weight: 700;
}
.aip-card-visual > .aip-demo-visual {
  min-height: 144px;
}
.aip-card-visual .aip-demo-note {
  padding: 8px;
  gap: 4px;
}
.aip-card-visual .aip-demo-note strong {
  font-size: 13px;
}
.aip-card-visual .aip-demo-note small {
  font-size: 10px;
}
.aip-demo-scene > .aip-flow-scene {
  opacity: 0.15;
}
.aip-demo-scene {
  align-self: center;
}
@media (max-width: 760px) {
  .aip-demo-scene {
    max-width: 460px;
    justify-self: center;
  }
  .aip-demo-note {
    padding: 16px;
  }
  .aip-demo-note strong {
    font-size: 14px;
  }
}

/* Keep heading phrases together while allowing responsive line breaks. */
.aip-title-phrase {
  display: inline-block;
  white-space: nowrap;
}