/* コラム（/column/）の一覧と個別。
   2026-09-20: 箱（カード枠・囲み背景）をやめ、余白と細い罫線で区切るフラットな作りに置き換え。
   Codex の案をもとに実装。共通 .container のカード表現はコラムでだけ解除している。
   金色は「罫線」と「主ボタン」だけに使う（面積で使わない）。
   ★文字・アイコン・フォーカス枠・選択中の細い下線の金は var(--text-gold)（ライト #8a5e00＝白地 5.7:1）。
     var(--gold) の #f5b800 はライトの白い地で 1.8:1 しかない（2026-09-23 監査）。 */

/* コラム一覧・個別記事
   style.css の既存変数を利用し、セクションを箱で囲まないフラット設計にする */

/* 共通 .container のカード表現をコラムだけ解除 */
.container.legal-doc.hp-col {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 24px 20px 48px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.container.legal-doc.hp-col-single {
  max-width: 680px;
}

/* legal.css のテーマ別 h1 指定より詳細度を高くする */
:root .container.legal-doc.hp-col h1 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* カテゴリ別ページの説明文（一覧ページには説明文を置かない） */
.container.legal-doc.hp-col p.hp-col-termdesc {
  max-width: 40em;
  margin: 0 0 20px;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.85;
}

/* カテゴリと並び替えの行。箱で囲わず、選んでいるものだけ太字＋金の下線 */
.hp-col-nav {
  margin: 0 0 4px;
}

.hp-col-nav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0 0 6px;
}

.hp-col-nav__label {
  flex: 0 0 auto;
  color: var(--text-light);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.container.legal-doc.hp-col a.hp-col-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 1px;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 0.82rem;
  text-decoration: none;
}

.container.legal-doc.hp-col a.hp-col-nav__link:hover {
  color: var(--text-main);
}

.container.legal-doc.hp-col a.hp-col-nav__link.is-on {
  border-bottom-color: var(--text-gold);  /* 選択中を示す 2px の線。地に対して 3:1 以上にする */
  color: var(--text-main);
  font-weight: 700;
}

.hp-col-nav__hash {
  margin-right: 1px;
  color: var(--text-gold);
}

.hp-col-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  color: var(--text-light);
  font-size: 0.78rem;
  line-height: 1.5;
  text-decoration: none;
}

.hp-col-chip::before {
  content: "#";
  margin-right: 2px;
  color: var(--text-gold);
}

.container.legal-doc.hp-col a.hp-col-chip--link {
  color: var(--text-light);
  text-decoration: none;
  text-underline-offset: 3px;
}

.container.legal-doc.hp-col a.hp-col-chip--link:hover {
  color: var(--text-main);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* 題名の下の行の機種タグ（2026-09-25・関連する機種）。カテゴリの「#」の代わりに小さな「機種」の札を付け、
   カテゴリより一段はっきりした色にする（押すとその機種のページへ） */
.container.legal-doc.hp-col a.hp-col-chip--machine {
  gap: 5px;
  color: var(--text-main);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
}
.hp-col-chip--machine::before {
  content: "機種";
  margin-right: 0;
  padding: 1px 6px;
  border: 1px solid var(--line-gold-hi);
  border-radius: 4px;
  color: var(--text-gold);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
}
.container.legal-doc.hp-col a.hp-col-chip--machine:hover {
  color: var(--text-main);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* 一覧 */
.hp-col-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-gold);
  list-style: none;
}

.container.legal-doc.hp-col .hp-col-list > li {
  margin: 0;
}

/* 1行＝リンク＋★ボタン（★はリンクの中に入れられないので兄弟に置く） */
.hp-col-card {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border: 0;
  border-bottom: 1px solid var(--line-gold);
}

.container.legal-doc.hp-col a.hp-col-card__link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}

.container.legal-doc.hp-col a.hp-col-card__link:focus-visible {
  outline: 2px solid var(--text-gold);
  outline-offset: 4px;
}

/* サムネは題名より大きくしない。機種の行と同じ 80×60（4:3）で固定し、縮まないようにする */
.hp-col-card__thumb {
  order: 2;
  flex: 0 0 80px;
  width: 80px;
  height: 60px;
  margin: 2px 0 0;
  border-radius: 3px;
  background: var(--bg-card-hi);
  object-fit: cover;
}

