/* ============================================================
   AI活用LP（/ai/） — LP固有スタイル
   ------------------------------------------------------------
   ・共通トークン/共通パーツ（container / btn / section 見出し / reveal /
     ヘッダー / footer / mobile-cta 等）は styles.css を再利用する。
   ・このLPは styles.css の teal 基調をそのまま使う（/hp/ は navy に
     上書きしているが、こちらは上書きしない）。理由は2つ:
       1) 入口商品ごとに配色を分け、/hp/ と見分けがつくようにするため
       2) 上書きが増えるほど共通パーツの見え方が読みにくくなるため
   ・「画面ごとに必ず見るものがある」状態を写真で作る。研修・相談・演習の
     実写を Hero / プランカード / training / results / CTA帯 に敷き、
     写真の無い面には巨大な薄い英字（.ai-watermark）で奥行きを出す。
   ・写真の上に文字を置く箇所（Hero / CTA帯 / results 見出し）は、必ず
     暗幕（scrim）を重ねてコントラスト比 4.5:1 以上を確保する。
   ・写真は内容を隣接テキストが説明しているため alt="" とし、装飾として
     読み上げから外す（文言を増やさない方針も兼ねる）。
   ------------------------------------------------------------
   ・セクション背景は bg-alt → bg → surface → 濃teal帯 を交互に置いて
     リズムを作る（ページが縦に長いので、色の変わり目が章の区切りになる）。
   ------------------------------------------------------------
   目次:
    0. 共通パーツの微調整（reveal stagger / 見出し / ghost ボタン / 数字 / 背景英字）
    1. Hero（全画面写真・左寄せ・価格バッジ）
    2. 課題提起（issues）
    3. こんな組織におすすめ（fit）
    4. 3段メニュー（menu / このページの主役）
    5. CTAバンド（cta-band / 2箇所で共用）
    6. 座学で終わらせない（training / 当日の流れ Step 1-3）
    7. 実施の条件（spec / 受講特典）
    8. 高知でやってきたこと（results）
    9. ご相談から実施まで（flow）
   10. よくあるご質問（faq）
   11. ブリッジ帯（bridge）
   12. 無料相談CTA（contact）
   13. レスポンシブ
   14. モーション（常時アニメ / リビール / スクロール連動の受け皿）
   ============================================================ */


/* ============================================================
   0. 共通パーツの微調整
   ============================================================ */

/* ファーストビューでは追従CTAを出さない。
   Hero の中に同じ「45分の無料相談を予約」ボタンがあるため、モバイルだと
   同じボタンが縦に2つ並び、さらに副ボタン「メニューを見る」が隠れていた。
   スクロールすると top.js が header へ .is-scrolled を付けるので、
   それを合図に出す（.mobile-cta は header の兄弟なので ~ で届く） */
.mobile-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-header.is-scrolled ~ .mobile-cta {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* リビール完了後は合成レイヤーから降ろす。
   styles.css の .reveal は will-change: opacity, transform を持つが、
   表示後も付いたままだと要素が独立レイヤーに載り続け、実際に写真が
   描画から抜ける事象が出た（演習写真とStepカードが丸ごと消えた）。
   フェードは0.6秒なので、外しても体感は変わらない */
.reveal.is-visible { will-change: auto; }

/* 見出しは濃いteal。styles.css の既定（本文色）より締まって見出しが立つ */
.section-title { color: var(--color-primary-darker); }

/* 中央寄せの見出し（左寄せにしたい箇所は .ai-head-center を付けない） */
.ai-head-center.section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ai-head-center .section-title { display: inline-block; }

/* 見出し下の短い下線 */
.ai-head-rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary);
  margin-top: var(--space-3);
}
.ai-head-center .ai-head-rule { margin-inline: auto; }

/* 副CTA用の淡いボタン（styles.css には白背景向けの副ボタンが無いため追加） */
.ai-btn-ghost {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}
.ai-btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* セクション内の小見出し（.section-title の一段下）。
   training の「当日の流れ」・spec の「受講特典」で共用する */
.ai-subhead {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-primary-darker);
  margin-bottom: var(--space-4);
}
.ai-subhead--center { text-align: center; }

/* 本文中の数字を主役にする（spec の「120分」「1〜15名」、results の「90分」）。
   .ai-plan-price と同じ「数字は大きく・単位は小さく」の作法に揃える。
   使いすぎると散らかるので、対象は spec と results の2箇所に限定している */
.ai-num {
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  /* 行の中で数字だけ拡大すると行送りが伸びるので、下端をベースラインへ寄せる */
  vertical-align: -0.02em;
  margin-right: 1px;
}
.ai-num-unit {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-primary-darker);
}

