/* 2026-10-23 クチリピ 1.4.0: 看板(G2)・自分の台本・新機能・コーチの週次レポートの見本(G4)。色と形は LP のトークンだけを使う */

/* 看板: 3行になるので、元の2行の見出しより一回り小さくする */
.hero66__title--140 { font-size: clamp(2.5rem, .75rem + 6.2vw, 7rem); }
.hero66__title--140 .kw { display: block; width: fit-content; }
.hero66__motto {
  justify-self: start; width: fit-content; margin-top: .25rem;
  padding: .2em .95em; border: 2px solid currentColor; border-radius: var(--shape-full);
  font-size: clamp(1rem, .9rem + .45vw, 1.375rem); font-weight: 900; letter-spacing: .06em; line-height: 1.5;
  color: var(--sc-on);
}

/* 自分の台本 */
.kr140-script__inner { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.kr140-script__intro { margin-top: 1rem; max-width: 36em; font-size: var(--type-body-l); }
.kr140-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); counter-reset: none; }
.kr140-steps li {
  position: relative; display: grid; align-content: start; gap: .5rem;
  padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--shape-l);
  background: var(--md-surface-2); color: var(--md-on-surface);
}
.kr140-steps__n {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary); font-weight: 900; font-size: 1rem; line-height: 1;
}
.kr140-steps h3 { font-size: var(--type-title-m); font-weight: 900; line-height: 1.5; }
.kr140-steps p { font-size: var(--type-body-m); line-height: 1.8; color: var(--md-on-surface-variant); }
.kr140-script__note { max-width: 46em; font-size: var(--type-body-m); line-height: 1.8; color: var(--md-on-surface-variant); }
.kr140-script__note a { color: var(--md-primary); font-weight: 800; text-underline-offset: .2em; white-space: nowrap; }

.kr140-new__link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: .25rem;
  color: var(--md-primary); font-weight: 900; text-decoration: none;
}
.kr140-new__link:hover { text-decoration: underline; text-underline-offset: .25em; }

/* コーチの週次レポートの見本(料金表の下) */
.kr140-sample { position: relative; max-width: 44rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; }
.kr140-sample__stamp {
  position: absolute; z-index: 1; top: -.9rem; left: 1.25rem;
  padding: .15rem .9rem; border-radius: var(--shape-full);
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: var(--type-label-m); font-weight: 900; letter-spacing: .2em;
}
.kr140-sample__card {
  display: grid; gap: 1rem; padding: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  border: 2px dashed var(--md-outline); border-radius: calc(var(--shape-l) + 4px);
  background: var(--md-surface-2); color: var(--md-on-surface);
}
.kr140-sample__title { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); font-weight: 900; line-height: 1.45; }
.kr140-sample__who { font-size: var(--type-label-m); font-weight: 700; color: var(--md-on-surface-variant); }
.kr140-sample__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.kr140-sample__stats div { padding: .6rem .5rem; border-radius: var(--shape-m); background: var(--md-surface); text-align: center; }
.kr140-sample__stats dt { font-size: .75rem; font-weight: 800; color: var(--md-on-surface-variant); line-height: 1.4; }
.kr140-sample__stats dd { font-size: 1.25rem; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kr140-sample__body { display: grid; gap: .9rem; }
.kr140-sample__body div { display: grid; gap: .3rem; }
.kr140-sample__body dt { font-size: var(--type-label-m); font-weight: 900; letter-spacing: .08em; color: var(--md-primary); }
.kr140-sample__body dd { font-size: var(--type-body-m); line-height: 1.85; }
.kr140-sample__next { padding: .9rem 1rem; border-radius: var(--shape-m); background: var(--md-surface); }
.kr140-sample__sign { justify-self: end; font-size: var(--type-label-m); font-weight: 800; color: var(--md-on-surface-variant); }
.kr140-sample__note { margin-top: .9rem; font-size: .8125rem; line-height: 1.7; color: var(--md-on-surface-variant); }

/* G11 看板(Gemini 5章の二層の表)。5行の引用なので、さらに小さくする */
.hero66__badge {
  justify-self: start; width: fit-content; padding: .3em .9em; border-radius: var(--shape-s);
  background: var(--sc-on); color: var(--sc-bg);
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem); font-weight: 900; line-height: 1.5; letter-spacing: .02em;
}
.hero66__title--n5 { font-size: clamp(1.875rem, .95rem + 3.6vw, 3.9rem); line-height: 1.12; letter-spacing: -.03em; }
.hero66__title--n5 + .hero66__motto { font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); padding: .15em .8em; border-width: 1.5px; }

