/* よろずごよみ
   レイアウト: 藍の帯(青海波)のヘッダー、和紙色の本文、版ずれ影の札。本文+サイドバー(広告)の2段組 */
:root {
  --paper: #f1ebdf;
  --paper-2: #e6ddca;
  --card: #f8f4ec;
  --ink: #1b1d24;
  --muted: #5d5a54;
  --ai: #1f3f73;
  --ai-deep: #13284d;
  --on-ai: #f1ebdf;
  --beni: #b5402c;
  --kin: #9a6f1c;
  --line: rgba(27, 29, 36, .16);
  --line-strong: rgba(27, 29, 36, .72);
  --e-moku: #3f7a4a; --e-ka: #c0452f; --e-do: #8f6420; --e-gon: #5f636c; --e-sui: #24456f;
  --on-e: #fbf7ef; --on-beni: #fff; --btn: #b5402c; --star: #85600f; --shadow: #1f3f73; --hero-bg: #13284d; --measure: 46em;
  --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --wave: radial-gradient(circle at 50% 100%, transparent 28%, rgba(241,235,223,.10) 29%, rgba(241,235,223,.10) 36%, transparent 37%, transparent 47%, rgba(241,235,223,.10) 48%, rgba(241,235,223,.10) 55%, transparent 56%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151b26; --paper-2: #1e2737; --card: #1a2231; --ink: #ece5d6; --muted: #aaa396;
    --ai: #8fb2e6; --ai-deep: #0a1322; --on-ai: #ece5d6; --beni: #e3755e; --kin: #d8b05a;
    --line: rgba(236, 229, 214, .14); --line-strong: rgba(236, 229, 214, .6);
    --e-moku: #5fa36b; --e-ka: #e0664c; --e-do: #c99a45; --e-gon: #a3a7b0; --e-sui: #5f8fd0; --btn: #c4472f;
    --on-e: #fbf7ef; --shadow: #b8913f; --star: #d8b05a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151b26; --paper-2: #1e2737; --card: #1a2231; --ink: #ece5d6; --muted: #aaa396;
  --ai: #8fb2e6; --ai-deep: #0a1322; --on-ai: #ece5d6; --beni: #e3755e; --kin: #d8b05a;
  --line: rgba(236, 229, 214, .14); --line-strong: rgba(236, 229, 214, .6);
  --e-moku: #5fa36b; --e-ka: #e0664c; --e-do: #c99a45; --e-gon: #a3a7b0; --e-sui: #5f8fd0; --btn: #c4472f;
  --on-e: #fbf7ef; --shadow: #b8913f; --star: #d8b05a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.85; letter-spacing: .02em;
  background-image: radial-gradient(rgba(120, 100, 60, .05) 1px, transparent 1px);
  background-size: 5px 5px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ai-deep); }
a { color: var(--ai); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--beni); }
:focus-visible { outline: 3px solid var(--beni); outline-offset: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.35; text-wrap: balance; letter-spacing: .04em; word-break: auto-phrase; scroll-margin-top: 84px; }
[id] { scroll-margin-top: 84px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--card); padding: 8px 12px; }

/* ── ヘッダー ── */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ai-deep); color: var(--on-ai); border-bottom: 3px solid var(--beni); }
.site-head::after { content: ""; position: absolute; inset: 0; background-image: var(--wave); background-size: 34px 17px; opacity: .9; pointer-events: none; }
.head-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--on-ai); text-decoration: none; flex: none; }
.logo:hover { color: var(--on-ai); }
.seal { display: grid; place-items: center; width: 40px; height: 40px; background: #b5402c; color: #f6efe2; font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1; writing-mode: vertical-rl; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(246,239,226,.55); letter-spacing: 0; }
.logo-t { display: flex; flex-direction: column; line-height: 1.15; }
.logo-t b { font-family: var(--f-display); font-size: 21px; letter-spacing: .12em; }
.logo-t small { font-size: 10.5px; letter-spacing: .14em; opacity: .78; }
.gnav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.gnav a { color: var(--on-ai); text-decoration: none; font-size: 14px; font-weight: 500; padding: 5px 9px; border-radius: 3px; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.25; }
.gnav a small { font-size: 10px; opacity: .7; font-weight: 400; }
@media (min-width: 901px) { .gnav a small { display: none; } }
.gnav a:hover, .gnav a[aria-current] { background: rgba(241,235,223,.12); color: #fff; }
.gnav a.cta { background: #b5402c; color: #fff; }
.menu-btn { display: none; margin-left: auto; background: transparent; color: var(--on-ai); border: 1px solid rgba(241,235,223,.5); border-radius: 3px; font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .gnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ai-deep); flex-direction: column; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 3px solid var(--beni); }
  .gnav.open { display: flex; }
  .gnav a { padding: 12px 8px; font-size: 16px; border-bottom: 1px solid rgba(241,235,223,.1); }
}

/* ── パンくず ── */
.crumbs { font-size: 12.5px; color: var(--muted); padding-block: 14px 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; opacity: .6; }
.crumbs a { color: var(--muted); }

/* ── レイアウト ── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-block: 20px 56px; }
.layout.full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } }
main { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 24px; }
.side-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 24px; }
.side h3 { font-size: 15px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.side ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.side li { border-bottom: 1px dashed var(--line); }
.side li a { display: block; padding: 7px 2px; text-decoration: none; color: var(--ink); }
.side li a:hover { color: var(--beni); }

/* ── 広告枠 ── */
.ad { display: grid; place-items: center; min-height: 100px; margin-block: 32px; border: 1px dashed var(--line); background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(127,127,127,.05) 10px 20px); color: var(--muted); font-size: 12px; letter-spacing: .2em; position: relative; }
.ad::before { content: "スポンサーリンク"; position: absolute; top: -9px; left: 10px; background: var(--paper); padding: 0 6px; font-size: 10.5px; letter-spacing: .12em; }
.ad.rect { min-height: 250px; }
.ad.tall { min-height: 600px; }
.ad.top { min-height: 90px; margin-block: 16px 0; }
@media (max-width: 1000px) { .ad.tall { min-height: 250px; } }

/* ── 見出し・本文 ── */
.page-title { margin: 10px 0 6px; font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; }
.page-sub { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 48px 0 14px; padding: 2px 0 8px 18px; border-bottom: 1px solid var(--line-strong); position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 14px; width: 6px; background: var(--beni); }
.prose h3 { font-size: 19px; margin: 32px 0 10px; }
.prose p { margin: 0 0 1.1em; }
.prose .lead { font-size: 17.5px; line-height: 1.95; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .3em; }
.chain li strong { color: var(--beni); font-family: var(--f-display); }
.callout { border: 2px solid var(--ink); background: var(--card); padding: 16px 20px; margin: 28px 0; box-shadow: 5px 5px 0 var(--ai); }
.callout ul { margin: 6px 0 0; }
.callout p:last-child { margin-bottom: 0; }
.dl dt { font-weight: 700; font-family: var(--f-display); font-size: 17px; margin-top: 18px; }
.dl dd { margin: 4px 0 0; padding-left: 1em; border-left: 3px solid var(--paper-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip, .chips span { display: inline-block; padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; background: var(--card); }
.fig { margin: 24px 0; text-align: center; }
.fig svg { width: 100%; max-width: 380px; height: auto; }
.fig figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.note { font-size: 13px; color: var(--muted); }

/* ── 表 ── */
.tbl { overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--line-strong); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--ai-deep); color: var(--on-ai); font-weight: 500; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
tbody tr:nth-child(even) { background: rgba(127, 127, 127, .05); }
td.k { font-family: var(--f-display); font-size: 18px; font-weight: 700; white-space: nowrap; }
td a { font-weight: 500; }

/* ── 五行の色 ── */
.e0 { --ec: var(--e-moku); } .e1 { --ec: var(--e-ka); } .e2 { --ec: var(--e-do); } .e3 { --ec: var(--e-gon); } .e4 { --ec: var(--e-sui); }
.etag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ec); border: 1.5px solid var(--ec); padding: 0 7px; border-radius: 2px; line-height: 1.6; white-space: nowrap; }

/* ── 詳細ページのヒーロー(大きな漢字と題簽) ── */
.hero-k { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; align-items: center; padding: 28px 28px 24px; margin: 14px 0 8px; background: var(--card); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ai); position: relative; overflow: hidden; }
.hero-k > * { position: relative; z-index: 1; }
.hero-k::after { -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 160px; background-image: radial-gradient(circle at 50% 100%, transparent 28%, var(--line) 29%, var(--line) 36%, transparent 37%, transparent 47%, var(--line) 48%, var(--line) 55%, transparent 56%); background-size: 40px 20px; opacity: .9; pointer-events: none; }
.big-k { font-family: var(--f-display); font-weight: 800; font-size: clamp(88px, 15vw, 150px); line-height: 1; color: var(--ec, var(--ink)); display: flex; align-items: center; gap: 14px; }
.big-k .tz { font-size: 15px; }
.tz { writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 700; letter-spacing: .2em; background: var(--paper); border: 1.5px solid var(--ink); padding: 12px 5px; color: var(--ink); line-height: 1.2; }
.hero-k h1 { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 34px); }
.hero-k .yomi { color: var(--muted); font-size: 14px; letter-spacing: .14em; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; z-index: 1; }
@media (max-width: 600px) { .hero-k { grid-template-columns: 1fr; padding: 20px; } .big-k { font-size: 96px; } }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--line-strong); margin: 22px 0; background: var(--card); }
.spec div { padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.spec dt { font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.spec dd { margin: 2px 0 0; font-weight: 700; font-size: 15.5px; }

/* ── カード・グリッド ── */
.grid { display: grid; gap: 14px; }
.g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g60 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 900px) { .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g10, .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .g60 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g10, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g9, .g3, .g2 { grid-template-columns: minmax(0, 1fr); } .g60 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.crest { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.crest:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ai); color: var(--ink); border-color: var(--ink); }
.crest .mon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 32px; color: var(--on-e); background: var(--ec, var(--ai)); box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--ec, var(--ai)); }
.crest b { font-size: 14px; }
.crest small { font-size: 11.5px; color: var(--muted); line-height: 1.4; text-align: center; }

