/* =========================================================
   多言語表示（English / 简体中文）用の調整
   html[data-lang="en"] / html[data-lang="cn"] は assets/js/i18n.js が設定します
========================================================= */

/* 訳文の末尾だけが次行に残るのを抑える。日本語の改行指定には触れない。 */
html:is([data-lang="en"], [data-lang="cn"]) :is(
  main p, main dd, main li, main figcaption, .faq-a, .course-desc,
  .level-desc, .timeline-content, .step-desc
) {
  word-break: normal;
  text-wrap: var(--kls-reading-wrap, pretty);
}

html:is([data-lang="en"], [data-lang="cn"]) :is(
  main h1, main h2, main h3, main h4, main dt, main summary,
  .hero-catch-mainline, .hero-catch-highlight, .faq-q, .level-info,
  .level-kanji-count, .news-title
) {
  word-break: normal;
  text-wrap: var(--kls-reading-wrap, balance);
}

html:is([data-lang="en"], [data-lang="cn"]) :is(
  .fees-page-section .fee-card .fee-note, .fee-compare-row dd small,
  .access-hours small, [data-i18n="access-station"], [data-i18n="ov-5-v"]
) {
  text-wrap: var(--kls-reading-wrap, pretty);
}

html[data-lang="en"] .level-more-body li {
  text-wrap: var(--kls-reading-wrap, balance);
}

/* タブレットで沿革を4列に詰め込まず、訳文の幅を確保する。 */
@media (min-width: 761px) and (max-width: 1000px) {
  html:is([data-lang="en"], [data-lang="cn"]) .compact-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  html:is([data-lang="en"], [data-lang="cn"]) .group-class-wrapper .level-card {
    padding-inline: 12px !important;
  }

  html:is([data-lang="en"], [data-lang="cn"]) .fee-compare-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  html[data-lang="en"] .level-name {
    font-size: 1.2rem;
    white-space: nowrap;
  }

  html[data-lang="en"] .fees-page-section th {
    padding-inline: 6px !important;
    font-size: 0.86rem !important;
  }

  html[data-lang="en"] .basic-info-content h4 { font-size: 1.15rem; }

  html[data-lang="en"] [data-i18n="access-sec-title"] {
    font-size: 1.35rem;
  }

  html[data-lang="en"] main:has(.fees-page-section) > .page-hero h1 { font-size: 1.8rem; }
  html[data-lang="en"] .faq-section .faq-cat-title { font-size: 1rem; letter-spacing: 0; }
  html[data-lang="en"] [data-i18n="q-study-4"] { font-size: 0.9rem; white-space: nowrap; }
  html[data-lang="en"] [data-i18n="form-exp"] { display: inline-block; text-wrap: var(--kls-reading-wrap, balance); }
}

html[data-lang="en"] .section-target-top .target-copy:has([data-i18n="target-1-title"]) {
  container-type: inline-size;
}

html[data-lang="en"] .section-target-top [data-i18n="target-1-title"] {
  font-size: min(1.3rem, 8.7cqi) !important;
  letter-spacing: 0;
}

html[data-lang="en"] .course-content { container-type: inline-size; }
/* 縦積みのflex内でもコンテナの横幅を確保する。 */
@media (max-width: 992px) {
  html[data-lang="en"] .course-content { width: 100%; }
}
html[data-lang="en"] .course-content .course-title {
  font-size: min(clamp(1.35rem, 2.2vw, 2rem), 8.6cqi);
  letter-spacing: 0;
}

html[data-lang="en"] .course-content .btn { white-space: nowrap; }

html[data-lang="en"] .privacy-page :is(.privacy-authoritative, .privacy-block li) {
  text-wrap: var(--kls-reading-wrap, balance);
}

/* 保存された言語へ切り替わるまでの一瞬だけ日本語を隠す（JSが動かない場合もヘッダーの処理で解除） */
html.kls-i18n-pending body {
  opacity: 0;
}