.hp-col-card__body {
  order: 1;
  min-width: 0;
  flex: 1 1 auto;
}

/* legal.css の h2 装飾がカードタイトルへ入るのを確実に解除 */
:root .container.legal-doc.hp-col .hp-col-card__title {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.container.legal-doc.hp-col a.hp-col-card__link:hover
  .hp-col-card__title {
  color: var(--text-main);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.container.legal-doc.hp-col p.hp-col-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 7px 0 0;
  color: var(--text-light);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ===== コラム一覧のカード（2026-09-24 オーナー指示で組み直し） =====
   - 題名は画像の横から始め、画像より長い分は画像の下へ回り込ませる（画像の下の余白を使う）。
     日付・カテゴリの行は画像の下で全幅にする。
   - 本文の抜粋は出さない（template-parts/column-list.php で出力をやめた）。
   - 左右の余白をなくす: 左は legal.css の ul の字下げ（約21px）が効いていたので消す。
     右はブックマークの列（40px）をやめ、ボタンをカード右下（日付の行の右端）に置く。
   - 表示中のずれ対策にもなっている: 以前は日付の行が狭く、読み込み途中の端末の書体では
     「有料会員」が2行目に落ち、Webフォントで1行に戻ってカードの高さが変わっていた（CLS 0.05〜0.1 → 0.01 未満）。 */
.container.legal-doc.hp-col ul.hp-col-list {
  padding-left: 0;
}

.container.legal-doc.hp-col .hp-col-list .hp-col-card {
  position: relative;
  display: block;
}

.container.legal-doc.hp-col .hp-col-list a.hp-col-card__link {
  display: flow-root;
}

.container.legal-doc.hp-col .hp-col-list .hp-col-card__thumb {
  float: right;
  margin: 2px 0 6px 14px;
}

.container.legal-doc.hp-col .hp-col-list .hp-col-card__body {
  display: block;
}

/* 日付の行は画像の下から始め、右端はブックマークのボタンの分だけ空ける */
.container.legal-doc.hp-col .hp-col-list p.hp-col-card__meta {
  clear: right;
  padding-right: 40px;
}

/* ブックマークのボタン（押せる範囲 40px 四方）は、日付の行（高さ30px）と縦の中心をそろえてカード右下に置く。
   アイコンの右端が本文の右端とそろうよう、ボタンの余白の分だけ外に出す */
.container.legal-doc.hp-col .hp-col-list .hp-col-bm {
  position: absolute;
  right: -8px;
  bottom: 15px;
  margin: 0;
}

/* とても狭い画面（360px 未満）では日付の行に入りきらないことがあるので、「有料会員」はいつも次の行に置く
   （入る・入らないが書体で変わると、読み込み途中にカードの高さが変わってずれるため） */
/* 600px 以下はカードの上下の余白が 18px なので、ボタンもその分だけ下げる */
@media (max-width: 600px) {
  .container.legal-doc.hp-col .hp-col-list .hp-col-bm {
    bottom: 13px;
  }
}

@media (max-width: 359px) {
  .container.legal-doc.hp-col .hp-col-list p.hp-col-card__meta .hp-col-lock {
    flex-basis: 100%;
  }
}

.container.legal-doc.hp-col p.hp-col-card__excerpt {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.container.legal-doc.hp-col p.hp-col-empty {
  margin: 24px 0;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ブックマークの★ボタン。枠は付けず、押した時だけ金色にする */
.hp-col-bm {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 40px;
  min-height: 40px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-light);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}

.hp-col-bm__icon {
  display: block;
  width: 19px;
  height: 19px;
}

.hp-col-bm__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 「保存済み」の文字とアイコンの塗り。以前は var(--gold) で、ライトでは保存前（灰 5.3:1）より
   保存後（金 1.8:1）のほうが薄く見えていた。 */
.hp-col-bm.is-on {
  color: var(--text-gold);
}

.hp-col-bm.is-on .hp-col-bm__icon svg path {
  fill: var(--text-gold);
}

.hp-col-bm:hover {
  color: var(--text-main);
}

.hp-col-bm:focus-visible {
  outline: 2px solid var(--text-gold);
  outline-offset: 2px;
}

/* 一覧では場所を取らないようにアイコンだけにする */
.hp-col-list .hp-col-bm__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 記事ページの★は文字付き、メタ行のすぐ下に置く */
.container.legal-doc.hp-col p.hp-col-single__bm {
  margin: -12px 0 22px;
}

.hp-col-single__bm .hp-col-bm {
  margin: 0 0 0 -6px;
  padding: 0 8px;
}

/* ブックマークした記事の欄（JSが中身を入れる） */
.hp-col-bms {
  margin: 0 0 22px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-gold);
}

:root .container.legal-doc.hp-col .hp-col-bms__head {
  width: auto;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.5;
}

.hp-col-bms__count {
  margin-left: 2px;
  color: var(--text-light);
  font-weight: 400;
}

.container.legal-doc.hp-col .hp-col-bms__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container.legal-doc.hp-col .hp-col-bms__list li {
  margin: 0;
}

.container.legal-doc.hp-col a.hp-col-bms__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 36px;
  padding: 4px 0;
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.5;
  text-decoration: none;
}

.container.legal-doc.hp-col a.hp-col-bms__item:hover .hp-col-bms__title {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.hp-col-bms__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-col-bms__date {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-light);
  font-size: 0.72rem;
}

/* 横に流すカード（2026-10-06 オーナーが案B）。何件あっても高さは1段のまま、指で横に送る。
   PHP（template-parts/column-bookmarks.php）と js/column.js が同じ形で描く。
   画像はサムネなので枠に合わせて切ってよい（切り取らない決まりは解析の図など情報の画像の話） */
.container.legal-doc.hp-col .hp-col-bms__list--cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 0 10px;
}