/* 背景の巨大な薄い英字。無地の面に奥行きを出す装飾で、HTML側は
   aria-hidden="true"。セクションは overflow: clip で切る（後述） */
.ai-watermark {
  position: absolute;
  top: clamp(40px, 7vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--color-primary-darker);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
/* 背景英字を敷くセクション。
   overflow は hidden ではなく clip を使う: hidden はスクロールコンテナを
   作るため、中の position: sticky や親子のスクロール挙動に影響が出る。
   clip は切るだけで、横スクロールの発生も同様に防げる */
.ai-fit,
.ai-menu,
.ai-training,
.ai-spec,
.ai-flow,
.ai-faq {
  position: relative;
  overflow: clip;
}
/* 本文は英字より前面に置く（英字は薄いが、重なり順は明示しておく） */
.ai-watermark ~ .container { position: relative; z-index: 1; }


/* ============================================================
   1. Hero（全画面写真・左寄せ）
   写真の左3分の1が白い壁の余白なので、そこへテキストを寄せる。
   暗幕は「左が濃く右へ抜ける」横方向にすると構図に沿い、右側の
   講師・受講者を潰さずに左のコピーだけコントラストを稼げる。
   ============================================================ */
.ai-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78vh, 760px);
  /* 写真の読み込み前／失敗時も白文字が消えないよう、地色を濃tealにする */
  background: var(--color-primary-darker);
  padding-top: calc(var(--header-h) + clamp(32px, 5vh, 64px));
  padding-bottom: clamp(40px, 6vh, 72px);
}
.ai-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦は上寄りに置くと、下端のテーブルより講師・受講者の顔が残る */
  object-position: 50% 42%;
}
/* 暗幕。横方向（左が濃い）＋弱い縦方向の2枚重ね。
   横だけだと上下端の明るい壁で文字が負けるため、縦を足して底上げする */
.ai-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(15, 42, 46, 0.93) 0%,
      rgba(15, 42, 46, 0.88) 28%,
      rgba(15, 42, 46, 0.72) 46%,
      rgba(15, 42, 46, 0.38) 64%,
      rgba(15, 42, 46, 0.10) 82%,
      rgba(15, 42, 46, 0) 100%),
    linear-gradient(to bottom,
      rgba(15, 42, 46, 0.34) 0%,
      rgba(15, 42, 46, 0.08) 42%,
      rgba(15, 42, 46, 0.40) 100%);
  pointer-events: none;
}
.ai-hero-inner {
  position: relative;   /* 写真・暗幕より前面に出す */
  z-index: 1;
  width: 100%;
  text-align: left;
}
/* コピーは写真の壁の範囲に収める。右の被写体へ食い込ませないための上限で、
   暗幕が十分濃い領域（およそ左半分）と一致させている */
.ai-hero-inner > * { max-width: min(560px, 56%); }

/* ここから Hero の半透明パーツは backdrop-filter を使わない。
   背景ぼかしは毎フレーム背後を読み直すため、transform で動く親の中に置くと
   再合成が破綻して要素がチカチカする（Heroへ戻る際に実際に発生した）。
   不透明度と枠線だけでガラス調を作り、blur の分は背景をわずかに濃くして補う */
.ai-hero-label {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.38);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.ai-hero-title {
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 18px rgba(9, 26, 29, 0.5);
  /* 折り返しが 11文字/4文字 に偏るので行長を均す。非対応環境では従来通り */
  text-wrap: balance;
}
.ai-hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  /* 白の 0.92。暗幕込みで実測 4.5:1 以上を確保している */
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-5);
  text-shadow: 0 1px 12px rgba(9, 26, 29, 0.45);
}

/* 価格バッジ3つ（横並び・スマホでは縦積み）。
   写真に馴染ませるため、白い面ではなく半透明の白ガラス調にする */
.ai-hero-prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.ai-hero-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 2px 14px rgba(9, 26, 29, 0.22);
}
.ai-hero-price-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.ai-hero-price-value {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.ai-hero-price-num {
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: -0.03em;
}

.ai-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
}
/* 副ボタンは写真の上では白い板に見えてしまうので、輪郭だけのガラス調にする */
.ai-hero .ai-btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.54);
  color: #fff;
}
.ai-hero .ai-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}

/* ヘッダーを写真に溶かす。
   共通ヘッダーは最上部でも薄い白（rgba(250,251,250,.7)）なので、
   全画面写真の上では画面を横切る白い帯に見えて構図を分断する。
   最上部だけ透明＋白文字にし、スクロールしたら top.js が .is-scrolled を
   付けるので通常の白ヘッダーへ戻る。このLPだけの上書き（styles.css は触らない） */
