/* 図の追加(g5)用のスタイル。色はサイト共通の変数だけを使う */
.fig[class*="fig-g5"] b, .g5-grid b{ background:none; }

.g5-grid{ width:100%; }
.g5-line{ display:grid; grid-template-columns:96px minmax(0, 1fr); align-items:center; gap:0 8px; margin:0; }
.g5-rows .g5-line{ grid-template-columns:96px minmax(0, 1fr) 120px; }
.g5-lab{ font-size:13px; font-weight:600; line-height:1.4; }
.g5-cells{ display:grid; grid-template-columns:repeat(var(--g5c), minmax(0, 1fr)); }
.g5-cell{ display:flex; align-items:center; justify-content:center; min-height:34px; border-left:1px solid var(--line); }
.g5-cell:first-child{ border-left:none; }
.g5-cell.bar{ border-left:2px solid var(--line2); }
.g5-line + .g5-line .g5-cells, .g5-count + .g5-line .g5-cells{ border-top:none; }
.g5-line:not(.g5-count) .g5-cells{ border-bottom:1px solid var(--line); }
.g5-count .g5-cell{ min-height:24px; border-left-color:transparent; }
.g5-count .g5-cell.bar{ border-left-color:var(--line2); }
.g5-count .g5-cell span{ font-size:12.5px; color:var(--sub); }
.g5-dot{ display:block; width:9px; height:9px; border-radius:50%; }
.g5-cell.s0 .g5-dot{ width:4px; height:4px; background:var(--line2); }
.g5-cell.s1 .g5-dot{ width:11px; height:11px; border:2px solid var(--accent); background:var(--surface); }
.g5-cell.s2 .g5-dot{ width:15px; height:15px; background:var(--accent); }
.g5-cell.txt span{ white-space:nowrap; padding:2px 4px; font-size:13px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); line-height:1.3; }
.g5-cell.txt.s2 span{ border-color:var(--accent); background:var(--accent-bg); font-weight:700; }
.g5-rowplay{ margin:0 0 0 6px; white-space:nowrap; }

.g5-energy{ position:relative; padding-left:26px; }
.g5-en-ax{ position:absolute; left:0; top:0; height:96px; display:flex; flex-direction:column; justify-content:space-between; font-size:11.5px; color:var(--sub); }
.g5-en-cols{ display:flex; gap:3px; }
.g5-en-col{ text-align:center; min-width:0; }
.g5-en-area{ height:96px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line2); }
.g5-en-bar{ width:100%; background:var(--line2); border-radius:4px 4px 0 0; }
.g5-en-bar.hot{ background:var(--accent); }
.g5-en-col b{ display:block; margin-top:5px; font-size:13px; line-height:1.35; }
.g5-en-col i{ display:block; font-style:normal; font-size:11.5px; color:var(--sub); line-height:1.4; }
.g5-en-col em{ display:block; margin-top:2px; font-style:normal; font-size:11.5px; color:var(--sub); line-height:1.4; }
.g5-en-note{ margin-top:8px; font-size:12px; color:var(--sub); }

.g5-keys{ width:100%; max-width:640px; }
.g5-kr{ display:grid; grid-template-columns:150px minmax(0, 1fr) auto; align-items:center; gap:4px 10px; padding:7px 0; border-bottom:1px solid var(--line); }
.g5-kr:first-child{ padding-top:0; }
.g5-kr-h b{ display:block; font-size:13.5px; line-height:1.4; }
.g5-kr-h span{ display:block; font-size:12px; color:var(--sub); line-height:1.4; }
.g5-kr-chords{ display:flex; flex-wrap:wrap; gap:6px; }
.g5-kc{ min-width:52px; padding:4px 8px; text-align:center; font-size:15px; font-weight:600; border:1px solid var(--line2); border-radius:7px; background:var(--surface); }
.g5-kc.deg{ font-size:12px; font-weight:400; color:var(--sub); border-color:transparent; background:none; }
.g5-kr .fig-play{ margin:0; white-space:nowrap; }
.g5-kr-degs{ padding-bottom:2px; }

@media(max-width:560px){
  .g5-line{ grid-template-columns:70px minmax(0, 1fr); }
  .g5-rows .g5-line{ grid-template-columns:70px minmax(0, 1fr); }
  .g5-rowplay{ grid-column:2; justify-self:start; margin:4px 0 8px; }
  .g5-lab{ font-size:12px; }
  .g5-kr{ grid-template-columns:minmax(0, 1fr) auto; }
  .g5-kr-chords{ grid-column:1 / -1; grid-row:2; }
  .g5-kc{ min-width:44px; padding:3px 5px; font-size:14px; }
  .g5-en-col b{ font-size:12px; }
}
.g5-cell.playing{ background:var(--accent-bg); box-shadow:inset 0 0 0 2px var(--accent); }