{"id":963,"date":"2026-11-13T13:32:15","date_gmt":"2026-11-13T04:32:15","guid":{"rendered":"https:\/\/guitarschool.in\/?page_id=963"},"modified":"2026-11-13T17:14:32","modified_gmt":"2026-11-13T08:14:32","slug":"staff-reading","status":"publish","type":"page","link":"https:\/\/guitarschool.in\/?page_id=963","title":{"rendered":"\u8b5c\u8aad\u307f\u30af\u30a4\u30ba"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"963\" class=\"elementor elementor-963\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-25a0010 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25a0010\" 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-dc344eb\" data-id=\"dc344eb\" 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-73591d3 elementor-widget elementor-widget-html\" data-id=\"73591d3\" 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-d476d42 elementor-widget elementor-widget-html\" data-id=\"d476d42\" 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<!-- \u8b5c\u8aad\u307f\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=\"srq-app\">\n<style>\n#srq-app{--srq-bg:#fbf8f3;--srq-ink:#2b2420;--srq-sub:#7a6e64;--srq-accent:#b5532a;--srq-ok:#2f7d4f;--srq-ng:#c0392b;--srq-line:#e3d9cc;\n  max-width:760px;margin:0 auto;padding:16px;background:var(--srq-bg);color:var(--srq-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#srq-app *{box-sizing:border-box}\n#srq-app .srq-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}\n#srq-app .srq-title{font-size:20px;font-weight:700;margin:0;color:var(--srq-ink)}\n#srq-app .srq-stats{font-size:13px;color:var(--srq-sub);display:flex;gap:12px;flex-wrap:wrap}\n#srq-app .srq-stats b{color:var(--srq-ink);font-size:16px}\n#srq-app .srq-modes{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}\n#srq-app .srq-timer{display:none;align-items:center;gap:10px;margin-top:10px}\n#srq-app.is-timed .srq-timer{display:flex}\n#srq-app .srq-bar{flex:1;height:8px;background:var(--srq-line);border-radius:999px;overflow:hidden}\n#srq-app .srq-bar i{display:block;height:100%;width:100%;background:var(--srq-accent);transition:width .1s linear}\n#srq-app .srq-bar i.is-low{background:var(--srq-ng)}\n#srq-app .srq-time{font-variant-numeric:tabular-nums;font-weight:700;min-width:3.2em;text-align:right}\n#srq-app .srq-staffbox{margin-top:12px;background:#fff;border:1px solid var(--srq-line);border-radius:12px;padding:6px 8px;display:flex;justify-content:center}\n#srq-app .srq-staffbox svg{display:block;width:100%;max-width:360px;height:auto}\n#srq-app .srq-q{font-size:16px;font-weight:600;text-align:center;margin:10px 0 8px;min-height:1.6em}\n#srq-app .srq-q.is-ok{color:var(--srq-ok)}\n#srq-app .srq-q.is-ng{color:var(--srq-ng)}\n#srq-app button{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit;text-align:center;-webkit-tap-highlight-color:transparent}\n#srq-app button:focus-visible{outline:2px solid var(--srq-accent);outline-offset:2px}\n#srq-app .srq-mode{padding:5px 14px;border:1px solid var(--srq-line);border-radius:999px;font-size:13px;background:#fff;color:var(--srq-ink)}\n#srq-app .srq-mode.is-on{background:var(--srq-ink);border-color:var(--srq-ink);color:#fff}\n#srq-app .srq-answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;transition:opacity .2s}\n#srq-app .srq-answers.is-off,#srq-app .srq-board.is-off{opacity:.45;pointer-events:none}\n#srq-app .srq-a{padding:12px 4px;border-radius:10px;background:#fff;border:1px solid var(--srq-line);font-size:15px;font-weight:600;color:var(--srq-ink);display:flex;align-items:center;justify-content:center;transition:transform .08s,background .15s}\n@media (hover:hover){#srq-app .srq-a:hover{border-color:var(--srq-accent)}}\n#srq-app .srq-a:active{transform:scale(.97)}\n#srq-app .srq-a.is-ok{background:var(--srq-ok);border-color:var(--srq-ok);color:#fff}\n#srq-app .srq-a.is-ng{background:var(--srq-ng);border-color:var(--srq-ng);color:#fff}\n#srq-app .srq-board{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;transition:opacity .2s}\n#srq-app .srq-board svg{display:block;width:100%;height:auto}\n#srq-app .srq-board.is-v{max-width:300px;margin:0 auto;overflow:visible}\n#srq-app .srq-sl,#srq-app .srq-fn{font-size:11px;fill:var(--srq-sub)}\n#srq-app .srq-hit{cursor:pointer}\n@media (hover:hover){#srq-app .srq-hit:hover circle.srq-hv{fill:rgba(181,83,42,.25)}}\n#srq-app .srq-tools{display:flex;gap:8px;justify-content:center;margin:12px 0}\n#srq-app .srq-tool{padding:6px 16px;border:1px solid var(--srq-line);border-radius:999px;font-size:14px;background:#fff;color:var(--srq-ink)}\n@media (hover:hover){#srq-app .srq-tool:hover{border-color:var(--srq-accent)}}\n#srq-app .srq-start{background:var(--srq-accent);border-color:var(--srq-accent);color:#fff;font-weight:700;padding:8px 28px;font-size:15px}\n#srq-app .srq-note{font-size:12px;color:var(--srq-sub);text-align:center;margin:8px 0 0}\n#srq-app .srq-settings{margin-top:16px;border-top:1px solid var(--srq-line);padding-top:10px;font-size:14px}\n#srq-app .srq-settings summary{cursor:pointer;font-weight:600;color:var(--srq-sub)}\n#srq-app .srq-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;margin-top:10px}\n#srq-app .srq-k{color:var(--srq-sub);white-space:nowrap}\n#srq-app select{font:inherit;padding:4px 8px;border:1px solid var(--srq-line);border-radius:6px;background:#fff;color:var(--srq-ink);width:100%;max-width:100%}\n#srq-app .srq-row{display:flex;gap:12px;flex-wrap:wrap}\n#srq-app .srq-row label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}\n#srq-app input[type=checkbox]{accent-color:var(--srq-accent);width:16px;height:16px;margin:0}\n<\/style>\n\n<div class=\"srq-head\">\n  <h3 class=\"srq-title\">\u8b5c\u8aad\u307f\u30af\u30a4\u30ba<\/h3>\n  <div class=\"srq-stats\">\n    <span>\u6b63\u89e3 <b id=\"srq-score\">0<\/b> \/ <span id=\"srq-total\">0<\/span>(<span id=\"srq-rate\">-<\/span>)<\/span>\n    <span>\u9023\u7d9a <b id=\"srq-streak\">0<\/b><\/span>\n    <span><span id=\"srq-bestlabel\">\u6700\u9ad8\u9023\u7d9a<\/span> <b id=\"srq-best\">0<\/b><\/span>\n  <\/div>\n<\/div>\n\n<div class=\"srq-modes\">\n  <button type=\"button\" class=\"srq-mode is-on\" data-sec=\"0\">\u7df4\u7fd2<\/button>\n  <button type=\"button\" class=\"srq-mode\" data-sec=\"30\">30\u79d2<\/button>\n  <button type=\"button\" class=\"srq-mode\" data-sec=\"60\">60\u79d2<\/button>\n  <button type=\"button\" class=\"srq-mode\" data-sec=\"120\">120\u79d2<\/button>\n<\/div>\n\n<div class=\"srq-timer\">\n  <div class=\"srq-bar\"><i id=\"srq-bar\"><\/i><\/div>\n  <span class=\"srq-time\" id=\"srq-time\">0.0<\/span>\n<\/div>\n\n<div class=\"srq-staffbox\"><svg id=\"srq-staff\" viewBox=\"0 0 240 150\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u4e94\u7dda\u8b5c\"><\/svg><\/div>\n\n<p class=\"srq-q\" id=\"srq-q\"><\/p>\n\n<div class=\"srq-answers\" id=\"srq-answers\"><\/div>\n<div class=\"srq-board\" id=\"srq-board\"><svg id=\"srq-fb\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u30ae\u30bf\u30fc\u306e\u6307\u677f\"><\/svg><\/div>\n\n<div class=\"srq-tools\">\n  <button type=\"button\" class=\"srq-tool srq-start\" id=\"srq-start\">\u30b9\u30bf\u30fc\u30c8<\/button>\n  <button type=\"button\" class=\"srq-tool\" id=\"srq-listen\">\u266a \u97f3\u3092\u8074\u304f<\/button>\n  <button type=\"button\" class=\"srq-tool\" id=\"srq-skip\">\u30b9\u30ad\u30c3\u30d7<\/button>\n<\/div>\n<p class=\"srq-note\">\u30ae\u30bf\u30fc\u306e\u697d\u8b5c\u306f\u3001\u5b9f\u969b\u306b\u9cf4\u308b\u97f3\u3088\u308a1\u30aa\u30af\u30bf\u30fc\u30d6\u9ad8\u304f\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n<details class=\"srq-settings\">\n  <summary>\u8a2d\u5b9a<\/summary>\n  <div class=\"srq-grid\">\n    <span class=\"srq-k\">\u7b54\u3048\u65b9<\/span>\n    <select id=\"srq-how\">\n      <option value=\"name\">\u97f3\u540d\u3067\u7b54\u3048\u308b<\/option>\n      <option value=\"board\">\u6307\u677f\u306e\u4f4d\u7f6e\u3067\u7b54\u3048\u308b<\/option>\n    <\/select>\n    <span class=\"srq-k\">\u51fa\u984c\u7bc4\u56f2<\/span>\n    <select id=\"srq-range\">\n      <option value=\"1\">\u4e94\u7dda\u306e\u4e2d(\u30df\u301c\u30d5\u30a1)<\/option>\n      <option value=\"2\">\u30ed\u30fc\u30dd\u30b8\u30b7\u30e7\u30f3(\u52a0\u7dda\u3042\u308a\u30fb5\u30d5\u30ec\u30c3\u30c8\u307e\u3067)<\/option>\n      <option value=\"3\">12\u30d5\u30ec\u30c3\u30c8\u307e\u3067(\u4e0a\u306e\u52a0\u7dda\u3082)<\/option>\n    <\/select>\n    <span class=\"srq-k\">\u8868\u8a18<\/span>\n    <select id=\"srq-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=\"srq-k\">\u51fa\u984c<\/span>\n    <div class=\"srq-row\">\n      <label><input type=\"checkbox\" id=\"srq-acc\">\u266f\u30fb\u266d\u306e\u97f3\u3082\u51fa\u3059<\/label>\n    <\/div>\n    <span class=\"srq-k\">\u305d\u306e\u4ed6<\/span>\n    <div class=\"srq-row\">\n      <label><input type=\"checkbox\" id=\"srq-sound\" checked>\u7b54\u3048\u305f\u3089\u97f3\u3092\u9cf4\u3089\u3059<\/label>\n    <\/div>\n    <span class=\"srq-k\">\u6307\u677f\u306e\u5411\u304d<\/span>\n    <select id=\"srq-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><\/span>\n    <div><button type=\"button\" class=\"srq-tool\" id=\"srq-reset\">\u6210\u7e3e\u3092\u30ea\u30bb\u30c3\u30c8<\/button><\/div>\n  <\/div>\n<\/details>\n\n<script>\n(function(){\n  var root=document.getElementById('srq-app'); if(!root) return;\n  var $=function(s){return root.querySelector(s);};\n  \/\/ \u30c8\u97f3\u8a18\u53f7(FreeSerif \u306e\u30b0\u30ea\u30d5\u3092\u56f3\u5f62\u5316\u3057\u305f\u3082\u306e)\n  var GCLEF='M434 2Q464 -103 464 -170Q464 -223 427 -257Q390 -291 337 -291Q287 -291 250 -261.5Q213 -232 213 -190Q213 -160 233.5 -133.5Q254 -107 283.5 -107Q313 -107 331.5 -128.5Q350 -150 350 -178Q350 -240 280 -240Q298 -268 338 -268Q353 -268 368.5 -263.5Q384 -259 401 -248Q418 -237 428.5 -213.5Q439 -190 439 -157Q439 -136 411 -6Q389 -12 356 -12Q259 -12 189.5 60Q120 132 120 232Q120 267 131.5 303Q143 339 157.5 366.5Q172 394 200.5 428.5Q229 463 248.5 483.5Q268 504 303 539Q280 621 280 689Q280 779 313 839.5Q346 900 379 900Q389 900 401.5 887Q414 874 426 851Q438 828 446.5 790.5Q455 753 455 710Q455 551 342 447L368 329Q384 332 397 332Q458 332 500 282.5Q542 233 542 162Q542 44 434 2ZM426 746Q426 801 394 801Q358 801 333 748Q308 695 308 630Q308 588 321 557Q359 580 392.5 639.5Q426 699 426 746ZM498 128Q498 183 466 216Q434 249 383 249L428 23Q498 52 498 128ZM407 17 361 247Q334 241 311.5 214Q289 187 289 158Q289 143 295 128.5Q301 114 309.5 104Q318 94 327 86Q336 78 342 74.5Q348 71 348 71L340 66Q307 75 277.5 106Q248 137 248 184Q248 231 277.5 270.5Q307 310 343 323L325 430Q168 299 168 177Q168 104 223 55Q278 6 348 6Q365 6 407 17Z';\n  var LPC=[0,2,4,5,7,9,11];\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 LET={en:['C','D','E','F','G','A','B'],it:['\u30c9','\u30ec','\u30df','\u30d5\u30a1','\u30bd','\u30e9','\u30b7'],ja:['\u30cf','\u30cb','\u30db','\u30d8','\u30c8','\u30a4','\u30ed']};\n  var NATURAL=[0,2,4,5,7,9,11], ALL=[0,1,2,3,4,5,6,7,8,9,10,11];\n  \/\/ \u8a18\u8b5c\u4e0a\u306e\u958b\u653e\u5f26(1\u5f26\u301c6\u5f26)\u3002\u5b9f\u97f3\u306f\u3053\u308c\u3088\u308a1\u30aa\u30af\u30bf\u30fc\u30d6\u4f4e\u3044\n  var OPENW=[76,71,67,62,57,52];\n  \/\/ \u51fa\u984c\u7bc4\u56f2:[\u6700\u4f4e\u306e\u6bb5, \u6700\u9ad8\u306e\u6bb5, \u6700\u5927\u30d5\u30ec\u30c3\u30c8]\u3002\u6bb5 = \u97f3\u540d(C=0\u301cB=6)+\u30aa\u30af\u30bf\u30fc\u30d6\u00d77\n  var RANGES={'1':[30,38,5],'2':[23,39,5],'3':[23,44,12]};\n  var OK='#2f7d4f', NG='#c0392b', ACC='#b5532a';\n  var st={score:0,total:0,streak:0,best:0,cur:null,locked:false,timer:null,mode:0,running:false,endAt:0,tick:null,last:'',picked:null};\n  var qEl=$('#srq-q'), barEl=$('#srq-bar'), timeEl=$('#srq-time');\n  function getNum(k){ try{ return parseInt(localStorage.getItem(k)||'0',10)||0; }catch(e){ return 0; } }\n  function setNum(k,v){ try{ localStorage.setItem(k,v); }catch(e){} }\n  st.best=getNum('srq-best');\n  try{ ['srq-how','srq-range','srq-names','srq-orient'].forEach(function(id){ var v=localStorage.getItem(id); if(v) $('#'+id).value=v; }); }catch(e){}\n\n  function opts(){ return {how:$('#srq-how').value, range:RANGES[$('#srq-range').value], names:$('#srq-names').value, acc:$('#srq-acc').checked, sound:$('#srq-sound').checked}; }\n  function show(id,on){ $(id).style.display=on?'':'none'; }\n  function midiOf(n){ return 12*(n.oct+1)+LPC[n.l]+n.a; }\n  function noteName(n,sys){\n    if(sys==='ja') return (n.a>0?'\u5b30':n.a<0?'\u5909':'')+LET.ja[n.l];\n    return LET[sys][n.l]+(n.a>0?'\u266f':n.a<0?'\u266d':'');\n  }\n  function positions(n,o){\n    var m=midiOf(n), res=[];\n    OPENW.forEach(function(w,i){ var f=m-w; if(f>=0 && f<=o.range[2]) res.push({s:i+1,f:f}); });\n    return res;\n  }\n\n  \/* ---------- \u4e94\u7dda\u8b5c ---------- *\/\n  function drawStaff(n,state){\n    var T=40, L=8, R=232, h='';\n    for(var i=0;i<5;i++) h+='<line x1=\"'+L+'\" y1=\"'+(T+i*12)+'\" x2=\"'+R+'\" y2=\"'+(T+i*12)+'\" stroke=\"#2b2420\" stroke-width=\"1.2\"\/>';\n    h+='<path d=\"'+GCLEF+'\" transform=\"translate(6 '+(T+49.5)+') scale(0.0795 -0.0795)\" fill=\"#2b2420\"\/>';\n    if(n){\n      var step=n.l+n.oct*7, y=T+48-(step-30)*6, x=150, col=state==='ok'?OK:state==='ng'?NG:'#2b2420';\n      for(var s=28; s>=step; s-=2) h+='<line x1=\"'+(x-14)+'\" y1=\"'+(T+48-(s-30)*6)+'\" x2=\"'+(x+14)+'\" y2=\"'+(T+48-(s-30)*6)+'\" stroke=\"#2b2420\" stroke-width=\"1.2\"\/>';\n      for(var u=40; u<=step; u+=2) h+='<line x1=\"'+(x-14)+'\" y1=\"'+(T+48-(u-30)*6)+'\" x2=\"'+(x+14)+'\" y2=\"'+(T+48-(u-30)*6)+'\" stroke=\"#2b2420\" stroke-width=\"1.2\"\/>';\n      h+='<g transform=\"translate('+x+' '+y+') rotate(-20)\"><ellipse rx=\"7.6\" ry=\"5.2\" fill=\"'+col+'\"\/><ellipse rx=\"3.6\" ry=\"2.3\" fill=\"#fff\" transform=\"rotate(-25)\"\/><\/g>';\n      if(n.a) h+='<text x=\"'+(x-15)+'\" y=\"'+(y+(n.a<0?3:5))+'\" text-anchor=\"end\" font-size=\"'+(n.a<0?20:18)+'\" fill=\"'+col+'\" font-family=\"serif\">'+(n.a>0?'\u266f':'\u266d')+'<\/text>';\n    }\n    $('#srq-staff').innerHTML=h;\n  }\n\n  \/* ---------- \u6307\u677f(\u6307\u677f\u3067\u7b54\u3048\u308b\u30e2\u30fc\u30c9) ---------- *\/\n  function isV(){ var o=$('#srq-orient').value; return o==='v' || (o==='auto' && root.clientWidth<560); }\n  function drawBoard(o,mark){\n    var max=o.range[2], v=isV(), svg=$('#srq-fb'), h='', f, s, P, W, H;\n    $('#srq-board').classList.toggle('is-v',v);\n    if(v){\n      var SX0=34,SGV=36,OY=30,NV=52,FH=38;\n      var vx=function(s){return SX0+(6-s)*SGV;}, vy=function(f){return f===0?OY:NV+(f-0.5)*FH;};\n      W=vx(1)+22; H=NV+max*FH+8; var x1=vx(6)-15, x2=vx(1)+15;\n      h+='<rect x=\"'+x1+'\" y=\"'+NV+'\" width=\"'+(x2-x1)+'\" height=\"'+(max*FH)+'\" rx=\"3\" fill=\"#4a2f1d\"\/>';\n      for(f=1;f<=max;f++) h+='<line x1=\"'+x1+'\" y1=\"'+(NV+f*FH)+'\" x2=\"'+x2+'\" y2=\"'+(NV+f*FH)+'\" stroke=\"#c8c5bd\" stroke-width=\"3\"\/>';\n      [3,5,7,9].forEach(function(m){ if(m<=max) h+='<circle cx=\"'+((vx(4)+vx(3))\/2)+'\" cy=\"'+vy(m)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/>'; });\n      if(max>=12) h+='<circle cx=\"'+((vx(5)+vx(4))\/2)+'\" cy=\"'+vy(12)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/><circle cx=\"'+((vx(3)+vx(2))\/2)+'\" cy=\"'+vy(12)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/>';\n      h+='<rect x=\"'+x1+'\" y=\"'+(NV-6)+'\" width=\"'+(x2-x1)+'\" height=\"7\" fill=\"#efe6d0\"\/>';\n      for(s=1;s<=6;s++){\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)+'\"\/>';\n        h+='<text x=\"'+vx(s)+'\" y=\"11\" text-anchor=\"middle\" class=\"srq-sl\">'+s+'<\/text>';\n      }\n      for(f=0;f<=max;f++) h+='<text x=\"12\" y=\"'+(vy(f)+4)+'\" text-anchor=\"middle\" class=\"srq-fn\">'+f+'<\/text>';\n      P=function(s,f){ return [vx(s),vy(f)]; };\n    }else{\n      var NUT=52,OPENX=32,FW=56,SY=28,SG=30;\n      var fx=function(f){return f===0?OPENX:NUT+(f-0.5)*FW;}, sy=function(s){return SY+(s-1)*SG;};\n      W=NUT+max*FW+14; H=SY+5*SG+36; var y1=SY-15, y2=sy(6)+15;\n      h+='<rect x=\"'+NUT+'\" y=\"'+y1+'\" width=\"'+(W-14-NUT)+'\" height=\"'+(y2-y1)+'\" rx=\"3\" fill=\"#4a2f1d\"\/>';\n      for(f=1;f<=max;f++) h+='<line x1=\"'+(NUT+f*FW)+'\" y1=\"'+y1+'\" x2=\"'+(NUT+f*FW)+'\" y2=\"'+y2+'\" stroke=\"#c8c5bd\" stroke-width=\"3\"\/>';\n      [3,5,7,9].forEach(function(m){ if(m<=max) h+='<circle cx=\"'+fx(m)+'\" cy=\"'+(sy(3)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/>'; });\n      if(max>=12) h+='<circle cx=\"'+fx(12)+'\" cy=\"'+(sy(2)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/><circle cx=\"'+fx(12)+'\" cy=\"'+(sy(4)+SG\/2)+'\" r=\"6\" fill=\"#e9dcc2\" opacity=\".5\"\/>';\n      h+='<rect x=\"'+(NUT-6)+'\" y=\"'+y1+'\" width=\"7\" height=\"'+(y2-y1)+'\" fill=\"#efe6d0\"\/>';\n      for(s=1;s<=6;s++){\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)+'\"\/>';\n        h+='<text x=\"8\" y=\"'+(sy(s)+4)+'\" class=\"srq-sl\">'+s+'<\/text>';\n      }\n      for(f=0;f<=max;f++) h+='<text x=\"'+fx(f)+'\" y=\"'+(H-8)+'\" text-anchor=\"middle\" class=\"srq-fn\">'+f+'<\/text>';\n      P=function(s,f){ return [fx(f),sy(s)]; };\n    }\n    \/\/ \u62bc\u305b\u308b\u5834\u6240(\u900f\u660e\u306e\u4e38)\u3068\u3001\u7b54\u3048\u305f\u3042\u3068\u306e\u5370\n    for(s=1;s<=6;s++) for(f=0;f<=max;f++){\n      var p=P(s,f), k=s+'-'+f, mk=mark&&mark[k];\n      if(mk) h+='<circle cx=\"'+p[0]+'\" cy=\"'+p[1]+'\" r=\"12\" fill=\"'+(mk==='ok'?OK:mk==='ng'?NG:'none')+'\" stroke=\"'+(mk==='show'?OK:'#fff')+'\" stroke-width=\"'+(mk==='show'?3:2)+'\"\/>';\n      h+='<g class=\"srq-hit\" data-s=\"'+s+'\" data-f=\"'+f+'\"><circle class=\"srq-hv\" cx=\"'+p[0]+'\" cy=\"'+p[1]+'\" r=\"14\" fill=\"transparent\"\/><\/g>';\n    }\n    svg.setAttribute('viewBox','0 0 '+W+' '+H);\n    svg.innerHTML=h;\n    svg.style.minWidth=(!v && max>7)?'600px':'0';\n    svg.querySelectorAll('.srq-hit').forEach(function(g){ g.addEventListener('click',function(){ answerBoard(+g.getAttribute('data-s'),+g.getAttribute('data-f')); }); });\n  }\n\n  function buildButtons(o){\n    var box=$('#srq-answers'); box.innerHTML='';\n    (o.acc?ALL:NATURAL).forEach(function(pc){\n      var b=document.createElement('button'); b.type='button'; b.className='srq-a'; b.setAttribute('data-pc',pc);\n      b.textContent=NAMES[o.names][pc];\n      b.addEventListener('click',function(){ answerName(pc,b); });\n      box.appendChild(b);\n    });\n  }\n  function layout(o){\n    var board=o.how==='board';\n    show('#srq-answers',!board); show('#srq-board',board);\n    if(board) drawBoard(o,null); else buildButtons(o);\n  }\n  function inputsOff(off){ $('#srq-answers').classList.toggle('is-off',off); $('#srq-board').classList.toggle('is-off',off); }\n\n  function stats(){\n    $('#srq-score').textContent=st.score; $('#srq-total').textContent=st.total;\n    $('#srq-rate').textContent=st.total?Math.round(st.score\/st.total*100)+'%':'-';\n    $('#srq-streak').textContent=st.streak;\n    if(st.mode>0){ $('#srq-bestlabel').textContent='\u30d9\u30b9\u30c8('+st.mode+'\u79d2)'; $('#srq-best').textContent=getNum('srq-ta-'+st.mode); }\n    else{ $('#srq-bestlabel').textContent='\u6700\u9ad8\u9023\u7d9a'; $('#srq-best').textContent=st.best; }\n  }\n\n  \/* ---------- \u51fa\u984c ---------- *\/\n  function pick(o){\n    var cand=[];\n    for(var step=o.range[0]; step<=o.range[1]; step++){\n      var l=step%7, oct=Math.floor(step\/7);\n      [0,1,-1].forEach(function(a){\n        if(a && !o.acc) return;\n        var n={l:l,oct:oct,a:a};\n        if(a && LPC.indexOf((LPC[l]+a+12)%12)>=0) return; \/\/ \u30df\u266f\u30fb\u30d5\u30a1\u266d\u30fb\u30b7\u266f\u30fb\u30c9\u266d\u306f\u51fa\u3055\u306a\u3044\n        if(!positions(n,o).length) return;\n        if(l+'\/'+oct+'\/'+a===st.last) return;\n        cand.push(n);\n      });\n    }\n    return cand[Math.floor(Math.random()*cand.length)];\n  }\n  function next(){\n    clearTimeout(st.timer);\n    if(st.mode>0 && !st.running) return;\n    var o=opts();\n    st.locked=false; qEl.className='srq-q';\n    st.cur=pick(o); st.last=st.cur.l+'\/'+st.cur.oct+'\/'+st.cur.a;\n    drawStaff(st.cur,null); layout(o); inputsOff(false);\n    qEl.textContent= o.how==='board' ? '\u3053\u306e\u97f3\u306f\u3069\u3053\u3067\u5f3e\u304f?' : '\u3053\u306e\u97f3\u306f\u4f55?';\n  }\n  function afterAnswer(ok,o){\n    if(ok){ st.score++; st.streak++; if(st.mode===0 && st.streak>st.best){ st.best=st.streak; setNum('srq-best',st.best); } }\n    else st.streak=0;\n    stats();\n    drawStaff(st.cur,ok?'ok':'ng');\n    if(o.sound) play(midiOf(st.cur)-12);\n    var nm=noteName(st.cur,o.names);\n    qEl.className='srq-q '+(ok?'is-ok':'is-ng');\n    return nm;\n  }\n  function answerName(pc,btn){\n    if(st.locked||!st.cur) return;\n    st.locked=true; st.total++;\n    var o=opts(), right=(midiOf(st.cur)%12+12)%12, ok=pc===right;\n    btn.classList.add(ok?'is-ok':'is-ng');\n    if(!ok){ var r=root.querySelector('.srq-a[data-pc=\"'+right+'\"]'); if(r) r.classList.add('is-ok'); }\n    var nm=afterAnswer(ok,o);\n    qEl.textContent=(ok?'\u6b63\u89e3! ':'\u6b63\u89e3\u306f ')+nm;\n    st.timer=setTimeout(next, ok?(st.mode?350:900):(st.mode?900:1800));\n  }\n  function answerBoard(s,f){\n    if(st.locked||!st.cur) return;\n    st.locked=true; st.total++;\n    var o=opts(), pos=positions(st.cur,o), ok=pos.some(function(p){return p.s===s&&p.f===f;});\n    var mark={}; pos.forEach(function(p){ mark[p.s+'-'+p.f]='show'; });\n    mark[s+'-'+f]=ok?'ok':'ng';\n    drawBoard(o,mark);\n    var nm=afterAnswer(ok,o);\n    var where=pos.map(function(p){ return p.s+'\u5f26'+(p.f===0?'\u958b\u653e':p.f+'\u30d5\u30ec\u30c3\u30c8'); }).join('\u3001');\n    qEl.textContent=(ok?'\u6b63\u89e3! ':'\u4e0d\u6b63\u89e3\u2026 ')+nm+'(\u5f3e\u3051\u308b\u5834\u6240:'+where+')';\n    st.timer=setTimeout(next, ok?(st.mode?600:1500):(st.mode?1300:2600));\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 idle(msg,btn){\n    st.cur=null; st.locked=true; drawStaff(null); layout(opts()); inputsOff(true);\n    qEl.className='srq-q'; qEl.textContent=msg;\n    $('#srq-start').textContent=btn; show('#srq-start',true); show('#srq-listen',false); show('#srq-skip',false);\n  }\n  function ready(){ stopRun(); clearTimeout(st.timer); idle(st.mode+'\u79d2\u3067\u4f55\u554f\u6b63\u89e3\u3067\u304d\u308b\u304b\u6311\u6226!','\u30b9\u30bf\u30fc\u30c8'); updTimer(); stats(); }\n  function start(){\n    st.score=0; st.total=0; st.streak=0; stats();\n    st.running=true; st.endAt=Date.now()+st.mode*1000;\n    show('#srq-start',false); show('#srq-listen',true); show('#srq-skip',true);\n    clearInterval(st.tick); st.tick=setInterval(updTimer,100);\n    next();\n  }\n  function finish(){\n    stopRun(); clearTimeout(st.timer);\n    var key='srq-ta-'+st.mode, isNew=st.score>getNum(key);\n    if(isNew) setNum(key,st.score);\n    stats();\n    idle('\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!':''),'\u3082\u3046\u4e00\u5ea6');\n    qEl.className='srq-q is-ok';\n    barEl.style.width='0%'; timeEl.textContent='0.0';\n  }\n  function setMode(sec){\n    st.mode=sec;\n    root.querySelectorAll('.srq-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;\n    if(sec>0) ready(); else { show('#srq-start',false); show('#srq-listen',true); show('#srq-skip',true); stats(); next(); }\n  }\n  function onSettings(){ if(st.mode>0) ready(); else next(); }\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('.srq-mode').forEach(function(b){ b.addEventListener('click',function(){ setMode(+b.getAttribute('data-sec')); }); });\n  $('#srq-start').addEventListener('click',start);\n  $('#srq-listen').addEventListener('click',function(){ if(st.cur) play(midiOf(st.cur)-12); });\n  $('#srq-skip').addEventListener('click',next);\n  $('#srq-reset').addEventListener('click',function(){ st.score=0; st.total=0; st.streak=0; stats(); onSettings(); });\n  ['srq-how','srq-range','srq-names','srq-orient'].forEach(function(id){\n    $('#'+id).addEventListener('change',function(){ try{ localStorage.setItem(id,this.value); }catch(e){} onSettings(); });\n  });\n  $('#srq-acc').addEventListener('change',onSettings);\n  var rz=null;\n  window.addEventListener('resize',function(){ clearTimeout(rz); rz=setTimeout(function(){ if($('#srq-orient').value==='auto' && opts().how==='board' && !st.locked) drawBoard(opts(),null); },150); });\n\n  setMode(0);\n})();\ndocument.getElementById('srq-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-ebbf65a elementor-widget elementor-widget-html\" data-id=\"ebbf65a\" 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=908\">\u6307\u677f \u97f3\u5f53\u3066\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><\/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 \u8b5c\u8aad\u307f\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 \u30ae\u30bf\u30fc\u306e\u697d\u8b5c\u306f\u3001\u5b9f\u969b\u306b\u9cf4\u308b\u97f3\u3088\u308a1\u30aa\u30af\u30bf\u30fc\u30d6\u9ad8\u304f\u66f8\u304b\u308c\u3066\u3044\u307e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":907,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-963","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/963","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=963"}],"version-history":[{"count":6,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/963\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/guitarschool.in\/index.php?rest_route=\/wp\/v2\/pages\/963\/revisions\/1031"}],"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=963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}