.jl-wrap { max-width: 960px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.note-wrap .jl-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.jl-toc li { margin: 0; }
.jl-toc a {
  display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--lb-line-2); border-radius: 999px;
  font-size: 0.85rem; color: var(--lb-link); text-decoration: none; background: #fff;
}
.jl-toc a:hover { background: var(--lb-wash); }

.jl-controls {
  display: grid; gap: 0.9rem; margin: 0.6rem 0 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--lb-line); border-radius: 12px; background: var(--lb-wash);
}
.jl-field { display: grid; gap: 0.4rem; }
.jl-field > .jl-label { font-size: 0.8rem; font-weight: 700; color: var(--lb-ink-2); letter-spacing: 0.02em; }
.jl-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jl-seg label {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; cursor: pointer;
  border: 1px solid var(--lb-line-2); border-radius: 8px; background: #fff; font-size: 0.88rem; color: var(--lb-ink-2);
}
.jl-seg input { accent-color: var(--lb-link); margin: 0; }
.jl-seg label:has(input:checked) { border-color: var(--lb-link); color: var(--lb-ink); background: #eaf6f4; font-weight: 600; }
.jl-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.jl-row input[type="search"], .jl-row select {
  font: inherit; font-size: 0.9rem; padding: 0.45rem 0.65rem; border: 1px solid var(--lb-line-2);
  border-radius: 8px; background: #fff; color: var(--lb-ink); min-width: 0;
}
.jl-row input[type="search"] { flex: 1 1 14rem; }
.jl-row .jl-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--lb-ink-2); }
.jl-count { font-size: 0.82rem; color: var(--lb-ink-3); margin: 0 0 0.5rem; }

