/* 全ページ共通の土台（今の v2 の base.css から移した。デザインの値は tokens.css、WordPress の管理バーの規則は外した）
   元: 新テーマ the-n-2026-ver2（H-B のデザイン）: 全ページ共通
   トークン、土台、ヘッダー・メニュー、進捗ナビ、本文の共通、フッター。
   H-B の試作 demo/the-n-2026-ver2-concepts/h/h.css から分けた。読む順は base.css → front.css（トップだけ）→ motion.css。 */

/* ==========================================================================
   H案「Relay × Horizontal」
   - 初期状態（JSなし・スマホ・動きを減らす設定）は、すべてを縦に積んで表示する
   - html.is-hscroll（stage.js の初期化に成功したときだけ付く）で、舞台の固定と横スライドになる
   - 文字の色の差は WCAG 2.2 AAA（通常の文字 7:1 以上、大きな文字 4.5:1 以上）
   ========================================================================== */




/* --------------------------------------------------------------------------
   土台
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* フォーカスやページ内リンクで移った要素が、固定ヘッダーの下に隠れないようにする（WCAG 2.4.12。縦積みでは Chrome が要素を画面の中央へ動かすため） */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--h-header-h); }

/* 文字の大きさは rem（ブラウザーの文字の大きさの設定に合わせて本文も大きくなる。標準 16px では今までと同じ px。点検の中8、2026-09-26）。
   ヘッダー・メニュー・進捗ナビ・映像の上の飾りのラベル（読み上げから隠した装飾）と、画面の幅で決まる大見出しは px のまま。
   文字の大きさの設定を標準より大きくしたときは、横の帯のマスに収まらないので縦に積む（sequence.js の stackWatch） */
body.h-page {
  margin: 0;
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--h-font-ja);
  font-size: 1rem;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* 紙のざらつき（oddcommon の noise 層に相当。装飾） */
body.h-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 700; }
.pc-only { display: none; }
@media (min-width: 1024px) { .pc-only { display: inline; } }

::selection { background: var(--h-ink); color: var(--h-bg); }

/* フォーカス: 2px以上、暗い地でも明るい地でも見える二重の輪（2.4.13） */
:focus-visible {
  outline: 3px solid var(--h-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--h-focus-halo);
  border-radius: 2px;
}
main:focus-visible,
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* スキップリンク: フォーカス時だけ見える */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--h-ink);
  color: var(--h-bg);
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--h-ease);
}
.skip-link:focus-visible,
.skip-link:focus { transform: none; }

