/* モデルコースの公開ページ（/courses・/courses/<slug>）。色と書体は shiori.css の変数をそのまま使う */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);line-height:1.75;-webkit-text-size-adjust:100%}
/* 幅はサイト全体（shiori.css の .wrap）とそろえる */
.cs-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;box-sizing:border-box}
@media screen and (max-width:640px){.cs-wrap{padding:0 14px}}
.cs-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.cs-head-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.cs-brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:18px;font-family:"Zen Maru Gothic",var(--f)}
.cs-nav{display:flex;align-items:center;gap:14px;font-size:14px}
.cs-nav a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.cs-nav a:hover{color:var(--teal-d)}
.cs-nav .cs-cta{background:var(--coral);color:#fff;padding:7px 14px;border-radius:999px;font-weight:700}
@media (max-width:560px){.cs-nav a:not(.cs-cta){display:none}}
.cs-main{padding:8px 0 48px}
.cs-bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:14px 0 6px;font-size:12px;color:var(--ink-3)}
.cs-bc li+li::before{content:"›";margin-right:4px}
.cs-bc a{color:var(--ink-2)}
.cs-h1{font-size:clamp(22px,4.6vw,30px);line-height:1.4;margin:6px 0 4px}
.cs-meta{color:var(--ink-2);font-size:13px;margin:0 0 6px}
.cs-lead{font-size:15px;margin:12px 0}
.cs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0}
.cs-chips span{font-size:12px;color:var(--teal-d);background:var(--teal-soft);border-radius:6px;padding:2px 8px}
.cs-grid{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cs-grid-s{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cs-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.cs-card a{display:block;color:inherit;text-decoration:none;height:100%}
.cs-card a:hover h2,.cs-card a:hover h3{color:var(--teal-d)}
.cs-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--surface-3)}
.cs-card-body{padding:12px 14px 14px}
.cs-card h2,.cs-card h3{font-size:16px;line-height:1.45;margin:0 0 4px}
.cs-card-lead{font-size:13px;color:var(--ink-2);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-empty{color:var(--ink-2)}
.cs-hero{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:var(--r-card);margin:12px 0;background:var(--surface-3);box-shadow:var(--sh-1)}
.cs-actions{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;margin:16px 0}
.cs-btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:999px}
.cs-btn:hover{background:var(--teal-d)}
.cs-note{font-size:12px;color:var(--ink-2);margin:10px 0 0}
.cs-sec{margin:28px 0}
.cs-sec h2{font-size:19px;margin:0 0 10px;padding-left:10px;border-left:4px solid var(--teal)}
.cs-day h3{font-size:16px;margin:16px 0 6px;color:var(--teal-d)}
.cs-rules{list-style:none;margin:0;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-in)}
.cs-tl{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.cs-tl li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:12px 14px;border-top:1px solid var(--line-2)}
.cs-tl li:first-child{border-top:0}
.cs-time{font-weight:700;color:var(--teal-d);font-size:14px;font-variant-numeric:tabular-nums}
.cs-tl-title{margin:0;font-weight:700}
.cs-kind{display:inline-block;font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;margin-right:6px;vertical-align:2px;background:var(--surface-3);color:var(--ink-2)}
.k-food{background:var(--coral-soft);color:#c2502c}.k-sight{background:var(--teal-soft);color:var(--teal-d)}.k-buy{background:var(--green-soft);color:#1f7a5b}
.cs-place{margin:2px 0 0;font-size:13px}.cs-place a{color:var(--teal-d)}
.cs-memo{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
@media (max-width:480px){.cs-tl li{grid-template-columns:1fr;gap:2px}}
.cs-pack{margin:0;padding:12px 16px 12px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-in);columns:2;column-gap:24px}
.cs-pack small{color:var(--ink-3)}
@media (max-width:480px){.cs-pack{columns:1}}
.cs-steps{margin:0;padding-left:22px}
.cs-foot{border-top:1px solid var(--line);background:var(--surface);padding:20px 0}
.cs-foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.cs-foot-links a{color:var(--teal-d);text-decoration:none}
.cs-copy{font-size:12px;color:var(--ink-3);margin:10px 0 0}