@charset "UTF-8";
/* =============================================================
   KotoUchi（コト打ち）LP
   ============================================================= */

:root {
  --navy-deepest: #050d1d;
  --navy-deep: #081226;
  --navy: #0d1b33;
  --navy-light: #13284e;
  --navy-panel: rgba(13, 30, 60, .72);
  --blue: #2563eb;
  --blue-bright: #3b82f6;
  --blue-light: #6ea8ff;
  --cyan: #61d4ff;
  --ink: #1b2a4a;
  --ink-soft: #3d4d6e;
  --bg-light: #eef3fa;
  --bg-lighter: #f7fafd;
  --line: #d7e2f0;
  --white: #ffffff;

  /* --- ゴールド ---
     このLPは「AI × 人」が主題なので、色でも役割を分ける。
     金＝人（プロ講師・格式・実績）、青＝AI（分析・テック）。 */
  --gold: #c9a24d;
  --gold-light: #e8cd80;
  --gold-pale: #f7ecc4;
  --gold-deep: #8a6a22;
  /* 濃い背景に置く金文字（暗い帯が濁って見えないよう明るめに振る） */
  --gold-metal: linear-gradient(178deg, #fff8e3 0%, #f0dc9a 24%, #dcbc63 46%, #bf9838 58%, #ecd68e 76%, #fdf6dd 100%);
  /* 明るい背景に置く金文字（沈ませて可読性を確保する） */
  --gold-metal-deep: linear-gradient(178deg, #d4ac48 0%, #b8912f 28%, #8a6a22 52%, #a9832b 74%, #c9a24d 100%);
  --serif: "Shippori Mincho", "EB Garamond", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.5; }

.container { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.section { padding: 96px 0; }
.ta-c { text-align: center; }
/* PC/スマホで出し分ける改行。既定はPC表示 */
.pc { display: inline; }
.sp { display: none; }
.icon { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

.heading-serif {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: .06em;
  margin-bottom: 48px;
}

/* =============================================================
   ゴールドの共通部品
   ============================================================= */

/* 金のメタリック文字。背景の明暗で2種を出し分ける */
.gold {
  background: var(--gold-metal-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gold--on-dark {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 背景クリップ非対応の環境では、透明のまま消えないよう単色に戻す */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold, .gold--on-dark { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); }
}

/* 金のヘアライン（文字の上下に引く細い罫） */
.gold-rule {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.gold-rule::before, .gold-rule::after {
  content: "";
  height: 1px; flex: 1; max-width: 90px;
}
.gold-rule::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.gold-rule::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* 見出し背後の英字ウォーターマーク */
.wm { position: relative; }
.wm__text {
  position: absolute;
  left: 50%; top: 0;
  /* 見出しの真裏に重ねると滲んで見えるので、上へ逃がして
     下半分だけが見出しの背後に掛かるようにする */
  transform: translate(-50%, -46%);
  z-index: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(72px, 10vw, 150px);
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: rgba(27, 42, 74, .045);
}
.wm__text--dark { color: rgba(232, 205, 128, .07); }
.wm > *:not(.wm__text) { position: relative; z-index: 1; }

/* セクション間の金の下向き矢印 */
.gold-arrow {
  display: grid; place-items: center;
  margin: -8px auto 0;
  width: 44px; height: 26px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  animation: goldArrow 2.4s ease-in-out infinite;
}
@keyframes goldArrow {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  padding: 18px 38px;
  border-radius: 8px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn--primary {
  color: var(--white);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .45);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 99, 235, .6); }
.btn__arrow { font-family: var(--sans); transition: transform .25s ease; }
.btn--primary:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.btn--wide { width: 100%; }

/* ---------- waveform (bars injected by JS) ---------- */
.waveform {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 44px;
  contain: inline-size;
  overflow: hidden;
  min-width: 0;
}
.waveform i { width: 3px; flex: none; border-radius: 2px; background: var(--blue-bright); }
.waveform--panel { height: 30px; opacity: .9; }
.waveform--panel i { background: var(--cyan); }
.waveform--light { justify-content: flex-end; height: 60px; margin: -20px 0 28px; }
.waveform--light i { background: #a8c8f0; }

/* ライブ波形は height ではなく scaleY で動かす（レイアウトを起こさない）。
   本数ぶんの高さ変更を毎フレーム走らせるとカクつくため。 */
.js-waveform-live i {
  height: 100%;
  transform: scaleY(.03);
  transform-origin: center;
  will-change: transform;
  background: linear-gradient(180deg, #7fb0ea, #4f86cf);
}
.waveform--review { height: 60px; }
.waveform--review i { background: #35507e; }
.waveform--dash { height: 26px; }
.waveform--dash i { background: var(--cyan); }

/* ---------- score ring ---------- */
.score-ring { position: relative; width: 92px; height: 92px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring__track { fill: none; stroke: rgba(110, 168, 255, .18); stroke-width: 7; }
.score-ring__bar {
  fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 229.6 263.9;
}
.score-ring__num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--white);
}
.score-ring--sm { width: 78px; height: 78px; }
.score-ring--sm .score-ring__num { font-size: 24px; }
.score-ring--xs { width: 56px; height: 56px; margin-inline: auto; }
.score-ring--xs .score-ring__num { font-size: 18px; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background: var(--navy-deep);
  overflow: hidden;
  padding: 80px 0 90px;

  /* 人物・スマホ・肩書はビューポート右端を基準に置いている。一方コピーと帯は
     コンテナ(1120px)の中央寄せなので、画面が広がると人物だけが倍の速さで右へ逃げ、
     間に空白ができて全体が右に寄って見える（1920pxで隙間279px／1440pxでは33px）。
     構図の広がりを1440pxで止め、それ以上は左右に紺を残す。 */
  --stage-inset: max(0px, calc((100% - 1440px) / 2));
}
/* 管理画面ログイン。既存顧客向けの導線なので、
   新規向けのCTA（無料相談）と競合しないよう控えめにする。 */
.topbar {
  position: absolute;
  top: 22px; left: 0; right: 0;
  z-index: 5;
}
.topbar__inner { display: flex; justify-content: flex-end; }
.topbar__login {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
  color: #cfdcf2;
  padding: 9px 18px;
  border: 1px solid rgba(158, 190, 235, .4);
  border-radius: 999px;
  background: rgba(8, 18, 38, .5);
  backdrop-filter: blur(4px);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.topbar__login .icon { width: 14px; height: 14px; }
.topbar__login:hover {
  color: var(--gold-pale);
  border-color: var(--gold);
  background: rgba(201, 162, 77, .14);
}
.topbar__login:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.hero__bg { position: absolute; inset: 0; }
.hero__photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 72% 45%, rgba(148, 163, 190, .35) 0%, rgba(148, 163, 190, 0) 60%),
    radial-gradient(ellipse 45% 60% at 78% 40%, rgba(196, 200, 210, .28) 0%, rgba(196, 200, 210, 0) 65%),
    linear-gradient(100deg, #0a1630 0%, #0d1e3e 45%, #16294f 70%, #0a1833 100%);
}
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 18, 38, .96) 0%, rgba(8, 18, 38, .82) 38%, rgba(8, 18, 38, .25) 70%, rgba(8, 18, 38, .55) 100%);
}
.hero__wave {
  position: absolute; left: 38%; top: 42%; width: 34%; height: 90px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .55), rgba(97, 212, 255, .75), rgba(59, 130, 246, .5), transparent);
  filter: blur(18px);
  transform: translateY(-50%);
}

/* ---------- キービジュアル（人物）----------
   右に大きく立て、下で断ち切る。背景のグラデが明るくなる72〜78%に重なる位置。
   背景（壁）は機械的に抜けないため、左端と下端をマスクで溶かして紺に沈める。
   .hero__inner より奥（z-index 1 / inner は 2）。 */
/* 元画像は692x971しかない。高さを指定して cover させると縦基準で拡大され、
   顔が切れるほど寄ってしまう。幅だけ決めて高さは画像に決めさせる。 */
/* 下端は帯（.hero__roster）の上辺に合わせて断ち切る。
   0にすると顔が下がり、「顔の下・帯の上」にAIパネルを置く隙間が
   192pxしか残らず、パネル（228px）が入らない。ここで顔を上げて隙間を作る。 */
/* <img> ではなく背景画像。960px以下でこれを消すとき、<img> だと display:none でも
   読み込まれてしまうため（背景画像なら取りに行かない）。
   ただし現状これで帯域は減らない。同じ424KBを .teachers::before が
   opacity .08 の透かしとして必ず読むため（→ そちらを軽い版に向ければ効く）。
   url() は css/style.css 基準で解決されるので、ルート基準で書くこと。
   aspect-ratio は元画像（692x971）の比。高さを固定して cover させると
   縦基準で拡大され、顔が切れるほど寄る。 */
.hero__kv {
  position: absolute;
  right: var(--stage-inset); bottom: 266px;
  width: min(46%, 620px);
  aspect-ratio: 692 / 971;
  background-image: url(/images/naito-yuko.jpg);
  background-size: cover;
  /* 髪の頂点が上端から2%しかないので上基準。下げると頭頂部が切れる */
  background-position: 50% 0%;
  z-index: 1;
  pointer-events: none;
  /* 壁は抜けない（白壁×白ジャケット）ので、人物を中心に楕円で四方へ溶かして紺に沈める。
     紺を「上に重ねる」（ビネット）と明るい輪が出て、かえって作り物に見える。
     透過そのものを楕円で落とすほうが素直に消える。
     中心（58% 36%）は顔の位置。ずらすと顔が薄くなるので必ず目視すること。 */
  -webkit-mask-image:
    radial-gradient(ellipse 66% 62% at 58% 36%,
      #000 0%, #000 34%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.5) 68%, transparent 88%);
  mask-image:
    radial-gradient(ellipse 66% 62% at 58% 36%,
      #000 0%, #000 34%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.5) 68%, transparent 88%);
}
/* 人物（.hero__kv）が右に立つので、コピーは左半分だけを使う。
   コピー・パネル・人物を横に3つ並べる幅は無いため、パネルは .hero__aside で
   人物の胸元に浮かせている。 */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* 700pxは hero__lead が折れない下限。あのリードは文字だけで約605pxあり、
     さらに末尾の金罫（::after）とgapで約78px足される。640だと「か？」が落ちる。 */
  grid-template-columns: minmax(0, 700px);
  justify-content: start;
  width: 100%;
}
.hero__logo { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
/* マークは正方形なので baseline 揃えだと下がる。文字の高さに合わせて自前で沈める */
.hero__logo-mark {
  width: 44px; height: 44px;
  flex: none;
  align-self: center;
  margin-right: 12px;
  position: relative; top: 2px;
}
.hero__logo-en { font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: .04em; }
.hero__logo-ja { font-size: 17px; color: #cfdcf2; letter-spacing: .1em; }
.hero__tagline { font-size: 15px; letter-spacing: .14em; color: #cfdcf2; margin-bottom: 44px; }
.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.55;
  letter-spacing: .04em;
  margin-bottom: 30px;
  text-shadow: 0 2px 30px rgba(5, 13, 29, .6);
}
.hero__title-key {
  /* 金文字は背景クリップで描くため、文字自体の影が乗らない。
     背後に同じ文字を敷く代わりに、drop-shadow を親に掛けて浮かせる。 */
  filter: drop-shadow(0 2px 14px rgba(201, 162, 77, .35));
}
.hero__lead {
  font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; letter-spacing: .08em;
  margin-bottom: 22px;
  justify-content: flex-start;
}
.hero__lead::before { display: none; }
.hero__lead::after { max-width: 60px; }

.hero__desc { font-size: 15.5px; line-height: 2.1; letter-spacing: .05em; color: #dbe5f5; margin-bottom: 34px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .06em;
  padding: 11px 20px;
  border: 1px solid rgba(158, 190, 235, .45);
  border-radius: 6px;
  background: rgba(10, 22, 46, .55);
  backdrop-filter: blur(3px);
}
.hero__badge .icon { color: var(--blue-light); }

/* ---------- 協力事務所の所属例（帯）----------
   .hero__inner の外に置いた独立の行。.container を併用して
   ヒーロー本体と幅を揃える（全幅には伸ばさない）。
   事務所の層を示す「例」であって指導者一覧ではないため、金は使わず
   級数を落として主コピーと競合させない。 */
.hero__roster {
  position: relative;
  /* 人物（.hero__kv、z-index 1）より前に出す。奥にすると帯の右側が
     ジャケットに隠れて数人が消える。 */
  z-index: 2;
  width: 100%;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(158, 190, 235, .18);
}
/* 人物の上に重なるので、帯の下に紺を敷いて顔が透けないようにする */
.hero__roster::before {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0; bottom: -90px;
  width: 100vw;
  background: linear-gradient(180deg, rgba(8, 18, 38, .55) 0%, rgba(8, 18, 38, .88) 45%, rgba(8, 18, 38, .95) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero__roster-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  color: #7e93b8;
  margin-bottom: 9px;
  /* 半角スペースで区切られた語なので keep-all が効く */
  word-break: keep-all;
}
.hero__roster-note {
  margin-left: 8px;
  letter-spacing: .04em;
  color: #64789c;
}
/* 1段だけなので grid の gap は不要。端のフェードは親から継承する */
.hero__roster-marquee { gap: 0; }

/* 下部の一覧（.anno）の指定を打ち消す。
   .anno img はこのファイルの後方にあり詳細度が同じ（0,1,1）ため、
   .hero__roster でスコープして確実に勝たせる（外すと写真が128pxに戻る）。

   1人あたり96px（84+12）×15名＝1440px。
   ヒーロー全幅（1440の画面で1425px）を15名で埋めきる寸法にしてある。
   これを下回ると1組で画面が埋まらず、同じ人が同時に2人並ぶ。 */
.hero__roster .anno--mini { width: 84px; margin-right: 12px; }
.hero__roster .anno--mini img {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: #16305c;
  box-shadow: 0 3px 10px rgba(3, 9, 22, .5);
}
.hero__roster .anno--mini:hover img {
  transform: none;
  box-shadow: 0 3px 10px rgba(3, 9, 22, .5);
}
.hero__roster .anno--mini .anno__name {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: #a8bcd8;
  margin-top: 8px;
}
/* 局名はこの帯の主眼なので、名前より落とさない */
.hero__roster .anno--mini .anno__role {
  font-size: 10.5px; line-height: 1.5;
  color: #8fa6c8;
  margin-top: 2px;
}

/* 動きを減らす設定では、下部の一覧は折り返して並ぶ（.roster の共通指定）。
   ただしヒーローで15名が折り返すと縦に伸びて主コピーを押し下げるため、
   ここだけは折り返さず手でスクロールできる形にする。 */
@media (prefers-reduced-motion: reduce) {
  .hero__roster-marquee .roster__row { overflow-x: auto; }
  .hero__roster-marquee .roster__track { width: max-content; flex-wrap: nowrap; }
  .hero__roster-marquee .is-clone { display: none; }
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* hero panels */
/* 人物の胸元（顔より下）に浮かせる。顔は .hero__kv の縦 26〜72% に来るので、
   ここは必ずその下に置くこと。 */
/* 370px は1440pxでの 26%。%のままだと画面幅に応じて人物との相対位置がずれる */
.hero__aside {
  position: absolute;
  right: calc(var(--stage-inset) + 370px);
  bottom: 300px;
  width: 200px;
  z-index: 2;
}

/* ヒーローのスマホ枠。AIコーチセクションと同じ .mock-phone を使い回すが、
   あちらは絶対配置・120px幅なのでここで解除する。
   .mock-phone 本体はこのファイルの後方（AIコーチの節）にあり詳細度が同じ（0,1,0）ため、
   .hero__aside でスコープして確実に勝たせる（外すと120pxの絶対配置に戻る）。
   ノートPCの枠（460x492）はヒーローには入らない。コピー(700)＋PC(460)だけで
   コンテナ1120を超えるうえ、260pxまで縮めると中の文字が約6.5pxになり読めない。 */
.hero__aside .mock-phone--hero {
  position: static;
  width: 200px;
  /* 小さく見せたいだけなので、幅や級数を個別に詰めるのではなく枠ごと縮める。
     幅を詰めると中の文が折り返して縦に伸び、かえって大きくなる。
     中身は読ませるものではなく「AIがスマホで動いている」画として置いている。 */
  transform: scale(.78);
  transform-origin: 100% 100%;
}
/* 2画面を同じグリッドマスに重ね、5秒ごとに入れ替える（js/main.js の initPanelRotator）。
   高さは高い方の画面で決まるので、切り替わっても枠が動かない。 */
.mock-phone__screen--rotator {
  display: grid;
  padding: 14px 12px 16px;
}
.mock-phone__screen--rotator > .phone-view {
  grid-area: 1 / 1;
  display: grid; justify-items: center; gap: 10px;
  align-content: start;
  width: 100%;
  opacity: 0;
  transition: opacity .7s ease;
}
.mock-phone__screen--rotator > .phone-view.is-active { opacity: 1; }
/* JSが動かない時に両方とも透明で消えないよう、1枚目だけは出しておく */
.js-panel-rotator:not(.is-ready) > .phone-view:first-child { opacity: 1; }
/* 画面が狭いので、パネル時代の級数（12.5px）のままだと折り返す */
.phone-view .panel__checks { gap: 7px; width: 100%; }
.phone-view .panel__checks li { font-size: 10px; padding-right: 14px; }
.phone-view .panel__checks li::after { font-size: 10px; }
.phone-view .mock-phone__title { justify-self: start; }

/* スマホ画面の実測値。AIコーチセクションは2列のカードで見せているが、
   幅164pxではカードが成立しないので、ラベル左・値右の1行に畳んでいる。
   .fs-s は .ai-dash__cell にスコープされた別物なので、ここで定義し直す。 */
.phone-stats {
  display: grid; gap: 6px;
  width: 100%;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid rgba(110, 168, 255, .18);
}
.phone-stats > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.phone-stats dt {
  font-size: 9.5px; letter-spacing: .02em; color: #9db8e0;
  white-space: nowrap;
}
.phone-stats dd {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: 15px; line-height: 1; color: var(--white);
  white-space: nowrap;
}
.phone-stats dd.fs-s { font-family: var(--sans); font-size: 10.5px; }
.phone-stats dd small {
  font-family: var(--sans); font-weight: 400;
  font-size: 8.5px; color: #9db8e0; margin-left: 2px;
}

/* 「ー」が行頭に落ちないよう禁則を厳格に。幅164pxなので2行に折れる前提 */
.phone-advice {
  display: grid; gap: 6px;
  width: 100%;
}
.phone-advice li {
  position: relative;
  font-size: 10px; line-height: 1.6; letter-spacing: .01em;
  color: #c6d6ee;
  padding-left: 9px;
  line-break: strict;
}
.phone-advice li::before {
  content: "・";
  position: absolute; left: -3px; top: 0;
  color: var(--cyan);
}
.phone-advice__head {
  margin-top: 4px;
  padding-top: 9px;
  width: 100%;
  border-top: 1px solid rgba(110, 168, 255, .18);
}

/* ---------- キービジュアルの肩書 ----------
   金＝人。人物の足元に置く。 */
/* 白いジャケットの上に載るので、影では読めない。紺のチップを敷く。 */
.hero__kvcap {
  position: absolute;
  right: calc(var(--stage-inset) + 43px);
  bottom: 288px;
  z-index: 3;
  text-align: right;
  pointer-events: none;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid rgba(201, 162, 77, .35);
  background: rgba(8, 18, 38, .72);
  backdrop-filter: blur(6px);
}
/* 細い文字にメタリックグラデを掛けると濁るため単色 */
.hero__kvcap-role {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold-light);
  white-space: nowrap;
}
.hero__kvcap-name {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: .04em;
  color: var(--gold-pale);
  margin-top: 2px;
  white-space: nowrap;
}
.hero__kvcap-note {
  display: block;
  font-size: 10.5px; letter-spacing: .04em;
  color: #9db8e0;
  margin-top: 4px;
  white-space: nowrap;
}

.meter { display: block; height: 4px; border-radius: 2px; background: rgba(110, 168, 255, .18); overflow: hidden; }
.meter b { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--blue-bright), var(--cyan)); }
.panel__checks { display: grid; gap: 11px; }
.panel__checks li {
  position: relative;
  font-size: 12.5px; color: #d5e2f5; letter-spacing: .04em;
  padding-left: 4px; padding-right: 26px;
}
.panel__checks li::after {
  content: "✓";
  position: absolute; right: 2px; top: 0;
  color: var(--cyan); font-weight: 700;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .34em; color: #9db8e0;
  text-align: center;
}
.hero__scroll-arrow { display: block; animation: scrollFloat 1.8s ease-in-out infinite; margin-top: 2px; }
@keyframes scrollFloat {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: .5; }
}

/* =============================================================
   問題提起
   ============================================================= */
.problem { background: var(--white); padding-top: 110px; }
.problem__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.75;
  letter-spacing: .05em;
  margin-bottom: 20px;
}
.problem__title .serif-en { font-size: 1.18em; }
.problem__text { font-size: 16px; line-height: 2; letter-spacing: .06em; color: var(--ink-soft); }

/* =============================================================
   AIがつくる / 人が伝える
   ============================================================= */
/* 以前は薄い青のベタ塗りが上から下へわずかに濃くなるだけで、面が単調だった。
   上に色を集めて白へ抜き、左上にドットのグリッドを散らす。
   ドットが青なのは、このセクションが「AIがつくる」話だから（青＝AI）。
   ::before = グラデ、::after = ドット。中身は z-index で前に出す。 */
.gap {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.gap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 460px;
  background: linear-gradient(180deg, #d9e6fb 0%, rgba(217, 230, 251, .55) 45%, rgba(217, 230, 251, 0) 100%);
  pointer-events: none;
}
/* 粒は 1.7px / 間隔 15px。粒を大きくすると水玉模様になり、
   小さくすると印刷の網点に見えて安っぽくなる。 */
.gap::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: min(52%, 620px); height: 400px;
  background-image: radial-gradient(circle, rgba(37, 99, 235, .3) 1.7px, transparent 1.7px);
  background-size: 15px 15px;
  /* 左上を濃く、右下へ散らして消す。マスクで抜かないと矩形の縁が出る */
  -webkit-mask-image: radial-gradient(ellipse 118% 128% at 0% 0%, #000 0%, rgba(0,0,0,.55) 42%, transparent 76%);
  mask-image: radial-gradient(ellipse 118% 128% at 0% 0%, #000 0%, rgba(0,0,0,.55) 42%, transparent 76%);
  pointer-events: none;
}
.gap > .container { position: relative; z-index: 1; }
.gap__flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.gap__card {
  background: var(--white);
  border-radius: 12px;
  padding: 26px 30px 22px;
  box-shadow: 0 10px 34px rgba(27, 42, 74, .08);
}
.gap__card-title { text-align: center; font-weight: 700; color: var(--blue); letter-spacing: .1em; font-size: 15px; margin-bottom: 18px; }
.gap__items { display: flex; gap: 26px; }
.gap__items li { display: grid; justify-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.gap__items .icon { width: 30px; height: 30px; color: var(--blue); }
.gap__connector {
  align-self: center;
  width: 56px; height: 40px; flex: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(59, 130, 246, .5) 4px 12px) 0 45% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(97, 212, 255, .4) 10px 20px) 0 60% / 100% 2px no-repeat;
}
.gap__chain { display: flex; align-items: center; gap: 10px; }
.gap__chain li {
  position: relative;
  width: 74px; height: 74px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--white); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  background: radial-gradient(circle at 32% 30%, #4d8dff, #1d4ed8 70%);
  box-shadow: 0 0 0 3px rgba(77, 141, 255, .25), 0 0 22px rgba(59, 130, 246, .55);
}
.gap__chain li:not(:last-child)::after {
  content: "→";
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-weight: 700;
}
.gap__text { font-size: 16.5px; letter-spacing: .05em; line-height: 2.2; }
.gap__text strong { font-family: var(--serif); font-size: 1.1em; }

/* =============================================================
   課題カード
   ============================================================= */
/* 直前の .gap と同じ薄青のベタだったので、2セクション続けて同じ面になり
   切り替わりが読めなかった。.gap が「青（AI）」なのに対し、ここは
   「伝わらない＝人の課題」なので金を薄く敷いて色で対比させる（金＝人）。
   グリッドは点ではなく罫線。.gap のドットと同じ柄を繰り返すと、
   これも「同じ面」になってしまう。 */
.troubles {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.troubles::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 420px;
  background: linear-gradient(180deg, rgba(201, 162, 77, .13) 0%, rgba(201, 162, 77, .05) 48%, rgba(201, 162, 77, 0) 100%);
  pointer-events: none;
}
/* 方眼の罫。線が太い／間隔が狭いと方眼紙になるので、1px・44px間隔で薄く。
   0.5pxにするとアンチエイリアスで濃度が半分になり、完全に消える（実測で確認）。 */
.troubles::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 460px;
  background-image:
    linear-gradient(90deg, rgba(201, 162, 77, .26) 1px, transparent 1px),
    linear-gradient(180deg, rgba(201, 162, 77, .26) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  pointer-events: none;
}
.troubles > .container { position: relative; z-index: 1; }
.troubles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* アイコン→シーン写真に置換。写真をしっかり見せ、文字は
   すりガラスの白パネル（＝まくら）に載せて、暗い写真でも確実に読ませる。 */
.trouble-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: grid;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(27, 42, 74, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.trouble-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 42, 74, .12); }
.trouble-card:hover .trouble-card__media img { transform: scale(1.04); }
.trouble-card__media { position: absolute; inset: 0; z-index: 0; }
.trouble-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
  transition: transform .5s ease;
}
/* 写真は見せたいので、白フェードは軽く。左をわずかに沈めてパネルの影を立たせる */
.trouble-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(9, 18, 38, .12) 0%,
    rgba(9, 18, 38, 0) 34%,
    rgba(255, 255, 255, .10) 100%);
}
/* 文字を載せる白いまくら：右寄せ・上下中央でフロートさせ、写真の上に浮かせる */
.trouble-card__body {
  position: relative; z-index: 1;
  align-self: center; justify-self: end;
  width: 70%;
  margin: 14px;
  padding: 22px 22px 24px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(19, 40, 78, .16);
}
/* 「営業提案」「経営会議」は場面のラベル。ゴシック19pxのベタ置きだと
   本文(15px)との差が弱く、6枚が同じ重みで並んで単調に見えていた。
   明朝にして字間を開き、金の細罫で本文と縁を切る（＝見出しとして立たせる）。 */