/* 等幅の小さなラベル（HUD、目印） */
.sequence-hud,
.hero-box__topline,
.site-news-bar__date,
.site-news-bar__kind,
.page-progress__label,
.faq-label,
.hero-button__index,
.hero-button__label small,
.price-inner > span,
#column .date,
#column .column-cat {
  font-family: var(--h-font-mono);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   ヘッダー（見た目だけを変える。要素と属性は正本のまま）
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: var(--h-adminbar, 0px) 0 auto 0;
  z-index: 50;
  background: var(--h-bg); /* 半透明だと、暗いセクションの上で補助の文字が 7:1 を下回るため不透明にする */
  border-bottom: 1px solid var(--h-line);
}
.site-header > .container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 4px var(--h-gutter);
}
.site-header .logo-area { margin-right: auto; display: flex; } /* ロゴのリンクの下に行の高さのすき間を作らない */
.site-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* ロゴ: 公開中のサイトと同じ比率（マークの高さ ≒ ロゴの文字の大きさの3.8倍。スマホはマーク60px）。PC は下の 900px 以上で拡大 */
.site-header .logo img { width: 60px; height: auto; }
.site-header .logo-type {
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.site-header .logo-type span { font-weight: 400; }
/* 狭い画面では、公開中のサイトと同じくマークだけにする（文字がメニューのボタンと重なるため）。
   899px 以下でもヘッダーに「無料診断をする」を出すので、ロゴの文字・CTA・MENU が1行に入らない 559px 以下はマークだけ（下の CTA の注記） */
@media (max-width: 559px) { .site-header .logo-type { display: none; } }

.header-cta-group { display: flex; gap: 8px; }
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  white-space: nowrap;
  padding: 0 16px;
  border: 1px solid var(--h-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.3s var(--h-ease), color 0.3s var(--h-ease);
}
/* お問い合わせ（secondary）はピンク、無料診断はブルー。色で一目で見分けられるようにする */
.header-cta--secondary { background: var(--h-cta-pink); border-color: var(--h-cta-pink); color: #fff; }
.header-cta--secondary:hover { background: var(--h-cta-pink-hover); border-color: var(--h-cta-pink-hover); color: #fff; }
.header-cta:not(.header-cta--secondary) { background: var(--h-cta-blue); border-color: var(--h-cta-blue); color: #fff; }
.header-cta:not(.header-cta--secondary):hover { background: var(--h-cta-blue-hover); border-color: var(--h-cta-blue-hover); color: #fff; }
/* スマホ・タブレット（899px 以下）: 「無料診断をする」だけをヘッダーに残す（今のテーマと同じく、狭い幅でも主な CTA を出す。点検の中1、2026-09-26）。
   お問い合わせはメニューの中にある。419px 以下は文字と左右の余白を詰め、320px でもロゴ・MENU と重ならない
   （英語の「Get a free review」は、入らない幅では2行に折り返す） */
@media (max-width: 899px) { .header-cta-group > .header-cta--secondary { display: none; } }
@media (max-width: 419px) {
  .site-header > .container { gap: 8px; }
  .site-header .logo-area,
  .site-header .hamburger-menu { flex-shrink: 0; } /* 縮めるのは CTA（折り返せる）だけ。ロゴのマークを縮めない */
  .header-cta { padding: 0 10px; font-size: 12px; line-height: 1.2; text-align: center; white-space: normal; text-wrap: balance; }
}

.site-header > .container > .lang-switch { display: none; }
.lang-switch { display: flex; gap: 4px; font-family: var(--h-font-mono); font-size: 12px; }
.lang-switch__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--h-muted);
}
.lang-switch__link.is-current { color: var(--h-ink); text-decoration: underline; text-underline-offset: 4px; }

.hamburger-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--h-ink);
  border-radius: 999px;
}
.hamburger-menu > span:not(.hamburger-label) {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--h-ease);
}
.hamburger-menu > span:nth-child(2) { position: absolute; left: 14px; top: calc(50% + 3px); }
.hamburger-menu > span:first-child { transform: translateY(-3px); }
.hamburger-menu .hamburger-label {
  margin-left: 4px;
  font-family: var(--h-font-mono);
  font-size: 12px;
  text-transform: uppercase;
}
.hamburger-menu[aria-expanded="true"] > span:first-child { transform: translateY(0) rotate(45deg); }
.hamburger-menu[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (min-width: 900px) {
  :root { --h-header-h: 80px; } /* stage.js が実測値で上書きする。起動前の配置を実際の高さに合わせる */
  .site-header > .container { min-height: 80px; }
  .site-header .logo { gap: 12px; }
  .site-header .logo img { width: 72px; }
  .site-header .logo-type { font-size: 19px; }
  .site-header > .container > .lang-switch { display: flex; }
}

/* メニュー（モーダル）。開閉の仕組みは site.js。開いている間は body を固定する（位置は site.js が戻す） */
body.is-menu-open { position: fixed; left: 0; right: 0; overflow: hidden; }
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgb(18 18 18 / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--h-ease);
}
.nav-animation {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--h-night);
  color: var(--h-night-ink);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--h-ease-io), visibility 0s linear 0.7s;
  overflow-y: auto;
}
body.is-menu-open .nav-animation {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s var(--h-ease-io), visibility 0s;
}
body.is-menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
body.is-menu-open .site-header { background: transparent; border-color: transparent; color: var(--h-night-ink); backdrop-filter: none; }
body.is-menu-open .hamburger-menu { border-color: var(--h-night-ink); z-index: 46; }
body.is-menu-open .site-header .logo img { filter: invert(1); }
.modal-menu {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;
  padding: calc(var(--h-header-h) + var(--h-adminbar, 0px) + 24px) var(--h-gutter) 40px;
  gap: 32px;
}
.modal-menu__image { display: none; }
.modal-menu__list { display: grid; gap: 4px; }
.modal-menu__link {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(28px, 1rem + 3vw, 56px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.modal-menu__link:hover { color: var(--h-night-muted); }
.modal-menu__sublist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 4px 0 12px;
  font-family: var(--h-font-mono);
  font-size: 13px;
  color: var(--h-night-muted);
}
.modal-menu__sublist a:hover { color: var(--h-night-ink); }
.modal-menu__lang .lang-switch__link { color: var(--h-night-muted); }
.modal-menu__lang .lang-switch__link.is-current { color: var(--h-night-ink); }
.modal-menu__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 13px; }
.modal-menu__footer-sns { display: flex; gap: 12px; }
/* 黒い X のロゴだけを白に。Instagram は公式のグラデーションのまま（反転すると緑と青の、公式でない色になっていた。ゆんの指摘 2026-09-27） */
.modal-menu__footer-sns a[href*="x.com"] img { filter: invert(1); }
/* 背の低い画面（高さ 880px 以下）: 大きなリンクを画面の高さに合わせて小さくし、開いた直後の画面に CONTACT・FREE CONSULTATION・
   LINE まで入れる（1280×680・320×568 で画面の外だった。点検の低10、2026-09-26）。880px を超える画面は今のまま */