.site-header:not(.is-scrolled) {
  background: transparent;
}
.site-header:not(.is-scrolled) .brand-name,
.site-header:not(.is-scrolled) .nav-link {
  color: #fff;
}
.site-header:not(.is-scrolled) .nav-link:hover {
  color: rgba(255, 255, 255, 0.75);
}
/* ハンバーガー（767px以下）の3本線も白へ */
.site-header:not(.is-scrolled) .nav-toggle span {
  background: #fff;
}
/* 透明ヘッダーの白文字は写真の明るい部分に乗ると負けるため、
   写真の上端に暗い帯を足して足元を作る。scrim とは別レイヤーにして
   ヘッダー高さ分だけに効かせる */
.ai-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + 56px);
  background: linear-gradient(to bottom, rgba(9, 26, 29, 0.62) 0%, rgba(9, 26, 29, 0.28) 55%, rgba(9, 26, 29, 0) 100%);
  z-index: 1;
  pointer-events: none;
}


/* ============================================================
   2. 課題提起（issues）
   ============================================================ */
.ai-issues { background: var(--color-bg-alt); }
.ai-issue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.ai-issue-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4) var(--space-4);
  box-shadow: var(--shadow-sm);
}
/* 引用符。文言そのものはお客さまの声なので、装飾側で「声」だと分かるようにする */
.ai-issue-quote {
  position: absolute;
  top: 6px;
  left: var(--space-3);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-soft);
  pointer-events: none;
}
.ai-issue-text {
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--color-text);
}


/* ============================================================
   3. こんな組織におすすめ（fit）
   前後が bg-alt（issues）と surface（menu）なので、ここは中間の bg を
   敷いて段階的に明るくする。カードが白なので面としても分離する。
   ============================================================ */
.ai-fit { background: var(--color-bg); }
.ai-fit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 760px;
  margin: 0 auto;
}
.ai-fit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* 各項目は1行の短文。カードの体裁は保ちつつ縦の余白は詰める
     （5枚積むので、1枚あたりの余りがそのままページ長になる） */
  padding: 14px var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ai-fit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.ai-fit-icon svg { width: 15px; height: 15px; }
.ai-fit-text {
  font-size: 1rem;
  line-height: 1.8;
}


/* ============================================================
   4. 3段メニュー（menu / このページの主役）
   ============================================================ */
.ai-menu { background: var(--color-surface); }
.ai-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.ai-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  /* 枠は3枚とも 2px で統一する。強調枠だけ太くすると内寸が2px狭くなり、
     16:9 の写真帯の高さが変わって以降の要素が縦にずれるため
     （旧実装は padding-top を 1px 削って中身の位置だけ合わせていた） */
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  /* 写真は左右いっぱいに出すので、上の余白は持たせず写真から始める */
  padding: 0 var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* 写真とリボンの角を、カードの角丸に合わせて切る */
  overflow: hidden;
}
.ai-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* 強調枠（② 相談する）: 枠色 + リボン + 濃いアイコン地 */
.ai-plan--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.ai-plan-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 写真（position: relative）より後ろに回らないよう重ね順を明示する */
  z-index: 2;
  padding: 8px var(--space-3);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 写真帯（16:9）。カードの左右 padding を負のマージンで打ち消して全幅にする */
.ai-plan-media {
  position: relative;
  /* パララックス時に画像を枠より大きく敷く（14章）。はみ出しをここで切る */
  overflow: hidden;
  margin: 0 calc(-1 * var(--space-4)) var(--space-4);
  aspect-ratio: 16 / 9;
  /* .ai-plan は縦flex。flexアイテムの min-height: auto は中身（写真の
     実寸比 3:2）を下限にしてしまい、16:9 が効かなくなるので明示的に外す */
  min-height: 0;
  /* 読み込み前に白く抜けないよう、淡いteal を敷いておく */
  background: var(--color-primary-soft);
}
/* 絶対配置にして、写真を高さ計算から外す（16:9 は親の aspect-ratio が決める） */
.ai-plan-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 3枚とも被写体（顔・手元）が中央よりやや上にあるため上寄せで切る */
  object-position: 50% 45%;
}

/* アイコンと連番は写真の下端に重ねる。
   写真とアイコンで同じことを二度言わせないための配置で、
   カードの縦の嵩も減る（どちらも aria-hidden の装飾） */