.trouble-card__title {
  font-family: var(--serif);
  font-size: 20px; font-weight: 700;
  color: var(--navy-light);
  letter-spacing: .1em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 162, 77, .4);
}
.trouble-card__text { font-size: 15px; line-height: 2; color: var(--ink-soft); }

/* =============================================================
   ブリッジ
   ============================================================= */
.bridge {
  position: relative;
  background:
    radial-gradient(ellipse 80% 100% at 50% 115%, rgba(37, 99, 235, .4) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deepest) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 110px 0 120px;
  overflow: hidden;
}
.bridge__glow {
  position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  width: 900px; height: 260px;
  background: radial-gradient(ellipse at center, rgba(97, 212, 255, .35) 0%, rgba(37, 99, 235, .15) 45%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.bridge__question {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 2;
  letter-spacing: .08em;
  margin-bottom: 34px;
}
.bridge__question strong { font-weight: 700; }
.bridge__chevron {
  position: relative;
  transform: rotate(90deg);
  font-size: 26px; color: var(--cyan);
  margin-bottom: 30px;
  text-shadow: 0 0 14px rgba(97, 212, 255, .9);
}
.bridge__answer {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(26px, 3.8vw, 42px);
  line-height: 1.9;
  letter-spacing: .08em;
}
.bridge__answer em {
  font-style: normal;
  filter: drop-shadow(0 0 20px rgba(201, 162, 77, .5));
}

/* =============================================================
   KotoUchi CYCLE
   ============================================================= */
.cycle {
  position: relative;
  background:
    radial-gradient(ellipse 50% 60% at 78% 60%, rgba(37, 99, 235, .22) 0%, transparent 65%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 120px 0 130px;
  overflow: hidden;
}
.cycle__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 60px;
  align-items: center;
}
/* 上限52pxだと「壁打ち」が「壁打／ち」で割れる。左カラムは最大540pxで
   頭打ちなのに、この見出しは52pxで583px必要になるため（960px以上の全幅で発生）。
   44pxなら493pxで収まる。字間も .04em → .02em に詰めて余裕を作っている。
   ※「言葉」「壁打ち」は鉤括弧付きの塊なので、途中で割れると意味が壊れる。 */
.cycle__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: .02em;
  margin-bottom: 20px;
  line-break: strict;
}
/* 「言葉」×「壁打ち」。の3つの塊は、それぞれ内部で改行させない */
.cycle__title .nw { white-space: nowrap; }
.cycle__x { font-size: .6em; margin-inline: 4px; color: var(--blue-light); }
.cycle__lead { font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px); letter-spacing: .08em; margin-bottom: 34px; }
.cycle__text { font-size: 15.5px; line-height: 2.4; letter-spacing: .05em; color: #cfdcf2; }

.cycle__diagram { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; }
.cycle__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); text-align: center;
  letter-spacing: .06em; line-height: 1.6;
}
.cycle__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cycle__ring circle {
  fill: none;
  stroke: rgba(97, 212, 255, .55);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 6px rgba(97, 212, 255, .6));
  animation: ringRotate 40s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
