/* 新テーマ（H-B のデザイン）の記事のページ（コラム記事）。組み替えは inc/v2/article.php。
   本文の中の見た目は、今のテーマのコラム本文の CSS（assets/column/article.css。記事のページで読む）をそのまま使い、
   地の色に合わせて文字の色だけを v2 の色にする（AAA の 7:1）。縦積みが土台で、html.is-hscroll のときだけ横の帯にする。
   横の帯では、本文を画面の高さの段にして右へ並べる（段組み）。段の数に合わせた幅は site.js の setupArticleColumns が決める */

/* --------------------------------------------------------------------------
   縦積み
   -------------------------------------------------------------------------- */
.single-wrapper { padding: 0 var(--h-gutter); }
.single-column { max-width: 46rem; margin: 0 auto; }
.single-column .h-track > .h-article-head,
.single-column .h-article-head { padding-top: clamp(40px, 6vw, 80px); }
.entry-label {
  font-family: var(--h-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--h-muted);
}
.entry-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--h-accent);
  vertical-align: 0.15em;
}
.single-column .entry-title { margin: 14px 0 0; font-size: clamp(28px, 1.2rem + 2vw, 46px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.entry-meta { margin-top: 18px; font-family: var(--h-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--h-muted); }
.entry-thumb { margin-top: 28px; overflow: hidden; background: var(--h-bg-2); }
.entry-thumb img { width: 100%; height: auto; }
.single-column .entry-content { margin-top: 40px; }
/* 表の前後で分けた本文の続き（縦積みでは、元の1つの本文と同じ間隔で続ける） */
.single-column .h-article-body + .h-article-body > .entry-content { margin-top: 0; }
/* 本文の文字は、ブラウザーの文字の大きさの設定に合わせる（以前は base.css の body が 16px の固定だった。コラムの本文 .tn-column-body は
   コラムの CSS が rem で決め直すが、その入れ物のない記事〈英語のコラムなど〉は 16px のままだった）。標準の設定では 16px で同じ */
.single-column .entry-content { font-size: 1rem; }
/* 本文の文字の色を、v2 の地の色で AAA（7:1）に届く色にする。今のコラム本文の CSS の色は、補助の #626b7b（約5:1）、
   リンクの青 #167eae（約4.1:1）、FAQ の「Q.」のピンク（約3:1）、申し込みのボタンのピンクに白い文字（約3.3:1）、
   ひとことの見出しの青い地に白い文字（約4.2:1）で届かない。青は #15507e（#f4f4f4 と約7.7:1、白と約8.5:1、表の見出しの地と約7.5:1）、
   ピンクは文字に使わず（計画の規則）、FAQ の「Q.」は本文の色、ボタンは黒い地に白い文字にする */
html .single-column .entry-content > .tn-column-body { --tn-column-ink: var(--h-ink); --tn-column-muted: var(--h-muted); --tn-column-blue: #15507e; }
html .single-column .entry-content > .tn-column-body .tn-column-faq__question .tn-column-faq__mark { color: var(--h-ink); }
html .single-column .entry-content > .tn-column-body a:hover { color: var(--h-ink); }
html .single-column .entry-content > .tn-column-body .tn-column-cta__button { background: var(--h-ink); box-shadow: none; }
html .single-column .entry-content > .tn-column-body .tn-column-cta__button:hover { background: #3a3a3a; }
html .single-column .entry-content > .tn-column-body .tn-column-message__label { background: #15507e; }
html .single-column .entry-content > .tn-column-body .tn-column-message__label strong { color: inherit; }

/* 関連記事 */
.related-posts { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--h-ink); }
.related-posts__title { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.4; }
.related-posts__list { margin-top: 24px; }
.related-posts__list[data-h-grid] > .related-posts__item { padding: 0; }
.related-posts__link { display: flex; flex-direction: column; height: 100%; }
.related-posts__thumb { overflow: hidden; aspect-ratio: 16 / 10; background: var(--h-bg-2); }
.related-posts__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--h-ease); }
.related-posts__link:hover .related-posts__thumb img { transform: scale(1.03); }
.related-posts__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 18px 0; font-family: var(--h-font-mono); font-size: 0.75rem; color: var(--h-muted); }
.related-posts__title-text { padding: 8px 18px 18px; font-size: 0.9375rem; font-weight: 700; line-height: 1.6; }

/* 一覧へ戻る */
.back-link { margin: 40px 0 64px; }
.back-link a {
  display: inline-flex;
  align-items: center;
  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);
}
.back-link a:hover { background: var(--h-ink); color: var(--h-bg); }


/* --------------------------------------------------------------------------
   横の帯（html.is-hscroll）
   -------------------------------------------------------------------------- */
html.is-hscroll .single-wrapper { padding: 0; }
html.is-hscroll .single-column { max-width: none; margin: 0; }

