
:root {
  --lb-band: #0B0E0F;       
  --lb-band-line: #3A4447;
  --lb-on-band: #F2F5F5;
  --lb-on-band-2: #A7B1B3;
  --lb-yellow: #FFD400;     
  --lb-ink: #121819;        
  --lb-ink-2: #3C4649;      
  --lb-ink-3: #5A6568;      
  --lb-line: #D3DCDF;
  --lb-line-2: #C4CFD2;
  --lb-wash: #F3F6F7;
  --lb-link: #121819;       
  --lb-teal: #121819;       
  --lb-live: #15803D;
  --lb-wait: #B45309;
  --lb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lb-cond: "Avenir Next Condensed", "DIN Condensed", "Bahnschrift Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", sans-serif;
  --lb-wide: 1120px;
  --lb-grid: repeating-linear-gradient(0deg, rgba(11, 14, 15, 0.1) 0 1px, transparent 1px 24px),
             repeating-linear-gradient(90deg, rgba(11, 14, 15, 0.1) 0 1px, transparent 1px 24px);
  --lb-grid-faint: repeating-linear-gradient(0deg, rgba(11, 14, 15, 0.05) 0 1px, transparent 1px 24px),
                   repeating-linear-gradient(90deg, rgba(11, 14, 15, 0.05) 0 1px, transparent 1px 24px);
}

.lb-header { background: var(--lb-band); border-bottom: 0; }
nav.lb-nav {
  max-width: var(--lb-wide); min-height: 72px; padding: 0 1.5rem; gap: 1rem;
  align-items: stretch;
}
.lb-brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.lb-brand__sep { width: 1px; height: 20px; background: var(--lb-band-line); flex: none; }
.lb-brand__name {
  font-family: var(--lb-cond); font-size: 1.5rem; font-weight: 800; font-style: italic;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  color: var(--lb-yellow); text-decoration: none; white-space: nowrap;
}
.lb-tabs { display: flex; gap: 1.75rem; flex: none; }
.lb-tabs a {
  display: flex; align-items: center; padding: 4px 2px 0;
  border-bottom: 4px solid transparent;
  font-size: 0.94rem; font-weight: 700; color: var(--lb-on-band-2);
  text-decoration: none; white-space: nowrap;
}
.lb-tabs a:hover { color: var(--lb-on-band); }
.lb-tabs a[aria-current] { color: #fff; border-bottom-color: var(--lb-yellow); }
.lb-tabs a:focus-visible, .lb-brand a:focus-visible { outline: 3px solid var(--lb-yellow); outline-offset: 2px; }
@media (max-width: 600px) {
  nav.lb-nav { min-height: 60px; padding: 0 1rem; }
  .lb-brand { gap: 0.6rem; }
  .lb-brand__name { font-size: 1.3rem; }
  .lb-tabs { gap: 1.1rem; }
  .lb-tabs a { font-size: 0.875rem; }
}
@media (max-width: 350px) {
  .lb-brand .logo img { width: 64px; height: auto; }
  .lb-tabs { gap: 0.8rem; }
  .lb-tabs a { font-size: 0.8rem; }
}

footer {
  background: var(--lb-band); color: var(--lb-on-band-2); border-top: 0; text-align: left;
  padding: 2.25rem max(1.5rem, calc((100% - var(--lb-wide)) / 2 + 1.5rem)) 2.5rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "co links" "copy links";
  gap: 0.2rem 2rem; align-items: center;
}
.footer-company { grid-area: co; margin: 0; color: var(--lb-on-band-2); }
.footer-company strong { color: var(--lb-on-band); font-weight: 700; }
footer > p { grid-area: copy; margin: 0; }
footer .footer-links { grid-area: links; margin: 0; justify-content: flex-end; gap: 0.5rem 1.4rem; }
footer .footer-links a { color: var(--lb-on-band); font-weight: 700; }
footer .footer-links a:hover { color: var(--lb-yellow); }
@media (max-width: 640px) {
  footer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "co" "copy" "links"; padding: 1.75rem 1rem 2rem; }
  footer .footer-links { justify-content: flex-start; margin-top: 0.8rem; }
}

.lb-cover nav, nav.note-toc { display: block; max-width: none; width: auto; margin: 0; padding: 0; gap: 0; }

main.lb-main { flex: 1; display: block; }
.lb-wrap { max-width: var(--lb-wide); margin: 0 auto; padding: 2.75rem 1.5rem 4rem; }
.lb-kick {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem;
  font-family: var(--lb-cond); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lb-ink); line-height: 1.2;
}
.lb-kick::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.lb-hl { background: linear-gradient(transparent 62%, var(--lb-yellow) 62%, var(--lb-yellow) 94%, transparent 94%); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 600px) {
  .lb-wrap { padding: 1.75rem 1rem 3rem; }
}

