/* R-LABO 学習サイト /manabu/ 共通スタイル
   公式サイト本体（index.html）と同じ配色・書体を使っています。
   色や書体を変えるときは、本体のほうも合わせて直してください。 */

:root{
  --blue:#8fb5cd;
  --blue-deep:#3d6580;
  --blue-strong:#3f6f9d;
  --blue-soft:#eff6fa;
  --blue-line:#d4e4ee;
  --paper:#fcfdfe;
  --beige:#fbf6ef;
  --amber:#f6c445;
  --amber-deep:#eab52e;
  --ink:#37404a;
  --ink-60:rgba(55,64,74,0.82);
  --ink-45:rgba(55,64,74,0.74);
  --line:rgba(55,64,74,0.12);
  --font-head:"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ",Meiryo,sans-serif;
  --font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ",Meiryo,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; word-wrap:break-word; overflow-x:hidden;
  font-family:var(--font-body); color:var(--ink);
  background:var(--paper);
  background-image:linear-gradient(180deg,var(--blue-soft) 0%,var(--paper) 420px);
  background-repeat:no-repeat;
  font-size:16px; font-weight:400; line-height:1.9;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--blue-deep); text-decoration:none; }
h1,h2,h3{ font-family:var(--font-head); letter-spacing:0.02em; margin:0; }
.app{ max-width:620px; margin:0 auto; padding:0 18px 60px; }

.brandbar{ display:flex; align-items:center; justify-content:center; gap:8px; padding:22px 0 4px; }
.brandbar .name{ font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--ink); }
.brandbar .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); }

.card{
  background:#fff; border:1px solid var(--blue-line); border-radius:20px;
  box-shadow:0 6px 24px rgba(61,101,128,0.08);
  padding:32px 26px; margin-top:18px;
}
.eyebrow{
  font-family:var(--font-head); font-size:12px; font-weight:700;
  letter-spacing:0.14em; color:var(--blue-deep); text-transform:uppercase; margin:0 0 12px;
}
h1{ font-size:26px; font-weight:700; line-height:1.55; margin:0 0 16px; }
h2{ font-size:20px; font-weight:700; line-height:1.55; margin:0 0 14px; }
h3{ font-size:16.5px; font-weight:700; line-height:1.6; margin:0 0 6px; color:var(--blue-deep); }
p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:15.5px; color:var(--ink-60); line-height:2; }

.facts{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin:20px 0 0; }
.fact{
  background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:999px;
  padding:7px 15px; font-size:12.5px; font-weight:700; color:var(--blue-deep);
  font-family:var(--font-head);
}

.btn-cta{
  display:block; width:100%; text-align:center; border:none; cursor:pointer;
  background:var(--amber); color:var(--ink);
  padding:17px 24px; border-radius:999px; font-weight:700; font-size:16.5px;
  font-family:var(--font-head);
  box-shadow:0 6px 18px rgba(246,196,69,0.38);
  transition:background .2s, transform .15s, box-shadow .3s;
}
.btn-cta:hover{ background:var(--amber-deep); transform:translateY(-1px); box-shadow:0 10px 26px rgba(234,181,46,0.45); }
.btn-cta small{ display:block; font-size:12px; font-weight:500; opacity:.85; margin-top:3px; }

.btn-sub{
  display:block; width:100%; text-align:center;
  background:#fff; color:var(--blue-deep);
  border:1.5px solid var(--blue-line); border-radius:999px;
  padding:14px 22px; font-weight:700; font-size:15px; font-family:var(--font-head);
  transition:background .2s, border-color .2s;
}
.btn-sub:hover{ background:var(--blue-soft); border-color:var(--blue); }
.btn-sub small{ display:block; font-size:12px; font-weight:500; color:var(--ink-45); margin-top:3px; }

