/* 軽音楽部 音楽理論・ギター・ベース講座  /music/ 専用スタイル */
:root{
  --ground:#F2F3F4; --head:#DADDE0; --line:#E2E5E8; --card:#fff;
  --text:#2B323A; --sub:#4A5560; --mute:#5C6670;
  --accent:#C9775B; --accent-d:#A65A40; --ans:#C8443A;
  --ch:#C9775B; --ch-soft:#F6ECE7;
  --r:14px;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--ground);color:var(--text);font-size:15px;line-height:1.8}
a{color:var(--accent-d)}
button{font-family:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;left:-9999px}

/* ---------- 上のバー ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--line)}
.topbar .ttl{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .ttl a{color:inherit;text-decoration:none}
.ibtn{width:44px;height:44px;flex-shrink:0;border:none;background:var(--ground);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px}
.ibtn svg{width:20px;height:20px}
.chbar{height:4px;background:var(--ch)}
.loginbtn{min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--head);background:#fff;font-size:12px;white-space:nowrap}
.loginbtn.on{background:var(--ch-soft);border-color:transparent}

/* ---------- レイアウト ---------- */
.layout{display:flex;align-items:flex-start}
.rail{display:none}
main{flex:1;min-width:0}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 80px}

/* もくじ（レール／引き出し 共通） */
.toc{padding:8px 10px}
.toc a{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 10px;border-radius:10px;text-decoration:none;color:var(--text);font-size:14px;font-weight:700;line-height:1.4}
.toc a .dot{width:8px;height:8px;border-radius:4px;flex-shrink:0}
.toc a.sec{font-weight:400;font-size:13px;padding-left:28px}
.toc a.cur{background:var(--ch-soft);font-weight:700}
.toc a.off{color:#9AA2AA;pointer-events:none}
.toc .grp{font-size:11px;color:var(--mute);padding:10px 10px 2px;font-weight:700}
.navfoot{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.navfoot a{flex:1;min-height:44px;border-radius:10px;background:var(--ground);display:flex;align-items:center;justify-content:center;font-size:12px;text-decoration:none;color:var(--text)}
.railhead{padding:16px;background:var(--head);display:flex;flex-direction:column;gap:2px}
.railhead small{font-size:12px;font-weight:700;color:var(--sub)}
.railhead b{font-size:15px;line-height:1.35}
.railhead a{color:inherit;text-decoration:none}

@media (min-width:1000px){
  .rail{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;width:280px;flex-shrink:0;background:#fff;border-right:1px solid var(--line)}
  .rail .toc{flex:1;overflow:auto}
  body.rail-hidden .rail{display:none}
  .topbar{top:0}
  .menubtn-m{display:none}
}
@media (max-width:999px){ .railbtn{display:none} }

/* 引き出し */
.drawer{position:fixed;inset:0;z-index:50;display:none}
.drawer.open{display:flex}
.drawer .panel{width:min(300px,84vw);height:100%;background:#fff;box-shadow:4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:slin .18s ease-out}
.drawer .panel .toc{flex:1;overflow:auto}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 16px;background:var(--head);font-weight:900}
.drawer .shade{flex:1;border:none;background:rgba(43,50,58,.4)}
@keyframes slin{from{transform:translateX(-30px);opacity:.4}to{transform:none;opacity:1}}
.edgetab{position:fixed;left:0;top:42%;width:12px;height:110px;background:var(--sub);opacity:.35;border-radius:0 8px 8px 0;z-index:20;border:none;padding:0}
@media (min-width:1000px){.edgetab{display:none}}

/* ---------- 章ページ ---------- */
.chhead{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
.chno{background:var(--ch);color:#fff;font-weight:900;border-radius:10px;padding:4px 12px;font-size:15px;white-space:nowrap}
.chhead h1{margin:0;font-size:24px;line-height:1.3}
.goals,.summary{background:#fff;border-radius:var(--r);padding:12px 16px;margin:12px 0}
.goals h2,.summary h2{font-size:13px;margin:0 0 4px;color:var(--ch)}
.goals ul,.summary ul{margin:0;padding-left:1.3em}
.toolrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.chip{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--head);background:#fff;font-size:13px}
.chip.on{background:var(--text);color:#fff;border-color:var(--text)}

section.sect{margin-top:28px}
.secthead{display:flex;align-items:center;gap:10px;position:relative}
.secno{background:var(--ch);color:#fff;font-weight:900;font-size:13px;border-radius:8px;padding:3px 9px;white-space:nowrap}
.secthead h2{flex:1;margin:0;font-size:20px;line-height:1.4}
.heart{width:44px;height:44px;border:none;background:#fff;border-radius:22px;font-size:20px;color:#B9C0C6;flex-shrink:0}
.heart.on{color:var(--accent)}
.memobtn{width:44px;height:44px;border:none;background:#fff;border-radius:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--sub)}
.memobtn.has{color:var(--accent-d);background:#FBEFE6}
.memobtn svg{width:20px;height:20px}
.memo{display:none;margin:10px 0;background:#fff;border-radius:var(--r);padding:12px;border:1px solid #F0D9CC}
.memo.open{display:block}
.memo label{font-size:12px;font-weight:700;color:var(--accent-d)}
.memo textarea{width:100%;min-height:90px;margin-top:4px;border-radius:10px;border:1px solid var(--head);background:#FBFAF8;padding:10px;font:inherit;font-size:16px;line-height:1.7;resize:vertical}
.memo .saved{font-size:11px;color:var(--mute)}

.body p{margin:.6em 0}
.body b.lg{font-size:1.08em}
.center{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.fig{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig svg{display:block;max-width:none;height:auto}
.fig.kb svg,.fig.fret svg,.fig.tab svg{max-width:100%;margin:0 auto}

.card .fig{width:100%}
.search svg{width:20px;height:20px;flex-shrink:0;color:var(--sub)}
.fig.rtab .rrow,.fig.rhythm .rrow{margin:6px 0}
.figure,.card{margin:0;background:#fff;border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.cardtitle{font-weight:900;font-size:16px}
.cap{font-size:12px;color:var(--mute)}
.box{border-radius:var(--r);padding:12px 16px;margin:14px 0;background:#fff}
.boxtitle{font-weight:900;font-size:14px;margin-bottom:2px}
.box-point{background:#FBEFE6}.box-point .boxtitle{color:var(--accent-d)}
.box-memo{background:#EEF1F4}.box-memo .boxtitle{color:var(--sub)}
.box-hiku{background:#E9F3EC}.box-hiku .boxtitle{color:#2F7A4C}
.box-column{background:#fff;border:1px dashed #C9CED3}
.tablewrap{overflow-x:auto;margin:12px 0}
.tablewrap table{border-collapse:collapse;background:#fff;border-radius:10px;font-size:14px;min-width:60%}
.tablewrap td,.tablewrap th{border:1px solid var(--line);padding:6px 10px;text-align:center;white-space:nowrap}
.shinkou{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center}
.sk{background:var(--ch-soft);border-radius:10px;min-width:56px;min-height:52px;padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3}
.sk b{font-size:15px}.sk i{font-style:normal;font-size:11px;color:var(--mute)}
.sk-arrow{color:#9AA2AA}
.toi{margin-top:18px;background:#fff;border-left:4px solid var(--ch);border-radius:0 12px 12px 0;padding:10px 14px}
.toi-no{display:inline-block;background:var(--text);color:#fff;font-weight:900;font-size:12px;border-radius:6px;padding:1px 8px;margin-right:8px}
ol.komon{display:grid;gap:8px;padding-left:2em;margin:8px 0}
@media (min-width:600px){ol.komon.cols2{grid-template-columns:1fr 1fr}ol.komon.cols3{grid-template-columns:1fr 1fr 1fr}ol.komon.cols4{grid-template-columns:repeat(4,1fr)}}
.writein{font-size:12px;color:var(--mute)}
.mp{flex:1;min-width:240px}

/* 答え */
.ans{border:1.5px dashed #D9A99C;background:#FFF7F4;border-radius:8px;padding:0 8px;min-height:32px;margin:2px;font-size:14px;vertical-align:middle}
.ans .ans-a{display:none;color:var(--ans);font-weight:700}
.ans .ans-q{color:var(--accent-d);font-size:12px}
.ans.open{border-style:solid;border-color:transparent;background:#FDECE8}
.ans.open .ans-a{display:inline}
.ans.open .ans-q{display:none}
.ans-inline{display:block;width:100%;text-align:left;padding:8px 12px}
.ansmark{display:none}
.show-ans .ansmark{display:inline}
svg .ansmark{display:none}
.show-ans svg .ansmark{display:inline}
.figwrap{position:relative}
.figans{display:block;margin:4px auto 0;min-height:36px;padding:0 14px;border-radius:18px;border:1.5px dashed #D9A99C;background:#FFF7F4;font-size:12px;color:var(--accent-d)}
.figwrap.show-ans .figans{border-style:solid;background:#FDECE8}

/* 音声 */
.player{background:var(--text);color:#fff;border-radius:16px;padding:12px 14px;margin:14px 0;display:flex;flex-direction:column;gap:10px}
.player .ph{font-size:13px;font-weight:700}
.player .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player .nm{flex:1 1 140px;font-size:13px;min-width:0}
.player button{min-height:44px;min-width:76px;border-radius:10px;border:1.5px solid #6B7580;background:transparent;color:#fff;font-size:12px}
.player button.playing{background:var(--accent);border-color:var(--accent);font-weight:700}
.player .prog{height:4px;background:#4A5560;border-radius:2px;overflow:hidden}
.player .prog i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- トップ ---------- */
.hero{background:var(--head);padding:28px 16px 22px}
.hero .in{max-width:760px;margin:0 auto}
.hero small{font-weight:700;color:var(--sub)}
.hero h1{margin:2px 0 10px;font-size:clamp(22px,5.4vw,32px);line-height:1.3}
.hero p{margin:0;color:var(--sub);font-size:14px}
.search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:0 12px;min-height:50px;margin-top:16px;border:1px solid #CDD2D6}
.search input{flex:1;border:none;outline:none;font:inherit;font-size:16px;background:transparent;min-height:48px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.quick a{background:#fff;border-radius:var(--r);padding:14px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:2px}
.quick a b{font-size:15px}.quick a span{font-size:12px;color:var(--mute)}
.vol{margin-top:22px}
.vol h2{font-size:14px;color:var(--sub);margin:0 0 8px}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.chcard{position:relative;background:#fff;border-radius:var(--r);padding:12px 12px 12px 18px;text-decoration:none;color:var(--text);min-height:78px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.chcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.chcard small{color:var(--c);font-weight:900;font-size:12px}
.chcard b{font-size:14px;line-height:1.4}
.chcard.soon{opacity:.5;pointer-events:none}
.chcard.soon::after{content:"準備中";position:absolute;right:8px;top:6px;font-size:10px;color:var(--mute)}
.back{display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-size:13px}

/* ---------- 検索 ---------- */
.so{position:fixed;inset:0;z-index:60;background:rgba(242,243,244,.98);display:none;flex-direction:column}
.so.open{display:flex}
.so .bar{display:flex;gap:8px;align-items:center;padding:10px;background:#fff;border-bottom:1px solid var(--line)}
.so .bar input{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--head);padding:0 12px;font:inherit;font-size:16px}
.so .res{flex:1;overflow:auto;padding:10px 12px 40px;max-width:760px;width:100%;margin:0 auto}
.so .hit{display:block;background:#fff;border-radius:12px;padding:10px 14px;margin:8px 0;text-decoration:none;color:var(--text)}
.so .hit small{color:var(--mute);font-size:11px;display:block}
.so .hit b{font-size:14px}
.so .hit p{margin:2px 0 0;font-size:13px;color:var(--sub);line-height:1.6}
.so mark{background:#FBE0D3;color:inherit;border-radius:3px;padding:0 1px}
.so .none{color:var(--mute);font-size:13px;padding:16px 4px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:#FBE0D3}100%{background:transparent}}

/* ---------- お気に入り・クイズ ---------- */
.list .item{background:#fff;border-radius:var(--r);padding:12px 14px;margin:10px 0;display:flex;gap:10px;align-items:flex-start}
.list .item .tx{flex:1;min-width:0}
.list .item a{font-weight:700;text-decoration:none;color:var(--text)}
.list .item small{display:block;color:var(--mute);font-size:11px}
.list .item .mm{font-size:13px;color:var(--sub);white-space:pre-wrap;margin-top:4px;background:#FBFAF8;border-radius:8px;padding:6px 8px}
.empty{color:var(--mute);font-size:14px;background:#fff;border-radius:var(--r);padding:16px}
.qcard{background:#fff;border-radius:18px;padding:18px;margin:14px 0}
.qmeta{font-size:12px;color:var(--mute);display:flex;justify-content:space-between}
.qstem{font-size:14px;color:var(--sub);margin:6px 0 2px}
.qq{font-size:24px;font-weight:900;margin:2px 0 12px}
.choices{display:grid;gap:8px}
.choices button{min-height:52px;border-radius:12px;border:1.5px solid var(--head);background:#FBFAF8;font-size:16px;text-align:left;padding:8px 14px}
.choices button.ok{background:#E3F2E8;border-color:#5BA474}
.choices button.ng{background:#FBE5E1;border-color:var(--ans)}
.qnext{margin-top:12px;width:100%;min-height:48px;border-radius:12px;border:none;background:var(--text);color:#fff;font-size:15px;font-weight:700}
.qfrom{font-size:12px;margin-top:8px}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stat div{background:#fff;border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:22px}.stat span{font-size:11px;color:var(--mute)}
.qmode{display:flex;gap:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:#fff;border-radius:20px;padding:8px 16px;font-size:13px;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
@media print{.topbar,.rail,.edgetab,.player,.heart,.memobtn{display:none}}
.fig.kb,.fig.fret,.fig.tab,.fig.rtab,.fig.rhythm{width:100%}
.center>.fig{flex:1 1 100%}
.kbcard{width:min(46%,230px)}


/* ---- v2 追加 ---- */
a.ibtn{text-decoration:none;color:var(--text);font-weight:900;font-size:17px}
a.tb-fav{color:var(--accent)}
@media (max-width:520px){
  .topbar{gap:5px;padding:8px 8px}
  .topbar .ibtn{width:40px;height:40px}
  .secpos{display:none}
  .loginbtn{padding:0 8px;font-size:11px;min-height:38px}
}
.webfig{overflow-x:auto;margin:14px 0;display:flex;justify-content:center}
.webfig svg{max-width:100%;height:auto;display:block}
b.ct{background:var(--ch-soft);border-radius:4px;padding:0 4px}
td:has(> b.ct){background:var(--ch-soft)}
.ans.nc{border-style:dotted;min-height:28px;padding:0 6px}
.ans.nc .ans-q{color:var(--text);font-size:14px}
.ans.nc.open .ans-a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid var(--ans);border-radius:50%}
.pk{display:inline-block;font-weight:900;padding:0 3px;color:var(--text)}
.blank{display:inline-block;min-width:5em;border-bottom:1px solid var(--sub);margin:0 4px}
hr.dots{border:none;border-top:2px dotted #C9CED3;margin:16px 0}
.math{font-family:"Times New Roman","Hiragino Mincho ProN",serif;font-size:1.05em;white-space:nowrap}
.math i{font-style:italic}
.math .ov{border-top:1px solid currentColor;padding-top:1px}
.center>.math{font-size:1.2em}
.right{text-align:right}

/* ---- v3 追加 ---- */
.railhead .back{margin-top:8px;font-size:12px;font-weight:700;color:var(--accent-d);text-decoration:none}
.dback{padding:8px 16px 0}
.dback .back{margin:0;font-size:13px;font-weight:700;text-decoration:none}
.minirow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 10px;flex:0 0 100%}
.minirow.top{justify-content:flex-start;margin:8px 0 4px}
.player.mini{position:relative;overflow:hidden;display:inline-flex;flex-direction:row;align-items:center;gap:4px;padding:3px 4px 3px 10px;margin:0;border-radius:999px;width:auto;max-width:100%}
.player.mini .nm{flex:0 0 auto;font-size:11px;color:#C9CED3;margin-right:2px;white-space:nowrap}
.player.mini.whole{background:var(--accent-d)}
.player.mini.whole .nm{color:#fff;font-weight:700}
.player.mini button{min-height:32px;min-width:0;padding:0 10px;border-radius:999px;font-size:12px;border-width:1px}
.player.mini .prog{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0;background:transparent}
td .minirow{margin:2px 0}
td .player.mini .nm{display:none}
td .player.mini{padding:2px}
.chnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 0}
.chnav a{background:#fff;border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center}
.chnav a small{font-size:11px;color:var(--mute)}
.chnav a b{font-size:14px;line-height:1.4}
.chnav .next{text-align:right}
.fig.tab .rrow{margin:4px 0;display:flex;justify-content:center}
.fig.tab svg{height:auto}