.lb-cover { background-color: var(--lb-yellow); background-image: var(--lb-grid); }
.lb-cover__in {
  max-width: var(--lb-wide); margin: 0 auto; padding: 3.25rem 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3.5rem; align-items: end;
}
.lb-cover h1 {
  font-size: 5rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
  color: var(--lb-band); margin-bottom: 1.1rem;
}
.lb-cover__lead {
  max-width: 34em; font-size: 1rem; line-height: 1.9; color: #2B2A1C;
  word-break: auto-phrase; text-wrap: pretty;
}
@media (max-width: 980px) {
  .lb-cover__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 600px) {
  .lb-cover__in { padding: 1.75rem 1rem 1.6rem; gap: 1.25rem; }
  .lb-cover h1 { font-size: 3.25rem; margin-bottom: 0.75rem; }
  .lb-cover__lead { font-size: 0.94rem; line-height: 1.8; }
}

.app-index__cap { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; font-size: 0.75rem; font-weight: 700; color: #2B2A1C; }
.app-index__cap b { font-family: var(--lb-cond); font-size: 0.82rem; letter-spacing: 0.16em; color: var(--lb-band); }
.app-index { list-style: none; display: grid; grid-template-columns: repeat(4, 112px); gap: 12px; }
.app-index a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; height: 118px; padding: 14px 6px 10px;
  background: #fff; border: 1.5px solid var(--lb-band); color: var(--lb-ink); text-decoration: none;
  font-size: 0.72rem; font-weight: 700; line-height: 1.3; text-align: center;
}
.app-index a:hover { background: var(--lb-band); color: #fff; }
.app-index img { width: 52px; height: 52px; border-radius: 12px; display: block; }
@media (max-width: 980px) {
  .app-index { grid-template-columns: repeat(auto-fill, 112px); }
}
@media (max-width: 600px) {
  .app-index { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
  .app-index a { height: auto; padding: 0; gap: 0; background: none; border: 0; }
  .app-index a:hover { background: none; }
  .app-index img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 22%; }
  .app-index a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.lb-shelf__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.5rem;
  padding-bottom: 0.8rem; border-bottom: 2px solid var(--lb-ink);
}
.lb-shelf__title { display: flex; align-items: baseline; gap: 0.75rem; }
.lb-shelf__title h2 {
  font-family: var(--lb-cond); font-size: 1.75rem; font-weight: 800; font-style: italic;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; color: var(--lb-ink);
}
.lb-shelf__title span { font-size: 0.8rem; font-weight: 700; color: var(--lb-ink-3); }
.lb-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8rem; font-weight: 700; color: var(--lb-ink-2); }
.lb-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lb-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lb-live); }
.lb-legend span.is-wait::before { background: none; border: 1.6px solid var(--lb-wait); box-sizing: border-box; }

.app-list { list-style: none; counter-reset: app; }
.app {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 390px; gap: 1.75rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--lb-line);
  counter-increment: app; scroll-margin-top: 1rem;
}
.app:target { background: linear-gradient(90deg, rgba(255, 212, 0, 0.22), rgba(255, 212, 0, 0)); }
.app__icon { width: 72px; height: 72px; border-radius: 16px; border: 1px solid #E4EAEC; display: block; }
.app__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.45rem; font-size: 0.75rem; color: var(--lb-ink-3); }
.app__meta::before { content: "No." counter(app, decimal-leading-zero); font-family: var(--lb-mono); font-weight: 700; }
.app__plat {
  font-family: var(--lb-cond); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lb-ink); border: 1.2px solid var(--lb-ink); padding: 2px 6px 1px; line-height: 1.3;
}
.app__name { font-size: 1.375rem; line-height: 1.35; font-weight: 800; color: var(--lb-ink); margin-bottom: 0.45rem; }
.app__desc { font-size: 0.94rem; line-height: 1.75; color: var(--lb-ink-2); word-break: auto-phrase; text-wrap: pretty; }
.app__note { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.7; color: var(--lb-ink-3); word-break: auto-phrase; }
.app__side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.app__price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; font-size: 0.82rem; line-height: 1.6; }
.app__price dt { font-weight: 700; color: var(--lb-ink-3); }
.app__price dd { color: var(--lb-ink-2); }
.st {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 4px 10px 3px 9px;
  border: 1.5px solid currentColor; font-size: 0.8rem; font-weight: 700; line-height: 1.4;
}
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.st--live { color: var(--lb-live); }
.st--wait { color: var(--lb-wait); border-style: dashed; }
.st--wait::before { background: none; border: 1.6px solid currentColor; box-sizing: border-box; }
.app__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.lb-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.66rem 1rem 0.6rem;
  background: var(--lb-ink); color: #fff; font-size: 0.875rem; font-weight: 700; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.lb-btn::after { content: "→"; font-family: var(--lb-cond); font-weight: 700; font-size: 1.05em; color: var(--lb-yellow); }