/* G12 共感と課題の言い直し */
.kr140-why__list { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.kr140-why__list li { display: grid; gap: .5rem; align-content: start; padding: 1.4rem 1.4rem 1.5rem; border-left: 4px solid var(--md-primary); border-radius: var(--shape-m); background: var(--md-surface-2); }
.kr140-why__list h3 { font-size: var(--type-title-m); font-weight: 900; line-height: 1.5; }
.kr140-why__list p { font-size: var(--type-body-m); line-height: 1.85; color: var(--md-on-surface-variant); }
.kr140-why__close { margin-top: 1.5rem; max-width: 40em; font-size: var(--type-body-l); font-weight: 800; }

/* G12 5つの機能 */
.kr140-feats__grid { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.kr140-feat {
  display: grid; align-content: start; gap: .55rem; padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-l); background: var(--md-surface); color: var(--md-on-surface);
}
.kr140-feat__n {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary); font-weight: 900; line-height: 1;
}
.kr140-feat h3 { font-size: var(--type-title-m); font-weight: 900; line-height: 1.5; }
.kr140-feat p { font-size: var(--type-body-m); line-height: 1.85; color: var(--md-on-surface-variant); }
.kr140-feat__note { font-size: .8125rem !important; line-height: 1.7 !important; padding-top: .5rem; border-top: 1px solid var(--md-outline-variant); }

/* G12 価格の比較(会社名なし・記号なし) */
.kr140-cmp__wrap { margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kr140-cmp__table { width: 100%; border-collapse: collapse; font-size: var(--type-body-m); line-height: 1.7; }
.kr140-cmp__table th, .kr140-cmp__table td { padding: .8rem .9rem; border-bottom: 1px solid var(--md-outline-variant); text-align: left; vertical-align: top; }
.kr140-cmp__table thead th { font-size: var(--type-label-m); font-weight: 900; color: var(--md-on-surface-variant); }
.kr140-cmp__table tbody th { font-weight: 800; }
.kr140-cmp__table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr140-cmp__us { background: var(--md-surface-2); }
.kr140-cmp__us th, .kr140-cmp__us td { font-weight: 800; }
.kr140-cmp__note { margin-top: 1rem; max-width: 46em; font-size: .8125rem; line-height: 1.7; color: var(--md-on-surface-variant); }
@media (max-width: 40em) {
  .kr140-cmp__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kr140-cmp__table tr { display: block; margin-top: .75rem; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-m); overflow: hidden; }
  .kr140-cmp__table th, .kr140-cmp__table td { display: block; border: 0; padding: .55rem .9rem; }
  .kr140-cmp__table td { border-top: 1px solid var(--md-outline-variant); white-space: normal !important; }
  .kr140-cmp__table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 800; color: var(--md-on-surface-variant); }
  .kr140-cmp__table tbody th { background: var(--md-surface-2); }
  .kr140-cmp__table .kr140-cmp__us th { background: var(--md-primary); color: var(--md-on-primary); }
}
.hero66__title--n5 .kw:first-child { margin-left: -.45em; }

/* 料金カードの行(10/18 にアプリ＋コーチへ条件の行を足したら、6行の subgrid からはみ出して年額のリンクと重なっていた。本番 4aaf66f7 の 1280px で確認)。
   7行にして、条件の行が無いカードには空の行を置く */
@media (min-width: 56.25em) {
  .lo-price .plans.lo-plans.lo-plans--3 { grid-template-rows: repeat(7, auto); }
  .lo-plans--3 .lo-plan { grid-row: span 7; }
  .lo-plan__cond:empty { margin: 0; }
}
.hero66__worry { max-width: 26em; font-size: clamp(1rem, .9rem + .55vw, 1.375rem); font-weight: 900; line-height: 1.6; color: var(--sc-on); }
.kr140-cmp__table tbody th a { color: inherit; text-underline-offset: .2em; }