.cycle__node { position: absolute; display: grid; justify-items: center; gap: 10px; width: 120px; transform: translate(-50%, -50%); }
.cycle__node--1 { left: 50%;   top: 8%; }
.cycle__node--2 { left: 88%;   top: 37%; }
.cycle__node--3 { left: 74.5%; top: 84%; }
.cycle__node--4 { left: 25.5%; top: 84%; }
.cycle__node--5 { left: 12%;   top: 37%; }
.cycle__node-icon {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #17376e, #0a1c3c 75%);
  border: 1.5px solid rgba(97, 212, 255, .7);
  box-shadow: 0 0 22px rgba(59, 130, 246, .5), inset 0 0 16px rgba(59, 130, 246, .3);
}
.cycle__node-icon svg { width: 30px; height: 30px; fill: var(--white); }
.cycle__node-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-align: center; line-height: 1.5; white-space: nowrap; }
.cycle__node-label small { display: block; font-size: 11.5px; font-weight: 400; color: #b9c8e2; letter-spacing: .12em; }

/* =============================================================
   サービス A/B/C
   ============================================================= */
.services { background: var(--white); padding-bottom: 110px; }
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-left: 2px solid #dbe6f4;
  padding-left: 44px;
  position: relative;
}
.service__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.service__letter {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--blue);
  line-height: 1;
}
.service__title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: .04em; }
.service__sub { font-size: .72em; font-weight: 700; font-family: var(--sans); color: var(--ink); }
.service__text { font-size: 15.5px; line-height: 2.2; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 20px; }
.service__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.service__tags li {
  font-size: 13.5px; font-weight: 500; color: var(--blue);
  border: 1px solid rgba(37, 99, 235, .45);
  border-radius: 6px;
  padding: 5px 16px;
  background: rgba(37, 99, 235, .04);
}

/* photo placeholder */
.ph {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 70% 90% at 65% 40%, rgba(120, 150, 190, .5) 0%, transparent 70%),
    linear-gradient(120deg, #2c3f60 0%, #45608c 50%, #22334f 100%);
  min-height: 260px;
  box-shadow: 0 16px 44px rgba(27, 42, 74, .18);
}
.ph span {
  font-size: 12px; letter-spacing: .18em; color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 8px 18px; border-radius: 4px;
  backdrop-filter: blur(2px);
}
/* aspect-ratio と .ph の min-height:260 が競合し、狭い幅で「高さ260×16/9=462px」の
   幅が逆算されて右にはみ出していた。width:100% で幅を器に固定し、min-height を無効化して
   aspect-ratio に高さを任せる。 */
.ph--seminar { aspect-ratio: 16 / 9; width: 100%; min-height: 0; }

