body {
      align-items: center;
      justify-content: center;
      height: 100vh;
	margin: 0 auto;
	padding: 1em 0;
            font-family: Arial, sans-serif;  
            text-align: center;  
            padding: 20px; 
}
#notationquiz, #mh-readnotes{
	/*width: 100%;*/
	margin-left: 0 ;
}
h2 {
	margin: 0;
	text-align: center;
}
        button, input {
            margin: 5px;
            padding: 10px;
            font-size: 14px;
        }
#quizNumber{display:none;}
    #staffcontainer {
	position: relative;
	width: 400px;
	/*	margin-left: -1em; */
	height: 400px;
}
/* 高さ400pxのままでも、ここはタップを通す */
#staffcontainer,
#staffcontainer * {
  pointer-events: none !important;
}

#staffcontainer{
/*border:1px solid #f00;*/
margin: 0 auto;
}
/* 下の鍵盤・操作は通常どおり反応させる（保険） */
#keyboardWrap,
#keyboard,
#controlPanel {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
#controlPanelHidden {
  display:none;
}

  /* 横スクロールはラッパーで受ける mgs009*/
  #keyboardWrap { touch-action: pan-x; }
  /* 各鍵のタップ遅延を減らす（ダブルタップズーム抑制など） */
  #keyboard [data-midi] { touch-action: manipulation; }

#timeValue {
	display:none;
}
    #clefImg {
      width: 400px;
      height: 400px;
    }

    #fclef {
      width: 400px;
      height: 400px;
    }

    #note {
      position: absolute;
      width: 42px;
      height: 30px;
      top: 256px;
      left: 50%;
      transform: translateX(-50%);
      transition: top 0.2s ease; /* Adjust duration and easing as needed */
    }
    #note.animate {
      top: 0; /* Set the final position after the animation */
    }

    #sharp {
      position: absolute;
      width: 28px;
      height: 88px;
      top: 256px;
      left: 140px;
      display: none;
    }

    #flat {
      position: absolute;
      width: 28px;
      height: 88px;
      top: 256px;
      left: 140px;
      display: none;
    }

    #additionalLine {
      position: absolute;
      width: 60px;
      height: 30px;
      top: 270px;
      left: 50%;
      transform: translateX(-50%);
      display: none; /* Initially hide the additional line */
}

/* HIGH & LOW */

    #containerHigh, #containerLow {
	position: relative;
	width: 200px;
	margin-left: -1em;
    }

    #gclefHigh, #gclefLow {
      width: 200px;
      height: 200px;
    }

#noteHigh, #noteLow {
  position: absolute;
  width: 21px;
  height: 15px;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.2s ease; /* Adjust duration and easing as needed */
}
/* 追加：ID+クラス で優先度を上げる */
#noteHigh.note-shift-right {
  transform: translateX(calc(-50% + 35px));
  transition: top 0.2s ease, transform 0.12s ease; /* ついでにtransformもアニメ可 */
}
#noteHigh.animate, #noteLow.animate {
  top: 0; /* Set the final position after the animation */
}
    #sharpHigh, #sharpLow {
      position: absolute;
      width: 14px;
      height: 44px;
      top: 128px;
      left: 70px;
      display: none;
    }

    #additionalLineHigh, #additionalLineLow {
      position: absolute;
      width: 30px;
      height: 15px;
      top: 135px;
      left: 50%;
      transform: translateX(-50%);
      display: none; /* Initially hide the additional line */
    }


/* /HIGH & LOW */

    #textBox {
      position: absolute;
      top: 10px;
      left: 10px;
}

.options {
	margin: 0 1em;
}

#range {
  height: 10px;
}
.range-wrapper {
  width: 400px;
  margin: 0 auto;
  padding: 50px 0 30px 0;
}
.range-num {
  margin-bottom: 40px;
}
.range-num input{
  border: 2px solid #ccc;
  height: 32px;
  padding-left: 5px;
  width: 50px;
  font-size: 16px;
}

/* 横スクロール外枠 */
#keyboardWrap{
  width:min(680px,100%);
  margin:0 auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #0003;
  border-radius:8px;
  background:#f7f7f7;
}
/* 横一列に“必要なだけの幅”で並べる */
#keyboard{
  display:flex;
	position: relative;
	overflow:visible;
  flex-wrap:nowrap;
  gap:2px;                 /* 白鍵の隙間 */
  padding:10px 12px;
  width:max-content;       /* ここ超重要：子要素分の幅をそのまま確保 */
  touch-action:pan-x;      /* スワイプで横スクロール */
	user-select:none;
/*border:1px solid #f00;*/
}

:root{
  --kb-whiteW: 32px;   /* デフォルトPC */
  --kb-whiteH: 150px;
  --kb-blackW: 20px;
  --kb-blackH: 95px;
}

