/* hidden属性は常に優先（display指定のある要素でも確実に隠す） */
[hidden]{ display:none !important; }

/* ---------- tokens ---------- */
:root{
  --navy:#13315a;
  --navy-deep:#0d2444;
  --navy-ink:#0a1b34;
  --primary:#1e5ba8;
  --primary-dark:#16467f;
  --accent:#c9a23f;
  --accent-bright:#e0bb52;
  --accent-soft:#f5edd6;
  --bg:#f7f9fc;
  --paper:#fbfaf5;
  --card:#ffffff;
  --text:#1a2533;
  --text-soft:#5a6b7d;
  --text-mute:#8a98a8;
  --border:#e2e8f0;
  --marker: linear-gradient(transparent 58%, #fff3a0 58%, #ffec70 100%);
  --marker-thin: linear-gradient(transparent 70%, #ffec70 70%);
  --shadow-card: 0 10px 30px rgba(19,49,90,.08), 0 2px 6px rgba(19,49,90,.04);
  --radius: 14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans","Yu Gothic", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- marker (黄色ハイライト) ---------- */
.hl{
  background: var(--marker);
  padding: 0 .12em;
  font-weight: 700;
  border-radius: 1px;
}
.hl-soft{
  background: var(--marker-thin);
  padding: 0 .1em;
}

/* ---------- header ---------- */
.site-header{
  background:var(--navy);
  border-bottom:3px solid var(--accent);
  padding:11px 16px;
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;text-decoration:none;font-weight:900;
  font-size:1.05rem;letter-spacing:.02em;
}
.logo-mark{
  width:34px;height:34px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
}
.site-nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:2px}
.site-nav a{
  color:rgba(255,255,255,.85);text-decoration:none;
  font-weight:700;font-size:.78rem;
  padding:5px 7px;border-radius:999px;
  white-space:nowrap;
}
.site-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.site-nav a.is-here{background:rgba(224,187,82,.20);color:#ffe7a8}
.header-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:var(--navy);
  font-size:.82rem;font-weight:800;
  padding:7px 13px;border-radius:999px;
  text-decoration:none;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
/* スマホはロゴ＋ナビが縦並び、PC（760px以上）は横並び */
.site-header{flex-direction:column;align-items:stretch;gap:8px}
@media (min-width:760px){
  .site-header{padding:13px 28px;flex-direction:row;align-items:center;gap:12px}
  .site-nav{justify-content:flex-end;gap:6px}
  .site-nav a{font-size:1rem;padding:7px 14px}
  .header-cta{font-size:.9rem;padding:8px 16px}
}

/* ---------- layout primitives ---------- */
.section{padding:64px 18px}
.section--white{background:#fff}
.section--alt{background:#eef2f8}
.section--paper{background:var(--paper)}
.section--navy{
  background: radial-gradient(120% 80% at 10% -10%, #1c4582 0%, transparent 55%),
              radial-gradient(90% 70% at 110% 110%, rgba(201,162,63,.18) 0%, transparent 60%),
              linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
}
.inner{max-width: 720px; margin:0 auto;}
.inner--wide{max-width: 980px; margin:0 auto;}
.sec-eyebrow{
  display:inline-block;
  color:var(--accent);
  font-size:.78rem; font-weight:800; letter-spacing:.18em;
  margin-bottom:10px;
}
.section--navy .sec-eyebrow{color:var(--accent-bright)}
.sec-title{
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  font-weight:900;
  color:var(--navy);
  line-height:1.45;
  letter-spacing:.01em;
  margin-bottom: 14px;
}
.section--navy .sec-title{color:#fff}
.sec-lead{
  color:var(--text-soft);
  font-size: 1rem;
  line-height: 1.95;
  margin-bottom: 28px;
}
.section--navy .sec-lead{color:#d8e2f1}
.sec-head{ text-align:center; margin-bottom: 36px; }
.sec-head .sec-title::after{
  content:""; display:block;
  width:44px; height:3px;
  background: var(--accent);
  border-radius:2px;
  margin: 14px auto 0;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(201,162,63,.20), transparent 60%),
    radial-gradient(80% 60% at -10% 90%, rgba(30,91,168,.45), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding: 44px 20px 56px;
  overflow:hidden;
}
.hero-call{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,162,63,.45);
  color:#ffe7a8;
  padding: 7px 14px 7px 10px;
  border-radius:999px;
  font-size:.82rem; font-weight:700;
  margin-bottom:18px;
  letter-spacing: .02em;
}
.hero-call::before{
  content:""; display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow: 0 0 0 4px rgba(201,162,63,.22);
}
.hero-title{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-size: clamp(2rem, 8.5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: .01em;
  margin-bottom: 14px;
  color:#fff;
}
.hero-title .strike{
  position:relative; display:inline-block;
  color:#a4b3c8;
}
.hero-title .strike::after{
  content:""; position:absolute;
  left:-2%; right:-2%; top:55%;
  height:6px; background: var(--accent);
  transform: rotate(-3deg);
  border-radius:3px;
}
.hero-title .pop{
  display:inline-block;
  background: linear-gradient(transparent 62%, rgba(224,187,82,.55) 62%, rgba(224,187,82,.55) 92%, transparent 92%);
  padding: 0 .12em;
}
.hero-sub{
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.85;
  color:#e7eef8;
  margin-bottom: 24px;
}
.hero-sub .quiet{color:#b8c4d6; font-weight:500}
.hero-mood{
  display:flex; align-items:center; gap:14px;
  margin: 8px 0 24px;
  padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
}
.hero-mood-arrow{
  flex-shrink:0;
  color: var(--accent-bright);
  font-size: 1.4rem; font-weight:900;
}
.hero-mood-from{ color:#94a3b8; text-decoration: line-through; font-weight:700; font-size:.95rem;}
.hero-mood-to{ color:#fff; font-weight:800; font-size: 1.05rem;}
.hero-cta-row{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom: 16px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 17px 26px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.05rem;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .15s ease;
  letter-spacing: .02em;
}
.btn-primary{
  background: linear-gradient(180deg, #e0bb52 0%, var(--accent) 100%);
  color: var(--navy-ink);
  box-shadow: 0 8px 20px rgba(201,162,63,.45), inset 0 -3px 0 rgba(0,0,0,.12);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,162,63,.55); }
.btn-ghost{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.25);
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); }
.btn-sub{
  font-size:.82rem;
  color:#c8d3e6;
  text-align:center;
  font-weight:500;
}
.hero-image{
  position:relative;
  margin: 26px auto 0;
  max-width: 1320px;
  border-radius: 20px;
  overflow:hidden;
  border: 4px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  aspect-ratio: 1152/928;
  background: #0a1b34;
}
.hero-image img{ width:100%; height:100%; object-fit: cover; object-position: center; }
.hero-image-badge{
  position:absolute; left:14px; bottom:14px;
  background: rgba(13,36,68,.85);
  color:#fff;
  font-size:.78rem; font-weight:700;
  padding:7px 12px;
  border-radius:999px;
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.18);
}
.hero-image-badge .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#5dd39e; margin-right:7px;
  box-shadow:0 0 0 3px rgba(93,211,158,.25);
}

.hero-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  margin-top: 26px;
}
.hero-stat{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 6px;
  text-align:center;
}
.hero-stat strong{
  display:block;
  font-size: 1.4rem; font-weight:900;
  color: var(--accent-bright);
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.hero-stat span{ font-size:.72rem; color:#c7d3e6; font-weight:600; }

@media (min-width: 780px){
  .hero{ padding: 78px 32px 88px; }
  .hero-inner{
    max-width: 1200px; margin:0 auto;
    display:grid; grid-template-columns: 1fr 1.55fr; gap: 56px; align-items:center;
  }
  .hero-image{ margin:0; aspect-ratio: 1152/928; max-width: 100%; }
  .hero-cta-row{ flex-direction: row; }
  .hero-stats{ grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 共感セクション（うわ、ムリ → お、いけるかも） ---------- */
.empathy{
  background: var(--paper);
  padding: 64px 18px 68px;
}
.empathy-call{
  text-align:center;
  color: var(--text-soft);
  font-size: .95rem;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom: 18px;
}
.empathy-call::before, .empathy-call::after{
  content: "—"; color: var(--text-mute); margin: 0 10px;
}
.empathy-title{
  text-align:center;
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.55;
  margin-bottom: 36px;
}
.empathy-title .hl{ background: var(--marker); }
.flip-cards{
  display:grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 1100px; margin: 0 auto;
  position:relative;
}
.flip-card{
  position:relative;
  background: var(--card);
  border-radius: 18px;
  padding: 30px 28px 32px;
  box-shadow: var(--shadow-card);
}
.flip-card.bad{
  border: 1px solid #e0d7c8;
  background: #fffbf3;
}
.flip-card-tag{
  display:inline-block;
  font-size:.84rem; font-weight:800; letter-spacing:.1em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.flip-card.bad .flip-card-tag{
  background:#f3e7d4; color:#8a6d2c;
}
.flip-card.good .flip-card-tag{
  background:#dbe7f8; color: var(--primary);
}
.flip-card h3{
  font-size: 1.42rem; font-weight:900;
  color: var(--navy);
  margin-bottom: 12px;
  line-height:1.5;
}
.flip-card.bad h3{ color:#5a4a25; }
.terminology{
  background:#fff;
  border:1px dashed #d8c597;
  border-radius:10px;
  padding: 28px 18px 18px;
  font-size:1.08rem;
  line-height:2;
  color:#6b5731;
  position:relative;
}
.terminology::before{
  content:"電工の教科書 P.1"; position:absolute; top:-12px; left:16px;
  background:#fff8e1; color:#8a6d2c;
  font-size:.76rem; font-weight:800;
  padding:3px 10px; border-radius: 5px;
  border:1px solid #e8d48a;
  letter-spacing:.08em;
}
.terminology .scary{ color:#1a2533; font-weight:700;}
.flip-feel{
  text-align:right;
  margin-top: 14px;
  font-size: 1.2rem;
  font-weight:900;
  color:#a8895a;
}
.flip-feel.scared{ color:#8a6d2c; }
.flip-card.good{
  border: 1px solid #c8dcf3;
  background: #fff;
}
.simple-line{
  background:#f4f8ff;
  border:1px solid #d6e3f5;
  border-radius:10px;
  padding: 28px 18px 18px;
  font-size: 1.12rem;
  line-height:2;
  color: var(--text);
  position:relative;
}
.simple-line::before{
  content:"ビルメンアカデミー L.1"; position:absolute; top:-12px; left:16px;
  background:#eaf1fc; color: var(--primary);
  font-size:.76rem; font-weight:800;
  padding:3px 10px; border-radius:5px;
  border:1px solid #c8dcf3;
  letter-spacing:.08em;
}
.flip-feel.relieved{ color: var(--primary); }

.flip-arrow{
  text-align:center;
  font-size: 1.5rem;
  margin: -4px 0 -4px;
  color: var(--accent);
  font-weight:900;
}

@media (min-width: 780px){
  .flip-cards{
    grid-template-columns: 1fr auto 1fr;
    align-items:stretch;
    gap: 22px;
  }
  .flip-arrow{
    align-self:center;
    font-size:2rem;
    margin: 0;
  }
}

/* ---------- イントロ（とは） ---------- */
.intro-block{
  background: var(--card);
  border-radius: 18px;
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-card);
  border-left: 5px solid var(--accent);
  font-size: 1.14rem;
  line-height: 2.1;
  color: var(--text);
  position:relative;
}
.nobreak{ white-space: nowrap; }
.intro-block .mascot-peek{
  position:absolute; right:-8px; bottom:-14px;
  width: 86px; height:auto;
  transform: rotate(4deg);
}
.intro-block strong{ color: var(--navy); }
@media (min-width: 780px){
  .intro-block{ padding: 44px 48px; font-size: 1.28rem; line-height: 2.15; }
  .intro-block .mascot-peek{ width: 150px; right: 26px; bottom: -8px; }
}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;
  padding: 44px 20px;
  background: var(--accent-soft);
}
.cta-band-headline{
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.75;
}
.cta-band .btn-sub{ color: #6b5731; margin-top:12px; }
.cta-band--navy{
  background:
    radial-gradient(70% 60% at 80% 20%, rgba(201,162,63,.20), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding: 56px 20px;
}
.cta-band--navy .cta-band-headline{ color:#fff; font-size:1.2rem; }
.cta-band--navy .btn-sub{ color:#c8d3e6; }

/* ---------- 学びの旅 (5 step journey) ---------- */
.journey{
  position:relative;
}
.journey-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position:relative;
  max-width: 720px; margin: 0 auto;
}
.journey-step{
  position:relative;
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card);
  padding: 20px 22px 22px;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border:1px solid var(--border);
}
.journey-num{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--primary) 100%);
  color: #fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-weight:900;
  box-shadow: 0 6px 14px rgba(19,49,90,.25);
}
.journey-num small{ font-size:.6rem; letter-spacing:.1em; opacity:.8; font-weight:700; }
.journey-num strong{ font-size:1.5rem; line-height:1; font-feature-settings:"tnum"; }
.journey-step.is-goal .journey-num{
  background: linear-gradient(160deg, var(--accent) 0%, #a68022 100%);
}
.journey-body h3{
  font-size: 1.12rem;
  font-weight:900;
  color: var(--navy);
  margin-bottom: 4px;
  line-height:1.5;
}
.journey-body h3 .hl{ background: var(--marker); }
.journey-body p{
  color: var(--text-soft);
  font-size:.95rem;
  line-height:1.85;
}
.journey-tag{
  display:inline-block;
  font-size:.7rem; font-weight:800;
  letter-spacing:.08em;
  padding: 3px 10px;
  border-radius:999px;
  background:#eaf1fc; color: var(--primary);
  margin-bottom: 6px;
}
.journey-step.is-goal .journey-tag{
  background: #f7ecc6; color:#8a6d2c;
}
.journey-step::after{
  content:"";
  position:absolute;
  left: 50px; bottom: -16px;
  width: 2px; height: 16px;
  background: repeating-linear-gradient(180deg, var(--accent) 0 4px, transparent 4px 8px);
}
.journey-step:last-child::after{ display:none; }

/* ---------- 選ばれる理由 ---------- */
.reasons{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.reason{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 22px 60px;
  position:relative;
  box-shadow: 0 2px 10px rgba(19,49,90,.04);
}
.reason-num{
  position:absolute; left: 18px; top: 22px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:900; font-size:.85rem;
  border:1px solid #e7d9a8;
}
.reason h3{
  font-size: 1.08rem; font-weight:900;
  color: var(--navy);
  margin-bottom: 4px;
  line-height:1.55;
}
.reason h3 .hl{ background: var(--marker-thin); }
.reason p{
  color: var(--text-soft);
  font-size:.93rem;
  line-height:1.85;
}
@media (min-width:780px){
  .reasons{ grid-template-columns: 1fr 1fr; gap:18px; }
}

/* ---------- アプリプレビュー（スマホ筐体） ---------- */
.preview{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(201,162,63,.10), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
}
.preview::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:55%;
  background: url('/static/images/lp/preview-commute.jpg') center/cover no-repeat;
  opacity:.30;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,0) 100%);
}
.preview > *{ position: relative; z-index: 1; }
@media (max-width: 720px){
  .preview::before{ opacity:.16; width: 75%; }
}
.preview-grid{
  display:grid; grid-template-columns: 1fr; gap:32px;
  align-items:center;
}
.preview-copy h2{
  color:#fff;
  font-size: clamp(1.6rem, 5.4vw, 2.1rem);
  font-weight:900;
  line-height:1.45;
  margin-bottom: 14px;
  word-break: auto-phrase;
}
.preview-copy .hl{
  background: linear-gradient(transparent 62%, rgba(224,187,82,.6) 62%, rgba(224,187,82,.6) 92%, transparent 92%);
  color:#fff;
}
.preview-copy p{
  color:#d8e2f1; font-size:1rem; line-height:1.95;
  margin-bottom: 18px;
  word-break: auto-phrase;
}
.preview-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.preview-pill{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:.82rem; font-weight:700;
  padding:6px 12px; border-radius:999px;
}
.phone{
  margin: 0 auto;
  width: 280px; max-width: 88vw;
  background: #0a1220;
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.08);
  position:relative;
}
.phone::before{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width: 80px; height:18px; border-radius:99px; background:#0a1220;
  z-index:3;
}
.phone-screen{
  background:#f7f9fc;
  border-radius: 30px;
  overflow:hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.55;
  text-align:left;
  position:relative;
  aspect-ratio: 9/19.5;
}
.phone-status{
  background:#fff;
  color: var(--navy);
  display:flex; justify-content: space-between; align-items:center;
  padding: 10px 16px 6px;
  font-size: 10px; font-weight:800;
}
.phone-status .right{ display:flex; gap:4px; align-items:center;}
.phone-header{
  background: var(--navy);
  border-bottom: 2px solid var(--accent);
  color:#fff;
  padding: 28px 14px 10px;
  position:relative;
  margin-top: -22px;
}
.phone-header .ph-logo{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:900;
}
.phone-header .ph-logo-mark{
  background: var(--accent); color: var(--navy);
  width: 16px; height:16px; border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;
}
.phone-body{
  padding: 14px 14px 18px;
}
.ph-eyebrow{
  display:inline-block;
  background:#fff3e0; color:#a25a17;
  font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:999px;
  margin-bottom: 7px;
  letter-spacing:.08em;
}
.ph-title{
  font-size: 14px; font-weight:900;
  color: var(--navy);
  margin-bottom: 8px;
  line-height:1.4;
}
.ph-lead{
  background:#fff;
  border:1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px; line-height: 1.7;
  margin-bottom: 12px;
  color: var(--text);
}
.ph-lead .hl{
  background: var(--marker);
  font-weight:700;
  padding: 0 .1em;
}
.ph-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ph-section h4{
  color: var(--navy);
  font-size: 10.5px; font-weight:900;
  margin-bottom: 5px;
  padding-left: 7px;
  border-left:3px solid var(--accent);
  line-height: 1.45;
}
.ph-section p{ font-size: 9.5px; color:#2c3a4a; line-height:1.85; }
.ph-section p .hl{ background: var(--marker); padding:0 .1em; }
.ph-progress{
  display:flex; align-items:center; gap:6px;
  margin-bottom: 10px;
}
.ph-progress-bar{
  flex:1; height:5px; border-radius:999px; background: var(--border); overflow:hidden;
}
.ph-progress-fill{
  background: var(--primary); height:100%; width: 45%;
}
.ph-progress-text{ font-size: 9px; color: var(--text-soft); font-weight:700; }
.ph-next{
  background: var(--primary);
  color:#fff;
  border-radius: 10px;
  text-align:center;
  font-size: 11px;
  font-weight:800;
  padding: 10px;
  margin-top: 4px;
}
.ph-point{
  background: var(--accent-soft);
  border:1px solid #e7d9a8;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 10px;
}
.ph-point-tag{
  display:inline-block;
  background: var(--accent);
  color:#fff;
  font-size: 8px; font-weight:900;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing:.1em;
  margin-bottom: 4px;
}
.ph-point p{ font-size: 9.5px; color: var(--navy); font-weight:600; line-height:1.7; }
.ph-point p .hl{ background: var(--marker); padding:0 .1em; font-weight:700;}

@media (min-width: 880px){
  .preview-grid{ grid-template-columns: 1fr 1fr; gap: 60px; }
  .phone{ width: 320px; }
}

/* ---------- 教科書（アフィリエイト導線） ---------- */
.book-section .book-card{
  background: var(--card);
  border-radius:18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  border:1px solid var(--border);
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:center;
}
.book-cover{
  background: linear-gradient(160deg, #1e5ba8 0%, #16467f 100%);
  border-radius: 8px;
  aspect-ratio: 3/4;
  max-width: 220px;
  margin: 0 auto;
  position:relative;
  box-shadow: 0 18px 30px rgba(19,49,90,.22), 6px 0 0 -2px rgba(0,0,0,.12);
  color:#fff;
  padding: 22px 18px;
  display:flex; flex-direction:column; justify-content: space-between;
  overflow:hidden;
}
.book-cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent);
}
.book-cover-tag{
  font-size:.7rem; letter-spacing:.15em; color: var(--accent-bright); font-weight:800;
}
.book-cover-title{
  font-size: 1.4rem; font-weight:900; line-height: 1.3;
  letter-spacing:.04em;
}
.book-cover-title small{ display:block; font-size: .8rem; font-weight:700; color:#d8e2f1; margin-top:6px; letter-spacing:0;}
.book-cover-bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size: .68rem;
  color:#c8d3e6;
}
.book-cover-bottom .seal{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent);
  display:flex; align-items:center; justify-content:center;
  color: var(--navy);
  font-size: .65rem;
  font-weight: 900;
  text-align:center;
  line-height: 1.1;
}
.book-info h3{
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 900;
  margin-bottom: 6px;
  line-height:1.5;
}
.book-info .step-note{
  display:inline-block;
  font-size: .72rem; font-weight:800; letter-spacing:.1em;
  background: #f4ecd4; color:#8a6d2c;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.book-info p{
  color: var(--text-soft);
  font-size:.95rem;
  line-height:1.9;
  margin-bottom: 16px;
}
.book-bullets{ list-style:none; margin: 0 0 18px; padding:0; }
.book-bullets li{
  padding-left: 26px; position:relative;
  font-size:.92rem; line-height:1.8;
  color: var(--text);
  margin-bottom: 5px;
}
.book-bullets li::before{
  content:"✓";
  position:absolute; left: 4px; top: 1px;
  width: 16px; height: 16px;
  background: var(--primary); color:#fff;
  border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: .68rem; font-weight: 900;
  top: 5px;
}
.book-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--primary);
  color:#fff;
  font-weight:900;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration:none;
  font-size: .98rem;
  box-shadow: 0 6px 16px rgba(30,91,168,.32);
}
.book-btn .ext{
  font-size:.7rem; opacity:.85;
  border-left:1px solid rgba(255,255,255,.4);
  padding-left:8px; margin-left:2px;
}
.affiliate-note{
  font-size:.74rem; color: var(--text-mute);
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 780px){
  .book-section .book-card{
    grid-template-columns: 240px 1fr;
    gap: 40px;
    padding: 36px;
  }
}

/* ---------- 安心ポイント ---------- */
.assure{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.assure-item{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 16px 10px;
  text-align:center;
}
.assure-icon{
  width: 38px; height:38px; margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}
.assure-item strong{
  display:block;
  font-size:.95rem; font-weight:900;
  color: var(--navy);
  line-height:1.4;
  margin-bottom: 3px;
}
.assure-item span{ font-size: .76rem; color: var(--text-soft); font-weight:600; line-height:1.55; display:block; }

/* ---------- FAQ ---------- */
.faq-list{ display: grid; gap: 10px; }
.faq{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 0 18px;
  overflow:hidden;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding: 16px 0;
  font-weight: 800;
  color: var(--navy);
  display:flex; align-items:flex-start; gap:10px;
  font-size:.98rem;
  line-height:1.6;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"Q";
  flex-shrink:0;
  width: 24px; height:24px;
  background: var(--accent);
  color:#fff;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:900;
  margin-top: 1px;
}
.faq summary::after{
  content:"+";
  margin-left:auto;
  color: var(--text-mute);
  font-size: 1.4rem;
  line-height:1;
  align-self:center;
  transition: transform .2s;
}
.faq[open] summary::after{ content:"−"; }
.faq-body{
  padding: 4px 0 18px 34px;
  color: var(--text-soft);
  font-size: .93rem;
  line-height: 1.95;
}
.faq-body .hl{ background: var(--marker-thin); color: var(--text); }

/* ---------- footer ---------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  text-align:center;
  padding: 28px 18px 38px;
  color: var(--text-soft);
  font-size:.85rem;
}
.footer-nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 6px 18px;
  margin: 14px 0 10px;
}
.footer-nav a{
  color: var(--text-soft); text-decoration:none; font-size:.82rem;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.footer-small{ font-size:.76rem; opacity:.8; line-height:1.7; }

/* ---------- in-view marker reveal ---------- */
.mreveal{ background-size: 0% 100%; background-repeat:no-repeat; transition: background-size .9s ease .15s; padding: 0 .12em; font-weight: 700; }
.mreveal.is-on{
  background-image: var(--marker);
  background-size: 100% 100%;
}

/* small typographic helpers */
.center{ text-align:center; }
.dotline{
  text-align:center;
  color: var(--text-mute);
  font-size:.78rem; font-weight:700;
  margin: 28px 0 18px;
  letter-spacing:.18em;
}
.dotline::before, .dotline::after{
  content:""; display:inline-block; width: 22px; height:1px; background: currentColor; vertical-align: middle; margin: 0 10px;
}

/* ===== Design更新: empathy / about 専用 ===== */
.empathy > *{position:relative; z-index:1;}
.empathy-inner{max-width: 1180px; margin: 0 auto;}
.empathy-head{text-align:center; margin-bottom: 44px;}
.empathy-call{display:inline-flex; align-items:center; gap:10px;
  color: var(--text-soft);
  font-size: .85rem;
  font-weight:800;
  letter-spacing:.06em;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: #fff;
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow: 0 2px 8px rgba(19,49,90,.04);}
.empathy-call::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,63,.22);}
.empathy-title{font-size: clamp(1.55rem, 5.4vw, 2.4rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.5;
  letter-spacing: .01em;}
.empathy-title .hl{background: var(--marker);}
.empathy-sub{color: var(--text-soft);
  font-size: .96rem;
  margin-top: 14px;
  font-weight: 600;}
/* split — mobile = stack, desktop = side-by-side */
.split{position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;}
.side{position:relative;
  border-radius: 22px;
  padding: 28px 24px 30px;
  overflow:hidden;
  isolation:isolate;}
.side-meta{display:flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:800; letter-spacing:.16em;
  margin-bottom: 14px;}
.side-meta .dot{width:8px; height:8px; border-radius:50%;}
.side-num{position:absolute;
  right: 22px; top: 22px;
  font-size: 5.5rem;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.04em;
  font-feature-settings:"tnum";
  opacity:.10;
  pointer-events:none;}
.side-headline{font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 18px;
  letter-spacing: .01em;}
.side-feel{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin-top: 18px;
  font-size: clamp(1.4rem, 4.8vw, 1.85rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.3;}
.side-feel small{font-size:.55em; font-weight:700; opacity:.7; letter-spacing:.1em;}
/* BAD side — 重い・古い教科書感 */
.side.bad{background: linear-gradient(180deg, #faf5e8 0%, #f4ead2 100%);
  border: 1px solid #e2d4a6;
  color: #5a4a25;
  box-shadow: 0 14px 40px rgba(90,74,37,.10);}
.side.bad .side-meta{color:#8a6d2c;}
.side.bad .side-meta .dot{background:#b59345; box-shadow: 0 0 0 3px rgba(181,147,69,.2);}
.side.bad .side-num{color:#8a6d2c;}
.side.bad .side-headline{color:#3d2f12;}
.side.bad .side-feel{color:#8a6d2c;}
.book-page{background:#fffcf3;
  border:1px solid #e8d48a;
  border-radius: 6px;
  padding: 22px 22px 22px 38px;
  position:relative;
  font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: .95rem;
  line-height: 2.05;
  color: #3d2f12;
  box-shadow:
    inset 28px 0 0 -22px #b59345,
    inset 30px 0 0 -22px #fffcf3,
    0 1px 0 rgba(0,0,0,.04),
    0 8px 22px rgba(90,74,37,.10);}
.book-page::before{/* page number / chapter tag */
  content:"第1章 ／ P. 12";
  position:absolute; right:14px; top:8px;
  font-size:.65rem; font-weight:700;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color:#a18648; letter-spacing:.1em;}
.book-page::after{/* red ink "挫折" stamp */
  content:"挫折";
  position:absolute;
  right: -8px; bottom: -14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.05rem; font-weight: 900;
  color:#c44a3a;
  border: 2.5px solid #c44a3a;
  padding: 6px 11px;
  border-radius: 6px;
  transform: rotate(-8deg);
  background: rgba(255,251,243,.85);
  letter-spacing:.15em;
  opacity:.85;}
.book-page .scary{font-weight:700;
  color:#1a2533;
  border-bottom: 2px solid rgba(196,74,58,.55);
  padding: 0 1px;}
/* GOOD side — 明るく"スッと入る"感 */
.side.good{background:
    radial-gradient(120% 80% at 0% 0%, rgba(201,162,63,.10), transparent 55%),
    linear-gradient(165deg, #18386b 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 24px 60px rgba(13,36,68,.35);}
.side.good::after{/* subtle gold glow */
  content:"";
  position:absolute;
  right:-60px; bottom:-60px;
  width: 260px; height:260px;
  background: radial-gradient(circle, rgba(201,162,63,.30), transparent 65%);
  z-index:-1;}
.side.good .side-meta{color: var(--accent-bright);}
.side.good .side-meta .dot{background:var(--accent); box-shadow: 0 0 0 3px rgba(201,162,63,.25);}
.side.good .side-num{color: var(--accent-bright);}
.side.good .side-headline{color:#fff;}
.side.good .side-feel{color: var(--accent-bright);}
.app-card{background: #fbfaf5;
  border-radius: 14px;
  padding: 18px 20px 20px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.95;
  position:relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 14px 30px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.18);}
.app-card::before{content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-radius: 14px 0 0 14px;}
.app-chapter{display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:800;
  color: var(--primary);
  background: #eaf1fc;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing:.08em;
  margin-bottom: 10px;}
.app-chapter::before{content:"📖"; font-size:.9em;}
.app-body{color: var(--text);}
.app-body .hl{background: var(--marker);
  padding: 0 .14em;
  font-weight: 700;}
.app-stamp{position:absolute;
  right:-12px; bottom:-14px;
  background: var(--accent);
  color: var(--navy-ink);
  font-size:.78rem; font-weight:900;
  padding: 8px 14px;
  border-radius: 999px;
  transform: rotate(4deg);
  box-shadow: 0 6px 14px rgba(201,162,63,.45);
  letter-spacing:.05em;}
.app-stamp::before{content:"✓ "; margin-right:1px;}
.flow-arrow{justify-self:center; align-self:center;
  width:56px; height:56px; margin:4px auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color:#fff;
  box-shadow: 0 0 0 6px var(--bg, #fbf8f1), 0 12px 24px rgba(201,162,63,.42);
  transform: rotate(90deg);
  position:relative; z-index:4;}
.flow-arrow svg{width:26px; height:26px; display:block;}
@media (min-width: 880px){
.split{grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;}
.flow-arrow{position:absolute; left:50%; top:50%;
    transform: translate(-50%,-50%);
    margin:0; width:66px; height:66px;}
.flow-arrow svg{width:31px; height:31px;}
.side{padding: 38px 36px 40px;}
.side.bad{transform: rotate(-.4deg);}
.side.good{transform: rotate(.4deg);}
.side-num{font-size: 8rem; right: 36px; top: 28px;}
.book-page{padding: 28px 28px 28px 46px; font-size: 1rem;}
.app-card{padding: 22px 24px 24px; font-size: 1.05rem;}
}
.about-wrap{max-width: 1180px; margin: 0 auto; position:relative; z-index:1;}
/* top: tag + ruler */
.about-top{display:flex; align-items:center; gap:14px;
  margin-bottom: 28px;}
.about-tag{display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:900; letter-spacing:.22em;
  color: var(--navy);
  background: #fff;
  padding: 7px 14px;
  border:1px solid var(--border);
  border-radius:999px;}
.about-tag::before{content:"■"; color: var(--accent); font-size:.7em;}
.about-rule{flex:1; height:1px; background: var(--border);}
.about-date{font-size:.7rem; color: var(--text-mute); font-weight:700; letter-spacing:.14em;}
/* big editorial headline */
.about-headline{font-size: clamp(1.7rem, 5.4vw, 2.8rem);
  font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--navy-ink);
  margin-bottom: 24px;
  text-wrap: pretty;}
.about-headline em{font-style: normal;
  position: relative;
  display:inline-block;
  color: var(--navy);}
.about-headline em::after{content:""; position:absolute;
  left:0; right:0;
  bottom: 4px;
  height: 14px;
  background: rgba(201,162,63,.30);
  z-index: -1;
  border-radius: 2px;}
.about-headline .accent-dot{display:inline-block;
  width:.45em; height:.45em;
  border-radius:50%;
  background: var(--accent);
  vertical-align: middle;
  margin-left: .12em;
  transform: translateY(-.4em);}
/* lead */
.about-lead{font-size: 1.02rem;
  line-height: 2.0;
  color: var(--text);
  max-width: 680px;
  margin-bottom: 56px;}
.about-lead strong{color: var(--navy);
  background: var(--marker);
  padding: 0 .12em;
  font-weight: 800;}
/* 3 promise rows -- massive editorial numbers */
.about-promises{display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid var(--navy);}
.promise{position:relative;
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 26px 4px 28px;
  border-bottom: 1px solid rgba(19,49,90,.18);
  align-items: baseline;}
.promise:last-child{border-bottom: 2px solid var(--navy);}
.promise-num{font-family: "Times New Roman", "Yu Mincho", serif;
  font-size: clamp(3rem, 11vw, 5.5rem);
  font-weight: 900;
  line-height: .9;
  color: var(--navy);
  letter-spacing: -.04em;
  font-feature-settings:"tnum";
  position:relative;
  padding-right: 4px;
  min-width: 1.5em;
  text-align:left;}
.promise-num sup{position: relative;
  font-size: .28em;
  color: var(--accent);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  letter-spacing: .15em;
  vertical-align: top;
  top: .8em;
  margin-left: .15em;}
.promise-body{padding-top: 6px;}
.promise-kicker{display:inline-block;
  font-size:.72rem; font-weight:800;
  color: var(--accent);
  letter-spacing:.18em;
  margin-bottom: 6px;}
.promise-title{font-size: clamp(1.15rem, 3.6vw, 1.55rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 6px;
  letter-spacing: .005em;}
.promise-desc{color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.85;}
.promise-arrow{position:absolute;
  right: 6px; top: 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  display:none;
  align-items:center; justify-content:center;
  font-weight: 900;
  font-size: .85rem;
  transition: background .15s, color .15s;}
.promise:hover .promise-arrow{background: var(--navy); color: var(--accent);}
@media (min-width: 780px){
.promise{grid-template-columns: 220px 1fr 60px;
    gap: 30px;
    padding: 38px 8px 40px;}
.promise-arrow{display:inline-flex; position: static; align-self:center;}
.promise-num{font-size: 4.6rem;}
.about-lead{font-size: 1.05rem;}
}
@media (min-width: 1080px){
.promise-num{font-size: 5.6rem;}
}

/* --- empathy/about セクション土台（取りこぼし補完） --- */
.empathy{background:
    radial-gradient(80% 60% at 0% 0%, rgba(19,49,90,.05), transparent 55%),
    radial-gradient(70% 60% at 100% 100%, rgba(201,162,63,.08), transparent 60%),
    var(--paper);
  padding: 76px 18px 84px;
  position:relative;
  overflow:hidden;}
.about{background: var(--paper);
  padding: 70px 20px 78px;
  position:relative;
  overflow:hidden;}
@media (min-width: 1100px){
  .empathy{padding: 96px 24px 110px;}
}
@media (min-width: 780px){
  .about{padding: 84px 24px 92px;}
}

/* promise矢印 非表示（橋口さん指示） */
.promise-arrow{ display:none !important; }


/* ===== 学習ホーム (/app) hub — 土台（下のDesign刷新レイヤーが上書きする前提） ===== */
.hub-hero{
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(201,162,63,.18), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
}
.hub-inner{ max-width: 920px; margin:0 auto; }
.hub-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px;
  text-decoration:none; color:var(--text);
  box-shadow:var(--shadow-card);
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.hub-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(19,49,90,.14);
}

/* ===== 学習ホーム (/app) hub — Design刷新 ===== */
/* ===================================================================
   学習ホーム (app_home) refinements — lp.css 世界観の続き
   ※ lp.css の hub-* をベースに、毎日開きたくなるハブへ。
   =================================================================== */

/* ── 上のフードは lp.css の hub-hero を使うが、ややコンパクト + マスコット ── */
.hub-hero{
  padding: 40px 20px 44px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hub-hero .hub-inner{ position:relative; z-index:2; }
.hub-greeting{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(201,162,63,.45);
  color:#ffe7a8;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  margin-bottom: 16px;
}
.hub-greeting::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(224,187,82,.25);
}
.hub-hero .hub-eyebrow{ display:none; }
.hub-hero .hub-title{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  line-height:1.35;
  font-size: clamp(1.7rem, 6.8vw, 2.6rem);
  margin-bottom: 8px;
}
.hub-hero .hub-title em{
  display:inline-block;
  font-style:normal;
  color: var(--accent-bright);
}
.hub-hero .hub-sub{ margin: 10px auto 0; max-width: 32em; }
.hub-mascot-bg{ display:none; }
@media (min-width: 760px){
  .hub-hero{ padding: 44px 32px 48px; }
}

/* ── 「今日の続きから」カード — ヒーロー直下に重ねて差し込む ── */
.hub-main{ position:relative; }
.hub-resume{
  margin: -36px auto 32px;
  max-width: 920px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 22px 22px;
  box-shadow:
    0 18px 40px rgba(13,36,68,.14),
    0 2px 6px rgba(13,36,68,.06);
  position:relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-decoration:none; color:var(--text);
}
.hub-resume::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-bright) 100%);
}
.hub-resume-top{
  display:flex; flex-direction:column; gap:8px;
  padding-left: 12px;
}
.hub-resume-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:#eaf1fc; color: var(--primary);
  font-size:.72rem; font-weight:900; letter-spacing:.12em;
  padding: 3px 10px; border-radius:999px;
  width: fit-content;
}
.hub-resume-tag::before{ content:"▶"; font-size:.7em; }
.hub-resume-chapter{
  color: var(--text-soft);
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
}
.hub-resume-title{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  color: var(--navy);
  line-height:1.45;
}
.hub-resume-title .hl{ background: var(--marker); padding:0 .12em; }

.hub-resume-prog{ padding-left: 12px; }
.hub-resume-bar{
  height: 8px; border-radius: 999px;
  background: #eef2f8; overflow:hidden;
  margin-bottom: 8px;
}
.hub-resume-fill{
  height:100%;
  background: linear-gradient(90deg, var(--primary) 0%, #2a6fc6 100%);
  width: 31%;
  border-radius:999px;
}
.hub-resume-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.84rem; color: var(--text-soft); font-weight:700;
}
.hub-resume-meta strong{ color: var(--navy); font-feature-settings:"tnum"; }

.hub-resume-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(180deg, #e0bb52 0%, var(--accent) 100%);
  color: var(--navy-ink);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight:900; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(201,162,63,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  text-decoration:none;
  margin-left: 12px;
  letter-spacing: .02em;
}
@media (min-width: 720px){
  .hub-resume{
    grid-template-columns: 1.4fr 1fr auto;
    align-items:center;
    gap: 24px;
    padding: 22px 26px;
  }
  .hub-resume-prog{ padding-left: 0; }
  .hub-resume-cta{ margin-left: 0; }
}

/* ── 今日の数値（小さなストリーク帯） ── */
.hub-daily{
  max-width: 920px; margin: 0 auto 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hub-daily-item{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px 13px;
  text-align:center;
  position:relative;
}
.hub-daily-item .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background: var(--accent-soft); color: var(--accent);
  font-size:.95rem; font-weight:900;
  margin-bottom: 6px;
}
.hub-daily-item strong{
  display:block;
  font-size: 1.5rem; font-weight:900;
  color: var(--navy); line-height:1.05;
  font-feature-settings:"tnum";
}
.hub-daily-item strong small{
  font-size:.6em; color: var(--text-soft);
  font-weight:700; margin-left: 2px;
}
.hub-daily-item span{
  display:block;
  font-size:.74rem; color: var(--text-soft);
  font-weight:700; margin-top: 2px;
  letter-spacing:.04em;
}
.hub-daily-item.is-streak strong{ color: var(--accent); }
.hub-daily-item.is-streak .ic{
  background: var(--accent); color:#fff;
}
@media (min-width: 760px){
  .hub-daily{ gap: 16px; }
  .hub-daily-item{ padding: 18px 14px 16px; }
}

/* ── 4つの導線：lp.css の hub-card をベースに、より語る ── */
.hub-section-head{
  max-width: 920px; margin: 0 auto 18px;
  display:flex; align-items:baseline; gap:14px;
}
.hub-section-head h2{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700; font-size: 1.2rem;
  color: var(--navy); letter-spacing:.02em;
}
.hub-section-head .rule{ flex:1; height:1px; background: var(--border);}
.hub-section-head .num{
  font-size:.7rem; font-weight:800; color: var(--text-mute);
  letter-spacing:.18em;
}

.hub-grid{ max-width: 920px; margin: 0 auto; }
.hub-card{
  position:relative;
  padding: 22px 22px 22px;
  overflow:hidden;
}
.hub-card-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom: 10px;
}
.hub-card-ic-wrap{
  width: 52px; height: 52px;
  border-radius: 14px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 1.7rem;
  flex-shrink:0;
  background: #eef2f8;
}
.hub-card--books .hub-card-ic-wrap{ background: #eaf1fc; }
.hub-card--quiz  .hub-card-ic-wrap{ background: #e6f3ec; }
.hub-card--past  .hub-card-ic-wrap{ background: var(--accent-soft); }
.hub-card--exam  .hub-card-ic-wrap{ background: #fdebe1; }
.hub-card-headtxt{ flex:1; min-width:0; }
.hub-card-kicker{
  display:block;
  font-size:.7rem; font-weight:800; letter-spacing:.16em;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.hub-card-name{
  display:block;
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700; font-size: 1.32rem;
  color: var(--navy); line-height:1.35;
}
.hub-card-desc{
  font-size:.94rem; color: var(--text-soft);
  line-height:1.8; margin-bottom: 14px;
}
.hub-card-desc .hl{ background: var(--marker-thin); padding:0 .1em; font-weight:700; }

.hub-card-meta{
  display:flex; flex-wrap:wrap; gap: 6px;
  margin-bottom: 14px;
}
.hub-card-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.74rem; font-weight:800;
  padding: 4px 10px;
  border-radius:999px;
  background:#eef2f8; color: var(--text);
  letter-spacing:.03em;
}
.hub-card-pill strong{
  color: var(--navy);
  font-feature-settings:"tnum";
  margin-right: 2px;
}
.hub-card--past .hub-card-pill{
  background: #f7ecc6; color:#7a5d22;
}
.hub-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.hub-card-go{
  margin: 0;
  display:inline-flex; align-items:center; gap:4px;
}
.hub-card-go::after{
  content:"→"; margin-left:2px;
  transition: transform .15s ease;
}
.hub-card:hover .hub-card-go::after{ transform: translateX(3px); }
.hub-card-side{
  font-size:.74rem; color: var(--text-mute);
  font-weight:700; letter-spacing:.06em;
  text-align:right;
}
.hub-card-side strong{
  color: var(--navy); font-size:.9rem;
  font-feature-settings:"tnum";
}

/* 「教科書で学ぶ」は主役。一段大きく、進捗ミニ表示つき */
.hub-card--books{
  border-color: rgba(30,91,168,.32);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(30,91,168,.10), transparent 55%),
    #f4f8fd;
}
.hub-card--quiz{
  border-color: rgba(46,125,79,.32);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(46,125,79,.10), transparent 55%),
    #f3faf5;
}
.hub-card--books .hub-card-name{ font-size: 1.45rem; }
.hub-mini-prog{
  display:flex; align-items:center; gap:10px;
  margin: 4px 0 12px;
}
.hub-mini-prog-bar{
  flex:1; height: 6px; border-radius: 999px;
  background: #eef2f8; overflow:hidden;
}
.hub-mini-prog-fill{
  height:100%; background: var(--primary);
  width: 21%;
  border-radius:999px;
}
.hub-mini-prog-text{
  font-size:.78rem; font-weight:800;
  color: var(--text-soft);
  font-feature-settings:"tnum";
}
.hub-mini-prog-text strong{ color: var(--navy); }

/* 過去問は金色アクセントを強めに */
.hub-card--past{
  border-color: rgba(201,162,63,.5);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(224,187,82,.10), transparent 55%),
    #fffdf6;
}
.hub-card--past .hub-card-go{ color:#a6801f; }

/* 試験情報には日付バッジ */
.hub-exam-date{
  display:inline-flex; flex-direction: column;
  align-items: center;
  width: 56px; height:56px;
  background: #fff; border:1.5px solid #f3a479;
  border-radius:12px;
  color:#c54f1a; font-weight:900;
  line-height:1; padding-top:8px;
  font-feature-settings:"tnum";
  flex-shrink:0;
}
.hub-exam-date small{
  font-size:.62rem; letter-spacing:.08em;
  display:block; margin-bottom: 4px;
  color:#c54f1a; font-weight:800;
}
.hub-exam-date b{ font-size: 1.35rem; }

/* desktop layout: 3つ横並び（均等） */
@media (min-width: 760px){
  .hub-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .hub-card{ padding: 24px 26px 22px; }
}

/* ── 追加導線（おすすめの順番、コミュニティ等の小帯） ── */
.hub-tip{
  max-width: 920px;
  margin: 32px auto 0;
  padding: 18px 22px;
  background: var(--paper);
  border:1px dashed #d8c597;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  color: var(--text);
  font-size:.92rem;
  line-height:1.85;
}
.hub-tip .ic{
  width: 28px; height:28px; border-radius:50%;
  background: var(--accent); color: var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.85rem;
  align-self:start;
  margin-top: 2px;
}
.hub-tip strong{ color: var(--navy); font-weight:900; }
.hub-tip .hl{ background: var(--marker-thin); padding:0 .1em; font-weight:700; }

.hub-note{
  max-width: 920px; margin: 28px auto 0;
}

/* 戻るリンクの再スタイル（既存の .header-cta は LP 用なので、サブ用） */
.header-back{
  display:inline-flex; align-items:center; gap:6px;
  color: rgba(255,255,255,.85);
  font-size:.82rem; font-weight:700;
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
}
.header-back:hover{ background: rgba(255,255,255,.10); color:#fff; }

/* ===== 教科書一覧 (/learn) — Design刷新 ===== */
/* ===================================================================
   教科書一覧 (learn_list) — lp.css 世界観のまま、58章を「圧倒されず」並べる
   - 単元（UNIT）でまとめて視覚的に整理
   - 各カード：章番号・タイトル・要約・テスト数・進捗ステータス
   - 学習中カードはマーカー＋アクセントで「ここに戻ろう」
   - 下に「続きを読む」FAB
   =================================================================== */

body{ padding-bottom: 96px; }

/* ── ヘッダ右の戻る ── */
.header-back{
  display:inline-flex; align-items:center; gap:6px;
  color: rgba(255,255,255,.85);
  font-size:.82rem; font-weight:700;
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
}
.header-back:hover{ background: rgba(255,255,255,.10); color:#fff; }

/* ── 上ヒーロー：教科書一覧用にコンパクト ── */
.list-hero{
  background:
    radial-gradient(60% 50% at 90% 10%, rgba(201,162,63,.15), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding: 40px 20px 44px;
  position:relative;
  overflow:hidden;
}
.list-hero-inner{ max-width: 980px; margin: 0 auto; position:relative; z-index:2; text-align:center; }
.list-crumbs{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:#b8c4d6;
  margin-bottom: 14px;
}
.list-crumbs a{ color:#d8e2f1; text-decoration:none; }
.list-crumbs a:hover{ color:#fff; text-decoration: underline; }
.list-crumbs span.sep{ color: rgba(255,255,255,.30); }
.list-hero h1{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  font-size: clamp(1.7rem, 6.2vw, 2.4rem);
  line-height: 1.35;
  color:#fff;
  margin-bottom: 8px;
}
.list-hero h1 em{
  font-style:normal;
  color: var(--accent-bright);
}
.list-hero p.lead{
  color:#d8e2f1; font-size:.96rem; line-height:1.9;
  max-width: 32em;
  margin: 0 auto 22px;
}

/* 全体進捗 */
/* 進捗バーは濃紺ヒーローの外（白エリア）に置く */
.list-prog-band{
  background: var(--bg);
  padding: 22px 18px 6px;
}
.list-prog-band-inner{
  max-width: 720px; margin: 0 auto;
}
.list-prog{
  background: linear-gradient(180deg,#eaf2fb 0%,#eef4fb 100%);
  border: 1px solid #cfe0f2;
  border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: 0 4px 16px rgba(30,91,168,.08);
}
.list-prog-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 12px; margin-bottom: 12px;
}
.list-prog-num{
  font-feature-settings:"tnum";
  color: var(--navy); font-weight:900;
}
.list-prog-num strong{
  font-size: 2rem; line-height:1;
  color: var(--accent);
  margin-right: 4px;
}
.list-prog-num small{
  font-size: .85rem; color: var(--text-soft); font-weight:700;
}
.list-prog-pct{
  font-size:.82rem; color: var(--text-soft); font-weight:800;
  letter-spacing:.06em;
}
.list-prog-bar{
  height: 8px; border-radius: 999px;
  background: #ffffff; overflow:hidden;
  margin-bottom: 14px;
}
.list-prog-fill{
  height: 100%; width: 30%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
}
.list-prog-resume{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.list-prog-resume-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:800;
  background: #fbf3da;
  color: #8a6d2c;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing:.08em;
  border: 1px solid #e8d49b;
}
.list-prog-resume-tag::before{ content:"▶"; font-size:.7em; }
.list-prog-resume-text{
  font-size:.92rem; color: var(--navy); font-weight:700;
}
.list-prog-resume-text .arrow{
  color: var(--accent); margin-left: 4px;
}

/* やさしいリマインダー */
.list-soft-note{
  margin: 14px 2px 0;
  font-size:.82rem; color: var(--text-soft); font-weight:600;
  display:inline-flex; align-items:flex-start; gap:6px;
}
.list-soft-note::before{ content:"☕"; font-size:1em; }

@media (min-width: 760px){
  .list-hero{ padding: 44px 32px 48px; }
}

/* ── 単元タブナビ（横スクロール、stickyではなく素直に） ── */
.unit-nav{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 54px;
  z-index: 10;
}
.unit-nav-inner{
  max-width: 980px; margin: 0 auto;
  display:flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width:none;
  padding: 10px 16px;
}
.unit-nav-inner::-webkit-scrollbar{ display:none; }
.unit-nav a{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  background: #eef2f8;
  color: var(--text-soft);
  padding: 8px 14px;
  border-radius: 999px;
  font-size:.84rem; font-weight:800;
  letter-spacing:.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.unit-nav a small{
  font-size:.68em; opacity:.7;
  font-weight:700;
}
.unit-nav a.is-current{
  background: var(--navy); color:#fff;
}
.unit-nav a.is-done{
  background: #fff;
  border-color: #cfe1cc;
  color: #2c6b3a;
}
.unit-nav a.is-done::after{
  content:"✓"; color: #2c6b3a; font-size:.9em; margin-left: 2px;
}
.unit-nav a:hover{ filter: brightness(.97); }
@media (min-width: 760px){
  .unit-nav{ top: 60px; }
  .unit-nav-inner{ padding: 12px 28px; }
}

/* ── メイン ── */
.list-main{
  padding: 36px 18px 40px;
  max-width: 980px; margin: 0 auto;
}

/* 単元セクション */
.unit-section{ margin-bottom: 44px; scroll-margin-top: 120px; }
.unit-section:last-child{ margin-bottom: 12px; }
.unit-head{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 18px;
}
.unit-head-num{
  font-family:"Times New Roman","Yu Mincho",serif;
  font-size: clamp(2.2rem, 6.5vw, 3.2rem);
  font-weight:900; color: var(--navy);
  line-height: .9; letter-spacing:-.03em;
  font-feature-settings:"tnum";
  padding-bottom: 4px;
}
.unit-head-num sup{
  font-size: .26em; color: var(--accent);
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900; letter-spacing:.14em;
  vertical-align: top; top:.8em;
  margin-left: .15em; position:relative;
}
.unit-head-info{
  padding-bottom: 4px;
}
.unit-head-kicker{
  display:inline-block;
  font-size:.72rem; font-weight:800; letter-spacing:.16em;
  color: var(--accent); margin-bottom: 4px;
}
.unit-head-info h2{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  color: var(--navy);
  line-height: 1.4;
}
.unit-head-meta{
  text-align:right;
  font-size:.78rem; font-weight:800;
  color: var(--text-soft);
  letter-spacing:.04em;
  padding-bottom: 6px;
  white-space: nowrap;
}
.unit-head-meta b{
  color: var(--navy);
  font-feature-settings:"tnum";
}
.unit-head-meta.is-done{ color: #2c6b3a; }
.unit-head-meta.is-done b{ color: #2c6b3a; }

/* チャプターカードのグリッド */
.chapter-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .chapter-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* チャプターカード */
.chapter-card{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 16px 14px;
  text-decoration:none; color: var(--text);
  position: relative;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 2px rgba(19,49,90,.04);
}
.chapter-card:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(19,49,90,.10);
}

/* 章番号 */
.chapter-num{
  width: 52px; height: 52px;
  background: #eef2f8;
  border-radius: 12px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-feature-settings:"tnum";
  color: var(--text-soft);
  font-weight:900;
  line-height:1;
}
.chapter-num small{
  font-size:.5rem; letter-spacing:.12em;
  opacity:.7; margin-bottom:3px; font-weight:800;
}
.chapter-num strong{ font-size: 1.4rem; }

/* 本体 */
.chapter-body h3{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-size: 1.04rem;
  font-weight:700;
  color: var(--navy);
  line-height:1.45;
  margin-bottom: 4px;
  text-wrap: pretty;
}
.chapter-body p{
  font-size:.84rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chapter-meta{
  display:flex; flex-wrap:wrap; gap: 6px;
  align-items:center;
}

/* ステータスピル */
.chapter-status{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.7rem; font-weight:800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing:.04em;
}
.chapter-status.todo{
  background: #eef2f8; color: var(--text-soft);
}
.chapter-status.inprogress{
  background: #fff3a0; color: #8a6d2c;
}
.chapter-status.inprogress::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--accent);
  animation: chPulse 1.4s ease-in-out infinite;
}
@keyframes chPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.5); opacity:.5; }
}
.chapter-status.done{
  background: #def0e0; color: #2c6b3a;
}
.chapter-status.done::before{
  content:"✓"; font-size:.9em; font-weight:900;
}

/* テスト問題数バッジ */
.chapter-quiz{
  display:inline-flex; align-items:center; gap:3px;
  font-size:.72rem; font-weight:700;
  color: var(--text-mute);
}
.chapter-quiz::before{
  content:"✎"; color: var(--accent); font-size:.95em;
}

/* 矢印 */
.chapter-arrow{
  width: 28px; height: 28px;
  border-radius:50%;
  background: transparent;
  color: var(--text-mute);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  flex-shrink:0;
  transition: background .15s, color .15s, transform .15s;
}
.chapter-card:hover .chapter-arrow{
  background: var(--accent);
  color: var(--navy-ink);
  transform: translateX(3px);
}

/* --- 状態別の見た目 --- */
/* 完了 */
.chapter-card.is-done{
  background: #fafdf9;
  border-color: #d8e9d3;
}
.chapter-card.is-done .chapter-num{
  background: #d8e9d3; color: #2c6b3a;
}
.chapter-card.is-done .chapter-body h3{
  color: #2c6b3a;
}

/* CH番号バッジ：単元（部）ごとに色分け（装飾のみ・読了の緑は常に優先） */
#unit-01 .chapter-card:not(.is-done) .chapter-num{ background:#eaf1fc; color:#2b5fa6; }
#unit-02 .chapter-card:not(.is-done) .chapter-num{ background:#f6ecc8; color:#7a5d22; }
#unit-03 .chapter-card:not(.is-done) .chapter-num{ background:#e3f1ee; color:#2f7268; }
#unit-04 .chapter-card:not(.is-done) .chapter-num{ background:#eee9f7; color:#5b4a86; }
#unit-05 .chapter-card:not(.is-done) .chapter-num{ background:#fbe9ea; color:#9a4a52; }
#unit-06 .chapter-card:not(.is-done) .chapter-num{ background:#e2f0f4; color:#1f6b80; }
#unit-07 .chapter-card:not(.is-done) .chapter-num{ background:#ecf2e4; color:#5a6b34; }
#unit-08 .chapter-card:not(.is-done) .chapter-num{ background:#f3ece2; color:#7a5f3f; }

/* 読んだ章：その単元の色でカードを塗りつぶして残す（達成の道） */
.chapter-card.is-done{
  box-shadow:0 4px 14px rgba(19,49,90,.10);
}
#unit-01 .chapter-card.is-done{ background:#eaf1fc; border-color:#b9d3f0; }
#unit-01 .chapter-card.is-done .chapter-num{ background:#2b5fa6; color:#fff; }
#unit-01 .chapter-card.is-done .chapter-body h3{ color:#234f87; }
#unit-02 .chapter-card.is-done{ background:#f7eccb; border-color:#e6cf95; }
#unit-02 .chapter-card.is-done .chapter-num{ background:#9a7a2e; color:#fff; }
#unit-02 .chapter-card.is-done .chapter-body h3{ color:#6f5621; }
#unit-03 .chapter-card.is-done{ background:#e3f1ee; border-color:#aed7cf; }
#unit-03 .chapter-card.is-done .chapter-num{ background:#2f7268; color:#fff; }
#unit-03 .chapter-card.is-done .chapter-body h3{ color:#285f57; }
#unit-04 .chapter-card.is-done{ background:#eee9f7; border-color:#cdc2e6; }
#unit-04 .chapter-card.is-done .chapter-num{ background:#5b4a86; color:#fff; }
#unit-04 .chapter-card.is-done .chapter-body h3{ color:#4c3f70; }
#unit-05 .chapter-card.is-done{ background:#fbe9ea; border-color:#ecc4c7; }
#unit-05 .chapter-card.is-done .chapter-num{ background:#9a4a52; color:#fff; }
#unit-05 .chapter-card.is-done .chapter-body h3{ color:#823f46; }
#unit-06 .chapter-card.is-done{ background:#e2f0f4; border-color:#aed3dd; }
#unit-06 .chapter-card.is-done .chapter-num{ background:#1f6b80; color:#fff; }
#unit-06 .chapter-card.is-done .chapter-body h3{ color:#1b5a6c; }
#unit-07 .chapter-card.is-done{ background:#edf2e4; border-color:#cad8b0; }
#unit-07 .chapter-card.is-done .chapter-num{ background:#5a6b34; color:#fff; }
#unit-07 .chapter-card.is-done .chapter-body h3{ color:#4c5a2c; }
#unit-08 .chapter-card.is-done{ background:#f3ece2; border-color:#ddccb6; }
#unit-08 .chapter-card.is-done .chapter-num{ background:#7a5f3f; color:#fff; }
#unit-08 .chapter-card.is-done .chapter-body h3{ color:#675234; }

/* 読んだ章：枠の角に金メダル（ひと目で分かる印） */
.chapter-card.is-done::after{
  content:"✓";
  position:absolute;
  top:-11px; right:10px;
  width:30px; height:30px;
  border-radius:50%;
  background:linear-gradient(160deg,#e0bb52 0%,#c9a23f 100%);
  color:#3a2e0c;
  font-weight:900; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(201,162,63,.45), 0 0 0 3px #fff;
  z-index:3;
  pointer-events:none;
}
/* メダルも単元の色に合わせる */
#unit-01 .chapter-card.is-done::after{ background:#2b5fa6; color:#fff; box-shadow:0 3px 8px rgba(43,95,166,.40), 0 0 0 3px #fff; }
#unit-02 .chapter-card.is-done::after{ background:#9a7a2e; color:#fff; box-shadow:0 3px 8px rgba(154,122,46,.40), 0 0 0 3px #fff; }
#unit-03 .chapter-card.is-done::after{ background:#2f7268; color:#fff; box-shadow:0 3px 8px rgba(47,114,104,.40), 0 0 0 3px #fff; }
#unit-04 .chapter-card.is-done::after{ background:#5b4a86; color:#fff; box-shadow:0 3px 8px rgba(91,74,134,.40), 0 0 0 3px #fff; }
#unit-05 .chapter-card.is-done::after{ background:#9a4a52; color:#fff; box-shadow:0 3px 8px rgba(154,74,82,.40), 0 0 0 3px #fff; }
#unit-06 .chapter-card.is-done::after{ background:#1f6b80; color:#fff; box-shadow:0 3px 8px rgba(31,107,128,.40), 0 0 0 3px #fff; }
#unit-07 .chapter-card.is-done::after{ background:#5a6b34; color:#fff; box-shadow:0 3px 8px rgba(90,107,52,.40), 0 0 0 3px #fff; }
#unit-08 .chapter-card.is-done::after{ background:#7a5f3f; color:#fff; box-shadow:0 3px 8px rgba(122,95,63,.40), 0 0 0 3px #fff; }

/* 学習中 — マーカー強調 */
.chapter-card.is-current{
  background:
    linear-gradient(180deg, #fffdf6 0%, var(--card) 100%);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(201,162,63,.18);
}
.chapter-card.is-current::before{
  content:"いま、ここ";
  position:absolute;
  top: -10px; left: 14px;
  background: var(--accent);
  color: var(--navy-ink);
  font-size:.66rem; font-weight:900;
  letter-spacing:.12em;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(201,162,63,.40);
}
.chapter-card.is-current .chapter-num{
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: var(--navy-ink);
  box-shadow: 0 6px 14px rgba(201,162,63,.35);
}
.chapter-card.is-current .chapter-arrow{
  background: var(--accent); color: var(--navy-ink);
}
.chapter-card.is-current .chapter-body h3 .hl{
  background: var(--marker); padding: 0 .12em;
}
/* mini progress within current */
.chapter-mini{
  display:flex; align-items:center; gap:8px;
  margin-top: 6px;
}
.chapter-mini-bar{
  flex:1; height:5px; border-radius:999px;
  background:#fff; border:1px solid #f0e5c4;
  overflow:hidden;
}
.chapter-mini-fill{
  height:100%; background: var(--accent);
  width: 50%; border-radius:999px;
}
.chapter-mini-txt{
  font-size:.72rem; font-weight:800; color: #8a6d2c;
  font-feature-settings:"tnum";
}

/* ── 章末「すべての章をひとめで」mini ── */
.list-roundup{
  background: var(--paper);
  border:1px dashed #d8c597;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 36px;
  font-size:.92rem; line-height:1.85; color: var(--text);
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}
.list-roundup .ic{
  width:28px; height:28px; border-radius:50%;
  background: var(--accent); color: var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  margin-top: 2px;
}
.list-roundup strong{ color: var(--navy); }
.list-roundup .hl{ background: var(--marker-thin); padding:0 .1em; font-weight:700; }

/* ── 下部 FAB：いま学んでいる章へ戻る ── */
.list-fab{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(247,249,252,0) 0%, rgba(247,249,252,1) 30%);
  padding: 18px 16px 14px;
  z-index: 20;
  pointer-events: none;
}
.list-fab-inner{
  pointer-events: auto;
  max-width: 720px;
  margin: 0 auto;
  background: var(--navy);
  color:#fff;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  display:flex; align-items:center; gap: 10px;
  box-shadow: 0 18px 40px rgba(13,36,68,.32), 0 2px 8px rgba(13,36,68,.20);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.list-fab-inner .lbl{
  font-size:.7rem; font-weight:900; letter-spacing:.14em;
  color: var(--accent-bright);
  line-height:1.1;
}
.list-fab-inner .ttl{
  font-size:.88rem; font-weight:800; color:#fff;
  line-height:1.2;
  display:block;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.list-fab-inner .txt{ flex:1; min-width:0; }
.list-fab-inner .go{
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #e0bb52 0%, var(--accent) 100%);
  color: var(--navy-ink);
  font-weight:900;
  border-radius: 999px;
  padding: 10px 16px;
  font-size:.88rem;
  flex-shrink:0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
@media (min-width: 720px){
  .list-fab-inner .ttl{ max-width: 340px; }
}

/* ---------- WHY NOW セクション（文字大きめ＋電工の現場写真を左右に薄く） ---------- */
#why-now{
  position: relative;
  overflow: hidden;
  padding: 96px 18px;
  background: #eef2f8;
}
#why-now::before,
#why-now::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:55%;
  background-size: cover;
  background-position: center;
  opacity: .30;
  pointer-events:none;
  z-index: 0;
}
#why-now::before{
  left:0;
  background-image: url('/static/images/lp/why-now-male.jpg');
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
}
#why-now::after{
  right:0;
  background-image: url('/static/images/lp/why-now-female.jpg');
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
}
#why-now > *{ position:relative; z-index:1; }
#why-now .sec-title{
  font-size: clamp(1.85rem, 5.8vw, 2.6rem);
  line-height: 1.5;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
#why-now .sec-lead{
  font-size: clamp(1.06rem, 2.6vw, 1.22rem);
  line-height: 2.05;
  letter-spacing: .015em;
  color: var(--text);
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
#why-now .sec-lead strong{
  color: var(--navy);
  font-weight: 800;
}
/* スマホでは写真が文字に被りすぎないよう、透過をさらに下げる */
@media (max-width: 720px){
  #why-now::before,
  #why-now::after{ opacity: .18; width: 70%; }
}

/* =========== 技能試験 教材紹介（アフィリエイト広告） =========== */
.materials .ad-label{
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
  vertical-align: middle;
}
.material-card{
  background: #fff;
  border: 1px solid rgba(19,49,90,.12);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 28px 26px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(19,49,90,.06);
}
.material-title{
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 14px;
  font-weight: 800;
}
.material-title small{
  font-size: .82rem;
  color: var(--text);
  font-weight: 600;
}
.material-desc{
  font-size: 1.0rem;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 14px;
}
.material-features{
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
}
.material-features li{
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: .98rem;
  color: var(--text);
  line-height: 1.65;
}
.material-features li::before{
  content: "✓";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 18px;
  height: 18px;
  color: var(--accent);
  font-weight: 900;
}
.material-cta{
  text-align: center;
  margin: 22px 0 12px;
}
.material-link{
  display: inline-block;
  background: var(--navy);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(19,49,90,.24);
  transition: transform .15s ease, box-shadow .2s ease;
}
.material-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(19,49,90,.32);
}
.material-disclosure{
  font-size: .72rem;
  color: #888;
  margin: 18px 0 0;
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px){
  .material-card{ padding: 22px 18px; }
  .material-title{ font-size: 1.08rem; }
  .material-features li{ font-size: .92rem; }
  .material-link{ padding: 13px 22px; font-size: .96rem; }
}

/* =========== 技能試験タブ ─ 共通 =========== */
.container--wide{
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}
/* タブレット～スマホでさらに左右余白を確保 */
@media (max-width: 900px){
  .container--wide{ padding: 22px 22px 50px; }
}
@media (max-width: 500px){
  .container--wide{ padding: 18px 18px 44px; }
}
.sec-lead-mini{
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text);
  text-align: center;
  margin: 0 0 24px;
}

/* =========== 技能試験 トップページ =========== */
.gino-overview{
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border: 1px solid rgba(19,49,90,.10);
  border-radius: 16px;
  padding: 28px 22px;
  margin: 30px 0;
}
.gino-overview-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gino-fact{
  text-align: center;
  padding: 6px 0;
}
.gino-fact-num{
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.0;
  margin-bottom: 4px;
}
.gino-fact-num small{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-left: 2px;
}
.gino-fact-label{
  font-size: .82rem;
  color: var(--text);
  font-weight: 600;
}
.gino-overview-note{
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text);
  text-align: center;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(19,49,90,.12);
}
.gino-overview-note strong{
  color: var(--navy);
  font-weight: 800;
}

/* メニューカード */
.gino-menu{
  margin: 44px 0;
}
.gino-menu-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.gino-menu-card{
  display: block;
  background: #fff;
  border: 1px solid rgba(19,49,90,.12);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease;
}
.gino-menu-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(19,49,90,.10);
}
.gino-menu-icon{
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.gino-menu-card h3{
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.5;
}
.gino-menu-card p{
  font-size: .92rem;
  color: var(--text);
  line-height: 1.75;
  margin: 0 0 12px;
}
.gino-menu-cta{
  display: inline-block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
}

/* 候補問題13問 */
.gino-candidates{
  margin: 44px 0;
}
.cand-list{
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.cand{
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(19,49,90,.10);
  border-radius: 10px;
  padding: 18px 18px;
  align-items: start;
}
.cand-no{
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  background: var(--navy);
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  letter-spacing: .02em;
}
.cand-body h3{
  font-size: 1.0rem;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.55;
}
.cand-body p{
  font-size: .9rem;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 720px){
  .gino-overview-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gino-fact-num{ font-size: 2rem; }
  .gino-menu-grid{ grid-template-columns: 1fr; }
  .cand{ grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 14px; }
  .cand-no{ font-size: .92rem; padding: 6px 0; }
  .cand-body h3{ font-size: .96rem; }
  .cand-body p{ font-size: .86rem; }
}

/* =========== 公式 欠陥判断基準ページ =========== */
.defect-notice{
  background: #fff8e6;
  border: 1px solid rgba(201,162,63,.30);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--text);
  margin: 28px 0 36px;
}
.defect-notice strong{
  color: var(--navy);
}
.defect-cat{
  background: #fff;
  border: 1px solid rgba(19,49,90,.10);
  border-radius: 12px;
  padding: 22px 24px 20px;
  margin: 0 0 18px;
}
.defect-cat-title{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(19,49,90,.10);
}
.defect-cat-no{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
  flex-shrink: 0;
}
.defect-sub{
  font-size: .98rem;
  color: var(--navy);
  margin: 14px 0 8px;
  font-weight: 800;
}
.defect-list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.defect-list li{
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: .94rem;
  color: var(--text);
  line-height: 1.85;
  border-bottom: 1px dashed rgba(19,49,90,.08);
}
.defect-list li:last-child{
  border-bottom: none;
}
.defect-list li::before{
  content: "•";
  position: absolute;
  left: 8px;
  top: 8px;
  color: var(--accent);
  font-weight: 900;
}
.defect-list li strong{
  color: #c62828;
  font-weight: 800;
}
.defect-note{
  display: block;
  font-size: .85rem;
  color: #666;
  margin-top: 4px;
  padding-left: 8px;
  line-height: 1.7;
}
.defect-tip{
  background: rgba(201,162,63,.08);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.75;
  margin: 14px 0 0;
  border-radius: 6px;
}
.defect-tip strong{
  color: var(--navy);
}
.defect-back{
  text-align: center;
  margin: 36px 0 24px;
}
.defect-back-link{
  display: inline-block;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  transition: background .2s;
}
.defect-back-link:hover{
  background: var(--navy);
  color: #fff;
}

@media (max-width: 720px){
  .defect-cat{ padding: 18px 18px 16px; }
  .defect-cat-title{ font-size: 1.02rem; gap: 10px; }
  .defect-cat-no{ width: 30px; height: 30px; font-size: .9rem; }
  .defect-list li{ font-size: .9rem; padding-left: 22px; }
  .defect-note{ font-size: .8rem; }
}

/* 注目カード（完全ガイドへの誘導用） */
.gino-menu-card--featured{
  background: linear-gradient(135deg, #fff8e6 0%, #fff 100%);
  border-left-width: 6px;
  position: relative;
}
.gino-menu-card--featured::before{
  content: "おすすめ";
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* =========== 完全ガイド（textbook）ページ =========== */
.tb-page{
  font-size: 1.0rem;
  line-height: 1.95;
  color: var(--text);
}
.tb-page p{
  margin: 0 0 16px;
}
.tb-page p strong,
.tb-page td strong,
.tb-page li strong{
  color: var(--navy);
  font-weight: 800;
}

/* 目次 */
.tb-toc{
  background: #fafafa;
  border: 1px solid rgba(19,49,90,.10);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 30px 0 40px;
}
.tb-toc-title{
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
  font-size: 1.0rem;
}
.tb-toc ol{
  margin: 0;
  padding-left: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
}
.tb-toc ol li{
  padding: 4px 0;
}
.tb-toc ol li a{
  color: var(--navy);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 600;
}
.tb-toc ol li a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* セクション */
.tb-sec{
  margin: 0 0 48px;
  scroll-margin-top: 20px;
}
.tb-h2{
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0 0 18px;
  padding: 12px 0 12px 16px;
  border-left: 5px solid var(--accent);
  background: linear-gradient(90deg, rgba(201,162,63,.08) 0%, transparent 100%);
  line-height: 1.5;
}
.tb-h3{
  font-size: 1.08rem;
  color: var(--navy);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(19,49,90,.18);
}

/* テーブル */
.tb-table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  background: #fff;
  border: 1px solid rgba(19,49,90,.12);
  border-radius: 8px;
  overflow: hidden;
  font-size: .92rem;
}
.tb-table th,
.tb-table td{
  padding: 10px 14px;
  text-align: left;
  line-height: 1.75;
  vertical-align: top;
  border-bottom: 1px solid rgba(19,49,90,.08);
}
.tb-table th{
  background: rgba(19,49,90,.05);
  color: var(--navy);
  font-weight: 800;
  white-space: nowrap;
  width: 30%;
}
.tb-table tr:last-child th,
.tb-table tr:last-child td{
  border-bottom: none;
}
.tb-table thead th{
  background: var(--navy);
  color: #fff;
  white-space: normal;
  width: auto;
}

/* リスト */
.tb-list{
  margin: 12px 0 18px;
  padding-left: 22px;
}
.tb-list li{
  margin: 6px 0;
  line-height: 1.85;
  font-size: .95rem;
}
.tb-list-sub{
  margin: 6px 0;
  padding-left: 20px;
  list-style: circle;
}
.tb-list-num{
  margin: 12px 0 18px;
  padding-left: 24px;
  counter-reset: tbnum;
}
.tb-list-num li{
  margin: 8px 0;
  line-height: 1.85;
  font-size: .95rem;
}

/* Q&A */
.tb-qa{
  background: #fff;
  border: 1px solid rgba(19,49,90,.10);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
}
.tb-q{
  color: var(--navy);
  font-weight: 800;
  margin: 0 0 6px !important;
  font-size: .98rem;
  line-height: 1.6;
}
.tb-a{
  margin: 0 !important;
  font-size: .94rem;
  line-height: 1.85;
  color: var(--text);
}
.tb-qa a{
  color: var(--accent);
  font-weight: 700;
}

/* CTA box */
.tb-cta-box{
  background: rgba(201,162,63,.06);
  border: 1px solid rgba(201,162,63,.25);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0 0;
}
.tb-cta-title{
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px !important;
  font-size: 1.0rem;
}
.tb-cta-box a{
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(19,49,90,.3);
}
.tb-cta-box a:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 720px){
  /* スマホ時はコンテナ自体の余白を拡張（端詰まり防止） */
  .container--wide{ padding: 18px 20px 50px; }
  .tb-toc{ padding: 18px 18px; }
  .tb-toc ol{ grid-template-columns: 1fr; }
  .tb-h2{ font-size: 1.16rem; padding: 10px 0 10px 12px; }
  .tb-h3{ font-size: 1.0rem; }
  .tb-table{ font-size: .86rem; }
  .tb-table th{ width: 35%; padding: 8px 10px; }
  .tb-table td{ padding: 8px 10px; }
  .tb-list li,
  .tb-list-num li{ font-size: .9rem; }
  .gino-menu-card--featured::before{ font-size: .65rem; padding: 2px 9px; }
  /* セクション本文段落にも左右の呼吸を */
  .tb-sec > p{ padding: 0 2px; }
  /* テーブルが横に溢れる時はスクロール可能に */
  .tb-table{ display: block; overflow-x: auto; white-space: nowrap; }
  .tb-table th, .tb-table td{ white-space: normal; }
  /* list-hero のリードも左右余白を確保 */
  .list-hero .list-lead{ padding: 0 6px; }
}