@charset "utf-8";
/* ============================================================
   三才堂 外観 v2「藍×青磁」（2026-10）
   site.css の後に読み込み、色・線・字の «見た目» だけを上書きする。
   画面の並び・文言・命式表の位置は site.css と各テンプレートのまま。
   元に戻すときは base.html の theme-ai.css の行を消すだけでよい。

   設計の芯（俵屋旅館の作法を借りる）：
     1. 紙と藍墨。差し色は藍（操作）と青磁（しるし）の一系統だけ。
     2. 五行の色は干支だけのもの。UI の藍・青磁は五行の水・木より灰みを強くして混同を避け、
        日主のしるしは藍ではなく墨で示す（藍だと «水» に見えるため）。
     3. カード・影・角丸は使わない。区切りは細い罫と余白。
     4. 見出し・ナビ・ボタンは明朝で字間を開ける。読ませる本文はこれまでどおり。
   ============================================================ */

:root {
  --bg:        #f2f0e8;   /* 生成りの紙 */
  --surface:   #faf9f4;   /* 紙の上に置く一枚 */
  --surface-2: #ebe9e0;
  --ink:       #1a222c;   /* 藍墨 */
  --ink-2:     #414b55;
  --ink-3:     #5f6972;
  --line:      #d5d6cd;
  --line-2:    #e2e2d9;

  --accent:     #1f3d63;  /* 藍：ボタン・リンクの印・操作 */
  --accent-ink: #142b48;
  --accent-bg:  #e5ebf1;
  --accent-line:#bccbdb;
  --mark:       #3e7869;  /* 青磁：番号・見出しの印 */
  --mark-bg:    #e2ebe6;
  --deep:       #24364d;  /* リンク */
  --deep-2:     #142b48;

  --night:      #17283f;  /* 結び・足の藍墨 */
  --night-line: #2b3d58;
  --night-ink:  #d8e0e2;
  --night-ink-2:#93a2b0;

  --r: 0px;
  --r-sm: 2px;
  --sh-1: none; --sh-2: none; --sh-3: none;
}