/* ── 講義の一覧（トップ） ───────────────── */
.lessons{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.lessons li a{
  display:grid; grid-template-columns:44px 1fr; gap:15px; align-items:start;
  background:#fff; border:1px solid var(--blue-line); border-radius:16px;
  padding:18px 18px; transition:border-color .2s, box-shadow .25s, transform .15s;
}
.lessons li a:hover{ border-color:var(--blue); box-shadow:0 8px 22px rgba(61,101,128,0.10); transform:translateY(-1px); }
.lessons .num{
  width:44px; height:44px; border-radius:50%;
  background:var(--blue-soft); color:var(--blue-deep);
  font-family:var(--font-head); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.lessons .ttl{ font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 4px; }
.lessons .sub{ font-size:13.5px; color:var(--ink-45); line-height:1.8; margin:0; }
.lessons .meta{ font-size:12px; color:var(--blue-deep); font-weight:700; font-family:var(--font-head); margin:6px 0 0; }

/* ── 動画のわく ───────────────── */
.video{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:14px;
  overflow:hidden; margin:0 0 20px;
}
/* ⚠️ object-fit は contain（全体を入れる）にすること。
   cover（枠を埋める）だと、画面の縦横比が16:9でないとき——MacBookは16:10——
   全画面表示で左右がバッサリ切り落とされる。動画の外周に飾り枠があるので、
   少し切れるだけでも目立つ。2026-08-09に璃久さんから指摘。 */
.video video{ width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.video .soon{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-head); color:var(--blue-deep); text-align:center; padding:16px;
}
.video .soon .ic{ font-size:30px; line-height:1; }
.video .soon .t{ font-size:14.5px; font-weight:700; }
.video .soon .s{ font-size:12.5px; color:var(--ink-45); font-weight:500; line-height:1.7; }

/* ── 読みもの（文字のまとめ）───────────────── */
.read h3{ margin:26px 0 8px; font-size:16.5px; }
.read h3:first-child{ margin-top:0; }
.read p{ font-size:15.5px; color:var(--ink-60); line-height:2; margin:0 0 15px; }
.read b{ color:var(--ink); }
.read ul{ margin:0 0 16px; padding-left:1.15em; }
.read li{ font-size:15.5px; color:var(--ink-60); line-height:1.95; margin:0 0 7px; }

.points{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.points li{
  background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:12px;
  padding:14px 16px; font-size:14.5px; line-height:1.85;
  display:flex; gap:11px; align-items:flex-start;
}
.points li .ck{ flex:none; color:var(--blue-strong); font-weight:700; }

.memo{
  background:var(--beige); border-radius:14px; padding:17px 19px;
  font-size:14.5px; line-height:1.85; color:var(--ink-60);
}
.memo b{ color:var(--blue-deep); }

/* ── ページの下の出口 ───────────────── */
.exits{ display:grid; gap:11px; margin-top:4px; }
.nextup{
  display:block; background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:16px; padding:17px 19px; transition:border-color .2s, background .2s;
}
.nextup:hover{ border-color:var(--blue); background:#e7f1f7; }
.nextup .lb{ font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:0.12em; color:var(--blue-deep); display:block; margin-bottom:4px; }
.nextup .tx{ font-family:var(--font-head); font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.6; }

.kw{
  display:inline-block; background:var(--amber); color:var(--ink);
  font-family:var(--font-head); font-weight:700; border-radius:6px;
  padding:1px 9px; margin:0 2px;
}
/* 黄色いボタンの上では、同じ色だと合言葉が見えなくなるので白地にする */
.btn-cta .kw{ background:#fff; }

.med-note{
  font-size:12.5px; color:var(--ink-45); line-height:1.8; margin:22px 0 0;
  padding-top:16px; border-top:1px solid var(--line);
}
.back{ text-align:center; margin-top:20px; font-family:var(--font-head); font-weight:700; font-size:14.5px; }
.footer-note{ text-align:center; font-size:12px; color:var(--ink-45); margin:26px 0 0; line-height:1.8; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}
@media (max-width:400px){
  .app{ padding:0 14px 50px; }
  .card{ padding:26px 19px; }
  h1{ font-size:22px; }
  h2{ font-size:18.5px; }
  .lessons li a{ grid-template-columns:38px 1fr; gap:12px; padding:16px 15px; }
  .lessons .num{ width:38px; height:38px; font-size:14px; }
}