/* 図の追加(g3)用のスタイル */
.fig-svg .accidental.hl{ fill:var(--accent); }

/* コードネームの部品 */
.g3-sym{ display:flex; flex-wrap:wrap; gap:14px 0; align-items:flex-start; }
.g3-part{ width:118px; padding-right:10px; box-sizing:border-box; }
.g3-glyph{ font-size:30px; font-weight:700; line-height:1.2; padding-bottom:4px; border-bottom:2px solid var(--accent); min-height:36px; }
.g3-tick{ display:none; }
.g3-part b{ display:block; margin-top:8px; font-size:14px; }
.g3-part span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.6; color:var(--sub); }

/* 機能の振り分け */
.g3-fnmap{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px; }
.g3-fncol{ border-top:3px solid var(--fn-x); padding-top:10px; min-width:0; }
.g3-fn-t{ border-top-color:var(--fn-t); }
.g3-fn-s{ border-top-color:var(--fn-s); }
.g3-fn-d{ border-top-color:var(--fn-d); }
.g3-fnhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.g3-fnhead b{ font-size:14px; }
.g3-fnfeel{ font-size:12.5px; color:var(--sub); margin:4px 0 10px; line-height:1.6; }
.g3-fnchord{ display:flex; align-items:baseline; gap:10px; padding:6px 0; border-top:1px solid var(--line); }
.g3-fndeg{ width:3.6em; font-size:12.5px; color:var(--sub); }
.g3-fnname{ font-size:16px; font-weight:700; }

/* 調号の一覧 */
.g3-keygrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:14px 12px; }
.g3-keycell svg{ max-width:none !important; }
.g3-keyname{ font-size:13.5px; margin-top:2px; }
.g3-keyname span, .g3-keyminor span{ color:var(--sub); font-size:12px; font-weight:400; }
.g3-keyminor{ font-size:12.5px; color:var(--sub); }
.g3-keycnt{ font-size:12px; color:var(--accent); margin-top:2px; }

@media (max-width:560px){
  .g3-fnmap{ grid-template-columns:1fr; gap:14px 0; }
  .g3-part{ width:50%; }
}