/* Layout: 上に診断、下にカテゴリ別のカード列（wfb-school-booster のダッシュボードと同じカード）。本文は1カラム 720px
   色：目に優しい黄色。紙はクリーム、塗りはアンバー、文字は濃紺 */
:root {
  --paper: #fffaeb;
  --card: #ffffff;
  --ink: #111c4e;
  --muted: #5d6480;
  --line: #efe2bd;
  --accent: #fbbf24;
  --accent-dark: #d97706;
  --accent-ink: #2b1d00;
  --accent-soft: #fef3c7;
  --link: #9a5600;
  --mark: #fde68a;
  --mark-ink: #111c4e;
  --warn: #b45309;
  --warn-soft: #fff1d6;
  --done: #00c853;
  --done-dark: #00952e;
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-data: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --radius: 10px;
  --stroke: #111c4e;
  --pop: #111c4e;
  --fiber: linear-gradient(90deg, #22d3ee, #fde047 50%, #f472b6);
  /* テーマ（lc-dashboard.css）の文字も同じ1書体に */
  --lt-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --lt-font-serif: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17140c; --card: #221d10; --ink: #f7efd8; --muted: #c2b48f; --line: #3d3420;
    --accent: #fbbf24; --accent-dark: #b45309; --accent-ink: #1a1300; --accent-soft: #3a2f12; --link: #fcd34d;
    --mark: #6b5414; --mark-ink: #fff6cf; --warn: #f5b754; --warn-soft: #2f2612;
    --stroke: #f7efd8; --pop: #000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17140c; --card: #221d10; --ink: #f7efd8; --muted: #c2b48f; --line: #3d3420;
  --accent: #fbbf24; --accent-dark: #b45309; --accent-ink: #1a1300; --accent-soft: #3a2f12; --link: #fcd34d;
  --mark: #6b5414; --mark-ink: #fff6cf; --warn: #f5b754; --warn-soft: #2f2612;
  --stroke: #f7efd8; --pop: #000;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--card);
}
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 10px; }
.brand { font-family: var(--font-display); font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.brand small { font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.nav { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-left: auto; font-size: 14px; }
.nav a { color: var(--ink); text-decoration: none; padding: 4px 0; }
.nav a:hover { color: var(--link); }
.nav .nav-cta { background: var(--accent); color: var(--accent-ink); padding: 4px 12px; border-radius: 999px; font-weight: 700; }

@media (max-width: 640px) {
  .site-head { position: static; }
  .site-head .wrap { gap: 6px; padding-block: 8px 6px; }
  .nav { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 2px; }
  .nav a { white-space: nowrap; }
  .nav .nav-cta { display: none; }
}
.pr-bar { font-size: 12px; color: var(--muted); padding-block: 6px; }

/* Home: hero + quiz（1問ずつ答えるカード型の診断） */
.counter { padding-block: 28px 48px; background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 78%); }
.hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--link); font-weight: 700; }
.counter h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.3; margin: 8px 0 12px; text-wrap: balance;
}
.counter h1 .hl { background: linear-gradient(transparent 62%, var(--mark) 62%); padding-inline: 2px; }
.counter-lead { color: var(--muted); margin: 0 0 18px; font-size: 16px; }
.gets { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.gets li { position: relative; padding-left: 30px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.gets li b { display: block; color: var(--ink); font-size: 15px; }
.gets li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b1d00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
@media (max-width: 900px) {
  .gets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .gets li { padding: 8px 8px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; }
  .gets li::before { display: none; }
  .gets li b { font-size: 12.5px; line-height: 1.4; margin-bottom: 2px; }
}
.trust { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 0; }
.badge {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 16px; background: var(--ink); color: var(--paper);
}

.quiz {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 20px;
  box-shadow: 0 18px 40px -26px rgba(8, 60, 68, .45); scroll-margin-top: 84px; min-width: 0;
}
.quiz-bar { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; }
.q-back { border: 0; background: none; color: var(--link); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 6px 4px 0; }
.q-count { font-family: var(--font-data); font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.q-time { margin-left: auto; color: var(--muted); font-size: 12px; }
.q-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0 16px; }
.q-progress span {
  display: block; height: 100%; border-radius: inherit; position: relative; overflow: hidden;
  background: var(--accent); transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.q-progress span::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: pulse-light 2.2s ease-in-out infinite;
}
@keyframes pulse-light { 0% { left: -40%; } 60%, 100% { left: 110%; } }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step.enter { animation: q-in .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes q-in { from { transform: translateX(16px); opacity: .25; } to { transform: none; opacity: 1; } }
.q-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 3.4vw, 26px); line-height: 1.4; padding: 0; margin: 0 0 4px; text-wrap: balance; }
.q-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }

.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opt {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; line-height: 1.4;
}
.opt:hover { border-color: var(--link); transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(8, 60, 68, .5); }
.opt:active { transform: translateY(0) scale(.99); }
.o-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--link); border: 1px solid var(--line); }
.o-txt { min-width: 0; display: grid; gap: 2px; }
.o-label { font-weight: 700; font-size: 15px; }
.o-sub { font-size: 12px; color: var(--muted); }
.o-check { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); }
.opts input:checked + .opt { border-color: var(--link); background: var(--accent-soft); }
.opts input:checked + .opt .o-ic { background: var(--accent); color: var(--accent-ink); border-color: var(--link); }
.opts input:checked + .opt .o-check {
  border-color: var(--link);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b1d00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.opts input:focus-visible + .opt { outline: 3px solid var(--accent); outline-offset: 2px; }
.opts-num { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.opt-num { flex-direction: column; justify-content: center; gap: 0; padding: 14px 4px; min-height: 92px; text-align: center; }
.opt-num .o-num { font-family: var(--font-display); font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.opt-num .o-check { display: none; }
.opts input:checked + .opt-num { background: var(--accent); color: var(--accent-ink); }
.opts input:checked + .opt-num .o-sub { color: var(--accent-ink); }

.q-loading { padding: 18px 2px 8px; }
.ql-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 14px; }
.ql-title::after { content: "…"; }
.q-loading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.q-loading li { position: relative; padding-left: 34px; color: var(--muted); transition: color .2s; }
.q-loading li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--link); animation: spin .8s linear infinite;
}
.q-loading li.done { color: var(--ink); font-weight: 700; }
.q-loading li.done::before {
  animation: none; border-color: var(--link);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b1d00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }

