/* WordPress に組み込むときの調整(デザイン案の CSS には無い状態のためのもの)。
   デザイン案と同じ接頭辞(.cbj / .cba / .cbv)の中に閉じる。 */

/* 見出しが 2 つ未満で目次レールが無いとき: 1 カラムにする */
.cbj .article-layout--single { grid-template-columns: minmax(0, 1fr); }
.cbj .article-layout--single .article-column { max-width: 780px; margin-inline: auto; }

/* 共通ヘッダー(従来の作り)の下に置くので、ヒーローの上の余白を詰める */
.cbj .cbj-main > article > header { padding-top: 12px; }

/* 従来テーマの固定 CTA(下部のバー 68px・右下の電話と AI のピル)と、スマートフォンの目次ボタンが重ならないように、
   左側に寄せた小さな箱にする(375px 幅で右端は約 217px。ピルは 233px から)。
   「目次を開く」は押せる高さを 44px にする。ボタンが高くなるぶん箱の上下の余白を 8px → 5px にして、箱の大きさ(画面を覆う面積)は変えない(2026-10-02) */
@media (max-width: 900px) {
  .cba .mobile-reader {
    left: 12px; right: auto; width: calc(100% - 170px); max-width: 320px; bottom: 78px;
    border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px 5px 14px;
    box-shadow: 0 6px 18px rgba(27, 66, 121, 0.14);
  }
  .cba .mobile-reader > span { font-size: 10.5px; }
  .cba .mobile-reader button { min-height: 44px; padding: 8px 10px; font-size: 11px; }
}

/* 記事詳細(通常版)で、既存の部品を新しいデザインの中に置くための調整 */
.cba .article-supervisor { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 11.5px; line-height: 1.9; color: var(--sub); }
.cba .article-supervisor a { font-weight: 700; color: var(--blue); border-bottom: 1px solid rgba(46, 105, 199, 0.35); }
.cba .article-supervisor span { font-size: 10px; letter-spacing: 0.04em; }
.cba .standard-byline img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.cba .standard-byline span small + small { display: block; color: var(--sub); }
.cba .standard-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.cba .standard-author-bio { margin: 6px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--sub); }
.cba .standard-author a { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--blue); }
.cba .article-share .share-foot__lead { margin: 0 0 10px; font-size: 12.5px; color: var(--sub); }
.cba .article-share .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cba .answer-faq .faq-answer a { font-weight: 700; color: var(--blue); }

/* 記事詳細(通常版)の相談欄: 従来テーマの共通 CSS にある .cb-qa(青い箱・白文字・仕切り線)の規則を打ち消し、
   デザイン案どおり白地に濃い青の見出し・灰色の説明にする(大きさは article-standard.css の指定に任せる) */
.cba-standard .standard-consult .cb-qa { background: none; border-radius: 0; padding: 0; }
.cba-standard .standard-consult .cb-qa__q { margin: 0; color: var(--deep); }
.cba-standard .standard-consult .cb-qa__a { margin: 16px 0 0; padding: 0; color: var(--sub); border-top: 0; }

/* 重点記事の冒頭の要点: 項目から本文へのリンク */
.cba-enhanced .quick-facts .fact-link { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--blue); }
.cba-enhanced .answer-faqs { margin: 18px 0 26px; }

/* ブログの一覧(新しいデザイン)で、カテゴリーなどの小さな見出しのときの寸法(写真の無い hero-grid--single はテンプレートから外れたので規則も無い) */
.cbj .hero--compact { padding-bottom: 28px; }
.cbj .hero--compact .hero-copy h1 { font-size: clamp(24px, 4vw, 34px); }
.cbj .results-meta .text-link { font-size: 12px; }
/* 従来のデザインのまま置く部品(体験談一覧の「数字で見る、セブリッジの留学生」)。土台 CSS の要素指定は base.css 側で
   .cb-legacy の中を対象外にしてあり、ここでは従来の body と同じ書体・文字色・行間に戻す(新しいデザインの本文領域の継承を打ち消す) */
.cbj .cb-legacy { font-family: var(--f-body); color: var(--ink); line-height: 1.85; letter-spacing: 0.04em; font-size: 16px; }

/* WordPress のページ送りは現在のページを span で出す(デザイン案は a[aria-current])。点線用の細い span の指定に負けないよう寸法ごと指定する */
.cbj .pagination span.page-numbers.current { min-width: 41px; padding: 0 10px; font-weight: 700; border: 1px solid var(--blue); background: var(--blue); color: white; }
.cbj .pagination span.page-numbers.dots { min-width: 16px; padding: 0; border: 0; }

/* 見出しの文言を、今公開しているページ(従来のデザイン)にそろえた(2026-09-30。あきらの判断)。
 * 従来の文言は小見出し(h2.cb-h2-label)に置き、新しいデザインの大きな文は h2 の外の段落(.cb-h2-display)で元の h2 と同じ見た目にする。
 * 元の h2 に当てていた指定は、同じ詳細度のまま :is(h2,p):where(…) に書き直してある(base.css・voice.css・article.css・article-standard.css) */