.jl-table-wrap { border: 1px solid var(--lb-line); border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 0.6rem; }
.jl-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.jl-table th, .jl-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #edf2f1; text-align: right; vertical-align: top; }
.jl-table th { background: #f6faf9; color: #43534f; font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.jl-table th[data-sort] { cursor: pointer; user-select: none; }
.jl-table th[data-sort]::after { content: " ↕"; font-size: 0.7rem; opacity: 0.5; }
.jl-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
.jl-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
.jl-table th:first-child, .jl-table td:first-child { text-align: left; }
.jl-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jl-table td.rate { text-align: left; white-space: nowrap; }
.jl-table tr:last-child td { border-bottom: 0; }
.jl-table tr[hidden] { display: none; }
.jl-shop a { font-weight: 600; text-decoration: none; }
.jl-shop a:hover { text-decoration: underline; }
.jl-cat { display: block; font-size: 0.75rem; color: var(--lb-ink-3); margin-top: 0.15rem; }
.jl-r { white-space: nowrap; }
.jl-base { display: block; font-size: 0.75rem; color: var(--lb-ink-3); white-space: nowrap; }
.jl-ypl { font-weight: 700; color: var(--lb-ink); }
.jl-tag {
  display: inline-block; padding: 0.05rem 0.45rem; margin: 0.1rem 0 0.1rem 0.25rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap; line-height: 1.6;
}
.jl-tag--mult { background: #fff1e6; color: #9a3412; }
.jl-tag--card { background: #e8f1fb; color: #1e4f8a; }
.jl-tag--bonus { background: #f3ecfb; color: #5b2a86; }
.jl-tag--no { background: #f1f3f3; color: #4b5563; }
.jl-empty { padding: 1rem; text-align: center; color: var(--lb-ink-3); font-size: 0.9rem; }
.jl-more { text-align: center; margin: 0.4rem 0 1rem; }
.jl-more button {
  font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1.2rem; cursor: pointer;
  border: 1px solid var(--lb-link); border-radius: 999px; background: #fff; color: var(--lb-link);
}
.jl-more button:hover { background: #eaf6f4; }

.jl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.jl-stat { border: 1px solid var(--lb-line); border-radius: 12px; padding: 0.9rem 1rem; background: #fff; }
.jl-stat .v { display: block; font-size: 1.6rem; font-weight: 700; color: var(--lb-teal); font-variant-numeric: tabular-nums; line-height: 1.3; }
.jl-stat .k { display: block; font-size: 0.8rem; color: var(--lb-ink-3); margin-top: 0.2rem; line-height: 1.5; }

.jl-calc { border: 1px solid var(--lb-line); border-radius: 12px; padding: 1.1rem 1.2rem; background: #fff; margin: 0.6rem 0 1.4rem; }
.jl-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.2rem; }
.jl-calc label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--lb-ink-2); font-weight: 600; }
.jl-calc label small { font-weight: 400; color: var(--lb-ink-3); font-size: 0.78rem; }
.jl-calc input, .jl-calc select {
  font: inherit; font-size: 0.95rem; padding: 0.45rem 0.6rem; border: 1px solid var(--lb-line-2); border-radius: 8px;
  background: #fff; color: var(--lb-ink); width: 100%; box-sizing: border-box;
}
.jl-result { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; background: #eaf6f4; color: var(--lb-ink); line-height: 1.8; }
.jl-result strong { font-size: 1.15rem; color: #0b4f49; }

@media (max-width: 720px) {
  .jl-stats { grid-template-columns: minmax(0, 1fr); }
  .jl-calc-grid { grid-template-columns: minmax(0, 1fr); }
  .jl-table thead { display: none; }
  .jl-table, .jl-table tbody { display: block; width: 100%; }
  .jl-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.6rem; row-gap: 0.2rem;
    border-bottom: 1px solid #e3ebe9; padding: 0.65rem 0.85rem;
  }
  .jl-table tr[hidden] { display: none; }
  .jl-table tr:last-child { border-bottom: 0; }
  .jl-table td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; }
  .jl-table td.jl-shop { grid-column: 1 / -1; }
  .jl-table td.rate { grid-column: 1 / -1; white-space: normal; font-size: 0.82rem; color: var(--lb-ink-2); }
  .jl-table td.rate::before { content: attr(data-label) "　"; color: var(--lb-ink-3); font-size: 0.75rem; }
  .jl-table td.rate .jl-base { display: inline; margin-left: 0.4rem; }
  .jl-table td.num { padding-top: 0.25rem; }
  .jl-table td.num::before {
    content: attr(data-label); display: block; color: var(--lb-ink-3); font-size: 0.7rem; font-weight: 400; white-space: nowrap;
  }
  .jl-table td.jl-tags { grid-column: 1 / -1; }
  .jl-table td.jl-tags:empty { display: none; }
  .jl-table td.jl-tags .jl-tag:first-child { margin-left: 0; }
}

.note-main {
  --jl-red: #C8102E;         
  --jl-red-ink: #B0102A;     
  --jl-red-wash: #FDF1F2;
  --jl-red-line: #F1C6CD;
  --jl-ink: #1A1A1A;
  --jl-text: #333333;
  --jl-sub: #5C5C5C;
  --jl-line: #E4E4E4;
  --jl-line-2: #D0D0D0;
  --jl-wash: #F5F5F5;
  --lb-link: var(--jl-red-ink);
  --lb-teal: var(--jl-red);
  --lb-ink: var(--jl-ink);
  --lb-ink-2: var(--jl-text);
  --lb-ink-3: var(--jl-sub);
  --lb-line: var(--jl-line);
  --lb-line-2: var(--jl-line-2);
  --lb-wash: var(--jl-wash);
  --primary: var(--jl-red-ink);
  --dark: var(--jl-ink);
  background: #fff;
  border-top: 4px solid var(--jl-red);
}
.note-main .note-crumb, .note-main .ivy-byline, .note-main .tbl-cap, .note-main .disclaimer { color: var(--jl-sub); }
.note-main .note-wrap h1 .sub { color: var(--jl-sub); }
.note-main .note-wrap h2 { border-top-color: var(--jl-line); }
.note-main .note-wrap h2::before {
  content: ""; display: inline-block; width: 4px; height: 1.05em; margin-right: 0.55rem;
  background: var(--jl-red); border-radius: 2px; vertical-align: -0.12em;
}
.note-main .note-wrap p, .note-main .note-wrap ul, .note-main .note-wrap ol { color: var(--jl-text); }
.note-main .note-wrap strong { color: var(--jl-ink); }
.note-main .note-key { background: #fff; border: 1px solid var(--jl-line); border-top: 3px solid var(--jl-red); }
.note-main .note-key .label { background: var(--jl-red); color: #fff; }
.note-main .note-crumb a, .note-main .note-wrap a { text-decoration-color: var(--jl-red); }
.note-main .note-crumb a:hover, .note-main .note-wrap a:hover { background: var(--jl-red-wash); }
.note-main .tbl { border-color: var(--jl-line); }
.note-main .tbl th { background: var(--jl-wash); color: var(--jl-text); }
.note-main .tbl th, .note-main .tbl td { border-bottom-color: #ECECEC; }
.note-main .callout { background: #FAFAFA; border-left-color: var(--jl-red); }
.note-main .callout .label { color: var(--jl-red-ink); }
.note-main .jl-toc a:hover { background: var(--jl-red-wash); }
.note-main .jl-seg input, .note-main .jl-check input { accent-color: var(--jl-red); }
.note-main .jl-seg label:has(input:checked) { border-color: var(--jl-red); background: var(--jl-red-wash); }
.note-main .jl-table th { background: var(--jl-wash); color: var(--jl-text); }
.note-main .jl-table th, .note-main .jl-table td { border-bottom-color: #ECECEC; }
.note-main .jl-ypl { color: var(--jl-ink); }
.note-main .jl-tag--mult { background: #FDE8EB; color: #A3112B; }
.note-main .jl-tag--card { background: #2B2B2B; color: #fff; }
.note-main .jl-tag--bonus { background: #FBF3DD; color: #6E5200; }
.note-main .jl-stat { border-top: 3px solid var(--jl-red); }
.note-main .jl-result { background: var(--jl-red-wash); color: var(--jl-ink); }
.note-main .jl-result strong { color: var(--jl-red-ink); }
.note-main .jl-more button:hover { background: var(--jl-red-wash); }
@media (max-width: 720px) {
  .note-main .jl-table tr { border-bottom-color: var(--jl-line); }
}

.note-main .jl-top td.rank { width: 3em; text-align: center; font-weight: 700; color: var(--jl-red-ink); }
.note-main .jl-top td.shop { min-width: 14em; }
.note-main .jl-top td.rate { white-space: nowrap; min-width: 0; }
.note-main .jl-top td.note { min-width: 16em; color: var(--jl-sub); font-size: 0.85rem; }
.note-main .jl-top .nw { white-space: nowrap; }
@media (max-width: 720px) {
  .note-main .jl-top { overflow: visible; }
  .note-main .jl-top thead { display: none; }
  .note-main .jl-top table, .note-main .jl-top tbody { display: block; }
  .note-main .jl-top tr {
    display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; column-gap: 0.5rem; row-gap: 0.1rem;
    padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--jl-line);
  }
  .note-main .jl-top tr:last-child { border-bottom: 0; }
  .note-main .jl-top td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; min-width: 0; }
  .note-main .jl-top td.rank { grid-row: 1 / span 3; width: auto; text-align: left; }
  .note-main .jl-top td.shop { grid-column: 2; }
  .note-main .jl-top td.ypl { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
  .note-main .jl-top td.rate { grid-column: 2 / 4; font-size: 0.82rem; color: var(--jl-sub); }
  .note-main .jl-top td.note { grid-column: 2 / 4; font-size: 0.78rem; }
}