/* laptop mock */
.mock-laptop { width: 100%; max-width: 460px; margin-inline: auto; }
.mock-laptop__screen {
  border: 10px solid #1c2434;
  border-bottom-width: 14px;
  border-radius: 14px 14px 0 0;
  background: #f4f7fb;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(27, 42, 74, .28);
}
.mock-laptop__base {
  height: 14px;
  background: linear-gradient(180deg, #3a4460 0%, #232c40 100%);
  border-radius: 0 0 16px 16px;
  margin-inline: -14px;
}
.mock-laptop--dark .mock-laptop__screen { background: #0b1830; }

/* review mock (service B) */
.service__visual { position: relative; min-width: 0; }
.mock-review { padding: 22px 20px; }
.mock-review__title { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 12px; }
.mock-review__player { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mock-review__play {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--blue); color: var(--white); font-size: 11px;
}
.mock-review__player i { display: block; flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) 0 40%, #d7e2f0 40%); }
.mock-comments {
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  display: grid; gap: 12px; width: 220px;
}
.mock-comment {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(27, 42, 74, .16);
  font-size: 11.5px; line-height: 1.7; color: var(--ink-soft);
}
.mock-comment i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #6b7f9e, #3d5170);
}

/* AI dash (service C & AI coach) */
.ai-dash {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(37, 99, 235, .3) 0%, transparent 60%),
    linear-gradient(150deg, #0c1f42 0%, #081226 100%);
  border-radius: 12px;
  padding: 20px;
  color: var(--white);
}
.ai-dash--card {
  border: 1px solid rgba(110, 168, 255, .3);
  box-shadow: 0 20px 50px rgba(10, 22, 46, .4);
}
.ai-dash__title { font-size: 12px; letter-spacing: .14em; color: #9db8e0; margin-bottom: 14px; }
.ai-dash__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ai-dash__score {
  grid-row: 1 / 3;
  display: grid; justify-items: center; align-content: center; gap: 12px;
  background: rgba(10, 25, 55, .65);
  border: 1px solid rgba(110, 168, 255, .22);
  border-radius: 10px;
  padding: 14px;
}
.ai-dash__grid { grid-template-columns: 1.1fr 1fr 1fr; }
.ai-dash__cell {
  display: grid; align-content: center; gap: 4px;
  background: rgba(10, 25, 55, .65);
  border: 1px solid rgba(110, 168, 255, .22);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-dash__cell span { font-size: 10.5px; color: #9db8e0; letter-spacing: .06em; }
.ai-dash__cell strong { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.ai-dash__cell strong small { font-size: 11px; font-family: var(--sans); margin-left: 3px; color: #c6d6ee; }
.ai-dash__cell strong.fs-s { font-size: 15px; font-family: var(--sans); font-weight: 700; }
.ai-dash__advice {
  grid-column: 2 / 4;
  background: rgba(10, 25, 55, .65);
  border: 1px solid rgba(110, 168, 255, .22);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-dash__advice span { display: block; font-size: 10.5px; color: #9db8e0; letter-spacing: .06em; margin-bottom: 6px; }
.ai-dash__advice li {
  position: relative;
  font-size: 10.5px; line-height: 1.8; color: #d5e2f5;
  padding-left: 12px;
}
.ai-dash__advice li::before { content: "・"; position: absolute; left: 0; color: var(--cyan); }
.ai-dash__mini-meters { display: grid; gap: 4px; width: 100%; }
.ai-dash__mini-meters li {
  position: relative;
  font-size: 10px; color: #9db8e0;
  padding-right: 40%;
}
.ai-dash__mini-meters li::after {
  content: "";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 36%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-bright), var(--cyan));
}

/* =============================================================
   AIプレゼンコーチ（ダーク）
   ============================================================= */
.ai-coach {
  background:
    radial-gradient(ellipse 55% 70% at 80% 30%, rgba(37, 99, 235, .25) 0%, transparent 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  overflow: hidden;
}
.ai-coach__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px;
  align-items: center;
}
.ai-coach__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 2.4vw, 31px);
  letter-spacing: .05em;
  margin-bottom: 16px;
}
.ai-coach__label { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--blue-light); margin-bottom: 20px; }
.ai-coach__text { font-size: 15.5px; line-height: 2.3; letter-spacing: .04em; color: #cfdcf2; margin-bottom: 36px; }
.ai-coach__features { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 26px; }
.ai-coach__features li { display: grid; justify-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: .06em; }
.ai-coach__feature-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 14px;
  border: 1px solid rgba(110, 168, 255, .4);
  background: rgba(13, 30, 60, .6);
}
.ai-coach__feature-icon svg { width: 28px; height: 28px; fill: var(--blue-light); }
.ai-coach__visual { position: relative; padding-right: 60px; }
.mock-phone {
  position: absolute; right: 0; bottom: -20px;
  width: 120px;
  border: 6px solid #1c2434;
  border-radius: 20px;
  background: #0b1830;
  box-shadow: 0 20px 50px rgba(3, 9, 22, .6);
}
.mock-phone__screen { padding: 16px 12px 20px; display: grid; justify-items: center; gap: 12px; }
.mock-phone__title { font-size: 10px; letter-spacing: .12em; color: #9db8e0; justify-self: start; }

/* =============================================================
   BEFORE / AFTER
   ============================================================= */
.beforeafter { background: var(--white); }
/* 中央にサービスを置く3列構成にしたので、見出しは上に出す。
   左カラムに置いたままだとカードに幅が残らず、見出し自身も
   「る。」だけ3行目に落ちていた（430pxでも足りない）。 */
.beforeafter__inner { display: block; }
.beforeafter__title {
  text-align: center;
  margin-bottom: 46px;
  font-size: clamp(24px, 2.6vw, 32px);
}
.beforeafter__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

/* BEFORE は白地の薄い扱い、AFTER は紺地で締める。
   以前は同じ形のカードを灰色と青で塗り分けただけで、しかもAFTERが
   青グラデ＋青枠＋青影というSaaSダッシュボードの言語になっていた。
   このLPの面は「紺地・金の細罫・明朝の引用」で構成する。 */
/* 中央の円が両側に26pxずつ食い込むので、内側のpaddingを厚めに取る */
.ba-card {
  border-radius: 12px;
  position: relative;
  display: flex; flex-direction: column;
}
.ba-card--before { padding: 46px 62px 28px 30px; }
.ba-card--after { padding: 46px 30px 28px 62px; }
.ba-card--before {
  background: var(--bg-lighter);
  border: 1px solid var(--line);
}
.ba-card--after {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(37, 99, 235, .22) 0%, transparent 65%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(201, 162, 77, .35);
  box-shadow: 0 16px 40px rgba(8, 18, 38, .22);
}
/* z-index 2：縦積み時に中央の円（z-index 1）がラベルに乗るのを防ぐ */
.ba-card__label {
  position: absolute; top: -13px; left: 22px;
  z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  padding: 5px 16px; border-radius: 3px;
}
.ba-card--before .ba-card__label {
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
}
/* 金＝人。AFTERは「人が伝え方を変えた結果」なので金で締める */
.ba-card--after .ba-card__label {
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
/* 引用は明朝。BEFOREは冗長さが伝わるよう薄く、AFTERは白で立てる */
.ba-card__quote {
  font-family: var(--serif);
  font-size: 16px; line-height: 2.05; letter-spacing: .03em;
  margin-bottom: 22px;
  line-break: strict;
}
/* 薄くしすぎると「冗長」ではなく「読めない」になる。読ませる文なので落としすぎない */
.ba-card--before .ba-card__quote { color: #6b7688; }
.ba-card--after .ba-card__quote { color: var(--white); font-weight: 700; }
/* ベタ塗りのボタンに見せない。押せそうに見えるが、ただのラベル。
   margin-top: auto でタグを下端に送ると、タグ数の少ないBEFORE側の
   引用とタグの間に大きな穴が空く。引用のすぐ下に置き、余りは下に逃がす。 */
.ba-card__tags {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.ba-card__tags li {
  font-size: 12px; line-height: 1.5; text-align: center;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 999px;
  background: none;
}
.ba-card--before .ba-card__tags li {
  color: #98a3b8;
  border: 1px solid #dbe2ec;
}
.ba-card--after .ba-card__tags li {
  color: var(--gold-light);
  border: 1px solid rgba(201, 162, 77, .45);
}
/* 各パネルの締め。参考スライドの「時間をかけて提案資料を作るが品質が上がらない」に相当 */
.ba-card__sum {
  margin-top: 26px;
  padding-top: 18px;
  font-size: 15px; font-weight: 700; line-height: 1.85; letter-spacing: .03em;
  text-align: center;
  line-break: strict;
}
.ba-card--before .ba-card__sum {
  color: #7e8ba3;
  border-top: 1px solid var(--line);
}
.ba-card--after .ba-card__sum {
  color: var(--gold-light);
  border-top: 1px solid rgba(201, 162, 77, .3);
}

/* ---------- 中央のサービス（ハブ）----------
   左右のパネルへ矢印が開く。円は白＋金環：灰色のパネルにも紺のパネルにも
   negative しないよう、どちらとも違う面にしている。 */
.ba-hub {
  display: flex; align-items: center;
  align-self: center;
  /* 円をパネルに食い込ませる。離すと「3つ並んだ図」になり、
     中央が起点だという関係が読めない。 */
  margin: 0 -26px;
  z-index: 1;
}
.ba-hub__circle {
  width: 178px; height: 178px;
  border-radius: 50%;
  display: grid; place-content: center;
  text-align: center;
  background: var(--white);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 30px rgba(8, 18, 38, .16);
  padding: 0 14px;
}
/* ロゴの文字を外したぶん、文言に級数を戻せる（12px → 13px） */
.ba-hub__mark {
  width: 66px; height: 66px;
  margin: 0 auto 10px;
}
.ba-hub__text {
  font-size: 13px; line-height: 1.7; letter-spacing: .02em;
  color: var(--ink-soft);
  line-break: strict;
}
/* 参考スライドの矢印は面として効いている。細い線だと関係を示す力が出ない */
.ba-hub__arrow { width: 26px; flex: none; }
.ba-hub__arrow--left { margin-right: 10px; color: #b9c3d4; }
.ba-hub__arrow--right { margin-left: 10px; color: var(--gold); }

/* ---------- 締めの帯 ----------
   参考スライドの濃いグレーの帯に相当。断定はしない（成果はモデルケース扱い）。 */
.beforeafter__bar {
  margin-top: 34px;
  padding: 26px 30px;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #dbe5f5;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 23px);
  letter-spacing: .06em;
  line-break: strict;
}
.beforeafter__bar strong {
  color: var(--gold-light);
  font-weight: 700;
}

/* =============================================================
   90分フロー
   ============================================================= */
.flow { background: var(--white); padding-top: 40px; }
.flow__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  counter-reset: step;
}
.flow__step { position: relative; display: grid; justify-items: center; text-align: center; gap: 14px; padding-top: 6px; }
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute; top: 46px; left: calc(50% + 48px); right: calc(-50% + 48px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(37, 99, 235, .45) 0 6px, transparent 6px 12px);
}
.flow__icon {
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid rgba(37, 99, 235, .55);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .12);
}
.flow__icon svg { width: 32px; height: 32px; fill: var(--blue); }
.flow__step h3 { font-size: 17px; font-weight: 700; color: var(--navy-light); letter-spacing: .06em; }
.flow__step p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }

/* =============================================================
   ご利用開始までの流れ（お問い合わせ→契約→開始）
   添付イメージは縦並び／黄だったが、横並び＋濃紺で。
   紺のSTEPバッジを主役色にし、カード間は右向きの矢で流れを示す。
   ============================================================= */
.startflow { background: var(--white); }
.startflow__head { margin-bottom: 40px; }
.startflow__steps { display: flex; align-items: stretch; gap: 34px; }
.startflow__step {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 24px;
  box-shadow: 0 12px 30px rgba(19, 40, 78, .07);
}
/* STEPバッジ：濃紺の縦ブロック（黄の代わりに紺を主役に） */
.startflow__no {
  align-self: flex-start;
  display: grid; justify-items: center; gap: 2px;
  width: 62px; padding: 10px 0 12px;
  border-radius: 12px;
  background: linear-gradient(158deg, #24467f 0%, #13284e 72%);
  box-shadow: 0 8px 18px rgba(19, 40, 78, .28);
  margin-bottom: 18px;
}
.startflow__no span { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #9db8e0; }
.startflow__no strong { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1; color: var(--white); }
.startflow__title { font-size: 17px; font-weight: 700; color: var(--navy-light); letter-spacing: .04em; margin-bottom: 10px; }
.startflow__text { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
/* カード間の右向きの矢。gap の中央に置く */
.startflow__step:not(:last-child)::after {
  content: "";
  position: absolute; right: -22px; top: 50%;
  width: 11px; height: 11px;
  border-top: 2.5px solid var(--navy-light); border-right: 2.5px solid var(--navy-light);
  transform: translateY(-50%) rotate(45deg);
}

/* =============================================================
   利用シーン（台本めくり／紙芝居演出）
   ============================================================= */
@property --bevel {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.scenes { position: relative; }
.scenes__stage {
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(37, 99, 235, .2) 0%, transparent 65%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deepest) 100%);
  overflow: hidden;
}
/* 机（背景の台本罫） */
.scenes__desk {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(110, 168, 255, .05) 38px 39px);
}

/* --- 台本ページ --- */
.scene { position: relative; z-index: calc(20 - var(--i)); }

/* シーンごとの舞台背景。めくるたびに現場の景色が変わる。
   カードの中に入れると紙と一緒に引き抜かれてしまうため、
   ステージ側の独立したレイヤーとして持つ。

   注意：--pic の url() は「宣言した場所」ではなく「var() を使う側の
   CSSファイル」を基準に解決される。このファイルは /css/ にあるため、
   相対パスだと /css/images/... を見にいって404になる。
   そのため index.html 側では必ずルート基準（/images/...）で書くこと。 */
.scenes__bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-bg {
  position: absolute; inset: 0;
  /* 写真の明暗はそのままに、色みだけ紺へ寄せる（紺のダブルトーン化）。
     乗算だと元が暗い写真は黒く潰れ、明るい写真は灰色に濁るため
     luminosity を使い、どちらの写真でも階調が残るようにする。 */
  background: var(--pic) var(--pic-pos, center) / cover no-repeat, #24406f;
  background-blend-mode: luminosity;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 2.2s ease;
}
.scene-bg.is-on { opacity: 1; transform: scale(1); }
/* 紙の下（中央）は濃く、外周は薄めにして景色を見せる */
.scene-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 62% at 50% 48%, rgba(5, 13, 29, .88) 0%, rgba(5, 13, 29, .58) 80%),
    linear-gradient(180deg, rgba(8, 18, 38, .5), rgba(5, 13, 29, .66));
}
.scene__paper {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 30%);
  align-items: center;
  gap: 0 40px;
  width: min(1060px, 88vw);
  margin-inline: auto;
  padding: 44px 48px 44px 0;
  background:
    linear-gradient(180deg, #fbf9f3 0%, #f3efe3 100%);
  border-radius: 3px;
  box-shadow:
    0 30px 70px rgba(2, 8, 20, .55),
    0 3px 8px rgba(2, 8, 20, .4),
    0 2px 0 rgba(255, 255, 255, .5) inset;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);
}
/* 台本の左マージン（罫と綴じ穴） */
.scene__margin {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 26px 0;
  border-right: 1px solid rgba(190, 60, 60, .35);
  background:
    radial-gradient(4px 4px at 50% 22%, rgba(30, 40, 60, .16) 50%, transparent 51%),
    radial-gradient(4px 4px at 50% 50%, rgba(30, 40, 60, .16) 50%, transparent 51%),
    radial-gradient(4px 4px at 50% 78%, rgba(30, 40, 60, .16) 50%, transparent 51%);
}
.scene__no {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: #b23b3b;
  writing-mode: vertical-rl; letter-spacing: .16em;
}
.scene__cue {
  font-size: 9px; letter-spacing: .24em; color: #9a9384;
  writing-mode: vertical-rl;
}
.scene__body { padding: 8px 0; }
.scene__label {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3vw, 40px); font-weight: 700;
  letter-spacing: .04em; color: #c8c2b0;
  line-height: 1; margin-bottom: 10px;
}
.scene__title {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 33px); font-weight: 700;
  letter-spacing: .06em; color: #23282f; margin-bottom: 22px;
}
.scene__note {
  font-size: 14.5px; letter-spacing: .04em; color: #6d6656;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px dashed rgba(109, 102, 86, .35);
}
.scene__line {
  font-family: var(--serif); font-size: clamp(15px, 1.55vw, 19px); line-height: 2;
  letter-spacing: .02em; color: #23282f; margin-bottom: 20px;
}
.scene__speaker {
  display: inline-block;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: #4a5468; background: rgba(74, 84, 104, .1);
  border-radius: 3px; padding: 3px 9px; margin-right: 10px;
  vertical-align: middle;
}
/* 赤入れ（プロの添削） */
.scene__redink {
  position: relative;
  display: inline-block;
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  color: #c0392b;
  transform: rotate(-1.4deg);
  padding: 4px 2px;
}
.scene__redink::before {
  content: "→";
  margin-right: 8px;
}
.scene__redink::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 5px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(192, 57, 43, .45) 0%, transparent 70%);
}
/* 台本に貼り込んだ現場写真。各シーンの --pic を使う */
.scene__visual {
  min-height: 0;
  aspect-ratio: 4 / 3.4;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(2, 8, 20, .3);
  background: var(--pic, linear-gradient(150deg, #3d5378, #1d2c47)) center / cover no-repeat, #22314c;
}
/* 紙面のトーンに馴染ませる（青みを足して沈める） */
.scene__visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(13, 27, 51, .3) 0%, rgba(8, 18, 38, .5) 100%);
  mix-blend-mode: multiply;
}