.container.legal-doc.hp-col .hp-col-bms__list--cards li {
  flex: 0 0 136px;
  min-width: 0;
  scroll-snap-align: start;
}

.container.legal-doc.hp-col .hp-col-bms__list--cards a.hp-col-bms__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding: 0;
}

.hp-col-bms__thumb {
  display: block;
  width: 136px;
  height: 76px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(138, 94, 0, 0.1);
}

.hp-col-bms__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-col-bms__list--cards .hp-col-bms__title {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hp-col-bms__list--cards .hp-col-bms__date {
  margin-left: 0;
  font-size: 0.68rem;
}

/* マウスの人は横に送りにくいので、送るためのバーを細く見せておく */
@media (hover: hover) and (pointer: fine) {
  .container.legal-doc.hp-col .hp-col-bms__list--cards {
    scrollbar-width: thin;
    scrollbar-color: var(--line-gold) transparent;
  }
}

/* 一覧のカードのブックマーク数（しおりの印＋人数・inc/theme/column.php の hp_column_bookmark_count_html） */
.hp-col-bmcount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hp-col-bmcount svg {
  width: 12px;
  height: 12px;
}

.hp-col-bmcount__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 一覧末尾の機種・ツール導線 */
.container.legal-doc.hp-col:not(.hp-col-single) > p:last-child {
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-gold);
  font-size: 0.92rem;
  line-height: 1.85;
}

/* ページ送り */
.hp-col .pagination {
  margin: 28px 0 0;
}

.hp-col .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 0.88rem;
}

.hp-col .nav-links > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line-gold);
}

.hp-col .nav-links .current {
  border-bottom: 3px solid var(--gold);
  color: var(--text-main);
  font-weight: 700;
}

/* 記事メタ */
.container.legal-doc.hp-col-single p.hp-col-card__meta {
  margin: 0 0 22px;
}

.hp-col-author {
  margin-left: 0;
}

/* 記事ヒーロー。縦長の写真でも画面を埋め尽くさないように高さを抑える */
.hp-col-hero {
  display: block;
  width: 100%;
  max-height: 320px;
  margin: 0 0 28px;
  border-radius: 3px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 会員向けの印（一覧・記事のメタ行）。有料記事を見分ける唯一の手がかりなので文字用の金にする
   （トップの .hp-col-row__lock もライトは #8a5e00 で、場所によって色が変わらないように揃える） */
.hp-col-lock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-gold);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.hp-col-lock svg {
  width: 12px;
  height: 12px;
}