.ai-plan-head {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(to top,
    rgba(15, 42, 46, 0.72) 0%,
    rgba(15, 42, 46, 0.32) 55%,
    rgba(15, 42, 46, 0) 100%);
}
.ai-plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary-dark);
}
.ai-plan-icon svg { width: 23px; height: 23px; }
.ai-plan--featured .ai-plan-icon {
  background: var(--color-primary);
  color: #fff;
}
.ai-plan-step {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}
.ai-plan--featured .ai-plan-step { color: rgba(255, 255, 255, 0.92); }

.ai-plan-verb {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-primary-darker);
}
.ai-plan-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.ai-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding-block: var(--space-3);
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ai-plan-price-pre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary-darker);
}
.ai-plan-price-num {
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.ai-plan-price-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-darker);
}
.ai-plan-price-per {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.ai-plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  line-height: 1.7;
}
.ai-plan-list svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 6px;
  color: var(--color-primary);
}
.ai-plan-note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}


/* ============================================================
   5. CTAバンド（cta-band / menu の後・spec の後の2箇所）
   ページが縦に長いので、読み終えた区切りごとに申し込み口を挟む。
   bridge と同じ濃tealだが、あちらは回遊リンク、こちらは白ボタンで
   「ここで申し込む帯」だと分かるようにしている。
   ============================================================ */
.ai-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-darker);
  color: #fff;
  padding-block: var(--space-6);
}
/* 夕暮れの町並みを敷く。「高知県内なら、会議室まで伺います」と噛み合う絵。
   同じ写真を3連続させないため、締めの #contact-cta は淡い背景のまま残す */
.ai-cta-band-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 上半分は空なので、家並みと道路が入る下寄りを見せる */
  object-position: 50% 78%;
}
/* 暗幕。元から暗い写真だが、灯りの点いた窓が文字に重なりうるので一律に沈める。
   文言が左に寄るぶん、左をさらに濃くしている */
.ai-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15, 42, 46, 0.88) 0%,
    rgba(15, 42, 46, 0.78) 55%,
    rgba(15, 42, 46, 0.68) 100%);
  pointer-events: none;
}
.ai-cta-band-inner {
  position: relative;   /* 写真・暗幕より前面に出す */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
/* 余白を吸わせておくと、幅が詰まったときにボタンだけが下へ回り、
   文言側が中途半端に痩せない */
.ai-cta-band-copy { flex: 1 1 380px; }
.ai-cta-band-title {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.ai-cta-band-sub {
  margin-top: var(--space-1);
  font-size: 0.95rem;
  line-height: 1.7;
  /* 濃teal地なので 0.82 でもコントラスト比は約8:1あり、AAを満たす */
  color: rgba(255, 255, 255, 0.82);
}
.ai-cta-band-btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--color-primary-darker);
  box-shadow: var(--shadow-sm);
}
.ai-cta-band-btn:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   6. 座学で終わらせない（training / 当日の流れ Step 1-3）
   ============================================================ */
.ai-training { background: var(--color-bg-alt); }
.ai-training-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ai-training-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ai-training-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ai-training-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.ai-training-icon svg { width: 17px; height: 17px; }
.ai-training-text {
  font-size: 1rem;
  line-height: 1.8;
}

/* --- 当日の流れ（Step 1-3）＋ 演習写真（縦4:5） --- */
/* この .container 自体を2カラムにして、左に写真・右に Step を積む。
   ラッパー要素を足さずに済むよう、写真は grid-row で3行ぶんまたがせている */
.ai-training-steps {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ai-training-photo {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: stretch;   /* 右列（Step 3枚）の高さいっぱいまで伸ばす */
  min-height: 460px;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
}
/* 絶対配置にして、列の高さが右列で決まっても必ず面を埋める */
.ai-training-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦長写真を細い列で切るので、受講者の顔と手元が残る位置に寄せる */
  object-position: 58% 40%;
}
.ai-training-steps > .ai-subhead { grid-column: 2; grid-row: 1; }
.ai-training-steps > .ai-step-list { grid-column: 2; grid-row: 2; }
.ai-training-steps > .ai-step-note { grid-column: 2; grid-row: 3; }