/* --- 表紙 --- */
.scene__paper--cover {
  display: block;
  text-align: center;
  padding: clamp(48px, 7vw, 84px) 44px;
}
.scene__cover-label {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 15px; letter-spacing: .3em; color: #b23b3b;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid rgba(190, 60, 60, .3);
  display: inline-block;
}
.scene__cover-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.7;
  letter-spacing: .06em; color: #23282f;
  margin-bottom: 26px;
}
.scene__cover-note { font-size: 13.5px; letter-spacing: .04em; color: #7d7666; }
.scene__cover-scroll {
  font-size: 11px; letter-spacing: .3em; color: #9a9384;
  margin-top: 34px;
}
.scene__cover-scroll span { display: block; margin-top: 4px; animation: scrollFloat 1.8s ease-in-out infinite; }

/* --- 進行インジケーター --- */
.scenes__index { display: none; }

/* =============================================================
   PC：紙芝居（ステージ固定＋カードを1枚ずつ引き抜く）
   ============================================================= */
@media (min-width: 900px) {
  /* 7ページ × 160vh ぶん固定する。末尾の +100vh は最後のページを
     めくり切るまで固定を保つための余白（sticky は container高 - 100vh で解除されるため）。 */
  .scenes__scroll { position: relative; height: calc(7 * 160vh + 100vh); }
  .scenes__stage {
    position: sticky; top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
  }
  .scene {
    grid-area: 1 / 1;
    width: 100%;
    display: grid;
    place-items: center;
    transform-origin: 0% 100%;
    transition:
      transform .9s cubic-bezier(.22, .61, .36, 1),
      opacity .8s ease,
      --bevel .9s cubic-bezier(.22, .61, .36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  /* ページを扇状にずらし、束の下に次のページが控えているのを見せる */
  .scene__paper {
    height: min(660px, 76vh);
    transform: rotate(calc((var(--i) - 3) * .7deg)) translateY(calc((var(--i) - 3) * -2px));
  }
  .scene__paper--cover {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }

  /* 表示中：右下角を斜めに切り、下の次ページを覗かせる */
  .scene.is-active { --bevel: 92px; }
  .scene.scene--last.is-active { --bevel: 0px; }

  /* 表示済み：左下角を軸に、左上へ引き抜く */
  .scene.is-past {
    --bevel: 96px;
    opacity: 0;
    transform: translate(-25%, -25%) rotate(-10deg);
  }

  .scenes__index {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    z-index: 30;
    display: grid; gap: 12px;
  }
  .scenes__index li {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(207, 220, 242, .3);
    transition: background .4s ease, transform .4s ease;
  }
  .scenes__index li.is-on { background: var(--cyan); transform: scale(1.5); }
}

/* 動きを減らす設定では固定を解除して縦積みに */
@media (prefers-reduced-motion: reduce) {
  .scenes__scroll { height: auto !important; }
  .scenes__stage { position: static !important; height: auto !important; display: block !important; padding: 80px 0; }
  .scene { grid-area: auto !important; transform: none !important; opacity: 1 !important; --bevel: 0px !important; padding: 20px 0; }
  .scene__paper { transform: none !important; }
}

/* =============================================================
   成果（モデルケース）
   ============================================================= */
.results {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(37, 99, 235, .14) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deepest) 0%, #06101f 100%);
  color: var(--white);
  overflow: hidden;
}
.results__head { margin-bottom: 52px; }
.results__eyebrow {
  font-size: 14px; letter-spacing: .16em; color: #9db8e0;
  margin-bottom: 14px;
}
.results__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: .06em;
  line-height: 1.6;
}
/* 参考LPの「キーワードに金の下線」を再現する */
.results__key {
  position: relative;
  padding-bottom: 6px;
}
.results__key::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light) 50%, var(--gold-deep));
  border-radius: 2px;
}

/* 隅の鉤括弧で囲う */
.results__frame { position: relative; padding: 46px 30px; }
.rcorner {
  position: absolute;
  width: 26px; height: 26px;
  border: 0 solid rgba(232, 205, 128, .55);
  pointer-events: none;
}
.rcorner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.rcorner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.rcorner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.rcorner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
/* 上下中央の小さな目盛り */
.results__frame::before,
.results__frame::after {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 42px; height: 1px;
  background: rgba(232, 205, 128, .45);
}
.results__frame::before { top: 0; }
.results__frame::after { bottom: 0; }

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 0;
}
.rcard { padding: 0 10px; }
/* 列の間に細い区切りを入れる */
.rcard:not(:nth-child(3n)) { border-right: 1px solid rgba(158, 190, 235, .16); }

/* カード全体を押せるようにする */
.rcard__btn {
  display: block;
  width: 100%;
  padding: 16px 10px 14px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.rcard__btn:hover { background: rgba(232, 205, 128, .06); transform: translateY(-3px); }
.rcard__btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.rcard__no {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 13px; letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 6px;
}
.rcard__scene {
  display: block;
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.rcard__metric {
  display: block;
  font-size: 12px; letter-spacing: .06em; color: #9db8e0;
  margin-bottom: 16px;
}
/* 押せることを示す。常時は控えめ、ホバーで金に灯す */
.rcard__more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px;
  font-size: 11.5px; letter-spacing: .08em;
  color: #7e93b8;
  transition: color .25s ease;
}
.rcard__more::after {
  content: "";
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.rcard__btn:hover .rcard__more { color: var(--gold-light); }
.rcard__btn:hover .rcard__more::after { transform: rotate(45deg) translate(2px, -2px); }
.rcard__figure {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  white-space: nowrap;
}
.rcard__before, .rcard__after { display: inline-flex; align-items: baseline; }
/* 変化前は沈ませ、変化後を主役にする */
.rcard__before {
  font-family: var(--serif);
  font-size: 20px; color: #6f83a6;
}
.rcard__before small { font-size: 12px; margin-left: 1px; }
.rcard__arrow {
  position: relative;
  width: 30px; height: 10px; flex: none;
  align-self: center;
}
.rcard__arrow::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 1.5px;
  background: linear-gradient(90deg, rgba(232, 205, 128, .25), var(--gold-light));
}
.rcard__arrow::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--gold-light);
  border-right: 1.5px solid var(--gold-light);
  transform: translateY(-50%) rotate(45deg);
}
.rcard__after {
  font-family: var(--serif);
  font-size: 17px; color: var(--gold-pale);
}
.rcard__after strong {
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  letter-spacing: .01em;
  margin-right: 2px;
  filter: drop-shadow(0 2px 14px rgba(201, 162, 77, .3));
}
.rcard__after small { font-size: 15px; }

.results__note {
  font-size: 12px; line-height: 1.9; letter-spacing: .02em;
  color: #8fa3c4;
  text-align: center;
  margin-top: 34px;
}
.results__note strong { color: #cfdcf2; font-weight: 700; }

/* =============================================================
   成果の詳細（ライトボックス）
   ネイティブの <dialog> を使う。Escで閉じる・背景を触れなくする・
   フォーカスを閉じ込める、を標準機能に任せられるため。
   ============================================================= */
.rmodal {
  max-width: min(580px, 92vw);
  width: 100%;
  /* リセットの margin:0 が <dialog> にも効き、UAの中央寄せ(margin:auto)を
     打ち消して左上に貼り付いていた。inset:0 は効いているので margin:auto で中央へ戻す。 */
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: visible;
}
.rmodal::backdrop {
  background: rgba(3, 8, 18, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rmodal__inner {
  position: relative;
  max-height: 86vh;
  overflow-y: auto;
  padding: 42px 40px 34px;
  border: 1px solid rgba(232, 205, 128, .32);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(37, 99, 235, .22) 0%, transparent 62%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deepest) 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
}
/* 上辺の金の箔 */
.rmodal__inner::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold-light) 30%, var(--gold-pale) 50%, var(--gold-light) 70%, transparent);
}

.rmodal__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(158, 190, 235, .3);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rmodal__close::before,
.rmodal__close::after {
  content: "";
  position: absolute;
  width: 13px; height: 1.5px;
  background: #cfdcf2;
}
.rmodal__close::before { transform: rotate(45deg); }
.rmodal__close::after { transform: rotate(-45deg); }
.rmodal__close:hover { background: rgba(232, 205, 128, .16); border-color: var(--gold); transform: rotate(90deg); }
.rmodal__close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.rmodal__no {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 6px;
}
.rmodal__title {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 29px); font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.rmodal__metric {
  font-size: 12.5px; letter-spacing: .06em; color: #9db8e0;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(158, 190, 235, .2);
}
.rmodal__figure {
  display: flex; align-items: baseline; gap: 12px;
  white-space: nowrap;
  margin-bottom: 10px;
}
.rmodal__before {
  font-family: var(--serif);
  font-size: 22px; color: #6f83a6;
}
.rmodal__before small { font-size: 13px; margin-left: 1px; }
.rmodal__arrow {
  position: relative;
  width: 32px; height: 10px; flex: none; align-self: center;
}
.rmodal__arrow::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 24px; height: 1.5px;
  background: linear-gradient(90deg, rgba(232, 205, 128, .25), var(--gold-light));
}
.rmodal__arrow::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--gold-light);
  border-right: 1.5px solid var(--gold-light);
  transform: translateY(-50%) rotate(45deg);
}
.rmodal__after { font-family: var(--serif); font-size: 18px; color: var(--gold-pale); }
.rmodal__after strong {
  font-size: clamp(42px, 5vw, 56px); font-weight: 700;
  margin-right: 3px;
  filter: drop-shadow(0 2px 14px rgba(201, 162, 77, .3));
}
.rmodal__after small { font-size: 16px; }

.rmodal__lead {
  font-family: var(--serif);
  font-size: 17px; letter-spacing: .06em;
  color: var(--gold-light);
  margin-bottom: 22px;
}
.rmodal__body {
  font-size: 14px; line-height: 2.1; letter-spacing: .03em;
  color: #cfdcf2;
  margin-bottom: 26px;
}