/* 見出しのマス: 上に種類・題・日付、下にアイキャッチ */
html.is-hscroll .h-article-head {
  flex: none;
  width: calc(var(--H) * 1.05);
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 28px;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}
html.is-hscroll .h-article-head .entry-title { font-size: clamp(28px, 0.9rem + 1.8vw, 44px); }
html.is-hscroll .entry-thumb { margin: 0; min-height: 0; }
html.is-hscroll .entry-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 本文のマス: 画面の高さの段を右へ並べる（段の幅は約26字。段の間に細い罫線） */
html.is-hscroll .h-article-body {
  flex: none;
  height: 100%;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}
html.is-hscroll .h-article-body > :is(.entry-content, .page-content, .site-news-single__content, .h-prose) {
  height: 100%;
  margin: 0;
  column-width: 26rem; /* 文字の大きさの設定に合わせて段も広がる */
  column-gap: 56px;
  column-fill: auto;
  column-rule: 1px solid var(--h-line);
}
/* 表だけのマス（inc/v2/article.php が本文を表の前後で分けたもの）: 段組みにしない。幅は site.js の fitTable が、どのセルも3行以内に
   収まるまで広げる（ゆんの指示 2026-09-29） */
html.is-hscroll .h-article-body--table > .entry-content { column-width: auto; column-count: auto; column-rule: none; }
/* 表の入れ物（tabindex と「横方向にスクロールできます」の読み上げ名つき）は、今と同じくキーボードで横にスクロールできる
   入れ物のまま、段の高さに収める（段をまたいで分けない）。長い表は、入れ物の中で縦にもスクロールする。見出しは段の最後に取り残さない */
html.is-hscroll .single-column .entry-content > .tn-column-body .tn-column-table {
  margin-block: 0 1.5em;
  max-height: calc(var(--h-col-h, 60vh) - 1.5em - 2px); /* 段の高さ（site.js の setupColumns が測る）まで */
  overflow: auto;
  overscroll-behavior-x: contain; /* 横の受け渡しだけ止め、縦のホイールはページ（帯）へ渡す */
  break-inside: avoid;
}
/* 表は段の幅に収める（コラムの CSS の最小幅 38rem のままだと、約26字の段から3列目が出て見えず、マウスのホイールでは横に送れなかった。
   点検の中6、2026-09-26）。セルの中で折り返す（文節で折り返し、1つの文節がセルより長いときだけ文節の中でも折り返す）。
   段の高さより長くなった表は、今までどおり入れ物の中で縦に送れる */
html.is-hscroll .single-column .entry-content > .tn-column-body .tn-column-table table { min-width: 0; }
html.is-hscroll .single-column .entry-content > .tn-column-body .tn-column-table :is(th, td) { overflow-wrap: anywhere; }
html.is-hscroll .single-column .entry-content > .tn-column-body :is(h2, h3) { break-after: avoid; }
/* 図・引用・箇条書きの項目・記事の FAQ・要点・ひとこと・注意・申し込みの枠は、段をまたいで割らない（計画の合格条件） */
html.is-hscroll .single-column .entry-content > .tn-column-body :is(figure, blockquote, li, .tn-column-faq__item, .tn-column-summary, .tn-column-message, .tn-column-notice, .tn-column-cta) { break-inside: avoid; }
html.is-hscroll .single-column .entry-content > .tn-column-body img { max-height: calc(var(--H) * 0.6); width: auto; }
/* ひとことのラベルは枠の上端から 1.15rem はみ出す絶対配置（コラムの CSS）。枠が段の先頭に来ると、はみ出した分が前の段の下端へ
   割り出されるので、横の帯では配置を枠の中（top: 0）にして、描画だけ transform で同じ位置へ上げる（見た目は変わらない） */
html.is-hscroll .single-column .entry-content > .tn-column-body .tn-column-message__label { top: 0; transform: translateY(-1.15rem); }

/* 汎用ページ・ニュース記事・プライバシーの本文（今のテーマの本文の CSS がない部分）。段の中で割らない、見出しを取り残さない */
html.is-hscroll .h-article-body :is(.page-content, .site-news-single__content, .h-prose) :is(h2, h3) { break-after: avoid; }
html.is-hscroll .h-article-body :is(.page-content, .site-news-single__content, .h-prose) :is(figure, table, li, blockquote) { break-inside: avoid; }
html.is-hscroll .h-article-body :is(.page-content, .site-news-single__content) img { max-height: calc(var(--H) * 0.6); width: auto; }

/* 無料診断（記事の中）: 共通の部品（band.css） */

/* 関連記事: 見出しの列 + 2段グリッド */
html.is-hscroll .h-track > section.related-posts { display: flex; align-items: stretch; margin: 0; padding-right: 0; border-top: 0; }
html.is-hscroll .related-posts__title { flex: none; width: calc(var(--H) * 0.4); padding-right: 32px; align-self: end; }
html.is-hscroll .related-posts__list[data-h-grid] { margin: 0; grid-auto-columns: calc(var(--H) * 0.46); border-top: 0; }
html.is-hscroll .related-posts__list[data-h-grid] > .related-posts__item { overflow: hidden; }
html.is-hscroll .related-posts__thumb { flex: none; height: 58%; aspect-ratio: auto; }