/* 料金表の青塾の一行(上の段) */
.kr140-aojuku { max-width: 46rem; margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) auto 0; padding: .9rem 1.1rem; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-m); font-size: var(--type-body-m); line-height: 1.8; text-align: center; }
.kr140-aojuku a { color: var(--md-primary); font-weight: 800; text-underline-offset: .2em; white-space: nowrap; }
/* 料金表の段が4つ以上のとき(KR_PLANS_EXTRA=1) */
@media (min-width: 56.25em) {
  .lo-price .plans.lo-plans.lo-plans--3.lo-plans--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 84rem; }
  .lo-price .plans.lo-plans.lo-plans--3.lo-plans--n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(14, auto); }
}

/* 2.0 の画面(aso の撮影がそろったときだけ出る) */
.kr140-scr__grid { display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kr140-scr__item { display: grid; gap: .8rem; align-content: start; }
.kr140-scr__item img { width: 100%; height: auto; border-radius: calc(var(--shape-l) + 6px); box-shadow: var(--elev-2); background: var(--md-surface); }
.kr140-scr__item figcaption { display: grid; gap: .25rem; }
.kr140-scr__item b { font-size: var(--type-title-m); font-weight: 900; }
.kr140-scr__item span { font-size: var(--type-body-m); line-height: 1.8; color: var(--md-on-surface-variant); }
@media (max-width: 48em) { .kr140-scr__grid { grid-template-columns: minmax(0, 1fr); max-width: 22rem; margin-inline: auto; } }

/* 新しいお客さま向けの料金表(KR_PRICING=new の4枚)。広い画面は4列、中くらいは2列×2段、狭い画面はアプリ＋コーチ → アプリ → 「他のプランを見る」 */
@media (min-width: 56.25em) {
  .lo-price .plans.lo-plans.lo-plans--3.lo-plans--new { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(14, auto); max-width: 64rem; }
}
@media (min-width: 90em) {
  .lo-price .plans.lo-plans.lo-plans--3.lo-plans--new { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); max-width: 92rem; }
  .lo-plans--new .lo-plan .amount { font-size: clamp(2.75rem, 1.2rem + 2.4vw, 4rem); }
  .lo-plans--new .lo-plan .plan-top h3 { font-size: clamp(1.25rem, .9rem + .7vw, 1.6rem); }
}
/* 1440px 未満は2列×2段(4列だと金額と名前が折り返す。1280px で確認) */
.lo-plans--new .lo-plan .amount { white-space: nowrap; }
.lo-plans--new .lo-plan .plan-top h3 { word-break: keep-all; }
.lo-plans--new .lo-plan--m .lo-plan__sum:not(:empty) { display: inline-block; width: fit-content; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); font-size: .8125rem; font-weight: 800; }
@media (max-width: 48em) {
  .lo-plans--new .lo-plan--entry { order: 2; }
  .lo-plans--new .lo-plans__more { order: 3; }
  .lo-plans--new .kr140-tier { order: 4; }
  .lo-plans--new .referral-entry { order: 5; }
  .lo-plans--new:not(.is-open) .kr140-tier { display: none; }
}
.hero66__title--long { font-size: clamp(1.75rem, .9rem + 3.4vw, 3.6rem); line-height: 1.14; letter-spacing: -.03em; }

