/* 非公式バナー（全ページ最上部） */
.unofficial-banner{
  background:var(--surface-2);
  color:var(--banner-text);
  padding:var(--sp-8) var(--gutter);
  font-size:.875rem;
  text-align:center;
}
.unofficial-banner a{color:var(--banner-link)}

/* 「このレッスンで身につくこと」コールアウト */
.callout{
  background:var(--surface-2);
  border-left:4px solid var(--accent);
  padding:var(--sp-21);
  margin-block:var(--sp-21);
  border-radius:0 var(--radius) var(--radius) 0;
}
.callout h2,.callout h3{color:var(--text);margin-top:0}

/* 要点カード・アクセスカードのグリッド */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--sp-13);
  margin-block:var(--sp-21);
}

/* カード本体 */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-21);
  box-shadow:var(--shadow);
}
.card .card-title{
  font-weight:700;
  color:var(--accent);
  margin-bottom:var(--sp-8);
}
.card .card-icon{font-size:1.5rem;line-height:1}

/* 音声プレーヤー帯（レッスン冒頭の目立つ位置） */
.audio-bar{
  background:var(--surface);
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  padding:var(--sp-13) var(--sp-21);
  margin-block:var(--sp-21);
  display:flex;
  align-items:center;
  gap:var(--sp-13);
}
.audio-bar .audio-label{font-weight:700;color:var(--accent)}
.audio-bar audio{flex:1;min-width:0}

/* SNS運営者リンク（記事前半・アイコンのみ） */
.sns-links{
  display:flex;
  gap:var(--sp-13);
  margin-block:var(--sp-21);
  align-items:center;
}
.sns-links a{
  display:inline-flex;
  width:2rem;height:2rem;
  align-items:center;justify-content:center;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:50%;
  text-decoration:none;
}
.sns-links a:hover{color:var(--accent);border-color:var(--accent-soft)}
.sns-links svg{width:1.125rem;height:1.125rem;fill:currentColor}

/* 目次（サイド・モバイル共通） */
.toc-list{list-style:none;padding-left:0;margin:0}
.toc-list li{margin-block:var(--sp-5)}
.toc-list ul{list-style:none;padding-left:var(--sp-13);margin-block:var(--sp-5)}
.toc-list a{color:var(--link);text-decoration:none;font-size:.9em}
.toc-list a:hover{color:var(--accent);text-decoration:underline}
.toc-title{font-weight:700;color:var(--accent);margin-bottom:var(--sp-8)}

/* モバイル折りたたみ目次 */
.toc-mobile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-13) var(--sp-21);
  margin-block:var(--sp-21);
}
.toc-mobile summary{
  font-weight:700;
  color:var(--accent);
  cursor:pointer;
}
.toc-mobile .toc-list{margin-top:var(--sp-13)}

/* フッター */
footer.wrap{
  padding-block:var(--sp-55) var(--sp-34);
}
footer.wrap p{margin-block:var(--sp-8)}
.footer-credit{font-size:.8rem; color:var(--text-muted)}
.footer-built-with a{color:inherit; text-decoration:none}
.footer-built-with a:hover{color:var(--accent)}
.footer-nav{display:flex; flex-wrap:wrap; gap:var(--sp-13);
  margin-top:var(--sp-8); font-size:.8rem}
.footer-nav a{color:var(--text-muted)}
.footer-nav a:hover{color:var(--accent)}

/* パンくず */
.breadcrumb{
  font-size:.8rem;
  color:var(--text-muted);
  margin-block:var(--sp-13);
}
.breadcrumb a{
  color:var(--link);
  text-decoration:none;
}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{
  color:var(--border);
  margin-inline:var(--sp-5);
}

/* コーストップ */
.course-desc{color:var(--text-muted);margin-block:var(--sp-13) var(--sp-34)}
.module-block{margin-block:var(--sp-34)}
.lesson-list{list-style:none;padding-left:0;margin:0}
.lesson-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--sp-13) 0;
  border-bottom:1px solid var(--border);
  gap:var(--sp-13);
}
.lesson-row a{color:var(--link);text-decoration:none;font-weight:700}
.lesson-row a:hover{color:var(--accent);text-decoration:underline}
.lesson-row .lesson-dur{color:var(--text-muted);font-size:.85em;white-space:nowrap}
.lesson-row.planned{opacity:.5}
.lesson-row.planned span{color:var(--text-muted)}

/* コース一覧トップ */
.home-lead{color:var(--text-muted);margin-block:var(--sp-21) var(--sp-55);line-height:var(--line-body)}
.home-lead a{color:var(--link)}
.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:var(--sp-21);
}
.course-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-21);
  text-decoration:none;
  box-shadow:var(--shadow);
}
.course-card:hover{border-color:var(--accent-soft)}
.course-card-name{font-weight:700;color:var(--accent);font-size:1.1rem}
.course-card-status{font-size:.8rem;color:var(--text-muted)}
.course-card-status.published{color:var(--link)}
.course-card.planned{opacity:.55}

/* 前後レッスンナビ */
.lesson-nav{
  display:flex;
  flex-direction:column;
  gap:var(--sp-13);
  margin-top:var(--sp-34);
}
.lesson-nav a{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  padding:var(--sp-13);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  background:var(--surface);
}
.lesson-nav a:hover{border-color:var(--accent-soft)}
.lesson-nav .nav-dir{font-size:.75rem;color:var(--text-muted)}
.lesson-nav .nav-title{color:var(--link);font-weight:700;font-size:.9rem}