@media (max-height: 880px) {
  .modal-menu { padding-top: calc(var(--h-header-h) + var(--h-adminbar, 0px) + 12px); gap: 20px; }
  .modal-menu__link { padding: 2px 0; font-size: min(clamp(28px, 1rem + 3vw, 56px), 5.6svh); }
  .modal-menu__sublist { margin: 2px 0 6px; }
}
.nav-animation :focus-visible { outline-color: var(--h-night-ink); box-shadow: 0 0 0 6px var(--h-night); }
/* 2列（900px 以上）: 左の画像は、上・下・左の3辺を画面の端いっぱいに（ゆんの指示 2026-09-27）。メニューの列を送っても画像は動かない。
   上下の余白は右のメニューの列だけに持たせる */
@media (min-width: 900px) {
  .modal-menu { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding-top: 0; padding-bottom: 0; padding-left: 0; }
  .modal-menu__image { display: block; position: sticky; top: 0; align-self: start; height: 100svh; }
  .modal-menu__image img { width: 100%; height: 100%; object-fit: cover; }
  .modal-menu__nav { padding: calc(var(--h-header-h) + var(--h-adminbar, 0px) + 24px) 0 40px; }
}
@media (min-width: 900px) and (max-height: 880px) {
  .modal-menu__nav { padding-top: calc(var(--h-header-h) + var(--h-adminbar, 0px) + 12px); }
}

/* --------------------------------------------------------------------------
   進捗ナビ（縦積み: 右端の縦のレール / 横スライド: 下端の横向き）
   表示の条件は site.js（今の page-progress.js と同じ）
   -------------------------------------------------------------------------- */
.page-progress {
  position: fixed;
  right: 14px;
  top: 50%;
  z-index: 40;
  transform: translate(12px, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--h-ease), transform 0.4s var(--h-ease), visibility 0s linear 0.4s;
}
.page-progress[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity 0.4s var(--h-ease), transform 0.4s var(--h-ease), visibility 0s;
}
.page-progress__track { display: none; }
.page-progress__marks { display: grid; gap: 2px; }
.page-progress__mark {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 24px;
  padding: 0 4px;
}
.page-progress__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--h-ink);
  transition: background-color 0.3s var(--h-ease), transform 0.3s var(--h-ease);
}
.page-progress__label {
  font-size: 10px;
  color: var(--h-muted);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--h-ease), transform 0.3s var(--h-ease);
}
.page-progress__mark:hover .page-progress__label,
.page-progress__mark:focus-visible .page-progress__label,
.page-progress__mark.is-active .page-progress__label { opacity: 1; transform: none; color: var(--h-ink); }
.page-progress__mark.is-active .page-progress__dot { background: var(--h-ink); transform: scale(1.25); }
/* 縦積み（幅1024px以上の PC で、動きを減らす設定など）の縦のレール: 目印（24px の四方）を右の余白（--h-gutter）の中に縦に並べ、
   本文の操作できる要素（FAQ の「＋」など）に重ねない（重なって押すと別の所へ飛んでいた。点検の中4、2026-09-26）。
   名前は目印の左に、指したとき・フォーカスしたときだけ出す（今のテーマの進捗ナビと同じ。押せる範囲に含めない）。今いる所は塗った点 */
