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

   2026-08-18 見た目の見直し（配色・書体・世界観はそのまま）
   - 一覧に動画の表紙画像を入れて「講座の目次」に見えるようにした
   - 講義ページの横幅を広げて動画を大きくした（本文の行長は 40em で止める）
   - 番号つきの小見出し（①②③④・準備①・理由①…）を .step のカードにした
   - 見出しの絵文字（🌱🎬⏱🎁💡）を外した（本体サイトと同じ方針・2026-08-18） */

: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; }
img{ max-width:100%; }

/* 横幅
   ・既定（620px）は使っていません。ページごとに wide / lesson を付けます
   ・wide  … 一覧（トップ）。表紙画像を2列で並べるので広く取る
   ・lesson… 講義ページ。動画を大きく見せたいので少し広く、本文だけ 40em で止める */
.app{ max-width:620px; margin:0 auto; padding:0 18px 60px; }
.app.wide{ max-width:940px; }
.app.lesson{ max-width:760px; }

.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;
}
/* 画像を縁まで見せたいカード（一覧のいちばん上など） */
.card.flush{ padding:0; overflow:hidden; }

.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; }
/* 中央ぞろえのブロックの中でも、3行以上の本文は左ぞろえに戻す */
.lead.tl{ text-align:left; }

.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; }

/* ── 動画の表紙（サムネイル）───────────────
   一覧・おすすめカードで使う共通の部品。16:9で切り出して、
   左上に「第◯回」、右下に長さを重ねる（動画の一覧だと一目で分かる形） */
.thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--blue-soft); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .tag,
.thumb .len{
  position:absolute; font-family:var(--font-head); font-weight:700;
  border-radius:999px; line-height:1; white-space:nowrap;
}
.thumb .tag{
  top:10px; left:10px; font-size:11.5px; letter-spacing:0.06em;
  background:rgba(255,255,255,0.94); color:var(--blue-deep);
  padding:6px 11px; box-shadow:0 2px 8px rgba(61,101,128,0.16);
}
.thumb .len{
  right:10px; bottom:10px; font-size:11.5px;
  background:rgba(55,64,74,0.78); color:#fff; padding:5px 10px;
}
/* 再生の三角。画像の中央に置く（一覧のサムネイルと、講義ページの動画で共用） */
.play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.90); box-shadow:0 4px 14px rgba(61,101,128,0.22);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, background .18s;
}
.play::before{
  content:""; width:0; height:0; margin-left:3px;
  border-left:14px solid var(--blue-deep);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}

/* カードの外に置く見出し（「5つのお話」など）。
   全部を白いカードに入れると、どこが区切りか分からなくなるため */
.sec{ text-align:center; margin:36px 0 0; }
.sec h2{ margin:0 0 8px; }
.sec p{ font-size:14.5px; color:var(--ink-60); margin:0; line-height:1.9; }

/* ── 一覧のいちばん上（1回目のおすすめ）───────────────── */
.feature{ display:grid; grid-template-columns:1.05fr 1fr; }
/* ⚠️ aspect-ratio は必ず消すこと。height:100% と両方きくと、
   「行の高さ×16/9」で横幅が計算されて、画像が右どなりの文章にかぶる（2026-08-18） */
.feature .thumb{ aspect-ratio:auto; height:100%; min-height:230px; border-right:1px solid var(--blue-line); }
/* ここだけ画像の縦横比と枠の形が合わないので、切らずに全体を入れる（表紙に文字があるため） */
.feature .thumb img{ object-fit:contain; background:var(--blue-soft); }
.feature .fbody{ padding:28px 26px; display:flex; flex-direction:column; justify-content:center; }
.feature .flabel{
  font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:0.12em;
  color:var(--blue-deep); margin:0 0 8px;
}
.feature h2{ margin:0 0 10px; font-size:19px; }
.feature p{ font-size:14.5px; color:var(--ink-60); line-height:1.9; margin:0 0 18px; }
.feature .btn-cta{ font-size:15.5px; padding:15px 20px; }
.feature a.thumb:hover .play{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }

/* ── 講義の一覧 ─────────────────
   2〜5回目。画面が広いときは2列、せまいときは1列 */