/* styles.css のリセットは ul だけなので、ol は自前で潰す */
.ai-step-list {
  display: grid;
  /* 右列に収めるので3列ではなく縦積み。左の縦長写真と高さが釣り合う */
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-step {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.ai-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.ai-step-title {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
}
.ai-step-num { color: var(--color-primary); }
.ai-step-tag {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.ai-step-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-step-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  line-height: 1.75;
}
/* チェックアイコンは fit / plan で使っているので、粒度の違いを出すため点にする */
.ai-step-points li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}
.ai-step-note {
  margin-top: var(--space-3);
  font-size: 0.86rem;
  color: var(--color-text-muted);
}


/* ============================================================
   7. 実施の条件（spec / 受講特典）
   ============================================================ */
.ai-spec { background: var(--color-surface); }
.ai-spec-table {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;   /* 角丸から行の地色をはみ出させない */
  box-shadow: var(--shadow-sm);
}
.ai-spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.ai-spec-row:last-child { border-bottom: none; }
/* 行が6つ並ぶので、縞にして横方向の視線を保つ。
   HTMLコメントは要素ではないため :nth-child の数え方には影響しない */
.ai-spec-row:nth-child(odd) { background: var(--color-bg-alt); }
.ai-spec-row dt {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-primary-darker);
}
.ai-spec-row dd {
  font-size: 0.98rem;
  line-height: 1.8;
}

.ai-spec-perks { margin-top: var(--space-6); }
.ai-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 860px;
  margin: 0 auto;
}
.ai-perk {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-soft);
  border-radius: var(--radius);
}
.ai-perk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.ai-perk-icon svg { width: 20px; height: 20px; }
.ai-perk-text {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary-darker);
}


/* ============================================================
   8. 高知でやってきたこと（results）
   ============================================================ */
.ai-results { background: var(--color-surface); }
.ai-record {
  max-width: 860px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* ヘッダーの濃teal地を勉強会の写真に置き換える。
   「実際にやった」ことの証拠なので、小さく添えず面で見せる */
.ai-record-head {
  position: relative;
  /* パララックス時に写真を枠より大きく敷く（14章）。本文側へのはみ出しを切る */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(240px, 34vw, 360px);
  background: var(--color-primary-darker);
  color: #fff;
}
.ai-record-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 手前の講師の後ろ姿（左）と投影を見る参加者（右）が両方入る位置 */
  object-position: 50% 42%;
}
/* 文字は下端に置くので、下から立ち上がる暗幕で可読性を作る */
.ai-record-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 42, 46, 0.92) 0%,
    rgba(15, 42, 46, 0.80) 34%,
    rgba(15, 42, 46, 0.40) 66%,
    rgba(15, 42, 46, 0.16) 100%);
  pointer-events: none;
}
.ai-record-head-copy {
  position: relative;   /* 暗幕より前面 */
  z-index: 1;
  width: 100%;
  padding: var(--space-4);
}
/* backdrop-filter は使わない。背後の写真がパララックスで動くため、
   Hero と同じ再合成のちらつきが起きる（Hero で実際に発生した） */
.ai-record-badge {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: var(--space-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ai-record-title {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 14px rgba(9, 26, 29, 0.45);
}
/* 既定の .ai-num は teal。暗い写真の上では 3.2:1 程度しか出ないので白に変える */
.ai-record-title .ai-num { color: #fff; }
.ai-record-title .ai-num-unit { color: rgba(255, 255, 255, 0.92); }
.ai-record-body { padding: 0 var(--space-4); }
.ai-record-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.ai-record-row:last-child { border-bottom: none; }
.ai-record-row dt {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-primary-darker);
}
.ai-record-row dd { font-size: 0.98rem; }
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.ai-chip {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-weight: 700;
}


/* ============================================================
   9. ご相談から実施まで（flow）
   ============================================================ */
.ai-flow { background: var(--color-bg-alt); }
.ai-flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-flow-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
/* 番号は装飾ではなく手順そのものなので、読める濃さ（primary）で置く */
.ai-flow-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.ai-flow-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
  margin-bottom: var(--space-1);
}
.ai-flow-desc {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}


/* ============================================================
   10. よくあるご質問（faq / 開閉なし・全文表示）
   ============================================================ */
.ai-faq { background: var(--color-surface); }
.ai-faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.ai-faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.ai-faq-q,
.ai-faq-a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.ai-faq-q {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.ai-faq-a {
  font-size: 0.96rem;
  line-height: 1.85;
}
.ai-faq-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}
.ai-faq-mark--a {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}


/* ============================================================
   11. ブリッジ帯（bridge / 濃いteal・全幅）
   ============================================================ */
.ai-bridge {
  background: var(--color-primary-darker);
  color: #fff;
  padding-block: var(--space-6);
  text-align: center;
}
.ai-bridge-text {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto var(--space-3);
}
.ai-bridge-link {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ai-bridge-link:hover { color: var(--color-accent); }


/* ============================================================
   12. 無料相談CTA（contact）
   ============================================================ */
.ai-contact {
  background: var(--color-bg-alt);
  text-align: center;
}
.ai-contact-title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-primary-darker);
  max-width: 720px;
  margin: 0 auto var(--space-3);
}
.ai-contact-lead {
  max-width: 34em;
  margin: 0 auto var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.9;
}
.ai-contact-actions {
  display: flex;
  justify-content: center;
}