/* 一覧へ戻る */
html.is-hscroll .h-track > p.back-link {
  flex: none;
  width: calc(var(--H) * 0.5);
  height: 100%;
  margin: 0;
  display: grid;
  align-content: end;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}

/* 背の低い画面 */
@media (max-height: 820px) {
  html.is-hscroll .h-article-head { width: calc(var(--H) * 1.3); }
  html.is-hscroll .related-posts__list[data-h-grid] { grid-auto-columns: calc(var(--H) * 0.56); }
  html.is-hscroll .related-posts__thumb { height: 50%; }
  html.is-hscroll .related-posts__title-text { font-size: 0.875rem; }
}


/* ==========================================================================
   汎用ページ（page）・プライバシー（page-privacy）・ニュース記事（single-the_n_news）
   ========================================================================== */
/* 縦積み */
#page > .container,
#privacy > .container,
.site-news-single__container { max-width: 46rem; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--h-gutter) 0; }
#privacy .mv-area { display: none; }
:is(#page, #privacy, .site-news-single) h1 { margin: 12px 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); font-weight: 700; line-height: 1.35; }
#privacy .h-article-head .text { margin-top: 20px; font-size: 0.9375rem; line-height: 2; }
:is(.page-content, .site-news-single__content, .h-prose) { margin-top: 32px; font-size: 0.9375rem; line-height: 2; }
:is(.page-content, .site-news-single__content, .h-prose) h2 { margin: 2em 0 0.6em; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); font-weight: 700; line-height: 1.5; }
:is(.page-content, .site-news-single__content, .h-prose) h3 { margin: 1.6em 0 0.5em; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
:is(.page-content, .site-news-single__content, .h-prose) :is(p, ul, ol, table) { margin: 0 0 1.4em; }
:is(.page-content, .site-news-single__content, .h-prose) :is(ul, ol) { padding-left: 1.4em; }
:is(.page-content, .site-news-single__content, .h-prose) ul { list-style: disc; }
/* プライバシーの箇条書きは、文言の先頭に「・」がある（今のテーマと同じく黒丸を付けない） */
.h-prose ul { padding-left: 0; list-style: none; }
:is(.page-content, .site-news-single__content, .h-prose) ol { list-style: decimal; }
:is(.page-content, .site-news-single__content, .h-prose) a { color: #15507e; text-decoration: underline; text-underline-offset: 3px; }
:is(.page-content, .site-news-single__content) table { width: 100%; border-collapse: collapse; }
:is(.page-content, .site-news-single__content) :is(th, td) { padding: 10px 12px; border: 1px solid var(--h-line); text-align: left; vertical-align: top; }
:is(.page-content, .site-news-single__content, .h-prose) > :first-child { margin-top: 0; }
.site-news-breadcrumb { margin-bottom: 20px; }
.site-news-single__label a { font-family: var(--h-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; }
.site-news-single__meta { display: flex; gap: 14px; margin-top: 12px; font-family: var(--h-font-mono); font-size: 0.75rem; color: var(--h-muted); }
.site-news-single__related a,
.site-news-single__back a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.site-news-single__back { margin: 32px 0 64px; }

/* 横の帯 */
html.is-hscroll :is(#page, .single-wrapper) { padding: 0; }
html.is-hscroll #page > .container { max-width: none; margin: 0; padding: 0; }
html.is-hscroll .h-track > section:is(#privacy, .site-news-single) { display: flex; padding: 0; }
html.is-hscroll :is(#privacy > .container, .site-news-single__container) { position: relative; display: flex; gap: 0; height: 100%; max-width: none; margin: 0; padding: 0; }
html.is-hscroll .site-news-single__article { display: flex; height: 100%; }
/* ニュース記事のパンくずは、見出しのマスの上端に重ねる（記事の外にあるので、見出しのマスには入れられない） */
html.is-hscroll .site-news-single__container > .site-news-breadcrumb { position: absolute; top: 40px; left: clamp(28px, 3vw, 48px); z-index: 2; margin: 0; }
html.is-hscroll :is(#page, #privacy, .site-news-single) .h-article-head { grid-template-rows: auto; align-content: end; }
html.is-hscroll :is(#page, #privacy, .site-news-single) h1 { font-size: clamp(1.75rem, 0.9rem + 1.8vw, 2.75rem); }
html.is-hscroll :is(.page-content, .site-news-single__content, .h-prose) { margin: 0; }
html.is-hscroll .site-news-single__article > :is(p.site-news-single__related, p.site-news-single__back) {
  flex: none;
  width: calc(var(--H) * 0.5);
  height: 100%;
  margin: 0;
  display: grid;
  align-content: end;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}