/* 2026-11-02 Sol の査定を反映した LP の追加分 */
.k4-bar { margin: 0; padding: .55rem 1rem; background: #24201F; text-align: center; font-size: .8125rem; font-weight: 800; line-height: 1.5; }
.k4-bar a { color: #FFF8EF; text-decoration: none; }
.k4-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp128b-ja.k4-ja { font-size: clamp(1.375rem, 5vw, 2rem); font-weight: 900; line-height: 1.35; }
.k2-plans--2 { max-width: 46rem; }
@media (min-width: 48em) { .k2-plans.k2-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k4-notice { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--k2-fill); font-size: .875rem; font-weight: 700; line-height: 1.75; }
.k4-diag { margin: 1.25rem 0; font-size: .9375rem; line-height: 1.7; }
.k4-diag b { display: block; font-size: 1.125rem; font-weight: 900; }
.k4-scores { list-style: none; display: grid; gap: .75rem; margin: 1.5rem 0 1rem; padding: 0; }
@media (min-width: 40em) { .k4-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k4-scores li { padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--k2-fill); }
.k4-scores span { display: block; font-size: .875rem; font-weight: 800; }
.k4-scores b { display: inline-block; margin-right: .5rem; font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 900; line-height: 1.15; color: var(--md-primary); }
.k4-scores small { font-size: .875rem; font-weight: 800; }
.k4-line { margin: .25rem 0; font-size: .875rem; font-weight: 700; line-height: 1.7; }
.k4-plan-sec { padding-top: 0; }
.k4-plan { list-style: none; display: grid; gap: .6rem; max-width: 46rem; margin: 0 auto; padding: 0; }
.k4-plan li { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--md-surface); }
.k4-plan b { font-size: .8125rem; font-weight: 800; color: var(--md-primary); }
.k4-plan span { font-size: 1rem; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.k4-end-note { font-weight: 800; }
.k4-apps .end-note a, .k4-apps .dl-meta, .k4-apps .line-contact { color: var(--md-on-surface); }
.k4-apps .dl-row { margin: 1rem 0; }
.k4-apps .wrap { display: grid; gap: .75rem; justify-items: start; }
/* 11/2 ChatGPT のイラスト */
.k4-ill { display: block; width: 100%; height: auto; }
.k4-ill--practice { max-width: 34rem; margin: .5rem 0 1rem; }
.k4-ill--materials { max-width: 30rem; margin: 1rem 0; }
/* 11/2 診断の節: 広い画面は 左=見出しと結果の見本、右=手順とボタン */
@media (min-width: 64em) {
  .p-diag .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .p-diag .wrap > h2 { grid-column: 1 / -1; }
  .p-diag .k2-result { grid-column: 1; grid-row: 2 / span 3; margin: 0; max-width: none; }
  .p-diag .p-steps { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; }
  .p-diag .p-steps li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 .75rem; align-items: start; }
  .p-diag .p-steps li > :not(.p-num) { grid-column: 2; }
  .p-diag .p-steps .p-num { grid-row: 1 / span 2; }
  .p-diag .p-cta { grid-column: 2; grid-row: 3; margin: 1.25rem 0 0; max-width: none; }
  .p-diag .g-cta-note { grid-column: 2; grid-row: 4; }
}
/* 11/4 使った人の声: 帯と同じく流れる2段(上は左へ、下は右へ。触れると止まる) */
.c-vm { overflow: hidden; display: grid; gap: .75rem; padding-block: .25rem; }
.c-vm-track { display: flex; width: max-content; }
.c-vm-list { display: flex; flex: 0 0 auto; gap: .75rem; margin: 0; padding: 0 .375rem; list-style: none; }
.c-vm-list li { flex: 0 0 auto; width: min(19rem, 78vw); padding: 1rem 1.1rem; border-radius: 20px; background: #FFF8EF; color: #24201F; font-size: 1.0625rem; font-weight: 800; line-height: 1.55; }
.c-vm-list small { display: block; margin-top: .35rem; font-size: .75rem; font-weight: 600; color: #6B605A; }
.c-voices .c-vm + .wrap:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .c-vm-row .c-vm-track { animation: marquee 70s linear infinite; }
  .c-vm-row--rev .c-vm-track { animation-name: marquee66-rev; }
  .c-vm-row:hover .c-vm-track, .c-vm-row:focus-within .c-vm-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .c-vm-track { width: auto; padding-inline: var(--gutter, 1rem); }
  .c-vm-list { flex-wrap: wrap; padding: 0; }
  .c-vm-list[aria-hidden], .c-vm-list li:nth-child(n+5) { display: none; }
}
/* 11/5 ヒーローに使った人の声を1つ。箱にせず左の線だけの引用 */
.k4-hero-voice { text-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; max-width: 30rem; margin: 1.25rem 0 1.1rem; padding: .1rem 0 .1rem .95rem; border-left: 4px solid var(--md-primary, #A8372A); font-size: .9375rem; font-weight: 800; line-height: 1.7; }
.k4-hero-voice small { display: block; margin-top: .35rem; font-size: .75rem; font-weight: 600; color: var(--sc-muted, inherit); }
/* 11/5 ヒーローを2列に分け直す。左=売り込み、右=製品(口の絵・実演・声)。スマホは1列で、声は実演のあと */
.hero66__inner.k4-hero2 > .hero66__copy { display: contents; }
.k4-hero2 .hero66__lead { grid-area: lead; margin: 0; }
.k4-hero2 .hero66__cta { grid-area: cta; }
.k4-hero2 #say { grid-area: demo; }
.k4-hero2 .k4-hero-voice { grid-area: voice; margin: 0; }
.hero66__inner.k4-hero2 { grid-template-areas: "head" "visual" "lead" "cta" "demo" "voice" "index"; }
@media (min-width: 48em) {
  .hero66__inner.k4-hero2 {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "head visual" "lead visual" "lead voice" "cta demo" "index index";
    column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1.25rem; align-items: start;
  }
  .k4-hero2 .hero66__title .kw { display: block; width: fit-content; }
  /* 11/5 本人「kuchiのところが空いてる」「真ん中空いてる」。見出しを左の列の幅いっぱいまで大きくし、横の空きと、右の列(口の絵+声)との高さの差を埋める */
  .k4-hero2 .hero66__title { font-size: clamp(4.25rem, 13vw, 11rem); line-height: .92; padding-bottom: .14em; }
  /* 11/5 本人「そろってない感あるし真ん中と左下の余白が汚い」。口の絵の上を見出しの上に、実演の上をボタンの上にそろえる */
  /* 11/5 本人「いっそのことここにユーザーの声移動させる？」。声は全幅の段をやめ、右の列の口の絵と実演の間(60万円の見出しの横)に置く */
  .k4-hero2 .visual { align-self: start; justify-self: start; margin: 0; }
  .k4-hero2 #say { align-self: start; width: 100%; }
  .k4-hero2 .k4-hero-voice { align-self: end; max-width: none; }
  /* 60万円の見出しはボタンの真上に寄せ、空きは「言い直す」との間に回す */
  .k4-hero2 .hero66__lead { align-self: end; }
}
/* 11/5 本人「やっぱり真ん中空いてる」。広い画面は3列にする。見出しは左2列、口の絵は右1列。声と実演は右2列にまたがらせ、60万円の見出しとボタンのすぐ右から始める */
@media (min-width: 64em) {
  .hero66__inner.k4-hero2 {
    grid-template-columns: minmax(0, 25rem) minmax(0, .8fr) minmax(0, 1fr);
    grid-template-areas: "head head visual" "lead voice voice" "cta demo demo" "index index index";
  }
  .k4-hero2 .k4-hero-voice { align-self: end; }
  .hero66 .hero66__inner.k4-hero2 .visual { width: min(100%, 24rem); max-width: min(100%, 24rem); }
  /* 実演のカードが横に広がったぶん、英文を大きくして2行で見せる(1行だとカードの中が空く) */
  .k4-hero2 .say-card .speak-ja, .k4-hero2 .say-back .speak-en { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.25; }
  .k4-hero2 .say-card .speak-ja { min-height: 2.5em; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero66 .hero66__inner.k4-hero2 .visual { width: min(100%, 16rem) !important; max-width: min(100%, 16rem) !important; }
  .k4-hero2 .k4-hero-voice { font-size: .8125rem; line-height: 1.65; }
}
/* 11/5 本人「太文字の量多くない？」。ヒーローの文字が全部 700〜900 だった。太字は見出し・60万円・ボタンに絞り、注記・実績の本文・声は 500 にする(実績の見出し語は太字のまま) */
.hero66 .g-cta-note, .hero66 .k4-hero-voice { font-weight: 500; }
.hero66 .g-trust li { font-weight: 500; }
.hero66 .g-trust li > b { font-weight: 900; }