.q-result { animation: r-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes r-in { from { transform: translateY(10px); opacity: .3; } to { transform: none; opacity: 1; } }
.is-result .q-time { display: none; }
.r-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.r-tag { font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 10px; }
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-chip {
  font: inherit; font-size: 12px; color: var(--ink); background: var(--paper); border: 1px dashed var(--muted);
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.r-chip:hover { border-style: solid; border-color: var(--link); color: var(--link); }
.r-kicker { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.r-plan { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4vw, 30px); line-height: 1.35; margin: 2px 0 14px; text-wrap: balance; }
.r-save {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; margin-bottom: 14px;
  background: var(--accent); color: var(--accent-ink);
}
.rs-label { font-size: 13px; font-weight: 700; opacity: .9; }
.rs-num { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rs-num b { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 7vw, 52px); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.rs-num small { font-size: 15px; font-weight: 700; }
.rs-calc { font-size: 12px; opacity: .88; font-variant-numeric: tabular-nums; }
.rs-two { justify-self: start; margin-top: 6px; font-size: 12px; font-weight: 700; background: var(--mark); color: var(--mark-ink); border-radius: 999px; padding: 2px 10px; }
.r-save-alt { background: var(--accent-soft); color: var(--ink); }
.r-why { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.r-why li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.65; }
.r-why li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b1d00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.facts { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 16px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 7px 0; border-top: 1px solid var(--line); }
.facts th { width: 5.5em; color: var(--muted); font-weight: 400; padding-right: 10px; white-space: nowrap; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; line-height: 1.3; transition: filter .15s, transform .15s; }
.btn-main { background: var(--accent); color: var(--accent-ink); }
.btn-sub { border: 1.5px solid var(--accent); color: var(--link); background: transparent; }
.btn-main:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-lg { padding: 14px 22px; font-size: 16px; flex: 1 1 220px; }
.note { font-size: 13px; background: var(--warn-soft); color: var(--ink); border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 4px; margin: 12px 0 0; }
.a8-missing { font-size: 11px; color: var(--muted); display: block; margin-top: 6px; }
.r-second {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin-top: 16px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 14px;
}
.r-second:hover { border-color: var(--link); }
.r-second span { grid-row: span 2; align-self: center; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.r-second em { font-style: normal; font-size: 12px; color: var(--muted); }
.reads { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.reads h3 { font-size: 14px; margin: 0 0 6px; }
.reads ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.r-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 12px; color: var(--muted); }
.q-restart { font: inherit; font-size: 13px; font-weight: 700; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* 記事内の診断入口（Q1をその場で選べる） */
.quiz-entry { margin: 28px 0; padding: 18px; border: 2px solid var(--accent); border-radius: 16px; background: var(--card); }
.qe-step { font-family: var(--font-data); font-size: 12px; color: var(--link); letter-spacing: .06em; }
.qe-q { font-family: var(--font-display); font-size: 21px; margin: 2px 0 2px; line-height: 1.4; }
.qe-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.qe-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qe-opt {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.qe-opt:hover { border-color: var(--link); background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .q-progress span::after, .q-loading li::before { animation: none; }
  .step.enter, .q-result { animation: none; }
}

/* Shelves */
.shelf { padding-block: 32px; border-top: 1px solid var(--line); }
.shelf h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0 0 4px; }
.shelf > .wrap > p { color: var(--muted); margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); min-width: 0; }
.card:hover { border-color: var(--link); }
.card .ct { font-weight: 700; line-height: 1.5; display: block; }
.card .cd { font-size: 13px; color: var(--muted); line-height: 1.6; display: block; margin-top: 4px; }

/* Article */
.article { max-width: 720px; margin: 0 auto; padding-block: 24px 48px; }
.crumb { font-size: 12px; color: var(--muted); }
.crumb a { color: var(--muted); }
.article h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4.6vw, 34px); line-height: 1.4; margin: 8px 0 10px; text-wrap: balance; }
.meta { font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.lead { font-size: 17px; margin: 18px 0; }
.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; font-size: 14px; margin: 20px 0; }
.toc strong { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.toc ol { margin: 6px 0 0; padding-left: 1.4em; }
.body h2 { font-size: 22px; line-height: 1.45; margin: 44px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); text-wrap: balance; }
.body h3 { font-size: 18px; margin: 28px 0 8px; }
.body p, .body li { max-width: 65ch; }
.body strong { background: linear-gradient(transparent 60%, var(--mark) 60%); color: inherit; }
.body table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.tbl { overflow-x: auto; }
.body th, .body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.body th { background: var(--accent-soft); }
.body td { font-variant-numeric: tabular-nums; }
.body blockquote { margin: 20px 0; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 16px; }
.body blockquote p { margin: 6px 0; }
.body blockquote strong { background: none; color: var(--link); }
.body code { font-family: var(--font-data); font-size: .92em; }

.planbox { background: var(--card); border: 2px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin: 24px 0; }
.planbox .pn { font-weight: 700; font-size: 18px; }
.planbox .asof { font-size: 12px; color: var(--muted); }
.planbox .gb { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; font-size: 14px; margin: 10px 0; }
@media (max-width: 560px) { .planbox .gb { grid-template-columns: minmax(0,1fr); } }
.planbox .gb div { background: var(--paper); border-radius: 6px; padding: 8px 10px; }
.planbox .gb b { display: block; font-size: 12px; color: var(--muted); }
.planbox table { margin: 8px 0 12px; }
.planbox th { background: transparent; width: 6.5em; color: var(--muted); font-weight: 400; }


.todo { border: 2px dashed var(--warn); color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 16px 0; }

.related { margin-top: 40px; }
.related h2 { border: 0; font-size: 18px; margin-bottom: 10px; }
.sources { font-size: 13px; color: var(--muted); margin-top: 36px; border-top: 1px solid var(--line); padding-top: 12px; }
.sources ul { padding-left: 1.2em; }

.site-foot { border-top: 1px solid var(--line); padding-block: 24px 90px; font-size: 13px; color: var(--muted); }
.site-foot .wrap { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }

.float-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 14px;
}
.float-cta span { color: var(--muted); }
@media (min-width: 861px) { .float-cta { display: none; } .site-foot { padding-bottom: 24px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 奇数個の選択肢は、最後の1つを横いっぱいに（ひとつだけ取り残されないように） */
@media (min-width: 521px) {
  .opts:not(.opts-num) > input:last-of-type:nth-of-type(odd) + .opt { grid-column: 1 / -1; }
}
.btns .btn-sub { flex: 1 1 140px; }
@media (min-width: 521px) { .btns .btn-sub { flex: 0 1 auto; } }

/* ═══════════════════════════════════════════════════
   ゴシック体：見出しは太字（900）でしっかり見せる
   ═══════════════════════════════════════════════════ */
.brand { font-weight: 900; letter-spacing: .02em; }
.counter h1, .article h1, .q-title, .r-plan, .ql-title, .qe-q { font-weight: 900; letter-spacing: .01em; }
.rs-num b, .opt-num .o-num { font-weight: 900; }
.badge { font-weight: 900; }
.body h2 { font-weight: 900; border-bottom-color: var(--accent); border-bottom-width: 3px; }
.body h3 { font-weight: 700; }
.q-count, .qe-step { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════
   コンテンツカード：lc-dashboard.css（wfb-school-booster のテーマ）の
   「🧊 3D立方体」デザインをそのまま使い、側面を“光ファイバーの光”の色に置き換える
   ═══════════════════════════════════════════════════ */
.lc-rows { padding-block: 10px 28px; }
.learning-category-row { padding-top: 26px; }
.learning-category-row__header { margin-bottom: .4rem; }
.learning-category-row__title { margin: 0; font-size: inherit; border: 0; padding: 0; }
.learning-category-row__name { color: var(--ink); }
.lc-row__sub { margin: .5rem 0 0; color: var(--muted); font-size: .92rem; }
.learning-category-row__list { padding: 22px 34px 44px 8px; gap: 2.2rem; scrollbar-color: #e8cf7c transparent; }

/* 立方体の側面：カテゴリごとに光の色（回線＝黄金、選び方＝シアン、悩み＝ピンク）＋外側にぼんやり光る */
.learning-cards--cube .learning-card { border-radius: 10px; background: #fff; color: #111c4e; }
.learning-cards--cube .learning-card.lc-cat-plan {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .95), inset 0 -3px 0 rgba(0, 0, 0, .10),
    1px 1px 0 #fde047, 2px 2px 0 #fcd34d, 3px 3px 0 #fbbf24, 4px 4px 0 #f9b21b, 5px 5px 0 #f5a30f,
    6px 6px 0 #ef9608, 7px 7px 0 #e88905, 8px 8px 0 #dd7c04, 9px 9px 0 #cf6f04, 10px 10px 0 #c06204,
    0 0 26px rgba(251, 191, 36, .55), 14px 16px 24px rgba(160, 90, 0, .28), 20px 28px 48px -8px rgba(160, 90, 0, .34);
}
.learning-cards--cube .learning-card.lc-cat-guide {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .95), inset 0 -3px 0 rgba(0, 0, 0, .10),
    1px 1px 0 #a5f3fc, 2px 2px 0 #67e8f9, 3px 3px 0 #22d3ee, 4px 4px 0 #1cc6e2, 5px 5px 0 #17b8d4,
    6px 6px 0 #13a9c5, 7px 7px 0 #109ab6, 8px 8px 0 #0e8ba6, 9px 9px 0 #0c7c96, 10px 10px 0 #0a6e86,
    0 0 26px rgba(34, 211, 238, .50), 14px 16px 24px rgba(8, 90, 110, .26), 20px 28px 48px -8px rgba(8, 90, 110, .32);
}
.learning-cards--cube .learning-card.lc-cat-nayami {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .95), inset 0 -3px 0 rgba(0, 0, 0, .10),
    1px 1px 0 #fbcfe8, 2px 2px 0 #f9a8d4, 3px 3px 0 #f472b6, 4px 4px 0 #ec5fa8, 5px 5px 0 #e14d9a,
    6px 6px 0 #d43d8c, 7px 7px 0 #c6307e, 8px 8px 0 #b72571, 9px 9px 0 #a71c65, 10px 10px 0 #96155a,
    0 0 26px rgba(244, 114, 182, .50), 14px 16px 24px rgba(120, 20, 70, .24), 20px 28px 48px -8px rgba(120, 20, 70, .30);
}
.learning-cards--cube .learning-card:hover { transform: translate(-4px, -8px); }
.learning-cards--cube .learning-card.lc-cat-plan:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 1px 1px 0 #fde047, 3px 3px 0 #fbbf24, 5px 5px 0 #f5a30f, 7px 7px 0 #e88905, 9px 9px 0 #cf6f04, 11px 11px 0 #c06204, 13px 13px 0 #b25a04, 15px 15px 0 #a35204, 0 0 40px rgba(253, 224, 71, .85), 24px 30px 50px -8px rgba(160, 90, 0, .40); }
.learning-cards--cube .learning-card.lc-cat-guide:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 1px 1px 0 #a5f3fc, 3px 3px 0 #22d3ee, 5px 5px 0 #17b8d4, 7px 7px 0 #109ab6, 9px 9px 0 #0c7c96, 11px 11px 0 #0a6e86, 13px 13px 0 #08627a, 15px 15px 0 #07566c, 0 0 40px rgba(103, 232, 249, .85), 24px 30px 50px -8px rgba(8, 90, 110, .38); }
.learning-cards--cube .learning-card.lc-cat-nayami:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 1px 1px 0 #fbcfe8, 3px 3px 0 #f472b6, 5px 5px 0 #e14d9a, 7px 7px 0 #c6307e, 9px 9px 0 #a71c65, 11px 11px 0 #96155a, 13px 13px 0 #861050, 15px 15px 0 #760c46, 0 0 40px rgba(249, 168, 212, .9), 24px 30px 50px -8px rgba(120, 20, 70, .36); }

/* ボタン「開く」：黄色の立体ボタン（文字は濃紺） */
.learning-card__action-btn--open {
  --btn-base: #fbbf24; --btn-dark: #c27c06; --btn-shadow: rgba(194, 124, 6, .45);
  color: #2b1d00 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.learning-card__type { color: #b45309; }
.learning-card__title { color: #111c4e; }
.lc-time { font-size: .74rem; font-weight: 800; color: #7a4a00; background: #fef3c7; border-radius: 999px; padding: 2px 9px; }

/* アイキャッチ：夜の光ファイバー。光る線の上に白い大きな文字 */
.learning-card__thumb { position: relative; overflow: hidden; }
.lc-gen-thumb { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 18px; }
.lc-thumb--plan   { background: radial-gradient(120% 120% at 0% 100%, #7a4304 0%, #2a1a3a 45%, #0b1533 100%); }
.lc-thumb--guide  { background: radial-gradient(120% 120% at 0% 100%, #0b5d6e 0%, #13204a 50%, #0b1533 100%); }
.lc-thumb--nayami { background: radial-gradient(120% 120% at 0% 100%, #7a1f52 0%, #24173f 50%, #0b1533 100%); }
.lc-gen-thumb .fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-thumb__kicker {
  position: absolute; top: 12px; left: 14px; z-index: 1; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  background: #fff; color: #111c4e; border-radius: 999px; padding: 3px 11px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.lc-cat-guide .lc-thumb__kicker { background: #cffafe; }
.lc-cat-nayami .lc-thumb__kicker { background: #fce7f3; }
.lc-cat-plan .lc-thumb__kicker { background: #fef3c7; }
.lc-thumb__label {
  position: relative; z-index: 1; font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 900; line-height: 1.22;
  color: #fff; letter-spacing: .02em; text-shadow: 0 0 14px rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .35);
}
@media (max-width: 480px) { .lc-thumb__label { font-size: 1.3rem; } }

/* 読んだ記事：テーマの「完了」表示をそのまま使う */
.learning-card--completed .lc-gen-thumb { filter: saturate(.35) brightness(.85); }

/* 関連記事のカード列（記事ページ） */
.related { margin-top: 40px; }
.related .learning-category-row { padding-top: 0; }

/* 診断の申込ボタンなども同じ立体ボタンに */
.btn-main {
  --btn-base: var(--accent);
  --btn-dark: var(--accent-dark);
  --btn-shadow: rgba(217, 119, 6, .40);
  border: 0; margin-bottom: 5px; color: var(--accent-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .08) 45%, rgba(0, 0, 0, .06) 100%), var(--btn-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 5px 0 var(--btn-dark), 0 7px 10px var(--btn-shadow);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn-main:hover {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 1px 0 var(--btn-dark), 0 2px 3px var(--btn-shadow);
  filter: brightness(1.03);
}
.btn-main:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-dark); }

/* 記事内のプラン枠と診断入口も黄色に合わせる */
.planbox, .quiz-entry { border-color: var(--accent); }
.quiz { border-color: var(--line); box-shadow: 0 18px 40px -26px rgba(120, 80, 0, .45); }
.counter { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 80%); }
.rs-two { background: var(--card); color: var(--ink); }
.r-save { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--accent-dark); margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .learning-card, .learning-card__action-btn, .btn-main { transition: none; }
}

/* カテゴリ見出しの文字色はテーマ側で濃紺に固定されているので、ダークモードでは明るい色に */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .learning-category-row__header .learning-category-row__title .learning-category-row__name {
    color: var(--ink) !important; background: linear-gradient(transparent 62%, var(--mark) 62%) !important;
  }
}
:root[data-theme="dark"] .learning-category-row__header .learning-category-row__title .learning-category-row__name {
  color: var(--ink) !important; background: linear-gradient(transparent 62%, var(--mark) 62%) !important;
}


/* ═══════════════════════════════════════════════════
   ポップな仕上げ：太い輪郭線＋ずらした影（ステッカー風）、大きな角丸、光ファイバーの3色アクセント
   ═══════════════════════════════════════════════════ */
body { letter-spacing: .02em; }
body { background-color: var(--paper); background-image: radial-gradient(rgba(234, 179, 8, .16) 1.2px, transparent 1.3px); background-size: 18px 18px; }

/* ヘッダー：光の点が付いたロゴ、丸いピルのメニュー */
.site-head { border-bottom: 2.5px solid var(--stroke); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; }
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%; background: #fde047;
  box-shadow: 0 0 0 3px rgba(253, 224, 71, .35), 0 0 14px 4px rgba(34, 211, 238, .55);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 50% { box-shadow: 0 0 0 3px rgba(253, 224, 71, .25), 0 0 20px 8px rgba(244, 114, 182, .55); } }
.nav a { padding: 5px 12px; border-radius: 999px; font-weight: 700; }
.nav a:hover { background: var(--mark); color: var(--ink); }
.nav .nav-cta { border: 2px solid var(--stroke); box-shadow: 3px 3px 0 var(--pop); }
.nav .nav-cta:hover { background: var(--accent); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--pop); }
.pr-bar { font-size: 11.5px; }

/* ヒーロー：背景に光ファイバーの束。光が線の上を流れる */
.counter { position: relative; overflow: hidden; background: radial-gradient(110% 90% at 100% 0%, #fff3c4 0%, transparent 60%), linear-gradient(180deg, #fff6d6 0%, transparent 90%); }
.hero-fx { position: absolute; inset: 0; opacity: .55; pointer-events: none; }
.hero-fx .fx { width: 100%; height: 100%; }
.hero { position: relative; z-index: 1; }
.fx-pulse { stroke-dashoffset: 106; animation: fiber-run linear infinite; filter: drop-shadow(0 0 4px #fff); }
@keyframes fiber-run { to { stroke-dashoffset: 0; } }
.eyebrow {
  display: inline-block; background: var(--ink); color: #fde047; padding: 4px 12px; border-radius: 999px;
  transform: rotate(-2deg); box-shadow: 3px 3px 0 #22d3ee; letter-spacing: .08em;
}
.counter h1 { font-size: clamp(32px, 5.6vw, 52px); line-height: 1.28; }
.counter h1 .hl { background: linear-gradient(transparent 58%, #fde047 58%); border-radius: 4px; }
.gets li::before { box-shadow: 2px 2px 0 var(--pop); }
.badge { background: #fde047; color: var(--ink); border: 2.5px solid var(--stroke); box-shadow: 2px 2px 0 var(--pop); }

/* 診断カード：ステッカー風 */
.quiz { border: 2.5px solid var(--stroke); border-radius: 24px; box-shadow: 8px 8px 0 var(--pop); }
.q-progress { height: 10px; border: 2px solid var(--stroke); background: var(--card); }
.q-progress span { background: var(--fiber); }
.q-title { font-size: clamp(22px, 3.6vw, 28px); }
.opt { border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
.opt:hover { border-color: var(--stroke); box-shadow: 4px 4px 0 var(--pop); transform: translate(-2px, -2px); }
.opts input:checked + .opt { border-color: var(--stroke); background: #fef3c7; box-shadow: 4px 4px 0 var(--pop); }
.opts > input:nth-of-type(5n+1) + .opt .o-ic { background: #fef3c7; color: #b45309; }
.opts > input:nth-of-type(5n+2) + .opt .o-ic { background: #cffafe; color: #0e7490; }
.opts > input:nth-of-type(5n+3) + .opt .o-ic { background: #fce7f3; color: #be185d; }
.opts > input:nth-of-type(5n+4) + .opt .o-ic { background: #ede9fe; color: #6d28d9; }
.opts > input:nth-of-type(5n+5) + .opt .o-ic { background: #dcfce7; color: #15803d; }
.o-ic { border: 2px solid var(--stroke); }
.opts input:checked + .opt .o-ic { background: #fde047; color: var(--ink); border-color: var(--stroke); }
.opts input:checked + .opt .o-check { border-color: var(--stroke); }
.opt-num .o-num { font-size: 36px; }
.opts input:checked + .opt-num { background: #fde047; color: var(--ink); }
.opts input:checked + .opt-num .o-sub { color: var(--ink); }

/* 結果：金額は「光る数字」 */
.r-tag { background: var(--ink); color: #fde047; }
.r-chip { border: 2px dashed var(--muted); font-weight: 700; }
.r-save {
  position: relative; overflow: hidden; border: 2.5px solid var(--stroke); border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 100%, #7a4304 0%, #1b1f4d 55%, #0b1533 100%); color: #fff;
  box-shadow: 6px 6px 0 var(--pop);
}
.r-save::after { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(34, 211, 238, .35), transparent); pointer-events: none; }
.rs-label, .rs-calc, .rs-num small { color: #fef9c3; position: relative; z-index: 1; }
.rs-num, .rs-two { position: relative; z-index: 1; }
.rs-num b { color: #fde047; text-shadow: 0 0 18px rgba(253, 224, 71, .75), 0 0 2px #fff; }
.rs-two { background: #f472b6; color: #fff; border: 2px solid #fff; }
.r-save-alt { background: #fef3c7; color: var(--ink); }
.r-save-alt .rs-label, .r-save-alt .rs-calc, .r-save-alt .rs-num small { color: var(--ink); }
.r-save-alt .rs-num b { color: var(--ink); text-shadow: none; }
.r-second { border: 2px solid var(--stroke); border-radius: 16px; box-shadow: 4px 4px 0 var(--pop); }
.r-why li::before { box-shadow: 1.5px 1.5px 0 var(--pop); }
.q-loading li.done::before { border-color: var(--stroke); }

/* ボタン：太い輪郭＋立体 */
.btn { border-radius: 14px; font-weight: 800; }
.btn-main { border: 2.5px solid var(--stroke); }
.btn-sub { border: 2.5px solid var(--stroke); color: var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--pop); }
.btn-sub:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pop); }

/* カテゴリ見出し：光ファイバーの3色ライン */
.learning-category-row__header .learning-category-row__title .learning-category-row__name { border-left: 8px solid transparent !important; border-image: linear-gradient(180deg, #22d3ee, #fde047, #f472b6) 1 !important; }

/* 記事ページ */
.article h1 { font-size: clamp(26px, 4.8vw, 38px); }
.crumb a { text-decoration: none; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 1px 10px; }
.meta span { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 1px 10px; }
.toc { border: 2.5px solid var(--stroke); border-radius: 18px; box-shadow: 5px 5px 0 var(--pop); }
.body h2 { position: relative; border: 0; padding: 0 0 0 20px; margin-top: 52px; }
.body h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 8px; border-radius: 99px; background: linear-gradient(180deg, #22d3ee, #fde047, #f472b6); box-shadow: 0 0 10px rgba(34, 211, 238, .5); }
.body h3 { display: inline-block; background: linear-gradient(transparent 60%, #fde68a 60%); }
.body strong { background: linear-gradient(transparent 58%, #fde047 58%); }
.tbl { border: 2px solid var(--stroke); border-radius: 14px; margin: 16px 0; }
.tbl table { margin: 0; }
.body th, .body td { border-color: var(--line); }
.body th { background: #fef3c7; color: #111c4e; }
.body blockquote { border: 2.5px solid var(--stroke); border-radius: 20px; box-shadow: 5px 5px 0 var(--pop); background: var(--card); position: relative; }
.body blockquote::after { content: ""; position: absolute; left: 34px; bottom: -14px; width: 22px; height: 22px; background: var(--card); border-right: 2.5px solid var(--stroke); border-bottom: 2.5px solid var(--stroke); transform: rotate(45deg); }
.body blockquote strong { display: inline-block; background: #fde047; color: #111c4e; border-radius: 999px; padding: 0 10px; }
.planbox { border: 2.5px solid var(--stroke); border-radius: 22px; box-shadow: 7px 7px 0 var(--pop); }
.planbox .gb div { border-radius: 12px; }
.quiz-entry { border: 2.5px solid var(--stroke); border-radius: 22px; box-shadow: 7px 7px 0 var(--pop); background: linear-gradient(135deg, #fff 0%, #fff7d6 100%); }
.qe-step { display: inline-block; background: var(--ink); color: #fde047; border-radius: 999px; padding: 1px 10px; }
.qe-opt { border: 2px solid var(--stroke); }
.qe-opt:hover { background: #fde047; color: var(--ink); box-shadow: 3px 3px 0 var(--pop); }
.note { border-radius: 10px; }
.todo { border-radius: 14px; }
.site-foot { background: var(--ink); color: #fef3c7; border-top: 0; }
.site-foot a { color: #fde047; }
.float-cta { border-top: 2.5px solid var(--stroke); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .counter { background: radial-gradient(110% 90% at 100% 0%, #2b2410 0%, transparent 60%); }
  :root:not([data-theme="light"]) .quiz-entry { background: var(--card); }
  :root:not([data-theme="light"]) .opts input:checked + .opt { background: #3a2f12; }
  :root:not([data-theme="light"]) body { background-image: radial-gradient(rgba(234, 179, 8, .10) 1.2px, transparent 1.3px); }
}
:root[data-theme="dark"] .counter { background: radial-gradient(110% 90% at 100% 0%, #2b2410 0%, transparent 60%); }
:root[data-theme="dark"] .quiz-entry { background: var(--card); }
:root[data-theme="dark"] .opts input:checked + .opt { background: #3a2f12; }

@media (prefers-reduced-motion: reduce) {
  .fx-pulse, .brand-dot { animation: none; }
  .fx-pulse { display: none; }
}

/* 調整：見出しの折り返し、ヒーローの光ファイバーは文字の下側に、ダークモードのコントラスト */
:root { --hl: #fde047; --navy: #111c4e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl: #7a5f12; } }
:root[data-theme="dark"] { --hl: #7a5f12; }
.counter h1 { font-size: clamp(30px, 4.4vw, 46px); }
.counter h1 .hl, .body strong { background: linear-gradient(transparent 58%, var(--hl) 58%); }
.eyebrow, .r-tag, .qe-step { background: var(--navy); color: #fde047; }
.hero-fx { inset: auto 0 0 0; height: 62%; opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.hero-copy { position: relative; }
.gets li, .trust { text-shadow: 0 0 6px var(--paper), 0 0 10px var(--paper); }
@media (max-width: 900px) { .hero-fx { height: 40%; } }

/* ═══════════════════════════════════════════════════
   LP セクション（トップページ）
   ═══════════════════════════════════════════════════ */
.sp { display: none; }
@media (max-width: 600px) { .sp { display: inline; } }
.lp-sec { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.lp-eyebrow {
  display: inline-block; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  background: var(--navy); color: #fde047; border-radius: 999px; padding: 4px 14px; box-shadow: 3px 3px 0 #22d3ee;
}
.lp-eyebrow--light { background: #fde047; color: var(--navy); box-shadow: 3px 3px 0 #f472b6; }
.lp-h2 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 900; line-height: 1.35; margin: 0 0 28px; text-wrap: balance; }
.lp-h2--light { color: #fff; }
.lp-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 36px; }
.lp-cta__btn { font-size: clamp(17px, 2.4vw, 21px); padding: 18px 40px; border-radius: 999px; min-width: min(100%, 360px); }
.lp-cta__sub { font-size: 13px; font-weight: 700; color: var(--muted); }

/* 数字の帯 */
.lp-stats { padding-block: 0 8px; margin-top: -8px; position: relative; z-index: 2; }
.lp-stats ul {
  list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  background: var(--card); border: 2.5px solid var(--stroke); border-radius: 24px; box-shadow: 7px 7px 0 var(--pop);
}
.lp-stats li { display: grid; gap: 2px; text-align: center; padding: 6px 4px; min-width: 0; }
.lp-stats li + li { border-left: 2px dashed var(--line); }
.lp-stat__num { font-size: clamp(30px, 4.4vw, 44px); font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-stat__num small { font-size: .42em; margin-left: 2px; }
.lp-stats li:nth-child(1) .lp-stat__num { color: #d97706; }
.lp-stats li:nth-child(2) .lp-stat__num { color: #0891b2; }
.lp-stats li:nth-child(3) .lp-stat__num { color: #db2777; }
.lp-stats li:nth-child(4) .lp-stat__num { color: #7c3aed; }
.lp-stats li span { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
  .lp-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stats li:nth-child(3) { border-left: 0; }
  .lp-stats li:nth-child(n+3) { border-top: 2px dashed var(--line); padding-top: 12px; }
}

/* 悩み：吹き出し */
.lp-pains { text-align: center; }
.lp-pains__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; text-align: left; }
@media (max-width: 900px) { .lp-pains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lp-pains__grid { grid-template-columns: minmax(0, 1fr); } }
.lp-pain {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 140px;
  padding: 18px 18px 16px; text-decoration: none; color: var(--ink); background: var(--card);
  border: 2.5px solid var(--stroke); border-radius: 22px; box-shadow: 5px 5px 0 var(--pop);
  transition: transform .15s, box-shadow .15s;
}
.lp-pain::after {
  content: ""; position: absolute; left: 28px; bottom: -13px; width: 20px; height: 20px; background: inherit;
  border-right: 2.5px solid var(--stroke); border-bottom: 2.5px solid var(--stroke); transform: rotate(45deg);
}
.lp-pain:hover { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 var(--pop); }
.lp-pain:nth-child(1) { background: #fef3c7; } .lp-pain:nth-child(2) { background: #cffafe; }
.lp-pain:nth-child(3) { background: #fce7f3; } .lp-pain:nth-child(4) { background: #ede9fe; }
.lp-pain__q { font-size: 17px; font-weight: 800; line-height: 1.5; color: #111c4e; }
.lp-pain__a { font-size: 13px; font-weight: 700; color: #9a5600; }
.lp-answer { margin-top: 44px; display: grid; justify-items: center; gap: 10px; }
.lp-answer__arrow { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 22px solid #f59e0b; }
.lp-answer p { margin: 0; font-size: clamp(19px, 2.8vw, 26px); font-weight: 800; line-height: 1.6; }
.lp-answer b { background: linear-gradient(transparent 58%, var(--hl) 58%); padding-inline: 2px; }

/* 選び方の3つのポイント */
.lp-reasons { background: var(--card); border-block: 2.5px solid var(--stroke); text-align: center; }
.lp-reasons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; text-align: left; }
@media (max-width: 800px) { .lp-reasons__grid { grid-template-columns: minmax(0, 1fr); } }
.lp-reason { padding: 24px 22px; border: 2.5px solid var(--stroke); border-radius: 22px; background: var(--paper); box-shadow: 5px 5px 0 var(--pop); min-width: 0; }
.lp-reason__ic {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 14px;
  border: 2.5px solid var(--stroke); box-shadow: 3px 3px 0 var(--pop); color: #111c4e;
}
.lp-reason__ic svg { width: 28px; height: 28px; }
.lp-reason:nth-child(1) .lp-reason__ic { background: #fde047; }
.lp-reason:nth-child(2) .lp-reason__ic { background: #67e8f9; }
.lp-reason:nth-child(3) .lp-reason__ic { background: #f9a8d4; }
.lp-reason h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.lp-reason p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.8; }

/* 数字で見るセット割：夜の光ファイバー */
.lp-numbers { background: radial-gradient(120% 140% at 0% 100%, #5c3406 0%, #1b1f4d 50%, #0b1533 100%); color: #fff; overflow: hidden; }
.lp-numbers::after { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(34, 211, 238, .25), transparent); pointer-events: none; }
.lp-numbers__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .lp-numbers__in { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.lp-glow { color: #fde047; text-shadow: 0 0 18px rgba(253, 224, 71, .75), 0 0 2px #fff; }
.lp-numbers__lead { color: #e2e8ff; margin: 0; }
.lp-numbers__chart { background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .25); border-radius: 22px; padding: 22px; }
.lp-chart__title { margin: 0 0 14px; font-weight: 800; color: #fde047; font-size: 14px; }
.lp-numbers__chart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track"; gap: 6px 12px; align-items: end; }
.lp-bar__name { grid-area: name; font-weight: 800; font-size: 15px; color: #fff; }
.lp-bar__name small { display: block; font-size: 11.5px; font-weight: 500; color: #c7d0f0; }
.lp-bar__val { grid-area: val; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.lp-bar__val small { font-size: 13px; margin-left: 2px; }
.lp-bar__track { grid-area: track; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lp-bar__fill { display: block; height: 100%; border-radius: inherit; }
.lp-bar--au .lp-bar__fill { background: linear-gradient(90deg, #fb923c, #fde047); box-shadow: 0 0 14px rgba(253, 224, 71, .7); }
.lp-bar--docomo .lp-bar__fill { background: linear-gradient(90deg, #22d3ee, #a5f3fc); box-shadow: 0 0 14px rgba(34, 211, 238, .7); }
.lp-bar--sb .lp-bar__fill { background: linear-gradient(90deg, #f472b6, #fbcfe8); box-shadow: 0 0 14px rgba(244, 114, 182, .7); }
.lp-chart__note { margin: 16px 0 0; font-size: 11.5px; color: #c7d0f0; line-height: 1.6; }

/* 使い方3ステップ */
.lp-steps { text-align: center; }
.lp-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; text-align: left; counter-reset: none; }
@media (max-width: 800px) { .lp-steps__list { grid-template-columns: minmax(0, 1fr); } }
.lp-step { position: relative; padding: 30px 22px 22px; border: 2.5px solid var(--stroke); border-radius: 22px; background: var(--card); box-shadow: 5px 5px 0 var(--pop); }
.lp-step__n {
  position: absolute; top: -20px; left: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fde047; color: #111c4e; font-weight: 900; font-size: 20px; border: 2.5px solid var(--stroke); box-shadow: 3px 3px 0 var(--pop);
}
.lp-step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 900; }
.lp-step p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.8; }
@media (min-width: 801px) {
  .lp-step:not(:last-child)::after {
    content: ""; position: absolute; right: -22px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) rotate(45deg);
    border-top: 4px solid #f59e0b; border-right: 4px solid #f59e0b;
  }
}

/* 店長 */
.lp-tencho { background: var(--card); border-block: 2.5px solid var(--stroke); }
.lp-tencho__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; max-width: 900px; }
@media (max-width: 700px) { .lp-tencho__in { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; } }
.lp-tencho__face {
  width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff7c2, #fde047 60%, #f59e0b); border: 3px solid var(--stroke);
  box-shadow: 6px 6px 0 var(--pop), 0 0 0 10px rgba(34, 211, 238, .25), 0 0 0 20px rgba(244, 114, 182, .15);
}
.lp-tencho__face span { font-size: 64px; font-weight: 900; color: #111c4e; }
@media (max-width: 700px) { .lp-tencho__face { width: 110px; height: 110px; } .lp-tencho__face span { font-size: 42px; } }
.lp-tencho__body p { margin: 0 0 12px; }
.lp-tencho__body .lp-h2 { margin-bottom: 14px; }
.lp-tencho__body b { background: linear-gradient(transparent 58%, var(--hl) 58%); }
.lp-tencho__link { font-weight: 800; }

/* 記事の棚 */
.lp-shelves { padding-bottom: 20px; }
.lp-shelves .lc-rows { padding-top: 0; }

/* よくある質問 */
.lp-faq__in { max-width: 860px; }
.lp-faq__list { display: grid; gap: 14px; }
.lp-faq__item { border: 2.5px solid var(--stroke); border-radius: 18px; background: var(--card); box-shadow: 4px 4px 0 var(--pop); overflow: hidden; }
.lp-faq__item summary {
  list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 16px 48px 16px 16px;
  font-weight: 800; font-size: 16px; position: relative;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after { content: "+"; position: absolute; right: 18px; font-size: 26px; font-weight: 900; color: #d97706; transition: transform .2s; }
.lp-faq__item[open] summary::after { transform: rotate(45deg); }
.lp-faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.lp-faq__q { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fde047; color: #111c4e; font-weight: 900; border: 2px solid var(--stroke); }
.lp-faq__item p { margin: 0; padding: 0 18px 18px 60px; color: var(--muted); font-size: 15px; }

/* 最後の申込ボタン：夜の光ファイバー */
.lp-final { position: relative; overflow: hidden; text-align: center; padding-block: clamp(72px, 10vw, 120px); background: radial-gradient(120% 140% at 50% 120%, #5c3406 0%, #1b1f4d 45%, #0b1533 100%); color: #fff; }
.lp-final__fx { position: absolute; inset: 0; opacity: .75; }
.lp-final__fx .fx { width: 100%; height: 100%; }
.lp-final__in { position: relative; z-index: 1; }
.lp-final__h { font-size: clamp(32px, 6vw, 58px); font-weight: 900; line-height: 1.25; margin: 0 0 16px; text-shadow: 0 0 24px rgba(253, 224, 71, .45); }
.lp-final__lead { color: #e2e8ff; margin: 0 auto; max-width: 34em; }
.lp-final .lp-cta__sub { color: #fef3c7; }
.lp-final .btn-main { border-color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-pain, :root:not([data-theme="light"]) .lp-pain:nth-child(n) { background: var(--card); }
  :root:not([data-theme="light"]) .lp-pain__q { color: var(--ink); }
  :root:not([data-theme="light"]) .lp-pain__a { color: #fcd34d; }
}
:root[data-theme="dark"] .lp-pain, :root[data-theme="dark"] .lp-pain:nth-child(n) { background: var(--card); }
:root[data-theme="dark"] .lp-pain__q { color: var(--ink); }
:root[data-theme="dark"] .lp-pain__a { color: #fcd34d; }
.lp-final__in::before { content: ""; position: absolute; inset: -30px -10%; z-index: -1; background: radial-gradient(closest-side, rgba(11, 21, 51, .85), rgba(11, 21, 51, 0)); }
.lp-final__lead { text-shadow: 0 1px 8px #0b1533; }

/* 角ばった書体（M PLUS 1）に合わせて、見出しは少し字間を詰めて光の文字らしく */
.counter h1, .lp-h2, .lp-final__h, .q-title, .r-plan, .article h1 { letter-spacing: -.005em; }
.lp-stat__num, .rs-num b, .lp-bar__val, .opt-num .o-num { letter-spacing: -.01em; }

/* ═══════════════════════════════════════════════════
   光ファイバーの光：速く走る（ヒーロー・最後のセクション）。カードはマウスを当てたときだけ走る
   ═══════════════════════════════════════════════════ */
:root { --font-code: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
.fx-pulse { stroke-dashoffset: 100; animation: fiber-run linear infinite; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(103, 232, 249, .9)); }
.fx-pulse--b { opacity: .35; filter: blur(2px); }
@keyframes fiber-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -14; } }
.learning-card .fx-pulse { opacity: 0; animation-play-state: paused; transition: opacity .2s; }
.learning-card:hover .fx-pulse, .learning-card:focus-visible .fx-pulse { opacity: 1; animation-play-state: running; }
.learning-card:hover .fx-pulse--b { opacity: .35; }
.hero-fx { opacity: .72; }

/* ═══════════════════════════════════════════════════
   固定フッター：記事一覧＋30秒診断（PCでも常に表示）
   ═══════════════════════════════════════════════════ */
.float-cta { display: flex !important; gap: 10px; justify-content: center; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); }
.site-foot { padding-bottom: 96px !important; }
.fc-list {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  padding: 10px 18px; border-radius: 14px; color: #fff; background: var(--navy); border: 2.5px solid var(--stroke);
  box-shadow: 0 5px 0 #000, 0 0 18px rgba(34, 211, 238, .35); transition: transform .08s, box-shadow .08s;
}
.fc-list small { font-size: 11px; font-weight: 700; color: #0b1533; background: #67e8f9; border-radius: 999px; padding: 1px 7px; }
.fc-list:hover { transform: translateY(3px); box-shadow: 0 2px 0 #000, 0 0 24px rgba(34, 211, 238, .55); }
.fc-list__ic { display: grid; gap: 3px; }
.fc-list__ic i { display: block; width: 16px; height: 2.5px; border-radius: 2px; background: #fde047; }
.fc-list__ic i:nth-child(2) { background: #67e8f9; } .fc-list__ic i:nth-child(3) { background: #f9a8d4; }
.fc-quiz { padding: 10px 22px; }
.sheet-lock, .sheet-lock body { overflow: hidden; }

/* 記事一覧シート */
.art-sheet { position: fixed; inset: 0; z-index: 50; }
.as-backdrop { position: absolute; inset: 0; background: rgba(11, 21, 51, .55); opacity: 0; transition: opacity .2s; }
.as-panel {
  position: absolute; left: 50%; bottom: 0; width: min(920px, 100%); max-height: min(86vh, 860px);
  transform: translate(-50%, 100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--stroke); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.art-sheet.is-open .as-backdrop { opacity: 1; }
.art-sheet.is-open .as-panel { transform: translate(-50%, 0); }
.as-head { display: flex; align-items: center; gap: 12px; padding: 18px max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); }
.as-head h2 { margin: 0; font-size: clamp(19px, 3vw, 24px); font-weight: 900; }
.as-head h2 small { margin-left: 8px; font-size: 13px; color: var(--muted); }
.as-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--stroke); background: var(--card); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 var(--pop); }
.as-search { padding: 0 20px 12px; }
.as-search input { width: 100%; font: inherit; font-size: 16px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--stroke); background: var(--card); color: var(--ink); }
.as-body { overflow-y: auto; padding: 4px 20px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overscroll-behavior: contain; }
@media (max-width: 860px) { .as-body { grid-template-columns: minmax(0, 1fr); } }
.as-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.as-group h3 small { margin-left: auto; font-size: 12px; color: var(--muted); }
.as-dot { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 10px currentColor; }
.as-group--plan .as-dot { background: #fbbf24; color: #fbbf24; }
.as-group--guide .as-dot { background: #22d3ee; color: #22d3ee; }
.as-group--nayami .as-dot { background: #f472b6; color: #f472b6; }
.as-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.as-group a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; text-decoration: none; color: var(--ink);
  padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-size: 13.5px; line-height: 1.5;
}
.as-group a:hover { border-color: var(--stroke); box-shadow: 3px 3px 0 var(--pop); }
.as-m { font-family: var(--font-code); font-size: 11px; color: var(--muted); white-space: nowrap; }
.as-group a.is-read .as-t::before { content: "✓ "; color: #16a34a; font-weight: 900; }
.as-group a.is-here { border-color: var(--stroke); background: #fef3c7; }
.as-empty { grid-column: 1 / -1; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   光速シミュレーター：デジタルな解析コンソール
   ═══════════════════════════════════════════════════ */
.sim-sec { position: relative; overflow: hidden; color: #e6f6ff; background: radial-gradient(90% 70% at 85% 0%, #123a63 0%, transparent 60%), radial-gradient(80% 60% at 0% 100%, #4a2a07 0%, transparent 55%), #060b1f; }
.sim-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(103, 232, 249, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .07) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.sim-streaks { position: absolute; inset: 0; pointer-events: none; }
.sim-streaks i { position: absolute; left: -30%; height: 2px; width: 26%; border-radius: 2px; background: linear-gradient(90deg, transparent, #67e8f9, #fff); filter: drop-shadow(0 0 6px #22d3ee); animation: streak 1.1s linear infinite; }
.sim-streaks i:nth-child(1) { top: 12%; animation-duration: .9s; }
.sim-streaks i:nth-child(2) { top: 27%; animation-duration: 1.3s; animation-delay: -.4s; background: linear-gradient(90deg, transparent, #fde047, #fff); filter: drop-shadow(0 0 6px #fbbf24); }
.sim-streaks i:nth-child(3) { top: 48%; animation-duration: .75s; animation-delay: -.2s; }
.sim-streaks i:nth-child(4) { top: 66%; animation-duration: 1.05s; animation-delay: -.7s; background: linear-gradient(90deg, transparent, #f472b6, #fff); filter: drop-shadow(0 0 6px #f472b6); }
.sim-streaks i:nth-child(5) { top: 82%; animation-duration: .85s; animation-delay: -.5s; }
.sim-streaks i:nth-child(6) { top: 93%; animation-duration: 1.2s; animation-delay: -.9s; background: linear-gradient(90deg, transparent, #fde047, #fff); }
@keyframes streak { to { left: 130%; } }
.sim-wrap { position: relative; z-index: 1; text-align: center; }
.sim-lead { color: #b9cce8; margin: -12px auto 26px; max-width: 38em; }

.sim-console {
  text-align: left; border: 2px solid rgba(103, 232, 249, .55); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 22, 52, .92), rgba(6, 12, 32, .96));
  box-shadow: 0 0 0 1px rgba(103, 232, 249, .15), 0 0 40px rgba(34, 211, 238, .25), inset 0 0 60px rgba(34, 211, 238, .06);
}
.sim-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-bottom: 1px solid rgba(103, 232, 249, .25); font-family: var(--font-code); font-size: 12px; letter-spacing: .12em; color: #67e8f9; }
.sim-led { width: 9px; height: 9px; border-radius: 50%; background: #fde047; box-shadow: 0 0 8px #fde047; }
.sim-led:nth-child(2) { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; } .sim-led:nth-child(3) { background: #f472b6; box-shadow: 0 0 8px #f472b6; }
.sim-bar__t { margin-left: 8px; } .sim-bar__t b { color: #fff; }
.sim-bar__st { margin-left: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; color: #4ade80; }
.is-busy .sim-bar__st { color: #fde047; animation: blink-t .5s steps(2) infinite; }
@keyframes blink-t { 50% { opacity: .35; } }
.sim-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
@media (max-width: 900px) { .sim-body { grid-template-columns: minmax(0, 1fr); } }
.sim-in { padding: 20px; display: grid; gap: 16px; border-right: 1px solid rgba(103, 232, 249, .2); }
@media (max-width: 900px) { .sim-in { border-right: 0; border-bottom: 1px solid rgba(103, 232, 249, .2); } }
.sim-in fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sim-in legend { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 8px; padding: 0; }
.sim-in legend span { font-family: var(--font-code); font-size: 11px; color: #0b1533; background: #67e8f9; border-radius: 4px; padding: 1px 6px; }
.sim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-chips input { position: absolute; opacity: 0; pointer-events: none; }
.sim-chips label {
  cursor: pointer; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #cfe3ff;
  border: 1.5px solid rgba(103, 232, 249, .35); background: rgba(103, 232, 249, .05); transition: all .12s;
}
.sim-chips label:hover { border-color: #67e8f9; color: #fff; }
.sim-chips input:checked + label { background: #22d3ee; color: #04142a; border-color: #a5f3fc; box-shadow: 0 0 14px rgba(34, 211, 238, .7); }
.sim-chips input:focus-visible + label { outline: 2px solid #fde047; outline-offset: 2px; }
.sim-range { display: flex; align-items: center; gap: 14px; }
.sim-range input { flex: 1; min-width: 0; accent-color: #22d3ee; height: 28px; }
.sim-range output { min-width: 5.6em; text-align: right; font-family: var(--font-code); font-size: 26px; font-weight: 700; color: #fde047; text-shadow: 0 0 12px rgba(253, 224, 71, .6); font-variant-numeric: tabular-nums; }
.sim-range output small { font-size: 12px; margin-left: 3px; color: #fef3c7; text-shadow: none; }
.sim-run {
  position: relative; overflow: hidden; margin-top: 4px; font: inherit; font-size: 18px; font-weight: 900; letter-spacing: .1em; cursor: pointer;
  padding: 16px 20px; border-radius: 14px; color: #04142a; border: 0;
  background: linear-gradient(90deg, #22d3ee, #a5f3fc 40%, #fde047 70%, #f472b6); background-size: 200% 100%; animation: run-bg 2.4s linear infinite;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4) inset, 0 0 26px rgba(34, 211, 238, .6), 0 5px 0 #0e7490;
}
.sim-run:hover { filter: brightness(1.08); }
.sim-run:active { transform: translateY(3px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .4) inset, 0 0 26px rgba(34, 211, 238, .6), 0 2px 0 #0e7490; }
.sim-run__ring { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-100%); animation: shine 1.6s ease-in-out infinite; }
@keyframes run-bg { to { background-position: 200% 0; } }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }

.sim-out { position: relative; padding: 22px; min-height: 360px; display: grid; align-content: center; }
.sim-idle { text-align: center; color: #9fb6d8; }
.sim-idle b { color: #fde047; }
.sim-radar { position: relative; width: 150px; height: 150px; margin: 0 auto 16px; border-radius: 50%; border: 1.5px solid rgba(103, 232, 249, .45); background: radial-gradient(circle, transparent 32%, rgba(103, 232, 249, .2) 33%, transparent 34%, transparent 64%, rgba(103, 232, 249, .2) 65%, transparent 66%); }
.sim-radar span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(34, 211, 238, .55), transparent 25%); animation: spin 1.4s linear infinite; }
.sim-log { font-family: var(--font-code); }
.sim-prog { height: 6px; border-radius: 99px; background: rgba(103, 232, 249, .15); overflow: hidden; margin-bottom: 14px; }
.sim-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #fde047, #f472b6); box-shadow: 0 0 12px #22d3ee; transition: width .25s; }
.sim-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sim-log li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: #cfe3ff; animation: log-in .18s ease-out; }
.sl-hex { color: #3b82a6; font-size: 11px; }
.sl-dots { height: 1px; border-bottom: 1px dashed rgba(103, 232, 249, .35); }
.sl-v { color: #4ade80; font-weight: 700; }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } }

.sim-res { animation: log-in .3s ease-out; }
.sim-k { margin: 0; font-family: var(--font-code); font-size: 12px; letter-spacing: .2em; color: #67e8f9; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sim-k span { font-family: var(--font-body); letter-spacing: .02em; color: #9fb6d8; }
.sim-best { margin: 4px 0 14px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; color: #fff; text-shadow: 0 0 18px rgba(103, 232, 249, .55); }
.sim-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .sim-meters { grid-template-columns: minmax(0, 1fr); } }
.sim-m { position: relative; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(103, 232, 249, .35); background: rgba(103, 232, 249, .06); min-width: 0; }
.sim-m::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 0 46%, rgba(103, 232, 249, .08) 50%, transparent 54%); background-size: 100% 8px; pointer-events: none; }
.sim-m__l { display: block; font-size: 12px; color: #9fb6d8; }
.sim-num { font-family: var(--font-code); font-size: clamp(24px, 3vw, 30px); font-weight: 700; color: #a5f3fc; text-shadow: 0 0 14px rgba(103, 232, 249, .7); font-variant-numeric: tabular-nums; }
.sim-m small { font-size: 12px; margin-left: 2px; color: #cfe3ff; }
.sim-m--hot { border-color: rgba(253, 224, 71, .6); background: rgba(253, 224, 71, .07); }
.sim-m--hot .sim-num { color: #fde047; text-shadow: 0 0 16px rgba(253, 224, 71, .75); }
.sim-why { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--font-code); font-size: 12.5px; color: #b9cce8; }
.sim-why li::before { content: "› "; color: #22d3ee; }
.sim-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sim-acts .btn-sub { background: transparent; color: #a5f3fc; border-color: #67e8f9; box-shadow: 0 0 12px rgba(34, 211, 238, .35); }
.sim-empty { color: #fde047; }

/* 総額ランキング */
.sim-rank { margin-top: 28px; text-align: left; border: 2px solid rgba(253, 224, 71, .45); border-radius: 22px; padding: 18px; background: rgba(6, 12, 32, .9); box-shadow: 0 0 40px rgba(253, 224, 71, .12); scroll-margin-top: 90px; }
.sim-rank__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.sim-rank__head h3 { margin: 0; font-size: 20px; font-weight: 900; color: #fff; }
.sim-rank__head h3 small { margin-left: 10px; font-size: 12px; font-weight: 500; color: #9fb6d8; }
.sim-tabs { margin-left: auto; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(103, 232, 249, .08); border: 1px solid rgba(103, 232, 249, .3); }
.sim-tab { font: inherit; font-family: var(--font-code); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 8px; border: 0; background: transparent; color: #9fb6d8; }
.sim-tab.is-on { background: #fde047; color: #1a1300; box-shadow: 0 0 14px rgba(253, 224, 71, .6); }
.sim-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(103, 232, 249, .2); }
.sim-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; color: #dbe9ff; }
.sim-table th { font-weight: 700; font-size: 12px; color: #67e8f9; text-align: right; padding: 10px 12px; border-bottom: 1px solid rgba(103, 232, 249, .3); background: rgba(103, 232, 249, .06); font-family: var(--font-code); white-space: nowrap; }
.sim-table th:nth-child(-n+2) { text-align: left; }
.sim-table th.is-on { color: #1a1300; background: #fde047; }
.sim-table td { padding: 11px 12px; border-bottom: 1px solid rgba(103, 232, 249, .12); text-align: right; font-family: var(--font-code); font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; }
.sim-table tbody tr { animation: row-in .35s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(-14px); } }
.sim-table tbody tr:hover td { background: rgba(103, 232, 249, .05); }
.sim-rk { text-align: center !important; }
.sim-rk span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(103, 232, 249, .4); color: #a5f3fc; }
.sim-table tr:nth-child(2) .sim-rk span { border-color: #cbd5e1; color: #e2e8f0; }
.sim-table tr:nth-child(3) .sim-rk span { border-color: #f59e0b; color: #fbbf24; }
.sim-table tr.is-top .sim-rk span { background: #fde047; color: #1a1300; border-color: #fde047; box-shadow: 0 0 14px rgba(253, 224, 71, .8); }
.sim-name { text-align: left !important; font-family: var(--font-body) !important; white-space: normal !important; min-width: 190px; }
.sim-name b { display: block; color: #fff; font-size: 14px; }
.sim-name small { color: #8aa2c6; font-size: 11px; }
.sim-best-tag, .sim-gap { display: inline-block; margin-top: 3px; font-style: normal; font-family: var(--font-code); font-size: 11px; border-radius: 4px; padding: 0 6px; }
.sim-best-tag { background: #4ade80; color: #04220f; font-weight: 700; }
.sim-gap { color: #f9a8d4; border: 1px solid rgba(244, 114, 182, .4); }
.sim-eff { color: #a5f3fc; }
.sim-eff small, .sim-table td small { font-size: 10px; color: #8aa2c6; margin-left: 2px; }
.sim-table td.is-on { color: #fff; font-weight: 700; }
.sim-cellbar { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; }
.sim-cellbar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, #4ade80, #fde047 60%, #f472b6); box-shadow: 0 0 8px rgba(253, 224, 71, .7); }
.sim-table tr.is-top td.is-on { color: #fde047; text-shadow: 0 0 10px rgba(253, 224, 71, .7); }
.sim-note { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.7; color: #8aa2c6; }

@media (prefers-reduced-motion: reduce) {
  .sim-streaks, .sim-run__ring { display: none; }
  .sim-run, .sim-radar span, .is-busy .sim-bar__st { animation: none; }
  .sim-table tbody tr, .sim-log li, .sim-res { animation: none; }
  .learning-card .fx-pulse { display: none; }
}
.sim-cap { margin: 8px 0 0; font-size: 11.5px; color: #8aa2c6; }

/* ═══════════════════════════════════════════════════
   トップページ：光速シミュレーター（黄色のネオンが光るデジタル解析画面）
   夜の黒＋黄色の光。差し色は白と少しのシアン
   ═══════════════════════════════════════════════════ */
body:has(.sx-main) {
  --sx-bg: #07070a; --sx-panel: #0f0e09; --sx-y: #ffd60a; --sx-y2: #ffb300; --sx-yd: #8a6a00;
  --sx-t: #fff6cc; --sx-m: #b8a76a; --sx-line: rgba(255, 214, 10, .28); --sx-c: #5ef2ff;
  background: var(--sx-bg); background-image: none; color: var(--sx-t);
}
body:has(.sx-main)::before { background: #07070a; }
body:has(.sx-main) .site-head { background: rgba(7, 7, 10, .9); border-bottom: 1.5px solid var(--sx-line); backdrop-filter: blur(8px); }
body:has(.sx-main) .brand, body:has(.sx-main) .nav a { color: var(--sx-t); }
body:has(.sx-main) .brand small, body:has(.sx-main) .pr-bar { color: var(--sx-m); }
body:has(.sx-main) .nav a:hover { background: rgba(255, 214, 10, .15); color: var(--sx-y); }
body:has(.sx-main) .nav .nav-cta { background: var(--sx-y); color: #1a1300; border-color: var(--sx-y); box-shadow: 0 0 16px rgba(255, 214, 10, .55); }
body:has(.sx-main) .pr-bar a { color: var(--sx-y); }
body:has(.sx-main) .site-foot { background: #000; border-top: 1px solid var(--sx-line); }
body:has(.sx-main) .float-cta { background: rgba(7, 7, 10, .88); border-top: 1.5px solid var(--sx-line); }
body:has(.sx-main) .fc-list { background: #000; border-color: var(--sx-y); box-shadow: 0 4px 0 var(--sx-yd), 0 0 18px rgba(255, 214, 10, .35); }
body:has(.sx-main) .fc-list small { background: var(--sx-y); }
body:has(.sx-main) .fc-quiz { border-color: var(--sx-y); }

.sx { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 72px) 80px; min-height: 100vh; color: var(--sx-t); font-family: var(--font-body); }
.sx-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--sx-line) 1px, transparent 1px), linear-gradient(90deg, var(--sx-line) 1px, transparent 1px); background-size: 44px 44px; opacity: .35;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 18%, #000, transparent 85%); mask-image: radial-gradient(75% 60% at 50% 18%, #000, transparent 85%); }
.sx::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(closest-side, rgba(255, 214, 10, .22), transparent); pointer-events: none; }
.sx-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.sx-streaks { position: absolute; inset: 0; pointer-events: none; }
.sx-streaks i { position: absolute; left: -40%; width: 34%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sx-y2), #fff); filter: drop-shadow(0 0 6px var(--sx-y)); animation: sx-streak .8s linear infinite; }
.sx-streaks i:nth-child(1) { top: 8%; animation-duration: .7s; }
.sx-streaks i:nth-child(2) { top: 19%; animation-duration: 1.1s; animation-delay: -.3s; opacity: .6; }
.sx-streaks i:nth-child(3) { top: 33%; animation-duration: .6s; animation-delay: -.5s; }
.sx-streaks i:nth-child(4) { top: 47%; animation-duration: .95s; animation-delay: -.2s; background: linear-gradient(90deg, transparent, var(--sx-c), #fff); filter: drop-shadow(0 0 6px var(--sx-c)); opacity: .7; }
.sx-streaks i:nth-child(5) { top: 61%; animation-duration: .75s; animation-delay: -.6s; }
.sx-streaks i:nth-child(6) { top: 74%; animation-duration: 1.2s; animation-delay: -.1s; opacity: .5; }
.sx-streaks i:nth-child(7) { top: 86%; animation-duration: .65s; animation-delay: -.4s; }
.sx-streaks i:nth-child(8) { top: 95%; animation-duration: .9s; animation-delay: -.7s; opacity: .6; }
@keyframes sx-streak { to { left: 130%; } }
.sx-wrap { position: relative; z-index: 1; }

/* 見出し */
.sx-hero { text-align: center; margin-bottom: 26px; }
.sx-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 14px; border: 1px solid var(--sx-y); border-radius: 4px; font-family: var(--font-code); font-size: 12px; letter-spacing: .12em; color: var(--sx-y); background: rgba(255, 214, 10, .06); }
.sx-tag b { color: #fff; }
.sx-blink { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-y); box-shadow: 0 0 10px var(--sx-y); animation: blink-t .9s steps(2) infinite; }
.sx-h1 { margin: 0 0 12px; font-size: clamp(32px, 6vw, 60px); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-shadow: 0 0 30px rgba(255, 214, 10, .25); }
.sx-glow { color: var(--sx-y); text-shadow: 0 0 22px rgba(255, 214, 10, .8), 0 0 2px #fff; }
.sx-lead { margin: 0 auto; max-width: 40em; color: var(--sx-m); font-size: 15px; }

/* 新規／乗り換え */
.sx-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; margin: 0 auto 22px; padding: 6px; border: 1.5px solid var(--sx-line); border-radius: 14px; background: rgba(255, 214, 10, .04); }
.sx-mode__b { font: inherit; cursor: pointer; display: grid; gap: 2px; padding: 12px 10px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: var(--sx-m); transition: all .15s; }
.sx-mode__b b { font-size: 18px; font-weight: 900; color: var(--sx-t); }
.sx-mode__b small { font-size: 12px; }
.sx-mode__b:hover { border-color: var(--sx-line); }
.sx-mode__b.is-on { background: var(--sx-y); border-color: #fff3a8; color: #3a2c00; box-shadow: 0 0 24px rgba(255, 214, 10, .55); }
.sx-mode__b.is-on b { color: #1a1300; }

/* コンソール */
.sx-console { position: relative; border: 1.5px solid rgba(255, 214, 10, .6); border-radius: 8px; background: linear-gradient(180deg, rgba(20, 18, 8, .95), rgba(8, 8, 6, .96)); box-shadow: 0 0 0 1px rgba(255, 214, 10, .12), 0 0 50px rgba(255, 214, 10, .18), inset 0 0 80px rgba(255, 214, 10, .05); }
.sx-corner { position: absolute; width: 18px; height: 18px; border: 3px solid var(--sx-y); filter: drop-shadow(0 0 6px var(--sx-y)); }
.sx-corner--tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.sx-corner--tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.sx-corner--bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.sx-corner--br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.sx-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-bottom: 1px solid var(--sx-line); font-family: var(--font-code); font-size: 12px; letter-spacing: .1em; color: var(--sx-y); flex-wrap: wrap; }
.sx-led { width: 9px; height: 9px; border-radius: 50%; background: var(--sx-y); box-shadow: 0 0 8px var(--sx-y); }
.sx-led:nth-child(2) { background: var(--sx-y2); } .sx-led:nth-child(3) { background: #fff; box-shadow: 0 0 8px #fff; }
.sx-bar__t { margin-left: 8px; color: var(--sx-m); } .sx-bar__t b { color: #fff; }
.sx-bar__st { margin-left: auto; padding: 2px 10px; border: 1px solid currentColor; border-radius: 3px; color: #7dff9b; }
.is-busy .sx-bar__st { color: var(--sx-y); animation: blink-t .45s steps(2) infinite; }
.sx-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 920px) { .sx-body { grid-template-columns: minmax(0, 1fr); } }
.sx-in { display: grid; gap: 16px; padding: 22px; border-right: 1px solid var(--sx-line); align-content: start; }
@media (max-width: 920px) { .sx-in { border-right: 0; border-bottom: 1px solid var(--sx-line); } }
.sx-in fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sx-in fieldset[hidden] { display: none; }
.sx-in legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: #fff; }
.sx-in legend span { font-family: var(--font-code); font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--sx-y); color: #1a1300; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chips input { position: absolute; opacity: 0; pointer-events: none; }
.sx-chips label { cursor: pointer; padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--sx-t); border: 1.5px solid var(--sx-line); background: rgba(255, 214, 10, .04); transition: all .12s; }
.sx-chips label:hover { border-color: var(--sx-y); color: #fff; }
.sx-chips input:checked + label { background: var(--sx-y); color: #1a1300; border-color: #fff3a8; box-shadow: 0 0 14px rgba(255, 214, 10, .65); }
.sx-chips input:focus-visible + label, .sx-mode__b:focus-visible, .sx-tab:focus-visible, .sx-run:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sx-range { display: flex; align-items: center; gap: 14px; }
.sx-range input { flex: 1; min-width: 0; accent-color: var(--sx-y); height: 28px; }
.sx-range output { min-width: 6em; text-align: right; font-family: var(--font-code); font-size: 26px; font-weight: 700; color: var(--sx-y); text-shadow: 0 0 12px rgba(255, 214, 10, .6); font-variant-numeric: tabular-nums; }
.sx-range output small { margin-left: 3px; font-size: 12px; color: var(--sx-t); text-shadow: none; }
.sx-run { position: relative; overflow: hidden; margin-top: 4px; padding: 18px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 19px; font-weight: 900; letter-spacing: .14em; color: #1a1300;
  background: linear-gradient(90deg, var(--sx-y2), var(--sx-y) 40%, #fff6a8 55%, var(--sx-y) 70%, var(--sx-y2)); background-size: 200% 100%; animation: run-bg 1.6s linear infinite;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4) inset, 0 0 30px rgba(255, 214, 10, .6), 0 5px 0 var(--sx-yd); }
.sx-run:hover { filter: brightness(1.07); }
.sx-run:active { transform: translateY(3px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .4) inset, 0 0 30px rgba(255, 214, 10, .6), 0 2px 0 var(--sx-yd); }
.sx-run__shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-100%); animation: shine 1.2s ease-in-out infinite; }
.sx-run__t { position: relative; }

/* 出力 */
.sx-out { position: relative; padding: 22px; min-height: 440px; display: grid; align-content: center; }
.sx-idle { text-align: center; color: var(--sx-m); }
.sx-idle b { color: var(--sx-y); }
.sx-idle__t { margin: 0 0 4px; font-family: var(--font-code); font-size: 22px; letter-spacing: .4em; color: var(--sx-y); text-shadow: 0 0 12px var(--sx-y); }
.sx-core { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; }
.sx-core i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--sx-y); border-right-color: rgba(255, 214, 10, .35); animation: spin 1.1s linear infinite; filter: drop-shadow(0 0 6px var(--sx-y)); }
.sx-core i:nth-child(2) { inset: 18px; border-top-color: #fff; animation-duration: .8s; animation-direction: reverse; }
.sx-core i:nth-child(3) { inset: 36px; border-top-color: var(--sx-y2); animation-duration: 1.5s; }
.sx-core b { position: absolute; inset: 62px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--sx-y) 45%, transparent 70%); animation: pulse-core 1.2s ease-in-out infinite; }
@keyframes pulse-core { 50% { transform: scale(1.25); opacity: .7; } }
.sx-log { font-family: var(--font-code); }
.sx-prog { position: relative; height: 8px; border-radius: 2px; background: rgba(255, 214, 10, .12); margin-bottom: 16px; }
.sx-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sx-y2), var(--sx-y), #fff); box-shadow: 0 0 14px var(--sx-y); transition: width .18s; }
.sx-prog em { position: absolute; right: 0; top: -22px; font-style: normal; font-size: 13px; color: var(--sx-y); }
.sx-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sx-log li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--sx-t); animation: log-in .16s ease-out; }
.sl-hex { color: var(--sx-yd); font-size: 11px; }
.sl-dots { border-bottom: 1px dashed var(--sx-line); }
.sl-v { color: #7dff9b; font-weight: 700; }
.sx-res { animation: log-in .3s ease-out; }
.sx-k, .sx-pick__k { margin: 0; font-family: var(--font-code); font-size: 12px; letter-spacing: .2em; color: var(--sx-y); }
.sx-head { padding: 16px 18px; border: 1.5px solid var(--sx-y); border-radius: 8px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 214, 10, .2), rgba(255, 214, 10, .03)); box-shadow: 0 0 30px rgba(255, 214, 10, .2) inset; }
.sx-head__l { margin: 6px 0 0; font-size: 16px; font-weight: 800; color: #fff; }
.sx-head__v { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sx-head__v b { font-family: var(--font-code); font-size: clamp(44px, 7vw, 68px); line-height: 1.1; color: var(--sx-y); text-shadow: 0 0 26px rgba(255, 214, 10, .85), 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.sx-head__v span { font-size: 18px; font-weight: 800; color: #fff; }
.sx-head__v em { font-style: normal; font-size: 14px; font-weight: 800; padding: 2px 10px; border-radius: 4px; background: var(--sx-y); color: #1a1300; }
.sx-head__c { margin: 6px 0 0; font-family: var(--font-code); font-size: 12px; color: var(--sx-m); }
.sx-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sx-m { padding: 10px 14px; border: 1px solid var(--sx-line); border-radius: 6px; background: rgba(255, 214, 10, .04); min-width: 0; }
.sx-m span { display: block; font-size: 12px; color: var(--sx-m); }
.sx-m b { font-family: var(--font-code); font-size: clamp(20px, 2.6vw, 26px); color: #fff; font-variant-numeric: tabular-nums; }
.sx-m small { margin-left: 2px; font-size: 12px; color: var(--sx-m); }
.sx-pick { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sx-line); }
.sx-pick__n { margin: 4px 0 10px; font-size: clamp(22px, 3vw, 28px); font-weight: 900; color: #fff; text-shadow: 0 0 18px rgba(255, 214, 10, .45); }
.sx-bd { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sx-bd th, .sx-bd td { padding: 7px 0; border-bottom: 1px solid rgba(255, 214, 10, .14); text-align: left; vertical-align: top; }
.sx-bd th { width: 9.5em; padding-right: 10px; font-weight: 700; color: var(--sx-m); white-space: nowrap; }
.sx-bd td { font-family: var(--font-code); color: var(--sx-t); font-variant-numeric: tabular-nums; }
.sx-bd td small { font-family: var(--font-body); font-size: 11.5px; color: var(--sx-m); }
.sx-bd tr.is-key td b { color: var(--sx-y); font-size: 16px; text-shadow: 0 0 10px rgba(255, 214, 10, .55); }
.sx-bd tr.is-good td { color: #7dff9b; }
.sx-muted { color: var(--sx-m); font-family: var(--font-body); font-size: 12px; }
.sx-memo { margin: 8px 0 0; font-size: 11.5px; color: var(--sx-m); }
.sx-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 6px; font-weight: 800; font-size: 14.5px; text-decoration: none; color: var(--sx-y); border: 1.5px solid var(--sx-y); background: rgba(255, 214, 10, .06); transition: all .12s; }
.sx-btn:hover { background: rgba(255, 214, 10, .16); box-shadow: 0 0 16px rgba(255, 214, 10, .45); }
.sx-btn--main { flex: 1 1 220px; color: #1a1300; background: var(--sx-y); border-color: #fff3a8; box-shadow: 0 0 20px rgba(255, 214, 10, .55), 0 4px 0 var(--sx-yd); }
.sx-btn--main:hover { background: #ffe14d; }
.sx-second { margin: 12px 0 0; font-size: 13px; color: var(--sx-m); }
.sx-second b { color: #fff; }
.sx-empty { color: var(--sx-y); }

/* 総額ランキング */
.sx-rank { margin-top: 28px; padding: 18px; border: 1.5px solid rgba(255, 214, 10, .55); border-radius: 8px; background: rgba(10, 9, 5, .94); box-shadow: 0 0 40px rgba(255, 214, 10, .14); scroll-margin-top: 80px; }
.sx-rank__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.sx-rank__head h2 { margin: 0; font-size: 21px; font-weight: 900; color: #fff; }
.sx-rank__head h2 small { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--sx-m); }
.sx-tabs { margin-left: auto; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--sx-line); border-radius: 8px; background: rgba(255, 214, 10, .05); }
.sx-tab { font: inherit; font-family: var(--font-code); font-size: 13px; font-weight: 700; padding: 6px 13px; border: 0; border-radius: 5px; cursor: pointer; background: transparent; color: var(--sx-m); }
.sx-tab.is-on { background: var(--sx-y); color: #1a1300; box-shadow: 0 0 14px rgba(255, 214, 10, .6); }
.sx-table-wrap { overflow-x: auto; border: 1px solid var(--sx-line); border-radius: 6px; }
.sx-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.sx-table th { padding: 10px 12px; text-align: right; font-family: var(--font-code); font-size: 12px; color: var(--sx-y); background: rgba(255, 214, 10, .07); border-bottom: 1px solid var(--sx-line); white-space: nowrap; }
.sx-table th:nth-child(-n+2) { text-align: left; }
.sx-table th.is-on { background: var(--sx-y); color: #1a1300; }
.sx-table td { position: relative; padding: 11px 12px; text-align: right; font-family: var(--font-code); color: var(--sx-t); border-bottom: 1px solid rgba(255, 214, 10, .1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-table tbody tr { animation: row-in .32s ease-out both; animation-delay: var(--d, 0ms); }
.sx-table tbody tr:hover td { background: rgba(255, 214, 10, .05); }
.sx-rk { text-align: center !important; }
.sx-rk span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; font-weight: 700; border: 1px solid var(--sx-line); color: var(--sx-y); }
.sx-table tr.is-top .sx-rk span { background: var(--sx-y); color: #1a1300; box-shadow: 0 0 14px rgba(255, 214, 10, .85); }
.sx-name { text-align: left !important; white-space: normal !important; min-width: 200px; font-family: var(--font-body) !important; }
.sx-name b { display: block; font-size: 14px; color: #fff; }
.sx-name small { font-size: 11px; color: var(--sx-m); }
.sx-best, .sx-gap { display: inline-block; margin-left: 6px; font-style: normal; font-family: var(--font-code); font-size: 11px; padding: 0 6px; border-radius: 3px; }
.sx-best { background: #7dff9b; color: #052b10; font-weight: 700; }
.sx-gap { color: var(--sx-m); border: 1px solid var(--sx-line); }
.sx-eff { color: var(--sx-y) !important; }
.sx-perk { color: #7dff9b !important; }
.sx-table td small { margin-left: 2px; font-size: 10px; color: var(--sx-m); }
.sx-table td.is-on { color: #fff; font-weight: 700; }
.sx-table tr.is-top td.is-on { color: var(--sx-y); text-shadow: 0 0 10px rgba(255, 214, 10, .8); }
.sx-cellbar { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; }
.sx-cellbar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, #7dff9b, var(--sx-y) 55%, var(--sx-y2)); box-shadow: 0 0 8px rgba(255, 214, 10, .7); }
.sx-note { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.7; color: var(--sx-m); }

@media (max-width: 520px) {
  .sx-meters { grid-template-columns: minmax(0, 1fr); }
  .sx-bd th { width: 7.5em; }
  .sx-in, .sx-out { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-streaks, .sx-run__shine { display: none; }
  .sx-run, .sx-core i, .sx-core b, .sx-blink, .is-busy .sx-bar__st, .sx-table tbody tr, .sx-log li, .sx-res { animation: none; }
}
.sx-res { scroll-margin-top: 80px; }

/* ═══════════════════════════════════════════════════
   シミュレーターページ：明るい黄色の背景版（黒背景を上書き）
   紙はやわらかいレモン色、パネルは白、光は黄色〜アンバー。文字は濃紺
   ═══════════════════════════════════════════════════ */
body:has(.sx-main) {
  --sx-bg: #fff6cc; --sx-panel: #fffdf3; --sx-y: #ffd400; --sx-y2: #ffb000; --sx-yd: #b97a00;
  --sx-t: #1d1a3a; --sx-m: #6e6248; --sx-line: rgba(196, 140, 0, .30); --sx-c: #00a8c6;
  --sx-ink: #1d1a3a; --sx-good: #0f9d48; --sx-amber: #a86400;
  background: linear-gradient(180deg, #fff3b0 0%, #fff8d9 38%, #fffbea 100%); color: var(--sx-t);
}
body:has(.sx-main)::before { background: #fff3b0; }
body:has(.sx-main) .site-head { background: rgba(255, 249, 220, .9); border-bottom: 2px solid rgba(196, 140, 0, .35); }
body:has(.sx-main) .brand, body:has(.sx-main) .nav a { color: var(--sx-ink); }
body:has(.sx-main) .nav a:hover { background: rgba(255, 212, 0, .35); color: var(--sx-ink); }
body:has(.sx-main) .nav .nav-cta { color: #1a1300; box-shadow: 0 0 0 2px #1d1a3a inset, 0 0 14px rgba(255, 212, 0, .7); }
body:has(.sx-main) .pr-bar a { color: var(--sx-amber); }
body:has(.sx-main) .site-foot { background: #1d1a3a; border-top: 0; }
body:has(.sx-main) .float-cta { background: rgba(255, 249, 220, .92); border-top: 2px solid rgba(196, 140, 0, .35); }
body:has(.sx-main) .fc-list { background: #1d1a3a; border-color: #1d1a3a; box-shadow: 0 4px 0 #000, 0 0 14px rgba(255, 180, 0, .35); }

.sx { color: var(--sx-t); }
.sx::before { background: radial-gradient(closest-side, rgba(255, 212, 0, .45), transparent); }
.sx-grid { opacity: .55; }
.sx-scan { background: repeating-linear-gradient(180deg, rgba(196, 140, 0, .05) 0 1px, transparent 1px 4px); }
.sx-streaks i { background: linear-gradient(90deg, transparent, var(--sx-y2), #fff); filter: drop-shadow(0 0 5px var(--sx-y2)); opacity: .9; }
.sx-streaks i:nth-child(4) { background: linear-gradient(90deg, transparent, var(--sx-c), #fff); filter: drop-shadow(0 0 5px var(--sx-c)); }

.sx-tag { color: var(--sx-amber); border-color: var(--sx-y2); background: rgba(255, 255, 255, .7); }
.sx-tag b { color: var(--sx-ink); }
.sx-h1 { color: var(--sx-ink); text-shadow: 0 2px 0 #fff, 0 0 24px rgba(255, 212, 0, .55); }
.sx-glow { color: #1a1300; background: linear-gradient(transparent 52%, var(--sx-y) 52%); text-shadow: 0 0 18px rgba(255, 212, 0, .9); padding-inline: 4px; }
.sx-lead { color: var(--sx-m); }

.sx-mode { background: rgba(255, 255, 255, .7); border: 2px solid rgba(196, 140, 0, .35); }
.sx-mode__b { color: var(--sx-m); }
.sx-mode__b b { color: var(--sx-ink); }
.sx-mode__b.is-on { background: var(--sx-y); border-color: #1d1a3a; color: #3a2c00; box-shadow: 0 0 20px rgba(255, 212, 0, .8), 0 3px 0 #1d1a3a; }

.sx-console { border: 2px solid #1d1a3a; border-radius: 10px; background: linear-gradient(180deg, #fffef8 0%, #fffaf0 100%); box-shadow: 0 0 0 4px rgba(255, 212, 0, .35), 0 0 46px rgba(255, 190, 0, .45), 0 18px 40px -20px rgba(120, 80, 0, .5); }
.sx-corner { border-color: var(--sx-y2); filter: drop-shadow(0 0 5px var(--sx-y)); }
.sx-bar { background: #1d1a3a; color: var(--sx-y); border-bottom: 0; border-radius: 8px 8px 0 0; }
.sx-bar__t { color: #cfc6a0; } .sx-bar__t b { color: #fff; }
.sx-bar__st { color: #6bff97; }
.sx-in { border-right-color: var(--sx-line); }
.sx-in legend { color: var(--sx-ink); }
.sx-in legend span { background: #1d1a3a; color: var(--sx-y); }
.sx-chips label { color: var(--sx-ink); background: #fff; border: 1.5px solid rgba(196, 140, 0, .45); }
.sx-chips label:hover { border-color: var(--sx-ink); color: var(--sx-ink); }
.sx-chips input:checked + label { background: var(--sx-y); color: #1a1300; border-color: #1d1a3a; box-shadow: 0 0 12px rgba(255, 212, 0, .9); }
.sx-range input { accent-color: #e0a000; }
.sx-range output { color: var(--sx-amber); text-shadow: 0 0 10px rgba(255, 212, 0, .7); }
.sx-range output small { color: var(--sx-m); }
.sx-run { color: #1a1300; box-shadow: 0 0 0 2px #1d1a3a inset, 0 0 28px rgba(255, 190, 0, .75), 0 5px 0 #1d1a3a; }
.sx-run:active { box-shadow: 0 0 0 2px #1d1a3a inset, 0 0 28px rgba(255, 190, 0, .75), 0 2px 0 #1d1a3a; }

.sx-idle { color: var(--sx-m); }
.sx-idle b { color: var(--sx-amber); }
.sx-idle__t { color: var(--sx-amber); text-shadow: 0 0 10px rgba(255, 212, 0, .8); }
.sx-core i { border-top-color: var(--sx-y2); border-right-color: rgba(255, 176, 0, .35); filter: drop-shadow(0 0 5px var(--sx-y)); }
.sx-core i:nth-child(2) { border-top-color: var(--sx-ink); }
.sx-core b { background: radial-gradient(circle, #fff 0%, var(--sx-y) 45%, transparent 70%); }
.sx-prog { background: rgba(196, 140, 0, .15); }
.sx-prog span { background: linear-gradient(90deg, var(--sx-y2), var(--sx-y), #fff3a0); box-shadow: 0 0 12px var(--sx-y); }
.sx-prog em { color: var(--sx-amber); }
.sx-log li { color: var(--sx-ink); }
.sl-hex { color: #b8a36a; }
.sl-v { color: var(--sx-good); }

.sx-k, .sx-pick__k { color: var(--sx-amber); }
.sx-head { border: 2px solid #1d1a3a; background: radial-gradient(120% 140% at 0% 0%, #fff3a0 0%, #fff9dc 60%, #fffef6 100%); box-shadow: 0 0 26px rgba(255, 212, 0, .55), 4px 4px 0 #1d1a3a; }
.sx-head__l, .sx-head__v span { color: var(--sx-ink); }
.sx-head__v b { color: #1a1300; text-shadow: 0 0 22px rgba(255, 200, 0, .95), 0 2px 0 #fff; }
.sx-head__v em { background: #1d1a3a; color: var(--sx-y); }
.sx-head__c { color: var(--sx-m); }
.sx-m { background: #fff; border: 1.5px solid rgba(196, 140, 0, .4); }
.sx-m span, .sx-m small { color: var(--sx-m); }
.sx-m b { color: var(--sx-ink); }
.sx-pick { border-top-color: rgba(196, 140, 0, .4); }
.sx-pick__n { color: var(--sx-ink); text-shadow: 0 0 16px rgba(255, 212, 0, .7); }
.sx-bd th, .sx-bd td { border-bottom-color: rgba(196, 140, 0, .22); }
.sx-bd th { color: var(--sx-m); }
.sx-bd td { color: var(--sx-ink); }
.sx-bd tr.is-key td b { color: #1a1300; background: linear-gradient(transparent 55%, var(--sx-y) 55%); text-shadow: none; }
.sx-bd tr.is-good td { color: var(--sx-good); font-weight: 700; }
.sx-muted, .sx-memo, .sx-second, .sx-bd td small { color: var(--sx-m); }
.sx-second b { color: var(--sx-ink); }
.sx-btn { color: var(--sx-ink); border: 2px solid #1d1a3a; background: #fff; }
.sx-btn:hover { background: #fff3b0; box-shadow: 0 0 14px rgba(255, 212, 0, .7); }
.sx-btn--main { color: #1a1300; background: var(--sx-y); border-color: #1d1a3a; box-shadow: 0 0 18px rgba(255, 212, 0, .8), 0 4px 0 #1d1a3a; }
.sx-btn--main:hover { background: #ffe14d; }
.sx-empty { color: var(--sx-amber); }

.sx-rank { border: 2px solid #1d1a3a; background: #fffef8; box-shadow: 0 0 0 4px rgba(255, 212, 0, .35), 0 0 40px rgba(255, 190, 0, .35); }
.sx-rank__head h2 { color: var(--sx-ink); }
.sx-rank__head h2 small { color: var(--sx-m); }
.sx-tabs { background: #fff8d6; border-color: rgba(196, 140, 0, .4); }
.sx-tab { color: var(--sx-m); }
.sx-tab.is-on { background: #1d1a3a; color: var(--sx-y); box-shadow: 0 0 12px rgba(255, 212, 0, .6); }
.sx-table-wrap { border-color: rgba(196, 140, 0, .4); }
.sx-table th { color: var(--sx-ink); background: #fff3b0; border-bottom-color: rgba(196, 140, 0, .45); }
.sx-table th.is-on { background: var(--sx-y); color: #1a1300; }
.sx-table td { color: var(--sx-ink); border-bottom-color: rgba(196, 140, 0, .18); }
.sx-table tbody tr:hover td { background: #fffbe6; }
.sx-rk span { border-color: rgba(196, 140, 0, .5); color: var(--sx-amber); }
.sx-table tr.is-top td { background: #fff7cc; }
.sx-table tr.is-top .sx-rk span { background: var(--sx-y); color: #1a1300; border-color: #1d1a3a; box-shadow: 0 0 12px rgba(255, 212, 0, .9); }
.sx-name b { color: var(--sx-ink); }
.sx-name small, .sx-table td small { color: var(--sx-m); }
.sx-best { background: var(--sx-good); color: #fff; }
.sx-gap { color: var(--sx-m); border-color: rgba(196, 140, 0, .45); }
.sx-eff { color: var(--sx-amber) !important; font-weight: 700; }
.sx-perk { color: var(--sx-good) !important; font-weight: 700; }
.sx-table td.is-on { color: var(--sx-ink); }
.sx-table tr.is-top td.is-on { color: #1a1300; text-shadow: 0 0 10px rgba(255, 200, 0, .95); }
.sx-cellbar::before { background: linear-gradient(90deg, #2bd46b, var(--sx-y) 55%, var(--sx-y2)); box-shadow: 0 0 6px rgba(255, 190, 0, .8); }
.sx-note { color: var(--sx-m); }

/* フォントは普通のゴシック体。数字は桁がそろうように */
.sx-range output, .sx-head__v b, .sx-m b, .sx-bd td, .sx-table td, .sx-prog em, .sx-tab { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sx-head__v b { font-weight: 900; }

/* ===== 光回線店長 homepage refresh: bright, family-friendly dashboard ===== */
:root { --tencho-blue:#0878d8; --tencho-navy:#101d46; --tencho-yellow:#ffda22; --tencho-paper:#f2fbff; }
body:has(.sx-main) { background:#f3fbff !important; color:var(--tencho-navy) !important; font-family:"Noto Sans JP",sans-serif; }
body:has(.sx-main)::before { background:#fff !important; }
body:has(.sx-main) .site-head { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96) !important; border-bottom:1px solid #dbe9f5 !important; box-shadow:0 2px 12px rgba(16,45,90,.05); backdrop-filter:blur(12px); }
body:has(.sx-main) .site-head .wrap { max-width:1440px; min-height:60px; padding:8px 28px; gap:24px; flex-wrap:nowrap; }
body:has(.sx-main) .brand { display:flex; align-items:center; gap:7px; font-size:27px; font-weight:900; color:var(--tencho-navy) !important; white-space:nowrap; letter-spacing:-.04em; }
body:has(.sx-main) .brand-mascot { display:inline-grid; place-items:center; width:38px; height:38px; border:2px solid #f2c52b; border-radius:50%; background:#fff8d9; font-size:24px; }
body:has(.sx-main) .brand small { display:none; }
body:has(.sx-main) .nav { align-items:center; gap:clamp(8px,1.4vw,22px); flex-wrap:nowrap; font-size:13px; }
body:has(.sx-main) .nav a { color:#17234a !important; white-space:nowrap; font-weight:700; padding:8px 0; }
body:has(.sx-main) .nav a.is-current { border-bottom:3px solid var(--tencho-yellow); }
body:has(.sx-main) .nav .nav-cta { border:1px solid #9bb8d8; padding:8px 16px; border-radius:999px; background:white !important; color:var(--tencho-navy) !important; box-shadow:none !important; }
body:has(.sx-main) .pr-bar { max-width:1440px; font-size:11px; color:#71809c !important; padding:5px 28px; }
.tencho-hero { position:relative; overflow:hidden; min-height:610px; background:#e9f7ff; isolation:isolate; }
.tencho-hero__art { position:absolute; inset:0; z-index:-2; background-image:url("hero-hamster.png"); background-position:center 54%; background-size:cover; }
.tencho-hero__shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 32%,rgba(255,255,255,.42) 49%,rgba(255,255,255,0) 68%); }
.tencho-hero__inner { max-width:1320px; min-height:610px; position:relative; display:flex; flex-direction:column; justify-content:center; padding:36px 24px 82px; }
.tencho-hero__copy { width:min(58%,650px); }
.tencho-ribbon { display:inline-block; margin:0 0 18px; padding:6px 18px; background:var(--tencho-yellow); color:#111b3d; font-size:clamp(15px,1.5vw,22px); font-weight:900; transform:rotate(-2deg); box-shadow:4px 5px 0 rgba(255,183,0,.16); }
.tencho-hero h1 { margin:0; color:#101a3c; font-size:clamp(38px,5.1vw,68px); font-weight:900; line-height:1.16; letter-spacing:-.055em; text-shadow:0 2px 0 rgba(255,255,255,.6); }
.tencho-hero h1 span { color:#f0441f; background:linear-gradient(transparent 72%,#ffe22c 72%); }
.tencho-hero__lead { margin:18px 0 20px; font-size:clamp(15px,1.35vw,19px); line-height:1.65; font-weight:800; color:#152044; }
.tencho-benefits { display:flex; gap:12px; margin-top:20px; }
.tencho-benefits>div { width:112px; height:112px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(36,87,127,.12); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:5px; font-size:11px; line-height:1.4; font-weight:800; }
.tencho-benefits b { color:#f3b800; font-size:27px; line-height:1; }
.hero-jump { position:absolute; left:24px; right:24px; bottom:0; min-height:72px; display:flex; align-items:center; gap:24px; padding:15px 30px; border-radius:18px 18px 0 0; color:white !important; text-decoration:none; background:linear-gradient(100deg,#082f70,#006ec6); box-shadow:0 -5px 24px rgba(0,75,153,.18); }
.hero-jump span { font-size:clamp(19px,2.2vw,30px); font-weight:900; white-space:nowrap; }
.hero-jump b { font-size:15px; }
.hero-jump i { margin-left:auto; color:#ffe32e; font-size:28px; font-style:normal; }
body:has(.sx-main) .sx { background:linear-gradient(180deg,#eaf8ff,#f4fbff) !important; color:var(--tencho-navy) !important; padding:0 0 30px !important; }
body:has(.sx-main) .sx-grid, body:has(.sx-main) .sx-scan, body:has(.sx-main) .sx-streaks { display:none !important; }
body:has(.sx-main) .sx-wrap { max-width:1320px; padding-top:26px; }
body:has(.sx-main) .sx-hero { display:none !important; }
body:has(.sx-main) .sx-mode { display:grid; grid-template-columns:1fr 1fr; max-width:760px; margin:0 auto -1px; gap:0; position:relative; z-index:2; border:1px solid #d3e7f7; border-radius:16px 16px 0 0; overflow:hidden; background:#fff; }
body:has(.sx-main) .sx-mode__b { color:#152044 !important; background:#e7f1fb !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:14px 12px !important; font-size:16px; }
body:has(.sx-main) .sx-mode__b.is-on { background:#fff !important; color:#111a3a !important; box-shadow:inset 0 -4px #ffdc22 !important; }
body:has(.sx-main) .sx-mode__b small { display:block; font-size:11px; color:#66738f !important; }
body:has(.sx-main) .sx-console { border:1px solid #cfe7fa !important; border-radius:0 0 18px 18px !important; background:rgba(255,255,255,.98) !important; box-shadow:0 8px 20px rgba(20,100,170,.09) !important; color:var(--tencho-navy) !important; }
body:has(.sx-main) .sx-bar { background:linear-gradient(100deg,#082f70,#087bd4) !important; border:0 !important; color:#fff !important; padding:14px 22px !important; }
body:has(.sx-main) .sx-bar__t { font-size:20px; font-weight:900; }
body:has(.sx-main) .sx-bar__st { color:#fff !important; }
body:has(.sx-main) .sx-body { padding:22px !important; }
body:has(.sx-main) .sx-in { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px 24px !important; }
body:has(.sx-main) .sx-in fieldset { border:0 !important; border-bottom:1px solid #e7edf5 !important; padding:0 0 14px !important; }
body:has(.sx-main) .sx-in legend { color:#17234a !important; font-size:14px; font-weight:900; }
body:has(.sx-main) .sx-in legend span { background:#e8f4ff !important; color:#0878d8 !important; border-radius:8px; }
body:has(.sx-main) .sx-chips label { background:#f8fbff !important; border:1px solid #d8e2ef !important; color:#17234a !important; border-radius:8px !important; }
body:has(.sx-main) .sx-chips input:checked+label { background:#fff5bf !important; border-color:#f2c400 !important; color:#111a3a !important; }
body:has(.sx-main) .sx-range output { color:#152044 !important; }
body:has(.sx-main) .sx-run { grid-column:1/-1; justify-self:center; width:min(100%,410px); border:0 !important; border-radius:999px !important; background:linear-gradient(180deg,#ffe94a,#ffc900) !important; color:#111a3a !important; box-shadow:0 4px 0 #e5ad00,0 7px 16px rgba(226,172,0,.2) !important; font-size:18px; font-weight:900; }
body:has(.sx-main) .sx-out { background:#f5faff !important; border:1px solid #e0eef9 !important; border-radius:14px; }
body:has(.sx-main) .sx-idle { color:#536783 !important; }
body:has(.sx-main) .sx-rank { margin-top:24px; background:#fff !important; color:#17234a !important; border:1px solid #d8eafb !important; border-radius:18px !important; padding:22px !important; box-shadow:0 8px 24px rgba(20,100,170,.07); }
body:has(.sx-main) .sx-rank h2 { color:#0878d8 !important; }
.home-recommend { padding:18px 0 28px; background:#f1faff; }
.home-recommend__grid { max-width:1320px; display:grid; grid-template-columns:1.15fr 1fr; gap:18px; }
.recommend-card,.ranking-card { min-height:260px; border-radius:18px; background:#fff; border:1px solid #deedf8; box-shadow:0 5px 18px rgba(20,100,170,.06); padding:24px; }
.recommend-card { background:linear-gradient(120deg,#fffdf3,#fff7d9); position:relative; overflow:hidden; }
.recommend-card__tag { display:inline-block; background:#ff4a1c; color:#fff; border-radius:999px; padding:4px 12px; font-weight:900; }
.recommend-card h2 { font-size:clamp(23px,2.5vw,34px); line-height:1.35; margin:12px 0 8px; color:#142044; }
.recommend-card p,.ranking-card p { color:#52617c; font-size:14px; }
.recommend-card>a { display:inline-block; margin-top:10px; padding:12px 22px; border-radius:999px; background:linear-gradient(90deg,#ff4771,#ed0042); color:#fff !important; font-weight:900; text-decoration:none; }
.ranking-card h2 { color:#0878d8; font-size:21px; margin:0 0 8px; }
.ranking-card__bars { display:grid; gap:9px; margin:14px 0; }
.ranking-card__bars span { display:grid; grid-template-columns:26px 1fr 110px; gap:9px; align-items:center; font-size:12px; }
.ranking-card__bars b { display:grid; place-items:center; width:24px; height:24px; background:#fff0b0; border-radius:50%; }
.ranking-card__bars i { height:17px; border-radius:4px; background:linear-gradient(90deg,#0b7bdf,#ffe02e); }
.ranking-card__bars small { color:#64728b; }
.ranking-card>a { color:#0878d8 !important; font-weight:800; }
.home-articles { background:#fffdf6; padding:28px 0 44px; }
.home-section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.home-section-head h2 { margin:0; font-size:clamp(22px,2.6vw,30px); color:#142044; }
.home-section-head>a { color:#0878d8 !important; font-weight:800; white-space:nowrap; }
.home-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.home-article { display:flex; flex-direction:column; overflow:hidden; background:white; border:1px solid #e4eaf1; border-radius:13px; box-shadow:0 5px 14px rgba(20,40,70,.1); color:#142044 !important; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.home-article:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,40,70,.13); }
.home-article__image { height:130px; display:block; background:linear-gradient(130deg,#d9f1ff,#fff2c7); position:relative; }
.home-article__image:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(5,104,195,.06),rgba(255,207,28,.2)); }
.home-article__image--plan { background:linear-gradient(120deg,#d8ecff,#fff 50%,#ffeaa4); }
.home-article__image--guide { background:linear-gradient(120deg,#dff8ee,#f8fff7 50%,#c8e9ff); }
.home-article__image--nayami { background:linear-gradient(120deg,#fff1df,#fff 50%,#dceeff); }
.home-article__body { padding:13px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.home-article__body small { align-self:flex-start; border-radius:999px; background:#0878d8; color:#fff; padding:3px 10px; font-weight:800; }
.home-article__body b { line-height:1.5; font-size:16px; }
.home-article__body>span { color:#0878d8; font-size:13px; font-weight:800; margin-top:auto; padding-top:5px; }
body:has(.sx-main) .site-foot { background:#10234b !important; color:#dbeaff; border:0 !important; }
body:has(.sx-main) .site-foot a { color:#fff !important; }
@media(max-width:900px) {
 body:has(.sx-main) .site-head .wrap { flex-wrap:wrap; padding:8px 16px; gap:8px; }
 body:has(.sx-main) .brand { font-size:22px; }
 body:has(.sx-main) .nav { order:2; width:100%; overflow-x:auto; gap:18px; }
 .tencho-hero,.tencho-hero__inner { min-height:570px; }
 .tencho-hero__art { background-position:58% center; }
 .tencho-hero__shade { background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.86) 42%,rgba(255,255,255,.18) 78%); }
 .tencho-hero__copy { width:70%; }
 body:has(.sx-main) .sx-in { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 .home-recommend__grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 body:has(.sx-main) .site-head .wrap { padding:8px 12px 5px; }
 body:has(.sx-main) .brand { font-size:20px; }
 body:has(.sx-main) .brand-mascot { width:32px;height:32px;font-size:20px; }
 body:has(.sx-main) .nav { gap:16px; font-size:12px; }
 body:has(.sx-main) .nav .nav-cta { display:none; }
 body:has(.sx-main) .pr-bar { padding-inline:12px; }
 .tencho-hero,.tencho-hero__inner { min-height:610px; }
 .tencho-hero__art { background-position:62% center; opacity:.9; }
 .tencho-hero__shade { background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 48%,rgba(255,255,255,.2) 85%); }
 .tencho-hero__inner { padding:28px 16px 88px; justify-content:flex-start; }
 .tencho-hero__copy { width:100%; }
 .tencho-ribbon { font-size:14px; margin-bottom:12px; }
 .tencho-hero h1 { font-size:clamp(36px,10vw,49px); }
 .tencho-hero__lead { font-size:14px; }
 .tencho-benefits { gap:8px; }
 .tencho-benefits>div { width:94px;height:94px;font-size:10px; }
 .tencho-benefits b { font-size:22px; }
 .hero-jump { left:0;right:0; min-height:80px; padding:12px 14px; border-radius:14px 14px 0 0; display:grid; grid-template-columns:1fr auto; gap:2px 8px; }
 .hero-jump span { font-size:19px; }
 .hero-jump b { font-size:11px; grid-column:1; }
 .hero-jump i { grid-column:2;grid-row:1/3; }
 body:has(.sx-main) .sx-wrap { padding:16px 12px 0; }
 body:has(.sx-main) .sx-mode__b { font-size:13px; padding:12px 5px !important; }
 body:has(.sx-main) .sx-mode__b small { font-size:10px; }
 body:has(.sx-main) .sx-bar { padding:11px 12px !important; }
 body:has(.sx-main) .sx-bar__t { font-size:14px; }
 body:has(.sx-main) .sx-body { padding:14px 12px !important; }
 body:has(.sx-main) .sx-in { grid-template-columns:1fr !important; gap:12px !important; }
 body:has(.sx-main) .sx-chips label { font-size:12px; }
 body:has(.sx-main) .sx-run { font-size:16px; }
 .recommend-card,.ranking-card { padding:18px; }
 .home-article-grid { grid-template-columns:1fr; gap:13px; }
 .home-article { display:grid; grid-template-columns:112px 1fr; min-height:128px; }
 .home-article__image { height:100%; min-height:128px; }
 .home-article__body { padding:10px 12px; }
 .home-article__body b { font-size:14px; }
 .home-section-head { align-items:flex-start; }
 .home-section-head h2 { font-size:21px; }
 .home-section-head>a { font-size:12px; }
}

/* Shared mascot mark for article pages */
.brand-mascot{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid #f2c52b;border-radius:50%;background:#fff8d9;font-size:22px;vertical-align:middle;margin-right:6px}