.lb-btn:hover { background: var(--lb-yellow); color: var(--lb-ink); }
.lb-btn:hover::after { color: var(--lb-ink); }
.lb-lnk {
  font-size: 0.84rem; font-weight: 700; color: var(--lb-ink); text-decoration: underline;
  text-decoration-color: var(--lb-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.lb-lnk:hover { background: var(--lb-yellow); }
.lb-btn:focus-visible, .lb-lnk:focus-visible, .app-index a:focus-visible { outline: 3px solid var(--lb-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .app { grid-template-columns: 56px minmax(0, 1fr); gap: 0.9rem 1rem; }
  .app__icon { width: 56px; height: 56px; border-radius: 13px; }
  .app__side { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .lb-legend { display: none; }
  .app { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 0; padding: 1.3rem 0; }
  .app__main { display: contents; }
  .app__icon { grid-row: 1 / span 2; align-self: center; }
  .app__meta { grid-column: 2; align-self: end; margin-bottom: 0.25rem; }
  .app__name { grid-column: 2; align-self: start; margin-bottom: 0; font-size: 1.2rem; }
  .app__desc, .app__note { grid-column: 1 / -1; }
  .app__desc { margin-top: 0.8rem; }
  .app__side { grid-column: 1 / -1; margin-top: 0.9rem; }
}

.lb-data { background: var(--lb-wash); }
.lb-data__in { max-width: var(--lb-wide); margin: 0 auto; padding: 3rem 1.5rem 3.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.lb-data h2 { font-size: 1.875rem; line-height: 1.35; font-weight: 800; color: var(--lb-ink); }
.lb-data__lead { max-width: 47.5em; font-size: 0.94rem; line-height: 1.85; color: var(--lb-ink-2); word-break: auto-phrase; }
.lb-data__note { font-size: 0.8rem; line-height: 1.7; color: var(--lb-ink-3); }
.lb-dtable { background: #fff; border-top: 2px solid var(--lb-ink); overflow-x: auto; }
.lb-dtable table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lb-dtable th { text-align: left; font-size: 0.78rem; font-weight: 700; color: var(--lb-ink-3); padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--lb-line); white-space: nowrap; }
.lb-dtable td { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--lb-line); color: var(--lb-ink-2); vertical-align: middle; }
.lb-dtable .app-cell { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--lb-ink); white-space: nowrap; }
.lb-dtable .app-cell img { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #E4EAEC; flex: none; }
.ad-yes { display: inline-block; margin-right: 0.6rem; padding: 2px 8px 1px; background: var(--lb-ink); color: #fff; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.ad-no { color: var(--lb-ink-3); }
.ad-note { color: var(--lb-ink-3); font-size: 0.8rem; }
@media (max-width: 640px) {
  .lb-data__in { padding: 2rem 1rem 2.4rem; }
  .lb-data h2 { font-size: 1.5rem; }
  .lb-dtable thead { display: none; }
  .lb-dtable table, .lb-dtable tbody, .lb-dtable td { display: block; }
  .lb-dtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--lb-line); }
  .lb-dtable td { padding: 0; border: 0; }
  .lb-dtable td.app-cell { flex: 1 1 calc(100% - 5rem); }
  .lb-dtable td.pol { flex: none; margin-left: auto; }
  .lb-dtable td[data-label], .lb-dtable td.ads .ad-no { font-size: 0.75rem; font-weight: 700; padding: 2px 7px 1px; border: 1.2px solid var(--lb-ink-2); color: var(--lb-ink-2); }
  .lb-dtable td[data-label] { flex: none; order: 2; }
  .lb-dtable td[data-label]::before { content: attr(data-label) " "; }
  .lb-dtable td.ads { order: 3; flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
  .lb-dtable td.ads .ad-no::before { content: "広告 "; }
  .lb-dtable .ad-yes { margin-right: 0; }
}

.lb-cover--notes .lb-cover__in { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 980px) { .lb-cover--notes .lb-cover__in { grid-template-columns: minmax(0, 1fr); } }

.bench { position: relative; background: var(--lb-band); color: var(--lb-on-band); padding: 1rem 1.25rem 0.6rem; }
.bench__title { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--lb-on-band-2); }
.bench__title b { font-family: var(--lb-cond); font-size: 0.85rem; letter-spacing: 0.16em; color: var(--lb-yellow); }
.bench dl { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); }
.bench dl div { display: contents; }
.bench dt, .bench dd { padding: 0.5rem 0; border-top: 1px solid var(--lb-band-line); }
.bench dt { font-family: var(--lb-mono); font-size: 0.74rem; font-weight: 700; color: var(--lb-on-band-2); padding-top: 0.62rem; }
.bench dd { font-size: 0.875rem; font-weight: 700; color: var(--lb-on-band); line-height: 1.5; }
.bench dd small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--lb-on-band-2); }
.bench--corner::after { content: ""; position: absolute; right: -8px; bottom: -8px; width: 64px; height: 40px; border-right: 6px solid var(--lb-yellow); border-bottom: 6px solid var(--lb-yellow); pointer-events: none; }
@media (max-width: 600px) {
  .lb-cover .bench dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .lb-cover .bench dl div { display: block; border-top: 1px solid var(--lb-band-line); padding: 0.45rem 0; }
  .lb-cover .bench dt, .lb-cover .bench dd { border: 0; padding: 0; }
}