/* 本文 */
.container.legal-doc.hp-col .entry-content {
  max-width: 640px;
  margin: 0 auto;
}

/* ★有料コラムでは .entry-content の中身がロック画面（.paywall-locked）だけになる。
   本文用の p / h2 / h3 の指定がパネルの中まで届き、説明文が全部16pxに膨らむ・見出しが左に寄る・
   見出しの飾りが二重になる、と崩れていた。`:not(:where(.paywall-locked *))` で対象から外す。
   :where() の中は詳細度0なので、ほかの規則との強さの関係は今までと変わらない。 */
.container.legal-doc.hp-col .entry-content p:not(:where(.paywall-locked *)) {
  margin: 0 0 20px;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.container.legal-doc.hp-col .entry-content > p:first-child {
  font-size: 1.04rem;
  font-weight: 500;
}

/* ---------- 見出し（G数カウンター案・2026-09-23 オーナー選択） ----------
   大きさの階段: 本文16 / h2 22 / h3 17.5 / h4 15.5 / h5 15 / h6 14。
   ★以前は h2・h3 しか定義がなく、h4〜h6 はサイト全体の既定（headings-typography.css）が
     出ていた。h4 が 18.4px で h3（17px）より大きい逆転、600px以下では h6 が 8px まで縮んで
     本文（16px）より小さくなる不具合があったので、6段階すべてここで決める。
   セレクタは既存の `:root .container.legal-doc.hp-col .entry-content hN`（0,5,1）に揃え、
   既定の h4 の下線・h5 のドット・600px以下の縮小に確実に勝たせる。 */
.container.legal-doc.hp-col .entry-content {
  counter-reset: hp-col-sec;
  /* 章番号の色。文字の裏に敷く飾りなので、読める濃さにはしない（ライト7%・ダーク10%） */
  --hp-col-num: rgba(26, 26, 26, 0.07);
  --hp-col-num-stroke: transparent;
}
/* ダークは白い見出しの文字と番号が同じ色味で重なって読みにくかったので、番号に金の輪郭を付けて色で分ける
   （2026-09-25 オーナー選択「今の色＋金の輪郭・濃いめ」。ライトは今のまま） */
:root:not([data-theme="light"]) .container.legal-doc.hp-col .entry-content {
  --hp-col-num: rgba(236, 233, 223, 0.10);
  --hp-col-num-stroke: rgba(245, 184, 0, 0.45);
}

/* h2: 章。スロットのゲーム数カウンターの見立てで、章番号を巨大な淡い等幅数字で文字の裏に敷く。
   絶対配置＋z-index:-1 で本文の幅も行も食わない。isolation で h2 の中に閉じ込め、
   ページの背景の裏に潜らないようにする。 */
:root .container.legal-doc.hp-col .entry-content h2:not(:where(.paywall-locked *)) {
  counter-increment: hp-col-sec;
  position: relative;
  isolation: isolate;
  width: auto;
  min-height: 52px;
  margin: 40px 0 14px;
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  display: flex;
  align-items: flex-end;
}
:root .container.legal-doc.hp-col .entry-content h2:not(:where(.paywall-locked *))::before {
  content: counter(hp-col-sec, decimal-leading-zero);
  position: absolute;
  z-index: -1;
  left: -4px;
  top: -26px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--hp-col-num);
  -webkit-text-stroke: 1px var(--hp-col-num-stroke);
  pointer-events: none;
  user-select: none;
}
/* 既定の h2 が持つ金のマーカー地（ライト）と左ボーダーを確実に消す */
:root[data-theme="light"] .container.legal-doc.hp-col .entry-content h2 {
  background: none;
  background-image: none;
}