/* スマホ用（幅600px以下のとき） */
@media (max-width: 600px){
  :root{
    --kb-whiteW: calc(100vw / 7 - 4px);
    --kb-blackW: calc(var(--kb-whiteW) * 0.6);
  }
}
#quizNumber{display:none;}
.kb-white {
  position: relative;
  display: inline-block;
  width: var(--kb-whiteW, 32px);
  height: 150px;
  background: white;
  border: 1px solid #999;
  box-sizing: border-box;
}
/*
.kb-black {
  position: absolute;
  width: var(--kb-blackW, 20px);
  height: 100px;
  background: black;
  z-index: 2;
  top: 0;
  cursor: pointer;
}
*/
/*（B）黒鍵：#keyboard 直下で絶対配置（白鍵の上に重ねる） xxxx*/
#keyboard .kb-black{
  position:absolute; top:0;
  width:var(--kb-blackW);
  height:var(--kb-blackH);
  background:#111;
  border:1px solid #000; border-bottom-width:3px;
  border-radius:0 0 3px 3px;
  z-index:999;
  touch-action:manipulation;
}
#keyboard .kb-black::before{
  content:""; position:absolute;
  left:-12px; right:-12px; top:-12px; bottom:-12px;
  pointer-events:auto;
}


/* 押下フィードバック */
.kb-white:active{ filter:brightness(.97) }
.kb-white .kb-black:active{ filter:brightness(1.2) }

/* C 白鍵の目印（任意） */
.kb-white.kb-oct::after{
  content:"";
  position:absolute; left:4px; right:4px; bottom:6px; height:3px;
  background:#0aa9; border-radius:2px;
}
/* Cの白鍵に付ける番号ラベル（下側に表示） */
.kb-white .kb-oct-label{
  position:absolute;
  bottom:6px;               /* ← 下側に固定 */
  left:50%;
  transform:translateX(-50%);
  font:600 11px/1.2 system-ui, sans-serif;
  color:#0a7;
  background:#0a75;
  padding:2px 6px;
  border-radius:10px;
  pointer-events:none;      /* ラベルに触れても白鍵が反応する */
}
/* モバイルでのタップ誤検知を減らすおまじない */
#keyboard, .kb-white, .kb-white .kb-black{
  -webkit-tap-highlight-color: transparent;
}

/* 白鍵側も少し広げたい場合（任意・必要なら） */
.kb-white::before{
  content:"";
  position:absolute;
  left:-4px; right:-4px; top:-6px; bottom:-6px;
  pointer-events: none;  /* ←これを付けるか、そのルール自体を削除 */
}
/* --- 安定版: SVGキーボードの見た目 --- */
/* --- SVGキーボードの見た目（横長→スクロール） --- */
#keyboard svg {
  height: 120px;
  display: block;
  /* widthは指定しない：SVGの実寸（横長）を使う */
}

.kb-w { fill:#fff; stroke:#999; stroke-width:1; }
.kb-b { fill:#111; stroke:#000; stroke-width:1; }
.kb-b-hit { fill: transparent; pointer-events: all; } /* ヒット拡張用 */
.white-key {
  border: 1px solid #000;
  background: white;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.black-key {
  background: black;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* デフォルトはスマホ向け（1オクターブ程度） */
.keyboard {
  width: 320px;
}

/* PCではもっと鍵盤を広く表示 */
@media (min-width: 768px) {
  .keyboard {
    width: 640px; /* 2オクターブ相当 */
  }
}
/* 🔧 Debug: 黒鍵ヒット領域を可視化（DキーでON/OFF） */
#keyboard.debug-hits .kb-b-hit {
  stroke: #ff0000;
  stroke-width: 1px;
  fill: rgba(255, 0, 0, 0.08); /* 薄い赤で塗る（邪魔なら 0 に） */
}
/* 補助線の複製に同じ見た目・中央寄せを適用する */
.ledger-clone {
  position: absolute;
  width: 60px;
  height: 30px;           /* 太いと感じたら 6〜12px くらいに */
  left: 50%;
  transform: translateX(-50%);
  display: block;         /* 複製は常に表示 */
}
#keyboard .range-marker { stroke: #10b981; stroke-width: 2px; }
#keyboard .range-marker.from { stroke-dasharray: 4 2; }
#keyboard .range-fill { fill: rgba(16,185,129,0.12); }
/* 範囲帯（赤） */
.range-fill {
  fill: rgba(255, 0, 0, 0.1); /* 赤色・半透明 */
  stroke: red;                /* 枠線も赤 */
  stroke-width: 10;
}

/* 範囲端の縦線（赤・太め） */
.range-marker {
  stroke: red;
  stroke-width: 10;   /* ← 線の太さ */
}
#kb-svg text {
  pointer-events: none;
		}
		/* SVGのレンジ帯（.range-band）の幅をアニメさせる */
#kb-svg rect.range-band {
  transform-origin: left center;
  transform-box: fill-box;   /* SVG要素にも効くようにする */
  transition: transform 0.6s ease;
}
/* 楽譜の縦帯（クリックは素通り） */
#staff-svg .staff-range-band {
  fill: rgba(255, 0, 0, 0.15);
  stroke: red;
  stroke-width: 2;
		}
