:root{--g:#1E3A34;--g2:#2C5249;--cr:#F4F1EA;--paper:#FBFAF6;--cr2:#EBE5D8;--br:#7A6A58;--ink:#1F2B27;--mut:#5A6661;--line:#D8D0BF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cr);color:var(--ink);font-family:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;font-size:16px;line-height:1.9}
img{max-width:100%;height:auto;display:block}
a{color:var(--g2);text-underline-offset:3px}
a:hover{color:var(--g)}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
h1,h2{font-family:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;color:var(--g);font-weight:700;letter-spacing:.02em;word-break:auto-phrase}
h1{font-size:34px;line-height:1.4;margin:0 0 18px}
h2{font-size:24px;line-height:1.5;margin:0 0 16px}
h3{font-size:18px;line-height:1.5;margin:0 0 6px;color:var(--g);word-break:auto-phrase}
p{margin:0 0 14px}
main{padding:56px 0 72px}
main.full{padding:0 0 24px}
.block{margin-top:64px}
.lead{font-size:17px;max-width:44em}
.mut{color:var(--mut);font-size:14px}
.kind{font-size:13px;font-weight:700;color:var(--br);margin-right:8px}
.kind.paid{color:var(--g)}

header{background:var(--g)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
header .logo{display:block;background:var(--cr);border-radius:6px;padding:6px 12px}
header .logo img{height:32px;width:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 26px;flex-wrap:wrap}
nav a{color:var(--cr);text-decoration:none;font-size:15px}
nav a:hover,nav a[aria-current=page]{color:#fff;text-decoration:underline}

/* top */
.intro{display:grid;grid-template-columns:1fr 200px;gap:32px;align-items:end;padding-bottom:40px;border-bottom:1px solid var(--line)}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.entry{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border:1px solid var(--line)}
.entry .img{background:var(--cr2);display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.entry .img img{max-height:200px;width:auto;box-shadow:0 6px 18px rgba(30,58,52,.15)}
.entry .img.wide img{max-height:none;width:100%;height:100%;object-fit:cover;box-shadow:none}
.entry .body{padding:22px 24px 24px}
.entry ul{list-style:none;margin:12px 0 16px;padding:0;border-top:1px solid var(--line)}
.entry li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:9em 1fr;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.news time{color:var(--mut)}

/* course page */
.course{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.course .cover img{border:1px solid var(--line);box-shadow:0 8px 22px rgba(30,58,52,.12)}
dl.facts{margin:16px 0 22px;display:grid;grid-template-columns:8em 1fr;border-top:1px solid var(--line)}
dl.facts dt,dl.facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
dl.facts dt{font-weight:700;color:var(--g)}
.btn{display:inline-block;background:var(--g);color:var(--cr);text-decoration:none;padding:12px 24px;border-radius:4px;font-weight:700}
.btn:hover{background:var(--g2);color:#fff}
.after{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.shots figure{margin:0}
.shots img{border:1px solid var(--line);background:#fff}
figcaption{font-size:14px;color:var(--mut);margin-top:6px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:14em 1fr;gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--line)}
.row h3{margin:0}
.row p{margin:0 0 6px}
.row .links{margin:0;padding:0;list-style:none}
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.vids a{text-decoration:none;color:var(--ink);font-size:14px;line-height:1.5}
.vids img{border:1px solid var(--line);margin-bottom:5px}
.vids small{color:var(--mut)}
table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--cr2);font-weight:700;color:var(--g)}
table.sched td:first-child{white-space:nowrap}
.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.subjects a{text-decoration:none;color:var(--ink)}
.subjects img{border:1px solid var(--line);margin-bottom:8px}
.subjects b{display:block;color:var(--g);font-size:17px}
.subjects span{font-size:14px;color:var(--g2);text-decoration:underline;text-underline-offset:3px}
.about{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:start}

footer{background:var(--g);color:var(--cr);font-size:14px}
footer .wrap{padding-top:26px;padding-bottom:30px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
footer a{color:var(--cr)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}

@media (max-width:860px){
 h1{font-size:28px}
 .intro,.courses,.course,.about{grid-template-columns:1fr}
 .intro img{max-width:150px}
 .course .cover{max-width:200px}
 .row{grid-template-columns:1fr}
 .vids{grid-template-columns:repeat(2,1fr)}
 .subjects{grid-template-columns:repeat(2,1fr)}
 .shots{gap:10px}
 .about img{max-width:180px}
}
@media (max-width:480px){
 .wrap{padding:0 16px}
 main{padding-top:40px}
 .news li{grid-template-columns:1fr}
 dl.facts{grid-template-columns:1fr}
 dl.facts dt{border-bottom:0;padding-bottom:0}
 .subjects{grid-template-columns:1fr}
}

.band{background:var(--g);color:var(--cr);padding:48px 0 52px}
.band h1{color:#fff;font-size:38px;margin-bottom:14px}
.band .lead{color:#E7E1D3;max-width:46em}
.band a{color:#fff}
.crumb{font-size:13px;color:#C9D3CC;margin:0 0 10px}
.covers{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.covers img{box-shadow:0 8px 20px rgba(0,0,0,.28)}
.covers span{display:block;text-align:center;font-size:14px;margin-top:8px;color:#E7E1D3}
.sec{padding:64px 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.label{font-size:13px;font-weight:700;color:var(--g);margin:0 0 4px}
.w{max-width:46em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.band-split{align-items:center}
.frame{margin:0}
.frame img{border:1px solid var(--line);box-shadow:0 10px 26px rgba(30,58,52,.14)}
.frame.dark img{border-color:#0F1F1B;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.frame figcaption{margin-top:8px}
.shots4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0 12px}
.shots4 figure{margin:0}
.shots4 img{border:1px solid var(--line);background:#fff}
.shots4 figcaption b{display:block;color:var(--g);font-size:15px;margin-bottom:2px}
details.subj{border:1px solid var(--line);background:var(--paper);margin-top:12px}
details.subj summary{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:12px 18px;cursor:pointer;list-style:none}
details.subj summary::-webkit-details-marker{display:none}
details.subj summary img{grid-column:1;grid-row:1 / 3;width:52px;border:1px solid var(--line)}
details.subj summary img.wide{width:92px}
details.subj summary:has(img.wide){grid-template-columns:92px 1fr auto}
.sname{grid-column:2;grid-row:1;font-family:"Shippori Mincho B1","Yu Mincho",serif;font-weight:700;font-size:20px;color:var(--g);align-self:end}
.smeta{grid-column:2;grid-row:2;font-size:14px;color:var(--mut);align-self:start}
.sopen{grid-row:1 / 3;grid-column:3;font-size:14px;color:var(--g2);text-decoration:underline;text-underline-offset:3px}
details[open] .sopen{visibility:hidden}
details.subj > :not(summary){margin-left:18px;margin-right:18px}
details.subj > :last-child{margin-bottom:18px}
.toc{list-style:none;margin:6px 0 0;padding:0;columns:2;column-gap:36px;border-top:1px solid var(--line);padding-top:14px}
.toc .ch{break-inside:avoid;margin:0 0 14px}
.chhead{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px}
.chhead b{color:var(--br);font-size:14px;white-space:nowrap}
.chhead span{font-weight:700;color:var(--g);font-size:15px;flex:1}
.chhead small{color:var(--mut);font-size:12px;white-space:nowrap}
.secs{list-style:none;margin:0;padding:0 0 0 2px;font-size:13.5px;color:var(--ink);line-height:1.75}
table.eps{margin-top:8px}
table.eps td.no{white-space:nowrap;color:var(--br);width:5em}
table.eps td.rng{white-space:nowrap;color:var(--mut);font-size:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
ol.num{margin:0;padding-left:1.4em}
ol.num li{margin:0 0 12px}
.later .pre{color:var(--mut);font-size:.9em;margin-left:2px}
.later[data-cls=btn]{display:inline-block;background:var(--cr2);color:var(--mut);padding:12px 24px;border-radius:4px;font-weight:700}
.vids div.later{font-size:14px;line-height:1.5}
.subj-links{margin-top:18px;font-size:15px;display:flex;flex-wrap:wrap;gap:4px 16px}
@media (max-width:860px){
 .band h1{font-size:30px}
 .covers{grid-template-columns:repeat(3,1fr)}
 .split,.two{grid-template-columns:1fr}
 .shots4{grid-template-columns:repeat(2,1fr)}
 .toc{columns:1}
}
@media (max-width:480px){
 details.subj summary{grid-template-columns:44px 1fr;padding:10px 12px}
 details.subj summary:has(img.wide){grid-template-columns:72px 1fr}
 details.subj summary img{width:44px}
 details.subj summary img.wide{width:72px}
 .sopen{grid-column:2;grid-row:3;font-size:13px}
 details.subj > :not(summary){margin-left:12px;margin-right:12px}
 table.eps td.rng{white-space:normal}
}