/* h3: 節。金の左線 */
:root .container.legal-doc.hp-col .entry-content h3:not(:where(.paywall-locked *)) {
  margin: 28px 0 10px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 3px solid var(--gold);
  background: none;
  color: var(--text-main);
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.6;
}
:root .container.legal-doc.hp-col .entry-content h3::before { content: none; }
:root .container.legal-doc.hp-col .entry-content h3 span { background: none; padding: 0; }

/* h4: 小節。細い左線だけ */
:root .container.legal-doc.hp-col .entry-content h4 {
  margin: 22px 0 8px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--line-gold);
  background: none;
  color: var(--text-main);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.7;
}

/* h5 / h6: 項目。装飾なしで太さと色だけ */
:root .container.legal-doc.hp-col .entry-content h5 {
  margin: 18px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
:root .container.legal-doc.hp-col .entry-content h5::before { content: none; }
:root .container.legal-doc.hp-col .entry-content h6 {
  margin: 16px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

/* ★600px以下: 既定（headings-typography.css）は h4 0.8rem / h5 0.7rem / h6 0.5rem まで縮めるが、
   コラムの本文は16pxのままなので、見出しが本文より小さくなってしまう。ここで打ち消す。 */
@media (max-width: 600px) {
  /* h2 / h3 はロック画面の見出しを外す（上の本文用と同じ理由） */
  :root .container.legal-doc.hp-col .entry-content h2:not(:where(.paywall-locked *)) { font-size: 20px; min-height: 46px; margin: 34px 0 12px; }
  :root .container.legal-doc.hp-col .entry-content h2:not(:where(.paywall-locked *))::before { font-size: 64px; top: -20px; }
  :root .container.legal-doc.hp-col .entry-content h3:not(:where(.paywall-locked *)) { font-size: 17px; margin: 24px 0 10px; }
  :root .container.legal-doc.hp-col .entry-content h4 { font-size: 15.5px; margin: 20px 0 8px; }
  :root .container.legal-doc.hp-col .entry-content h5 { font-size: 15px; margin: 16px 0 6px; }
  :root .container.legal-doc.hp-col .entry-content h6 { font-size: 14px; margin: 14px 0 6px; }
}

.container.legal-doc.hp-col .entry-content ul,
.container.legal-doc.hp-col .entry-content ol {
  margin: 0 0 22px;
  padding-left: 1.35em;
}

.container.legal-doc.hp-col .entry-content li {
  margin: 0 0 9px;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.9;
}

.container.legal-doc.hp-col .entry-content a {
  text-underline-offset: 3px;
}

.container.legal-doc.hp-col .entry-content img {
  max-width: 100%;
  height: auto;
}

.container.legal-doc.hp-col .entry-content figure {
  margin: 28px 0;
}

.container.legal-doc.hp-col .entry-content figcaption {
  margin-top: 8px;
  color: var(--text-light);
  font-size: 0.78rem;
  line-height: 1.6;
}

.container.legal-doc.hp-col .entry-content blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 18px;
  border: 0;
  border-left: 3px solid var(--gold);
  background: none;
}

.container.legal-doc.hp-col .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.container.legal-doc.hp-col .entry-content hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--line-gold);
}

/* 会員案内。箱ではなく上下罫線と余白で強調 */
/* 下の枠線は無し（2026-09-27）: 最後のリンクの下線と2本並んで「空の行」に見えたため。リンクの下線で欄が終わる */
.hp-col-cta {
  margin: 52px 0 0;
  padding: 26px 0 4px;
  border: 0;
  border-top: 2px solid var(--gold);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.container.legal-doc.hp-col p.hp-col-cta__lead {
  margin: 0 0 20px;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
}

.container.legal-doc.hp-col p.hp-col-cta__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}

/* 現行HTMLでは「機種一覧」に付く通常ボタンを副導線化 */
/* 副リンク（下線だけ）。主ボタンは下の --primary */
.container.legal-doc.hp-col a.hp-col-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line-gold-hi);
  border-radius: 0;
  background: none;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

/* 現行HTMLで --ghost が付く「入会の手引き」を主CTA化 */
/* 主ボタン（金色のベタ塗り・箱は使わず1つだけ置く） */
.container.legal-doc.hp-col a.hp-col-btn--primary {
  order: -1;
  justify-content: center;
  min-height: var(--btn-min-h);
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--gold);
  color: var(--btn-ink);
}