/* 補足数値 */
.rstats {
  background: rgba(5, 13, 29, .5);
  border: 1px solid rgba(158, 190, 235, .18);
  border-radius: 10px;
  padding: 20px 22px;
}
.rstats__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold);
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(158, 190, 235, .16);
}
.rstats__list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(158, 190, 235, .14);
}
.rstats__list li:last-child { border-bottom: 0; }
.rstats__k { font-size: 12.5px; color: #9db8e0; letter-spacing: .02em; }
.rstats__v {
  margin-left: auto;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--white);
  text-align: right;
  line-break: strict;
}
/* 要点の行だけは金で強調し、幅いっぱいに置く */
.rstats__list li.is-key {
  margin-top: 4px;
  padding: 12px 14px;
  border-bottom: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(232, 205, 128, .16), rgba(201, 162, 77, .08));
  border: 1px solid rgba(201, 162, 77, .35);
}
.rstats__list li.is-key .rstats__v {
  margin-left: 0;
  width: 100%;
  text-align: center;
  color: var(--gold-pale);
  font-size: 14px;
}

.rmodal__note {
  font-size: 11px; line-height: 1.8; color: #7e93b8;
  text-align: center;
  margin-top: 18px;
}

/* --- 開閉の動き --- */
@keyframes rmodalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes rmodalOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px) scale(.98); }
}
@keyframes rbackdropIn { from { opacity: 0; } to { opacity: 1; } }
.rmodal[open] { animation: rmodalIn .38s cubic-bezier(.22, .61, .36, 1); }
.rmodal[open]::backdrop { animation: rbackdropIn .38s ease; }
.rmodal.is-closing { animation: rmodalOut .2s ease forwards; }
.rmodal.is-closing::backdrop { animation: rbackdropIn .2s ease reverse forwards; }

@media (prefers-reduced-motion: reduce) {
  .rmodal[open], .rmodal.is-closing,
  .rmodal[open]::backdrop, .rmodal.is-closing::backdrop { animation: none; }
  .rcard__btn:hover { transform: none; }
}

/* =============================================================
   取引企業ロゴ
   マーキーの仕組みは所属アナウンサー一覧と共通（.roster__marquee /
   .roster__row / .roster__track を再利用し、JSも同じものが動く）。
   ============================================================= */
.clients {
  background: var(--white);
  padding: 72px 0;
  overflow: hidden;
}
.clients__marquee { padding: 6px 0; }
.clogo {
  flex: none;
  /* gap ではなく margin-right。-50% をちょうど1組分に一致させるため */
  margin-right: 56px;
  height: 46px;
  display: grid;
  place-items: center;
}
.clogo img {
  max-height: 46px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
/* 支給ロゴの表示補正（元ファイルは商標なので改変せず、白地で見えるよう表示だけ調整）。
   正式な色版が手に入ったら差し替えてこのクラスを外す。 */
.clogo img.is-invert { filter: invert(1); }      /* 白抜きロゴ（KADOKAWA）を黒へ */
.clogo img.is-darken { filter: brightness(.5); } /* 薄いグレー（Nestlé）を濃く */
/* ロゴ支給前の仮枠。差し替え時はこの span を img に置き換える */
.clogo__ph {
  display: grid; place-items: center;
  width: 150px; height: 46px;
  font-size: 11px; letter-spacing: .12em;
  color: #a7b1c2;
  background: var(--bg-lighter);
  border: 1px dashed var(--line);
  border-radius: 4px;
}

.clients__head {
  max-width: 640px;
  margin: 40px auto;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.clients__title {
  font-size: clamp(17px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--ink);
  line-break: strict;
}

.clients__note {
  font-size: 11.5px; line-height: 1.8; letter-spacing: .02em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 34px;
  padding-inline: 20px;
}

/* =============================================================
   なぜKotoUchiなのか
   ============================================================= */
.why {
  background:
    radial-gradient(ellipse 50% 80% at 90% 20%, rgba(37, 99, 235, .18) 0%, transparent 60%),
    linear-gradient(100deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
}
.why__inner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.why__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: .06em;
  line-height: 1.8;
}
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.why-item { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 10px 22px; }
.why-item:not(:first-child) { border-left: 1px solid rgba(110, 168, 255, .25); }
.why-item__icon {
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  border: 1.5px solid rgba(110, 168, 255, .55);
  background: radial-gradient(circle at 35% 30%, rgba(37, 99, 235, .35), rgba(10, 22, 46, .6) 75%);
  box-shadow: 0 0 26px rgba(59, 130, 246, .35);
}
.why-item__icon svg { width: 38px; height: 38px; fill: var(--white); }
.why-item h3 { font-family: var(--serif); font-size: 17.5px; font-weight: 600; letter-spacing: .04em; }
.why-item p { font-size: 13.5px; line-height: 1.95; color: #b9c8e2; }

/* =============================================================
   講師
   ============================================================= */
/* 背景に講師写真を薄く敷く（白を強く被せて可読性を保つ） */
.teachers {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.teachers::before {
  content: "";
  position: absolute;
  right: -4%; top: -12%;
  width: 46%; height: 124%;
  /* 透かし専用の軽い版（400x561・18KB）。元の naito-yuko.jpg は424KBあり、
     全ページ・全画面幅で必ず読み込まれるので使わないこと。
     この枠は 656x2144 で、元画像を2.2倍に拡大して左右を切った状態で表示される。
     つまり細部は元から見えていない（しかも opacity .08）。
     比率は元画像と同じ0.713にしてある。変えると cover の切り取り位置がずれる。 */
  background: url("../images/naito-yuko-wm.jpg") no-repeat center 18% / cover;
  opacity: .08;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 100%);
  pointer-events: none;
}
.teachers > .container { position: relative; z-index: 1; }
.teachers__content { max-width: 780px; margin-bottom: 42px; }
.teachers__content .heading-serif { margin-bottom: 22px; font-size: clamp(24px, 2.7vw, 33px); }
.teachers__text { font-size: 15.5px; line-height: 2.2; letter-spacing: .04em; color: var(--ink-soft); }

/* 講師＝人なので、青ではなく金を差し色にする */
.teacher-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  background: var(--bg-lighter);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px;
  overflow: hidden;
}
/* 上辺の金の箔 */
.teacher-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light) 35%, var(--gold-pale) 50%, var(--gold-light) 65%, var(--gold-deep));
}
.teacher-card__photo {
  border-radius: 10px;
  overflow: hidden;
  background: #e8eef7;
  box-shadow: 0 12px 30px rgba(27, 42, 74, .14);
}
/* 実寸比のまま表示する（トリミングによる歪みを避ける） */
.teacher-card__photo img { display: block; width: 100%; height: auto; }

.teacher-card__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.teacher-card__name {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 8px;
}
.teacher-card__kana {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: .1em;
  color: var(--ink-soft);
  margin-left: 14px;
  vertical-align: 3px;
}
.teacher-card__role {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold-deep);
  background: linear-gradient(135deg, rgba(232, 205, 128, .22), rgba(201, 162, 77, .14));
  border: 1px solid rgba(201, 162, 77, .5);
  border-radius: 4px;
  padding: 5px 12px;
  margin-bottom: 20px;
}
.teacher-card__career {
  font-size: 14.5px; line-height: 2.1; letter-spacing: .03em;
  color: var(--ink-soft);
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.teacher-card__meta { display: grid; gap: 14px; margin-bottom: 22px; }
.teacher-card__meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
.teacher-card__meta dt {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink);
  padding-top: 2px;
}
.teacher-card__meta dd { font-size: 13.5px; line-height: 1.95; letter-spacing: .02em; color: var(--ink-soft); }

/* =============================================================
   協力事務所の所属アナウンサー（自動スクロール）
   ============================================================= */
.roster { margin-top: 56px; }
.roster__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.roster__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--gold-deep);
  background: rgba(201, 162, 77, .1);
  border: 1px solid rgba(201, 162, 77, .35);
  border-radius: 3px;
  padding: 3px 10px;
}
.roster__label {
  font-family: var(--serif);
  font-size: 19px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
  line-break: strict;
}
.roster__note {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px; font-weight: 400; color: var(--ink-soft);
  margin-left: 10px; letter-spacing: .04em;
  white-space: nowrap;
}

/* --- 事務所の紹介 --- */
.agency {
  padding: 0;
  margin-bottom: 30px;
}
.agency__desc {
  font-size: 14px; line-height: 2.1; letter-spacing: .03em;
  color: var(--ink-soft);
}

.roster__lead { font-size: 13.5px; letter-spacing: .02em; color: var(--ink-soft); line-break: strict; margin-bottom: 22px; }

/* 左右の端をふわっと消して、流れが途切れて見えないようにする */
.roster__marquee {
  display: grid;
  gap: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.roster__row { overflow: hidden; }
.roster__track {
  display: flex;
  width: max-content;
  animation: rosterLeft var(--dur, 60s) linear infinite;
}
.roster__row[data-dir="right"] .roster__track { animation-name: rosterRight; }
/* JSが原本＋必要な組数の複製を並べ、1組ぶんの実寸（--shift）だけ動かして戻す。
   組数は段の幅によって変わるので、-50% のような割合では位置が合わない。
   gap ではなく margin-right を使うのは、--shift をちょうど1組分に一致させるため。 */
@keyframes rosterLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shift, 50%))); }
}
@keyframes rosterRight {
  from { transform: translateX(calc(-1 * var(--shift, 50%))); }
  to   { transform: translateX(0); }
}
.anno {
  flex: none;
  width: 128px;
  margin-right: 20px;
  text-align: center;
}
.anno img {
  display: block;
  width: 128px; height: 128px;
  border-radius: 12px;
  object-fit: cover;
  background: #e8eef7;
  box-shadow: 0 6px 18px rgba(27, 42, 74, .14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.anno:hover img { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(27, 42, 74, .22); }
.anno__name {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
  margin-top: 11px;
}
.anno__role {
  display: block;
  font-size: 10.5px; line-height: 1.6; letter-spacing: .01em;
  color: var(--ink-soft);
  margin-top: 4px;
  /* 「ー」が行頭に落ちないよう禁則を厳格にする */
  line-break: strict;
}

/* 動きを減らす設定では流さず、折り返して並べる。
   ループ用の複製は同じ人が二重に出てしまうため隠す。 */
@media (prefers-reduced-motion: reduce) {
  .roster__marquee { -webkit-mask-image: none; mask-image: none; }
  .roster__row { overflow: visible; }
  .roster__track {
    animation: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
  }
  .is-clone { display: none; }
}

.teacher-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher-card__tags li {
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--gold-deep);
  background: rgba(201, 162, 77, .07);
  border: 1px solid rgba(201, 162, 77, .38);
  border-radius: 999px;
  padding: 5px 14px;
}

/* =============================================================
   料金プラン
   ============================================================= */
.pricing { background: var(--bg-light); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 22px 24px;
  box-shadow: 0 10px 28px rgba(27, 42, 74, .06);
}
.price-card--popular {
  border: 2px solid var(--navy-light);
  box-shadow: 0 20px 46px rgba(19, 40, 78, .2);
  /* リボンぶんの余白(+14px)と持ち上げ(-14px)を相殺し、価格の高さを他と揃える */
  padding-top: 44px;
  transform: translateY(-14px);
}
.price-card__ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--navy-light);
  color: var(--gold-pale);
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-align: center;
  padding: 9px 0;
  border-radius: 9px 9px 0 0;
}
/* リボン下端の金の箔 */
.price-card__ribbon::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale) 50%, var(--gold-deep));
}
.price-card__name { font-size: 18px; font-weight: 700; color: var(--navy-light); letter-spacing: .04em; text-align: center; margin-bottom: 4px; }
.price-card--popular .price-card__name { color: var(--blue); font-size: 20px; }
/* 1行のカードと2行のカードで価格の高さがずれないよう、2行ぶんを確保する */
.price-card__for { font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.7; margin-bottom: 14px; min-height: 3.4em; }
.price-card--popular .price-card__for { color: var(--blue); font-weight: 700; }
/* 金額は必ず1行に収める（折り返すとカード間で行位置がずれるため） */
.price-card__price { text-align: center; margin-bottom: 8px; line-height: 1.3; white-space: nowrap; }
.price-card__price small { font-size: 12px; color: var(--ink-soft); }
.price-card__price strong { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); color: var(--ink); margin-inline: 2px; }
/* 契約期間（資料の「契約期間」列） */
.price-card__term {
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-soft);
  background: rgba(19, 40, 78, .06);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.price-card--popular .price-card__term { background: rgba(37, 99, 235, .1); color: var(--blue); }