/* ===== 版 J(10/24): 続けるための練習の区画を作り直す ===== */
/* 看板と同じ太い大きな見出し。「増えました」は看板の強調の行と同じテラコッタ(暗い表示はアプリコット) */
.kr140-new--j { overflow: clip; }
.kr140-new__title { font-size: clamp(2.2rem, .9rem + 5.6vw, 6.25rem); font-weight: 900; line-height: 1.06; letter-spacing: -.045em; color: var(--md-on-surface); }
.kr140-new__title > span { display: block; width: fit-content; }
.kr140-new__hi { color: #A63828; }
.kr140-new--j .kr140-new__lead { margin-top: 1.1rem; max-width: 40em; font-size: var(--type-title-m); font-weight: 700; line-height: 1.7; color: var(--md-on-surface-variant); }
.kr140-new__stage { position: relative; margin-top: clamp(1rem, .5rem + 1.5vw, 1.75rem); padding-top: clamp(4.25rem, 3.5rem + 2vw, 5.5rem); }
/* のぞくリピ: カードの列のうしろから上半分だけ出す(下半分はカードに隠れる。文字には重ならない) */
.kr140-new__peek { position: absolute; top: 0; right: clamp(.5rem, 6vw, 7rem); z-index: 0; width: clamp(6.5rem, 5rem + 4vw, 9.5rem); height: auto; pointer-events: none; }
.kr140-new--j .kr140-new__grid { position: relative; z-index: 1; display: grid; gap: clamp(.8rem, .6rem + .6vw, 1.25rem); margin-top: 0; list-style: none; padding: 0; }

/* カード: 枠線なし。技能の色の薄い塗り、大きな色の丸の印、太く大きい題、短い1行 */
.kr140-new--j .kr140-new__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: clamp(1.2rem, 1rem + .6vw, 1.6rem); border: 0; border-radius: 1.75rem;
  background: var(--t-bg); color: var(--t-on); box-shadow: none;
}
.kr140-new__icon { display: grid; place-items: center; flex: none; width: 3.75rem; height: 3.75rem; margin-bottom: .3rem; border-radius: 50%; background: var(--t-ink); color: var(--t-glyph); }
.kr140-new--j .kr140-new__card h3 { font-size: clamp(1.25rem, 1.08rem + .55vw, 1.6rem); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; color: var(--t-on); }
.kr140-new--j .kr140-new__card--big h3 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.2rem); }
.kr140-new--j .kr140-new__card p { max-width: 26em; font-size: .9375rem; font-weight: 600; line-height: 1.65; color: var(--t-on); }
/* 文法のカードの注記(プランの条件)。小さく、でも読める大きさと濃さで */
.kr140-new--j .kr140-new__note { margin-top: .35rem; padding: .6rem .8rem; border: 0; border-radius: .9rem; background: var(--t-note); font-size: .8125rem !important; font-weight: 600; line-height: 1.6 !important; color: var(--t-on) !important; }
.kr140-new--j .kr140-new__link { margin-top: auto; color: var(--t-link); }
/* 着せ替えのリピ(カードの中の下。文字の流れの中に置くので重ならない) */
.kr140-new__ripi { align-self: flex-end; width: clamp(5.5rem, 4.5rem + 3vw, 9.5rem); height: auto; margin: auto -.4rem -.7rem 0; }
/* 日本語は文節で折り返す(Chrome の auto-phrase。ほかのブラウザはふつうの折り返し) */
.kr140-new--j .kr140-new__card h3, .kr140-new--j .kr140-new__card p, .kr140-new--j .kr140-new__lead { word-break: auto-phrase; }