body { background: var(--bg); }
::selection { background: #cfdbe6; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { letter-spacing: .06em; }

/* ═══════════════════════════════ 頭（内ページ用） */
.site-header {
  background: rgba(242,240,232,.94); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner { min-height: 72px; }
.brand__tag { font-family: var(--mincho); letter-spacing: .14em; color: var(--ink-3); }
.nav { gap: 1.6rem; }
.nav a:not(.btn), .nav__link { font-family: var(--mincho); letter-spacing: .14em; color: var(--ink-2); }
.nav a:not(.btn)::after, .nav__link::after { height: 1px; background: var(--accent); }
.nav a.is-active:not(.btn) { color: var(--ink); }

/* ═══════════════════════════════ ボタン */
.btn {
  font-family: var(--mincho); font-weight: 600; letter-spacing: .16em;
  border-radius: 0; background: var(--accent); border-color: var(--accent); color: #fff;
  padding: .95em 2em;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff;
  box-shadow: none; transform: none; }
.btn--deep { background: var(--deep); border-color: var(--deep); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent-bg); color: var(--accent-ink); }
.btn--quiet { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }
.btn--sm { padding: .7em 1.3em; letter-spacing: .12em; }
.btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ═══════════════════════════════ 見出し */
.section__title { font-weight: 600; letter-spacing: .16em; }
.section__head { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.block__title { letter-spacing: .1em; }
.block__title::before { width: 2px; background: var(--mark); }

/* ═══════════════════════════════ 板（カードは影をやめ、紙の上の一枚にする） */
.card, .tile, .clockdemo, .hero__card, .verdict, .tally, .tag-legend {
  border-radius: 0; box-shadow: none;
}
.card { background: var(--surface); border: 1px solid var(--line); }
.hero__card { border-color: var(--line); }
.empty { border-radius: 0; background: var(--surface); }
.note { border-radius: 0; background: var(--surface); }
.note--warn { border-left-color: var(--bad); background: var(--bad-bg); }
.messages li { border-radius: 0; background: var(--surface); }
.prose h2 { letter-spacing: .1em; border-bottom-color: var(--line); }
.legal-table th { background: var(--surface-2); }

/* ═══════════════════════════════ フォーム */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  /* background は一括指定にしない：site.css が select に付けた矢印画像まで消えてしまう */
  border-radius: var(--r-sm); background-color: #fffefa; border-color: var(--line);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,61,99,.12);
}
.radio-row label { border-radius: var(--r-sm); background-color: #fffefa; }
.radio-row label:hover { border-color: var(--accent); background: var(--surface); }
.radio-row input[type="radio"], .check input { accent-color: var(--accent); }
fieldset.box { border-radius: 0; }
fieldset.box legend { letter-spacing: .14em; color: var(--ink); }
details.advanced > summary { color: var(--accent); font-family: var(--mincho); letter-spacing: .08em; }

/* ═══════════════════════════════ 命式表（位置・文言は変えない。色と線だけ） */
.meishiki { border: 1px solid var(--line); box-shadow: none; border-radius: 0; }
.meishiki__title { letter-spacing: .26em; }
/* 日柱の帯はそのまま。角だけ落とす */
.mtable tbody tr:first-child td.is-day,
.mtable tbody tr:last-child td.is-day { border-radius: 0; }
.mtable td.is-day { background: var(--surface-2); }
/* 日主のしるしは墨で。藍は «水» の色と紛れるので使わない */
.mtable thead th.colhead.is-day { color: var(--ink); }
.mtable thead th.colhead.is-day::after { background: var(--ink); border-radius: 0; height: 1px; }
.star--day { color: var(--ink); }

.verdict { border-color: var(--line); background: var(--surface); }
.verdict__badge, .factor, .wxchip, .counter, .rule, .type-cell, .type-badge,
.gk-verdict, .three-way .tw, .chip, .rel-list li, .un-cell, .ln-cell, .tag { border-radius: var(--r-sm); }
.type-cell.is-on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.type-badge { background: var(--accent); }
.rule.is-on { border-left-color: var(--accent); }
.sign-list li::before { color: var(--mark); }
.fold__flag { color: var(--accent); }
details.fold > summary { border-bottom-color: var(--line); }
details.fold > summary:hover .block__title { color: var(--accent); }
.chip.xing { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.rel-list li.xing { border-left-color: var(--accent); }
.dtable thead th { background: var(--surface-2); }
.gogyo__track, .gogyo__fill { border-radius: 0; }
.sex { border-radius: var(--r-sm); }

/* ═══════════════════════════════ 札 */
.badge { border-radius: 0; letter-spacing: .12em; font-family: var(--mincho); }
.badge--public { color: var(--mark); background: var(--mark-bg); border-color: #b9d0c7; }
.badge--member { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-line); }
.badge--paid   { color: #7a5c1c; background: #f3ecdb; border-color: #dccb9e; }
.badge--owned  { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════ 講座 */
.course-card { background: transparent; border: 0; }
.course-card:hover { transform: none; box-shadow: none; }
.course-card__cover { border-bottom: 0; background: var(--surface-2); }
.course-card__body { padding: 1rem 0 .4rem; }
.course-card__title { letter-spacing: .1em; }
.course-card__foot { border-top: 1px solid var(--line); padding-top: .8rem; }
.lesson-list { border-top-color: var(--line); }
.lesson-item { border-bottom-color: var(--line); }
.side-lessons li { border-bottom-color: var(--line); }
.side-lessons li.is-current a { color: var(--accent); }
.player-wrap { background: var(--night); border-radius: 0; }
.chart-row { border-bottom-color: var(--line); }
.rel-pill { border-radius: 0; }

/* ═══════════════════════════════ 足（藍墨） */
.site-footer {
  background: var(--night); color: var(--night-ink-2); border-top: 0;
  padding: 3.6rem 0 3rem;
}
.footer-grid h4 { color: var(--night-ink); letter-spacing: .3em; font-weight: 500; }
.footer-grid p, .footer-grid .muted { color: var(--night-ink-2); }
.footer-grid a { color: var(--night-ink-2); }
.footer-grid a:hover { color: #fff; }
.footer-note { color: var(--night-ink-2); border-top-color: var(--night-line); }
.footer-logo { height: 24px; width: auto; display: block; margin-bottom: 1rem; }
.footer-logo--light { display: none; }

/* ═══════════════════════════════ トップページ（home.html 専用。.tw- で始まるものだけ） */
body.is-home .site-footer { margin-top: 0; }
body.is-home { --side: clamp(20px, 6vw, 96px); }

.tw-head { position: relative; height: 210px; padding: 0 var(--side); }
.tw-brand { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); text-align: center;
  text-decoration: none; color: inherit; }
.tw-brand img { height: 30px; width: auto; margin: 0 auto 10px; display: block; }
.tw-latin { font-family: var(--mincho); font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; }
.tw-acct { position: absolute; left: var(--side); top: 34px; display: grid; gap: 4px; justify-items: start;
  font-family: var(--mincho); font-size: 12px; letter-spacing: .14em; }
.tw-acct a, .tw-acct button { color: var(--ink-2); text-decoration: none; background: none; border: 0;
  padding: 0; font: inherit; letter-spacing: inherit; cursor: pointer; }
.tw-acct a:hover, .tw-acct button:hover { color: var(--accent); }
.tw-acct .is-reg { color: var(--accent); }
.tw-acct form { margin: 0; }
.tw-gnav { position: absolute; right: var(--side); top: 30px; display: flex; flex-direction: row-reverse;
  gap: 18px; height: 168px; }
.tw-gnav a { writing-mode: vertical-rl; font-family: var(--mincho); font-size: 14px; letter-spacing: .32em;
  color: var(--ink); text-decoration: none; position: relative; }
.tw-gnav a:hover { color: var(--accent); }
.tw-gnav a:hover::after { content: ""; position: absolute; right: -7px; top: 0; bottom: .3em;
  border-right: 1px solid var(--mark); }
.tw-mnav { display: none; }
/* 手機だけのメニュー開閉ボタンと、手機用に差し替える写真の <picture>。既定（861px 以上）では無いのと同じにし、860 块で上書きする
   （min-width:861px で囲むと 860〜861px の端数幅でどちらも効かない隙間ができるため、既定に置く） */
.tw-mbtn { display: none; }
.tw-hero__frame picture, .tw-can__media picture { display: contents; }

.tw-edge { position: fixed; top: 50%; transform: translateY(-50%); z-index: 40; }
.tw-edge--l { left: 22px; }
.tw-edge--l span { display: block; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 10px;
  letter-spacing: .42em; color: var(--ink-3); }
.tw-edge--r { right: 20px; }
.tw-edge--r a { display: block; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 14px;
  letter-spacing: .42em; color: #f4f2ea; background: var(--accent); padding: 18px 9px; text-decoration: none;
  transition: background .2s; }
.tw-edge--r a:hover { background: var(--accent-ink); color: #fff; }
.tw-mcta { display: none; }

.tw-hero { padding: 26px var(--side) 0; }
.tw-hero__frame { position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16/9; overflow: hidden;
  background: var(--night); }
.tw-hero__frame img, .tw-hero__frame .slot { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) sepia(.06) hue-rotate(-8deg) brightness(.98); }
.tw-hero__frame::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,34,58,.74) 0%, rgba(18,34,58,.36) 38%, rgba(18,34,58,0) 60%); }
.tw-hero__copy { position: absolute; z-index: 2; top: 12%; left: 9%; display: flex; flex-direction: row-reverse;
  gap: 26px; color: #f3f1ea; }
.tw-hero__copy h1 { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho);
  font-size: clamp(26px, 3.3vw, 46px); font-weight: 600; letter-spacing: .2em; line-height: 1.75; color: #f3f1ea; }
.tw-hero__kicker { writing-mode: vertical-rl; font-family: var(--mincho); font-size: 13px; letter-spacing: .38em;
  color: rgba(243,241,234,.82); border-right: 1px solid rgba(243,241,234,.45); padding-right: 12px;
  height: max-content; }
.tw-hero__under { max-width: 1180px; margin: 0 auto; padding: 56px 0 0; display: grid;
  grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.tw-hero__under p { margin: 0; max-width: 34em; color: var(--ink-2); font-family: var(--mincho); line-height: 2; }
.tw-cta { display: flex; gap: 28px; align-items: center; }

.tw-link { display: inline-flex; align-items: center; gap: 16px; font-family: var(--mincho); font-size: 14px;
  letter-spacing: .16em; color: var(--ink); text-decoration: none; }
.tw-link::before { content: ""; width: 48px; border-top: 1px solid currentColor; transition: width .3s; }
.tw-link:hover::before { width: 72px; }

.tw-sec { padding: clamp(80px, 12vw, 160px) var(--side); }
.tw-sec--tint { background: #dce7e1; }
.tw-wrap { max-width: 1080px; margin: 0 auto; position: relative; }
.tw-sec-head { position: absolute; right: 0; top: 0; display: flex; flex-direction: row-reverse; gap: 14px;
  align-items: flex-start; }
.tw-sec-head h2 { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho);
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: .32em; line-height: 1.5; }
.tw-sec-head .tw-latin { writing-mode: vertical-rl; font-size: 10px; color: var(--mark); }
.tw-sec-body { margin-right: 120px; }

.tw-can { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.tw-can figure { margin: 0; }
.tw-can__media { aspect-ratio: 4/3; overflow: hidden; }
.tw-can__media img, .tw-can__media .slot { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) sepia(.06) hue-rotate(-8deg) brightness(.98); }
.tw-can figcaption { margin-top: 12px; font-family: var(--mincho); font-size: 13px; color: var(--ink-3);
  letter-spacing: .2em; }
.tw-can ol { list-style: none; margin: 0; padding: 0; }
.tw-can li { display: grid; grid-template-columns: 3.2em 1fr; gap: 6px 14px; padding: 26px 0;
  border-top: 1px solid var(--line); }
.tw-can li:last-child { border-bottom: 1px solid var(--line); }
.tw-can__n { grid-row: span 2; font-family: var(--mincho); font-size: 22px; color: var(--mark); line-height: 1.4; }
.tw-can h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; }
.tw-can p { margin: 0; font-family: var(--mincho); font-size: 14px; color: var(--ink-2); line-height: 2; }

.tw-essay { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tw-essay__text p { margin: 0 0 1.4em; color: var(--ink-2); max-width: 26em; font-family: var(--mincho); line-height: 2; }
.tw-essay__text .tw-lead { font-size: clamp(19px, 1.8vw, 23px); color: var(--ink); line-height: 1.9;
  letter-spacing: .12em; margin-bottom: 1.6em; }
.tw-demo { border-top: 1px solid var(--ink); padding-top: 22px; }
.tw-demo__cap { font-family: var(--mincho); font-size: 14px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.9; }
.tw-demo__row { display: grid; grid-template-columns: 6.5em auto 1fr; align-items: baseline; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--line); }
.tw-demo__t { font-family: var(--mincho); font-size: 15px; letter-spacing: .1em; }
.tw-demo__gz { font-family: var(--mincho); font-weight: 700; font-size: 34px; letter-spacing: .12em; line-height: 1; }
.tw-demo__tag { font-family: var(--mincho); font-size: 13px; color: var(--ink-3); letter-spacing: .14em; }
.tw-demo__row.is-hit { background: linear-gradient(90deg, rgba(31,61,99,.08), rgba(31,61,99,0) 70%);
  box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; }
.tw-demo__row.is-hit .tw-demo__t, .tw-demo__row.is-hit .tw-demo__tag { color: var(--accent); font-weight: 700; }
.tw-demo__note { margin: 18px 0 0; font-family: var(--mincho); font-size: 13px; color: var(--ink-2); }

.tw-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.tw-course img, .tw-course__glyph { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  filter: saturate(.82) sepia(.06) hue-rotate(-8deg) brightness(.98); }
.tw-course__glyph { display: grid; place-items: center; background: var(--surface-2); font-family: var(--mincho);
  font-size: 2.5rem; color: var(--line); filter: none; }
.tw-course__badge { display: block; margin: 18px 0 6px; font-family: var(--mincho); font-size: 12px;
  letter-spacing: .24em; color: var(--mark); }
.tw-course__badge.is-paid { color: #7a5c1c; }
.tw-course h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .12em; line-height: 1.6; }
.tw-course h3 a { color: inherit; text-decoration: none; }
.tw-course h3 a:hover { color: var(--accent); }
.tw-course p { margin: 4px 0 16px; font-family: var(--mincho); font-size: 13px; color: var(--ink-2); }
.tw-course__foot { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: 12px; font-family: var(--mincho); font-size: 13px; }
.tw-course__foot b { font-weight: 600; font-size: 16px; letter-spacing: .06em; }
.tw-course__foot span { color: var(--ink-3); }
.tw-more { margin-top: 48px; text-align: right; }

.tw-close { background: var(--night); color: var(--night-ink); text-align: center;
  padding: clamp(100px, 14vw, 180px) var(--side); }
.tw-close img { height: 56px; width: auto; margin: 0 auto 48px; display: block; }
.tw-close h2 { margin: 0 auto; writing-mode: vertical-rl; font-family: var(--mincho);
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: .36em; line-height: 1.8;
  height: max-content; color: #eef1ec; }
.tw-close p { margin: 44px auto 40px; font-family: var(--mincho); font-size: 14px; color: var(--night-ink-2); max-width: 30em; }
.tw-close .btn { background: transparent; border-color: var(--night-ink); color: #eef1ec; }
.tw-close .btn:hover { background: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════ トップ（手機）
   方案B「画像主導」を底に、A の青磁の方印・改行、C の演示の矢印・講座の書目・罫の行・五冊の帯・浮くボタンの規則を接いだもの。
   ここに書くのは .is-home / .tw- で始まるものだけ。861px 以上の見た目には一切触れない。 */
@media (max-width: 860px) {
  /* 青磁を字に使うときは一段濃く（紙の上で #5f6972 より淡くならないように）。線・地は元の青磁のまま */
  .is-home { padding-bottom: 0; --mark-t: #33695b; }
  /* 手機では字幅を詰めない（palt を切る）。小さい画面で中黒・句読点が詰まって読みにくくなるため */
  .is-home main, .is-home .site-footer { font-feature-settings: normal; letter-spacing: .04em; }
  .is-home main p, .is-home main h1, .is-home main h2, .is-home main h3, .is-home main li,
  .is-home .site-footer p {
    word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
  /* 改行の位置は要素で区切らず、幅と «一行目だけ削る浮き» で決める（本文に要素を足すと電脳版の字形が 1px 未満ずれるため）。
     浮きは ::before に置き、右端（縦書きは下端）を一行目・二行目の分だけ削る。字幅は palt を切って 1em ＋字間で数える */
  .tw-hero__under > p, .tw-demo__cap, .tw-demo__note, .tw-sec--tint .tw-sec-head h2, .tw-close h2, .tw-close p {
    text-wrap: wrap; }
  .tw-lock { overflow: hidden; }
  /* 藍墨の地（頭・全面メニュー・冒頭・結び）では焦点の枠を紙の色に */
  .tw-head:not([data-theme="paper"]) :focus-visible, .tw-head.is-open :focus-visible, .tw-hero :focus-visible,
  .tw-close :focus-visible {
    outline-color: #f2f0e8; }

  /* ── 頭：一行 56px の帯。藍墨の区画では藍墨、紙の区画では紙（どちらも不透明） ── */
  .tw-head { position: sticky; top: 0; z-index: 50; height: 56px; padding: 0; display: flex;
    align-items: center; justify-content: space-between; background: var(--night);
    border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s; }
  .tw-head[data-theme="paper"] { background: var(--bg); border-bottom-color: var(--line); }
  .tw-head.is-foot[data-theme="paper"]:not(.is-open) { background: var(--surface-2); }  /* 足の上では足と同じ一段濃い紙 */
  .tw-head.is-scrolled[data-theme="night"] { border-bottom-color: rgba(216,224,226,.2); }
  .tw-head.is-open { background: var(--night); border-bottom-color: rgba(216,224,226,.2); }
  .tw-brand { position: relative; z-index: 2; left: auto; top: auto; transform: none; display: flex;
    align-items: center; height: 56px; padding: 0 16px 0 20px; text-align: left; }
  .tw-brand img { height: 24px; width: auto; margin: 0; filter: brightness(0) invert(.95); transition: filter .35s; }
  .tw-head[data-theme="paper"]:not(.is-open) .tw-brand img { filter: none; }
  /* 屋号の二行目（何のサイトか）。冒頭だけ見せ、送ったらしまう。メニューを開いたら見出しとして出す */
  .tw-brand .tw-latin { position: absolute; left: 20px; top: 56px; height: 36px; line-height: 36px;
    font-size: 14px; letter-spacing: .12em; color: var(--night-ink); transition: opacity .3s, visibility .3s; }
  .tw-head.is-scrolled:not(.is-open) .tw-latin { opacity: 0; visibility: hidden; }
  .tw-head.is-open .tw-latin { color: var(--night-ink-2); }
  /* JS が動かず頭の地色が決まらないとき（data-theme なし）と、頭の下にお知らせ（ログアウトしました 等）が出たときは、
     二行目は紙や本文に重なるので出さない */
  .tw-head:not([data-theme]) .tw-latin, .is-home:has(.messages) .tw-head:not(.is-open) .tw-latin { display: none; }
  .tw-acct, .tw-gnav, .tw-edge { display: none; }

  .tw-mbtn { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; height: 48px;
    min-width: 96px; margin: 0 4px 0 0; padding: 0 16px; background: none; border: 0; cursor: pointer;
    font-family: var(--mincho); font-size: 15px; font-weight: 500; letter-spacing: .16em; color: var(--night-ink);
    transition: color .35s; }  /* 頭の地色と同じ速さで替え、途中で淡い地に白字が乗る一瞬を作らない */
  .tw-head[data-theme="paper"]:not(.is-open) .tw-mbtn { color: var(--ink); }
  .tw-mbtn i { position: relative; display: block; width: 22px; height: 8px; flex: none;
    border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .tw-head.is-open .tw-mbtn i { border: 0; height: 22px; }
  .tw-head.is-open .tw-mbtn i::before, .tw-head.is-open .tw-mbtn i::after { content: ""; position: absolute;
    left: -1px; right: -1px; top: 50%; border-top: 1px solid currentColor; transform: rotate(45deg); }
  .tw-head.is-open .tw-mbtn i::after { transform: rotate(-45deg); }

  /* ── 全面メニュー（藍墨、項目は下半分＝親指の届くところ） ── */
  .tw-mnav { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr); column-gap: 12px; align-content: end; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 112px 20px calc(30px + env(safe-area-inset-bottom)); border: 0;
    background: var(--night); font-family: var(--mincho); counter-reset: tw-m;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .tw-head.is-open .tw-mnav { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }  /* 開くときは即座に見える（焦点を移せるように） */
  /* 方印の透かし：屋号の下から一つ目の項目の上までの余り（一段目の 1fr）の真ん中に。背の低い画面・項目の多いときは小さくなる */
  .tw-mnav::before { content: ""; grid-column: 1 / -1; align-self: center; justify-self: center;
    height: min(62vw, 300px, 100% - 48px); aspect-ratio: 1; pointer-events: none; opacity: .06;
    background: url("../img/logo-mark-white.93facec20ca5.svg") center / contain no-repeat; }
  .tw-mnav a, .tw-mnav button { position: relative; text-decoration: none; font: inherit; cursor: pointer; }
  .tw-mnav > a:nth-child(-n+4) { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px;
    min-height: 56px; border-bottom: 1px solid rgba(216,224,226,.22); counter-increment: tw-m;
    font-size: 17px; letter-spacing: .14em; color: #f2f0e8; }
  .tw-mnav > a:first-child { border-top: 1px solid rgba(216,224,226,.22); }
  .tw-mnav > a:nth-child(-n+4)::before { content: counter(tw-m, decimal-leading-zero); width: 22px; flex: none;
    font-size: 12px; letter-spacing: .1em; color: var(--night-ink-2); }
  .tw-mnav > a:first-child::after { content: ""; margin: 0 6px 0 auto; width: 22px; height: 7px;
    border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: skewX(45deg); }
  .tw-mnav > a:nth-child(n+5), .tw-mnav > form button { display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 50px; padding: 0 8px; border: 1px solid rgba(216,224,226,.5); background: none;
    font-size: 15.5px; letter-spacing: .14em; color: var(--night-ink); }
  .tw-mnav > a:nth-child(5), .tw-mnav > a:nth-child(6) { margin-top: 28px; }
  .tw-mnav > a.is-reg { background: var(--bg); border-color: var(--bg); color: var(--accent); font-weight: 600; }
  .tw-mnav > form { grid-column: 1 / -1; margin: 12px 0 0; display: block; }
  .tw-mnav a:hover, .tw-mnav button:hover { color: #fff; }
  .tw-mnav > a.is-reg:hover { color: var(--accent-ink); background: #fff; }
  /* JS が切られている・home-m.js が読めなかった（頭に .is-js も data-theme も無い）ときは、
     ボタンが働かないので出さず、項目を頭の下に開いたまま並べる */
  .tw-head:not(.is-js):not([data-theme]) { position: relative; height: auto; flex-wrap: wrap; }
  .tw-head:not(.is-js):not([data-theme]) .tw-mbtn { display: none; }
  .tw-head:not(.is-js):not([data-theme]) .tw-mnav { position: static; width: 100%; grid-template-rows: none;
    padding: 8px 20px 12px; align-content: start; opacity: 1; visibility: visible; }
  .tw-head:not(.is-js):not([data-theme]) .tw-mnav::before { content: none; }

  /* ── 浮く「命式を出す」：右下の小さな札。出す・しまうは home-m.js が決める ── */
  .tw-mcta { position: fixed; z-index: 40; left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; align-items: center; height: 48px; padding: 0 48px 0 20px; text-align: left;
    background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,.18);
    font-family: var(--mincho); font-size: 15px; font-weight: 600; letter-spacing: .18em; text-decoration: none;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .tw-mcta::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 6px; margin-top: -4px;
    border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: skewX(45deg); }
  .tw-mcta.is-on { opacity: 1; visibility: visible; }
  /* しまうと決めた瞬間から押せない（visibility は淡く消える .3s のあいだ visible のままなので、指を素通りさせる） */
  .tw-mcta:not(.is-on) { pointer-events: none; }
  .tw-mcta:hover { color: #fff; background: var(--accent-ink); }

  /* ── ① 冒頭：満幅の書頁 → 一句 → ボタン、紙へ降りる一本の線 → 序 ── */
  .tw-hero { display: flex; flex-direction: column; padding: 36px 0 0; background: var(--night); color: var(--night-ink); }
  .tw-hero__frame { display: block; position: relative; aspect-ratio: auto; overflow: visible; max-width: none;
    margin: 0; background: var(--night); }
  .tw-hero__frame::after { content: none; }
  .tw-hero__frame picture { display: block; position: relative; overflow: hidden; background: #141210;
    height: clamp(180px, calc(100vh - 392px), 120vw); height: clamp(180px, calc(100svh - 392px), 120vw); }
  .tw-hero__frame picture::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 32px;
    background: linear-gradient(var(--night), rgba(23,40,63,0)); }
  .tw-hero__frame picture::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%;
    background: linear-gradient(rgba(23,40,63,0), rgba(23,40,63,.55) 45%, var(--night)); }
  .tw-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: none;
    animation: tw-breathe 9s cubic-bezier(.2,.6,.2,1) both; }
  /* 背の低い画面（Safari の道具帯が出ている等）では書頁の下寄りを見せ、下の暈しを浅くして「宗」「功」と朱印を残す */
  @media (max-height: 700px) {
    .tw-hero__frame img { object-position: 50% 58%; }
    .tw-hero__frame picture::after { height: 18%; }
  }
  .tw-hero__copy { position: static; display: block; padding: 20px 20px 0; color: #f2f0e8; }
  .tw-hero__kicker { display: flex; align-items: center; gap: 12px; writing-mode: horizontal-tb; height: auto;
    border: 0; padding: 0; font-size: 13px; letter-spacing: .24em; line-height: 1.6; color: var(--night-ink-2); }
  .tw-hero__kicker::before { content: ""; width: 28px; flex: none; border-top: 1px solid currentColor; }
  .tw-hero__copy h1 { margin-top: 12px; writing-mode: horizontal-tb; font-size: clamp(24px, 7.2vw, 28px);
    font-weight: 500; line-height: 1.5; letter-spacing: .05em; color: #f2f0e8; }
  .tw-hero__under { display: contents; }
  .tw-cta { order: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex-wrap: nowrap;
    padding: 22px 20px 46px; }
  .tw-hero .btn, .tw-close .btn { position: relative; display: flex; align-items: center; justify-content: center;
    height: 56px; padding: 0; width: 100%; background: var(--bg); border-color: var(--bg); color: var(--accent);
    font-family: var(--mincho); font-size: 17px; font-weight: 600; letter-spacing: .22em; }
  .tw-hero .btn::after, .tw-close .btn::after { content: ""; position: absolute; right: 20px; top: 50%; width: 22px;
    height: 7px; margin-top: -4px; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor;
    transform: skewX(45deg); }
  .tw-hero .btn:hover, .tw-close .btn:hover { background: #fff; border-color: #fff; color: var(--accent-ink); }
  .tw-hero .tw-link { align-self: flex-start; min-height: 48px; gap: 12px; font-size: 15px; letter-spacing: .1em;
    color: var(--night-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
  .tw-hero .tw-link::before { width: 24px; opacity: .7; }
  .tw-hero__under > p { order: 2; position: relative; margin: 0; max-width: none; background: var(--bg);
    padding: 76px max(20px, calc(50% - 150px)) 0; text-align: left; color: var(--ink);
    font-size: 17px; line-height: 2.1; letter-spacing: .06em; font-feature-settings: normal; }
  /* 四行に折る：「二十四節気の節入りは／天文学上の絶対時刻です。／日本時間で正しく判定しなければ、／年柱も月柱も変わります。」
     一字 = 1.06em（17px＋字間 .06em）。一行目は 11.1em（10 字 ≦ 11.1 ＜ 11 字）、二行目は 13.25em（12 字 ≦ ＜ 13 字）まで削り、
     三行目からは版面 300px（16 字 ≦ ＜ 17 字）で折れる。削りは右に浮かせた枠の形（shape-outside）で一・二行目だけにかける */
  .tw-hero__under > p::before { content: ""; float: right; width: calc(100% - 11.1em); height: 4.1em;
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 2.15em 100%, 2.15em 2.02em, 0 2.02em); }
  /* 藍墨から紙へ降りる一本の線は、左揃えにした序の書き出し（版心の左端）に立てる */
  .tw-hero__under > p::after { content: ""; position: absolute; left: max(20px, calc(50% - 150px)); top: -32px; width: 1px; height: 64px;
    background: linear-gradient(var(--night-ink-2) 50%, var(--mark) 50%); }

  /* ── 章の頭：縦書きの章名＋直立の章番号＋英字の小札 ── */
  .is-home main { counter-reset: tw-sec; }
  .tw-sec { padding: 112px 20px 120px; counter-increment: tw-sec; }
  .tw-sec-head { position: static; display: flex; flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 14px; margin: 0 0 52px; }
  .tw-sec-head::after { content: counter(tw-sec, decimal-leading-zero); content: counter(tw-sec, decimal-leading-zero) / ""; order: -1; writing-mode: vertical-rl;
    text-combine-upright: all; -webkit-text-combine: horizontal; font-family: var(--mincho); font-size: 14px;
    line-height: 1; color: var(--ink-3); padding-top: 6px; }
  .tw-sec-head h2 { writing-mode: vertical-rl; font-size: clamp(24px, 6.6vw, 27px); font-weight: 500;
    letter-spacing: .15em; line-height: 1.25; }
  .tw-sec-head .tw-latin { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .3em; color: var(--mark-t); padding-top: 4px; }
  .tw-sec-body { margin-right: 0; }

  /* ── ② できること：額装の一枚 → 青磁の方印つきの三条 ── */
  .tw-can { display: block; }
  .tw-can figure { margin: 0 8px; }
  /* 手機の図は柱名と干支の二段だけ（feature-m-kanshi.webp、880×771） */
  .tw-can__media { aspect-ratio: 880/771; background: #ddd6c6; }
  .tw-can__media picture { display: block; width: 100%; height: 100%; }
  .tw-can__media img { filter: none; }
  .tw-can figcaption { font-size: 13px; letter-spacing: .12em; }
  .tw-can ol { margin-top: 64px; }
  .tw-can li { grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 26px 0 32px; }
  .tw-can__n { grid-row: auto; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box;
    border: 1px solid var(--mark); font-size: 15px; line-height: 1; color: var(--mark-t); }
  .tw-can h3 { font-size: 19px; letter-spacing: .1em; }
  .tw-can p { grid-column: 1 / -1; margin-top: 14px; font-size: 15.5px; line-height: 1.95; color: var(--ink-2); }

  /* ── ③ 一時間で、年柱が変わる：二列の散らし書き → 演示（矢印つき二枡）→ 随筆 ── */
  /* 二列の散らし書き「一時間で、／年柱が変わる」：二列目を 2.2em 下げる。一字 = 1.16em。
     列の長さ 7.2em（6 字 ≦ 7.2 ＜ 7 字）、上に 2.2em の余白、一列目だけ text-indent で余白まで引き上げ、
     下端の浮き 3em で一列目を 6.4em（5 字 ≦ 6.4 ＜ 6 字）に削る */
  .tw-sec--tint .tw-sec-head h2 { font-size: clamp(25px, 7vw, 28px); letter-spacing: .16em; line-height: 1.75;
    height: 9.4em; padding-top: 2.2em; text-indent: -2.2em; }
  .tw-sec--tint .tw-sec-head h2::before { content: ""; float: right; float: inline-end; width: 1em; height: 3em; }  /* right は inline-end を知らない古い Chromium 用（縦書きでは下端） */
  .tw-sec--tint .tw-sec-head::after { color: var(--ink-2); }
  /* 行送り 1.75 で列の左右に余白が出るぶん、章番号・英字との間を詰めて 01・03 と同じ見かけの間隔に */
  .tw-sec--tint .tw-sec-head { gap: 7px; }
  .tw-essay { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .tw-demo { order: -1; display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: var(--surface);
    border: 1px solid #c6d4cc; }
  .tw-demo__cap { grid-column: 1 / -1; margin: 0; padding: 22px 20px 18px; border-bottom: 1px solid #d3ddd6;
    font-size: 15px; line-height: 1.95; letter-spacing: .02em; color: var(--ink); }
  /* 「2000年の立春は」で折り、日付を一行に保つ：一行目 = 5 字 × 1.02em ＋ 数字 4 字（約 .55em）≒ 7.3em ≦ 8em ＜ 次の「日」まで 8.3em。
     （字間を .02em に詰め、二文目 18 字が 360 幅の版面 278px にも一行で入るようにする）
     一文が丸ごと一行に収まる幅（22.5em 以上）では削らない（clamp で 0 にする） */
  .tw-demo__cap::before { content: ""; float: right; height: 1em;
    width: clamp(0px, calc((22.5em - 100%) * 1000), calc(100% - 8em)); }
  .tw-demo__row, .tw-demo__row.is-hit { position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 0; padding: 22px 8px 24px; border: 0; background: none; box-shadow: none; }
  .tw-demo__row + .tw-demo__row { border-left: 1px solid #d3ddd6; }
  .tw-demo__cap + .tw-demo__row::after { content: "→"; content: "→" / ""; position: absolute; z-index: 1; right: -16px; top: 50%;
    width: 32px; height: 32px; margin-top: -16px; box-sizing: border-box; border: 1px solid #93a2b0; border-radius: 50%;
    background: var(--surface); display: grid; place-items: center; font-family: system-ui, sans-serif;
    font-size: 15px; line-height: 1; color: var(--ink-2); }
  .tw-demo__t, .tw-demo__row.is-hit .tw-demo__t { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--ink-2); }
  .tw-demo__gz { writing-mode: vertical-rl; margin: 14px 0 16px; font-size: clamp(46px, 13vw, 52px); font-weight: 600;
    line-height: 1.12; letter-spacing: .06em; }
  .tw-demo__tag, .tw-demo__row.is-hit .tw-demo__tag { padding: 3px 12px; border: 1px solid #b9c3bd; font-size: 14px;
    font-weight: 500; line-height: 1.6; letter-spacing: .12em; color: var(--ink-2); }
  .tw-demo__row.is-hit .tw-demo__tag { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
  .tw-demo__note { grid-column: 1 / -1; margin: 0; padding: 18px 20px 22px; border-top: 1px solid #d3ddd6;
    background: #f4f6f2; font-size: 15.5px; font-weight: 600; line-height: 1.95; color: var(--ink); }
  /* 三行に折る：「時差を補正しないと、／この一時間に生まれた方を／すべて取り違えます。」一字 = 1.04em。
     一行目 10.9em（10 字 ≦ ＜ 11 字）、二行目 13em（12 字 ≦ ＜ 13 字）まで削る */
  .tw-demo__note::before { content: ""; float: right; width: calc(100% - 10.9em); height: 3.85em;
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 2.1em 100%, 2.1em 1.9em, 0 1.9em); }
  .tw-essay__text { margin-top: 52px; }
  .tw-essay__text p { max-width: none; margin: 0 0 16px; font-size: 15.5px; line-height: 2.05; color: var(--ink); }
  .tw-essay__text .tw-lead { font-size: 16.5px; line-height: 1.95; letter-spacing: .06em; margin-bottom: 18px; }

  /* 罫の行：文字・点線・→ を一行に（「考え方をくわしく」「すべて見る」だけ） */
  .tw-essay .tw-link, .tw-more .tw-link { display: flex; width: 100%; min-height: 56px; gap: 0; margin-top: 28px;
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 16px; letter-spacing: .14em;
    color: var(--accent); }
  .tw-essay .tw-link { border-bottom-color: #bfcfc7; }
  .tw-essay .tw-link::before, .tw-more .tw-link::before { order: 1; flex: 1 1 auto; width: auto; min-width: 18px; height: 3px;
    margin: 0 .8em; border: 0; background: radial-gradient(circle, var(--ink-3) 0 1px, transparent 1.4px) left center / 7px 3px repeat-x;
    opacity: .8; }
  .tw-essay .tw-link::after, .tw-more .tw-link::after { content: "→"; content: "→" / ""; order: 2; font-family: system-ui, sans-serif;
    font-size: 17px; letter-spacing: 0; }

  /* ── ④ 動画講座：一冊目は大きく、二冊目からは小さな図＋文字の行 ── */
  .tw-courses { display: block; }
  .tw-course { position: relative; padding: 22px 0 24px; border-top: 1px solid var(--line); }
  .tw-course:first-child { border-top: 2px solid var(--ink); padding-top: 24px; }
  .tw-course img, .tw-course__glyph { filter: none; }
  /* 一冊目は正方形。16:9 の表紙から 3:2 では左の窓明かり（白飛び）を切りきれないため */
  .tw-course:first-child > img, .tw-course:first-child > .tw-course__glyph { aspect-ratio: 1/1; object-position: 75% 50%; }
  .tw-course:nth-child(n+2) { display: grid; grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; column-gap: 16px; align-items: start; }
  .tw-course:nth-child(n+2) > img, .tw-course:nth-child(n+2) > .tw-course__glyph { grid-row: 1 / span 4; width: 96px;
    aspect-ratio: 3/4; object-position: 62% 50%; }
  /* 「通変星の読み方」の図は右端に筆掛け：硯の右半分と筆三本が入るよう右へ寄せる（並び順が変わっても効くよう画像名で当てる） */
  .tw-course > img[src*="/covers/tsuhensei"] { object-position: 92% 50%; }
  /* 「初章」の図は左に窓明かり：右端まで寄せ、紙の右半分・硯・筆だけを見せる */
  .tw-course > img[src*="/covers/kiso"] { object-position: 100% 50%; }
  .tw-course:nth-child(n+2) > .tw-course__badge, .tw-course:nth-child(n+2) > h3,
  .tw-course:nth-child(n+2) > p { grid-column: 2; }
  .tw-course:nth-child(n+2) .tw-course__foot { grid-column: 1 / -1; grid-row: 5; }
  .tw-course__badge { justify-self: start; display: inline-block; margin: 16px 0 0; padding: 4px 10px; line-height: 1.4;
    border: 1px solid var(--mark); font-size: 13px; letter-spacing: .14em; color: var(--mark-t); }
  .tw-course:nth-child(n+2) .tw-course__badge { margin-top: 0; }
  .tw-course__badge.is-paid { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* 会員限定（無料登録で見られる）は青磁の地に白字で、無料公開（線だけ）と見分ける */
  .tw-course__badge.is-mem { background: var(--mark-t); border-color: var(--mark-t); color: #fff; }
  .tw-course h3 { margin-top: 10px; font-size: 20px; letter-spacing: .06em; line-height: 1.5; }
  .tw-course:nth-child(n+2) h3 { margin-top: 8px; font-size: 18px; }
  .tw-course h3 a::after { content: ""; position: absolute; inset: 0; }
  .tw-course p { margin: 4px 0 0; font-size: 15px; line-height: 1.7; }
  .tw-course__foot { display: flex; align-items: center; margin-top: 12px; padding-top: 0; border-top: 0;
    font-size: 15px; line-height: 1.5; }
  .tw-course__foot b { display: flex; align-items: center; flex: 1 1 auto; font-size: 15px; }
  .tw-course__foot b::after { content: ""; flex: 1 1 auto; min-width: 18px; height: 3px; margin: 0 .7em;
    background: radial-gradient(circle, var(--ink-3) 0 1px, transparent 1.4px) left center / 7px 3px repeat-x; opacity: .8; }
  .tw-course__foot span { color: var(--ink-3); letter-spacing: .08em; }
  /* 行全体が押せることを示す矢印（「すべて見る」と同じ形） */
  .tw-course__foot::after { content: "→"; content: "→" / ""; margin-left: .7em; font-family: system-ui, sans-serif;
    font-size: 17px; line-height: 1; letter-spacing: 0; color: var(--accent); }
  .tw-more { margin-top: 8px; text-align: left; }

  /* ── ⑤ 結び：五冊の原典の帯 → 方印 → 二列の散らし書き → ボタン ── */
  .tw-close { padding: 0 20px 88px; }
  .tw-close::before { content: ""; display: block; margin: 0 -20px; aspect-ratio: 1200 / 403;
    background: #2a2622 url("../img/books-band-m.8279971da007.webp") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  .tw-close img { height: 48px; margin: 22px auto 0; }
  /* 二列の散らし書き「まずは、／ご自身の命式から。」：一字 = 1.2em。列の長さ 11em（9 字 ≦ ＜ 10 字）、
     二列目は 2.2em 下げ、一列目は text-indent で引き上げて下端の浮き 7.8em で 5.4em（4 字 ≦ ＜ 5 字）に削る */
  .tw-close h2 { margin: 30px auto 0; text-align: start; font-size: clamp(24px, 6.8vw, 27px); font-weight: 500;
    letter-spacing: .2em; line-height: 1.8; color: #f2f0e8; height: 13.2em; padding-top: 2.2em; text-indent: -2.2em; }
  .tw-close h2::before { content: ""; float: right; float: inline-end; width: 1em; height: 7.8em; }
  /* 二文を二行に、どちらも中央に：一字 = 1.04em、幅 17.9em（17 字 ≦）。一行目だけ左の字下げ .45em と右の浮き .45em で
     17em（16 字 ≦ ＜ 17 字）に削り、左右同じだけ削るので中央はずれない */
  .tw-close p { width: 17.9em; max-width: 100%; margin: 40px auto 0; text-align: center; text-indent: .45em;
    font-size: 15.5px; line-height: 2; letter-spacing: .04em; font-feature-settings: normal; color: var(--night-ink); }
  .tw-close p::before { content: ""; float: right; width: .45em; height: 1em; }
  .tw-close .btn { margin-top: 32px; }

  /* ── 足（トップのときだけ）：淡い紙の奥付 ── */
  .is-home .site-footer { background: var(--surface-2); color: var(--ink); padding: 64px 0 calc(40px + env(safe-area-inset-bottom));
    font-family: var(--mincho); }
  .is-home .site-footer .wrap { width: calc(100% - 40px); }
  .is-home .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .is-home .footer-logo { height: 28px; margin-bottom: 22px; }
  .is-home .footer-logo--dark { display: none; }
  .is-home .footer-logo--light { display: block; }
  .is-home .footer-grid p { margin: 0; max-width: none !important; font-size: 15px; line-height: 2; color: var(--ink-2); }
  .is-home .footer-grid h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-family: var(--mincho);
    font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--ink-3); }
  .is-home .footer-grid h4::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
  .is-home .footer-grid ul { gap: 0; }
  .is-home .footer-grid a { display: flex; align-items: center; justify-content: space-between; min-height: 48px;
    border-bottom: 1px solid var(--line); font-size: 15.5px; letter-spacing: .08em; color: var(--ink); }
  .is-home .footer-grid a::after { content: ""; width: 7px; height: 7px; margin-right: 6px; flex: none;
    border-top: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); transform: rotate(45deg); }
  .is-home .footer-grid a:hover { color: var(--accent); }
  .is-home .footer-note { margin-top: 36px; padding-top: 0; border-top: 0; font-size: 15px; line-height: 1.95;
    letter-spacing: .04em; color: var(--ink-3); }

  @keyframes tw-breathe { from { transform: scale(1.055); } to { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .tw-hero__frame img { animation: none; }
    .tw-head, .tw-brand img, .tw-brand .tw-latin, .tw-mbtn, .tw-mnav, .tw-head.is-open .tw-mnav, .tw-mcta { transition: none; }
  }
  /* 印刷（A4 は 860px 未満なのでこの块が効く）：藍墨の区画（頭・冒頭・結び）は白い紙に墨の字へ戻す。
     「背景を印刷」を入れても外しても、字が地に沈まないように地も字も揃えて指定する */
  @media print {
    .tw-brand img { filter: none !important; }
    .tw-head, .tw-head.is-open, .tw-hero, .tw-hero__frame, .tw-hero__frame picture, .tw-close {
      background: #fff !important; color: var(--ink) !important; }
    .tw-head { border-bottom-color: var(--line) !important; }
    .tw-brand .tw-latin, .tw-hero__copy h1, .tw-hero__kicker, .tw-hero .tw-link, .tw-close h2, .tw-close p {
      color: var(--ink) !important; }
    .tw-hero .btn, .tw-close .btn, .tw-demo__row.is-hit .tw-demo__tag {
      background: #fff !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; }
    .tw-course__badge.is-paid { background: #fff !important; color: var(--accent) !important; }
    .tw-course__badge.is-mem { background: #fff !important; color: var(--mark-t) !important; }
    .tw-close img { filter: brightness(0); opacity: .85; }  /* 白抜きの方印を墨に */
    .tw-hero__frame picture::before, .tw-hero__frame picture::after, .tw-hero__under > p::after { display: none !important; }
    /* 遅れて読む図が印刷までに来なかったときに、空の枠だけが残らないように */
    .tw-can__media { aspect-ratio: auto; background: none; }
    .tw-can__media img { height: auto; }
  }
}

/* ═══════════════════════════════ 狭い画面（内ページ） */
@media (max-width: 720px) {
  /* 狭い画面では頭を追従させない。命式表の上を三行ぶん塞いでしまうため */
  .site-header { position: static; }
  .site-header__inner { min-height: 0; }
  .nav { gap: .35rem 1rem; }
  .nav a:not(.btn), .nav__link { letter-spacing: .04em; font-size: var(--t-caption); }
  .nav .btn { letter-spacing: .08em; }
  .section__head { padding-bottom: .9rem; }
}

@media print {
  .tw-edge, .tw-mcta, .tw-mbtn { display: none !important; }
  .tw-hero__frame img { animation: none !important; }
  body { background: #fff; }
  .meishiki { border-color: #ccc; }
}

/* ═══════════════════════════════════════════════════════════════
   2026-10-02 品質調整（字の大きさ・押せる広さ・焦点・平板幅・動き）
   ═══════════════════════════════════════════════════════════════ */

/* 小さな札・注記の下限を 12px に（11px は 50〜60 代には読みにくい） */
:root { --t-micro: .75rem; --ease-out: cubic-bezier(.2,.7,.2,1); }

/* 日柱の帯：金（#85661a）の字が 4.5:1 を下回らないよう、地を一段だけ明るく。帯であることは残す */
.mtable td.is-day { background: #efede5; }

/* 命式の図：柱名と干支だけの版（880×771）に合わせる。電脳でも手機と同じ図を使う */
.tw-can__media { aspect-ratio: 880/771; }
.tw-can__media img { filter: none; }

/* ── 押せる広さ（44px 以上） ── */
.btn--sm { min-height: 44px; }
.nav a:not(.btn), .nav__link { min-height: 44px; display: inline-flex; align-items: center; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-grid ul { gap: 0; }
details.fold > summary, details.advanced > summary { min-height: 44px; }
.check { min-height: 44px; align-items: center; }
.tw-link { min-height: 44px; }
.tw-acct a, .tw-acct button { display: inline-flex; align-items: center; min-height: 44px; }
.tw-acct { gap: 0; top: 24px; }

/* ── 焦点（キーボード操作）：藍墨の地では淡い色で、ラジオ・チェックは札ごと囲む ── */
.site-footer :focus-visible, .tw-close :focus-visible { outline-color: var(--night-ink); }
.radio-row label:has(input:focus-visible), .check:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 平板・小さめのノート（721〜1180px）：内ページの頭のナビがはみ出さないよう二段に組む ── */
@media (min-width: 721px) and (max-width: 1180px) {
  .site-header__inner { flex-wrap: wrap; gap: 0 1.4rem; min-height: 0; padding: .55rem 0 .35rem; }
  .nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 0 1.5rem; }
  .nav a:not(.btn), .nav__link { letter-spacing: .1em; }
  .nav__sep { display: none; }
  .nav .btn { margin-left: auto; }
}

/* ── 電脳（861px 以上）：本文 16px 以上、足の文字も一段大きく ── */
@media (min-width: 861px) {
  .tw-hero__under p, .tw-can p, .tw-essay__text p, .tw-demo__cap, .tw-demo__note, .tw-close p { font-size: 16px; }
  .tw-course p { font-size: 15px; }
  .tw-course__foot { font-size: 14px; }
  .footer-grid p.tiny { font-size: 15px; line-height: 1.95; }
  .footer-note { font-size: 14px; }
  .lesson-item__desc { font-size: 14px; }
}

/* ── 動き：ゆっくり、短い距離、opacity と transform だけ（配置は動かさないので CLS は出ない） ── */
/* site.js が html に .rv-on を付けたときだけ働く（JS なし・動きを減らす設定では何も起きない） */
.rv-on .rv { opacity: 0; transform: translateY(16px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv-on .rv.is-in { opacity: 1; transform: none; }

/* 押したときの手応え：ボタンは色だけでなく、わずかに沈む */
.btn { transition: background-color .25s, border-color .25s, color .25s, transform .12s; }
.btn:active { transform: translateY(1px); }
/* 講座の表紙：重ねたときにゆっくり寄る（枠で切るので周りは動かない） */
.course-card__cover img { transition: transform 1.2s var(--ease-out); }
.course-card:hover .course-card__cover img { transform: scale(1.04); }
.tw-course { overflow: hidden; }
.tw-course img { transition: transform 1.2s var(--ease-out), filter .6s; }
@media (hover: hover) {
  .tw-course:hover img { transform: scale(1.03); }
}
/* 本文中のリンク：下線の位置を少し離して、重ねたら濃く */
.prose a, .note a { text-underline-offset: .28em; text-decoration-color: rgba(31,61,99,.4);
  transition: text-decoration-color .25s, color .25s; }
.prose a:hover, .note a:hover { text-decoration-color: currentColor; }

/* 電脳トップの冒頭：写真がゆっくり落ち着き、縦の一句が墨のにじみのように現れる */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .tw-hero__frame img { animation: tw-settle 2.8s var(--ease-out) both; }
  .tw-hero__copy h1 { animation: tw-ink 1.8s .35s var(--ease-out) both; }
  .tw-hero__kicker { animation: tw-ink 1.4s .1s var(--ease-out) both; }
  @keyframes tw-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
  @keyframes tw-ink { from { opacity: 0; filter: blur(6px); letter-spacing: .32em; } to { opacity: 1; filter: blur(0); } }
}

/* ── 動きを減らす設定：すべての遷移・動きを止める ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .rv-on .rv { opacity: 1 !important; transform: none !important; }
}

/* 蔵干の «本気・中気・余気» が狭い画面で «本／気» と割れないよう、語のまとまりで折り返す */
.hide-list .hg, .hide-list .role { white-space: nowrap; }
/* 狭い手機（420px 以下）：命式表の右端の列が枠で切れないよう、行見出しを細くし、蔵干の小字の字間を詰める */
@media (max-width: 420px) {
  .mtable th.rowhead { width: 3.1rem; padding-right: .3rem; }
  .mtable .hide-list { font-size: 12px; letter-spacing: 0; }
  .mtable .hide-list b { font-size: 15px; }
  .mtable .stars { letter-spacing: 0; }
}

/* ═══════════════════════════════ このサイトについて：三才堂をつくった人（金田茂樹） */
.story { margin: var(--s7) 0 0; }
.story__head { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: end; }
.story__portrait { margin: 0; overflow: hidden; background: var(--surface-2); }
.story__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 30%; }
.story__kicker { margin: 0 0 14px; font-family: var(--mincho); font-size: 13px; letter-spacing: .3em; color: var(--mark); }
.story__title { margin: 0 0 28px; font-family: var(--mincho); font-weight: 600; font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: .14em; line-height: 1.5; }
.story__name { margin: 0 0 10px; font-family: var(--mincho); font-size: 22px; letter-spacing: .3em; color: var(--ink); }
.story__roles { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0;
  font-family: var(--mincho); font-size: 14px; letter-spacing: .1em; color: var(--ink-2); }
.story__roles li + li::before { content: "／"; margin: 0 .5em; color: var(--line); }
.story__role-note { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); line-height: 1.9; }

.story__body { max-width: 860px; margin: clamp(56px, 8vw, 104px) auto 0; }
.story__lead { margin: 0 0 clamp(48px, 7vw, 88px); font-family: var(--mincho); font-size: clamp(18px, 1.7vw, 21px);
  line-height: 2.1; letter-spacing: .08em; color: var(--ink); }
.story__ch { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 clamp(20px, 4vw, 48px);
  padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.story__when { margin: .3em 0 0; font-family: var(--mincho); font-size: 13px; letter-spacing: .24em; color: var(--mark); }
.story__text h3 { margin: 0 0 18px; font-family: var(--mincho); font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; letter-spacing: .14em; }
.story__text p { margin: 0 0 1.2em; font-size: 16px; line-height: 2.05; color: var(--ink-2); }
.story__text p:last-child { margin-bottom: 0; }
.story__figure { margin: 28px 0 32px; overflow: hidden; }
.story__figure img { display: block; width: 100%; height: auto; }
.story__quote { margin: 28px 0 0 !important; padding: 6px 0 6px 22px; border-left: 2px solid var(--mark);
  font-family: var(--mincho); font-size: clamp(19px, 1.8vw, 23px) !important; line-height: 1.9 !important;
  letter-spacing: .12em; color: var(--ink) !important; }
.story__ch--build { background: var(--surface); border-top: 0; padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px);
  margin-top: 8px; box-shadow: inset 0 1px 0 var(--line); }
.story__end { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.story__end-photo { margin: 0; overflow: hidden; }
.story__end-photo img { display: block; width: 100%; height: auto; }
.story__end-text p { margin: 0 0 1em; font-family: var(--mincho); font-size: 17px; line-height: 2; color: var(--ink); }
.story__sign { margin-top: 1.6em !important; font-size: 20px !important; letter-spacing: .3em; }
.story__sign small { display: block; margin-top: 6px; font-size: 13px; letter-spacing: .2em; color: var(--ink-3); }
.story__divider { margin: clamp(72px, 10vw, 128px) 0 var(--s6); overflow: hidden; }

@media (max-width: 860px) {
  .story { margin-top: var(--s5); }
  .story__head { grid-template-columns: 1fr; gap: 24px; }
  .story__portrait { margin: 0 calc(-1 * (100vw - 100%) / 2); }
  .story__title { font-size: 28px; margin-bottom: 20px; }
  .story__body { margin-top: 48px; }
  .story__lead { font-size: 17px; line-height: 2; }
  .story__ch { grid-template-columns: 1fr; padding: 36px 0; }
  .story__when { margin: 0 0 8px; }
  .story__text p { font-size: 15.5px; line-height: 2; }
  .story__ch--build { margin-left: calc(-1 * (100vw - 100%) / 2); margin-right: calc(-1 * (100vw - 100%) / 2);
    padding-left: max(20px, calc((100vw - 100%) / 2)); padding-right: max(20px, calc((100vw - 100%) / 2)); }
  .story__end { grid-template-columns: 1fr; }
  .story__end .row .btn { flex: 1 1 auto; }
}

/* トップの講座：本数に合わせて列を決める（2 本のときに 3 列目が空かないように） */
@media (min-width: 861px) {
  .tw-courses { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   トップの冒頭：三才堂をつくった本人（金田茂樹）の写真と話（2026-10-05）
   写真は static/img/hero-kaneda.webp（電脳）・hero-kaneda-m.webp（手機）。
   本人の肌色を変えないよう、冒頭の写真には色の加工をかけない。
   ═══════════════════════════════════════════════════════════════ */
.tw-hero--founder .tw-hero__frame img { filter: none; object-position: 50% 22%; }

/* つくった人の話（電脳：写真の下、本人の側＝左に置く） */
.tw-founder .tw-founder__kicker { margin: 0; font-family: var(--mincho); font-size: 13px; letter-spacing: .3em; color: #33695b; }
.tw-founder .tw-founder__name { margin: 10px 0 4px; font-family: var(--mincho); font-size: 24px; font-weight: 600;
  letter-spacing: .3em; line-height: 1.5; color: var(--ink); max-width: none; }
.tw-founder .tw-founder__roles { margin: 0; font-family: var(--mincho); font-size: 13px; letter-spacing: .1em; color: var(--ink-3); max-width: none; }
.tw-founder .tw-founder__text { margin: 18px 0 0; max-width: 31em; font-size: 16px; line-height: 2; color: var(--ink-2); }
.tw-founder .tw-founder__motto { margin: 20px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--mark);
  font-family: var(--mincho); font-size: 19px; line-height: 1.85; letter-spacing: .1em; color: var(--ink); max-width: none; }
.tw-founder .tw-founder__link { margin-top: 18px; }

@media (min-width: 861px) {
  /* 本人は左、縦書きの一句は右の藍色の余白に。視線が一句のほうへ向く */
  .tw-hero--founder .tw-hero__frame::after {
    background: linear-gradient(270deg, rgba(14,32,59,.35) 0%, rgba(14,32,59,0) 42%); }
  .tw-hero--founder .tw-hero__copy { left: auto; right: 8%; top: 11%; }
  .tw-hero--founder .tw-hero__under {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "founder lead" "founder cta";
    grid-template-rows: auto 1fr;  /* 右列は詰めて上から並べる（左の話の高さで間延びさせない） */
    align-items: start; gap: 28px clamp(40px, 6vw, 88px); padding-top: 64px; }
  .tw-hero--founder .tw-founder { grid-area: founder; }
  .tw-hero--founder .tw-hero__under > p { grid-area: lead; }
  .tw-hero--founder .tw-cta { grid-area: cta; flex-wrap: wrap; row-gap: 12px; }
}

@media (max-width: 860px) {
  .tw-hero--founder .tw-hero__frame picture { background: var(--night); }
  .tw-hero--founder .tw-hero__frame img { object-position: 50% 28%; }
  /* つくった人の話：命式を出すのすぐ下、藍墨の帯の中 */
  .tw-hero--founder .tw-founder { order: 2; padding: 0 20px 64px; color: var(--night-ink); }
  .tw-hero--founder .tw-hero__under > p { order: 3; }
  .tw-founder::before { content: ""; display: block; height: 1px; margin-bottom: 30px; background: rgba(216,224,226,.2); }
  .tw-founder .tw-founder__kicker { color: var(--night-ink-2); }
  .tw-founder .tw-founder__name { font-size: 22px; color: #f2f0e8; }
  .tw-founder .tw-founder__roles { color: var(--night-ink-2); }
  .tw-founder .tw-founder__text { font-size: 15.5px; color: var(--night-ink); }
  .tw-founder .tw-founder__motto { font-size: 18px; color: #f2f0e8; border-left-color: var(--night-ink-2); }
}
@media (max-width: 860px) and (max-height: 700px) {
  /* 背の低い画面でも顔が切れないように（書頁の写真のときの下寄せを打ち消す） */
  .tw-hero--founder .tw-hero__frame img { object-position: 50% 24%; }
}

/* ═══════════════════════════════ ご相談の窓口（LINE の無料 AI 鑑定レポート／ココナラの有料鑑定）2026-10-05 */
.tw-consult { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.tw-consult__col { border-top: 1px solid var(--ink); padding-top: 24px; }
.tw-consult__kicker { margin: 0 0 12px; font-family: var(--mincho); font-size: 13px; letter-spacing: .24em; color: #33695b; }
.tw-consult__col h3 { margin: 0 0 16px; font-family: var(--mincho); font-size: clamp(19px, 1.8vw, 23px); font-weight: 600;
  letter-spacing: .1em; line-height: 1.6; color: var(--ink); }
.tw-consult__col > p:not(.tw-consult__kicker) { margin: 0 0 24px; font-family: var(--mincho); font-size: 16px;
  line-height: 2; color: var(--ink-2); }

/* ココナラの商品行：題 ……… 価格 → （行全体が押せる） */
.consult-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.consult-list li { border-bottom: 1px solid var(--line); }
.consult-list a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 2px;
  text-decoration: none; color: var(--ink); font-family: var(--mincho); }
.consult-list__title { font-size: 16px; letter-spacing: .04em; line-height: 1.6; word-break: auto-phrase; text-wrap: pretty; }
.consult-list__dots { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted var(--ink-3); transform: translateY(-4px); }
.consult-list__price { flex: none; font-size: 16px; letter-spacing: .04em; color: var(--accent); white-space: nowrap; }
.consult-list a::after { content: "→"; flex: none; color: var(--accent); transition: transform .25s; }
.consult-list a:hover .consult-list__title { color: var(--accent); }
.consult-list a:hover::after { transform: translateX(4px); }
.consult-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-3); }

@media (max-width: 860px) {
  .tw-consult { grid-template-columns: 1fr; gap: 56px; }
  .tw-consult__col .btn { width: 100%; justify-content: center; min-height: 52px; }
  .consult-list__title { font-size: 15.5px; }
}

/* ═══════════════════════════════ 鑑定書の商品ページ（/kantei/）2026-10-05 */
.kantei__crumb { margin: 0 0 var(--s5); color: var(--ink-3); }
.kantei__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.kantei__figure { margin: 0; }
.kantei__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.kantei__figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.kantei__name { margin: 0 0 14px; font-family: var(--mincho); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: .12em; }
.kantei__catch { margin: 0 0 22px; font-family: var(--mincho); font-size: 18px; line-height: 1.8; color: var(--ink); }
.kantei__price { margin: 0 0 18px; font-family: var(--mincho); font-size: 30px; font-weight: 600; letter-spacing: .04em; color: var(--accent); }
.kantei__price--sm { font-size: 20px; margin: 0 0 14px; }
.kantei__specs { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kantei__specs li { border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; font-size: 14px; color: var(--ink-2); }
.kantei__btn { min-width: 220px; }
.kantei__via { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.kantei__body { max-width: 44em; margin: clamp(48px, 7vw, 80px) 0 0; }
.kantei__sec { padding: 22px 0; border-top: 1px solid var(--line); }
.kantei__sec:first-child { border-top: 0; padding-top: 0; }
.kantei__sec h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 18px; }
.kantei__sec p { margin: 0 0 .5em; font-size: 16px; line-height: 1.95; }
.kantei__link a { text-decoration: underline; }
.kantei__again { margin-top: 28px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.kantei__others { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; }
.kantei__other { display: flex; gap: 16px; align-items: baseline; padding: 14px 18px; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-family: var(--mincho); }
.kantei__other:hover { border-color: var(--accent); color: var(--accent); }
.kantei__other-price { color: var(--accent); }
.kantei__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 48px); }
.kantei__card-img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.kantei__card-name { margin: 18px 0 8px; font-size: 22px; letter-spacing: .1em; }
.kantei__card-name a { text-decoration: none; color: inherit; }
.kantei__card-catch { margin: 0 0 12px; font-family: var(--mincho); font-size: 16px; color: var(--ink-2); }
@media (max-width: 860px) {
  .kantei__top { grid-template-columns: 1fr; }
  .kantei__btn { width: 100%; }
  .kantei__price { font-size: 26px; }
}

/* 足：«公式SNS» 列を足して 4 列（2026-10-08）。981px 以上だけ。以下は site.css の 2 列→1 列のまま */
@media (min-width: 981px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ══════════════ 金運の目安（命式表の下・2026-10-09） ══════════════ */
.kinun__lead { margin: -.4rem 0 1rem; }
.kinun__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.kinun__year, .kinun__yun { background: var(--surface); border: 1px solid var(--line); padding: 1.1rem 1.2rem; }
.kinun__h { font-family: var(--mincho); font-weight: 600; font-size: var(--t-body); letter-spacing: .08em; margin: 0 0 .7rem; }
.kinun__tone { font-family: var(--mincho); font-size: 1.06em; line-height: 1.8; margin: 0 0 .8rem; }
.kinun__dl { margin: 0; display: grid; gap: .55rem; }
.kinun__dl dt { font-size: var(--t-caption); color: var(--mark); letter-spacing: .08em; }
.kinun__dl dd { margin: .1rem 0 0; line-height: 1.7; }
.kinun__rows { list-style: none; margin: 0; padding: 0; }
.kinun__row { display: grid; grid-template-columns: 7.2rem auto minmax(0, 1fr); align-items: center; gap: .8rem;
  padding: .5rem .4rem; border-bottom: 1px solid var(--line-2); }
.kinun__row:last-child { border-bottom: 0; }
.kinun__row.is-now { background: var(--accent-bg); }
.kinun__age { font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.kinun__age small { display: block; font-size: var(--t-caption); color: var(--ink-3); }
.kinun__dots { display: inline-flex; gap: 3px; }
.kinun__dots i { width: 9px; height: 9px; border: 1px solid var(--accent); display: inline-block; }
.kinun__dots i.on { background: var(--accent); }
.kinun__label { line-height: 1.5; }
.kinun__now { font-style: normal; font-size: var(--t-caption); color: #fff; background: var(--accent);
  padding: .05rem .45rem; margin-left: .5rem; letter-spacing: .1em; white-space: nowrap; }
.kinun__note { font-size: var(--t-caption); line-height: 1.8; }
.kinun__cta { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.kinun__cta p { margin: 0 0 .8rem; }
@media (max-width: 760px) {
  .kinun__grid { grid-template-columns: 1fr; }
  .kinun__year, .kinun__yun { padding: 1rem .9rem; }
  .kinun__row { grid-template-columns: 6.4rem auto minmax(0, 1fr); gap: .6rem; padding: .5rem .2rem; }
  .kinun__cta .row { flex-wrap: wrap; }
  .kinun__cta .btn { flex: 1 1 100%; text-align: center; }
}
@media print { .kinun__row.is-now { background: none; } }

/* ══════════════ AI に読ませる命式データ（JSON のコピー・2026-10-13） ══════════════ */
.ai-data { background: var(--surface); border: 1px solid var(--line); padding: 1.2rem 1.3rem; }
.ai-data .block__head { margin-bottom: .6rem; }
.ai-data__lead { line-height: 1.8; margin: 0 0 1rem; }
.ai-data__row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.ai-data__row .btn.is-done { background: var(--mark); border-color: var(--mark); }
.ai-data__status { color: var(--mark); line-height: 1.6; }
.ai-data__eg { margin: .9rem 0 0; line-height: 1.8; }
.ai-data__raw { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.ai-data__raw summary { cursor: pointer; font-size: var(--t-caption); color: var(--deep); letter-spacing: .06em; }
.ai-data__pre { margin: .7rem 0 0; max-height: 22rem; overflow: auto; background: var(--bg); border: 1px solid var(--line);
  padding: .8rem 1rem; font-size: .78rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.ai-data__note { margin: .9rem 0 0; line-height: 1.8; }
@media (max-width: 760px) {
  .ai-data { padding: 1rem .9rem; }
  .ai-data__row .btn { flex: 1 1 100%; text-align: center; }
}

/* ══════════════ 結果画面・手機の分栏（2026-10-09） ══════════════
   区画は data-rt で振り分け、static/js/result_tabs.js が <html> に .rt-on と data-rt-active を付ける。
   .rt-on が無いとき（JS なし・印刷・幅 761px 以上）は分栏・常駐の入口は出さず、全部を縦に並べる。 */
.rt-tabs, .rt-dock, .rt-next { display: none; }
@media screen and (max-width: 760px) {
  /* 左右は本文の余白ぶんだけはみ出させて画面の端まで（余白は画面幅で変わるので 100vw から逆算。-16px 固定だと 390px で 2px 横にはみ出した） */
  .rt-on .rt-tabs { display: flex; position: sticky; top: 0; z-index: 40; margin: 0 calc((100% - 100vw) / 2) 1.2rem;
    background: rgba(242,240,232,.97); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .rt-on .rt-tabs.is-stuck { box-shadow: 0 6px 14px -12px rgba(23,40,63,.45); }
  .rt-tabs button { flex: 1 1 0; appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer;
    padding: .85rem 0 .75rem; position: relative; font-family: var(--mincho); font-size: .9375rem;
    letter-spacing: .06em; color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
  .rt-tabs button[aria-selected="true"] { color: var(--accent); font-weight: 600; }
  .rt-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px;
    height: 2px; background: var(--accent); }
  .rt-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

  /* 選ばれていない栏の区画を隠す */
  html.rt-on[data-rt-active="meishiki"] [data-rt]:not([data-rt="meishiki"]),
  html.rt-on[data-rt-active="kinun"] [data-rt]:not([data-rt="kinun"]),
  html.rt-on[data-rt-active="unsei"] [data-rt]:not([data-rt="unsei"]),
  html.rt-on[data-rt-active="kata"] [data-rt]:not([data-rt="kata"]),
  html.rt-on[data-rt-active="more"] [data-rt]:not([data-rt="more"]) { display: none !important; }
  html.rt-on [data-rt] { animation: rt-in .22s ease-out; }
  @keyframes rt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* 先頭に来た区画の上の余白をそろえる */
  html.rt-on[data-rt-active="kinun"] #kinun,
  html.rt-on[data-rt-active="unsei"] #unsei { margin-top: 0 !important; }

  .rt-on .rt-next { display: flex; justify-content: flex-end; margin: 1.6rem 0 .4rem; }
  .rt-next button { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent;
    border: 1px solid var(--accent); color: var(--accent); padding: .7rem 1.1rem;
    font-family: var(--mincho); font-size: .9375rem; letter-spacing: .1em; }

  /* 相談の入口を画面の下に常駐させる */
  .rt-on .rt-dock { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 45; padding: .55rem 12px calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(250,249,244,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 18px -16px rgba(23,40,63,.5); }
  .rt-dock a { display: flex; align-items: center; justify-content: center; min-height: 46px; text-decoration: none;
    font-family: var(--mincho); font-size: .9375rem; letter-spacing: .08em; border: 1px solid var(--accent); }
  .rt-dock a.rt-dock__line { background: var(--accent); color: #fff; }
  .rt-dock a.rt-dock__coco { background: transparent; color: var(--accent); }
  html.rt-on body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media print { .rt-tabs, .rt-dock, .rt-next { display: none !important; } }

/* ══════════════ 鑑定師・青禾（2026-10-10）══════════════
   結果画面の «金運の目安» の下に出す入口カードと、/kanteishi/ の紹介ページ。 */
.kanteishi-card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.kanteishi-card__photo { margin: 0; }
.kanteishi-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: var(--surface-2); }
.kanteishi-card__photo figcaption { margin-top: .35rem; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.kanteishi-card__kicker { margin: .2rem 0 .5rem !important; font-family: var(--mincho); font-size: 12px; letter-spacing: .28em; color: var(--mark); }
.kanteishi-card__title { margin: 0 0 1rem; font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: .1em; line-height: 1.5; }
.kanteishi-card__name { margin: 0 0 .3rem !important; font-family: var(--mincho); font-size: 20px; letter-spacing: .3em; color: var(--ink); }
.kanteishi-card__name small { margin-left: .8em; font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.kanteishi-card__fit { margin: 0 0 .9rem !important; padding-bottom: .9rem; border-bottom: 1px solid var(--line); color: var(--mark); font-family: var(--mincho); letter-spacing: .04em; }
.kanteishi-card__trust { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.kanteishi-card__trust li { font-size: var(--t-caption); padding: .2rem .6rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.kanteishi-card__more { display: inline-block; margin-top: 1rem; font-size: var(--t-caption); letter-spacing: .08em; }
@media (max-width: 760px) {
  .kanteishi-card { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
  .kanteishi-card__body .row, .kanteishi-card__body > p:not(.kanteishi-card__kicker):not(.kanteishi-card__name):not(.kanteishi-card__fit),
  .kanteishi-card__trust, .kanteishi-card__more { grid-column: 1 / -1; }
  .kanteishi-card__body { display: contents; }
  /* 手機：見出し二行を全幅 → 写真と名前を横並び → 本文・ボタンを全幅 */
  .kanteishi-card__kicker { order: 1; grid-column: 1 / -1; margin-bottom: 0 !important; }
  .kanteishi-card__title { order: 2; grid-column: 1 / -1; margin-bottom: .2rem; }
  .kanteishi-card__photo { order: 3; grid-column: 1; grid-row: span 2; }
  .kanteishi-card__name { order: 4; grid-column: 2; align-self: end; }
  .kanteishi-card__fit { order: 5; grid-column: 2; align-self: start; border-bottom: 0; padding-bottom: 0; }
  .kanteishi-card__body > p:not(.kanteishi-card__kicker):not(.kanteishi-card__name):not(.kanteishi-card__fit),
  .kanteishi-card__trust, .kanteishi-card__body .row, .kanteishi-card__more { order: 6; }
  .kanteishi-card__name small { display: block; margin: .2rem 0 0; }
}

.ks-head { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; max-width: 960px; margin-left: auto; margin-right: auto; }
.ks-portrait { background: none; overflow: visible; }
.ks-portrait img { aspect-ratio: 4/5; object-position: 50% 30%; }
.ks-portrait figcaption { margin-top: .4rem; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.ks-head .story__name small { display: inline-block; margin-left: 1em; font-size: 13px; letter-spacing: .14em; color: var(--ink-3); }
.ks-cares { list-style: none; margin: 0; padding: 0; counter-reset: ks; display: grid; gap: 1.1rem; }
.ks-cares li { position: relative; padding-left: 2.6rem; font-size: 16px; line-height: 2; color: var(--ink-2); counter-increment: ks; }
.ks-cares li::before { content: counter(ks, cjk-ideographic); position: absolute; left: 0; top: 0; font-family: var(--mincho); color: var(--mark); font-size: 18px; }
.ks-cares strong { display: block; font-family: var(--mincho); color: var(--ink); letter-spacing: .08em; }
.ks-from { margin-top: clamp(40px, 6vw, 64px); padding: clamp(22px, 3vw, 32px); background: var(--surface); border-left: 2px solid var(--mark); }
.ks-from p { margin: 0; font-family: var(--mincho); font-size: 18px; line-height: 2; color: var(--ink); }
.ks-from small { display: block; margin-top: .6rem; font-size: 13px; letter-spacing: .2em; color: var(--ink-3); }
@media (max-width: 760px) {
  .ks-head { grid-template-columns: 1fr; }
  .ks-portrait { margin: 0 auto !important; width: 72%; }
}

/* ============================================================
   コラム（/column/）2026-10-12
   本文は読みものとして：明朝の見出し・行間 2・一行 38 字前後。動画は表紙＋再生ボタン。
   ============================================================ */
.col-wrap { width: min(760px, calc(100% - 2.5rem)); margin: 0 auto; }
.col-wrap--wide { width: min(1080px, calc(100% - 2.5rem)); }
.col-article { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 96px); }
.col-preview { margin: 0 0 1.2rem; padding: .7rem 1rem; background: var(--accent-bg); color: var(--accent-ink); font-size: var(--t-caption); }
.col-crumb { display: flex; gap: .6em; align-items: center; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.col-crumb a { color: var(--ink-3); text-decoration: none; }
.col-crumb a:hover { color: var(--accent); }
.col-head { margin: clamp(22px, 3vw, 36px) 0 clamp(24px, 3vw, 36px); }
.col-kicker { margin: 0 0 .9rem; font-family: var(--mincho); font-size: 13px; letter-spacing: .3em; color: var(--mark); }
.col-kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: .8em; vertical-align: middle; background: var(--mark); }
.col-title { font-family: var(--mincho); font-size: clamp(25px, 3.4vw, 36px); font-weight: 600; line-height: 1.55; letter-spacing: .06em; color: var(--ink); }
.col-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 1.1rem 0 0; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); }
.col-meta a { color: var(--deep); }

.col-video { margin: 0 0 clamp(28px, 4vw, 44px); }
.col-video__poster, .col-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--night); border: 0; }
.col-video__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-video__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(23, 40, 63, .86); box-shadow: 0 0 0 6px rgba(250, 249, 244, .35); transition: transform .2s ease, background .2s ease; }
.col-video__play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #faf9f4; }
.col-video__poster:hover .col-video__play, .col-video__poster:focus-visible .col-video__play { transform: scale(1.06); background: var(--accent); }
.col-video__len { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; background: rgba(23, 40, 63, .86); color: #faf9f4; font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.col-video figcaption { margin-top: .7rem; font-size: 13px; letter-spacing: .04em; color: var(--ink-3); }

.col-toc { margin: 0 0 clamp(32px, 4vw, 48px); padding: 1.2rem 1.4rem 1.1rem; background: var(--surface); border-top: 2px solid var(--mark); }
.col-toc__t { margin: 0 0 .5rem; font-family: var(--mincho); font-size: 14px; letter-spacing: .24em; color: var(--ink); }
.col-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: .25rem; }
.col-toc li { font-size: 14.5px; line-height: 1.75; color: var(--ink-3); }
.col-toc a { color: var(--ink-2); text-decoration: none; }
.col-toc a:hover { color: var(--accent); text-decoration: underline; }

.col-body { font-size: 16.5px; line-height: 2.05; color: var(--ink-2); }
.col-body > * + * { margin-top: 1.25em; }
.col-body p { margin-bottom: 0; }
.col-body p + p { margin-top: 1.1em; }
.col-body h2 { margin: 2.6em 0 0; padding: 0 0 .55em; font-family: var(--mincho); font-size: clamp(20px, 2.3vw, 24px); font-weight: 600; line-height: 1.6; letter-spacing: .08em; color: var(--ink);
  border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.col-body h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 .7em .2em 0; background: var(--mark); vertical-align: middle; }
.col-body h2 + * { margin-top: 1.1em; }
.col-body h3 { margin: 2em 0 0; font-family: var(--mincho); font-size: 18px; font-weight: 600; line-height: 1.7; letter-spacing: .06em; color: var(--ink); }
.col-body h3 + p { margin-top: .6em; }
.col-body .col-table + p, .col-body blockquote + p { margin-top: 1.4em; }
.col-body strong { color: var(--ink); font-weight: 700; }
.col-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }
.col-body a { color: var(--deep); text-underline-offset: 3px; }
.col-body ul, .col-body ol { margin: 1.1em 0 0; padding-left: 1.4em; }
.col-body li + li { margin-top: .7em; }
.col-body blockquote { margin: 1.4em 0 0; padding: 1rem 1.3rem; background: var(--surface); border-left: 2px solid var(--mark); font-family: var(--mincho); color: var(--ink); line-height: 2; }
.col-body blockquote p { margin: 0; }
.col-table { margin-top: 1.3em; overflow-x: auto; }
.col-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.col-body th, .col-body td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.col-body thead th { font-family: var(--mincho); font-weight: 600; letter-spacing: .08em; color: var(--ink); border-bottom: 1px solid var(--ink-3); background: var(--surface); }
.col-body td:last-child { white-space: nowrap; font-family: var(--mincho); color: var(--ink); }

.col-cta { margin: clamp(48px, 6vw, 72px) 0 0; padding: clamp(26px, 4vw, 40px); background: var(--night); color: var(--night-ink); }
.col-cta__t { margin: 0; font-family: var(--mincho); font-size: clamp(19px, 2.2vw, 23px); letter-spacing: .1em; color: #faf9f4; }
.col-cta__d { margin: .8rem 0 0; font-size: 14.5px; line-height: 1.95; color: var(--night-ink-2); }
.col-cta__row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.col-cta .btn { background: #faf9f4; border-color: #faf9f4; color: var(--night); }
.col-cta .btn:hover { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); }
.col-cta .btn--ghost { background: transparent; border-color: var(--night-ink-2); color: #faf9f4; }
.col-cta .btn--ghost:hover { background: rgba(250, 249, 244, .08); color: #faf9f4; }
.col-cta__more { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 1.3rem 0 0; }
.col-cta .tw-link { color: var(--night-ink); }

.col-more { margin-top: clamp(48px, 6vw, 72px); }
.col-more__t { margin: 0 0 1.2rem; font-family: var(--mincho); font-size: 18px; letter-spacing: .16em; }
.col-back { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }

/* 一覧 */
.col-index { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }
.col-index__head { margin-bottom: clamp(32px, 5vw, 56px); }
.col-index__title { font-family: var(--mincho); font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; letter-spacing: .3em; color: var(--ink); }
.col-index__lead { max-width: 40em; margin: 1.2rem 0 0; font-size: 15.5px; line-height: 2; color: var(--ink-2); }
.col-index__note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.col-empty { padding: 3rem 0; color: var(--ink-3); }
.col-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 44px); align-items: center; color: inherit; text-decoration: none;
  padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.col-feature__img, .col-card__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.col-feature__img img, .col-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.col-feature:hover .col-feature__img img, .col-card a:hover .col-card__img img { transform: scale(1.025); }
.col-feature__body, .col-card__body { display: flex; flex-direction: column; gap: .55rem; }
.col-feature__new { align-self: flex-start; padding: 1px 10px; border: 1px solid var(--mark); color: var(--mark); font-size: 11px; letter-spacing: .24em; }
.col-feature__title { font-family: var(--mincho); font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; line-height: 1.6; letter-spacing: .05em; color: var(--ink); }
.col-feature:hover .col-feature__title, .col-card a:hover .col-card__title { color: var(--accent); }
.col-card__cat { font-family: var(--mincho); font-size: 12px; letter-spacing: .24em; color: var(--mark); }
.col-card__title { font-family: var(--mincho); font-size: 17px; font-weight: 600; line-height: 1.65; letter-spacing: .04em; color: var(--ink); }
.col-card__desc { font-size: 14px; line-height: 1.9; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-card__date { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.col-card__vid { position: absolute; left: 0; bottom: 0; padding: 3px 10px; background: rgba(23, 40, 63, .88); color: #faf9f4; font-size: 11.5px; letter-spacing: .12em; }
.col-cards { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(28px, 3.4vw, 40px) clamp(20px, 2.6vw, 32px); }
.col-cards--sm { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.col-card a { display: flex; flex-direction: column; gap: .9rem; color: inherit; text-decoration: none; }

@media (max-width: 760px) {
  .col-wrap, .col-wrap--wide { width: calc(100% - 2.4rem); }
  .col-title { font-size: 23px; line-height: 1.6; letter-spacing: .03em; }
  .col-body { font-size: 16px; line-height: 2; }
  .col-body h2 { font-size: 19px; letter-spacing: .04em; }
  .col-video { margin-left: -1.2rem; margin-right: -1.2rem; }
  .col-video figcaption { padding: 0 1.2rem; }
  .col-video__play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .col-video__play::after { left: 25px; top: 19px; border-width: 12px 0 12px 19px; }
  .col-toc { padding: 1rem 1.1rem; }
  .col-cta { margin-left: -1.2rem; margin-right: -1.2rem; }
  .col-cta__row .btn { flex: 1 1 100%; text-align: center; }
  .col-feature { grid-template-columns: 1fr; }
  .col-index__title { letter-spacing: .2em; }
  .col-index__lead br { display: none; }
}
/* 頭のメニューに «コラム» を足したぶん、項目の間を少し詰める（無料登録のボタンが縦に潰れないように） */
@media (min-width: 861px) {
  .nav { gap: 1.15rem; }
  .nav .btn { white-space: nowrap; flex: none; }
}
/* 会員でログイン中は «保存した命式・マイページ・ログアウト» の三つが並ぶ。一行に収まらない幅では字間を詰め、副題を外す（横にはみ出さないように） */
@media (min-width: 1181px) and (max-width: 1560px) {
  .site-header.is-member .nav { gap: .85rem; }
  .site-header.is-member .nav a:not(.btn), .site-header.is-member .nav__link { letter-spacing: .07em; }
  .site-header.is-member .brand__tag { display: none; }
}