.k60 { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; text-decoration: none; color: var(--ink); background: var(--card); border-top: 3px solid var(--ec); font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.k60 small { font-family: var(--f-body); font-weight: 400; font-size: 10px; color: var(--muted); }
.k60:hover { background: var(--paper-2); color: var(--ink); }

.card { display: block; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
a.card:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ai); color: var(--ink); }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.card .tag { font-size: 12px; letter-spacing: .14em; color: var(--beni); font-weight: 700; }

.sec { margin-top: 56px; }
.sec-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; }
.sec-h h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.sec-h .en { font-size: 12px; letter-spacing: .3em; color: var(--beni); font-weight: 700; }
.sec-h a { font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) { .sec-h { grid-template-columns: minmax(0, 1fr) auto; } .sec-h .en { grid-column: 1 / -1; } }

/* ── トップのヒーロー ── */
.hero { position: relative; background: var(--hero-bg); color: var(--on-ai); overflow: hidden; border-bottom: 6px double var(--beni); }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; padding-block: 44px 200px; align-items: start; }
.hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-art svg { position: absolute; left: 0; bottom: -2px; width: 100%; min-width: 900px; height: auto; }
.hero h1 { font-size: clamp(34px, 5.6vw, 62px); margin: 0; font-weight: 800; letter-spacing: .08em; line-height: 1.25; }
.hero h1 em { font-style: normal; color: #e9a28f; }
.hero .kicker { display: inline-block; font-size: 12px; letter-spacing: .3em; border: 1px solid rgba(241,235,223,.45); padding: 3px 10px; margin-bottom: 18px; }
.hero p.sub { font-size: 16px; opacity: .92; max-width: 30em; margin: 16px 0 0; }
.hero-stats { display: flex; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
.hero-stats div { font-size: 12px; opacity: .85; letter-spacing: .08em; }
.hero-stats b { display: block; font-family: var(--f-display); font-size: 28px; letter-spacing: 0; opacity: 1; color: #fff; }
@media (max-width: 860px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 32px 36px; } .hero-in { padding-bottom: 170px; } .hero-art svg { min-width: 820px; left: -40px; } }

/* ── 占いフォーム(版画の札) ── */
.print { background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--beni); padding: 22px 22px 20px; position: relative; min-width: 0; }
.hero .print { box-shadow: 7px 7px 0 #b5402c; }
.print h2, .print h3 { margin: 0 0 12px; font-size: 20px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; flex: 1 1 140px; min-width: 0; }
.form label.opt span { font-weight: 400; color: var(--muted); }
input, select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: 2px; width: 100%; min-width: 0; }
input:focus, select:focus { border-color: var(--ai); outline: 2px solid var(--ai); outline-offset: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 16px; letter-spacing: .12em; padding: 12px 22px; border: 2px solid var(--ink); background: var(--btn); color: #fff; cursor: pointer; border-radius: 2px; text-decoration: none; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.err { color: var(--beni); font-size: 14px; font-weight: 700; margin: 0; }

/* ── 命式表 ── */
.meishiki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--card); margin: 18px 0; }
.meishiki .col { border-right: 1px solid var(--line-strong); text-align: center; min-width: 0; }
.meishiki .col:last-child { border-right: 0; }
.meishiki .hd { background: var(--ai-deep); color: var(--on-ai); font-size: 12.5px; padding: 6px 2px; letter-spacing: .1em; }
.meishiki .gan, .meishiki .shi { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 6vw, 52px); line-height: 1.15; padding: 8px 2px 0; color: var(--ec); }
.meishiki .sub { font-size: 11.5px; color: var(--muted); padding: 0 2px 6px; line-height: 1.5; }
.meishiki .row-l { font-size: 12px; padding: 5px 2px; border-top: 1px dashed var(--line); }
.meishiki .na { color: var(--muted); font-size: 13px; padding: 34px 4px; }
.bars { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.bar { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.6em; gap: 10px; align-items: center; font-size: 14px; }
.bar .tr { height: 14px; background: var(--paper-2); position: relative; }
.bar .fl { position: absolute; inset: 0 auto 0 0; background: var(--ec); }
.bar b { font-family: var(--f-display); color: var(--ec); }
.result { margin-top: 26px; }
.result[hidden] { display: none !important; }
.res-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stamp { display: inline-grid; place-items: center; width: 84px; height: 84px; border: 3px solid var(--beni); color: var(--beni); border-radius: 50%; font-family: var(--f-display); font-weight: 800; font-size: 34px; transform: rotate(-8deg); flex: none; }
.score { font-family: var(--f-display); font-size: 54px; font-weight: 800; color: var(--beni); line-height: 1; }
.score small { font-size: 18px; color: var(--ink); }

/* ── 九星盤 ── */
.ban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 360px); border: 2px solid var(--ink); background: var(--card); margin: 12px 0; }
.ban div { aspect-ratio: 1 / 1; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.3; min-width: 0; padding: 2px; }
.ban div b { font-family: var(--f-display); font-size: 17px; color: var(--ec); }
.ban div.me { background: rgba(181, 64, 44, .12); }
.ban div.good { box-shadow: inset 0 0 0 3px var(--e-moku); }
.ban div.bad { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127,127,127,.12) 6px 12px); }
.ban .dirl { color: var(--muted); }

/* ── カレンダー ── */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--card); }
.cal .dow { background: var(--ai-deep); color: var(--on-ai); text-align: center; font-size: 12px; padding: 4px 0; }
.cal .d { font: inherit; text-align: left; background: transparent; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; border-top: 0; border-left: 0; min-height: 100px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 5px; font-size: 11px; line-height: 1.35; min-width: 0; overflow: hidden; }
.cal .d .n { font-weight: 700; font-size: 16px; }
.cal .d .rk { font-size: 11px; color: var(--muted); }
.cal .d:hover { background: var(--paper-2); }
.cal .d[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ai); }
.cal .d .kk { font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--ec); }
.cal .d.is-today { background: rgba(181, 64, 44, .1); outline: 2px solid var(--beni); outline-offset: -2px; }
.cal .d.out { background: transparent; }
.cal .d .sk { color: var(--ai); font-weight: 700; }
.cal .d .nt { display: block; font-weight: 700; color: var(--muted); }
.cal .d .nt.good { color: var(--e-moku); } .cal .d .nt.bad { color: var(--beni); }
.cal .sun .n { color: var(--beni); } .cal .sat .n { color: var(--ai); }
@media (max-width: 600px) { .cal .d { min-height: 74px; font-size: 9.5px; padding: 3px; } .cal .d .kk { font-size: 13px; } .cal .d .nt { font-size: 9px; } }
.cal-nav { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.cal-nav h2 { margin: 0 auto 0 0; font-size: 22px; }

/* ── 前後ナビ・関連 ── */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.pn a { display: block; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--card); text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 700; }
.pn a small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--muted); }
.pn a.next { text-align: right; }
.pn a:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ai); }
.faq details { border-bottom: 1px solid var(--line-strong); padding: 12px 4px; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: 10px; }
.faq summary::before { content: "問"; font-family: var(--f-display); color: var(--beni); font-weight: 800; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 8px 0 0 1.8em; }
.share { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; align-items: center; font-size: 13px; }
.share a, .share button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer; border-radius: 2px; }

