/* e-life 教材アプリ 共通スタイル（鍵ページの世界観を踏襲） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

* { box-sizing: border-box; }
body {
  font-family: 'Noto Sans JP', sans-serif; color: #1A1208;
  background: #FAF6F1; line-height: 2; margin: 0;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 18px; }
a { color: #D4711A; }

/* ヘッダー */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 760px; margin: 0 auto; padding: 14px 18px;
}
.topbar .brand { font-family: 'Noto Serif JP', serif; font-weight: 700; color: #2C1810; font-size: 15px; }
.topbar button, .btn-ghost {
  background: none; border: 1px solid #E8DDD0; border-radius: 8px;
  padding: 6px 14px; color: #5C3A1E; font-size: 13px; cursor: pointer;
}

/* ヒーロー */
.hero {
  background: linear-gradient(135deg,#0D1B2A,#1B2D45 45%,#2A3F5F 75%,#1B2D45);
  border-radius: 14px; padding: 44px 32px; text-align: center; margin: 8px 0 28px; color:#fff;
}
.hero .icon { font-size: 40px; margin-bottom: 10px; }
.hero h1 { font-family:'Noto Serif JP',serif; font-size: clamp(20px,3.6vw,26px); font-weight:700; margin:0 0 8px; line-height:1.5; }
.hero p { font-size: 14px; color: rgba(255,255,255,.75); margin:0; line-height:1.9; }

/* カード / フォーム */
.card { background:#fff; border:1px solid #E8DDD0; border-radius:12px; padding:28px 26px; margin:0 0 20px; }
.card h2 { font-family:'Noto Serif JP',serif; font-size:18px; color:#2C1810; margin:0 0 14px; }
input[type=email] {
  width:100%; padding:14px 16px; border:1px solid #D8C9B8; border-radius:8px;
  font-size:16px; font-family:inherit; margin:0 0 14px;
}
.btn {
  display:inline-block; width:100%; background:#0D1B2A; color:#fff; border:none;
  padding:15px; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer;
}
.btn:disabled { opacity:.5; cursor:default; }
.msg { font-size:14px; margin:14px 0 0; padding:12px 16px; border-radius:8px; }
.msg.ok { background:#EAF6EC; color:#1E6B34; }
.msg.err { background:#FBEAEA; color:#A83232; }
.hint { font-size:13px; color:#8B7355; line-height:1.9; }

/* 目次 */
.toc { background:#fff; border:1px solid #E8DDD0; border-radius:10px; padding:22px 26px; margin:0 0 28px; }
.toc h3 { font-family:'Noto Serif JP',serif; font-size:15px; color:#2C1810; margin:0 0 12px; }
.toc-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #E8DDD0; }
.toc-item:last-child { border-bottom:none; }
.toc-item a { flex:1; color:#5C3A1E; text-decoration:none; font-size:14px; }
.toc-item .done { color:#1E6B34; font-size:12px; }

/* 章 */
.chapter { background:#fff; border:1px solid #E8DDD0; border-radius:12px; padding:34px 30px; margin:0 0 20px; scroll-margin-top:70px; }
.chapter h1 { font-family:'Noto Serif JP',serif; font-size:24px; color:#2C1810; margin:0 0 18px; line-height:1.5; }
.chapter h2 { font-family:'Noto Serif JP',serif; font-size:19px; color:#2C1810; border-bottom:2px solid #D4711A; padding-bottom:8px; margin:36px 0 18px; }
.chapter h3 { font-family:'Noto Serif JP',serif; font-size:16px; color:#5C3A1E; margin:28px 0 12px; }
.chapter h4 { font-size:15px; color:#D4711A; margin:22px 0 8px; }
.chapter p { margin:0 0 18px; }
.chapter ul,.chapter ol { margin:0 0 18px; padding-left:1.5em; }
.chapter li { margin-bottom:8px; }
.chapter strong { color:#2C1810; }
.chapter blockquote { background:#FAF6F1; border-left:4px solid #D4711A; margin:0 0 22px; padding:16px 22px; color:#4A3728; border-radius:0 8px 8px 0; }
.chapter table { width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14px; }
.chapter th { background:#2C1810; color:#fff; padding:10px 12px; text-align:left; font-weight:500; }
.chapter td { padding:10px 12px; border-bottom:1px solid #E8DDD0; vertical-align:top; }
.chapter tr:nth-child(even) { background:#FAF6F1; }
.chapter pre { background:#1A1208; color:#F0E8DF; padding:18px 20px; border-radius:8px; overflow-x:auto; font-size:13px; line-height:1.6; margin:0 0 22px; }
.chapter hr { border:none; border-top:1px solid #E8DDD0; margin:24px 0; }

/* 章フッター（進捗操作） */
.ch-actions { display:flex; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid #E8DDD0; }
.ch-actions button {
  border:1px solid #E8DDD0; background:#FAF6F1; border-radius:8px; padding:8px 16px;
  font-size:13px; color:#5C3A1E; cursor:pointer; font-family:inherit;
}
.ch-actions button.on { background:#0D1B2A; color:#fff; border-color:#0D1B2A; }

/* 進捗バー */
.progressbar { background:#fff; border:1px solid #E8DDD0; border-radius:10px; padding:16px 22px; margin:0 0 20px; font-size:14px; color:#5C3A1E; }
.progressbar .track { height:8px; background:#EFE6DA; border-radius:4px; margin-top:8px; overflow:hidden; }
.progressbar .fill { height:100%; background:linear-gradient(90deg,#D4711A,#E8963F); width:0; transition:width .4s; }

/* 管理テーブル */
.admin-table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:10px; overflow:hidden; }
.admin-table th { background:#2C1810; color:#fff; padding:10px 12px; text-align:left; }
.admin-table td { padding:10px 12px; border-bottom:1px solid #E8DDD0; }

/* ===== マイページ（明鏡型） ===== */
.mypage-head { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #E8DDD0; border-radius:12px; padding:22px 24px; margin:14px 0 16px; }
.mp-name { font-family:'Noto Serif JP',serif; font-size:20px; font-weight:700; color:#2C1810; }
.mp-sub { font-size:13px; color:#8B7355; margin-top:2px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px; }
.stat { background:#fff; border:1px solid #E8DDD0; border-radius:12px; padding:20px 10px; text-align:center; }
.stat.blue { background:#EEF4FB; border-color:#D6E4F5; }
.stat.green { background:#EEF7F0; border-color:#D3E9D8; }
.stat-n { font-size:30px; font-weight:800; color:#2C1810; line-height:1; }
.stat.blue .stat-n { color:#2A5A9E; } .stat.green .stat-n { color:#2E7D46; }
.stat-l { font-size:12px; color:#8B7355; margin-top:8px; }
.sec-h { font-family:'Noto Serif JP',serif; font-size:17px; color:#2C1810; margin:0 0 14px; }

.course { background:#fff; border:1px solid #E8DDD0; border-radius:12px; margin:0 0 12px; overflow:hidden; }
.course-head { display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; }
.course-num { flex:none; width:38px; height:38px; border-radius:50%; background:#0D1B2A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.course-main { flex:1; min-width:0; }
.course-title { font-family:'Noto Serif JP',serif; font-weight:700; color:#2C1810; font-size:15px; }
.course-meta { font-size:12px; color:#8B7355; margin:3px 0 8px; }
.course-caret { color:#B8A88F; transition:transform .2s; }
.course.open .course-caret { transform:rotate(180deg); }
.course-body { display:none; border-top:1px solid #F0E8DF; padding:6px 20px 12px; }
.course.open .course-body { display:block; }
.art-row { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid #F3ECE3; text-decoration:none; color:#3D2E1E; }
.art-row:last-child { border-bottom:none; }
.art-check { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #E0D3C2; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
.art-check.on { background:#2E7D46; border-color:#2E7D46; }
.art-title { flex:1; font-size:14px; }
.art-min { flex:none; font-size:12px; color:#B8A88F; }
.art-row:hover .art-title { color:#D4711A; }

/* ===== 記事ビューア ===== */
.crumb { font-size:13px; color:#8B7355; margin:16px 0 6px; }
.art-h1 { font-family:'Noto Serif JP',serif; font-size:22px; color:#2C1810; margin:0 0 18px; line-height:1.5; }
.tabs { display:flex; gap:8px; margin:0 0 16px; }
.tab { flex:1; border:1px solid #E8DDD0; background:#fff; border-radius:10px; padding:11px; font-size:14px; font-family:inherit; color:#5C3A1E; cursor:pointer; }
.tab.on { background:#0D1B2A; color:#fff; border-color:#0D1B2A; }
.pane { background:#fff; border:1px solid #E8DDD0; border-radius:12px; padding:30px 28px; margin:0 0 18px; }
.soon { text-align:center; color:#8B7355; padding:40px 20px; font-size:16px; line-height:2; }
.soon span { font-size:13px; color:#B8A88F; }
.video-wrap { position:relative; padding-top:56.25%; }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:8px; }
.audio-wrap audio { width:100%; }
.done-row { text-align:center; margin:0 0 16px; }
.done-row .btn { max-width:320px; }
.btn.done { background:#2E7D46; }
.nav-row { display:flex; justify-content:space-between; gap:10px; margin:0 0 10px; }
.nav-btn { text-decoration:none; padding:12px 18px; }
.nav-btn.pulse { animation:pulse 1s ease infinite; background:#FDF0E6; }
@keyframes pulse { 50% { background:#F7D9BE; } }

@media(max-width:600px){ .pane{padding:22px 16px} .stat-n{font-size:24px} }

.foot { text-align:center; padding:26px 0 40px; font-size:12px; color:#8B7355; }
@media(max-width:600px){ .hero{padding:34px 20px} .chapter{padding:26px 18px} .chapter h1{font-size:21px} }