html:not(.is-hscroll) .page-progress { right: max(2px, calc(var(--h-gutter) / 2 - 12px)); }
html:not(.is-hscroll) .page-progress__mark { position: relative; justify-content: center; width: 24px; padding: 0; }
html:not(.is-hscroll) .page-progress__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  padding: 2px 8px;
  border: 1px solid var(--h-line);
  background: var(--h-bg);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(6px, -50%);
}
html:not(.is-hscroll) .page-progress__mark.is-active .page-progress__label { opacity: 0; transform: translate(6px, -50%); }
html:not(.is-hscroll) .page-progress__mark:hover .page-progress__label,
html:not(.is-hscroll) .page-progress__mark:focus-visible .page-progress__label { opacity: 1; transform: translate(0, -50%); color: var(--h-ink); }

/* --------------------------------------------------------------------------
   本文の共通（縦積み）
   -------------------------------------------------------------------------- */
main#main-content { display: block; padding-top: var(--h-header-h); }

.h-track > section,
.h-track > .h-chunk,
.h-track > .h-gl,
.h-track > .h-marquee {
  position: relative;
  border-top: 1px solid var(--h-line);
}
.h-track > section { padding: clamp(48px, 6vw, 96px) var(--h-gutter); }

/* 見出しの型 */
.heading,
.heading-top,
.site-news-bar__label {
  font-family: var(--h-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h-muted);
}
.heading::before,
.heading-top::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--h-accent);
  vertical-align: 0.15em;
}
#about h2,
#case-studies-section h2,
#sns-gallery h2,
#column h2,
#faq-area h2,
#contact h2,
#service-area .service-box h2 {
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: clamp(56px, 2rem + 7vw, 160px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 12px 0 20px;
}
.text,
.lead { color: var(--h-ink); }

/* ボタンの型（正本のクラスに見た目を当てる） */
.btn,
.col-link,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--h-ink);
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 0.35s var(--h-ease), color 0.35s var(--h-ease);
}
.btn::after,
.col-link::after,
.btn-primary::after { content: "→"; font-family: var(--h-font-mono); font-weight: 400; transition: transform 0.35s var(--h-ease); }
.btn:hover,
.col-link:hover,
.btn-primary:hover { background: var(--h-ink); color: var(--h-bg); }
.btn:hover::after,
.col-link:hover::after,
.btn-primary:hover::after { transform: translateX(4px); }
.free-contact,
.btn-primary { background: var(--h-ink); color: var(--h-bg); }
.free-contact:hover,
.btn-primary:hover { background: var(--h-bg); color: var(--h-ink); }
.hero-button::after,
.package-plan-page::after { content: none; }
.package-plan-page::before { content: "↗"; order: 2; font-family: var(--h-font-mono); font-weight: 400; }