.lessons{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.lessons > li > a{
  display:block; height:100%; overflow:hidden;
  background:#fff; border:1px solid var(--blue-line); border-radius:16px;
  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(-2px); }
.lessons > li > a:hover .play{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.lessons .thumb{ border-bottom:1px solid var(--blue-line); }
.lessons .lbody{ padding:16px 17px 18px; }
.lessons .ttl{ display:block; font-family:var(--font-head); font-weight:700; font-size:15.5px; line-height:1.6; color:var(--ink); margin:0 0 6px; }
.lessons .sub{ font-size:13.5px; color:var(--ink-45); line-height:1.8; margin:0; }

/* ── 講義ページの上にある「01〜05」の行き来 ───────────────── */
.lessonnav{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin:14px 0 0; }
.lessonnav a,
.lessonnav span{
  font-family:var(--font-head); font-size:13px; font-weight:700; line-height:1;
  width:38px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--blue-line); background:#fff; color:var(--blue-deep);
  transition:background .2s, border-color .2s;
}
.lessonnav a:hover{ background:var(--blue-soft); border-color:var(--blue); }
.lessonnav .now{ background:var(--blue-strong); border-color:var(--blue-strong); color:#fff; }

/* ── 動画のわく ───────────────── */
.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; }

/* 押すまで出しておく表紙（play.js が足す）。
   標準の操作バーの黒いグラデーションで表紙が暗くなるのを避けるため */
.video .poster{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; margin:0; border:0; background:#fff;
  display:block; cursor:pointer;
}
.video .poster img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.video .poster:hover .play,
.video .poster:focus-visible .play{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.video .poster:focus-visible{ outline:3px solid var(--blue-strong); outline-offset:-3px; }
/* 動画は大きいので、再生ボタンも少し大きく */
.video .play{ width:62px; height:62px; }
.video .play::before{
  margin-left:4px;
  border-left-width:19px; border-top-width:12px; border-bottom-width:12px;
}
.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; }

/* ── 読みもの（文字のまとめ）─────────────────
   ページの幅は760pxだが、本文の行はそれより短く止める。
   日本語は1行40字くらいまでが読みやすいため */
.read{ max-width:40em; margin-left:auto; margin-right:auto; }
.read h3{
  margin:30px 0 10px; font-size:17px;
  padding-left:13px; border-left:3px solid var(--blue); line-height:1.55;
}
.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; }

/* ── 番号つきの小見出し（①②③④・準備①・理由①・ひとつめ…）─────────────
   ひとかたまりずつカードにして、どこからどこまでが1つの話か分かるようにする */
.step{
  background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:14px;
  padding:20px 22px 18px; margin:18px 0;
}
.step + .step{ margin-top:14px; }
.step h3{
  margin:0 0 10px; padding-left:0; border-left:none;
  display:flex; align-items:flex-start; gap:11px; font-size:16.5px;
}
.step h3 .n{
  flex:none; width:29px; height:29px; border-radius:50%; margin-top:1px;
  background:var(--blue-strong); color:#fff;
  font-size:14px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.step h3 .tt{ flex:1 1 auto; }
/* 「準備」「理由」などの前置き。番号は丸のほうに出すので、ここは言葉だけ */
.step h3 .lab{
  display:inline-block; font-size:12px; font-weight:700; line-height:1;
  background:#fff; border:1px solid var(--blue-line); border-radius:999px;
  padding:4px 10px; margin-right:9px; vertical-align:2px;
}
.step p:last-child{ margin-bottom:0; }
.step p{ color:var(--ink-60); }

.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); }
.memo .links{ display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; }
.memo .links a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ── ページの下の出口 ───────────────── */
.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; }
}

/* 1回目のおすすめカードは、せまい画面では画像を上に積む */
@media (max-width:720px){
  .feature{ grid-template-columns:1fr; }
  .feature .thumb{ border-right:none; border-bottom:1px solid var(--blue-line); }
  .feature .fbody{ padding:24px 22px 26px; }
}
/* 一覧の2列は、せまい画面では1列に */
@media (max-width:640px){
  .lessons{ grid-template-columns:1fr; gap:14px; }
}
@media (max-width:400px){
  .app{ padding:0 14px 50px; }
  .card{ padding:26px 19px; }
  .card.flush{ padding:0; }
  h1{ font-size:22px; }
  h2{ font-size:18.5px; }
  .feature .fbody{ padding:22px 19px 24px; }
  .step{ padding:17px 17px 15px; }
  .lessonnav a, .lessonnav span{ width:34px; height:32px; font-size:12.5px; }
}