/* 技能の色(DESIGN-2.0 §4.1。明るい表示: 印 / 棚の地 / 棚の文字) */
.kr140-new--j [data-skill="word"]   { --t-ink: #7B5CF0; --t-bg: #E8E1FD; --t-on: #3B2A8C; --t-glyph: #FFFFFF; --t-note: rgb(255 255 255 / .6); --t-link: #3B2A8C; }
.kr140-new--j [data-skill="play"]   { --t-ink: #3E8EF7; --t-bg: #DDEBFE; --t-on: #14427E; --t-glyph: #FFFFFF; --t-note: rgb(255 255 255 / .6); --t-link: #14427E; }
.kr140-new--j [data-skill="listen"] { --t-ink: #2FB36F; --t-bg: #DDF3E6; --t-on: #145C37; --t-glyph: #FFFFFF; --t-note: rgb(255 255 255 / .6); --t-link: #145C37; }
.kr140-new--j [data-skill="sound"]  { --t-ink: #D9A21F; --t-bg: #FFF1CC; --t-on: #6B4B00; --t-glyph: #FFFFFF; --t-note: rgb(255 255 255 / .6); --t-link: #6B4B00; }
.kr140-new--j [data-skill="kr"]     { --t-ink: #A63828; --t-bg: #FFF8EF; --t-on: #24201F; --t-glyph: #FFF8EF; --t-note: #F6E7D6; --t-link: #A63828; }
/* 暗い表示: 印は少し明るく、地は各色の暗い面、文字は明るい色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kr140-new__hi { color: #FFD09A; }
  :root:not([data-theme="light"]) .kr140-new--j [data-skill="word"]   { --t-ink: #9F87FF; --t-bg: #2B2447; --t-on: #E8E1FD; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #E8E1FD; }
  :root:not([data-theme="light"]) .kr140-new--j [data-skill="play"]   { --t-ink: #6AA8FF; --t-bg: #1B2C47; --t-on: #DDEBFE; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #DDEBFE; }
  :root:not([data-theme="light"]) .kr140-new--j [data-skill="listen"] { --t-ink: #4CCB8A; --t-bg: #173325; --t-on: #DDF3E6; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #DDF3E6; }
  :root:not([data-theme="light"]) .kr140-new--j [data-skill="sound"]  { --t-ink: #E8B93A; --t-bg: #3A2E0E; --t-on: #FFF1CC; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #FFF1CC; }
  :root:not([data-theme="light"]) .kr140-new--j [data-skill="kr"]     { --t-ink: #FFD09A; --t-bg: #2E2623; --t-on: #F7EDE2; --t-glyph: #24201F; --t-note: rgb(0 0 0 / .28); --t-link: #FFD09A; }
}
:root[data-theme="dark"] .kr140-new__hi { color: #FFD09A; }
:root[data-theme="dark"] .kr140-new--j [data-skill="word"]   { --t-ink: #9F87FF; --t-bg: #2B2447; --t-on: #E8E1FD; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #E8E1FD; }
:root[data-theme="dark"] .kr140-new--j [data-skill="play"]   { --t-ink: #6AA8FF; --t-bg: #1B2C47; --t-on: #DDEBFE; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #DDEBFE; }
:root[data-theme="dark"] .kr140-new--j [data-skill="listen"] { --t-ink: #4CCB8A; --t-bg: #173325; --t-on: #DDF3E6; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #DDF3E6; }
:root[data-theme="dark"] .kr140-new--j [data-skill="sound"]  { --t-ink: #E8B93A; --t-bg: #3A2E0E; --t-on: #FFF1CC; --t-glyph: #1A1615; --t-note: rgb(0 0 0 / .28); --t-link: #FFF1CC; }
:root[data-theme="dark"] .kr140-new--j [data-skill="kr"]     { --t-ink: #FFD09A; --t-bg: #2E2623; --t-on: #F7EDE2; --t-glyph: #24201F; --t-note: rgb(0 0 0 / .28); --t-link: #FFD09A; }

/* スマホ: 横に送るカルーセル(次のカードが少し見える) */
@media (max-width: 47.99em) {
  .kr140-new--j .kr140-new__grid {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter);
  }
  .kr140-new--j .kr140-new__grid::-webkit-scrollbar { display: none; }
  .kr140-new--j .kr140-new__card { flex: 0 0 min(80%, 19rem); min-height: 15.5rem; scroll-snap-align: start; }
}
/* タブレット: 2列 */
@media (min-width: 48em) and (max-width: 63.99em) {
  .kr140-new--j .kr140-new__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr140-new--j .kr140-new__card--big { grid-column: span 2; }
}
/* PC: 大小のあるタイル(単語を使ってみる・選んで進む会話は横長、点数くらべは大きな正方形、文法は縦長) */
@media (min-width: 64em) {
  .kr140-new--j .kr140-new__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(12.5rem, auto); }
  .kr140-new--j .kr140-new__grid--bento {
    grid-template-areas:
      "usevocab usevocab usegrammar mystery"
      "talk     talk     usegrammar lecture"
      "ipa      versus   versus     shadow"
      "daily    versus   versus     curriculum";
  }
  .kr140-new__grid--bento > [data-feature="usevocab"] { grid-area: usevocab; }
  .kr140-new__grid--bento > [data-feature="usegrammar"] { grid-area: usegrammar; }
  .kr140-new__grid--bento > [data-feature="talk"] { grid-area: talk; }
  .kr140-new__grid--bento > [data-feature="mystery"] { grid-area: mystery; }
  .kr140-new__grid--bento > [data-feature="versus"] { grid-area: versus; }
  .kr140-new__grid--bento > [data-feature="lecture"] { grid-area: lecture; }
  .kr140-new__grid--bento > [data-feature="ipa"] { grid-area: ipa; }
  .kr140-new__grid--bento > [data-feature="shadow"] { grid-area: shadow; }
  .kr140-new__grid--bento > [data-feature="daily"] { grid-area: daily; }
  .kr140-new__grid--bento > [data-feature="curriculum"] { grid-area: curriculum; }
  .kr140-new__grid--bento > [data-feature="versus"] .kr140-new__icon { width: 4.75rem; height: 4.75rem; }
  .kr140-new__grid--bento > [data-feature="versus"] .kr140-new__ripi { width: 15rem; }
  .kr140-new--j .kr140-new__card--big .kr140-new__icon { width: 4.25rem; height: 4.25rem; }
}

/* 動き: 画面に入ったら順に出る(1回)。押すと弾む。リピは小さく弾み続ける。動きを減らす設定ではどれも止める */
@keyframes kr140-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: no-preference) {
  .kr140-new--anim .kr140-new__card { opacity: 0; transform: translateY(28px) scale(.94) rotate(-1.2deg); transition: opacity .5s ease, transform .75s var(--ease-spring); transition-delay: calc(var(--d, 0) * 70ms); }
  .kr140-new--anim.is-in .kr140-new__card { opacity: 1; transform: none; }
  .kr140-new--j .kr140-new__card { transition: transform .45s var(--ease-spring); }
  .kr140-new--j .kr140-new__card:hover { transform: translateY(-5px) rotate(-.6deg); transition-delay: 0s; }
  .kr140-new--j .kr140-new__card:active { transform: scale(.965); transition-duration: .12s; transition-delay: 0s; }
  .kr140-new__peek { animation: kr140-bob 2.8s ease-in-out infinite; }
  .kr140-new__ripi { animation: kr140-bob 2.3s ease-in-out infinite; animation-delay: -.7s; }
}

/* 版 J: 読み進めた量の線(画面の上端に固定)の下に地の色の帯を敷く。文字の上に赤い線が引かれず、文字は帯の下に隠れる */
.read-progress { background: var(--md-surface); }

/* 版 K: 大きな見出しと物語の行は、折り返すときに文節で折る(Chrome の auto-phrase。ほかのブラウザはふつうの折り返し) */
.nb66, .scene-h, .h-display, .end-title, .kr-human__title, .yomu__l, .yomu__q { word-break: auto-phrase; }

/* 128b: L's warm paper, terracotta, generous type and real Ripi assets. */
.lp128b { padding-block: clamp(3.5rem, 7vw, 7.5rem); }
.lp128b > .wrap { display:grid; gap:1.6rem; }
.lp128b .h-display { max-width:20ch; }
.lp128b p { max-width:48em; line-height:1.85; }
.lp128b h3 { font-size:1.1rem; font-weight:800; }
.lp128b-note { font-size:.875rem; line-height:1.75; color:var(--md-on-surface-variant); }
.lp128b-slogan { font-size:clamp(2.8rem, 7.6vw, 7.4rem); font-weight:900; line-height:1.03; letter-spacing:-.055em; color:var(--sc-on); max-width:9ch; }
.lp128b-ja { font-size:clamp(1.1rem, 2.2vw, 1.9rem); font-weight:800; line-height:1.5; }
.hero66__head .lp128b-product { font-weight:900; font-size:1.1rem; margin-top:.5rem; }
.hero66__head > p { line-height:1.7; }
.lp128b-plan { display:grid; grid-template-columns:150px minmax(0,1fr); gap:2rem; align-items:center; }
.lp128b-plan > img { width:150px; height:auto; }
.lp128b-plan__work { min-width:0; display:grid; gap:1.25rem; }
.lp128b-plan__nav { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; }
.lp128b button { font:inherit; cursor:pointer; border:1px solid var(--md-outline); border-radius:var(--shape-m); background:var(--md-surface); color:var(--md-on-surface); padding:.7rem 1rem; min-height:48px; }
.lp128b button[aria-expanded="true"] { background:var(--md-primary); color:var(--md-on-primary); border-color:var(--md-primary); }
.lp128b button:disabled { opacity:.45; cursor:default; }
.lp128b button:focus-visible,.lp128b input:focus-visible,.lp128b summary:focus-visible { outline:3px solid var(--md-primary); outline-offset:4px; }
.lp128b-plan__panel { min-height:7rem; padding:1.5rem; background:var(--md-surface); border-radius:var(--shape-l); font-size:clamp(1.2rem,2vw,1.65rem); font-weight:800; }
.lp128b [hidden] { display:none !important; }
.lp128b-controls { display:flex; gap:.75rem; }
.lp128b-english { font-size:clamp(1.3rem,2.4vw,2rem); font-weight:800; overflow-wrap:break-word; }
.lp128b-english mark { background:var(--md-primary); color:var(--md-on-primary); padding:.1em .15em; border-radius:.2em; }
#fix-answer { display:grid; gap:1rem; padding:1.5rem; border-radius:var(--shape-l); background:var(--md-surface); }
.lp128b-materials { display:flex; align-items:center; gap:1rem; }
.lp128b-materials img { width:100px; height:auto; }
.lp128b summary { cursor:pointer; padding:1rem; font-weight:800; min-height:48px; }
.lp128b-demo,.lp128b-report { border-block:1px solid var(--md-outline-variant); }
.lp128b-demo .lessons66 { height:auto!important; background:transparent; }
.lp128b-demo .lessons66__sticky { position:static; height:auto; overflow:visible; }
.lp128b-demo .lessons66__bar { position:static; padding:1rem; }
.lp128b-demo .lessons66__rail,.lp128b-demo .lessons66__progress { display:none; }
.lp128b-demo .lessons66__track { display:block; transform:none!important; width:auto!important; height:auto; }
.lp128b-demo .l66 { position:relative; width:100%; height:auto; min-height:0; padding:2rem 0; }
.lp128b-demo .l66__word { display:none; }
.lp128b-demo .l66__inner { width:100%; max-width:100%; margin:auto; padding:1rem; min-height:0; }
.lp128b-demo .l66__text { padding:0; }
.lp128b-demo .scene-h { font-size:clamp(1.25rem,2.3vw,2rem); }
.lp128b-time { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.lp128b-time__day { padding:clamp(1rem,2.5vw,2rem); border-radius:var(--shape-l); background:var(--md-surface-2); }
.lp128b-time label { display:flex; justify-content:space-between; font-size:1.3rem; font-weight:900; margin-bottom:1.5rem; }
.lp128b-time input { display:block; width:100%; height:40px; accent-color:var(--md-primary); cursor:pointer; }
.lp128b-range-ends { display:flex; justify-content:space-between; font-size:.875rem; margin-bottom:1.2rem; }
.lp128b-allocation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.lp128b-allocation dt { font-size:.875rem; }
.lp128b-allocation dd { font-size:1.1rem; font-weight:900; }
.lp128b-recommend { font-weight:800; }
.lp128b-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.lp128b-result { display:grid; gap:1.5rem; padding:clamp(1.25rem,3vw,2.5rem); background:var(--md-surface); border-radius:var(--shape-l); margin:0; min-width:0; }
.lp128b-result figcaption { display:grid; gap:.6rem; font-size:1.2rem; font-weight:800; }
.lp128b-result strong { color:var(--md-primary); font-size:clamp(2.4rem,5vw,4.9rem); font-weight:900; letter-spacing:-.045em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lp128b-result svg { display:block; width:100%; height:auto; overflow:visible; }
.result-axis { fill:none; stroke:var(--md-outline); stroke-width:1.5; }
.result-change { stroke:var(--md-primary); stroke-width:8; stroke-linecap:round; }
.result-start { stroke:var(--md-primary); stroke-width:3; fill:var(--md-surface); }
.result-end { fill:var(--md-primary); }
.lp128b-result text { fill:var(--md-on-surface-variant); font-size:16px; font-family:inherit; }
#compare a { text-underline-offset:.2em; }
#pricing .lo-plan__sum { background:none; padding:0; border-radius:0; font-size:1rem; }
.lp128b-report { max-width:64rem; margin:2rem auto 0; padding:1rem; }
.lp128b-report p { padding:.5rem 1rem; line-height:1.8; }
#faq > .wrap { max-width:64rem; }
#faq .faq-list { max-width:none; }
@media(max-width:47.99em){
  .lp128b-plan { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .lp128b-plan > img { width:96px; }
  .lp128b-plan__nav button { padding:.6rem .8rem; }
  .lp128b-time,.lp128b-results { grid-template-columns:minmax(0,1fr); }
  .lp128b-result strong { font-size:clamp(2.4rem,10vw,3.8rem); }
  .lp128b-demo .l66__inner { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
}
@media(prefers-reduced-motion:reduce){.lp128b *, .lp128b-slogan { animation:none!important; transition:none!important; }}

@media(min-width:48em) and (max-width:63.99em){ .display-panel { left:0; right:auto; } }
/* The original speaking card moved out of hero; retain its original flow layout. */
.lp128b-demo .say-card { display:block; padding:0; margin-right:8px; border-radius:0; background:none; box-shadow:none; perspective:1400px; cursor:pointer; }
.lp128b-demo .say-card .speak-ja { min-height:2.9em; font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem); line-height:1.45; }
.lp128b-demo .say-think { position:static; height:1.4em; font-size:1.35rem; margin-top:.1rem; }
.lp128b-demo .speak { gap:.7rem; }