/* フッター */
footer { background: var(--h-night); color: var(--h-night-ink); padding: 64px var(--h-gutter) 32px; }
footer .footer-nav { display: grid; gap: 40px; }
footer .logo img { width: 120px; height: auto; }
footer nav ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; font-size: 0.8125rem; line-height: 2; }
/* 押せる範囲を 24px 以上にする（行の高さ 2 の行の箱いっぱい。見た目は変わらない。WCAG 2.5.8。点検の追加、2026-09-26） */
footer nav a { display: inline-block; min-width: 24px; color: var(--h-night-muted); }
footer nav a:hover { color: var(--h-night-ink); }
footer nav a span { color: var(--h-night-ink); font-weight: 700; }
footer .concept-message {
  margin-top: 56px;
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 70%;
  font-size: clamp(40px, 1rem + 6vw, 120px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
footer .concept-message span { color: var(--h-accent); }
footer .copyright { margin-top: 32px; font-family: var(--h-font-mono); font-size: 0.6875rem; color: var(--h-night-muted); }
footer :focus-visible { outline-color: var(--h-night-ink); box-shadow: 0 0 0 6px var(--h-night); }
@media (min-width: 900px) {
  footer .footer-nav { grid-template-columns: 0.6fr 1.4fr; }
  footer nav ul { grid-template-columns: repeat(4, 1fr); }
}

/* 見出しまわりの日本語の改行（ゆんの指摘「タイトル周りの日本語の改行位置を不自然な改行にならないように」、2026-09-26）。
   Chrome が文字の単位で折り返し、語の途中や助詞・語尾が行の頭に来ていた。文節で折り返し、行の長さをそろえる。
   2026-09-26 に auto-phrase（Chrome だけ）から、BudouX の文節の塊（どのブラウザーでも同じ）へ切り替えた。CSS で直らない文は inc/v2/linebreak.php で文節の span に分ける */
/* 見出しは日英とも行の長さをそろえる（balance は行の数を増やさない。横の帯のマスの高さは変わらない） */
main :is(h1, h2, h3, h4) { text-wrap: balance; }
/* 和文の見出しと、冒頭の案内・カードの題・説明・ボタン（長い本文・記事の本文・フォームの中は対象の外） */
:lang(ja) main :is(h1, h2, h3, h4, .heading, .lead, .text, .annotation, .service-hero__subtitle, .service-section-desc, .case-cta__desc,
  .service-card__desc, .client-case__lead, .thanks-line__lead, .tn-column-cta__text, .news-title, .column-title, .site-news-list__title,
  .site-news-bar__title, .pain-title, .btn, dt, th, figcaption, li):not(:is(.h-prose, .entry-content, .page-content, form) *) {
  /* 文節の塊（inc/v2/linebreak.php が BudouX で包む span.v2-ph）の境目だけで折り返す。auto-phrase は Chrome だけで、iPhone の Safari では
     文字の単位で折れていた（ゆんの指摘、2026-09-26）。keep-all は WebKit で禁則（開き括弧が行末・句読点が行頭）を破るので使わない
     （WebKit の点検、2026-09-26）。1つの文節が行より長いときだけ、その中で禁則を守って折り返す */
  overflow-wrap: break-word;
  line-break: strict;
}
:lang(ja) main :is(.lead, .text, .annotation, .service-hero__subtitle, .service-section-desc, .case-cta__desc, .service-card__desc,
  .client-case__lead, .thanks-line__lead, .tn-column-cta__text):not(:is(.h-prose, .entry-content, .page-content, form) *) { text-wrap: pretty; }
/* 404 の和文の大見出し（縦積み）: 「見つかりません」（7字）が1行に入る大きさ。横の帯では list.css の画面の高さの上限が効く */
html:not(.is-hscroll) #page-column .h-list-head:has(.error-page__lead) h1 { font-size: min(clamp(56px, 2rem + 7vw, 160px), 12vw); }
/* linebreak.php の文節の span: v2-wbr（手で分けた塊）・v2-ph（BudouX の文節）は塊の中で折り返さない（塊より幅が狭いときは中で折り返す）、
   v2-nobr は語の中で折り返さない */
main :is(span.v2-wbr, span.v2-ph) { display: inline-block; max-width: 100%; }
/* inline-block の中には親の下線が伝わらないので、塊（と塊の並びの v2-phs）は親の下線を受け継ぐ（リンクの中・ホバーで題に下線を引く
   ニュース・コラムの一覧。Codex 実装レビュー、2026-09-26） */
main :is(span.v2-phs, span.v2-wbr, span.v2-ph, span.v2-ph-glue) { text-decoration: inherit; }
/* 区切りのあるリンクなどの直後の、区切りのない文字（「…？</a>」を」）。境目は禁則に任せ、中では折り返さない */
main span.v2-ph-glue { white-space: nowrap; }
/* 離さない塊の中の子の要素（区切りのない長い span など）は、行より長いときに中で折り返す。塊の境目（子の要素と後ろの文字の間）だけ折り返さない */
main span.v2-ph-glue > :not(.v2-nobr) { white-space: normal; }
main span.v2-nobr { white-space: nowrap; }