.container.legal-doc.hp-col a.hp-col-btn:hover {
  color: var(--text-main);
  border-bottom-color: var(--gold);
}

.container.legal-doc.hp-col a.hp-col-btn--primary:hover {
  border-color: var(--gold-soft);
  background: var(--gold-soft);
  color: #131419;
}

.container.legal-doc.hp-col a.hp-col-btn:focus-visible {
  outline: 2px solid var(--text-gold);
  outline-offset: 3px;
}

.container.legal-doc.hp-col p.hp-col-back {
  margin: 22px 0 0;
  color: var(--text-light);
  font-size: 0.875rem;
  line-height: 1.7;
}

@media (min-width: 560px) {
  .container.legal-doc.hp-col p.hp-col-cta__actions {
    display: flex;
    align-items: center;
  }

  .container.legal-doc.hp-col a.hp-col-btn--primary {
    min-width: 180px;
  }
}

@media (max-width: 480px) {
  .container.legal-doc.hp-col {
    padding-right: 20px;
    padding-left: 20px;
  }

  :root .container.legal-doc.hp-col h1 {
    font-size: 1.6rem;
  }

  .container.legal-doc.hp-col a.hp-col-card__link {
    gap: 12px;
    padding: 18px 0;
  }

  .hp-col-card__thumb {
    flex-basis: 72px;
    width: 72px;
    height: 54px;
  }

  :root .container.legal-doc.hp-col .hp-col-card__title {
    font-size: 1rem;
  }
}

/* ===== 記事の本文の文字組み（2026-09-24 オーナー採用・note.com を参考） =====
   - 書体は端末の標準（iPhone はヒラギノ、Android は Noto Sans CJK）。note と同じ並び。
   - かなと約物を詰める（palt）。note の本文は、この詰めで1文字あたり文字サイズの約85%の幅になっている。
     Zen Kaku Gothic New（Google Fonts 版）は palt が効かないので、本文と題名は書体ごと替えた。見出し（h2・h3）は今のまま。
   - 文字は 16px・行の高さは 2 倍（note と同じ）。段落の間は 28px（note は 30px）。
   - ロック画面（.paywall-locked）の中には効かせない。
   - 最初の段落を少し大きくする指定（> p:first-child）より強くして、本文はすべて同じ大きさにそろえる（見本どおり）。 */