.cbj h2.cb-h2-label { display: block; margin: 0 0 .5em; font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .08em; color: var(--deep); opacity: .9; text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.cbj .cb-h2-display { font-weight: 700; word-break: auto-phrase; }
.cbj .voices-copy h2.cb-h2-label { color: #fff; }
/* 体験談詳細の「(学校名) の他の声」は、スマホの幅で「声」だけの行にならないよう「他の声」を折り返さない(文節の自動判定も効かせない) */
.cbv-detail .story-related-heading .cbv-nowrap { white-space: nowrap; }
/* 体験談詳細の相談欄は、元の h2 が周りの文字色(濃い灰)を受けていたので、小見出しも同じ色にそろえる */
.cbv-detail .voice-consult h2.cb-h2-label { color: inherit; }
/* 体験談トップは一覧を口コミ・学校の後ろへ移したので、白い一覧と白い相談欄が続く。境目に線を引く(トップの記事一覧の上の線と同じ色) */
.cbv .voice-library + .voice-consult { border-top: 1px solid #edf1f6; }
/* 体験談トップの口コミ: よくない口コミの前に戻した小見出し(h3)は、小見出し(h2.cb-h2-label)と同じ大きさにして、カードの並びの見た目を変えない。
 * 従来のデザインから戻した YouTube の導線は、押せる高さを 44px にする(2026-10-02) */
.cbv .voice-honest .wrap > h3 { margin: 0 0 14px; font-size: 13px; line-height: 1.6; letter-spacing: .08em; color: var(--deep); opacity: .9; }
.cbv .voice-honest .wrap > .text-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 18px; }
/* ブログのトップも、体験談の帯を記事一覧の前へ移したので、記事一覧(#fafbfc)のすぐ後に白い編集部が続く。同じ線で分ける。
 * 編集部は .wrap で中央寄せの幅しかないので、線は画面の幅いっぱいの記事一覧の下に引く */
.cbj .library:has(+ .editor) { border-bottom: 1px solid #edf1f6; }
/* 編集部の「編集方針」(従来のデザインのトップにあった 4 項目を戻した。2026-10-02)。前の段落と同じ文字の大きさ・色にして、見出しの段落との間だけ詰める */
.cbj .editor-copy > p:not(.script, .small-note, .cb-h2-display):has(+ ul) { margin-bottom: 4px; }
.cbj .editor-copy > ul { margin: 0 0 14px; padding-left: 1.4em; font-size: 13px; line-height: 2.1; color: var(--sub); }
@media (max-width: 640px) { .cbj .editor-copy > ul { font-size: 12px; } }
/* トップの体験談の帯の「学校から探す」(従来のデザインの導線を戻した。2026-10-02)。黄色のボタンの下に置き、押せる高さを 44px にする */
.cbj .voices-copy > .text-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 8px; }
/* 一覧の相談欄で、LINE の下に予約のボタンを並べたとき(2026-10-02)の間隔 */
.cbj .consult-actions > .btn + .btn { margin-top: 12px; }

/* トップの「新着記事・留学ブログ・留学マニュアル」(従来のデザインのトップと同じ h2 を同じ順番で置くために足した帯。2026-09-30) */
.cbj .latest-band { padding: 64px 0 70px; border-top: 1px solid #edf1f6; }
.cbj .latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.cbj .latest-col { min-width: 0; display: flex; flex-direction: column; }
.cbj .latest-col > .script { font-size: 30px; margin-bottom: 8px; }
.cbj .latest-col > h2 { font-size: 22px; line-height: 1.6; }
.cbj .latest-list { padding: 0; list-style: none; margin: 14px 0 18px; }
.cbj .latest-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cbj .latest-list a { display: grid; grid-template-columns: 83px minmax(0, 1fr); gap: 13px; align-items: start; }
.cbj .latest-list img, .cbj .latest-noimg { display: block; width: 83px; height: 61px; object-fit: cover; border-radius: 5px; background: var(--sky); }
.cbj .latest-list time { display: block; font-size: 10px; line-height: 1.6; color: var(--sub); letter-spacing: .04em; }
.cbj .latest-list h3 { font-size: 12px; line-height: 1.8; letter-spacing: 0; margin-top: 3px; }
.cbj .latest-list a:hover h3 { text-decoration: underline; }
.cbj .latest-col > .text-link { margin-top: auto; align-self: flex-start; font-size: 12px; }
@media (max-width: 1100px) { .cbj .latest-grid { gap: 26px; } }
@media (max-width: 850px) { .cbj .latest-band { padding: 44px 0 48px; } .cbj .latest-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) { .cbj .latest-col > .script { font-size: 27px; } .cbj .latest-col > h2 { font-size: 21px; } }