/* ── フッター ── */
.site-foot { background: var(--ai-deep); color: var(--on-ai); border-top: 3px solid var(--beni); position: relative; }
.site-foot::before { content: ""; position: absolute; inset: 0; background-image: var(--wave); background-size: 34px 17px; pointer-events: none; }
.foot-in { position: relative; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; padding-block: 40px 28px; font-size: 13.5px; }
.foot-in h4 { margin: 0 0 8px; font-size: 14px; color: #e9a28f; }
.foot-in ul { list-style: none; margin: 0; padding: 0; }
.foot-in li { margin-bottom: 4px; }
.foot-in a { color: var(--on-ai); text-decoration: none; opacity: .88; }
.foot-in a:hover { opacity: 1; text-decoration: underline; color: #fff; }
.copy { position: relative; text-align: center; font-size: 12px; opacity: .7; padding-block: 0 24px; }
@media (max-width: 860px) { .foot-in { grid-template-columns: 1fr 1fr; } }

/* ── 今日の暦 ── */
.today { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.today .tk { font-family: var(--f-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--ec); }
.today .tl { font-size: 14px; }
.today .tl b { font-size: 17px; }
@media (max-width: 480px) { .today { grid-template-columns: 1fr; } }
.toc { border: 1px solid var(--line-strong); background: var(--card); padding: 12px 18px; margin: 20px 0; font-size: 14px; max-width: 46em; }
.toc b { font-family: var(--f-display); }
.toc ol { margin: 6px 0 0; padding-left: 1.4em; }

/* ───────── 第2版の追加部品 ───────── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dsel { border: 0; padding: 0; margin: 0; min-width: 0; }
.dsel legend { font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 4px; }
.dsel-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dsel-row label { flex: none; }
.btn.wide { width: 100%; padding-block: 14px; font-size: 17px; }
.form .note { margin: 0; }
.result-wrap { margin-top: 26px; scroll-margin-top: 84px; }
.result-wrap .result { margin-top: 0; }
.result:focus { outline: none; }
.sample-label { display: inline-block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ai); border-bottom: 2px solid var(--ai); }
.result-wrap:has(.is-sample) .sample-label { color: var(--muted); border-color: var(--line-strong); }
.result.is-sample { position: relative; opacity: .82; }
.result.is-sample::before { content: "見本"; position: absolute; right: -4px; top: -16px; z-index: 2; font-family: var(--f-display); font-weight: 800; font-size: 13px; color: var(--beni); border: 2px solid var(--beni); padding: 0 8px; transform: rotate(6deg); background: var(--card); }
.hero .result-wrap { margin-top: 18px; }
.meishiki.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meishiki .col.me { background: rgba(181, 64, 44, .07); }
.card.muted { opacity: .75; border-style: dashed; }
.head-search { margin-left: auto; color: var(--on-ai); text-decoration: none; font-size: 14px; border: 1px solid rgba(241,235,223,.5); padding: 6px 12px; border-radius: 3px; }
.head-search:hover { color: #fff; background: rgba(241,235,223,.12); }
.head-search + .menu-btn { margin-left: 0; }
@media (min-width: 901px) { .head-search { order: 3; margin-left: 4px; } .gnav { order: 2; } }
.yjump { margin: 0; }
.gnav .yjump { display: flex; align-items: center; margin-left: 6px; }
.gnav .yjump select { padding: 5px 8px; font-size: 13px; background: rgba(241,235,223,.1); color: var(--on-ai); border-color: rgba(241,235,223,.4); width: auto; }
.gnav .yjump option { color: #1b1d24; }
@media (max-width: 900px) { .gnav .yjump { margin: 10px 0 0; } .gnav .yjump select { width: 100%; font-size: 16px; padding: 10px; } }
.hero-y { margin-top: 22px; max-width: 26em; }
.hero-y label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .08em; }
.hero-y select { background: rgba(241,235,223,.95); color: #1b1d24; border-color: transparent; }
.yjump.big label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; max-width: 28em; }
.ft-h { margin: 0 0 8px; font-size: 14px; color: #e9a28f; font-family: var(--f-display); font-weight: 700; }
.side-h, .h2like { font-family: var(--f-display); font-weight: 700; font-size: 15px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.h2like { font-size: 19px; border: 0; padding: 0; }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 25; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ai-deep); color: var(--on-ai); text-decoration: none; font-size: 20px; border: 2px solid var(--on-ai); box-shadow: 3px 3px 0 var(--beni); opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { color: #fff; }
.next { margin: 28px 0; padding: 16px 18px; border: 1px solid var(--line-strong); background: var(--card); }
.next-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.next-btns .btn { font-size: 14px; letter-spacing: .04em; padding: 10px 14px; justify-content: space-between; }
.share .copy-fallback { flex: 1 1 100%; font-size: 14px; }
.stars { color: var(--star); letter-spacing: .06em; white-space: nowrap; }
.fortune-head { font-size: 16px; }
.fbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
.fbars div { background: var(--card); border: 1px solid var(--line); padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; }
.fbars span { font-weight: 700; font-size: 14px; }
.fbars small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fbars.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.fbars.sm div { padding: 4px 6px; grid-template-columns: 1fr; text-align: center; font-size: 12px; }
@media (max-width: 560px) { .fbars { grid-template-columns: minmax(0, 1fr); } .fbars.sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rank { padding-left: 1.6em; }
.rank li { margin-bottom: 4px; }
.daily-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.daily-list li { display: grid; grid-template-columns: 2em 4.2em auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ec); font-size: 14px; margin: 0; }
.daily-list .no { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--muted); text-align: center; }
.daily-list li:nth-child(-n+3) .no { color: var(--beni); }
.daily-list .msg { font-size: 13px; color: var(--muted); line-height: 1.5; }
.daily-list .mine { box-shadow: 3px 3px 0 var(--beni); border-color: var(--ink); }
.daily-list em { font-style: normal; font-weight: 700; color: var(--beni); margin-left: 6px; }
@media (max-width: 700px) { .daily-list { grid-template-columns: minmax(0, 1fr); } .daily-list li { grid-template-columns: 2em 4em auto; } .daily-list .msg { grid-column: 2 / -1; } }
.today-mini { margin: 18px 0; padding: 10px 14px; border: 1px solid var(--line-strong); background: var(--card); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.today-mini:empty { display: none; }
.today-mini .tm-h { font-weight: 700; font-family: var(--f-display); }
.today .t-date { margin: 0 0 6px; font-size: 16px; }
.t-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; border: 1px solid var(--line); }
.t-dl div { padding: 6px 10px; border-right: 1px solid var(--line); min-width: 0; }
.t-dl div:last-child { border-right: 0; }
.t-dl dt { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.t-dl dd { margin: 0; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) { .t-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-dl div:nth-child(2) { border-right: 0; } .t-dl div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.t-n { margin: 4px 0 0; font-size: 14px; }
.lbl { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 8px; margin-right: 8px; border-radius: 2px; color: #fff; }
.lbl.good { background: var(--e-moku); } .lbl.bad { background: var(--beni); }
.chip.good { border-color: var(--e-moku); color: var(--e-moku); font-weight: 700; }
.chip.bad { border-color: var(--beni); color: var(--beni); font-weight: 700; }
.chip.sk { border-color: var(--ai); color: var(--ai); font-weight: 700; }
li.good b { color: var(--e-moku); } li.bad b { color: var(--beni); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cal-t { text-align: center; }
.cal-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.cal-nav h2 { margin: 0; }
@media (max-width: 560px) { .cal-nav .btn { padding: 10px 10px; font-size: 13px; letter-spacing: 0; } .cal-nav h2 { font-size: 17px; } .cal .d .rk { font-size: 9px; } }
.cal-detail { margin-top: 14px; padding: 16px 20px; border: 2px solid var(--ink); background: var(--card); box-shadow: 5px 5px 0 var(--ai); }
.cal-detail:empty { display: none; }
.cal-detail h3 { margin: 0 0 6px; }
.cal-detail ul { margin: 8px 0; padding-left: 1.3em; }
.kichi-list { padding-left: 1.2em; }
.rel-rows { border: 2px solid var(--ink); background: var(--card); margin: 18px 0; }
.rel { display: grid; grid-template-columns: 11em minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.rel:last-child { border-bottom: 0; }
.rel-l { padding: 12px 14px; background: var(--paper-2); font-weight: 700; font-size: 14px; line-height: 1.5; }
.rel-l small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.rel-v { padding: 12px 14px; }
.rel-v p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.rel-v .pt { float: right; font-family: var(--f-display); font-weight: 800; color: var(--muted); }
.rel.good .pt { color: var(--e-moku); } .rel.bad .pt { color: var(--beni); }
@media (max-width: 560px) { .rel { grid-template-columns: minmax(0, 1fr); } }
.score-legend { margin: 6px 0 0; }
.pair { margin-top: 16px; }
.nen-t tr.hl { background: rgba(181, 64, 44, .12) !important; }
.nen-res { margin-top: 12px; padding: 14px 16px; background: var(--paper); border-left: 5px solid var(--beni); }
.nen-res p { margin: 0 0 6px; }
.nen-res .big { font-size: 18px; }
.dec td { background: var(--paper-2); font-weight: 700; }
.matrix td, .matrix th { text-align: center; padding: 6px; }
.matrix td a { text-decoration: none; font-weight: 700; display: block; }
/* 表：スマホではカード表示 */
@media (max-width: 640px) {
  .tbl.cards { border: 0; background: transparent; overflow: visible; }
  .tbl.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl.cards tr { display: block; background: var(--card) !important; border: 1px solid var(--line-strong); margin-bottom: 10px; padding: 6px 0; }
  .tbl.cards td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 12px; white-space: normal; }
  .tbl.cards td::before { content: attr(data-label); font-size: 12px; color: var(--muted); font-family: var(--f-body); font-weight: 400; }
}
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { background: var(--card); border: 1px solid var(--line); padding: 12px; }
.prod-img { aspect-ratio: 1 / 1; background: var(--paper-2) repeating-linear-gradient(45deg, transparent 0 10px, rgba(127,127,127,.08) 10px 20px); display: grid; place-items: center; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.mon.sm { font-size: 22px !important; }
.g5.tight { gap: 6px; }
.g5.tight .crest { padding: 8px 4px; }
.g5.tight .crest .mon { width: 48px; height: 48px; }
.hero-lead { margin: 10px 0 0; font-size: 15.5px; line-height: 1.8; }
.search-results { list-style: none; padding: 0; margin: 12px 0; max-width: var(--measure); }
.search-results li { border-bottom: 1px dashed var(--line); padding: 10px 2px; }
.search-results li a { font-weight: 700; display: block; }
.search-results small { color: var(--muted); font-size: 12px; }
.mail { font-size: 18px; font-weight: 700; }
.ad { color: var(--muted); opacity: .8; }
.hero .print { margin-bottom: 0; }
@media print { .site-head, .site-foot, .side, .ad, .share, .next, .to-top { display: none !important; } }
@media (max-width: 560px) { .head-in { gap: 8px; } .logo-t small { display: none; } .logo-t b { font-size: 18px; } .seal { width: 34px; height: 34px; font-size: 13px; } .head-search, .menu-btn { padding: 6px 9px; font-size: 13px; flex: none; } }

/* ── 第2回レビューの修正 ── */
@media (max-width: 1000px) { .side .ad, .side-sticky { display: none !important; } }
.side > div:last-of-type { position: sticky; top: 84px; }
.pn { align-items: stretch; } .pn a { margin: 0 !important; }
.toc, .today-mini, .next { max-width: var(--measure); }
.card h3, .crest b { word-break: keep-all; overflow-wrap: anywhere; }
.copy { padding-inline: 16px; margin: 0; }
.site-foot { margin-bottom: 0; }
html { background: var(--ai-deep); }
.ban div.bad { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(192, 69, 47, .28) 6px 12px); }
.ban div.bad span:last-child { color: var(--beni); font-weight: 700; }
.cal .nt .s { display: none; }
@media (max-width: 600px) {
  .cal .d { font-size: 11px; min-height: 80px; }
  .cal .d .rk, .cal .d .sk { font-size: 10px; }
  .cal .d .nt { font-size: 10px; word-break: keep-all; }
  .cal .nt .l { display: none; } .cal .nt .s { display: inline; }
  .share { padding-right: 56px; }
}
.tbl td { overflow-wrap: anywhere; }
.tbl td.nw, .tbl td:has(> .rk6) { white-space: nowrap; }
input::placeholder { color: var(--muted); font-weight: 400; opacity: .8; }
.search-row { display: flex; gap: 8px; } .search-row input { flex: 1; } .search-row .btn { flex: none; padding: 10px 18px; }
#f-search label { flex: 1 1 auto; }
label.opt .lt { display: block; } label.opt .lt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.glossary { margin: 14px 0; border: 1px solid var(--line); background: var(--card); padding: 10px 14px; font-size: 14px; }
.glossary summary { cursor: pointer; font-weight: 700; }
.glossary dl { margin: 8px 0 0; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 10px; }
.glossary dt { font-weight: 700; } .glossary dd { margin: 0; color: var(--muted); }
.my-unsei { margin: 18px 0; } .my-unsei:empty { display: none; }
.card.hl { border: 2px solid var(--beni); box-shadow: 5px 5px 0 var(--beni); }
.daily { min-height: 40px; }
.trait { margin-top: 8px; color: var(--ink) !important; }
.has-sample [data-share], .has-sample .next { display: none; }
.dsel-row { grid-template-columns: minmax(0, 1fr) minmax(5.6em, auto) minmax(5.6em, auto); }
.dsel-row select { padding-right: 4px; padding-left: 8px; }
.daily-more { margin-top: 8px; }
.daily-more summary { cursor: pointer; font-weight: 700; color: var(--ai); padding: 6px 0; }
.mine-only { margin-bottom: 10px; }
.total { text-align: right; font-size: 15px; margin: -8px 0 16px; }
.total b { font-family: var(--f-display); font-size: 22px; color: var(--beni); }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; }
.hero-links a { color: var(--on-ai); }
.hero-links a:hover { color: #fff; }
.yjump { display: flex; gap: 6px; align-items: flex-end; }
.yjump label { flex: 1; }
.yj-go { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 3px; cursor: pointer; background: rgba(241,235,223,.12); color: var(--on-ai); border: 1px solid rgba(241,235,223,.5); letter-spacing: 0; }
.yjump.big .yj-go, main .yj-go { background: var(--btn); color: #fff; border: 2px solid var(--ink); padding: 10px 16px; font-size: 15px; }
.mtab td:nth-child(-n+3) { white-space: nowrap; }
.mtab td:last-child { word-break: keep-all; }
@media (max-width: 640px) { .mtab th:nth-child(4), .mtab td:nth-child(4) { display: none; } .mtab th, .mtab td { padding: 6px 6px; font-size: 13px; } }
.tbl.cards td { word-break: keep-all; }

/* ── 金地の花鳥図（桃山〜江戸の金碧障壁画に倣った装飾） ── */
:root { --kin: #b8913f; --kin-hi: #e3c676; }
.hero.kin { background: #cfa851 url("kinbyobu.svg") center bottom / cover no-repeat; color: var(--ink); border-bottom: 6px double var(--beni); }
.hero.kin .hero-in { padding-block: 48px 64px; align-items: center; }
.hero.kin .daisen { background: rgba(19, 40, 77, .93); color: #f1ebdf; padding: 30px 30px 26px; border: 2px solid #13284d; box-shadow: 7px 7px 0 rgba(90, 58, 16, .45), inset 0 0 0 5px rgba(227, 198, 118, .55); position: relative; }
.hero.kin .daisen::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(227, 198, 118, .5); pointer-events: none; }
.hero.kin .daisen .kicker { border-color: rgba(227, 198, 118, .7); color: #f3dc95; }
.hero.kin .daisen h1 em { color: #f3b8a6; }
.hero.kin .hero-links a { color: #f3dc95; }
.hero.kin .print { box-shadow: 7px 7px 0 rgba(90, 58, 16, .5); }
@media (max-width: 860px) { .hero.kin { background-size: auto 100%; background-position: 70% bottom; } .hero.kin .hero-in { padding-block: 120px 40px; } .hero.kin .daisen { padding: 22px 20px; } }
/* 詳細ページの題簽：右端に金屏風をのぞかせる */
.hero-k::after { right: 0; top: 0; bottom: 0; width: min(34%, 300px); height: auto; background: url("kinbyobu-s.svg") right center / cover no-repeat; opacity: .95; -webkit-mask-image: linear-gradient(to left, #000 45%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
@media (max-width: 600px) { .hero-k::after { width: 60%; opacity: .55; } }
/* 区切りの金雲 */
.sec-h .en::before { content: ""; display: inline-block; width: 46px; height: 12px; margin-right: 8px; vertical-align: -1px; background: url("kumo.svg") left center / 160px 12px no-repeat; }
.site-foot { border-top: 0; }
.site-foot::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 10px; background: linear-gradient(90deg, var(--kin), var(--kin-hi), var(--kin)); }

/* ── 全ページ共通の江戸絵テイスト（金箔・金雲・題簽） ── */
body { background-image: radial-gradient(rgba(184, 145, 63, .10) 1px, transparent 1.4px), radial-gradient(rgba(120, 100, 60, .05) 1px, transparent 1px); background-size: 23px 23px, 5px 5px; background-position: 3px 7px, 0 0; }
/* ページの題名：左に金箔の短冊 */
.page-title { position: relative; padding-left: 22px; }
.page-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .12em; width: 9px; background: url("kinpaku.svg") center / 120px; box-shadow: 0 0 0 1px rgba(122, 90, 32, .45); }
/* 札（カード・占いの枠・囲み）に金箔の角 */
.card, .print, .callout, .cal-detail, .next, .today-mini { position: relative; }
.card::after, .print::after, .callout::after { content: ""; position: absolute; top: -1px; right: -1px; width: 26px; height: 26px; background: url("kinpaku.svg") center / 90px; clip-path: polygon(0 0, 100% 0, 100% 100%); opacity: .95; pointer-events: none; }
.hero .print::after { width: 34px; height: 34px; }
a.card:hover::after { width: 34px; height: 34px; transition: width .15s, height .15s; }
.print { box-shadow: 7px 7px 0 var(--beni), inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(184, 145, 63, .45); }
.callout { box-shadow: 5px 5px 0 var(--ai), inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(184, 145, 63, .4); }
/* 本文の見出し：赤い印の代わりに金箔の印 */
.prose h2::before { background: url("kinpaku.svg") center / 80px; box-shadow: 0 0 0 1px rgba(122, 90, 32, .5); width: 7px; }
/* 見出し帯の英字の前に金雲（既存） / 区切り線を金に */
.prose h2 { border-bottom-color: rgba(122, 90, 32, .55); }
/* サイドバー：見出しを金の線に */
.side-h { border-bottom: 3px double var(--kin); }
.side .chips .chip:hover { background: var(--kin-hi); }
/* 表の見出し行：藍に金の細線 */
thead th { box-shadow: inset 0 -2px 0 var(--kin); }
.tbl, .meishiki, .ban, .cal, .rel-rows, .spec { box-shadow: 0 0 0 3px var(--card), 0 0 0 4px rgba(184, 145, 63, .45); }
/* 十二支などの紋：金の縁取り */
.crest .mon { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--kin); }
.crest:hover { box-shadow: 4px 4px 0 var(--kin); }
/* 一覧ページの頭：金屏風の細い帯 */
.crumbs { position: relative; }
.layout > main > .page-title:first-child, .layout > main > h1.page-title { margin-top: 18px; }
.layout > main::before { content: ""; display: block; height: 70px; margin: 0 0 6px; background: url("kinbyobu.svg") 62% 78% / 1100px auto no-repeat; border: 1px solid rgba(122, 90, 32, .45); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px rgba(184, 145, 63, .35); -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.layout.full > main::before { display: none; }
body:has(.hero-k) .layout > main::before { display: none; }
/* フッター：金屏風の帯 */
.site-foot::before { background-image: var(--wave); }
.foot-band { height: 90px; background: url("kinbyobu.svg") 50% 88% / 1500px auto repeat-x; border-top: 6px double var(--beni); }
/* ダークでも金は金のまま */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card::after, :root:not([data-theme="light"]) .print::after { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { a.card:hover::after { transition: none; } }

/* 姉妹サイト(算命学)の案内枠 */
.sister { position: relative; margin: 36px 0 8px; padding: 22px 22px 20px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--kin, #c9a14a); }
.sister .tag { display: inline-block; margin-bottom: 6px; }
.sister-h { margin: 0 0 8px; font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(19px, 2.6vw, 23px); }
.sister-h::before, .sister-h::after { display: none; }
.sister p { margin: 0 0 14px; }
.sister-b { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 美術館の江戸絵（パブリックドメイン） */
.hero.kin { background: #cfa851 url("art/top.webp") center 40% / cover no-repeat; }
@media (max-width: 860px) { .hero.kin { background: url("art/top-s.webp") 30% top / auto 250px repeat-x, #cfa851 url("kinpaku.svg") 0 0 / 240px repeat; } .hero.kin .hero-in { padding-top: 200px; } .eto-art img { max-height: 240px; } }
.hero.kin .art-credit { margin: -40px auto 0; padding-bottom: 10px; text-align: right; font-size: 11px; color: rgba(27, 36, 51, .85); }
.hero.kin .art-credit a { color: inherit; }
@media (max-width: 860px) { .hero.kin .art-credit { margin-top: -28px; text-align: center; } }
.hero-k:has(.eto-art) { grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px); }
.hero-k:has(.eto-art)::after { display: none; }
.eto-art { margin: 0; justify-self: end; background: #e9dcbc; padding: 8px 8px 6px; border: 1px solid rgba(122, 90, 32, .55); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px rgba(184, 145, 63, .5); }
.eto-art img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.eto-art figcaption { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.eto-art figcaption a { color: inherit; }
@media (max-width: 860px) { .hero-k:has(.eto-art) { grid-template-columns: auto minmax(0, 1fr); } .hero-k:has(.eto-art) .eto-art { grid-column: 1 / -1; justify-self: center; max-width: 320px; } }

/* 第4回デザイン指摘 */
@media (max-width: 600px) { .hero-k:has(.eto-art) { grid-template-columns: 1fr; } .hero-k:has(.eto-art) .big-k { justify-content: flex-start; } }
.eto-art figcaption { color: #4a463f; }
.layout > main::before { height: 48px; background: url("art/top-s.webp") center 62% / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
.foot-band { height: 64px; background: url("art/top-s.webp") center 70% / cover no-repeat; }
.toc, .today-mini { max-width: none; }
.hero.kin .art-credit { font-size: 12px; }
.arr { white-space: nowrap; }
@media (max-width: 560px) {
  .grid.g3.uranai-cards, .grid.g2.uranai-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .uranai-cards .card p { display: none; }
  .uranai-cards .card h3 { font-size: 15px; }
}
/* 第4回UX指摘 */
.next-mini { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 14px; }
.next-mini a { display: inline-block; padding: 8px 0; }
.share a, .share button { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  .to-top { bottom: 76px; width: 40px; height: 40px; font-size: 17px; opacity: 0; }
  .to-top.show { opacity: .85; }
  .hero.kin .hero-in { display: flex; flex-direction: column; }
  .hero.kin .print { order: -1; }
  .hero.kin .daisen .sub { display: none; }
  .hero.kin .hero-in { padding-top: 150px; }
}
td .bad, td span.bad { color: var(--beni); font-weight: 700; }
td .bad::after { content: "（凶）"; font-weight: 400; font-size: .85em; }
.card .tag, .chip small, td small { font-size: 13px; }
/* JSで後から入る結果の高さを先に確保する(レイアウトのずれ防止) */
#today { min-height: 312px; display: flow-root; }
#r-quick { min-height: 234px; }
@media (min-width: 861px) { #today { min-height: 133px; } #r-quick { min-height: 275px; } }
#daily-rank { min-height: 335px; }
#cal { min-height: 700px; }
@media (min-width: 861px) { #daily-rank { min-height: 207px; } }
/* 第5回デザインレビュー */
.ads-off .ad { display: none !important; }
.tbl td { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 600px) { .tbl table { min-width: max-content; font-size: 13px; } .tbl th, .tbl td { padding: 6px 8px; } .tbl.cards table { min-width: 0; } }
.result.is-sample { opacity: 1; outline: 2px dashed var(--line-strong, #b9ab8c); outline-offset: 6px; }
h1, h2, h3, h4, .card h3 { font-feature-settings: "palt"; letter-spacing: .06em; }
body { line-break: strict; }
.lead, .hero-k p, .hero-lead { word-break: auto-phrase; }
@media (max-width: 600px) { .cal .d .rk, .cal .d .sk, .cal .d .nt { font-size: 11px; } }
.ban div.bad { background: rgba(181,64,44,.10) !important; box-shadow: inset 0 0 0 2px #b5402c; }
.ban .dirl { font-size: 12px; }
.result.is-sample::before { top: -30px; }
.cal .d.doyo { background-image: linear-gradient(to top, rgba(160,120,60,.16) 0 5px, transparent 5px); }
.tbl tr.past { opacity: .5; }
.tbl tr.next td:first-child::after { content: "次"; margin-left: 6px; font-size: 12px; color: #fff; background: var(--beni); padding: 0 6px; border-radius: 3px; }
#next-row { scroll-margin-top: 90px; }
/* 相性一覧表：スマホでは横にスクロール */
.matrix table { min-width: 520px; }
.matrix small { white-space: nowrap; font-size: 11px; }
.matrix tbody th { position: sticky; left: 0; background: var(--card); z-index: 1; }
/* メニューの「よく使う」（スマホのメニューだけに出す） */
.gquick { display: none; }
@media (max-width: 900px) {
  .gquick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 0 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(241,235,223,.2); }
  .gquick .gq-h { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--on-ai); opacity: .8; }
  .gquick a { background: rgba(241,235,223,.1); border: 1px solid rgba(241,235,223,.25); justify-content: center; min-height: 44px; font-weight: 700; white-space: normal; }
  .gnav a small { font-size: 12px; }
}

/* ── 第6回 ── */
:root { --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif; }
.seal { display: flex; flex-direction: column; align-items: center; justify-content: center; writing-mode: horizontal-tb; line-height: 1.05; overflow: hidden; }
.seal i { font-style: normal; display: block; }
.lbl { background: #6b6459; }
.lbl.mid, .lbl.doyo { background: #7a5418; }
.lbl.doyo { font-size: 12px; margin-top: 2px; }
.hero-k:not(:has(.eto-art)) { padding-right: calc(min(34%, 300px) + 16px); }
@media (max-width: 600px) { .hero-k:not(:has(.eto-art)) { padding-right: 20px; } }
@media (max-width: 900px) { .gnav { max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain; } }
body.menu-open { overflow: hidden; }
body.menu-open .to-top { display: none; }
.tbl tr.past { opacity: 1; }
.tbl tr.past td { color: #6f6e6c; background: rgba(127,127,127,.06); }
.tbl.fix table { table-layout: fixed; }
td.mk2 { color: var(--beni); font-weight: 700; font-size: 18px; }
td.mk1 { color: var(--muted); }
.lead, .hero-k p, .hero-lead { word-break: normal; }
.more a, .next-mini a { white-space: nowrap; }
.m-date { display: block; font: 500 13px/1.5 var(--f-body); color: var(--muted); letter-spacing: 0; }
h3 .lbl { vertical-align: middle; margin-left: 8px; font-family: var(--f-body); }
.tbl tr.now td:first-child::after { content: "今月"; margin-left: 6px; font-size: 12px; color: #fff; background: var(--beni); padding: 0 6px; border-radius: 3px; }
.tbl tr.now td { background: rgba(201,162,75,.14); }
.ban div.me { background: rgba(201,162,75,.30); }
.ban div.bad { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(181,64,44,.14) 6px 12px) !important; box-shadow: inset 0 0 0 2px #b5402c; }
.ban div.bad span:last-child { color: #9c3524; }
.matrix thead th:first-child { position: sticky; left: 0; background: var(--card); z-index: 2; }
.matrix td.best { background: #f3e3c0; }
.matrix td.weak a { color: var(--muted); }
.matrix td.same { background: rgba(127,127,127,.08); }
.search-results { min-height: 70vh; }
.koyomi-months a, .pn-mini a { display: inline-block; padding: 8px 0; }
.yomi-s { font-size: .7em; letter-spacing: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .matrix td.best { background: rgba(201,162,75,.25); } }
@media (min-width: 700px) { .sp-only { display: none; } }
.tz { height: auto; align-self: center; }
.tcy { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: 0; font-size: .8em; }
/* 十二支ページのPC：絵を下の段へ */
@media (min-width: 861px) { .hero-k:has(.eto-art) { grid-template-columns: auto minmax(0, 1fr) minmax(160px, 200px); } }
@media (min-width: 861px) { .spec { grid-template-columns: repeat(4, 1fr); } }
/* 月の暦表・年齢表のスマホ */
@media (max-width: 640px) {
  .mtab table { min-width: 0; table-layout: auto; }
  .mtab td:last-child, .mtab td:nth-child(5) { word-break: normal; overflow-wrap: anywhere; white-space: normal; }
  .nen-t table { min-width: 0; }
  .nen-t td, .nen-t th { font-size: 14.5px; padding: 6px 5px; word-break: normal; }
}

/* ── 第7回：ChatGPT案の良い点を取り入れ ── */
:root { --paper: #f8f5ec; --paper-2: #efe8d8; --card: #fffdf8; --ai-deep: #0f2742; --hero-bg: #0f2742; --beni: #b33b2e; --btn: #b33b2e; --kin-hi: #e6c86e; --kin-gold: #d4af37; --usukin: #f1e4c4; }
body { background-color: var(--paper); }
.sec { margin-block: 48px; }
/* ファーストビュー：絵の中央に入力欄だけ */
.hero.hc .hc-in { display: flex; flex-direction: column; align-items: center; padding-block: 56px 56px; }
.hc-card { width: min(100%, 560px); background: rgba(255, 253, 248, .95); color: var(--ink); border: 1px solid rgba(154, 111, 28, .55); box-shadow: 0 0 0 5px rgba(255, 253, 248, .55), 0 18px 40px rgba(60, 40, 10, .28); padding: 28px 30px 22px; text-align: center; position: relative; }
.hc-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(212, 175, 55, .55); pointer-events: none; }
.hc-card .kicker { display: inline-block; font-size: 12px; letter-spacing: .24em; color: #7a5418; border: 1px solid rgba(154, 111, 28, .5); padding: 3px 10px; margin-bottom: 12px; }
.hc-card h1 { font-size: clamp(30px, 5vw, 48px); margin: 0; color: var(--ink); letter-spacing: .08em; line-height: 1.3; }
.hc-card h1 em { font-style: normal; color: var(--beni); }
.hc-card .sub { margin: 10px 0 16px; font-size: 15px; color: var(--muted); }
.hc-card .form { text-align: left; }
.hc-card .form .note { font-size: 12px; text-align: center; }
.hc-card .free { margin: 6px 0 0; font-size: 13px; color: #2e5d50; font-weight: 700; }
.hero.hc .hero-links { justify-content: center; margin-top: 18px; background: rgba(15, 39, 66, .82); padding: 8px 16px; border-radius: 999px; }
.hero.hc .hero-links a { color: #f3dc95; }
.quick-res .print { box-shadow: 6px 6px 0 var(--kin-gold); }
.quick-res .qr-h { font-size: 19px; }
@media (max-width: 860px) {
  .hero.hc .hc-in { padding-block: 170px 28px; }
  .hc-card { padding: 22px 18px 18px; }
  .hero.hc .hero-links { border-radius: 10px; font-size: 13px; gap: 6px 14px; }
}
/* 十二支：金の丸に動物の絵 */
.crest.pic .mon { width: 76px; height: 76px; padding: 0; overflow: hidden; background: var(--usukin); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--kin-gold), 0 3px 8px rgba(60, 40, 10, .25); }
.crest.pic .mon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crest.pic .ck { font-family: var(--f-display); font-size: 22px; line-height: 1.1; color: var(--ec, var(--ink)); }
.crest.pic { gap: 4px; padding: 14px 4px 10px; background: linear-gradient(180deg, #fffdf8, #f6efdc); }
@media (max-width: 560px) { .g12:has(.crest.pic) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .crest.pic .mon { width: 62px; height: 62px; } .crest.pic { padding: 10px 2px 8px; } .crest.pic small { font-size: 11px; } }
/* 占いカードの絵 */
.card.thumb { padding-top: 0; overflow: hidden; }
.card.thumb .th { display: block; width: calc(100% + 2 * var(--cpad, 18px)); max-width: none; height: 96px; object-fit: cover; margin: 0 calc(-1 * var(--cpad, 18px)) 12px; border-bottom: 2px solid var(--kin-gold); filter: saturate(1.05); }
/* 記事カード：カテゴリの色と日付 */
.tag.cat { color: #fff; border: 0; padding: 1px 8px; border-radius: 2px; }
.cat1 { background: #2e5d50; } .cat2 { background: #7a5418; } .cat3 { background: #b33b2e; } .cat4 { background: #3a4f8c; } .cat5 { background: #6b3f7a; }
.cat6 { background: #6b8e23; } .cat7 { background: #5d5a54; } .cat8 { background: #9c3524; } .cat9 { background: #0f2742; }
.art-card time { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); text-align: right; }
/* 今日の暦を横一列の帯に */
@media (min-width: 861px) {
  .today-band .today { grid-template-columns: auto minmax(0, 1fr); }
  .today-band .t-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .today-band .t-dl > div { border-left: 1px solid rgba(212, 175, 55, .6); padding: 2px 14px; }
}
/* フッター：紺地に金の波と月 */
.site-foot { background: radial-gradient(circle at 88% 30%, #f3dc95 0 34px, rgba(243, 220, 149, .25) 35px, transparent 70px), var(--ai-deep); }
.site-foot::before { background-image: radial-gradient(circle at 50% 100%, transparent 28%, rgba(212, 175, 55, .16) 29%, rgba(212, 175, 55, .16) 36%, transparent 37%, transparent 47%, rgba(212, 175, 55, .16) 48%, rgba(212, 175, 55, .16) 55%, transparent 56%); background-size: 34px 17px; mask-image: linear-gradient(to top, #000 0, transparent 60%); -webkit-mask-image: linear-gradient(to top, #000 0, transparent 60%); }
/* スマホの下部固定ナビ */
.bnav { display: none; }
@media (max-width: 900px) {
  .bnav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; background: rgba(255, 253, 248, .97); border-top: 1px solid rgba(154, 111, 28, .45); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
  .bnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; font-size: 11.5px; color: var(--ink); text-decoration: none; min-height: 52px; justify-content: center; }
  .bnav a[aria-current] { color: var(--beni); font-weight: 700; }
  .bnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .to-top { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .bnav { display: none; }
}
@media print { .bnav { display: none !important; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #151b26; --card: #1a2231; --usukin: #3a3220; }
  :root:not([data-theme="light"]) .hc-card { background: rgba(26, 34, 49, .95); }
  :root:not([data-theme="light"]) .crest.pic { background: var(--card); }
  :root:not([data-theme="light"]) .bnav { background: rgba(21, 27, 38, .97); }
}
:root[data-theme="dark"] { --paper: #151b26; --card: #1a2231; --usukin: #3a3220; }
.card.thumb { --cpad: 20px; }
@media (max-width: 560px) {
  .uranai-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .uranai-cards > :last-child:nth-child(odd) .th { height: 120px; }
  .sec .g10:has(.crest) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .sec .g10 .crest { padding: 8px 2px; } .sec .g10 .crest .mon { width: 44px; height: 44px; font-size: 22px; } .sec .g10 .crest small { display: none; } .sec .g10 .crest b { font-size: 11px; }
  .g5.tight { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .g5.tight .crest .mon { width: 40px; height: 40px; font-size: 20px; }
  .today .tk { font-size: 44px; }
}
.quick-res .print { max-width: 820px; margin-inline: auto; }
@media (min-width: 1000px) { .g12:has(.crest.pic) { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; } .crest.pic .mon { width: 70px; height: 70px; } .crest.pic small { font-size: 11px; } }
.site-foot { background: radial-gradient(circle at calc(100% - 70px) calc(100% - 58px), #f3dc95 0 26px, rgba(243, 220, 149, .22) 27px, transparent 54px), var(--ai-deep); }
.card.thumb .th { object-position: center 35%; }
@media (min-width: 861px) { .card.thumb .th { height: 120px; } }
.ic { background-image: url("art/ic.webp"); background-size: 1200% 100%; background-position: calc(var(--i, 0) * 100% / 11) 0; background-repeat: no-repeat; }
.crest.pic .mon.ic { display: block; }
.card.thumb .th.ic { display: block; background-size: 1200% auto; background-position: calc(var(--i, 0) * 100% / 11) 38%; }
.crest.pic .mon.ic { background-color: var(--usukin); background-image: url("art/ic.webp"); background-size: 1200% 100%; background-position: calc(var(--i, 0) * 100% / 11) 0; background-repeat: no-repeat; }
.card.thumb .th.ic { background-position: calc(var(--i, 0) * 100% / 11) 50%; }
.hol { color: var(--beni); font-weight: 700; }

/* ── 第7回レビューの修正 ── */
@media (max-width: 900px) { .gnav { flex-wrap: nowrap; } }
@media (min-width: 1000px) { .layout:not(.full) .g12:has(.crest.pic) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
td .bad.lbl, td span.bad.lbl { color: #fff; }
td .bad.lbl::after { content: none; }
.card .h3 { font-size: 17px; margin: 4px 0 6px; line-height: 1.45; }
.tag.cat { margin-bottom: 8px; }
.nw { display: inline-block; }
.sp-only { display: none; }
.year-tabs { font-size: 15px; margin: 4px 0 12px; }
.year-tabs a, .year-tabs b { display: inline-block; padding: 6px 4px; }
.past-m { margin: 10px 0 18px; border: 1px solid var(--line-strong); background: var(--card); padding: 8px 14px; }
.past-m summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.past-m .tbl tr.past td { opacity: 1; }
.chip.past { opacity: .5; }
.to-next { margin: 8px 0 14px; }
.to-next a { display: inline-block; padding: 6px 0; font-weight: 700; }
.ks { display: inline-block; margin-left: 6px; color: var(--muted); font-size: .9em; }
.tbl.kd td:first-child { white-space: nowrap; }
.tbl.kd td:last-child { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.form > label { flex: none; }
.nenrei a, .tbl td a.star, .tbl td .nw { white-space: nowrap; }
.hero-k h1 { word-break: keep-all; overflow-wrap: anywhere; }
.today-band .tk { font-size: 64px; }
.today-band .t-n { font-size: 13px; margin: 4px 0 0; }
@media (min-width: 861px) { .today-band .t-dl { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px) { .today-band .t-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tbl.fix table, .tbl.kd table { min-width: 0; width: 100%; }
  .tbl.fix td { word-break: normal; overflow-wrap: anywhere; white-space: normal; }
  .tbl.fix col { width: auto !important; }
  .tbl.cards td { display: block; position: relative; padding: 4px 12px 4px calc(7.5em + 20px); border: 0; white-space: normal; }
  .tbl.cards td::before { position: absolute; left: 12px; top: 6px; width: 7.5em; }
  .hc-card .form .note { display: none; }
  .hc-card .sub { font-size: 14px; margin: 6px 0 10px; }
  .hc-card .kicker { margin-bottom: 8px; }
  .sp-only { display: inline; } .pc-only { display: none; }
  .site-foot .copy { padding-right: 92px; }
}
@media (max-width: 760px) {
  .site-foot { background: radial-gradient(circle at calc(100% - 44px) 44px, #f3dc95 0 20px, rgba(243, 220, 149, .22) 21px, transparent 42px), var(--ai-deep); }
}
@media (max-width: 340px), (max-height: 660px) { .hero.hc .hc-in { padding-block: 20px 24px; } .hc-card { padding: 16px 14px 14px; } .hc-card h1 { font-size: 26px; } }
@media (max-width: 900px) { body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } .to-top.show { opacity: .85; } }
.ks-tbl a, .tbl td a { padding: 4px 0; display: inline-block; }
.callout + .ban, .callout + svg { margin-top: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hc-card .free { color: #8fd0a0; } :root:not([data-theme="light"]) .hc-card .kicker { color: #e6c873; } }
:root[data-theme="dark"] .hc-card .free { color: #8fd0a0; } :root[data-theme="dark"] .hc-card .kicker { color: #e6c873; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.crest.e2 .mon:not(.ic), .crest.e3 .mon:not(.ic), .gan.e2, .gan.e3, .shi.e2, .shi.e3) { color: #1b1d24; } }
:root[data-theme="dark"] :is(.crest.e2 .mon:not(.ic), .crest.e3 .mon:not(.ic), .gan.e2, .gan.e3, .shi.e2, .shi.e3) { color: #1b1d24; }
.site-foot .logo-t small { white-space: nowrap; font-size: 10px; }
.art-card h3 { font-size: 15px; }
@media (min-width: 901px) { .site-foot { background-position: 0 0; } .site-foot { background: radial-gradient(circle at calc(100% - 150px) calc(100% - 58px), #f3dc95 0 26px, rgba(243, 220, 149, .22) 27px, transparent 54px), var(--ai-deep); } }
@media (min-width: 1000px) { .layout.full .daily > .daily-list:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .gnav { justify-content: flex-start; } }
.tbl.cards td { overflow-wrap: anywhere; }
.chip.past { opacity: 1; color: #5c5b58; border-style: dashed; }
.tbl tr.past td { color: #5c5b58; }
.sample-label { font-size: 13px; font-family: var(--f-body); font-weight: 700; letter-spacing: 0; margin: 0 0 8px; }
@media (max-width: 600px) { .tbl table { min-width: 0; width: 100%; } .tbl td, .tbl th { word-break: normal; overflow-wrap: anywhere; } .tbl.wide table, .tbl.mtab table { min-width: max-content; } }
.ban div.me.bad { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(181,64,44,.14) 6px 12px), rgba(201,162,75,.30) !important; }
.tbl td a[href*="kyusei/"] { white-space: nowrap; }

/* ── 第8回：見た目全体をChatGPT案に寄せる（明るい金地・和紙色・やわらかいカード） ── */
:root { --paper: #f7f2e6; --card: #fffdf8; --gold: #c9a24a; --gold-line: rgba(184, 146, 60, .38); --soft: 0 1px 2px rgba(60, 40, 10, .06), 0 6px 18px rgba(60, 40, 10, .07); --r: 10px; }
body { background-image: radial-gradient(rgba(150, 120, 60, .05) 1px, transparent 1px), linear-gradient(180deg, #fbf8ef, #f5efe1); background-size: 5px 5px, 100% 100%; }
/* カード：角を丸く、影をやわらかく、細い金の線 */
.card, .crest, .print, .callout, .today-mini { border-radius: var(--r); }
.card { border: 1px solid var(--gold-line); box-shadow: var(--soft); transition: transform .15s, box-shadow .15s; }
a.card:hover { border-color: var(--gold); box-shadow: 0 2px 4px rgba(60, 40, 10, .08), 0 12px 26px rgba(60, 40, 10, .12); transform: translateY(-2px); }
.card::after, .print::after, .callout::after { display: none; }
.crest { border: 1px solid var(--gold-line); box-shadow: var(--soft); }
.crest:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60, 40, 10, .12); border-color: var(--gold); }
.print { border: 1px solid var(--gold-line); box-shadow: var(--soft); }
.quick-res .print, .hero.kin .print { box-shadow: var(--soft); }
.btn, button.primary, .form button[type="submit"] { border-radius: 8px; }
/* 見出し：題＋「— 小見出し —」＋「すべて見る ›」 */
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-line); }
.sec-h h2 { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: .06em; }
.sec-h .sh-sub { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.sec-h a { margin-left: auto; font-size: 13px; color: var(--ink); text-decoration: none; }
.sec-h a:hover { color: var(--beni); text-decoration: underline; }
@media (max-width: 560px) {
  .sec-h { flex-wrap: nowrap; border-bottom: 0; padding-bottom: 0; }
  .sec-h .sh-sub { display: none; }
  .sec-h h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
  .sec-h h2::before { content: ""; flex: none; width: 22px; height: 16px; background: linear-gradient(135deg, #e8c766, #b8862b); clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%); }
  .sec-h a { white-space: nowrap; padding: 4px 0; }
}
/* ヘッダー：PCは明るい生成り色、スマホは紺のまま */
.head-search { display: flex; align-items: center; padding: 0; border: 1px solid rgba(241, 235, 223, .5); border-radius: 999px; overflow: hidden; }
.head-search input { display: none; border: 0; background: transparent; font-size: 13px; padding: 6px 4px 6px 14px; width: 150px; color: inherit; min-height: 0; }
.head-search input:focus { outline: none; }
.head-search button { background: transparent; border: 0; color: inherit; padding: 6px 10px; cursor: pointer; display: grid; place-items: center; min-height: 0; box-shadow: none; }
.head-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 901px) {
  .site-head { background: rgba(251, 248, 240, .96); color: var(--ink); border-bottom: 1px solid var(--gold-line); box-shadow: 0 2px 10px rgba(60, 40, 10, .06); }
  .site-head::after { display: none; }
  .site-head .logo, .site-head .logo:hover { color: var(--ink); }
  .site-head .logo-t small { color: var(--muted); opacity: 1; }
  .site-head .gnav a { color: var(--ink); font-weight: 600; }
  .site-head .gnav a:hover, .site-head .gnav a[aria-current] { background: transparent; color: var(--beni); box-shadow: inset 0 -2px 0 var(--beni); border-radius: 0; }
  .site-head .gnav .yjump { display: none; }
  .head-search { border-color: var(--gold-line); background: #fff; color: var(--ink); }
  .head-search input { display: block; }
  .head-search button { background: var(--ai-deep); color: #fff; padding: 7px 11px; }
  .head-search:focus-within { box-shadow: 0 0 0 3px rgba(201, 162, 74, .35); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-head { background: var(--ai-deep); } }
/* ファーストビュー：明るい金地の絵の上に題字、小さめの入力欄 */
.hero.kin.hc { background: #ead69e; border-bottom: 0; isolation: isolate; color: var(--ink); }
.hero.kin.hc::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("art/top.webp") center 42% / cover no-repeat; filter: brightness(1.16) saturate(1.12) sepia(.14); }
.hero.kin.hc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; background: linear-gradient(180deg, rgba(247, 242, 230, 0), var(--paper)); pointer-events: none; }
.hero.hc .hc-in { padding-block: 40px 64px; gap: 0; }
.hc-title { text-align: center; padding: 18px 40px 20px; background: radial-gradient(ellipse at center, rgba(255, 251, 238, .9) 0, rgba(255, 251, 238, .72) 45%, rgba(255, 251, 238, 0) 72%); }
.hc-title h1 { font-size: clamp(36px, 5vw, 56px); margin: 0; color: #1d1a14; letter-spacing: .1em; line-height: 1.25; font-weight: 800; text-shadow: 0 0 18px rgba(255, 250, 235, .95), 0 0 4px rgba(255, 250, 235, .9); }
.hc-title h1 em { font-style: normal; color: var(--beni); }
.hc-title .sub { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #2b2619; line-height: 1.75; text-shadow: 0 0 8px rgba(255, 250, 235, .95); }
.hc-card { width: min(100%, 480px); margin-top: 14px; background: rgba(255, 253, 248, .94); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(60, 40, 10, .22); padding: 16px 22px 12px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hc-card::before { display: none; }
.hc-card .hc-q { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-align: center; letter-spacing: .04em; }
.hc-card .form { gap: 8px; }
.hc-card .form > label > span:first-child, .hc-card .form .lbl-b { display: none; }
.hc-card .free { color: var(--muted); font-weight: 400; font-size: 12px; text-align: center; }
.hero.hc .hero-links { background: rgba(255, 253, 248, .82); border: 1px solid var(--gold-line); margin-top: 14px; padding: 6px 16px; gap: 4px 0; }
.hero.hc .hero-links a { color: var(--ink); font-size: 13px; text-decoration: none; padding: 2px 12px; border-left: 1px solid var(--gold-line); }
.hero.hc .hero-links a:first-child { border-left: 0; }
.hero.hc .hero-links a:hover { color: var(--beni); }
.hero.kin.hc .art-credit { margin-top: -30px; position: relative; color: rgba(40, 32, 18, .8); }
@media (max-width: 860px) {
  .hero.kin.hc { background: #ead69e; }
  .hero.kin.hc::before { background: url("art/top-s.webp") 30% top / auto 100% repeat-x; }
  .hero.hc .hc-in { padding-block: 26px 44px; }
  .hc-title { padding: 10px 10px 14px; }
  .hc-title h1 { font-size: 36px; }
  .hc-card { padding: 14px 14px 10px; }
  .hero.hc .hero-links { border-radius: 12px; justify-content: center; }
  .hero.hc .hero-links a { padding: 2px 8px; }
}
/* 今日の暦：横一列のマス */
.today-band { background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--r); box-shadow: var(--soft); padding: 16px 20px 14px; }
.today-band .sec-h { margin-bottom: 10px; }
.today .tk { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.today .tk .mon.ic { display: block; width: 64px; height: 64px; border-radius: 50%; background-color: var(--usukin); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gold); }
.today-band .tk { font-size: 40px; padding-right: 18px; border-right: 1px solid var(--gold-line); }
.today-band .t-dl { border: 0; background: #fbf6e9; border-radius: 8px; }
.today-band .t-dl > div { border-color: var(--gold-line); }
.today-band .t-n { font-size: 13.5px; margin: 4px 0 0; }
@media (max-width: 560px) {
  .today-band { padding: 14px 14px 12px; }
  .today-band .today { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
  .today-band .tk { font-size: 26px; padding-right: 10px; }
  .today .tk .mon.ic { width: 52px; height: 52px; }
  .today-band .t-dl { grid-template-columns: 1fr; }
  .today-band .t-dl > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: baseline; border-left: 0; border-bottom: 1px solid var(--gold-line); padding: 5px 10px; }
  .today-band .t-dl > div:last-child { border-bottom: 0; }
  .today-band .t-dl dt { font-size: 12px; }
}
/* 十二支：PCは縦長の札、スマホは丸だけ */
.g12 .crest.pic { background: linear-gradient(180deg, #fffaf0, #f5ebd2); }
@media (max-width: 560px) {
  .g12:has(.crest.pic) { gap: 14px 6px; }
  .g12 .crest.pic { background: none; border: 0; box-shadow: none; padding: 0; }
  .g12 .crest.pic .mon { width: 70px; height: 70px; }
  .g12 .crest.pic:hover { transform: none; }
}
/* 広告：横長のバナー枠 */
.ad.banner { min-height: 120px; border-radius: var(--r); margin-block: 36px; }
@media (max-width: 560px) { .ad.banner { min-height: 100px; } }
/* 人気の占い：PCは6列の写真カード、スマホは2列＋「今すぐ占う」 */
.uranai-cards, .learn-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uranai-cards .card.thumb, .learn-cards .art-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.uranai-cards .th, .learn-cards .th, .card.thumb img.th { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-bottom: 2px solid var(--gold); }
.uc-b { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; }
.uc-b .tag { font-size: 11.5px; letter-spacing: .08em; }
.uranai-cards h3, .learn-cards h3 { font-size: 15.5px; margin: 2px 0 4px; line-height: 1.45; }
.uranai-cards p, .learn-cards p { font-size: 12.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.uc-b .go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--beni); }
.learn-cards time { margin-top: auto; padding-top: 6px; }
@media (min-width: 1000px) {
  .uranai-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .uranai-cards .wide { grid-column: span 2; flex-direction: row; }
  .uranai-cards .wide .th { width: 42%; flex: none; border-bottom: 0; border-right: 2px solid var(--gold); }
  .learn-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid.uranai-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .uranai-cards .card p { display: -webkit-box; -webkit-line-clamp: 2; }
  .uranai-cards .card h3 { font-size: 14.5px; }
  .uranai-cards .uc-b { text-align: center; padding: 8px 10px 12px; }
  .uc-b .go { align-self: center; padding: 6px 16px; margin-top: 10px; border: 1px solid var(--beni); border-radius: 999px; font-size: 12.5px; }
  .uranai-cards .wide { grid-column: 1 / -1; flex-direction: row; }
  .uranai-cards .wide .th { width: 38%; flex: none; border-bottom: 0; border-right: 2px solid var(--gold); }
  .uranai-cards .wide .uc-b { text-align: left; }
  .uranai-cards .wide .go { align-self: flex-start; }
  .uranai-cards > :last-child:nth-child(odd) .th { height: auto; }
  .learn-cards { grid-template-columns: 1fr; gap: 10px; }
  .learn-cards .art-card { flex-direction: row; }
  .learn-cards .th { width: 34%; flex: none; border-bottom: 0; border-right: 2px solid var(--gold); }
  .learn-cards p { -webkit-line-clamp: 2; }
}
/* 見本の結果：重い枠をやめて軽く */
.quick-res .print { padding: 18px 20px; }
.quick-res .print > .sec-h { margin-bottom: 10px; }
/* 下部ナビとフッターの金 */
.foot-band { border-top: 2px solid var(--gold); }
.hc-card .form > .note { display: none; }
.hc-card .dsel legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hc-title { width: min(100%, 900px); }
@media (min-width: 1000px) { .uranai-cards .card.wide { flex-direction: row; } }
@media (max-width: 560px) { .uranai-cards .card.wide { flex-direction: row; } .learn-cards .card.art-card { flex-direction: row; } }
.uc-b .tag { align-self: flex-start; }
@media (min-width: 1000px) { .uranai-cards .card.wide img.th { width: 42%; aspect-ratio: auto; min-height: 100%; } }
@media (max-width: 560px) {
  .uranai-cards .card.wide img.th { width: 38%; aspect-ratio: 4 / 3; align-self: stretch; height: auto; }
  .learn-cards .card img.th { width: 34%; aspect-ratio: auto; height: auto; align-self: stretch; }
  .uranai-cards .uc-b .tag { align-self: center; }
  .uranai-cards .wide .uc-b .tag { align-self: flex-start; }
  .today-band .today { grid-template-columns: 1fr; }
  .today-band .tk { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--gold-line); font-size: 30px; }
}
/* メインの絵（AI生成の金屏風風） */
.hero.kin.hc.ai::before { display: none; }
.hero.ai .hero-img { position: absolute; inset: 0; z-index: -2; }
.hero.ai .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.hero.ai .hc-title { background: radial-gradient(ellipse at center, rgba(255, 246, 214, .55) 0, rgba(255, 246, 214, .3) 50%, rgba(255, 246, 214, 0) 72%); }
.hero.ai .hc-in { padding-block: 48px 72px; }
@media (max-width: 860px) {
  .hero.ai .hero-img img { object-position: center top; }
  .hero.ai .hc-in { padding-block: 56px 44px; }
  .hero.ai .hc-title { background: radial-gradient(ellipse at center, rgba(255, 246, 214, .82) 0, rgba(255, 246, 214, .55) 50%, rgba(255, 246, 214, 0) 75%); }
}
.hero .hc-title p.sub { max-width: none; }
@media (min-width: 1000px) {
  .layout.full .g12 .crest.pic, .sec .g12 .crest.pic { padding: 10px 6px 12px; }
  .sec .g12 .crest.pic .mon { width: 100%; max-width: 88px; height: auto; aspect-ratio: 1; }
  .sec .g12 .crest.pic .ck { font-size: 24px; margin-top: 4px; }
}
/* 題字を金地の余白に、説明文は絵の下端へ（よし君の指示 2026-10-30） */
.hero.ai .hc-title { padding: 22px 56px 18px; background: radial-gradient(ellipse at center, rgba(255, 249, 230, .88) 0, rgba(255, 249, 230, .7) 42%, rgba(255, 249, 230, 0) 72%); }
.hero.ai .hc-title h1 { font-size: clamp(34px, 4vw, 50px); color: #15120c; text-shadow: 0 0 2px #fff8e6, 0 0 14px rgba(255, 248, 228, 1), 0 0 30px rgba(255, 248, 228, .9); }
br.pc-only { display: inline; }
.hero-about { position: relative; margin: -34px auto 0; padding: 0 16px 12px; text-align: right; font-size: 12.5px; line-height: 1.7; color: #2b2416; font-weight: 600; text-shadow: 0 0 6px rgba(255, 249, 230, .95), 0 0 12px rgba(255, 249, 230, .9); }
@media (max-width: 860px) {
  .hero.ai { background: #e8cd84; }
  .hero.ai .hero-img { bottom: auto; }
  .hero.ai .hero-img img { height: auto; aspect-ratio: 1122 / 1402; }
  .hero.ai .hc-in { padding-block: 205px 40px; }
  .hero.ai .hc-title { padding: 12px 10px 10px; background: radial-gradient(ellipse at center, rgba(255, 249, 230, .9) 0, rgba(255, 249, 230, .65) 48%, rgba(255, 249, 230, 0) 75%); }
  .hero.ai .hc-title h1 { font-size: 34px; }
  .hero-about { margin-top: -26px; text-align: center; font-size: 12px; padding-bottom: 14px; }
  br.pc-only { display: none; }
}