.container.legal-doc.hp-col-single {
  --hp-read-font: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, Meiryo, sans-serif;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content p:not(:where(.paywall-locked *)),
:root .container.legal-doc.hp-col.hp-col-single .entry-content li:not(:where(.paywall-locked *)) {
  font-family: var(--hp-read-font);
  font-feature-settings: "palt";
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content p:not(:where(.paywall-locked *)) {
  margin-bottom: 28px;
}

/* 引用の中の段落（2026-09-26 オーナーが案Bを採用）。本文の「行の高さ2倍・段落の間28px」がそのまま効くと、
   1行ずつ段落になった引用（箇条書きのような引用。例: 有利区間リセットタイミング ①〜⑥）の間が空きすぎていた（高さ 552px → 299px）。
   引用の中だけ 文字15px・行の高さ1.7・段落の間2px に詰める。 */
:root .container.legal-doc.hp-col.hp-col-single .entry-content blockquote p:not(:where(.paywall-locked *)) {
  margin-bottom: 2px;
  font-size: 0.94rem;
  line-height: 1.7;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content blockquote p:not(:where(.paywall-locked *)):last-child {
  margin-bottom: 0;
}

/* 取り消し線（直す前の古い値。例 <del>108.79%</del>106.65%）は小さく薄くして、新しい値を目立たせる（2026-10-07 オーナーが案B）。
   本文と同じ大きさだと線の入った数字が読みにくかった。記事に書いた opacity:.55 はそのまま効く（無い記事にも同じ薄さを付ける）。
   <s> はブロックエディタの「取り消し線」ボタンが出す形。 */
:root .container.legal-doc.hp-col.hp-col-single .entry-content :is(del, s) {
  font-size: 0.66em;
  opacity: 0.55;
  text-decoration-thickness: 1px;
}

:root .container.legal-doc.hp-col-single h1 {
  font-family: var(--hp-read-font);
  font-feature-settings: "palt";
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ===== 記事の目次（.bk-toc）2026-09-24 オーナー指示で作り直し =====
   目次は記事の本文に入っている手作りのもの（nav.bk-toc・details で開け閉め・最大3段）。記事ごとに入っている小さな
   <style> より強い指定で、見た目をここにまとめる（今の記事にも、これからの記事にも効く）。
   以前の見にくさ: 全部が同じリンク色・同じ大きさで段の違いが分からない、本文の文字組み（行の高さ2倍）が効いて
   間が空きすぎ、「目次」の太字が本文の指定で消える、折り返した2行目が「▶」の下に回り込む。
   - 1段目（章）は太字、2段目は普通、3段目は小さく薄く。下の段は金の縦線でつなぐ。
   - 開け閉めの印は右端の「⌄」（押せる幅 36px）。開いている時は上向き。 */
:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc {
  margin: 28px 0 36px;
  padding: 16px 16px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-card);
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc .bk-toc-title {
  margin: 0 0 4px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-gold);
  color: var(--text-main);
  font-family: var(--hp-read-font);
  font-feature-settings: "palt";
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 下の段は、縦の線で親とつなぐ */
:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul ul {
  margin: 0 0 8px 2px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line-gold);
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc li {
  margin: 0;
  padding: 0;
  font-family: var(--hp-read-font);
  font-feature-settings: "palt";
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* いちばん上の段の区切り */
:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc > ul > li + li {
  border-top: 1px solid var(--line-gold);
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc a {
  display: block;
  padding: 9px 0;
  color: var(--text-main);
  font-weight: 500;
  text-decoration: none;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc a:hover {
  color: var(--text-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 段ごとの強さ: 1段目（章）は太く、2段目は普通、3段目は小さく薄く */
:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc > ul > li > details > summary > a {
  font-weight: 700;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul ul li {
  font-size: 14px;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul ul a {
  padding: 7px 0;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul ul ul li {
  font-size: 13.5px;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc ul ul ul a {
  padding: 5px 0;
  color: var(--text-light);
  font-weight: 400;
}

/* 開け閉め: 既定の「▶」は消し、右端に「⌄」を置く（押せる幅 36px） */
:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc summary {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc summary::-webkit-details-marker {
  display: none;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc summary > a {
  flex: 1 1 auto;
  min-width: 0;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc summary::after {
  content: "";
  flex: 0 0 36px;
  align-self: stretch;
  min-height: 32px;
  background: var(--text-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.2s;
}

:root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc details[open] > summary::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  :root .container.legal-doc.hp-col.hp-col-single .entry-content .bk-toc summary::after {
    transition: none;
  }
}

/* ===== 記事の目次メニュー（右下の丸いボタン → 目次の小窓）2026-09-24 =====
   機種ページの狙い目（css/single-machine.css の .machine-toc-*）と同じ作り。中身は js/column.js が作る */
.hp-col-toc-fab {
  position: fixed;
  right: 14px;
  bottom: 64px; /* 下のナビ（56px）のすぐ上 */
  z-index: 10010; /* 下のナビ（9999）より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-color, #f5b800);
  color: #1a1a1a;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: bottom 0.2s ease;
}
.hp-col-toc-fab[hidden] { display: none; }
/* 検索・50音などのパネルが開いている時は、その上へ逃がす */
.hp-col-toc-fab.is-panel-open { bottom: 132px; }
/* 下のナビがスクロールで隠れたら、ボタンは下端まで降りて出したまま */
.hp-col-toc-fab.is-nav-hidden { bottom: 16px; }
.hp-col-toc-fab:focus-visible { outline: 2px solid var(--text-main); outline-offset: 2px; }

.hp-col-toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10011;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hp-col-toc-overlay.is-open { opacity: 1; }

.hp-col-toc-drawer {
  position: fixed;
  right: 12px;
  bottom: 70px;
  z-index: 10012;
  display: flex;
  flex-direction: column;
  width: min(84vw, 320px);
  max-height: 64vh;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  background: var(--bg-card, #1c1c1c);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hp-col-toc-drawer.is-open { opacity: 1; transform: none; }
/* 閉じている間は完全に消す（display:flex が [hidden] に勝ってボタンのタップを横取りしないように） */
.hp-col-toc-drawer[hidden],
.hp-col-toc-overlay[hidden] { display: none !important; }

.hp-col-toc-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--line-gold);
  color: var(--text-gold);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hp-col-toc-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-main);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.hp-col-toc-list {
  position: relative; /* 項目の offsetTop を小窓の中の位置にする（js の「いま読んでいる所」送り） */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 10px;
}

.hp-col-toc-item {
  display: block;
  position: relative;
  width: 100%;
  border: none;
  background: none;
  color: var(--text-main);
  font-family: var(--hp-read-font, sans-serif);
  font-feature-settings: "palt";
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 1段目（章）: 太字。2段目: 普通・金の点。3段目: 小さく薄く */
.hp-col-toc-item--1 {
  padding: 12px 16px 5px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}
.hp-col-toc-item--1:first-child { padding-top: 8px; }
.hp-col-toc-item--2 {
  padding: 7px 16px 7px 30px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.hp-col-toc-item--2::before {
  content: "";
  position: absolute;
  top: calc(7px + 0.725em - 2.5px);
  left: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-color, #f5b800);
}
.hp-col-toc-item--3 {
  padding: 5px 16px 5px 42px;
  color: var(--text-light);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}
.hp-col-toc-item:active { color: var(--text-gold); }
/* 指で押した後に色が残らないよう、hover はマウスの時だけ */
@media (hover: hover) {
  .hp-col-toc-item:hover { color: var(--text-gold); }
}
/* いま読んでいる所 */
.hp-col-toc-item.is-current {
  background: var(--bg-card-hi, rgba(245, 184, 0, 0.08));
  color: var(--text-gold);
}
.hp-col-toc-item.is-current::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-color, #f5b800);
}

/* パネルが開いてボタンが上にいる時は、小窓もその上に */
.hp-col-toc-fab.is-panel-open ~ .hp-col-toc-drawer { bottom: 186px; }

/* 目次から飛んだ時、見出しが画面の上端に貼り付かないよう少し空ける */
.hp-col-single .entry-content :where(h2, h3, h4) { scroll-margin-top: 16px; }

/* 目次の小窓の先頭の「この記事の機種」（2026-09-25・関連する機種を付けた記事だけ）。
   行全体が押せるリンク。目次（下のリスト）は小窓の中で送れるが、機種の行は小窓の上に固定して、いつでも見える */
.hp-col-toc-machines {
  flex-shrink: 0;
  max-height: 30vh; /* 画面の低い端末（横向きなど）で機種の行が小窓を埋めて目次が見えなくならないように。超えたら中で送る */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-gold);
}
/* 頭の :root は、legal.css のライトのホバー（:root[data-theme="light"] .legal-doc a:hover）に色で負けないため */
:root .container.legal-doc.hp-col a.hp-col-toc-machine {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-main);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
:root .container.legal-doc.hp-col a.hp-col-toc-machine:active { background: var(--bg-card-hi, rgba(245, 184, 0, 0.08)); }
@media (hover: hover) {
  :root .container.legal-doc.hp-col a.hp-col-toc-machine:hover {
    background: var(--bg-card-hi, rgba(245, 184, 0, 0.08));
    color: var(--text-main);
  }
}
.hp-col-toc-machine img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}
.hp-col-toc-machine__name {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--hp-read-font, sans-serif);
  font-feature-settings: "palt";
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.hp-col-toc-machine__go {
  flex: 0 0 auto;
  color: var(--text-gold);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* チャットを開いている間は一式を隠す（送信ボタンと重ならないように） */
body.dc-chat-open .hp-col-toc-fab,
body.dc-chat-open .hp-col-toc-overlay,
body.dc-chat-open .hp-col-toc-drawer { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hp-col-toc-fab,
  .hp-col-toc-overlay,
  .hp-col-toc-drawer { transition: none; }
}