html.kls-i18n-ready body {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* 簡体字中国語は専用フォントを優先し、JPフォントとの字形の混在を防ぐ。 */
html[data-lang="cn"] {
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-en: 'Outfit', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html[data-lang="en"] .level-guide-diagram .level-guide-label {
  font-family: var(--font-en);
}

/* CSSで表示している文言 */
html[data-lang="en"] .circle-icon::after {
  content: "Contact";
}

html[data-lang="cn"] .circle-icon::after {
  content: "联系我们";
}

html[data-lang="en"] .level-card:has(.level-more[open])::before {
  content: "Selected";
}

html[data-lang="cn"] .level-card:has(.level-more[open])::before {
  content: "已选择";
}

/* TOPのキャッチコピー：英語は日本語より長いため折り返しを許可 */
html[data-lang="en"] .hero-catch {
  font-size: clamp(22px, 3.4vw, 50px);
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: break-word;
}

html[data-lang="en"] .hero-catch-mainline,
html[data-lang="cn"] .hero-catch-mainline {
  white-space: normal;
  width: auto;
  letter-spacing: 0;
}

html[data-lang="en"] .hero-catch-mainline {
  font-size: inherit;
  margin-bottom: 0.25em;
}

/* 英語は単語の途中で改行しない */
html[data-lang="en"] body {
  word-break: normal;
  overflow-wrap: break-word;
}

/* 訳文だけに付けるまとまり。時刻や短い中国語の句を途中で分割しない。 */
html[data-lang="cn"] .i18n-phrase {
  white-space: nowrap;
}

/* 元の日本語にある端末別改行とは独立した、中国語の改行指定。 */
html[data-lang="cn"] br.i18n-line-break {
  display: inline;
}

html[data-lang="cn"] br.i18n-mobile-break {
  display: none;
}

html[data-lang="cn"] .section-target-top .sec-title,
html[data-lang="cn"] .recruit-message-section .sec-title,
html[data-lang="cn"] .message-text-wrap h3 {
  text-wrap: balance;
}

/* 英語の授業料案内は指定どおり1行表示。狭い画面のサイズ調整は下で限定する。 */
html:root[data-lang="en"] body main .fee-tuition-inquiry {
  white-space: nowrap !important;
  overflow-wrap: normal;
}

/* TOPの学習者紹介：英文の末尾「KLS.」だけを次行に残さない。 */
html[data-lang="en"] .student-profile-intro {
  text-wrap: var(--kls-reading-wrap, balance);
}

/* PCの英語紹介文は1行。最大文字サイズでも末尾が落ちないよう字間だけ微調整する。 */
@media (min-width: 901px) {
  html[data-lang="en"] main > #student-profile .student-profile-intro {
    white-space: nowrap;
    text-wrap: nowrap;
    letter-spacing: -0.01em;
  }
}

/* TOPの英語CTA：長い2行目も同じ中心線に揃え、枠外への偏りを防ぐ。 */
html[data-lang="en"] main > .cta-section .cta-content h2 .cta-title-line {
  white-space: normal;
  text-align: center;
}

@media (min-width: 901px) {
  html[data-lang="en"] main > .cta-section .cta-content:has(.cta-title-lines) {
    width: min(100%, 1280px);
    max-width: 1280px;
  }

  html[data-lang="en"] main > .cta-section .cta-content h2:has(.cta-title-lines) {
    font-size: clamp(24px, 3.2vw, 40px);
  }

  html[data-lang="en"] main > .cta-section .cta-content h2 .cta-title-line {
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* 試験対策の英語見出しは指定の3行を保ち、狭いカードでだけ縮小する。 */
html[data-lang="en"] .section-target-top .target-copy:has(> .target-title-long) {
  container-type: inline-size;
}

html[data-lang="en"] .section-target-top .target-copy .target-title-long {
  font-size: min(clamp(1.3rem, 1.8vw, 1.6rem), 8cqi) !important;
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 600px) {
  html[data-lang="cn"] br.i18n-mobile-break {
    display: inline;
  }

  html[data-lang="cn"] .i18n-hours-separator {
    display: none;
  }
}

/* 英語の地域別見出しは、高い位置にある人物画像より手前に表示する。 */
@media (max-width: 767px) {
  html[data-lang="en"] #student-profile .student-profile-card > .student-profile-label,
  html[data-lang="en"] #student-profile .student-profile-card > h3 {
    position: relative;
    z-index: 2;
  }
}

/* 英語TOPの営業時間はスマホで平日・土曜日をそれぞれ1行にまとめる。 */
@media (max-width: 600px) {
  html[data-lang="en"] [data-i18n="info-hours-desc"] .i18n-hours-group {
    display: block;
    white-space: nowrap !important;
  }

  html[data-lang="en"] [data-i18n="info-hours-desc"] .i18n-hours-separator {
    display: none;
  }

  /* アクセスの営業時間も、土曜日の曜日と時刻を次の1行にまとめる。 */
  html[data-lang="en"] .access-hours .i18n-hours-group {
    white-space: nowrap;
  }

  html[data-lang="en"] .access-hours .i18n-hours-separator {
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
}

/* 初中級の説明：日本語用のPC一行指定で英文がはみ出さないようにする。 */
@media (min-width: 1360px) {
  html[data-lang="en"] .group-class-wrapper .level-card--textbook-5 .level-desc {
    white-space: normal;
    font-size: 1.05rem;
  }
}

/* Safari の pretty は段落全体を組み直すため、Chrome より右余白が
   大きくなる。スマホでは通常の折り返しに統一し、日中の末尾だけを JS で保護。
   style だけの変更なので、明示した br / white-space: nowrap は維持する。 */
@media (max-width: 600px) {
  /* 英語は最終行の1語残りを許容する。古い Safari でも効く shorthand を
     各ルールの変数経由で切り替え、明示した nowrap / br は維持する。 */
  html[data-lang="en"] {
    --kls-reading-wrap: wrap;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body :is(main, footer, header),
  html body :is(main, footer, header) * {
    text-wrap-style: auto !important;
  }

  html body main :is(p, li, dd, h1, h2, h3, h4, .faq-a, .faq-q, .level-desc) {
    word-break: normal;
  }
}

/* スマホ本文の基準。行数固定用の cqi/vw による縮小より読みやすさを優先する。
   3言語で同じ役割には同じサイズを使い、長い文は折り返す。
   横向きの携帯にも適用するが、PC・通常のタブレット表示は変更しない。 */
@media (max-width: 600px), (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body main :is(
    .level-desc, .level-more-body, .level-more-body p, .level-more-body li,
    .course-desc, .flow-section .step-content p, .step-desc,
    .faq-a, .fee-compare-row dd, .fee-tuition-inquiry
  ) {
    font-size: 16px !important;
    line-height: 1.8;
    letter-spacing: 0;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap-style: auto !important;
  }

  /* 行数のためだけに挿入した区切りを外す。段落の意味による改行は残す。 */
  html body main :is(
    .flow-start-description br.flow-start-mobile-break,
    .level-desc-mobile-two-lines br.level-desc-mobile-break
  ) {
    display: none;
  }

  html body main :is(.level-desc-mobile-two-lines, .level-desc-mobile-match-text-1) {
    display: block;
  }

  html body main :is(.level-info, .level-more-body h4, .faq-q) {
    font-size: 16px !important;
    line-height: 1.6;
    letter-spacing: 0;
    white-space: normal !important;
  }

  html body main :is(
    .course-content .course-title,
    .message-text-wrap [data-i18n-html="msg-title"]
  ) {
    font-size: 22px !important;
    line-height: 1.45;
    letter-spacing: 0;
    white-space: normal !important;
    word-break: normal;
    text-wrap: wrap;
  }

  html:root body main .section-target-top .target-copy :is([data-i18n="target-1-title"], .target-title-long) {
    font-size: 20px !important;
    white-space: normal;
    overflow-wrap: break-word;
  }

  html body main :is(.mobile-one-line-caption, .reply-english-text) {
    font-size: 14px !important;
    line-height: 1.6;
    letter-spacing: 0;
    white-space: normal !important;
  }

  html body main .form-wrapper [data-i18n="form-en-reply"] {
    font-size: 16px !important;
    line-height: 1.6;
    white-space: normal !important;
  }

  /* 日本語だけカードの内側を狭くしていた余白も統一する。 */
  html body main .group-class-wrapper .level-card {
    padding-inline: 18px !important;
  }

  /* 詳細だけに付いていた左右4pxを外し、上の説明と同じ本文幅にする。 */
  html body main .group-class-wrapper .level-more-body {
    padding-inline: 0;
  }

  /* 和文・中文の本文・箇条書きは、字間を引き伸ばさない左揃えに統一する。
     中央配置の案内・図注などはページ固有の配置を優先する。
     フォント・幅・余白・改行指定、および英文・PCの配置には触れない。 */
  html:root:is(:lang(ja), :lang(zh)) body main :is(
    p:not(:where(
      .hero p, .page-hero p, .course-family-heading p, .fee-compare-header p,
      .fee-comparison-heading p,
      .news-title, .fee-tax-note, .gallery-modal-kicker,
      .privacy-date p, .profile-source-note, .level-guide-description,
      .cta-content [data-i18n="cta-desc"],
      .recruitment-cta-section .cta-content [data-i18n="cta-desc"],
      .gallery-section [data-i18n="gallery-desc"],
      .req-section [data-i18n="req-desc"],
      .form-section [data-i18n="form-desc"]
    )):not(:has(input, select, textarea, label, button, .btn, svg, img)),
    li:not(:has(p, div, ul, ol, dl, h1, h2, h3, h4, button, input, select, textarea, svg)):not(:where(nav li)),
    dd:not(:has(strong)),
    .level-desc, .faq-a, .timeline-content, .fee-note
  ) {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: none;
  }
}

/* コース紹介の日中本文は字間を伸ばさない。中央配置の見出し・図注は維持。 */
@media (max-width: 600px), (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  html:root:is(:lang(ja), :lang(zh)) body main.courses-page :is(
    .basic-info-content p,
    .level-desc,
    .level-more-body,
    .level-more-body p,
    .level-more-body li,
    .course-desc
  ) {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: none;
  }
}

/* この日本語の図注だけは1行指定。図の左右の余白を使い、通常の携帯幅では
   14pxを維持する。320px程度の狭い画面でのみ図注自身を小さくする。 */
@media (max-width: 600px) {
  html:lang(ja) body main .level-guide-visual .mobile-one-line-caption {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 0;
    font-size: min(14px, calc((100cqi + 40px) / 22.5)) !important;
    white-space: nowrap !important;
    text-align: center;
  }
}

/* 採用案内の中段落だけ、文字サイズ・幅を保って字間をわずかに詰める。
   行長を均等にして短い最終行を避け、非対応ブラウザでも語尾は分断しない。 */
@media (max-width: 600px) {
  html:lang(ja) .message-text-wrap .recruit-message-body {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    letter-spacing: -0.02em;
    text-wrap: balance !important;
  }

  html:lang(ja) .message-text-wrap .recruit-message-ending {
    white-space: nowrap;
  }
}

/* 入学金見出しは各言語の指定の2行を保ち、各行の途中では折り返さない。 */
html .fees-page-section [data-i18n="fee-admission-common"] {
  display: block;
}

html [data-i18n="fee-admission-common"] .i18n-phrase {
  white-space: nowrap;
}

/* 中国語の入学金見出しのサイズは維持する。 */
@media (max-width: 600px) {
  html[data-lang="cn"] .fees-page-section [data-i18n="fee-admission-common"] {
    font-size: clamp(22px, 6.8vw, 24px);
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* 英語の入学金注記はスマホで2行。PCでは元の文字サイズ・自然な折り返しを維持。 */
@media (max-width: 600px) {
  html[data-lang="en"] .variant-admin .fee-info-value:has(> [data-i18n="note-admission"]) {
    container-type: inline-size;
  }

  html[data-lang="en"] .fees-page-section [data-i18n="note-admission"] {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(0.9rem, calc((100cqi + 24px) / 23.2));
    letter-spacing: 0;
  }

  html[data-lang="en"] [data-i18n="note-admission"] .admission-note-line {
    display: block;
    white-space: nowrap;
  }
}

/* 英語の短期コース注記は、既存の文間の改行だけを残して各文を1行にする。 */
html[data-lang="en"] .fees-page-section [data-i18n="note-short-term"] {
  white-space: nowrap;
}

@media (max-width: 600px) {
  html[data-lang="en"] .fee-info-value:has(> [data-i18n="note-short-term"]) {
    container-type: inline-size;
  }

  html[data-lang="en"] .fees-page-section [data-i18n="note-short-term"] {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(0.9rem, calc((100cqi + 24px) / 25.5));
    letter-spacing: 0;
  }
}

@media (max-width: 600px) {
  html[data-lang="en"] .fee-info-value:has(> .fee-tuition-inquiry) {
    container-type: inline-size;
  }

  html:root[data-lang="en"] body main .fee-tuition-inquiry {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(16px, calc((100cqi + 24px) / 20.5)) !important;
    letter-spacing: 0;
  }
}

/* 日本語の授業料案内：スマホでも1行に収め、他言語の設定は変えない。 */
html:root:lang(ja) body main .fee-tuition-inquiry {
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html:lang(ja) .fee-info-value:has(> .fee-tuition-inquiry) {
    container-type: inline-size;
  }

  html:root:lang(ja) body main .fee-tuition-inquiry {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(16px, calc((100cqi + 24px) / 19.2)) !important;
    letter-spacing: 0;
  }
}

/* 日本語・英語のメッセージ欄ラベルは1行にする。任意バッジは通常どおり折り返せる。 */
html:is(:lang(ja), [data-lang="en"]) .form-wrapper [data-i18n="form-msg"] {
  white-space: nowrap;
}

@media (max-width: 600px) {
  html:is(:lang(ja), [data-lang="en"]) .form-wrapper .form-label:has(> [data-i18n="form-msg"]) {
    container-type: inline-size;
    width: calc(100% + 16px);
    margin-right: -16px;
  }

  html[data-lang="en"] .form-wrapper [data-i18n="form-msg"] {
    font-size: min(1em, calc(100cqi / 17.3));
    letter-spacing: 0;
  }

  html:lang(ja) .form-wrapper [data-i18n="form-msg"] {
    font-size: min(1em, calc(100cqi / 16.1));
    letter-spacing: 0;
  }
}

/* 英語返信チェック欄は、チェックボックスの幅を確保してラベルを1行にする。 */
html:root[data-lang="en"] body main .form-wrapper [data-i18n="form-en-reply"] {
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html[data-lang="en"] .form-wrapper .checkbox-label:has([data-i18n="form-en-reply"]) {
    width: calc(100% + 16px);
    margin-right: -16px;
  }

  html:root[data-lang="en"] body main .form-wrapper [data-i18n="form-en-reply"] {
    font-size: min(16px, calc((100cqi - 30px) / 15)) !important;
  }
}

/* 日本語版の英語返信補足も、括弧を含めて1行に収める。 */
html:root:lang(ja) body main .form-wrapper .reply-english-text {
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html:lang(ja) .form-wrapper .checkbox-label:has(.reply-english-text) {
    width: calc(100% + 16px);
    margin-right: -16px;
  }

  html:root:lang(ja) body main .form-wrapper .reply-english-text {
    font-size: min(14px, calc(100cqi / 15.8)) !important;
  }
}

/* 当校紹介の中国語CTAは、文字と矢印の領域を分けたまま1行に収める。 */
html:root[data-lang="cn"] .message-box .about-target-btn {
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html[data-lang="cn"] .message-box .about-target-cta {
    container-type: inline-size;
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  html:root[data-lang="cn"] .message-box .about-target-btn {
    padding-inline: 10px !important;
    gap: 6px !important;
    font-size: min(14px, calc((100cqi - 58px) / 18.5)) !important;
  }
}

/* 採用ページの日本語冒頭文だけをスマホで3行にする。PCと訳文は自然な折り返しを維持。 */
@media (max-width: 600px) {
  html:lang(ja) .message-text-wrap .recruit-message-intro {
    display: inline-block;
    width: 100%;
    margin-inline: 0;
    vertical-align: top;
    font-size: min(1em, calc(100cqi / 21.1));
    letter-spacing: 0;
  }

  html:lang(ja) .recruit-message-intro-line {
    display: block;
    white-space: nowrap;
  }
}

/* アクセスの日本語見出しは「三鷹駅『北口』から／KLSまで」の2行。 */
html:lang(ja) .directions-section [data-i18n="directions-title"] {
  display: block;
  white-space: nowrap;
}

/* 日本語のお問い合わせフォーム見出しは、枠内に収まる1行表示。 */
html:lang(ja) .form-section [data-i18n="form-title"] {
  white-space: nowrap;
}

@media (max-width: 600px) {
  html:lang(ja) .form-section .faq-wrapper {
    container-type: inline-size;
  }

  html:lang(ja) .form-section [data-i18n="form-title"] {
    font-size: min(28px, calc(100cqi / 10.4));
  }
}

/* この英語FAQの問いかけは、指定の改行後にひとまとまりで表示する。 */
html[data-lang="en"] [data-i18n="q-school-4"] .faq-question-tail {
  white-space: nowrap;
}

/* 記入例の字間だけを少し詰める。入力された本文の字間・文字サイズは変更しない。 */
@media (max-width: 600px) {
  html:lang(ja) .form-wrapper textarea[name="your-message"]::placeholder {
    letter-spacing: -0.02em;
  }
}

/* スマホの中国語・到着案内は「203室。」まで1行に収める。 */
@media (max-width: 600px) {
  html[data-lang="cn"] .directions-section .step-content:has(> [data-i18n="step-5-desc"]) {
    container-type: inline-size;
  }

  html:root[data-lang="cn"] body main [data-i18n="step-5-desc"] {
    width: calc(100% + 16px);
    margin-inline: -8px;
    font-size: min(16px, calc((100cqi + 16px) / 21.5)) !important;
    letter-spacing: 0;
    white-space: nowrap !important;
  }
}

/* コース比較の説明はPCで1行、スマホでは指定の改行を維持する。 */
@media (min-width: 601px) {
  /* 英語の募集案内はPCで「how to apply,」までを1行目にする。 */
  html[data-lang="en"] .req-section [data-i18n="req-desc"] > br.mobile-editorial-break:first-of-type {
    display: none;
  }

  html:is(:lang(ja), [data-lang="en"]) .fee-comparison-heading [data-i18n-key="fees-comparison-description"] .mobile-editorial-break {
    display: none;
  }
}

/* PCの特別レッスンの特徴は、極端に小さい文字にせず1行に収める。 */
@media (min-width: 601px) {
  html:lang(ja) .fee-compare-column--special .fee-compare-row:last-child {
    container-type: inline-size;
  }

  html:root:lang(ja) body main .fee-compare-column--special .fee-compare-row:last-child > dd {
    width: calc(100% + 22px);
    margin-inline: -11px;
    font-size: clamp(12px, calc((100cqi + 22px) / 21.5), 0.88rem) !important;
    letter-spacing: -0.025em;
    white-space: nowrap !important;
  }
}

@media (min-width: 1051px) {
  html:lang(ja) .fee-comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(276px, 1fr);
  }
}

/* PCの英語版：プライベートの特徴を1行にし、携帯用の本文設定は変更しない。 */
@media (min-width: 601px) {
  html[data-lang="en"] .fee-compare-column--private .fee-compare-header {
    container-type: inline-size;
  }

  html[data-lang="en"] .fee-compare-column--private .fee-compare-header p {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(0.82rem, calc((100cqi + 24px) / 22));
    white-space: nowrap;
  }

  html[data-lang="en"] .fee-compare-header .private-pace-break {
    display: none;
  }

  html[data-lang="en"] .fee-compare-column--private .fee-compare-row:last-child {
    container-type: inline-size;
  }

  html:root[data-lang="en"] body main .fee-compare-column--private .fee-compare-row:last-child > dd {
    width: calc(100% + 22px);
    margin-inline: -11px;
    font-size: clamp(12px, calc((100cqi + 22px) / 22.3), 0.88rem) !important;
    letter-spacing: 0;
    white-space: nowrap !important;
  }
}

@media (min-width: 621px) and (max-width: 1050px) {
  html[data-lang="en"] .fee-comparison-grid {
    grid-template-columns: minmax(0, 1fr) minmax(282px, 1fr);
  }
}

@media (min-width: 1051px) {
  html[data-lang="en"] .fee-comparison-grid {
    grid-template-columns: minmax(0, 1fr) minmax(282px, 1fr) repeat(2, minmax(0, 1fr));
  }
}

/* スマホの各レベルの説明は、初級教材の説明と同じ文字サイズに揃える。
   1行固定は初級1〜4のみとし、初中級〜上級の長文は自然に折り返す。 */
@media (max-width: 600px) {
  html:root:lang(ja) body main .group-class-wrapper .level-card > .level-desc {
    /* 拡幅36px（外側24px＋内側12px）×5.65%を相殺して従来サイズを維持。 */
    font-size: min(16px, calc(5.65cqi - 2.034px)) !important;
  }

  html:root:lang(ja) body main .level-desc-mobile-one-line {
    letter-spacing: -0.02em;
    white-space: nowrap !important;
  }
}

/* 日本語の比較表の「特徴」4項目だけを1行にする。
   表の左右の余白を活用し、4項目は同じサイズに揃える。 */
@media (max-width: 600px) {
  html:lang(ja) body main .fee-comparison {
    width: calc(100% + 24px);
    margin-inline: -12px;
    padding-inline: 6px;
  }

  html:lang(ja) body main .fee-comparison .fee-compare-list > .fee-compare-row:last-child {
    container-type: inline-size;
    padding-inline: 6px;
  }

  html:lang(ja) body main .fee-comparison .fee-compare-list > .fee-compare-row:last-child > dd {
    font-size: min(14px, calc(100cqi / 21.5)) !important;
    letter-spacing: -0.025em;
    white-space: nowrap !important;
  }
}

/* スマホのコース紹介は日中英で同じ本文幅にする。
   日本語の cqi 連動サイズは拡幅分を差し引き、従来の文字サイズを保つ。 */
@media (max-width: 600px) {
  html:is(:lang(ja), :lang(zh)) .courses-page .group-class-wrapper .level-grid,
  html[data-lang="en"] .group-class-wrapper .level-grid {
    margin-inline: -12px;
  }

  html:is(:lang(ja), :lang(zh)) .courses-page .group-class-wrapper .level-card {
    padding-inline: 12px !important;
  }

  html:is(:lang(ja), :lang(zh)) .courses-page .level-guide-description {
    width: calc(100% + 40px);
    margin-inline: -20px;
  }

  /* 指定された日本語の案内は br の位置だけで改行し、必ず2行にする。
     狭い画面でのみ文字サイズを調整し、既存の本文幅と中央配置を保つ。 */
  html:lang(ja) .courses-page .level-guide-heading {
    container-type: inline-size;
  }

  html:lang(ja) .courses-page .level-guide-description {
    font-size: min(1em, calc((100cqi + 40px) / 20.2));
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* 日本語のレベル分け案内：PCでは指定改行を解除し、1行に収める。 */
@media (min-width: 601px) {
  html:lang(ja) .courses-page .level-guide-heading {
    container-type: inline-size;
  }

  html:lang(ja) .courses-page .level-guide-description {
    font-size: min(1em, calc(100cqi / 42.2));
    white-space: nowrap;
  }

  html:lang(ja) .courses-page .level-guide-ja-break {
    display: none;
  }
}

/* Mobile reading width: 英語の長文を囲む重複した余白を減らす。
   コース紹介のみ日中にも同じ幅を適用。ページ外周・文字サイズ・明示改行・PC は維持。 */
@media (max-width: 600px) {
  html[data-lang="en"] .message-section .message-box,
  html[data-lang="en"] .access-info-section .map-wrapper,
  html[data-lang="en"] .recruit-message-section .message-layout,
  html[data-lang="en"] .privacy-en .privacy-intro {
    padding-inline: 16px !important;
  }

  html[data-lang="en"] .timeline-card-body {
    padding-inline: 12px !important;
  }

  html:is(:lang(ja), :lang(zh)) .courses-page .group-class-wrapper .basic-info-list,
  html[data-lang="en"] .group-class-wrapper .basic-info-list {
    margin-inline: -12px;
  }

  html:is(:lang(ja), :lang(zh)) .courses-page .group-class-wrapper .basic-info-row,
  html[data-lang="en"] .group-class-wrapper .basic-info-row,
  html[data-lang="en"] .flow-section .step-content,
  html[data-lang="en"] .faq-section .faq-wrapper,
  html[data-lang="en"] .privacy-en .privacy-contact {
    padding-inline: 14px !important;
  }

  html:is(:lang(ja), :lang(zh)) .courses-page .course-row,
  html[data-lang="en"] .course-row {
    padding-inline: 20px;
  }

  html[data-lang="en"] main > .directions-section .step-content {
    padding-inline: 14px !important;
  }

  html[data-lang="en"] .fee-comparison-note {
    width: calc(100% + 16px);
    margin-inline: -8px;
  }

  /* 入力欄や1行指定ラベルの幅は変えず、長い説明・注意書きだけを広げる。 */
  html[data-lang="en"] .form-section .faq-wrapper > p,
  html[data-lang="en"] .form-wrapper :is(.form-privacy-note, .visa-note) {
    width: calc(100% + 24px);
    margin-inline: -12px;
  }

  html[data-lang="en"] .form-wrapper :is(.form-privacy-note, .visa-note),
  html[data-lang="en"] .privacy-en .privacy-authoritative {
    padding-inline: 12px;
  }
}

/* 日本語・英語のスマホFAQ：余白とQ/Aラベルの専用幅を詰め、回答幅を確保。 */
@media (max-width: 600px) {
  html:lang(ja) .faq-section .faq-wrapper {
    padding-inline: 14px !important;
  }

  html:is(:lang(ja), [data-lang="en"]) .faq-section .faq-list {
    margin-inline: -8px;
  }

  html:is(:lang(ja), [data-lang="en"]) .faq-section .faq-a {
    padding-inline: 34px 12px;
  }

  html:is(:lang(ja), [data-lang="en"]) .faq-section .faq-q {
    padding-left: 34px;
  }

  html:is(:lang(ja), [data-lang="en"]) .faq-section .faq-a::before,
  html:is(:lang(ja), [data-lang="en"]) .faq-section .faq-q::before {
    left: 6px;
  }
}

/* 日本語・中国語のスマホFAQ回答は、文中の強制改行を使わず自然に折り返す。 */
@media (max-width: 600px) {
  html:is(:lang(ja), [data-lang="cn"]) .faq-section .faq-a br {
    display: none;
  }
}

/* 英語料金表の指定改行。PCでは翻訳内のspanを通常のインラインで表示する。 */
@media (max-width: 600px) {
  html[data-lang="en"] .fee-compare-column--semi .fee-compare-row:last-child {
    container-type: inline-size;
  }

  html:root[data-lang="en"] body main .fee-compare-column--semi .fee-compare-row:last-child > dd {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(16px, calc((100cqi + 24px) / 18)) !important;
    letter-spacing: 0;
  }

  html[data-lang="en"] .fee-semi-description-line {
    display: block;
    white-space: nowrap;
  }

  html[data-lang="en"] .fee-info-value:has(> [data-i18n="fee-group-3days"]) {
    container-type: inline-size;
  }

  html[data-lang="en"] [data-i18n="fee-group-3days"] {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(1.15rem, calc((100cqi + 24px) / 18)) !important;
    white-space: nowrap;
  }

  html[data-lang="en"] [data-i18n="course-1"] .fee-group-frequency,
  html[data-lang="en"] [data-i18n="private-time-2"] .fee-time-saturday {
    display: block;
    white-space: nowrap;
  }

  html[data-lang="en"] [data-i18n="course-1"],
  html[data-lang="en"] [data-i18n="private-time-2"] {
    white-space: nowrap;
  }

  html[data-lang="en"] [data-i18n="private-time-2"] .fee-time-separator {
    display: none;
  }

  /* 日本語・中国語も平日／土曜日を各1行にする（同じ料金帯の2箇所）。 */
  html:is(:lang(ja), [data-lang="cn"]) [data-i18n="private-time-2"] {
    white-space: nowrap;
  }

  html:is(:lang(ja), [data-lang="cn"]) [data-i18n="private-time-2"] .fee-time-saturday {
    display: block;
    white-space: nowrap;
  }

  html:is(:lang(ja), [data-lang="cn"]) [data-i18n="private-time-2"] .fee-time-separator {
    display: none;
  }
}

/* スマホ版：日英の集中レッスン見出しは1行、英語レベル分け案内は2行にする。 */
@media (max-width: 600px) {
  /* 日本語の見出しは本文拡幅40pxを相殺（従来の +24px − 40px）。 */
  html:root:lang(ja) body main .course-row--semi-private .course-title {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(22px, calc((100cqi - 16px) / 12.2)) !important;
    letter-spacing: 0;
    white-space: nowrap !important;
  }

  html:root:lang(ja) body main .course-row--two-week .course-title--intensive {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(22px, calc((100cqi - 16px) / 15.2)) !important;
    letter-spacing: 0;
    white-space: nowrap !important;
  }

  html:root[data-lang="en"] body main .course-row--two-week .course-title--intensive {
    width: calc(100% + 24px);
    margin-inline: -12px;
    font-size: min(22px, calc((100cqi + 24px) / 18.5)) !important;
    letter-spacing: 0;
    white-space: nowrap !important;
  }

  html[data-lang="en"] .level-guide-heading {
    container-type: inline-size;
  }

  html[data-lang="en"] .level-guide-description {
    width: calc(100% + 40px);
    margin-inline: -20px;
    font-size: min(1em, calc((100cqi + 40px) / 23.5));
    letter-spacing: 0;
  }

  html[data-lang="en"] .level-guide-description-line {
    display: block;
    white-space: nowrap;
  }
}

/* スマホ用/タブレット用の境界でも、長い日本語見出しを画面内で折り返す。 */
@media (min-width: 601px) and (max-width: 900px) and (pointer: coarse) {
  html body main [data-i18n="target-sec-title"] {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
}