/* ============================================================
   13. レスポンシブ
   ブレークポイントは styles.css / hp.css と揃える（900 / 767 / 400）
   ============================================================ */
@media (max-width: 900px) {
  .ai-issue-grid { grid-template-columns: 1fr; }

  /* メニューは主役なので、2列にせず1列で1枚ずつ見せる */
  .ai-plan-grid { grid-template-columns: 1fr; }
  .ai-plan { height: auto; }

  .ai-training-inner { grid-template-columns: 1fr; }
  .ai-training-head { margin-bottom: var(--space-5); }

  /* 当日の流れは1カラムに戻し、演習写真を Step の上へ回す。
     縦2カラムの配置指定（grid-column / grid-row）も解除しないと重なる */
  .ai-training-steps {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .ai-training-photo,
  .ai-training-steps > .ai-subhead,
  .ai-training-steps > .ai-step-list,
  .ai-training-steps > .ai-step-note {
    grid-column: 1;
    grid-row: auto;
  }
  .ai-training-photo {
    align-self: auto;
    min-height: 0;
    /* 全幅なら元の縦横比（4:5）そのままで切らずに置ける */
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    margin-bottom: var(--space-5);
  }

  /* Hero はここから写真の横方向の切れ幅が大きく、左の壁が残らない。
     コピー幅の制限を外し、暗幕も縦方向の一様な暗さに切り替える */
  .ai-hero-inner > * { max-width: 100%; }
  .ai-hero-scrim {
    background: linear-gradient(180deg,
      rgba(15, 42, 46, 0.74) 0%,
      rgba(15, 42, 46, 0.62) 45%,
      rgba(15, 42, 46, 0.82) 100%);
  }

  .ai-flow-list { grid-template-columns: repeat(2, 1fr); }

  .ai-faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* 価格バッジは横並びだと1行に収まらないため縦積みにする */
  .ai-hero-prices {
    flex-direction: column;
    align-items: stretch;
  }
  .ai-hero-price { justify-content: space-between; }

  .ai-hero-actions .btn { width: 100%; }

  .ai-record-row { grid-template-columns: 1fr; gap: var(--space-1); }

  /* CTAバンドは横並びだとボタンが潰れるので縦積み＋全幅ボタン */
  .ai-cta-band-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-3);
  }
  .ai-cta-band-btn { width: 100%; }
  /* 文言が中央寄せになるので、左を濃くする意味がなくなる。一様に沈める */
  .ai-cta-band::after {
    background: linear-gradient(180deg,
      rgba(15, 42, 46, 0.86) 0%,
      rgba(15, 42, 46, 0.80) 100%);
  }

  /* タグを見出しの上へ回し、見出しの折り返し幅を確保する */
  .ai-step-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .ai-step-tag { order: -1; }

  .ai-spec-row { grid-template-columns: 1fr; gap: var(--space-1); }

  .ai-perks { grid-template-columns: 1fr; }

  .ai-flow-list { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .ai-hero-title { font-size: 1.85rem; }
  .ai-plan-verb { font-size: 1.35rem; }
}


/* ============================================================
   14. モーション
   ------------------------------------------------------------
   設計（高知LP assets/kochi.css・kochi.js と同じ作法。接頭辞だけ ai-js）:

   ・「見えている」が既定。ai.js が
       - prefers-reduced-motion: reduce でない
       - gsap / ScrollTrigger / Lenis が全部読めている
     の2条件を満たしたときだけ <html> に .ai-js を付ける。
     初期化中に例外が出たら .ai-js を外して全表示に戻す。
     → JS無効・ライブラリ配信失敗・JSエラーのいずれでも本文は必ず見える。

   ・常時アニメ（マーキー / スクロール指示 / ボタンの光沢 / Hero写真の呼吸）は
     CSS keyframes のみで動かし、JS に依存させない。
     使うプロパティは transform と opacity だけ（width/top 等はレイアウトを
     起こすので使わない）。合計は4要素（マーキー2 + 指示1 + Hero写真1）。

   ・will-change は「動いている間だけ」。付けっぱなしにすると要素が
     独立レイヤーに載り続け、実際に写真とカードが描画から抜ける事象が出た。
     リビール系は .is-visible で必ず auto に戻す。常時アニメには付けない
     （transform/opacity のアニメは付けなくても合成される）。
   ============================================================ */

