{"id":908,"date":"2026-11-13T10:00:49","date_gmt":"2026-11-13T01:00:49","guid":{"rendered":"https:\/\/guitarschool.in\/?page_id=908"},"modified":"2026-11-13T17:13:05","modified_gmt":"2026-11-13T08:13:05","slug":"fretboard","status":"publish","type":"page","link":"https:\/\/guitarschool.in\/?page_id=908","title":{"rendered":"\u6307\u677f \u97f3\u5f53\u3066\u30af\u30a4\u30ba"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"908\" class=\"elementor elementor-908\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6c77658 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c77658\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0226c08\" data-id=\"0226c08\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4315dfa elementor-widget elementor-widget-html\" data-id=\"4315dfa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.lt-nav{max-width:760px;margin:0 auto;padding:4px 16px;font-family:\"Hiragino Sans\",\"Noto Sans JP\",\"Yu Gothic\",sans-serif;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.lt-nav a{color:#b5532a;font-weight:700;text-decoration:none}.lt-nav a:hover{text-decoration:underline}.lt-nav .lt-sub{color:#7a6e64}.lt-nav .lt-back{display:inline-block;padding:6px 14px;border:1px solid #e3d9cc;border-radius:999px;background:#fff}<\/style><nav class=\"lt-nav\" aria-label=\"\u5b66\u7fd2\u30fb\u8cc7\u6599\u5ba4\"><a class=\"lt-back\" href=\"\/?page_id=907\">\u2190 \u5b66\u7fd2\u30fb\u8cc7\u6599\u5ba4\u306b\u623b\u308b<\/a><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17cef4f elementor-widget elementor-widget-html\" data-id=\"17cef4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u6307\u677f \u97f3\u5f53\u3066\u30af\u30a4\u30ba(Elementor \u306e HTML \u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u306b\u3053\u306e\u307e\u307e\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044) -->\n<div id=\"fbq-app\">\n<style>\n#fbq-app{--fbq-bg:#fbf8f3;--fbq-ink:#2b2420;--fbq-sub:#7a6e64;--fbq-accent:#b5532a;--fbq-ok:#2f7d4f;--fbq-ng:#c0392b;--fbq-line:#e3d9cc;\n  max-width:760px;margin:0 auto;padding:16px;background:var(--fbq-bg);color:var(--fbq-ink);border-radius:14px;\n  font-family:\"Hiragino Sans\",\"Noto Sans JP\",\"Yu Gothic\",sans-serif;line-height:1.5;box-sizing:border-box}\n#fbq-app *{box-sizing:border-box}\n#fbq-app .fbq-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}\n#fbq-app .fbq-title{font-size:20px;font-weight:700;margin:0;color:var(--fbq-ink)}\n#fbq-app .fbq-stats{font-size:13px;color:var(--fbq-sub);display:flex;gap:12px;flex-wrap:wrap}\n#fbq-app .fbq-stats b{color:var(--fbq-ink);font-size:16px}\n#fbq-app .fbq-modes{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}\n#fbq-app .fbq-timer{display:none;align-items:center;gap:10px;margin-top:10px}\n#fbq-app.is-timed .fbq-timer{display:flex}\n#fbq-app .fbq-bar{flex:1;height:8px;background:var(--fbq-line);border-radius:999px;overflow:hidden}\n#fbq-app .fbq-bar i{display:block;height:100%;width:100%;background:var(--fbq-accent);transition:width .1s linear}\n#fbq-app .fbq-bar i.is-low{background:var(--fbq-ng)}\n#fbq-app .fbq-time{font-variant-numeric:tabular-nums;font-weight:700;min-width:3.2em;text-align:right}\n#fbq-app .fbq-q{font-size:17px;font-weight:600;text-align:center;margin:12px 0 8px;min-height:1.6em}\n#fbq-app .fbq-q.is-ok{color:var(--fbq-ok)}\n#fbq-app .fbq-q.is-ng{color:var(--fbq-ng)}\n#fbq-app .fbq-board{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}\n#fbq-app .fbq-board svg{display:block;width:100%;height:auto}\n#fbq-app .fbq-play.is-v{display:grid;grid-template-columns:minmax(150px,250px) 1fr;gap:14px;align-items:start}\n#fbq-app .fbq-play.is-v .fbq-board{overflow:visible}\n#fbq-app .fbq-play.is-v .fbq-tools{flex-wrap:wrap;margin-top:0}\n#fbq-app .fbq-play.is-v .fbq-tool{padding:6px 12px;font-size:13px;white-space:nowrap}\n#fbq-app .fbq-play.is-v .fbq-answers{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}\n#fbq-app .fbq-sl,#fbq-app .fbq-fn{font-size:11px;fill:var(--fbq-sub)}\n#fbq-app .fbq-hn{font-size:9px;fill:#3a2a1e;font-weight:600}\n#fbq-app .fbq-tn{font-size:11px;fill:#fff;font-weight:700}\n#fbq-app .fbq-ring{animation:fbq-pulse 1.2s ease-out infinite;transform-box:fill-box;transform-origin:center}\n@keyframes fbq-pulse{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}\n#fbq-app button{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit;text-align:center;-webkit-tap-highlight-color:transparent}\n#fbq-app button:focus-visible{outline:2px solid var(--fbq-accent);outline-offset:2px}\n#fbq-app .fbq-mode{padding:5px 14px;border:1px solid var(--fbq-line);border-radius:999px;font-size:13px;background:#fff;color:var(--fbq-ink)}\n#fbq-app .fbq-mode.is-on{background:var(--fbq-ink);border-color:var(--fbq-ink);color:#fff}\n#fbq-app .fbq-tools{display:flex;gap:8px;justify-content:center;margin:12px 0}\n#fbq-app .fbq-tool{padding:6px 16px;border:1px solid var(--fbq-line);border-radius:999px;font-size:14px;background:#fff;color:var(--fbq-ink)}\n@media (hover:hover){#fbq-app .fbq-tool:hover{border-color:var(--fbq-accent)}}\n#fbq-app .fbq-start{background:var(--fbq-accent);border-color:var(--fbq-accent);color:#fff;font-weight:700;padding:8px 28px;font-size:15px}\n#fbq-app .fbq-answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;transition:opacity .2s}\n#fbq-app .fbq-answers.is-off{opacity:.4;pointer-events:none}\n#fbq-app .fbq-a{padding:12px 4px;border-radius:10px;background:#fff;border:1px solid var(--fbq-line);font-size:15px;font-weight:600;color:var(--fbq-ink);transition:transform .08s,background .15s;display:flex;align-items:center;justify-content:center}\n@media (hover:hover){#fbq-app .fbq-a:hover{border-color:var(--fbq-accent)}}\n#fbq-app .fbq-a:active{transform:scale(.97)}\n#fbq-app .fbq-a.is-ok{background:var(--fbq-ok);border-color:var(--fbq-ok);color:#fff}\n#fbq-app .fbq-a.is-ng{background:var(--fbq-ng);border-color:var(--fbq-ng);color:#fff}\n#fbq-app .fbq-settings{margin-top:16px;border-top:1px solid var(--fbq-line);padding-top:10px;font-size:14px}\n#fbq-app .fbq-settings summary{cursor:pointer;font-weight:600;color:var(--fbq-sub)}\n#fbq-app .fbq-grid{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;margin-top:10px}\n#fbq-app .fbq-k{color:var(--fbq-sub);white-space:nowrap}\n#fbq-app select{font:inherit;padding:4px 8px;border:1px solid var(--fbq-line);border-radius:6px;background:#fff;color:var(--fbq-ink);max-width:100%}\n#fbq-app .fbq-row{display:flex;gap:12px;flex-wrap:wrap}\n#fbq-app .fbq-row label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}\n#fbq-app input[type=checkbox]{accent-color:var(--fbq-accent);width:16px;height:16px;margin:0}\n<\/style>\n\n<div class=\"fbq-head\">\n  <h3 class=\"fbq-title\">\u6307\u677f \u97f3\u5f53\u3066\u30af\u30a4\u30ba<\/h3>\n  <div class=\"fbq-stats\">\n    <span>\u6b63\u89e3 <b id=\"fbq-score\">0<\/b> \/ <span id=\"fbq-total\">0<\/span>(<span id=\"fbq-rate\">-<\/span>)<\/span>\n    <span>\u9023\u7d9a <b id=\"fbq-streak\">0<\/b><\/span>\n    <span><span id=\"fbq-bestlabel\">\u6700\u9ad8\u9023\u7d9a<\/span> <b id=\"fbq-best\">0<\/b><\/span>\n  <\/div>\n<\/div>\n\n<div class=\"fbq-modes\">\n  <button type=\"button\" class=\"fbq-mode is-on\" data-sec=\"0\">\u7df4\u7fd2<\/button>\n  <button type=\"button\" class=\"fbq-mode\" data-sec=\"30\">30\u79d2<\/button>\n  <button type=\"button\" class=\"fbq-mode\" data-sec=\"60\">60\u79d2<\/button>\n  <button type=\"button\" class=\"fbq-mode\" data-sec=\"120\">120\u79d2<\/button>\n<\/div>\n\n<div class=\"fbq-timer\">\n  <div class=\"fbq-bar\"><i id=\"fbq-bar\"><\/i><\/div>\n  <span class=\"fbq-time\" id=\"fbq-time\">0.0<\/span>\n<\/div>\n\n<p class=\"fbq-q\" id=\"fbq-q\"><\/p>\n<div class=\"fbq-play\" id=\"fbq-play\">\n<div class=\"fbq-board\" id=\"fbq-board\"><svg id=\"fbq-svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u30ae\u30bf\u30fc\u306e\u6307\u677f\"><\/svg><\/div>\n\n<div class=\"fbq-side\">\n<div class=\"fbq-tools\">\n  <button type=\"button\" class=\"fbq-tool fbq-start\" id=\"fbq-start\">\u30b9\u30bf\u30fc\u30c8<\/button>\n  <button type=\"button\" class=\"fbq-tool\" id=\"fbq-listen\">\u266a \u97f3\u3092\u8074\u304f<\/button>\n  <button type=\"button\" class=\"fbq-tool\" id=\"fbq-skip\">\u30b9\u30ad\u30c3\u30d7<\/button>\n<\/div>\n\n<div class=\"fbq-answers\" id=\"fbq-answers\"><\/div>\n<\/div>\n<\/div>\n\n<details class=\"fbq-settings\">\n  <summary>\u8a2d\u5b9a<\/summary>\n  <div class=\"fbq-grid\">\n    <span class=\"fbq-k\">\u8868\u8a18<\/span>\n    <select id=\"fbq-names\">\n      <option value=\"it\">\u30c9\u30ec\u30df(\u30a4\u30bf\u30ea\u30a2\u5f0f)<\/option>\n      <option value=\"en\">C D E(\u82f1\u7c73\u5f0f)<\/option>\n      <option value=\"ja\">\u30cf \u30cb \u30db(\u65e5\u672c\u5f0f)<\/option>\n    <\/select>\n    <span class=\"fbq-k\">\u6307\u677f\u306e\u5411\u304d<\/span>\n    <select id=\"fbq-orient\">\n      <option value=\"auto\">\u81ea\u52d5(\u72ed\u3044\u753b\u9762\u306f\u7e26)<\/option>\n      <option value=\"h\">\u6a2a<\/option>\n      <option value=\"v\">\u7e26<\/option>\n    <\/select>\n    <span class=\"fbq-k\">\u7bc4\u56f2<\/span>\n    <select id=\"fbq-range\">\n      <option value=\"5\">\u958b\u653e\u301c5\u30d5\u30ec\u30c3\u30c8<\/option>\n      <option value=\"7\">\u958b\u653e\u301c7\u30d5\u30ec\u30c3\u30c8<\/option>\n      <option value=\"12\">\u958b\u653e\u301c12\u30d5\u30ec\u30c3\u30c8<\/option>\n    <\/select>\n    <span class=\"fbq-k\">\u5f26<\/span>\n    <div class=\"fbq-row fbq-str\">\n      <label><input type=\"checkbox\" value=\"1\" checked>1<\/label>\n      <label><input type=\"checkbox\" value=\"2\" checked>2<\/label>\n      <label><input type=\"checkbox\" value=\"3\" checked>3<\/label>\n      <label><input type=\"checkbox\" value=\"4\" checked>4<\/label>\n      <label><input type=\"checkbox\" value=\"5\" checked>5<\/label>\n      <label><input type=\"checkbox\" value=\"6\" checked>6<\/label>\n    <\/div>\n    <span class=\"fbq-k\">\u51fa\u984c<\/span>\n    <div class=\"fbq-row\">\n      <label><input type=\"checkbox\" id=\"fbq-natural\" checked>\u5e79\u97f3\u306e\u307f(\u266f\u266d\u306a\u3057)<\/label>\n    <\/div>\n    <span class=\"fbq-k\">\u305d\u306e\u4ed6<\/span>\n    <div class=\"fbq-row\">\n      <label><input type=\"checkbox\" id=\"fbq-hint\">\u97f3\u540d\u3092\u8868\u793a(\u899a\u3048\u308b\u7528)<\/label>\n      <label><input type=\"checkbox\" id=\"fbq-sound\" checked>\u7b54\u3048\u305f\u3089\u97f3\u3092\u9cf4\u3089\u3059<\/label>\n    <\/div>\n    <span><\/span>\n    <div><button type=\"button\" class=\"fbq-tool\" id=\"fbq-reset\">\u6210\u7e3e\u3092\u30ea\u30bb\u30c3\u30c8<\/button><\/div>\n  <\/div>\n<\/details>\n\n<script>\n(function(){\n  var root=document.getElementById('fbq-app'); if(!root) return;\n  var OPEN=[64,59,55,50,45,40]; \/\/ 1\u5f26\u301c6\u5f26(E4 B3 G3 D3 A2 E2)\n  var NAMES={\n    en:[\"C\",\"C\u266f\/D\u266d\",\"D\",\"D\u266f\/E\u266d\",\"E\",\"F\",\"F\u266f\/G\u266d\",\"G\",\"G\u266f\/A\u266d\",\"A\",\"A\u266f\/B\u266d\",\"B\"],\n    it:[\"\u30c9\",\"\u30c9\u266f\/\u30ec\u266d\",\"\u30ec\",\"\u30ec\u266f\/\u30df\u266d\",\"\u30df\",\"\u30d5\u30a1\",\"\u30d5\u30a1\u266f\/\u30bd\u266d\",\"\u30bd\",\"\u30bd\u266f\/\u30e9\u266d\",\"\u30e9\",\"\u30e9\u266f\/\u30b7\u266d\",\"\u30b7\"],\n    ja:[\"\u30cf\",\"\u5b30\u30cf\/\u5909\u30cb\",\"\u30cb\",\"\u5b30\u30cb\/\u5909\u30db\",\"\u30db\",\"\u30d8\",\"\u5b30\u30d8\/\u5909\u30c8\",\"\u30c8\",\"\u5b30\u30c8\/\u5909\u30a4\",\"\u30a4\",\"\u5b30\u30a4\/\u5909\u30ed\",\"\u30ed\"]\n  };\n  var NATURAL=[0,2,4,5,7,9,11], ALL=[0,1,2,3,4,5,6,7,8,9,10,11];\n  var ACC='#b5532a', OK='#2f7d4f', NG='#c0392b';\n  var NUT=52, OPENX=32, FW=56, SY=28, SG=30;\n  var $=function(s){return root.querySelector(s);};\n  var svg=$('#fbq-svg'), board=$('#fbq-board'), qEl=$('#fbq-q'), barEl=$('#fbq-bar'), timeEl=$('#fbq-time');\n  var st={score:0,total:0,streak:0,best:0,cur:null,reveal:null,locked:false,timer:null,\n          mode:0,running:false,endAt:0,tick:null};\n\n  function getNum(key){ try{ return parseInt(localStorage.getItem(key)||'0',10)||0; }catch(e){ return 0; } }\n  function setNum(key,v){ try{ localStorage.setItem(key,v); }catch(e){} }\n  st.best=getNum('fbq-best');\n\n  function opts(){\n    var strings=[];\n    root.querySelectorAll('.fbq-str input').forEach(function(c){ if(c.checked) strings.push(+c.value); });\n    return {names:$('#fbq-names').value, max:+$('#fbq-range').value, strings:strings,\n      natural:$('#fbq-natural').checked, hint:$('#fbq-hint').checked, sound:$('#fbq-sound').checked, orient:$('#fbq-orient').value};\n  }\n  function isV(o){ return o.orient==='v' || (o.orient==='auto' && root.clientWidth<560); }\n  function fx(f){ return f===0 ? OPENX : NUT+(f-0.5)*FW; }\n  function sy(s){ return SY+(s-1)*SG; }\n  function shortName(pc,o){ return NAMES[o.names][pc].split('\/')[0]; }\n  function show(id,on){ $(id).style.display=on?'':'none'; }\n\n  function draw(o){\n    var v=isV(o);\n    $('#fbq-play').classList.toggle('is-v',v);\n    if(v) drawV(o); else drawH(o);\n  }\n\n  \/\/ \u7e26\u5411\u304d(\u30b3\u30fc\u30c9\u8868\u3068\u540c\u3058\u304f\u3001\u5de6\u304c6\u5f26\u30fb\u4e0a\u304c\u30ca\u30c3\u30c8)\n  function drawV(o){\n    var SX0=34, SGV=36, OY=30, NV=52, FH=40;\n    function vx(s){ return SX0+(6-s)*SGV; }\n    function vy(f){ return f===0 ? OY : NV+(f-0.5)*FH; }\n    var W=vx(1)+22, H=NV+o.max*FH+8, x1=vx(6)-15, x2=vx(1)+15, h='', f, s;\n    h+='<rect x=\"'+x1+'\" y=\"'+NV+'\" width=\"'+(x2-x1)+'\" height=\"'+(o.max*FH)+'\" rx=\"3\" fill=\"#4a2f1d\"\/>';\n    for(f=1;f<=o.max;f++){ var y=NV+f*FH; h+='<line x1=\"'+x1+'\" y1=\"'+y+'\" x2=\"'+x2+'\" y2=\"'+y+'\" stroke=\"#c8c5bd\" stroke-width=\"3\"\/>'; }\n    var mid=(vx(4)+vx(3))\/2;\n    [3,5,7,9].forEach(function(m){ if(m<=o.max) h+='<circle cx=\"'+mid+'\" cy=\"'+vy(m)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/>'; });\n    if(o.max>=12){ h+='<circle cx=\"'+((vx(5)+vx(4))\/2)+'\" cy=\"'+vy(12)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/><circle cx=\"'+((vx(3)+vx(2))\/2)+'\" cy=\"'+vy(12)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/>'; }\n    h+='<rect x=\"'+x1+'\" y=\"'+(NV-6)+'\" width=\"'+(x2-x1)+'\" height=\"7\" fill=\"#efe6d0\"\/>';\n    for(s=1;s<=6;s++){\n      var on=o.strings.indexOf(s)>=0;\n      h+='<line x1=\"'+vx(s)+'\" y1=\"'+(OY-12)+'\" x2=\"'+vx(s)+'\" y2=\"'+(H-8)+'\" stroke=\"'+(s<=3?'#f3efe6':'#d6b36e')+'\" stroke-width=\"'+(1.2+s*0.4)+'\" opacity=\"'+(on?1:0.3)+'\"\/>';\n      h+='<text x=\"'+vx(s)+'\" y=\"11\" text-anchor=\"middle\" class=\"fbq-sl\">'+s+'<\/text>';\n    }\n    for(f=0;f<=o.max;f++) h+='<text x=\"12\" y=\"'+(vy(f)+4)+'\" text-anchor=\"middle\" class=\"fbq-fn\">'+f+'<\/text>';\n    if(o.hint){\n      o.strings.forEach(function(s){\n        for(var f=0;f<=o.max;f++){\n          var pc=(OPEN[s-1]+f)%12;\n          if(o.natural && NATURAL.indexOf(pc)<0) continue;\n          h+='<circle cx=\"'+vx(s)+'\" cy=\"'+vy(f)+'\" r=\"10\" fill=\"#fff\" opacity=\".85\"\/>';\n          h+='<text x=\"'+vx(s)+'\" y=\"'+(vy(f)+3.5)+'\" text-anchor=\"middle\" class=\"fbq-hn\">'+shortName(pc,o)+'<\/text>';\n        }\n      });\n    }\n    if(st.cur){\n      var c=st.cur, cx=vx(c.s), cy=vy(c.f), col=st.reveal==='ok'?OK:(st.reveal==='ng'?NG:ACC);\n      if(!st.reveal) h+='<circle class=\"fbq-ring\" cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"17\" fill=\"none\" stroke=\"'+ACC+'\" stroke-width=\"2\"\/>';\n      h+='<circle cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"13\" fill=\"'+col+'\" stroke=\"#fff\" stroke-width=\"2\"\/>';\n      if(st.reveal) h+='<text x=\"'+cx+'\" y=\"'+(cy+4)+'\" text-anchor=\"middle\" class=\"fbq-tn\">'+shortName(c.pc,o)+'<\/text>';\n    }\n    svg.setAttribute('viewBox','0 0 '+W+' '+H);\n    svg.innerHTML=h;\n    svg.style.minWidth='0';\n  }\n\n  \/\/ \u6a2a\u5411\u304d\n  function drawH(o){\n    var W=NUT+o.max*FW+14, H=SY+5*SG+36, y1=SY-15, y2=sy(6)+15, h='', f, s;\n    h+='<rect x=\"'+NUT+'\" y=\"'+y1+'\" width=\"'+(W-14-NUT)+'\" height=\"'+(y2-y1)+'\" rx=\"3\" fill=\"#4a2f1d\"\/>';\n    for(f=1;f<=o.max;f++){ var x=NUT+f*FW; h+='<line x1=\"'+x+'\" y1=\"'+y1+'\" x2=\"'+x+'\" y2=\"'+y2+'\" stroke=\"#c8c5bd\" stroke-width=\"3\"\/>'; }\n    [3,5,7,9].forEach(function(m){ if(m<=o.max) h+='<circle cx=\"'+fx(m)+'\" cy=\"'+(sy(3)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/>'; });\n    if(o.max>=12){ h+='<circle cx=\"'+fx(12)+'\" cy=\"'+(sy(2)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/><circle cx=\"'+fx(12)+'\" cy=\"'+(sy(4)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".55\"\/>'; }\n    h+='<rect x=\"'+(NUT-6)+'\" y=\"'+y1+'\" width=\"7\" height=\"'+(y2-y1)+'\" fill=\"#efe6d0\"\/>';\n    for(s=1;s<=6;s++){\n      var on=o.strings.indexOf(s)>=0;\n      h+='<line x1=\"'+(OPENX-16)+'\" y1=\"'+sy(s)+'\" x2=\"'+(W-14)+'\" y2=\"'+sy(s)+'\" stroke=\"'+(s<=3?'#f3efe6':'#d6b36e')+'\" stroke-width=\"'+(1.2+s*0.4)+'\" opacity=\"'+(on?1:0.3)+'\"\/>';\n      h+='<text x=\"8\" y=\"'+(sy(s)+4)+'\" class=\"fbq-sl\">'+s+'<\/text>';\n    }\n    for(f=0;f<=o.max;f++) h+='<text x=\"'+fx(f)+'\" y=\"'+(H-8)+'\" text-anchor=\"middle\" class=\"fbq-fn\">'+f+'<\/text>';\n    if(o.hint){\n      o.strings.forEach(function(s){\n        for(var f=0;f<=o.max;f++){\n          var pc=(OPEN[s-1]+f)%12;\n          if(o.natural && NATURAL.indexOf(pc)<0) continue;\n          h+='<circle cx=\"'+fx(f)+'\" cy=\"'+sy(s)+'\" r=\"10\" fill=\"#fff\" opacity=\".85\"\/>';\n          h+='<text x=\"'+fx(f)+'\" y=\"'+(sy(s)+3.5)+'\" text-anchor=\"middle\" class=\"fbq-hn\">'+shortName(pc,o)+'<\/text>';\n        }\n      });\n    }\n    if(st.cur){\n      var c=st.cur, cx=fx(c.f), cy=sy(c.s), col=st.reveal==='ok'?OK:(st.reveal==='ng'?NG:ACC);\n      if(!st.reveal) h+='<circle class=\"fbq-ring\" cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"17\" fill=\"none\" stroke=\"'+ACC+'\" stroke-width=\"2\"\/>';\n      h+='<circle cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"13\" fill=\"'+col+'\" stroke=\"#fff\" stroke-width=\"2\"\/>';\n      if(st.reveal) h+='<text x=\"'+cx+'\" y=\"'+(cy+4)+'\" text-anchor=\"middle\" class=\"fbq-tn\">'+shortName(c.pc,o)+'<\/text>';\n    }\n    svg.setAttribute('viewBox','0 0 '+W+' '+H);\n    svg.innerHTML=h;\n    svg.style.minWidth = o.max>7 ? '600px' : '0';\n  }\n\n  function scrollToTarget(o){\n    if(isV(o) || !st.cur || board.scrollWidth<=board.clientWidth) return;\n    var W=NUT+o.max*FW+14, scale=svg.clientWidth\/W;\n    board.scrollLeft=fx(st.cur.f)*scale-board.clientWidth\/2;\n  }\n\n  function buildButtons(o){\n    var box=$('#fbq-answers'); box.innerHTML='';\n    (o.natural?NATURAL:ALL).forEach(function(pc){\n      var b=document.createElement('button');\n      b.type='button'; b.className='fbq-a'; b.setAttribute('data-pc',pc);\n      b.textContent=NAMES[o.names][pc];\n      b.addEventListener('click',function(){ answer(pc,b); });\n      box.appendChild(b);\n    });\n  }\n  function answersOff(off){ $('#fbq-answers').classList.toggle('is-off',off); }\n\n  function stats(){\n    $('#fbq-score').textContent=st.score;\n    $('#fbq-total').textContent=st.total;\n    $('#fbq-rate').textContent=st.total?Math.round(st.score\/st.total*100)+'%':'-';\n    $('#fbq-streak').textContent=st.streak;\n    if(st.mode>0){\n      $('#fbq-bestlabel').textContent='\u30d9\u30b9\u30c8('+st.mode+'\u79d2)';\n      $('#fbq-best').textContent=getNum('fbq-ta-'+st.mode);\n    }else{\n      $('#fbq-bestlabel').textContent='\u6700\u9ad8\u9023\u7d9a';\n      $('#fbq-best').textContent=st.best;\n    }\n  }\n\n  \/* ---------- \u5236\u9650\u6642\u9593 ---------- *\/\n  function updTimer(){\n    var total=st.mode*1000, rem=st.running?Math.max(0,st.endAt-Date.now()):total;\n    barEl.style.width=(total?rem\/total*100:100)+'%';\n    barEl.classList.toggle('is-low',st.running && rem<5000);\n    timeEl.textContent=(rem\/1000).toFixed(1);\n    if(st.running && rem<=0) finish();\n  }\n  function stopRun(){ st.running=false; clearInterval(st.tick); }\n  function ready(){\n    stopRun(); clearTimeout(st.timer);\n    st.cur=null; st.reveal=null; st.locked=true;\n    var o=opts(); buildButtons(o); answersOff(true); draw(o);\n    qEl.className='fbq-q';\n    qEl.textContent=st.mode+'\u79d2\u3067\u4f55\u554f\u6b63\u89e3\u3067\u304d\u308b\u304b\u6311\u6226!';\n    $('#fbq-start').textContent='\u30b9\u30bf\u30fc\u30c8';\n    show('#fbq-start',true); show('#fbq-listen',false); show('#fbq-skip',false);\n    updTimer(); stats();\n  }\n  function start(){\n    if(!opts().strings.length){ qEl.textContent='\u5f26\u30921\u672c\u4ee5\u4e0a\u9078\u3093\u3067\u304f\u3060\u3055\u3044'; return; }\n    st.score=0; st.total=0; st.streak=0; stats();\n    st.running=true; st.endAt=Date.now()+st.mode*1000;\n    show('#fbq-start',false); show('#fbq-listen',true); show('#fbq-skip',true);\n    clearInterval(st.tick); st.tick=setInterval(updTimer,100);\n    next();\n  }\n  function finish(){\n    stopRun(); clearTimeout(st.timer);\n    st.locked=true; st.cur=null; st.reveal=null;\n    draw(opts()); answersOff(true);\n    var key='fbq-ta-'+st.mode, isNew=st.score>getNum(key);\n    if(isNew) setNum(key,st.score);\n    stats();\n    qEl.className='fbq-q is-ok';\n    qEl.textContent='\u7d42\u4e86! '+st.score+'\u554f\u6b63\u89e3'+(st.total?'(\u6b63\u89e3\u7387 '+Math.round(st.score\/st.total*100)+'%)':'')+(isNew?' \u81ea\u5df1\u30d9\u30b9\u30c8\u66f4\u65b0!':'');\n    $('#fbq-start').textContent='\u3082\u3046\u4e00\u5ea6';\n    show('#fbq-start',true); show('#fbq-listen',false); show('#fbq-skip',false);\n    barEl.style.width='0%'; timeEl.textContent='0.0';\n  }\n  function setMode(sec){\n    st.mode=sec;\n    root.querySelectorAll('.fbq-mode').forEach(function(b){ b.classList.toggle('is-on',+b.getAttribute('data-sec')===sec); });\n    root.classList.toggle('is-timed',sec>0);\n    stopRun(); clearTimeout(st.timer);\n    st.score=0; st.total=0; st.streak=0; st.cur=null;\n    if(sec>0){ ready(); }\n    else{ show('#fbq-start',false); show('#fbq-listen',true); show('#fbq-skip',true); stats(); next(); }\n  }\n  function onSettings(){ if(st.mode>0) ready(); else next(); }\n\n  \/* ---------- \u51fa\u984c\u30fb\u89e3\u7b54 ---------- *\/\n  function next(){\n    clearTimeout(st.timer);\n    if(st.mode>0 && !st.running) return;\n    var o=opts();\n    st.reveal=null; st.locked=false; qEl.className='fbq-q';\n    var cand=[];\n    o.strings.forEach(function(s){\n      for(var f=0;f<=o.max;f++){\n        var m=OPEN[s-1]+f, pc=m%12;\n        if(o.natural && NATURAL.indexOf(pc)<0) continue;\n        if(st.cur && st.cur.s===s && st.cur.f===f) continue;\n        cand.push({s:s,f:f,pc:pc,midi:m});\n      }\n    });\n    if(!cand.length){\n      st.cur=null; buildButtons(o); draw(o); answersOff(true);\n      qEl.textContent='\u5f26\u30921\u672c\u4ee5\u4e0a\u9078\u3093\u3067\u304f\u3060\u3055\u3044'; return;\n    }\n    st.cur=cand[Math.floor(Math.random()*cand.length)];\n    buildButtons(o); answersOff(false); draw(o);\n    qEl.textContent=st.cur.s+'\u5f26\u306e'+(st.cur.f===0?'\u958b\u653e\u5f26':st.cur.f+'\u30d5\u30ec\u30c3\u30c8')+'\u306f\u4f55\u306e\u97f3?';\n    scrollToTarget(o);\n  }\n\n  function answer(pc,btn){\n    if(st.locked || !st.cur) return;\n    st.locked=true; st.total++;\n    var ok=pc===st.cur.pc, o=opts(), timed=st.mode>0;\n    if(ok){\n      st.score++; st.streak++;\n      if(!timed && st.streak>st.best){ st.best=st.streak; setNum('fbq-best',st.best); }\n    }else{\n      st.streak=0;\n      var r=root.querySelector('.fbq-a[data-pc=\"'+st.cur.pc+'\"]'); if(r) r.classList.add('is-ok');\n    }\n    btn.classList.add(ok?'is-ok':'is-ng');\n    st.reveal=ok?'ok':'ng';\n    draw(o); stats();\n    if(o.sound) play(st.cur.midi);\n    qEl.className='fbq-q '+(ok?'is-ok':'is-ng');\n    qEl.textContent=ok?'\u6b63\u89e3! '+NAMES[o.names][st.cur.pc]:'\u6b63\u89e3\u306f '+NAMES[o.names][st.cur.pc];\n    st.timer=setTimeout(next, ok?(timed?350:900):(timed?900:1800));\n  }\n\n  \/* ---------- \u97f3 ---------- *\/\n  var ac=null;\n  function play(m){\n    try{\n      ac=ac||new (window.AudioContext||window.webkitAudioContext)();\n      if(ac.state==='suspended') ac.resume();\n      var t=ac.currentTime, f=440*Math.pow(2,(m-69)\/12);\n      var o1=ac.createOscillator(), o2=ac.createOscillator(), g2=ac.createGain(), lp=ac.createBiquadFilter(), g=ac.createGain();\n      o1.type='triangle'; o1.frequency.value=f;\n      o2.type='sine'; o2.frequency.value=f*2; g2.gain.value=0.25;\n      lp.type='lowpass'; lp.frequency.setValueAtTime(f*6,t); lp.frequency.exponentialRampToValueAtTime(f*1.5,t+1.2);\n      g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(0.35,t+0.008); g.gain.exponentialRampToValueAtTime(0.0001,t+1.6);\n      o1.connect(lp); o2.connect(g2); g2.connect(lp); lp.connect(g); g.connect(ac.destination);\n      o1.start(t); o2.start(t); o1.stop(t+1.7); o2.stop(t+1.7);\n    }catch(e){}\n  }\n\n  \/* ---------- \u30a4\u30d9\u30f3\u30c8 ---------- *\/\n  root.querySelectorAll('.fbq-mode').forEach(function(b){\n    b.addEventListener('click',function(){ setMode(+b.getAttribute('data-sec')); });\n  });\n  $('#fbq-start').addEventListener('click',start);\n  $('#fbq-listen').addEventListener('click',function(){ if(st.cur) play(st.cur.midi); });\n  $('#fbq-skip').addEventListener('click',next);\n  $('#fbq-reset').addEventListener('click',function(){ st.score=0; st.total=0; st.streak=0; stats(); onSettings(); });\n  $('#fbq-range').addEventListener('change',onSettings);\n  $('#fbq-natural').addEventListener('change',onSettings);\n  root.querySelectorAll('.fbq-str input').forEach(function(c){ c.addEventListener('change',onSettings); });\n  $('#fbq-names').addEventListener('change',function(){ var o=opts(); buildButtons(o); answersOff(st.locked && !st.cur); draw(o); });\n  $('#fbq-hint').addEventListener('change',function(){ draw(opts()); });\n\n  try{ var so=localStorage.getItem('fbq-orient'); if(so) $('#fbq-orient').value=so; }catch(e){}\n  $('#fbq-orient').addEventListener('change',function(){\n    try{ localStorage.setItem('fbq-orient',this.value); }catch(e){}\n    var o=opts(); draw(o); scrollToTarget(o);\n  });\n  var rz=null;\n  window.addEventListener('resize',function(){\n    clearTimeout(rz);\n    rz=setTimeout(function(){ if($('#fbq-orient').value==='auto'){ var o=opts(); draw(o); scrollToTarget(o); } },150);\n  });\n\n  setMode(0);\n})();\ndocument.getElementById('fbq-app').addEventListener('click',function(e){ if(e.detail>0){ setTimeout(function(){ var a=document.activeElement; if(a&&a!==document.body&&a.blur&&a.tagName!=='INPUT'&&a.tagName!=='SELECT') a.blur(); },0); } });\n<\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-caf88a5 elementor-widget elementor-widget-html\" data-id=\"caf88a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.lt-nav{max-width:760px;margin:0 auto;padding:4px 16px;font-family:\"Hiragino Sans\",\"Noto Sans JP\",\"Yu Gothic\",sans-serif;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.lt-nav a{color:#b5532a;font-weight:700;text-decoration:none}.lt-nav a:hover{text-decoration:underline}.lt-nav .lt-sub{color:#7a6e64}.lt-nav .lt-back{display:inline-block;padding:6px 14px;border:1px solid #e3d9cc;border-radius:999px;background:#fff}<\/style><nav class=\"lt-nav\" aria-label=\"\u5b66\u7fd2\u30fb\u8cc7\u6599\u5ba4\"><a class=\"lt-back\" href=\"\/?page_id=907\">\u2190 \u5b66\u7fd2\u30fb\u8cc7\u6599\u5ba4\u306b\u623b\u308b<\/a><span class=\"lt-sub\">\u307b\u304b\u306e\u30af\u30a4\u30ba:<a href=\"\/?page_id=963\">\u8b5c\u8aad\u307f\u30af\u30a4\u30ba<\/a> \u30fb <a href=\"\/?page_id=909\">\u97f3\u697d\u7528\u8a9e\u30af\u30a4\u30ba<\/a> \u30fb <a href=\"\/?page_id=910\">\u697d\u5178\u30af\u30a4\u30ba<\/a> \u30fb <a href=\"\/?page_id=939\">\u6307\u677f\u30b3\u30fc\u30c9\u30fb\u30b9\u30b1\u30fc\u30eb\u56f3\u3067\u78ba\u8a8d<\/a><\/span><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2190 \u5b66\u7fd2\u30fb\u8cc7\u6599\u5ba4\u306b\u623b\u308b \u6307\u677f \u97f3\u5f53\u3066\u30af\u30a4\u30ba \u6b63\u89e3 0 \/ 0(-) \u9023\u7d9a 0 \u6700\u9ad8\u9023\u7d9a 0 \u7df4\u7fd2 30\u79d2 60\u79d2 120\u79d2 0.0 \u30b9\u30bf\u30fc\u30c8 \u266a \u97f3\u3092\u8074\u304f \u30b9\u30ad\u30c3\u30d7 \u8a2d\u5b9a \u8868\u8a18 \u30c9\u30ec\u30df(\u30a4\u30bf\u30ea\u30a2\u5f0f)C D E(\u82f1\u7c73\u5f0f)\u30cf [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":907,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-908","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guitarschool.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=908"}],"version-history":[{"count":18,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/908\/revisions"}],"predecessor-version":[{"id":1022,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/908\/revisions\/1022"}],"up":[{"embeddable":true,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/907"}],"wp:attachment":[{"href":"https:\/\/guitarschool.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}