.note-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.1rem; }
.note-filter button {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 6px 12px 5px; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--lb-ink); background: #fff; border: 1.5px solid var(--lb-ink);
}
.note-filter button span { font-family: var(--lb-cond); font-size: 0.95rem; font-weight: 800; color: var(--lb-ink-3); }
.note-filter button[aria-pressed="true"] { background: var(--lb-ink); color: #fff; }
.note-filter button[aria-pressed="true"] span { color: var(--lb-yellow); }
.note-filter button:focus-visible { outline: 3px solid var(--lb-yellow); outline-offset: 2px; }

.note-list { list-style: none; border-top: 2px solid var(--lb-ink); }
.note-list > li { border-bottom: 1px solid var(--lb-line); }
.nrow {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas: "no meta" "fig title" "fig sum";
  grid-template-rows: auto auto 1fr; column-gap: 2.5rem; row-gap: 0.45rem;
  padding: 1.5rem 0 1.7rem; text-decoration: none; color: inherit;
}
.nrow__body { display: contents; }
.nrow__no { grid-area: no; align-self: center; font-family: var(--lb-mono); font-size: 0.75rem; font-weight: 700; color: var(--lb-ink-3); }
.nrow__meta {
  grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.65rem;
  font-family: var(--lb-mono); font-size: 0.78rem; color: var(--lb-ink-3);
}
.nrow__tag {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 0.72rem; font-weight: 700; color: var(--lb-ink); border: 1.2px solid var(--lb-ink); padding: 2px 7px 1px; line-height: 1.4;
}
.nrow__title { grid-area: title; font-size: 1.3rem; line-height: 1.55; font-weight: 800; color: var(--lb-ink); word-break: auto-phrase; text-wrap: pretty; }
.nrow:hover .nrow__title { text-decoration: underline; text-decoration-color: var(--lb-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.nrow:focus-visible { outline: 3px solid var(--lb-ink); outline-offset: 4px; }
.nrow__sum { grid-area: sum; font-size: 0.94rem; line-height: 1.8; color: var(--lb-ink-2); }
.nrow__fig { grid-area: fig; display: flex; flex-direction: column; align-items: flex-start; padding: 0.2rem 0 0; }
.fig-num {
  font-family: var(--lb-cond); font-size: 3.1rem; font-weight: 800; font-style: italic; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--lb-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
  background: linear-gradient(transparent 58%, var(--lb-yellow) 58%, var(--lb-yellow) 92%, transparent 92%); padding: 0 0.12em 0 0.04em;
}
.fig-num small { font-size: 0.52em; font-weight: 800; letter-spacing: 0; }
.fig-label { display: block; margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.55; color: var(--lb-ink-3); }
.fig-label b { display: block; font-weight: 700; color: var(--lb-ink-2); }
@media (max-width: 760px) {
  .nrow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no meta" "fig fig" "title title" "sum sum"; grid-template-rows: none; column-gap: 0.65rem; row-gap: 0.5rem; padding: 1.2rem 0 1.4rem; }
  .nrow__fig { flex-direction: row; align-items: center; gap: 0.8rem; padding: 0.15rem 0; }
  .fig-num { font-size: 2.4rem; }
  .fig-label { margin-top: 0; }
  .nrow__title { font-size: 1.12rem; line-height: 1.6; }
}