/* --- リビールの土台 -------------------------------------------------
   styles.css の .reveal は無条件に opacity:0。これだと JS が動かない環境で
   本文が消えるので、まず「見えている」を既定に戻し、.ai-js のときだけ隠す */
.reveal {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* スムーススクロールは Lenis が担うので、演出有効時はネイティブを止める
   （両方効くとアンカー移動が二重に走る） */
html.ai-js { scroll-behavior: auto; }

html.ai-js .reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
html.ai-js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* 上の transform 指定は hover のリフト（0-2-0）より詳細度が高く、
   そのままだと hover が効かなくなるので個別に戻す */
html.ai-js .ai-cta-band-btn.reveal.is-visible:hover { transform: translateY(-2px); }

/* --- clip-path で隠すリビール（[data-reveal]） ---
   重要: clip-path で隠した要素は IntersectionObserver の交差矩形が 0 になり、
   isIntersecting が永久に false のままになる（Chromeで実測）。
   そのため ai.js は data-reveal 付きの要素だけ ScrollTrigger で拾う。
   ＝この2つのセレクタと ai.js の判定条件（data-reveal の有無）は必ず対で直すこと。

   will-change はここでは付けない。対象は14要素と少なく1秒のトランジションなので
   前もって合成レイヤーへ載せる利点が無く、載せっぱなしの事故のほうが高くつく
   （このページで実際に写真とカードが描画から抜けた） */

/* 見出し: 一律のフェードではなく、下から拭き取って現す */
html.ai-js .reveal[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 105% 0);
  transition: clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: auto;
}
/* 下端を -8% 逃がすのは、日本語の下付き（ゃ/ゅ）や下線が切れないようにするため */
html.ai-js .reveal[data-reveal="mask"].is-visible {
  clip-path: inset(0 0 -8% 0);
}

/* プランカード: 下から立ち上がる。
   3枚の時間差は HTML の data-delay（0 / 120 / 240ms）を ai.js が --d に流す */
html.ai-js .reveal[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  /* hover の transform / box-shadow は元の 0.2s のまま残す */
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.2s ease, box-shadow 0.2s ease;
  transition-delay: var(--d, 0ms), 0ms, 0ms;
  will-change: auto;
}
html.ai-js .reveal[data-reveal="clip"].is-visible {
  clip-path: inset(0 0 0 0);
}
html.ai-js .ai-plan.reveal:hover { transform: translateY(-4px); }


/* --- 流れるテキスト帯（マーキー） ---
   .ai-marquee-track に同じ .ai-marquee-group を2つ入れ、帯を -50% 動かす。
   1周すると2つ目が1つ目の初期位置に来るので継ぎ目が出ない。
   動かすのは transform だけ。ホバーで一時停止する */
.ai-marquee {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-darker);
  padding-block: clamp(12px, 1.6vw, 18px);
  user-select: none;
}
.ai-marquee-track {
  display: flex;
  width: max-content;
  animation: ai-marquee-left 60s linear infinite;
}
.ai-marquee--reverse .ai-marquee-track {
  animation-name: ai-marquee-right;
  animation-duration: 72s;   /* 2本の周期をずらして同調させない */
}
.ai-marquee:hover .ai-marquee-track { animation-play-state: paused; }
.ai-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  padding-right: clamp(22px, 3vw, 44px);   /* 2つ目との継ぎ目の間隔 */
  font-size: clamp(0.86rem, 1.5vw, 1.08rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.ai-marquee-sep {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.3);
}
@keyframes ai-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ai-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* --- Hero: 写真ラッパーと常時の呼吸 ---
   ラッパー = スクロール連動のズーム（ai.js が scale を scrub）
   img      = 常時のゆっくりした呼吸（下の CSS keyframes）
   同じ transform を2系統で奪い合わせないための分離。どちらも scale >= 1 なので
   合成しても地が出ることはない */
.ai-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ai-hero-photo {
  animation: ai-hero-breathe 52s ease-in-out infinite alternate;
}
@keyframes ai-hero-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* --- Hero: スクロール指示（細い線を1.6秒周期で落とす） --- */
.ai-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vh, 32px);
  transform: translateX(-50%);
  z-index: 2;
  width: 2px;
  height: 46px;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.28);
  /* 写真の明るい部分に乗っても線が消えないよう、足元に暗い滲みを敷く */
  box-shadow: 0 0 6px rgba(9, 26, 29, 0.55);
  pointer-events: none;
}
.ai-hero-scroll-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44%;
  background: rgba(255, 255, 255, 0.92);
  animation: ai-scroll-run 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ai-scroll-run {
  0%   { transform: translateY(-100%); }
  62%  { transform: translateY(160%); }
  100% { transform: translateY(160%); }
}

