.houi {
  --goldL: #e8c65a; --dim: rgba(232, 236, 248, .30); --red: #e2645f;
  
  --board: #f4f6fb; --line: rgba(60, 70, 104, .30); --oct: rgba(138, 109, 18, .55);
  --txt: #2a3350; --txtKyo: rgba(60, 70, 104, .45); --kichiFill: rgba(201, 162, 39, .22);
  --kichiLine: #8a6d12; --kichiTxt: #7a5f10; --mkX: rgba(60, 70, 104, .40); --numC: rgba(60, 70, 104, .55); --boardRed: #b5232a;
  background: #05060f; color: #e8ecf8; min-height: 100svh;
}
.houi #bg { position: fixed; inset: 0; z-index: 0; background: #05060f; }
.houi #bg canvas { width: 100%; height: 100%; display: block; }
.houi .nav { z-index: 3; }
.houi #wrap { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 84px 18px 80px; }
.houi h1 { font-size: 12px; letter-spacing: .24em; color: var(--goldL); font-weight: 700; margin: 0 0 6px; text-align: center; }
.houi #date { text-align: center; font-size: 19px; letter-spacing: .06em; margin: 0 0 20px; }
.houi .lead { text-align: center; font-size: 13px; color: var(--dim); line-height: 1.9; margin: 0 0 22px; }
.houi [data-houi="error"] { margin: 0 0 22px; padding: 14px 16px; border-radius: 11px; background: rgba(226, 100, 95, .10); border: 1px solid rgba(226, 100, 95, .35); font-size: 13px; line-height: 1.8; }
.houi [data-houi="error"][hidden] { display: none; }

.houi .star { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; text-decoration: none;
  padding: 14px 15px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(201, 162, 39, .22); color: inherit; }
.houi .star:hover { background: rgba(255, 255, 255, .08); }
.houi .star.mine { border-color: rgba(201, 162, 39, .7); background: rgba(201, 162, 39, .10); }
.houi .star .nm { font-size: 15.5px; letter-spacing: .05em; flex: 0 0 auto; width: 96px; }
.houi .star .yr { font-size: 11.5px; color: var(--dim); line-height: 1.6; flex: 1 1 auto; }
.houi .star.mine .yr { color: var(--goldL); }
.houi .star .yr .nb { white-space: nowrap; }
.houi .star .ar { color: rgba(201, 162, 39, .7); font-size: 15px; }
.houi #notice { margin: 0 0 22px; padding: 14px 16px; border-radius: 11px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px; line-height: 1.9; color: rgba(232, 236, 248, .68); }
.houi #notice p { margin: 0 0 9px; }
.houi #notice p:last-child { margin: 0; }
.houi #notice b { color: var(--goldL); font-weight: 700; }
.houi #dob { margin-top: 16px; padding: 14px 15px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .55); }
.houi #dob a { color: var(--goldL); }

.houi #notice + .guide-banner { margin: 16px 0 18px; }

.houi .guide-banner { display: flex; align-items: center; gap: 11px; margin: 0 0 6px; padding: 11px 14px;
  border: 1px dashed rgba(201, 162, 39, .75); border-radius: 11px; background: transparent;
  color: inherit; font-size: 14px; line-height: 1.7; text-decoration: none; }
.houi .guide-banner:hover, .houi .guide-banner:focus-visible { background: rgba(201, 162, 39, .08); border-color: rgba(201, 162, 39, 1); }
.houi .gb-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--goldL);
  display: flex; align-items: center; justify-content: center; color: #05060f; font-size: 13px; font-weight: 800; }
.houi .gb-body { flex: 1 1 auto; }
.houi .gb-link { color: var(--goldL); font-weight: 700; white-space: nowrap; }

.houi .y2027-go { margin: 14px 0 0; }

.houi #dob .dob-go { margin: 10px 0 8px; }
.houi #dob .dob-note { display: block; }

.houi .paid-row .pr-note { display: block; margin-top: 2px; font-size: 12px; color: rgba(232, 236, 248, .55); }

