/* デザイン基礎知識コース。読み物の体裁は article.css を継承し、
   ここではコース固有のパーツ（メタ行・目次・レッスンナビ）だけを持つ。 */

/* ---- レッスン冒頭のメタ行 ---- */
.lsn__meta{display:flex;align-items:center;gap:10px;margin:0 0 26px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);font:500 13px/1.6 var(--font-ui);color:var(--text-secondary)}
.lsn__ch{font-weight:800;color:var(--ink)}
.lsn__sep{color:var(--border-strong)}
/* メタ行のすぐ下に目次を置くので、article.css の上マージン64pxは外す（学習コンテンツのみ） */
.mame-lesson .art__toc{margin-top:0}

/* ---- 章内リンクと前後のレッスン（どちらも .pn__a のカードで揃える） ---- */
.pn--one{grid-template-columns:1fr}
.pn--list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.lsn-back{margin:28px 0 0;font:600 14px/1 var(--font-ui)}
.lsn-back a{color:var(--text-secondary);text-decoration:none}
.lsn-back a:hover{color:var(--blue-600)}

/* ---- コーストップ（ピラーページ） ---- */
.lsn-top__hero .phero__w{max-width:1200px}
.lsn-top__cta{margin:22px 0 0}
/* article.css の .sec（margin）と mameblog.css の .sec（padding）が両方効くので、こちらは padding に寄せる */
.mame-lesson-top .sec{margin:0}
/* 記事詳細ほど見出しを離さない（.body h2 は上96px） */
.lsn-top__intro h2{margin-top:44px}
.lsn-top__intro>.article-content>*:first-child{margin-top:0}
.lsn-top__count{margin:8px 0 0;font:600 13px/1 var(--font-ui);color:var(--text-secondary)}

.lsn-chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:26px}
.lsn-ch{background:var(--surface);border:1px solid var(--border-subtle);border-radius:16px;padding:22px 24px}
.lsn-ch__t{margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--blue-500);font-family:var(--font-heading);font-weight:900;font-size:15px;color:var(--ink)}
.lsn-ch__list{list-style:none;margin:0;padding:0}
.lsn-ch__item{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dotted var(--border-dotted);font-size:14.5px;line-height:1.6}
.lsn-ch__item:last-child{border-bottom:0;padding-bottom:0}
.lsn-ch__item a{display:flex;align-items:center;gap:8px;width:100%;color:var(--ink);text-decoration:none}
.lsn-ch__item a:hover{color:var(--blue-600)}
.lsn-ch__item a .lsn-side__chev{margin-left:auto}
.lsn-ch__item a:hover .lsn-side__chev{color:var(--blue-600);transform:translateX(2px)}
.lsn-ch__item.is-soon{color:var(--text-tertiary)}
.lsn-ch__soon{margin-left:auto;flex:0 0 auto;font:700 11px/1 var(--font-ui);color:var(--text-secondary);background:var(--surface-sunken);border-radius:999px;padding:5px 9px}

/* ---- サイドバーのコース目次 ---- */
.lsn-side{font-size:13.5px;line-height:1.6}
.lsn-side__ch{margin:16px 0 5px;font:800 12px/1.5 var(--font-ui);color:var(--blue-700)}
.lsn-side__ch:first-child{margin-top:0}
.lsn-side__list{list-style:none;margin:0;padding:0}
.lsn-side__item{padding:7px 0;border-bottom:1px dotted var(--border-dotted)}
.lsn-side__item a{display:flex;align-items:center;gap:8px;color:var(--text-secondary);text-decoration:none}
.lsn-side__item a:hover{color:var(--blue-600)}
.lsn-side__chev{margin-left:auto;color:var(--text-tertiary);transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.lsn-side__item a:hover .lsn-side__chev{color:var(--blue-600);transform:translateX(2px)}
.lsn-side__item.is-current{font-weight:800;color:var(--ink)}
.lsn-side__item.is-current span{position:relative;padding-left:12px;display:block}
.lsn-side__item.is-current span::before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;border-radius:50%;background:var(--blue-500)}
.lsn-side__top{margin:16px 0 0;font:600 13px/1 var(--font-ui)}
.lsn-side__top a{color:var(--text-secondary);text-decoration:none}
.lsn-side__top a:hover{color:var(--blue-600)}