/* --- 主CTAの光沢（9秒に1回、斜めの光が横切る） ---
   ::after を translateX させるだけ。頻繁だと安っぽいので待ち時間を長く取り、
   光が見えているのは1周期のうち1割弱にしている */
.ai-hero-actions .btn-primary,
.ai-contact-actions .btn-primary,
.ai-cta-band-btn {
  position: relative;
  overflow: hidden;
}
.ai-hero-actions .btn-primary::after,
.ai-contact-actions .btn-primary::after,
.ai-cta-band-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 26%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: ai-btn-sheen 9s ease-in-out infinite;
}
/* CTAバンドのボタンは白地なので、白い光では見えない。濃tealの影を走らせる */
.ai-cta-band-btn::after {
  background: linear-gradient(90deg,
    rgba(19, 74, 83, 0) 0%,
    rgba(19, 74, 83, 0.16) 50%,
    rgba(19, 74, 83, 0) 100%);
}
/* 2本目のCTAバンドは位相をずらし、同時に光らせない */
#cta-spec .ai-cta-band-btn::after { animation-delay: -3.2s; }
.ai-contact-actions .btn-primary::after { animation-delay: -5.6s; }
@keyframes ai-btn-sheen {
  0%, 88%   { transform: translateX(-220%) skewX(-18deg); }
  97%, 100% { transform: translateX(520%) skewX(-18deg); }
}


/* --- 写真のパララックス用の「のりしろ」 ---
   クリップ枠の中で画像を動かすので、動かす分だけ大きく敷いて欠けを防ぐ。
   画像は高さ120%・上に-10%＝上下に10%ずつの余り。ai.js の移動量は
   min(24px, 画像高さの5%) なので、余りは常に movement の2倍以上残る。
   （116%/-8% ＋ 6% で組んだときはプランカードで余りが実測2pxまで詰まった）
   .ai-js のときだけ効かせ、JS無効時は元の切り位置のまま */
html.ai-js .ai-plan-media img,
html.ai-js .ai-training-photo img,
html.ai-js .ai-record-photo {
  top: -10%;
  height: 120%;
}

/* --- 当日の流れ: Step 1-3 の左に伸びる縦線 ---
   <ol> の中には <li> しか置けないため、同じグリッドセルに重なる兄弟要素として
   置き、負のマージンで左のガターへ逃がす（Stepの位置は変わらない）。
   列間は clamp(28px, 4vw, 56px) なので -18px は必ずガターの内側に収まる */
.ai-training-steps > .ai-step-line {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-self: start;
  width: 2px;
  margin-left: -18px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--color-border);
}
.ai-step-line-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transform-origin: top center;
  transform: scaleY(1);   /* JS無効時は引かれた状態で静止させる */
}
html.ai-js .ai-step-line-fill { transform: scaleY(0); }

/* --- 数字のカウントアップ中だけ等幅数字にする ---
   桁が増えるたびに幅が跳ねるのを抑える。完了後は ai.js がクラスを外すので、
   停止状態の見た目は元のまま */
[data-count].is-counting { font-variant-numeric: tabular-nums; }


@media (max-width: 900px) {
  /* Hero は中身が縦に詰まり、スクロール指示がボタンと重なる */
  .ai-hero-scroll { display: none; }
  /* 当日の流れは1カラムになり、縦線が独立した行として挟まってしまう */
  .ai-training-steps > .ai-step-line { display: none; }
}


/* ============================================================
   モーション配慮：動きを止めて即時表示（保険。ai.js 側でも .ai-js を付けない）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ai-marquee-track,
  .ai-hero-scroll-bar,
  .ai-hero-photo,
  .ai-hero-actions .btn-primary::after,
  .ai-contact-actions .btn-primary::after,
  .ai-cta-band-btn::after {
    animation: none !important;
  }
  /* 光沢は待機位置（画面外）で止める */
  .ai-hero-actions .btn-primary::after,
  .ai-contact-actions .btn-primary::after,
  .ai-cta-band-btn::after {
    transform: translateX(-220%) skewX(-18deg);
  }
  .ai-hero-photo { transform: none; }
  .ai-step-line-fill,
  html.ai-js .ai-step-line-fill { transform: scaleY(1); }

  /* .ai-js が付いた後に設定が変わった場合の保険（全リビールを最終状態で静止） */
  html.ai-js .reveal,
  html.ai-js .reveal[data-reveal="mask"],
  html.ai-js .reveal[data-reveal="clip"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}