/* 本文中の表 */
.lesson-body table{
  width:100%;
  border-collapse:collapse;
  margin-block:var(--sp-21);
  font-size:.9em;
}
.lesson-body th,
.lesson-body td{
  border:1px solid var(--border);
  padding:var(--sp-8) var(--sp-13);
  text-align:left;
  vertical-align:top;
  line-height:var(--line-body);
}
.lesson-body thead th,
.lesson-body tr:first-child td{
  background:var(--surface-2);
  font-weight:700;
  color:var(--text);
}
.lesson-body tbody tr:nth-child(even),
.lesson-body tr:nth-child(even){
  background:var(--surface);
}

/* 修了証ページ */
.cert-lead{font-size:1.05em;color:var(--text);margin-block:var(--sp-21) var(--sp-34);line-height:var(--line-body)}
.cert-cta{margin-block:var(--sp-34)}
.cert-cta a{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:var(--sp-13) var(--sp-34);
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:700;
}
.cert-cta a:hover{background:var(--link)}

/* SRTガイドページ */
.guide-lead{font-size:1.05em;color:var(--text);margin-block:var(--sp-21) var(--sp-34);line-height:var(--line-body)}
.guide-note{font-size:.85em;color:var(--text-muted);margin-top:var(--sp-8)}
.guide-foot{margin-top:var(--sp-55);padding-top:var(--sp-21);border-top:1px solid var(--border);font-size:.85em;color:var(--text-muted)}

/* 全体の流れ（番号リスト） */
.srt-guide .flow-list{padding-left:var(--sp-21);margin-block:var(--sp-21)}
.srt-guide .flow-list li{margin-block:var(--sp-8);line-height:var(--line-body)}

/* 手順ステップ */
.step{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:var(--sp-21);
  margin-block:var(--sp-21);
}
.step-head{display:flex;align-items:center;gap:var(--sp-13);margin-bottom:var(--sp-13)}
.step-num{
  flex:none;
  width:2rem;height:2rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  border-radius:50%;
  font-weight:700;
}
.step-title{font-weight:700;color:var(--text);font-size:1.05em}
.step-body{line-height:var(--line-body)}
.step-body ol{padding-left:var(--sp-21);margin-block:var(--sp-13)}
.step-body li{margin-block:var(--sp-5)}
.step-body code{
  background:var(--surface-2);
  padding:0.1em 0.4em;
  border-radius:4px;
  font-size:.9em;
}

/* tip / warn ボックス（calloutの色違い） */
.callout-tip{border-left-color:var(--accent-soft);background:var(--surface-2)}
.callout-warn{border-left-color:var(--accent);background:var(--surface-2)}

/* FAQ */
.faq{margin-block:var(--sp-21);padding-bottom:var(--sp-13);border-bottom:1px solid var(--border)}
.faq-q{font-weight:700;color:var(--link);margin-bottom:var(--sp-5)}
.faq-a{color:var(--text);line-height:var(--line-body)}

/* 動画ブロック */
.video-block{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:var(--sp-21);
  margin-block:var(--sp-21);
}
.video-label{
  font-size:.8rem;font-weight:700;color:var(--accent);
  letter-spacing:.08em;margin-bottom:var(--sp-13);
}
.video-thumb{display:block;border-radius:8px;overflow:hidden}
.video-thumb img{display:block;width:100%;height:auto;margin:0}
.video-note{font-size:.9rem;color:var(--text-muted);margin-bottom:var(--sp-13);line-height:var(--line-body)}
.video-links{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-13)}
.video-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--sp-8) var(--sp-13);
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--link);
  text-decoration:none;font-size:.9rem;
}
.video-links a:hover{border-color:var(--accent-soft)}
.vb-ico{font-style:normal}
.vb-play::before{content:"▶";font-size:.8em}
.vb-dl::before{content:"⬇"}
.vb-info::before{content:"ⓘ"}

.home-news-link{ text-align:center; margin-top:var(--sp-34,34px); font-size:.9rem; }
.home-news-link a{ color:var(--text-muted); text-decoration:none; }
.home-news-link a:hover{ color:var(--accent); }

/* お知らせ・更新履歴（/news/） */
.news-hero{ position:relative; width:100%; aspect-ratio:2048/1152;
  max-height:clamp(200px, 36vw, 440px); overflow:hidden;
  border-radius:var(--radius, 12px); background:#000; }

.news-hero img{ width:auto; height:100%; object-fit:contain; object-position:right center; margin-left:auto; display:block;}
.news-title{ max-width:700px; margin:var(--sp-34,34px) auto 0; }
.news-intro{ max-width:700px; margin:var(--sp-34,34px) auto; line-height:1.618; }
.news-intro .news-sign{ text-align:right; color:var(--text-muted); }
.news-updates{ max-width:700px; margin:0 auto var(--sp-55,56px); }
.news-list{ list-style:none; padding:0; max-width:700px; margin:0 auto; }
.news-list li{ display:flex; gap:var(--sp-13,13px); padding:var(--sp-13,13px) 0;
  border-bottom:1px solid var(--border); }
.news-list time{ flex:0 0 auto; color:var(--text-muted); font-variant-numeric:tabular-nums; }
@media (max-width:768px){
  .news-hero{ max-height:none; aspect-ratio:2048/1152; }
  .news-list li{ flex-direction:column; gap:var(--sp-5,5px); }
}