.houi #who { text-align: center; font-size: 12.5px; color: var(--dim); margin: 0 0 14px; }
.houi svg { width: 100%; height: auto; display: block; }
.houi .oct { fill: var(--board); stroke: var(--oct); stroke-width: 1.2; }
.houi .sect { fill: none; stroke: var(--line); stroke-width: 1; }
.houi .sect.kichi { fill: var(--kichiFill); stroke: var(--kichiLine); stroke-width: 1.6; }
.houi .hubdot { fill: var(--oct); }
.houi .axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.houi .dir { font-size: 18px; fill: var(--txt); text-anchor: middle; dominant-baseline: middle; }
.houi .dir.kichi { fill: var(--kichiTxt); font-weight: 700; }
.houi .dir.kyo { fill: var(--txtKyo); }
.houi .dir.sei { fill: var(--boardRed); }
.houi .axis.sei { stroke: var(--boardRed); opacity: .85; }
.houi .mk { font-size: 21px; text-anchor: middle; dominant-baseline: middle; }
.houi .mk.o { fill: var(--kichiTxt); }
.houi .mk.x { fill: var(--mkX); }
.houi .num { font-size: 12px; text-anchor: middle; dominant-baseline: middle; fill: var(--numC); }
.houi .row { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); align-items: flex-start; }
.houi .row:last-child { border-bottom: 0; }
.houi .badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.houi .badge.o { background: rgba(201, 162, 39, .9); color: #1a1405; }
.houi .badge.x { background: rgba(255, 255, 255, .10); color: rgba(232, 236, 248, .55); }
.houi .txt { flex: 1; font-size: 14px; line-height: 1.85; }
.houi .txt b { color: var(--goldL); margin-right: 6px; }
.houi #foot { margin-top: 20px; padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .60); }
.houi #foot p { margin: 0 0 1em; }
.houi #foot p:last-child { margin: 0; }
.houi #back { display: block; margin-top: 22px; width: 100%; padding: 13px; border-radius: 11px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14); color: rgba(232, 236, 248, .7); font-size: 13px; text-align: center; text-decoration: none; }

.houi #paid { margin-top: 22px; padding: 14px 15px; border: 1px dashed rgba(201, 162, 39, .35); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .6); text-align: left; }

.houi #paid p { margin: 0; }

.houi #wrap > .dir-note { margin: 6px 0 16px; text-align: center; font-size: .8rem; color: var(--dim); }

.houi .houi-intro { margin: 0 0 22px; font-size: 13.5px; line-height: 1.95; color: rgba(232, 236, 248, .82); }
.houi .houi-intro p { margin: 0 0 .7em; }
.houi .houi-intro p:last-child { margin: 0; }

.houi .houi-intro.folded summary { cursor: pointer; list-style: none; color: var(--goldL); font-size: 13px; letter-spacing: .04em; }
.houi .houi-intro.folded summary::-webkit-details-marker { display: none; }
.houi .houi-intro.folded summary::before { content: "▸"; display: inline-block; margin-right: .5em; transition: transform .15s; }
.houi .houi-intro.folded[open] summary::before { transform: rotate(90deg); }
.houi .houi-intro.folded[open] summary { margin-bottom: 12px; }

.houi .mamori { margin: 14px 0 0; padding: 12px 15px; border-radius: 11px; background: rgba(255, 255, 255, .05);
  font-size: 14px; line-height: 1.85; color: rgba(232, 236, 248, .85); }

.houi .tomap-row { margin-top: 22px; } 

.houi .daytabs { display: flex; gap: 8px; margin: 0 0 14px; }
.houi .daytabs button { flex: 1 1 0; min-width: 0; padding: 10px 4px; border-radius: 10px; font: inherit; font-size: 13.5px;
  letter-spacing: .02em; white-space: nowrap; cursor: pointer; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16); color: rgba(232, 236, 248, .7); }
.houi .daytabs button[aria-pressed="true"] { background: rgba(201, 162, 39, .16); border-color: rgba(201, 162, 39, .8); color: var(--goldL); font-weight: 700; }
.houi .daytabs button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .09); }

.houi .rank { margin: 0 0 18px; padding: 14px 15px 6px; border: 1px solid rgba(201, 162, 39, .45); border-radius: 11px; background: rgba(201, 162, 39, .06); }
.houi .rank h2 { margin: 0 0 4px; font-size: 14.5px; letter-spacing: .06em; color: var(--goldL); font-weight: 700; }
.houi .rank-lead { margin: 0 0 8px; font-size: 12.5px; line-height: 1.8; color: rgba(232, 236, 248, .65); }
.houi .rank-row { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.houi .rank-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.houi .rank-dir { font-size: 16px; color: rgba(232, 236, 248, .95); letter-spacing: .04em; }
.houi .rank-name { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1px solid rgba(232, 236, 248, .3); color: rgba(232, 236, 248, .85); }
.houi .rank-row.saidai .rank-name { background: rgba(201, 162, 39, .9); border-color: rgba(201, 162, 39, .9); color: #1a1405; }
.houi .rank-head small { font-size: 11.5px; color: rgba(232, 236, 248, .55); }
.houi .rank-rel, .houi .rank-kichijin { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: rgba(232, 236, 248, .8); }
.houi .rank-lead, .houi .rank-rel, .houi .rank-kichijin, .houi .rank-none { text-wrap: pretty; }
.houi .rank-term { white-space: nowrap; }
.houi .rank-kichijin { color: var(--goldL); }
.houi .rank-none { margin: 4px 0 8px; font-size: 14px; line-height: 1.85; color: rgba(232, 236, 248, .85); }