#staff-svg .staff-range-note {
  fill: white;                    /* 中を白抜き */
  stroke: rgba(255,0,0,.85);      /* 赤い縁取り */
  stroke-width: 2;
		}
#noteHigh, #noteLow {
  position: absolute;
  width: 42px;
  height: 30px;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.2s ease;
  stroke: red;
  stroke-width: 2;
  fill: white;
}

#keyboardWrap, #keyboard, #keyboard .white, #keyboard .white-key, #keyboard .black {
  box-sizing: border-box;
}
.btn-start {
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.btn-start:active { transform: translateY(1px); }
body.audio-ready #startAudio { display: none; } /* 解錠後は自動で隠す */
  .audio-toggle {
    font-size: 20px; line-height: 1; padding: .35rem .55rem;
    border: 1px solid #ccc; border-radius: .6rem; background:#fff; cursor: pointer;
  }
  .audio-toggle:not(.is-muted) { border-color:#3a7; }
		
/* ********追加＝＞オプションを横並びにするために******** */
/* 横並びの親 */
#controlPanel{
  display:flex;
  flex-wrap:wrap;           /* 画面が狭いときは折り返し */
  align-items:center;
  justify-content:center;
  gap: 8px 12px;            /* 行間 / 列間 */
}

/* テーマ側で block 指定されていても横に並ぶように */
#controlPanel > label,
#controlPanel > input,
#controlPanel > select,
#controlPanel > span,
#controlPanel > button {
  display:inline-flex;
  align-items:center;
}

/* ラジオ + 画像はひとかたまりで水平 */
#controlPanel .radio-group{
  display:flex;
  align-items:center;
  gap:6px;
}

/* 幅の目安（調整可） */
#controlPanel input[type="range"]{ width:160px; }
#controlPanel select{ min-width:160px; }
#controlPanel input[type="number"]{ width:72px; }
		#controlPanel #rangeSlider{display:none;}
/* 画像のベースライン崩れ防止 */
#controlPanel img{ display:block; }
		/* ********ここまで******** */
		
/* ********追加＝＞スマホ横表示のために******** */
/* 縦画面でだけ、UI全体を必要に応じて縮小 */
@media (orientation: portrait) {
  .notation-game-wrapper {
    transform-origin: top center;
    will-change: transform;
  }
}
		/* さらに追加 */
/* 横向きスマホでキーボード域を画面端まで（左右対称） */

@media (orientation: landscape) and (max-width: 1024px) {
  
  #mh-readnotes {
   position: relative;
   transform:scale(.7,.7);
  }

  /* まとめて両端いっぱいにする（左右対称） */
  #mh-readnotes /*#staffcontainer*/,
  #mh-readnotes #keyboardWrap {
    width: 100svw !important;
    max-width: 100svw !important;
    /* 左右を同じ式で押し出す（片側だけ広がる問題を防ぐ） */
    margin-inline: calc(50% - 50svw) !important;

    /* ノッチ安全域 */
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    border-radius: 0;
  }
  #mh-readnotes #staffcontainer {
    position: relative;         /* 中央寄せの起点 */
    left: 20%;
   /*  transform: translateX();← 幅は変えずに中央へ移動
  transform: matrix(0.7, 0.7, 0, 0.7, -50%, 0);
   transform: scale(0.7,0.7); */
    transform: translateX(-50%);
    /* ここで width は指定しない（今の幅のままにする） */
}
  }
  /* キーボードは横スクロール許可（88鍵ぶんの実幅を活かす） */
  #mh-readnotes #keyboardWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  /*  transform: scale(0.5); */
  }
  #mh-readnotes #keyboard {
  }
  /* SVG を100%に縮めない：実ピクセル幅（totalWidth）を維持 */
  #mh-readnotes #keyboard svg {
    width: auto !important;
    height: auto !important;
    display: block;
  }
/* unwanted gap possiblly produced by the WP theme TT5 */
/* Notation Quiz 範囲だけ block gap を殺す */
#notationquiz,
#notationquiz * {
  --wp--style--block-gap: 0 !important;
}

/* WPの “兄弟の先頭に margin-block-start” を打ち消す */
#notationquiz .is-layout-flow > * + *,
#notationquiz .is-layout-constrained > * + * {
  margin-block-start: 0 !important;
}

/* 親が flex/grid の場合の gap もゼロにする */
#notationquiz .is-layout-flex { gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; }
/* 楽譜(#staffcontainer) と鍵盤(#keyboardWrap) の親を “行間ゼロ” に */
/*
#quizContainer {
  display: grid;     /* 既に grid/flex ならそのままでOK */
  row-gap: 0 !important;
  gap: 0 !important;
}
*/
/* 念のため、個別要素の上下マージン/パディングも締める */
#staffcontainer,
#keyboardWrap {
  margin-block: 0 !important;
}
#keyboardWrap { padding-top: 0 !important; }   /* ここが効いてるケースが多い */

}
/* 横スクロールの発生を防止 */
html, body { overflow-x: clip; }

/* ********ここまで******** */

/* ******** For Readnotes Levels ******** */