/* ============================================================
   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: var(--aip-accent, #1873ad);
}
.aip-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent, #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 var(--aip-accent, #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: var(--aip-accent, #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本文内の配置、図版、タブに必要な補助スタイルのみ。 */
.aip-story {
  --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: var(--aip-accent, #1873ad);
  font-size: 1.4rem;
  font-weight: 600;
}
.aip-story-card-emphasis {
  border-color: var(--aip-accent, #1873ad);
}
.aip-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--aip-accent, #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 {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--aip-accent, #1873ad);
}
.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: var(--aip-accent, #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: var(--aip-softest, #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: var(--aip-accent, #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 var(--aip-accent, #1873ad);
  border-radius: 0;
  background: #fff;
  transform: rotate(45deg);
}
.aip-story a:focus-visible {
  outline: 3px solid var(--aip-accent, #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 var(--aip-accent, #1873ad);
  border-right: 2px solid var(--aip-accent, #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: var(--aip-accent, #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;
  top: calc(50% - 10px);
  left: calc(100% + 4px);
  width: 32px;
  height: 20px;
  color: var(--aip-accent, #1873ad);
  pointer-events: none;
}
/* The arrow's real markup is hydrated at runtime into this placeholder (see
   ai-top.js) so it survives the CMS stripping literal <svg> children. Make
   the placeholder itself generate no box, so it never becomes an extra flex
   item (with its own gap) inside .aip-card while waiting for hydration. */
[data-aip-icon="concept-next"] {
  display: contents;
}
.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: var(--aip-accent, #1873ad);
  border-bottom-color: currentColor;
}
.aip-lp-nav a:hover {
  color: var(--aip-accent, #1873ad);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.aip-lp-nav a:focus-visible,
.aip-lp-section a:focus-visible {
  outline: 3px solid var(--aip-accent, #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 var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent-deep, #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: var(--aip-accent-deep, #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 var(--aip-accent, #1873ad);
  border-radius: 8px;
  background: #fff;
  color: #333;
  text-decoration: none;
}
.aip-related-product:hover {
  border-color: var(--aip-accent, #1873ad);
  background: var(--aip-softest, #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: var(--aip-accent, #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: var(--aip-accent, #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 var(--aip-accent, #1873ad); border-right: 1px solid var(--aip-accent, #1873ad); transform: rotate(45deg); }
.aip-process-chain > .aip-process-step-ai { border-color: var(--aip-accent, #1873ad); background: var(--aip-soft, #edf6fb); color: var(--aip-accent-dark, #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: var(--aip-softest, #f4f9fc); }
.aip-process-examples > p { margin: 0 0 14px; color: var(--aip-accent-dark, #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: var(--aip-accent, #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: var(--aip-accent, #1873ad); background: var(--aip-soft, #edf6fb); color: var(--aip-accent-dark, #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: var(--aip-accent, #1873ad); }
.aip-handoff-next { position: absolute; top: 59px; right: -36px; color: var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-softest, #f4f9fc); border-radius: 6px; color: #17243d; }
.aip-spec-document svg { width: 36px; height: 44px; flex: none; color: var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent, #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 var(--aip-accent, #1873ad); border-right: 1.5px solid var(--aip-accent, #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: var(--aip-accent, #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: var(--aip-accent-dark, #176799); font-weight: 600; }
.aip-flow-controls { display: flex; align-items: center; gap: 12px; }
.aip-flow-play-state { font-size: 1.1rem; color: #666; }
.aip-flow-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #c4d6e2; border-radius: 6px; background: #fff; color: var(--aip-accent-dark, #176799); font: inherit; font-size: 1.2rem; cursor: pointer; }
.aip-flow-play:hover { background: var(--aip-soft, #edf6fb); }
.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; }
.aip-flow-link { fill: none; stroke: #becbd5; stroke-width: 1.5; marker-end: url(#workflow-arrow); }
.aip-flow-link-progress { fill: none; stroke: var(--aip-accent, #1873ad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .7s ease; }
.aip-flow-link-progress.is-complete { stroke-dashoffset: 0; opacity: 1; }
.aip-flow-link-signal { fill: none; stroke: #64a9d4; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 22; opacity: 0; }
.aip-flow-link-signal.is-current { opacity: 1; }
.aip-flow-explorer.is-playing .aip-flow-link-signal.is-current { animation: aip-flow-signal 1.6s linear infinite; }
.aip-flow-explorer.is-resetting .aip-flow-link-progress { transition: none; }
.aip-flow-track { position: relative; 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: var(--aip-accent, #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 .2s, box-shadow .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-node-role svg { width: 15px; height: 15px; }
/* Reserve the icon's box before ai-top.js hydrates [data-aip-icon] with the actual <svg>. */
.aip-flow-node-icon { display: inline-flex; flex: none; width: 15px; height: 15px; }
.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 var(--aip-accent-tint, #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); transform: scaleX(0); transform-origin: left; }
.aip-flow-explorer.is-playing .aip-flow-node.is-active .aip-flow-select::after { animation: aip-flow-progress 4.8s linear both; }
.aip-flow-select:focus-visible, .aip-flow-play:focus-visible { outline: 3px solid var(--aip-accent, #1873ad); outline-offset: 3px; }
.aip-flow-details { margin-top: 12px; border-top: 1px solid #e2e8ed; }
.aip-flow-detail { display: grid; grid-template-columns: .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: var(--aip-accent-dark, #176799); font-size: 1.2rem; }
.aip-flow-detail-role svg { width: 20px; height: 20px; }
/* Reserve the icon's box before ai-top.js hydrates [data-aip-icon] with the actual <svg>. */
.aip-flow-detail-icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.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: var(--aip-accent-dark, #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: .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-need svg { 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) * .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) * .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 > svg { width: 34px; height: 34px; color: #357a80; }
.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 svg { width: 24px; height: 24px; }
.aip-request-destination strong { font-size: 1.2rem; line-height: 1.6; font-weight: 500; }
.aip-request-finish > svg { width: 36px; height: 36px; color: #17243d; }
.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-explorer.is-enhanced .aip-flow-scene * { animation-play-state: paused; }
.aip-flow-explorer.is-visible:not(.is-motion-paused) .aip-flow-scene * { animation-play-state: running; }
.aip-flow-example-note { margin: 16px 4px 0; color: #87939b; font-size: 1rem; line-height: 1.7; text-align: right; }
@keyframes aip-flow-signal { to { stroke-dashoffset: -46; } }
@keyframes aip-flow-progress { to { transform: scaleX(1); } }
@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: .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-controls { width: 100%; justify-content: flex-end; }
  .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: .9rem; }
  .aip-request-sheet strong { font-size: 1.1rem; }
  .aip-request-sheet { padding: 14px 8px; }
  .aip-request-transfer small { font-size: .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 > img { display: block; width: 100%; height: auto; opacity: .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: var(--aip-demo-accent, #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: .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; }

/* Live workflow scenes, without demo placeholder overlays. */
.aip-flow-visual { width: 100%; align-self: center; }
@media (max-width: 767px) {
  .aip-flow-visual { max-width: 460px; justify-self: center; }
}

/* Detailed intra-mart-style workflow scenes; scoped to the six process previews. */
.aip-flow-scene.aip-rich-scene { display:block; height:auto; min-height:0; width:100%; max-width:none; padding:8px; overflow:hidden; background:#eef2eb; border:1px solid #dfe5d9; border-radius:10px; }
.aip-rich-scene .wf-rich-screen { display:block; width:100%; height:auto; border-radius:5px; box-shadow:0 5px 20px #28382012; }
/* Reserve the mockup's box before ai-top.js hydrates [data-wf-screen] with the
   actual <svg>; scoped to the placeholder <div> only so the hydrated <svg>
   keeps sizing itself from its own viewBox exactly as before. */
.aip-rich-scene div.wf-rich-screen { aspect-ratio:760/460; background:#eef2eb; }
.wf-rich-fill { animation:wf-rich-fill 2.8s cubic-bezier(.65,0,.25,1) both; animation-delay:var(--delay,0s); }
.wf-rich-document { animation:wf-rich-document 1.1s cubic-bezier(.22,1,.36,1) both; filter:drop-shadow(4px 8px 9px #23334126); }
.wf-rich-scan { animation:wf-rich-scan 2.4s cubic-bezier(.65,0,.35,1) both; }
.wf-rich-confirm { animation:wf-rich-confirm .55s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--delay,2s); transform-box:fill-box; transform-origin:center; }
.wf-rich-cursor { animation:wf-rich-cursor 2.6s cubic-bezier(.65,0,.35,1) both; }
.wf-rich-route { stroke-dasharray:447; stroke-dashoffset:447; animation:wf-rich-route 1.6s cubic-bezier(.65,0,.35,1) .3s both; }
@keyframes wf-rich-fill { 0%,8% { opacity:0; clip-path:inset(0 100% 0 0); } 45%,100% { opacity:1; clip-path:inset(0); } }
@keyframes wf-rich-document { from { opacity:0; transform:translate(-20px,12px); } to { opacity:1; transform:translate(0); } }
@keyframes wf-rich-scan { 0% { opacity:0; transform:translateY(0); } 20% { opacity:1; } 80% { opacity:1; transform:translateY(115px); } 100% { opacity:0; transform:translateY(115px); } }
@keyframes wf-rich-confirm { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes wf-rich-cursor { 0%,25% { opacity:0; transform:translate(75px,-55px); } 58%,80% { opacity:1; transform:translate(0); } 88% { transform:translate(0,2px); opacity:1; } 100% { opacity:0; } }
@keyframes wf-rich-route { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) { .aip-rich-scene * { animation:none!important; } .wf-rich-scan,.wf-rich-cursor { display:none; } .wf-rich-route { stroke-dashoffset:0; } }

/* The AI overview shows demo screens directly, without laptop hardware. */
.aip-illustration-figure img.aip-screen-demo { aspect-ratio:auto; border-radius:6px; }

.aip-governance-figure img.aip-screen-demo { aspect-ratio:auto; height:auto; object-fit:contain; border-radius:6px; }

/* TOP media sits directly on the section, without a surrounding card. */
.aip-story .aip-story-diagram.aip-media-unframed {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.aip-story .aip-media-unframed > img { margin-top: 0; }

.aip-story .aip-kv-motion { background:transparent; border:0; box-shadow:none; }
.aip-kv-motion > img { display:block; width:100%; height:auto; }

/* Give the orchestration artwork a hero-scale canvas. */
.aip-story #tagline { overflow: hidden; }
.aip-story #tagline .aip-kv-motion { max-width: none; }
@media (min-width: 981px) {
  .aip-story #tagline .ty-re-submv { gap: 20px; }
  .aip-story #tagline .ty-re-submv__content { flex: 1.12; min-width: 0; position: relative; z-index: 1; }
  .aip-story #tagline .aip-kv-motion { flex: 1.2; min-width: 0; transform: scale(1.05); transform-origin: center; }
  .aip-story #tagline .ty-re-submv__content__h1 { font-size: clamp(42px, 4.3vw, 60px); }
}
@media (max-width: 690px) {
  .aip-story #tagline .aip-kv-motion { width: 100%; }
}

/* The system evaluates a configured rule before selecting its approval branch. */
.wf-route-input { animation:wf-rich-confirm .4s ease-out .1s both; }
.wf-route-incoming, .wf-route-selected { stroke-dasharray:100; stroke-dashoffset:100; }
.wf-route-incoming { animation:wf-route-draw .65s cubic-bezier(.45,0,.55,1) .45s both; }
.wf-route-match { animation:wf-rich-confirm .3s ease-out 1.05s both; }
.wf-route-selected { animation:wf-route-draw .85s cubic-bezier(.45,0,.55,1) 1.55s both; }
.wf-route-destination { animation:wf-rich-confirm .35s ease-out 2.4s both; }
.wf-route-result { animation:wf-rich-confirm .4s ease-out 2.9s both; }
@keyframes wf-route-draw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) {
  .wf-route-incoming, .wf-route-selected { stroke-dashoffset:0; }
}
.aip-kv-demo { display:block; position:relative; width:100%; aspect-ratio:1100/780; overflow:hidden; border:0; background:transparent; }
.aip-kv-demo .aip-kv-stage, .aip-kv-demo svg { display:block; width:100%; height:100%; }
.aip-kv-demo text { font-family:Arial,'Hiragino Sans',sans-serif; }
.aip-kv-demo .aip-kv-pause { position:absolute; right:12px; bottom:10px; background:#fff; border:1px solid #dce2eb; border-radius:50%; width:30px; height:30px; color:#64758b; opacity:0; transition:opacity .2s; }
.aip-kv-demo:hover .aip-kv-pause, .aip-kv-demo:focus-within .aip-kv-pause, .aip-kv-demo .aip-kv-pause:focus-visible { opacity:1; }

.aip-story #tagline .ty-re-submv__content__h1 { font-weight: 700; }