.price-card__features { flex: 1; display: grid; align-content: start; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 18px; }
/* 含まれないものは、含まれるものと見た目で区別する */
.price-card__features li.is-none { color: #97a1b2; }
.price-card__features li.is-none::before { content: "－"; color: #b6bfcd; }
.price-card__features li {
  position: relative;
  font-size: 13.5px; line-height: 1.8; color: var(--ink-soft);
  padding-left: 14px;
  /* 「AIプレゼンコーチ 月120分」を数字と単位で分断させず、
     半角スペースの位置で折り返す。収まらない時だけ字間で折る。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.price-card__features li::before { content: "・"; position: absolute; left: 0; color: var(--blue); }
/* 1人あたり価格：月額の上に置く単価バッジ（色地＋白文字で視認性を上げる） */
.price-card__per {
  align-self: center;
  padding: 4px 13px;
  border-radius: 6px;
  background: var(--navy-light);
  color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 9px;
}
.price-card__per strong { color: #fff; font-weight: 700; margin-left: 1px; }
.price-card--popular .price-card__per { background: var(--blue); }

/* 「月の使い方を詳しく見る」：枠線ゴースト→やわらかい塗りの角丸。ホバーで矢印が右へ滑る */
.price-card__more {
  margin-top: 16px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--navy-light);
  background: rgba(19, 40, 78, .05);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.price-card__more::after {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.price-card__more:hover { background: rgba(19, 40, 78, .1); }
.price-card__more:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.price-card__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.price-card--popular .price-card__more { color: var(--blue); background: rgba(37, 99, 235, .08); }
.price-card--popular .price-card__more:hover { background: rgba(37, 99, 235, .15); }
.pricing__note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 30px; }

/* =============================================================
   目的に合わせて自由にカスタマイズ（追加ポイント／オプション）
   ============================================================= */
.customize { background: var(--white); }
.customize__title { margin-bottom: 18px; }
.customize__lead {
  font-size: 15.5px; line-height: 2.1; letter-spacing: .03em;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 44px;
}

/* --- ポイントの仕組み --- */
.ptbasic {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  background:
    radial-gradient(ellipse 60% 80% at 12% 50%, rgba(37, 99, 235, .18) 0%, transparent 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  border-radius: 14px;
  padding: 32px 38px;
  margin-bottom: 44px;
  box-shadow: 0 18px 44px rgba(10, 22, 46, .28);
}
.ptbasic__rate {
  text-align: center;
  padding-right: 36px;
  border-right: 1px solid rgba(158, 190, 235, .3);
}
.ptbasic__label {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 12px; letter-spacing: .28em; color: var(--blue-light);
  margin-bottom: 10px;
}
.ptbasic__price {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: var(--serif);
  white-space: nowrap;
}
.ptbasic__price strong { font-size: 34px; font-weight: 700; letter-spacing: .02em; }
.ptbasic__price small { font-family: var(--sans); font-size: 13px; margin-right: 4px; }
.ptbasic__eq { font-size: 20px; margin: 0 8px; color: var(--blue-light); }
.ptbasic__tax { font-size: 11px; letter-spacing: .1em; color: #9db8e0; margin-top: 6px; }

.ptbasic__list { display: grid; gap: 16px; }
.ptbasic__list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.ptbasic__list dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--white);
  padding-top: 2px;
}
.ptbasic__list dt .icon { width: 17px; height: 17px; color: var(--blue-light); }
.ptbasic__list dd { font-size: 13.5px; line-height: 1.9; letter-spacing: .02em; color: #cfdcf2; }
.ptbasic__list dd strong { color: var(--white); font-weight: 700; }

/* --- オプション（目的別アコーディオン） --- */
.opts { display: grid; gap: 12px; }
.opt {
  background: var(--bg-lighter);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.opt[open] {
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 10px 30px rgba(37, 99, 235, .1);
}
.opt__head {
  display: flex; align-items: center; gap: 13px;
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  transition: background .2s ease;
}
.opt__head::-webkit-details-marker { display: none; }
.opt__head:hover { background: rgba(37, 99, 235, .04); }
/* アイコンは廃止。見出しの文字だけで十分に見分けがつくうえ、
   箱入り／線画のどちらで組んでもこのLPの他の面と揃わなかった。 */
.opt__title {
  font-size: 16.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
}
/* 開閉のマークは＋。開くと縦棒だけ90度回して−になる（線が重なる）。 */
.opt__toggle {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
  margin-left: auto;
}
.opt__toggle::before,
.opt__toggle::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--ink-soft);
  transition: transform .3s ease, background .3s ease;
}
.opt__toggle::before {
  width: 16px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.opt__toggle::after {
  width: 1.5px; height: 16px;
  transform: translate(-50%, -50%);
}
.opt[open] .opt__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.opt[open] .opt__toggle::before,
.opt[open] .opt__toggle::after { background: var(--blue); }

.opt__body { padding: 0 22px 6px; }
.opt__list { border-top: 1px solid var(--line); }
.opt__list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(215, 226, 240, .9);
}
.opt__list li:last-child { border-bottom: 0; }
/* オプション名はこのセクションの中身そのもの。補足の級数（14.5px以下）に
   落とすと、値段の数字だけが目立って何のオプションか読めなくなる。 */
.opt__name {
  font-size: 15.5px; line-height: 1.8; letter-spacing: .02em;
  color: var(--ink);
  line-break: strict;
}
.opt__pt {
  margin-left: auto;
  flex: none;
  font-size: 12px; letter-spacing: .02em;
  color: var(--blue);
  white-space: nowrap;
}
.opt__pt strong {
  font-family: var(--serif);
  font-size: 20px; font-weight: 700;
  margin-right: 2px;
}
.opt__pt--ask {
  font-size: 13px; font-weight: 700;
  color: var(--navy-light);
  background: rgba(19, 40, 78, .07);
  border-radius: 4px;
  padding: 4px 10px;
}
/* メディア掲載オプションだけは、名称だけでは中身が伝わらないので一行の説明を添える */
.opt__desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px; line-height: 1.65; letter-spacing: .01em;
  color: var(--ink-soft);
}
/* 掲載保証がないことなど、アコーディオン内で完結させたい注記 */
.opt__note {
  margin-top: 12px;
  font-size: 12px; line-height: 1.75; color: var(--ink-soft);
}

.customize__note {
  font-size: 12.5px; line-height: 1.9; color: var(--ink-soft);
  text-align: center;
  margin-top: 26px;
}
.customize__cta { text-align: center; margin-top: 34px; }

/* =============================================================
   プライバシー / 管理機能
   ============================================================= */
.privacy { background: var(--bg-lighter); }
.privacy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 48px;
  align-items: center;
}
.privacy__content .heading-serif { margin-bottom: 22px; font-size: clamp(21px, 2.2vw, 27px); }
.privacy__text { font-size: 15.5px; line-height: 2.2; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 30px; }
.privacy__chips { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px; }
.privacy__chips li {
  display: grid; justify-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--ink); text-align: center; line-height: 1.5;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 12px;
  min-width: 114px;
}
.privacy__chips .icon { width: 26px; height: 26px; color: var(--blue); }

/* 既存顧客向けの導線。本文CTAより控えめにする */
.privacy__login {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--navy-light);
  padding: 12px 24px;
  border: 1px solid rgba(19, 40, 78, .25);
  border-radius: 999px;
  background: var(--white);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.privacy__login .icon { width: 15px; height: 15px; color: var(--gold-deep); }
.privacy__login .btn__arrow { font-size: 13px; }
.privacy__login:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 77, .08);
  transform: translateY(-2px);
}
.privacy__login:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.privacy__visual { position: relative; padding-right: 160px; }
.privacy__lock {
  position: absolute; right: 0; top: 50%; transform: translateY(-60%);
  display: grid; justify-items: center; gap: 12px;
  text-align: center;
  font-size: 12px; line-height: 1.8; color: var(--ink-soft);
  width: 150px;
}
.privacy__lock-icon {
  display: grid; place-items: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7fa3d8, #52719f);
  box-shadow: 0 16px 36px rgba(27, 42, 74, .3);
}
.privacy__lock-icon svg { width: 44px; height: 44px; fill: var(--white); }
.privacy__lock strong { color: var(--navy-light); font-weight: 700; }

/* admin dashboard mock */
.admin-dash { background: var(--white); padding: 18px; font-size: 11px; }
.admin-dash__title { font-size: 12px; font-weight: 700; color: var(--navy-light); letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.admin-dash__section { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em; margin-bottom: 8px; }
.admin-dash__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.admin-dash__summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: grid; gap: 2px;
}
.admin-dash__summary span { font-size: 9.5px; color: var(--ink-soft); }
.admin-dash__summary strong { font-family: var(--serif); font-size: 18px; color: var(--navy-light); }
.admin-dash__summary small { font-size: 9.5px; font-family: var(--sans); }
.admin-dash__table { width: 100%; border-collapse: collapse; }
.admin-dash__table th {
  font-size: 9.5px; font-weight: 500; color: var(--ink-soft); text-align: left;
  background: var(--bg-light);
  padding: 6px 8px;
}
.admin-dash__table td { font-size: 10.5px; padding: 7px 8px; border-bottom: 1px solid #edf2f8; color: var(--ink); }
.admin-dash__table td:first-child { display: flex; align-items: center; gap: 6px; }
.admin-dash__table .avatar {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #8fa3c0, #5d7396);
}
.admin-dash__table .active { color: #0e9f6e; font-weight: 700; }

/* =============================================================
   FAQ
   ============================================================= */
.faq { background: var(--white); }
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.faq__title { margin-bottom: 0; font-size: clamp(24px, 2.6vw, 32px); }
.faq__list { display: grid; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; gap: 18px;
  list-style: none;
  cursor: pointer;
  padding: 22px 10px;
  font-size: 16px; font-weight: 500; letter-spacing: .04em;
  transition: background .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-lighter); }
.faq-item__q { font-family: var(--serif); font-size: 19px; color: var(--blue); flex: none; }
.faq-item__toggle { position: relative; margin-left: auto; width: 14px; height: 14px; flex: none; }
.faq-item__toggle::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.faq-item[open] .faq-item__toggle::before { transform: rotate(225deg); top: 8px; }
.faq-item__answer { padding: 0 10px 24px 52px; }
.faq-item__answer p { font-size: 15px; line-height: 2; color: var(--ink-soft); }

/* =============================================================
   CTA
   ============================================================= */
.cta {
  position: relative;
  color: var(--white);
  padding: 100px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 15% 100%, rgba(37, 99, 235, .4) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 90% 10%, rgba(97, 212, 255, .16) 0%, transparent 60%),
    linear-gradient(115deg, var(--navy-deepest) 0%, var(--navy-deep) 55%, #0a1e42 100%);
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 64px;
  align-items: center;
}
.cta__copy {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .06em;
  margin-bottom: 22px;
}
.cta__sub { font-size: 15px; letter-spacing: .12em; color: #cfdcf2; }
.cta__action { display: grid; gap: 16px; }
.cta__logo { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.cta__logo-en { font-family: var(--serif); font-size: 38px; font-weight: 700; letter-spacing: .04em; }
.cta__logo-ja { font-size: 15px; color: #cfdcf2; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { background: var(--navy-deepest); color: #8fa3c4; padding: 44px 0 0; }
.footer__inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 28px 40px;
  padding-bottom: 32px;
}
.footer__logo { display: flex; align-items: center; gap: 11px; }
.footer__mark { width: 30px; height: 30px; flex: none; }
.footer__logo-text { font-family: var(--serif); font-size: 20px; color: var(--white); }
.footer__logo-text span { font-size: 12px; color: #8fa3c4; margin-left: 4px; }
.footer__tagline { font-size: 12px; letter-spacing: .08em; color: #8fa3c4; margin-top: 8px; }

.footer__nav { display: grid; gap: 14px; justify-items: end; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; }
.footer__links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; letter-spacing: .04em;
  color: #cfdcf2;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.footer__links a:hover { color: var(--gold-light); border-color: rgba(232, 205, 128, .5); }
/* 管理画面は既存顧客向けなので、他のリンクと区別して枠で示す */
.footer__login {
  color: var(--gold-pale) !important;
  border: 1px solid rgba(201, 162, 77, .45) !important;
  border-radius: 999px;
  padding: 5px 14px !important;
  background: rgba(201, 162, 77, .08);
  transition: background .25s ease, border-color .25s ease;
}
.footer__login .icon { width: 13px; height: 13px; }
.footer__login:hover { background: rgba(201, 162, 77, .18); border-color: var(--gold) !important; }
/* 別タブで開くことを示す */
.footer__ext {
  width: 9px; height: 9px;
  border: 1px solid currentColor;
  border-left: 0; border-bottom: 0;
  position: relative;
  flex: none;
}
.footer__ext::after {
  content: "";
  position: absolute; right: -1px; top: 0;
  width: 11px; height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right top;
}
.footer__operator { font-size: 11.5px; letter-spacing: .04em; color: #7e93b8; text-align: right; }

.footer__bottom {
  border-top: 1px solid rgba(158, 190, 235, .16);
  padding: 18px 0;
}
.footer__copy { font-size: 11.5px; letter-spacing: .06em; text-align: center; }

/* =============================================================
   scroll reveal
   ============================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* 900px未満：紙芝居を解除し、台本ページを縦に積む */
@media (max-width: 899px) {
  .scenes__stage { padding: 72px 0; }
  .scene { padding: 16px 0; }
  .scene__paper {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 24px;
    padding: 30px 30px 30px 0;
  }
  .scene__visual { grid-column: 2; margin-top: 22px; aspect-ratio: 16 / 9; }
  .scene__label { font-size: 26px; }
  .scene__title { font-size: 22px; }
  .scene__line { font-size: 16px; }
  .scene__paper--cover { padding: 48px 30px; }

}

@media (max-width: 1080px) {
  /* 4枚なので2列にすると2段ぴったりに収まり、余りが出ない */
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .price-card--popular { transform: none; }
  /* 15pxの日本語を3列に収めるには幅が足りないので、ここで2列に落とす */
  .troubles__grid { grid-template-columns: repeat(2, 1fr); }
  .why__inner { grid-template-columns: 1fr; gap: 40px; }
  .why__title br { display: none; }
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .why-item:nth-child(3) { border-left: none; }
  .flow__steps { grid-template-columns: repeat(3, 1fr); gap: 34px 8px; }
  .flow__step:nth-child(3n)::after { display: none; }
  .teacher-card { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; padding: 28px; }

  /* BEFORE/AFTER は3列（カード＋円＋カード）。円が198px、左右のpaddingが92px
     取られるので、1080pxを切るとカードの中身が228pxしか残らず引用が縦長に潰れる
     （900pxで実測）。ここで縦積みに切り替える。
     ※メディアクエリはスクロールバーを含む幅で判定する（clientWidth 885 でも
       innerWidth は900）。899pxで切ると発火せず潰れたままだった。 */
  .beforeafter__cards { grid-template-columns: minmax(0, 1fr); }
  /* 円は上下のカードをつなぐ位置へ。矢印も下向きに回す。 */
  .ba-hub {
    flex-direction: column;
    margin: -26px auto;
    align-self: center;
  }
  .ba-hub__arrow { width: 22px; transform: rotate(90deg); }
  .ba-hub__arrow--left { margin: 0 0 4px; }
  .ba-hub__arrow--right { margin: 4px 0 0; }
  /* 見出し「言葉」×「壁打ち」。は、2カラムだと左が最小333pxしか残らず折れる。
     図（520px固定）を下に回して、見出しに幅を渡す。 */
  .cycle__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  /* 横並び用に厚くしていた内側paddingを戻す（円は上下に来るので不要） */
  .ba-card--before { padding: 46px 28px 42px; }
  .ba-card--after { padding: 46px 28px 28px; }
}

@media (max-width: 960px) {
  /* 横に人物を立てる幅が無くなると、キービジュアルは成立しない。
     縦に積むと「コピーを読み終えた下に写真とモックが置いてある」だけになり、
     ヒーローが762px（画面の0.7枚ぶん）伸びてCTAから先を遠ざける。
     人物の顔と肩書はすぐ下の帯（内藤さん＋局名）が担い、
     講師の詳細は下部の講師カードにあるので、ここで消しても情報は落ちない。
     AIパネルは中身がモック（aria-hidden）なので、なおさら縦を使う価値がない。
     効果は縦の短縮（実測762px＝画面0.7枚ぶん）であって、帯域ではない。 */
  .hero__kv, .hero__kvcap, .hero__aside { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  /* 縦積みでは重なりが無いので、帯の下に紺を敷く必要がない */
  .hero__roster::before { display: none; }
  .cycle__inner { grid-template-columns: 1fr; }
  .ai-coach__inner { grid-template-columns: 1fr; }
  .privacy__inner { grid-template-columns: 1fr; }
  .service { grid-template-columns: 1fr; gap: 30px; }
  .mock-comments { position: static; transform: none; width: auto; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
  .faq__inner { grid-template-columns: 1fr; gap: 24px; }
  .cta__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  /* 成果は2列に。区切り線の位置も2列基準に付け替える */
  .results__grid { grid-template-columns: repeat(2, 1fr); gap: 38px 0; }
  .rcard:not(:nth-child(3n)) { border-right: 0; }
  .rcard:not(:nth-child(2n)) { border-right: 1px solid rgba(158, 190, 235, .16); }
  /* ポイント単価を上、説明を下に積む */
  .ptbasic { grid-template-columns: 1fr; gap: 26px; padding: 28px; }
  .ptbasic__rate {
    padding-right: 0; padding-bottom: 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(158, 190, 235, .3);
  }
  /* 4枚を横に並べる幅が無くなったら縦積みにし、矢は下向きにする（＝添付図の形） */
  .startflow__steps { flex-direction: column; gap: 28px; max-width: 480px; margin-inline: auto; }
  .startflow__step:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -20px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* AI×人の横並びは1行に約1063px必要。収まらなくなる前(≈1140px)で縦積みへ。
   640pxまで待つと、中間幅で連結線が宙に浮き・チェーンが下段にずれて崩れる。 */
@media (max-width: 1140px) {
  .gap__flow { flex-direction: column; gap: 18px; }
  .gap__connector { width: 40px; height: 30px; transform: rotate(90deg); align-self: center; }
  .gap__card { width: 100%; }
  .gap__items { justify-content: center; }
  .gap__chain { justify-content: center; align-self: center; }
}

@media (max-width: 640px) {
  .pc { display: none; }
  .sp { display: inline; }
  .section { padding: 64px 0; }
  .container { padding-inline: 20px; }
  .hero { padding: 64px 0 90px; }
  .hero__logo-en { font-size: 34px; }
  .hero__title { font-size: 30px; }
  .topbar { top: 14px; }
  .topbar__login { font-size: 11px; padding: 7px 13px; gap: 6px; }
  .topbar__login .icon { width: 12px; height: 12px; }
  .hero__lead::after { display: none; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .gap__items { flex-wrap: wrap; gap: 18px; }
  .gap__chain li { width: 64px; height: 64px; font-size: 13px; }
  .troubles__grid { grid-template-columns: 1fr; }
  .trouble-card br { display: none; }
  .cycle__title { font-size: 29px; }
  .cycle__text br { display: none; }
  .cycle__node { width: 90px; }
  .cycle__node-icon { width: 54px; height: 54px; }
  .cycle__node-icon svg { width: 22px; height: 22px; }
  .cycle__node-label { font-size: 10.5px; }
  .cycle__node-label small { font-size: 9.5px; }
  .service { padding-left: 20px; }
  .service__text br { display: none; }
  .ai-coach__features { grid-template-columns: repeat(2, 1fr); }
  .ai-coach__text br { display: none; }
  .ai-coach__visual { padding-right: 0; }
  .mock-phone { display: none; }
  .ai-dash__grid { grid-template-columns: 1fr 1fr; }
  .ai-dash__score { grid-column: 1 / 3; grid-row: auto; }
  .ai-dash__advice { grid-column: 1 / 3; }
  .flow__steps { grid-template-columns: repeat(2, 1fr); }
  .flow__step::after { display: none !important; }
  .scene__paper { grid-template-columns: 38px minmax(0, 1fr); gap: 0 16px; padding: 24px 20px 24px 0; }
  .scene__margin { padding: 16px 0; }
  .scene__cover-title { font-size: 26px; }
  .why__grid { grid-template-columns: 1fr; }
  .why-item { border-left: none !important; padding: 10px 0; }
  .why-item p br { display: none; }
  .clients { padding: 52px 0; }
  .clogo { margin-right: 32px; height: 36px; }
  .clogo img { max-height: 36px; max-width: 120px; }
  .clogo__ph { width: 104px; height: 36px; font-size: 9.5px; letter-spacing: .06em; }
  .clients__head { margin: 28px 16px; padding: 16px 14px; }
  .agency { padding: 0; }
  .agency__desc { font-size: 13.5px; }
  .roster__label { font-size: 17px; }
  .roster__note { display: block; margin-left: 0; margin-top: 4px; }
  /* 写真を上、プロフィールを下に積む */
  .teacher-card { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .teacher-card__photo { width: min(220px, 60%); margin-inline: auto; }
  .teacher-card__name { font-size: 24px; }
  .teacher-card__kana { display: block; margin-left: 0; margin-top: 6px; vertical-align: 0; }
  .teacher-card__career { font-size: 14px; }
  .teacher-card__career br { display: none; }
  .teacher-card__meta > div { grid-template-columns: 1fr; gap: 4px; }
  .teachers__text br { display: none; }
  .pricing__grid { grid-template-columns: 1fr; }
  /* 成果は1列。数字の対比が主役なので、列より1件ずつの見やすさを優先する */
  .results__grid { grid-template-columns: 1fr; gap: 30px 0; }
  .rcard { border-right: 0 !important; padding: 0 8px; }
  .rcard:not(:last-child) { padding-bottom: 30px; border-bottom: 1px solid rgba(158, 190, 235, .16); }
  .results__frame { padding: 34px 16px; }
  .rcard__after strong { font-size: 40px; }
  .customize__lead { font-size: 14.5px; }
  .ptbasic { padding: 24px 20px; }
  .ptbasic__list > div { grid-template-columns: 1fr; gap: 6px; }
  .opt__head { padding: 14px 16px; gap: 12px; }
  .opt__title { font-size: 15px; }
  .opt__body { padding: 0 16px 4px; }
  .opt__list li { flex-wrap: wrap; gap: 4px 10px; padding: 12px 0; }
  .opt__name { font-size: 13.5px; flex: 1 1 auto; }
  .opt__pt strong { font-size: 18px; }
  .privacy__chips { grid-template-columns: repeat(2, 1fr); }
  .privacy__visual { padding-right: 0; }
  .privacy__lock { position: static; transform: none; width: auto; margin-top: 20px; justify-items: center; }
  .privacy__text br { display: none; }
  .faq-item__answer { padding-left: 10px; }
  .cta__copy br { display: none; }
  .footer__inner { justify-content: center; text-align: center; gap: 22px; }
  .footer__brand { width: 100%; }
  .footer__nav { width: 100%; justify-items: center; }
  .footer__links { justify-content: center; gap: 8px 20px; }
  .footer__operator { text-align: center; line-height: 1.9; }
}