danoniplus 51.4.3 → 52.1.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/10/25
+ * Revised : 2026/11/03
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 51.4.3`;
-const g_revisedDate = `2026/10/25`;
+const g_version = `Ver 52.1.0`;
+const g_revisedDate = `2026/11/03`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/10/25 (v51.4.3)
+ * Revised : 2026/11/03 (v52.1.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -96,6 +96,12 @@ const g_limitObj = {
 
     // キーコンフィグで表示するカラーピッカー数
     kcColorPickerNum: 5,
+
+    helpLongLines: 2,     // 改行がこの数以上なら詳細ヘルプ化
+    helpLongChars: 120,   // 文字数がこの値を超えたら詳細ヘルプ化
+    helpPreviewRate: 0.44,     // 詳細ヘルプ内プレビューの高さ (画面高に対する割合)
+    helpPreviewMaxRate: 0.5,   // プレビュー内プレイ画面の最大縮小率
+    helpPreviewAutoFrames: 500, // 次の選択肢へ自動で切り替えるまでのフレーム数 (0で無効)
 };
 
 /** 設定項目の位置 */
@@ -3168,6 +3174,13 @@ const g_shortcutObj = {
         Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
+    helpOverlay: {
+        Escape: { id: `btnHelpClose` },
+        ArrowUp: { id: `btnHelpPrev` },
+        ArrowDown: { id: `btnHelpNext` },
+        ArrowLeft: { id: `btnHelpLeft` },
+        ArrowRight: { id: `btnHelpRight` },
+    },
     keyConfig: {
         //Escape: { id: `btnBack` },  // Escapeを別用途でも使用するため、ここではコメントアウト
         Backspace_Enter: { id: `btnPlay` },
@@ -5084,14 +5097,39 @@ const g_lang_msgObj = {
 
         difficulty: `譜面を選択します。`,
         speed: `矢印の流れる速度を設定します。\n外側のボタンは1x単位、内側は0.25x単位で変更できます。`,
-        motion: `矢印の速度を一定ではなく、変動させるモーションをつけるか設定します。`,
+        motion: `矢印の速度を一定ではなく、変動させるモーションをつけるか設定します。\n` +
+            `[Boost] 初めは初速、ステップゾーンに近づくにつれて速くなります。\n` +
+            `[Hi-Boost] 基本的にはBoostと同じですが、終端速度が初速に比例して速くなります。\n` +
+            `[Brake] 初めは速く、ステップゾーンに近づくにつれて初速になります。\n` +
+            `[Compress] 初めは初速、ステップゾーンに近づくにつれて徐々に遅くなります。\n` +
+            `[Fountain] 矢印・フリーズアローが流れる反対側から出現し、画面奥で折り返してステップゾーンへ向かう動きをします。\n` +
+            `[Magnet] Fountainに似ていますが、画面中央で折り返します。\n`,
         reverse: `矢印の流れる向きを設定します。`,
-        scroll: `各レーンのスクロール方向をパターンに沿って設定します。\nReverse:ONでスクロール方向を反転します。`,
-        shuffle: `譜面を左右反転したり、ランダムにします。ランダムにした場合は別譜面扱いとなります。\nハイスコアは保存されるのはOFF,Mirror,X-Mirrorのみです。`,
+        scroll: `各レーンのスクロール方向をパターンに沿って設定します。\nReverse:ONでスクロール方向を反転します。\n` +
+            `[Cross] 正、逆、正の順に流れるよう設定します。\n` +
+            `[Split] 中央を境界として、スクロール方向を反転します。 \n` +
+            `[Alternate] 交互にスクロール方向が反転するよう設定します。\n` +
+            `[Twist] Crossの亜種で、もう少し細かくスクロール方向が反転するよう設定します。\n` +
+            `[Asymmetry] Alternateの亜種で、基本的には交互にスクロール方向が反転するよう設定しますが、左右非対称になるよう設定します。\n` +
+            `[AA-Split] アスキーアート(AA)のみスクロールを反転します。\n` +
+            `[Flat] すべてのレーンが矢印の重なりに関係なく同じ方向に流れます。`,
+        shuffle: `譜面を左右反転したり、ランダムにします。ランダムにした場合は別譜面扱いとなります。\nハイスコアは保存されるのはOFF,Mirror,X-Mirrorのみです。\n` +
+            `[Mirror] 譜面をグループレーンごとに左右反転します。\n` +
+            `[X-Mirror] Mirrorに対して、グループ内のレーン数が4, 5, 6, 7の倍数のとき中央の2, 3個（上下左右なら、上下矢印）のみさらに反転します。該当キーが無い場合は、Mirrorと同じです。\n` +
+            `[Turning] 譜面をグループレーンごとに出現レーンを左右にスライドします。その上で反転する場合もあります。\n` +
+            `[Random] 譜面をグループレーンごとにランダムに再配置します。\n` +
+            `[Random+] 譜面をグループに関係なくレーンごとにランダムに再配置します。\n` +
+            `[S-Random] 譜面をグループごとに矢印個別にランダムに再配置します。\n` +
+            `[S-Random+] 譜面をグループに関係なく矢印個別にランダムに再配置します。\n` +
+            `[Scatter] 譜面をグループごと、矢印個別に矢印・フリーズアローが散らばるように再配置します。\n` +
+            `[Scatter+] 譜面をグループに関係なく、矢印個別に矢印・フリーズアローが散らばるように再配置します。`,
         autoPlay: `オートプレイや一部キーを自動で打たせる設定を行います。\nオートプレイ時はハイスコアを保存しません。`,
-        gauge: `クリア条件を設定します。\n[Start] ゲージ初期値, [Border] クリア条件(ハイフン時は0),\n[Recovery] 回復量, [Damage] ダメージ量, [Accuracy] クリアに必要な正確率、許容ミス数`,
+        gauge: `クリア条件を設定します。\n表にある表記は次の通りです。\n` +
+            `- Start) ゲージ初期値\n- Border) クリア条件(ハイフン時は0)\n` +
+            `- Recovery) 回復量\n- Damage) ダメージ量\n- Accuracy) クリアに必要な正確率、許容ミス数`,
         excessive: `空押し判定を行うか設定します。`,
-        adjustment: `曲とのタイミングにズレを感じる場合、\n数値を変えることでフレーム単位のズレを直すことができます。\n外側のボタンは5f刻み、真ん中は1f刻み、内側は0.5f刻みで調整できます。`,
+        adjustment: `曲とのタイミングにズレを感じる場合、数値を変えることでフレーム単位のズレを直すことができます。\n` +
+            `外側のボタンは5f刻み、真ん中は1f刻み、内側は0.5f刻みで調整できます。`,
         fadein: `譜面を途中から再生します。\n途中から開始した場合はハイスコアを保存しません。`,
         volume: `ゲーム内の音量を設定します。`,
 
@@ -5118,23 +5156,54 @@ const g_lang_msgObj = {
         d_arroweffect: `矢印・フリーズアローモーションの有効化設定`,
         d_special: `作品固有の特殊演出の有効化設定`,
 
-        playWindow: `ステップゾーン及び矢印の位置を全体的に回転する等の設定です。\n[Stairs/Slope] ステップゾーンを階段状にします\n[Distorted] 画面を歪ませます\n` +
-            `[SideScroll] 横スクロールモードになります`,
+        playWindow: `ステップゾーン及び矢印の位置を全体的に回転する等の設定です。\n` +
+            `[Stairs] ステップゾーン・矢印が階段状になるように表示します。\n` +
+            `[Slope] Stairsよりさらに急になるように表示します。\n` +
+            `[Distorted] ステップゾーン・矢印が歪んだ状態で表示します。\n` +
+            `[SideScroll] 矢印が横スクロールで流れてきます。`,
         playWindowType: `[Reverse] ステップゾーン及び矢印の位置について逆方向の回転が掛かります`,
-        stepArea: `ステップゾーンの位置を変更します。\n[Halfway] ステップゾーンが中央に表示されます\n[2Step] ステップゾーンが2段に分かれて流れてきます\n` +
-            `[Mismatched/R-Mismatched] スクロールの向きが上下で異なる方向に流れます\n` +
-            `[X-Flower] レーンが花びらのように広がります\n[Alt-Crossing] レーンが交互に違う方向から流れます`,
-        frzReturn: `フリーズアロー到達時及び矢印の回復判定が100の倍数に達するごとに、X/Y/Z軸のいずれかに回転します`,
-        frzReturnType: `[360°/120°/60°] 指定の角度まで回転します\n[±360°/±120°] 360°/120°に加えて逆回転が掛かることがあります\n[Pendulum] 振り子のように左右に動きます`,
-        shaking: `ステップゾーン及び矢印を揺らす設定です。\n[Horizontal] 横方向に揺らします\n[Vertical] 縦方向に揺らします\n` +
-            `[X-Horizontal] レイヤーごとに左右交互の向きで横に揺らします\n[X-Vertical] レイヤーごとに上下交互の向きで縦に揺らします\n[Drunk] 画面全体を上下左右ランダムに揺らします。画面酔いに注意してください\n` +
-            `[S-Drunk] 画面全体を上下左右ランダムに揺らし、さらにレイヤーごとに上下左右に揺らします\n` +
-            `[H-Drunk] S-Drunkより大きく上下に揺らし、さらに回転が掛かります`,
-        effect: `矢印・フリーズアローにエフェクトをかけます。\n[Dizzy/Spin] 矢印が回転します\n[Wave/Storm] 矢印の軌道が左右に揺れます\n[Blinking] 矢印が点滅します\n[Squids] 矢印が伸び縮みします`,
-        camoufrage: `ステップの見た目が配置は同じでランダムに変わります。`,
+        stepArea: `ステップゾーンの位置を変更します。\n` +
+            `[Halfway] ステップゾーンが中央に表示されます。\n` +
+            `[2Step] ステップゾーンが2段に分かれて流れてきます。\n` +
+            `[Mismatched] スクロールの向きが上下で異なる方向に流れます。\n` +
+            `[R-Mismatched] Mismatchedに似ていますが、向きが反対になります。\n` +
+            `[X-Flower] レーンが花びらのように広がります。\n` +
+            `[Alt-Crossing] レーンが交互に違う方向から流れます。`,
+        frzReturn: `フリーズアロー到達時及び矢印の回復判定が100の倍数に達するごとに、X/Y/Z軸のいずれかに回転します。\n` +
+            `[X-Axis] X軸回転\n` +
+            `[Y-Axis] Y軸回転\n` +
+            `[Z-Axis] Z軸回転\n` +
+            `[Random] X軸, Y軸, Z軸のいずれかが適用されます。\n` +
+            `[XY-Axis] X-Y軸回転\n` +
+            `[XZ-Axis] X-Z軸回転\n` +
+            `[YZ-Axis] Y-Z軸回転\n` +
+            `[Random+] X軸, Y軸, Z軸, X-Y軸, X-Z軸, Y-Z回転のいずれかが適用されます。`,
+        frzReturnType: `回転幅を変更する設定です。\n[360°/120°/60°] 指定の角度まで回転します\n[±360°/±120°] 360°/120°に加えて逆回転が掛かることがあります\n[Pendulum] 振り子のように左右に動きます`,
+        shaking: `ステップゾーン及び矢印を揺らす設定です。\n` +
+            `[Horizontal] 横方向に揺らします。\n[Vertical] 縦方向に揺らします。\n` +
+            `[X-Horizontal] レイヤーごとに左右交互の向きで横に揺らします。\n` +
+            `[X-Vertical] レイヤーごとに上下交互の向きで縦に揺らします。\n` +
+            `[Drunk] 画面全体を上下左右ランダムに揺らします。画面酔いに注意してください。\n` +
+            `[S-Drunk] 画面全体を上下左右ランダムに揺らし、さらにレイヤーごとに上下左右に揺らします。\n` +
+            `[H-Drunk] S-Drunkより大きく上下に揺らし、さらに回転が掛かります。`,
+        effect: `矢印・フリーズアローにエフェクトをかけます。\n` +
+            `[Dizzy] 矢印がZ軸回転します。\n` +
+            `[Spin] 矢印がY軸回転します。\n` +
+            `[Wave] 矢印とフリーズアローが左右に揺れながら移動します。\n` +
+            `[Storm] 矢印とフリーズアローが左右に激しく揺れ、回転します。\n` +
+            `[Blinking] 矢印が点滅します。\n[Squids] 矢印が伸び縮みします。`,
+        camoufrage: `ステップの見た目が配置は同じでランダムに変わります。\n` +
+            `[Color] 矢印とフリーズアローの色が他のものに擬態します。\n` +
+            `[Arrow] 矢印とフリーズアローの矢印形状が他のものに擬態します。\n` +
+            `[Step+Arrow] 矢印とフリーズアローの矢印形状・ステップゾーンが他のものに擬態します。\n` +
+            `[Color+Arrow] 矢印とフリーズアローの色・矢印形状が他のものに擬態します。\n` +
+            `[Color+Step+Arrow] 矢印とフリーズアローの色・矢印形状・ステップゾーン全てが他のものに擬態します。`,
         camoufrageType: `[FrzArrow] フリーズアローの帯部分を初期表示のみ非表示にし、矢印のみで表示します（ヒット/失敗時は帯を再表示）`,
-        swapping: `ステップゾーンの位置を入れ替える設定です。\n[InnerSwap] ステップゾーンの中央部分のみグループ単位で入れ替えます。\n[OuterSwap] InnerSwapの逆側（外側）をグループ単位で入れ替えます。\n` +
-            `[Mirror] ステップゾーンの位置をグループ単位で入れ替えます。\n[Mirror+] ステップゾーンの位置をグループに関係なく全体的に反転します。`,
+        swapping: `ステップゾーンの位置を入れ替える設定です。\n` +
+            `[InnerSwap] ステップゾーンの中央部分のみグループ単位で入れ替えます。\n` +
+            `[OuterSwap] InnerSwapの逆側（外側）をグループ単位で入れ替えます。\n` +
+            `[Mirror] ステップゾーンの位置をグループ単位で入れ替えます。\n` +
+            `[Mirror+] ステップゾーンの位置をグループに関係なく全体的に反転します。`,
         judgRange: `判定の許容範囲を設定します。\n[Normal] 通常、[Narrow/Hard] 辛判定、[ExHard] 激辛判定`,
         autoRetry: `自動リトライの条件を設定します。\n[Miss] ミス時、[Matari] マターリ時、[Shakin] シャキン時、[FS] Fast/Slow発生時`,
 
@@ -5147,7 +5216,15 @@ const g_lang_msgObj = {
         lnkResetHighScore: `譜面のハイスコア情報を消去`,
         lnkHighScore: `譜面のハイスコアをクリップボードへコピー`,
 
-        appearance: `流れる矢印の見え方を制御します。`,
+        appearance: `流れる矢印の見え方を制御します。\n` +
+            `[Hidden] 初めの50%までは見えますが、その後は見えなくなります。\n` +
+            `[Hidden+] 基本的にHiddenと同じですが、Hiddenの可視範囲をプレイ中に調整できます。` +
+            `初期値を10%～100%の間で設定できます。「Lock」ボタンで可視範囲の調整を不可にします。\n` +
+            `[Sudden] 初めの40%までは見えませんが、その後は見えるようになります。\n` +
+            `[Sudden+] 基本的にSuddenと同じですが、Suddenの可視範囲をプレイ中に調整できます。` +
+            `初期値を0%～90%の間で設定できます。「Lock」ボタンで可視範囲の調整を不可にします。\n` +
+            `[Hid&Sud+] Hidden+とSudden+を組み合わせて表示します。` +
+            `初期値を0%～50%の間で設定できます。「Lock」ボタンで可視範囲の調整を不可にします。`,
         opacity: `判定キャラクタ、コンボ数、Fast/Slowの透明度を設定します。`,
         hitPosition: `判定位置にズレを感じる場合、\n数値を変えることで判定の中央位置を1px単位(プラス:手前, マイナス:奥側)で調整することができます。\n早押し・遅押し傾向にある場合に使用します。`,
         displayPreview: `プレイ画面上のオブジェクトの表示状態をプレビューします。\n判定キャラクタ部分をドラッグで移動するとその位置に補正されます。`,
@@ -5195,14 +5272,41 @@ const g_lang_msgObj = {
 
         difficulty: `Select a chart.`,
         speed: `Set the speed of the sequences.\nThe outer button can be changed in 1x increments and the inner button in 0.25x increments.`,
-        motion: `Set whether to turn on acceleration or deceleration\nin the middle of the sequence.`,
+        motion: `Set whether to turn on acceleration or deceleration in the middle of the sequence.\n` +
+            `[Boost] The speed starts at the initial speed and increases as it approaches the step zone.\n` +
+            `[Hi-Boost] Similar to Boost, but the terminal speed increases in proportion to the initial speed.\n` +
+            `[Brake] The speed starts fast and slows down as it approaches the step zone.\n` +
+            `[Compress] The speed starts at the initial speed and gradually slows down as it approaches the step zone.\n` +
+            `[Fountain] The sequences appear from the opposite side of the flow and turn back at the back of the screen to head towards the step zone.\n` +
+            `[Magnet] Similar to Fountain, but turns back at the center of the screen.\n`,
         reverse: `Set the flow direction of the sequences.`,
-        scroll: `Set the scroll direction for each lane according to the pattern.\nIf "Reverse:ON" sets, reverse the scroll direction.`,
-        shuffle: `Flip the chart left and right or make it random.\nIf you make it random, it will be treated as a different chart.\nOnly when OFF, Mirror, or X-Mirror is selected, the high score will be saved.`,
+        scroll: `Set the scroll direction for each lane according to the pattern.\nIf "Reverse:ON" sets, reverse the scroll direction.\n` +
+            `[Cross] Generally, set the flow to be default, reverse, and default.\n` +
+            `[Split] Reverses the scroll direction with the center as the boundary.\n` +
+            `[Alternate] Set the scroll direction to be reversed alternately.\n` +
+            `[Twist] A variant of "Cross" that sets the scroll direction to be slightly more reversed.\n` +
+            `[Asymmetry] A variant of "Alternate" that basically sets the scroll direction to be alternately reversed, but sets it to be asymmetrical.\n` +
+            `[AA-Split] Reverses scrolling for ASCII art (AA) only.\n` +
+            `[Flat] All lanes flow in the same direction regardless of arrow overlap.`,
+        shuffle: `Flip the chart left and right or make it random.\nIf you make it random, it will be treated as a different chart.\n` +
+            `Only when OFF, Mirror, or X-Mirror is selected, the high score will be saved.\n` +
+            `[Mirror] Flip the chart left and right for each group lane.\n` +
+            `[X-Mirror] In addition to Mirror, when the number of lanes in the group is a multiple of 4, 5, 6, or 7, only the center 2 or 3 (up and down arrows for up and down) are further flipped. If there are no corresponding keys, it will be the same as Mirror.\n` +
+            `[Turning] Slide the appearance lane left and right for each group lane. In some cases, it may also be flipped.\n` +
+            `[Random] Randomly rearrange the chart for each group lane.\n` +
+            `[Random+] Randomly rearrange the chart for each lane regardless of the group.\n` +
+            `[S-Random] Randomly rearrange the chart for each arrow in each group.\n` +
+            `[S-Random+] Randomly rearrange the chart for each arrow regardless of the group.\n` +
+            `[Scatter] Rearrange the chart so that arrows and freeze arrows are scattered for each group and each arrow.\n` +
+            `[Scatter+] Rearrange the chart so that arrows and freeze arrows are scattered for each arrow regardless of the group.`,
         autoPlay: `Set to auto play and to hit some keys automatically.\nHigh score is not saved during auto play.`,
-        gauge: `Set the clear condition.\n[Start] initial value, [Border] borderline value (hyphen means zero),\n[Recovery] recovery amount, [Damage] damage amount,\n[Accuracy] accuracy required to clear and the number of allowed mistakes`,
+        gauge: `Set the clear condition.\n` +
+            `The notation used in the table is as follows.\n` +
+            `- Start) initial value\n- Border) borderline value (hyphen means zero)\n` +
+            `- Recovery) recovery amount\n- Damage) damage amount\n- Accuracy) accuracy required to clear and the number of allowed mistakes`,
         excessive: `Set whether to use excessive miss judgment.`,
-        adjustment: `If you feel that the timing is out of sync with the music, \nyou can correct the shift in frame units by changing the value.\nThe outer button can be adjusted in 5 frame increments, the middle in 1 frame increments, \nand the inner button in 0.5 frame increments.`,
+        adjustment: `If you feel that the timing is out of sync with the music, you can correct the shift in frame units by changing the value.\n` +
+            `The outer button can be adjusted in 5 frame increments, the middle in 1 frame increments, and the inner button in 0.5 frame increments.`,
         fadein: `Plays the chart from the middle.\nIf you start in the middle, the high score will not be saved.`,
         volume: `Set the in-game volume.`,
 
@@ -5227,26 +5331,54 @@ const g_lang_msgObj = {
         d_arroweffect: `Enable sequences' animations`,
         d_special: `Enable setting of special effects to the work`,
 
-        playWindow: `This is the setting for overall rotation of the step zone and arrow position, etc.\n[Stairs/Slope] The step zone is in a staircase shape.\n[Distorted] Distorts the screen.\n` +
-            `[SideScroll] It becomes a side scroll mode.`,
+        playWindow: `This is the setting for overall rotation of the step zone and arrow position, etc.\n` +
+            `[Stairs] Step zones/arrows are displayed in a staircase-like pattern.\n` +
+            `[Slope] Step zone arrows are shown steeper than Stairs.\n` +
+            `[Distorted] Step zones and arrows are shown distorted.\n` +
+            `[SideScroll] The arrows scroll horizontally.`,
         playWindowType: `[Reverse] Applies reverse rotation to the step zone and arrow positions.`,
-        stepArea: `Change the position of the step zone.\n[Halfway] Step zones are centered.\n[2Step] Step zones are divided into two layers.\n` +
-            `[Mismatched/R-Mismatched] Scroll direction flows in different directions up and down.\n` +
+        stepArea: `Change the position of the step zone.\n` +
+            `[Halfway] Step zones are centered.\n[2Step] Step zones are divided into two layers.\n` +
+            `[Mismatched] Scroll direction flows in different directions up and down.\n` +
+            `[R-Mismatched] It's similar to "Mismatched", but the orientation is reversed.\n` +
             `[X-Flower] Lanes spread out like flower petals.\n[Alt-Crossing] Lanes flow from different directions alternately.`,
-        frzReturn: `When the Freeze Arrow is reached, and every time the arrow's recovery judgment \nreaches a multiple of 100, it will rotate on either the X, Y, or Z axis.`,
-        frzReturnType: `[360deg/120deg/60deg] Rotates to the specified angle.\n[±360deg/±120deg] May rotate in the opposite direction in addition to 360deg/120deg.\n[Pendulum] Moves back and forth like a pendulum.`,
-        shaking: `This sets shaking for the step zone and arrows.\n[Horizontal] Shakes horizontally.\n[Vertical] Shakes vertically.\n` +
-            `[X-Horizontal] Per-layer shaking with alternating left/right direction by layer.\n[X-Vertical] Per-layer shaking with alternating up/down direction by layer.\n` +
+        frzReturn: `When the Freeze Arrow is reached, and every time the arrow's recovery judgment \n` +
+            `reaches a multiple of 100, it will rotate on either the X, Y, or Z axis.\n` +
+            `[X-Axis] X-axis rotation\n` +
+            `[Y-Axis] Y-axis rotation\n` +
+            `[Z-Axis] Z-axis rotation\n` +
+            `[Random] Randomly rotates to one of the X/Y/Z axes.\n` +
+            `[XY-Axis] X-Y axis rotation\n` +
+            `[XZ-Axis] X-Z axis rotation\n` +
+            `[YZ-Axis] Y-Z axis rotation\n` +
+            `[Random+] Randomly rotates to one of the X/Y/Z/X-Y/X-Z/Y-Z axes.`,
+        frzReturnType: `Set the rotation range.\n[360deg/120deg/60deg] Rotates to the specified angle.\n[±360deg/±120deg] May rotate in the opposite direction in addition to 360deg/120deg.\n[Pendulum] Moves back and forth like a pendulum.`,
+        shaking: `This sets shaking for the step zone and arrows.\n` +
+            `[Horizontal] Shakes horizontally.\n[Vertical] Shakes vertically.\n` +
+            `[X-Horizontal] Per-layer shaking with alternating left/right direction by layer.\n` +
+            `[X-Vertical] Per-layer shaking with alternating up/down direction by layer.\n` +
             `[Drunk] Shakes the entire screen randomly in all directions (may cause motion sickness).\n` +
             `[S-Drunk] Shakes the entire screen randomly in all directions, and also shakes each layer randomly in all directions.\n` +
             `[H-Drunk] Adds stronger vertical movement than S-Drunk and adds rotation.`,
         effect: `Applies effects to the arrows and freeze arrows.\n[Dizzy/Spin] Arrows rotate.\n[Wave/Storm] Swing from left to right.\n[Blinking] Arrows blink.\n[Squids] Arrows stretch and shrink.`,
-        camoufrage: `The appearance of the steps changes randomly with the same placement.`,
-        camoufrageType: `[FrzArrow] Initially hides freeze-arrow bars and displays only the arrow portion (bars reappear on hit/failure)`,
-        swapping: `This setting allows you to swap the positions of the step zones.\n[InnerSwap] Swaps only the inner portion of step zones within each shuffle group.\n[OuterSwap] Swaps the outer portion (inverse of InnerSwap) within each shuffle group.\n` +
-            `[Mirror] Swaps the positions of step zones within each shuffle group. \n[Mirror+] Flips the position of all step zones, regardless of shuffle groups. `,
+        camoufrage: `The appearance of the steps changes randomly with the same placement.\n` +
+            `[Color] The color of the arrows and freeze arrows mimics other objects.\n` +
+            `[Arrow] The arrow shape of the arrows and freeze arrows mimics other objects.\n` +
+            `[Step+Arrow] The arrow shape and step zone of the arrows and freeze arrows mimics other objects.\n` +
+            `[Color+Arrow] The color and arrow shape of the arrows and freeze arrows mimics other objects.\n` +
+            `[Color+Step+Arrow] The color, arrow shape, and step zone of the arrows and freeze arrows mimics other objects.`,
+        camoufrageType: `[FrzArrow] Initially hides freeze-arrow bars and displays only the arrow portion (bars reappear on hit/failure).`,
+        swapping: `This setting allows you to swap the positions of the step zones.\n` +
+            `[InnerSwap] Swaps only the inner portion of step zones within each shuffle group.\n` +
+            `[OuterSwap] Swaps the outer portion (inverse of InnerSwap) within each shuffle group.\n` +
+            `[Mirror] Swaps the positions of step zones within each shuffle group. \n` +
+            `[Mirror+] Flips the position of all step zones, regardless of shuffle groups. `,
         judgRange: `Set the allowable range of judgment.\n[Normal] Normal judgment, [Narrow/Hard] Hard judgment, [ExHard] Very hard judgment`,
-        autoRetry: `Set the conditions for automatic retry.\n[Miss] When missed, [Matari] When good, [Shakin] When great, [FS] When Fast/Slow occurs`,
+        autoRetry: `Set the conditions for automatic retry.\n` +
+            `[Miss] When missed\n` +
+            `[Matari(Good)] When good\n` +
+            `[Shakin(Great)] When great\n` +
+            `[Fast/Slow] When Fast/Slow occurs`,
 
         lnkSpeedG: `Displays the velocity change status by progression of the chart.`,
         lnkDensityG: `Displays the density status of the chart.`,
@@ -5257,9 +5389,19 @@ const g_lang_msgObj = {
         lnkResetHighScore: `Erase the high score information in the chart.`,
         lnkHighScore: `Copies the high score of the chart to the clipboard.`,
 
-        appearance: `Controls how the flowing sequences look.`,
+        appearance: `Controls how the flowing sequences look.\n` +
+            `[Hidden] Visible up to the first 50%, then disappears.\n` +
+            `[Hidden+] Same as "Hidden", but the visibility of "Hidden" can be adjusted during play. ` +
+            `The initial value can be set between 10% and 100%. The "Lock" button disables adjustment of the visible range.\n` +
+            `[Sudden] Not visible until first 40%, then visible.\n` +
+            `[Sudden+] Same as "Sudden", but the visibility of "Sudden" can be adjusted during play. The initial value can be set ` +
+            `between 0% and 90%. The "Lock" button disables adjustment of the visible range.\n` +
+            `[Hid&Sud+] The combination of "Hidden+" and "Sudden+" is displayed. The initial value can be set between 0% and 50%. ` +
+            `The "Lock" button disables adjustment of the visible range.`,
+        opacity: `判定キャラクタ、コンボ数、Fast/Slowの透明度を設定します。`,
         opacity: `Set the transparency of some objects such as judgment, combo counts, fast and slow`,
-        hitPosition: `If you feel a discrepancy in the judgment position, \nyou can adjust the center position of the judgment in 1px increments \n (plus: in front, minus: at the back) by changing the numerical value. \nUse this function when there is a tendency to push too fast or too slow.`,
+        hitPosition: `If you feel a discrepancy in the judgment position, you can adjust the center position of the judgment in 1px increments (plus: in front, minus: at the back) by changing the numerical value. \n` +
+            `Use this function when there is a tendency to push too fast or too slow.`,
         displayPreview: `Preview the display status of objects on the play screen.\nDragging the judgment character section will adjust it to that position.`,
         displayPreviewResetConfirm: `Reset the position of objects on the play screen to the initial state. Is it OK?`,
 
@@ -5312,6 +5454,8 @@ const g_customJsObj = {
     difficulty: [],
     settingsDisplay: [],
     displayPreview: [],
+    helpOverlay: [],
+    helpPreview: [],
     exSetting: [],
     settingSummary: [],
     keyconfig: [],

package/js/lib/settings.js

@@ -1,11 +1,11 @@
 /**
  * Dancing☆Onigiri (CW Edition)
  * Settings, Display, Ex-Settings画面
- * - ページ: option, difSelector, scoreDetail, settingsDisplay, displayPreview, exSetting
+ * - ページ: option, difSelector, scoreDetail, settingsDisplay, displayPreview, exSetting, helpOverlay
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/10/12 (v51.4.0)
+ * Revised : 2026/11/03 (v52.1.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -2002,10 +2002,941 @@ const createLblSetting = (_settingName, _adjY = 0, _settingLabel = _settingName)
 	const lbl = createDivCss2Label(`lbl${_settingName}`, g_lblNameObj[_settingLabel], {
 		x: -5, y: _adjY, w: 110, pointerEvents: C_DIS_AUTO,
 	}, `settings_${_settingName}`);
-	lbl.title = g_msgObj[`${_settingName.charAt(0).toLowerCase()}${_settingName.slice(1)}`];
+	const msgKey = `${_settingName.charAt(0).toLowerCase()}${_settingName.slice(1)}`;
+	attachHelp(lbl, g_msgObj[msgKey], { title: g_lblNameObj[_settingLabel], stateKey: msgKey });
 	return lbl;
 };
 
+/**
+ * 要素にヘルプを付与する
+ * - 短文: 従来どおり title のみ
+ * - 長文: title は1行目のみ。クリックで全文オーバーレイを表示
+ * @param {HTMLElement} _elem
+ * @param {string} _msg g_msgObj の文字列(文面はユーザが上書き可能なため、構造は仮定しない)
+ * @param {string} [object.title=''] オーバーレイの見出し
+ * @param {string} [object.stateKey=''] 現在値の突き合わせ先 (g_stateObj のキー)
+ */
+const attachHelp = (_elem, _msg, { title = ``, stateKey = `` } = {}) => {
+	if (!hasVal(_msg)) return;
+	const longFlg = isLongHelp(_msg);
+	if (!longFlg && g_helpPreviewDefs[stateKey] === undefined) {
+		_elem.title = _msg;
+		return;
+	}
+	_elem.title = longFlg ? `${_msg.split(/\r?\n/)[0]} …` : _msg;
+	_elem.style.cursor = `help`;
+	g_handler.addListener(_elem, `click`, () => openHelpOverlay(title, _msg, stateKey));
+};
+
+/**
+ * ヘルプ文面を行ごとに分解する
+ * `[名前] 説明` 形式の行は選択肢行、それ以外は通常の文として扱う
+ * @param {string} _msg
+ * @returns {{ name?: string, desc?: string, text?: string }[]}
+ */
+const parseHelpLines = _msg => _msg.split(/\r?\n/).map(line => {
+	const m = line.match(/^\[(.+?)\]\s*(.*)$/);
+	return m ? { name: m[1], desc: m[2] } : { text: line };
+});
+
+/**
+ * 詳細ヘルプのオーバーレイを開く
+ * @param {string} _title
+ * @param {string} _msg
+ * @param {string} _stateKey
+ */
+const openHelpOverlay = (_title, _msg, _stateKey) => {
+	const divRoot = document.getElementById(`divRoot`);
+	if (!divRoot || document.getElementById(`helpOverlay`) !== null) return;
+	if (![`option`, `exSetting`, `settingsDisplay`].includes(g_currentPage)) return;
+
+	// 現在値は、g_currentPage を切り替える前に取得する(getStgDetailName が画面名を参照するため)
+	const sub = g_helpPreviewDefs[_stateKey]?.sub || (_stateKey + `Type`);
+	const subList = sub !== undefined ? (g_settings[`${sub}s`] ?? []) : [];
+	const currentVals = [g_stateObj[_stateKey], ...(subList.length > 0 ? [g_stateObj[sub]] : [])];
+	const currentNames = currentVals.flatMap(val => [val, getStgDetailName(val)]);
+	const optNames = new Map([...(g_settings[`${_stateKey}s`] ?? []), ...subList]
+		.map(val => [val, [val, getStgDetailName(val)]]));
+
+	// Typeがある設定は、本体の説明文の後にTypeの説明文を続ける
+	const helpMsg = [_msg, ...(subList.length > 0 ? [g_msgObj[sub]] : [])].filter(hasVal).join(`\n\n`);
+	const rowElms = [];
+	const bright = g_headerObj.baseBrightFlg;
+
+	g_helpPrevPage = g_currentPage;
+	g_currentPage = `helpOverlay`;
+
+	const overlay = createEmptySprite(divRoot, `helpOverlay`, {
+		w: g_sWidth, h: g_sHeight, background: bright ? `#eeeeeeee` : `#111111ee`, pointerEvents: C_DIS_AUTO,
+	});
+	// オーバーレイ自身(背景)をクリックしたときだけ閉じる。子要素(隠しボタン等)のクリックは対象外
+	g_handler.addListener(overlay, `click`, evt => {
+		if (evt.target === overlay) {
+			closeHelpOverlay();
+		}
+	});
+
+	// プレビューがある設定は、本文の下にプレビュー領域を確保する
+	const previewH = g_helpPreviewDefs[_stateKey] === undefined ? 0 : Math.round(g_sHeight * g_limitObj.helpPreviewRate);
+
+	// 本文(スクロール可)。本文内のクリックでは閉じない
+	const body = createEmptySprite(overlay, `helpBody`, {
+		x: 30, y: 60, w: g_sWidth - 60, h: g_sHeight - 90 - (previewH > 0 ? previewH + 10 : 0),
+		overflowY: `auto`, pointerEvents: C_DIS_AUTO,
+	});
+	g_handler.addListener(body, `click`, evt => evt.stopPropagation());
+
+	parseHelpLines(helpMsg).forEach(line => {
+		const row = document.createElement(`div`);
+		Object.assign(row.style, {
+			fontFamily: getBasicFont(), fontSize: wUnit(14), lineHeight: `1.1`, textAlign: `left`,
+			whiteSpace: `normal`, wordBreak: `break-word`, padding: `2px 6px`,
+			color: bright ? `#222222` : `#eeeeee`,
+		});
+		if (line.name === undefined) {
+			row.textContent = line.text;
+			if (line.text === ``) row.style.height = `0.8em`;
+		} else {
+			const nameList = line.name.split(`/`).map(name => name.trim());
+			const isCurrent = nameList.some(name => currentNames.includes(name));
+			const nameElm = document.createElement(`span`);
+			const descElm = document.createElement(`span`);
+			nameElm.textContent = `[${line.name}]`;
+			nameElm.style.fontWeight = `bold`;
+			descElm.textContent = line.desc;
+			Object.assign(row.style, {
+				display: `grid`, gridTemplateColumns: `10em 1fr`, columnGap: `0.8em`,
+				borderLeft: `3px solid ${isCurrent ? `#66aaff` : `transparent`}`,
+			});
+			row.append(nameElm, descElm);
+			rowElms.push({ nameList, row });
+		}
+		body.appendChild(row);
+	});
+
+	// 説明文の選択行 (背景) をプレビューのカーソルに追従させる
+	const markHelpRows = (_vals, _focus = 0) => {
+		const names = _vals.flatMap(val => optNames.get(val) ?? [val]);
+		const focusNames = optNames.get(_vals[_focus]) ?? [_vals[_focus]];
+		rowElms.forEach(({ nameList, row }) => {
+			const on = nameList.some(name => names.includes(name));
+			row.style.background = on ? `rgba(80,140,255,0.25)` : ``;
+			if (nameList.some(name => focusNames.includes(name))) {
+				// 本文がスクロールする場合は、選択行が見える位置へ寄せる
+				const [top, bottom] = [row.offsetTop, row.offsetTop + row.offsetHeight];
+				if (top < body.scrollTop) {
+					body.scrollTop = top;
+				} else if (bottom > body.scrollTop + body.clientHeight) {
+					body.scrollTop = bottom - body.clientHeight;
+				}
+			}
+		});
+	};
+	markHelpRows(currentVals);
+	g_helpSelectHook = markHelpRows;
+
+	// 上下キー: プレビューの選択肢移動、または本文のスクロール
+	const moveHelp = _dir => {
+		if (previewH > 0) {
+			g_helpPreviewMove(_dir);
+		} else {
+			body.scrollTop += _dir * 32;
+		}
+	};
+
+	multiAppend(overlay,
+		createDivCss2Label(`lblHelpTitle`, _title, { x: 0, y: 15, w: g_sWidth, h: 30, siz: 20 }),
+		createCss2Button(`btnHelpClose`, g_lblNameObj.b_back, () => true, {
+			x: g_btnX() + 30, y: 15, w: 100, h: 30, siz: 14, resetFunc: () => closeHelpOverlay(),
+		}, g_cssObj.button_Back),
+
+		// 選択肢の前後移動 (ショートカットキー専用の隠しボタン)
+		createCss2Button(`btnHelpPrev`, ``, () => true, {
+			x: 0, y: 0, w: 0, h: 0, opacity: 0, resetFunc: () => moveHelp(-1),
+		}, g_cssObj.button_Mini),
+		createCss2Button(`btnHelpNext`, ``, () => true, {
+			x: 0, y: 0, w: 0, h: 0, opacity: 0, resetFunc: () => moveHelp(1),
+		}, g_cssObj.button_Mini),
+
+		// 操作対象の列の切り替え (本体 / Type)
+		createCss2Button(`btnHelpLeft`, ``, () => true, {
+			x: 0, y: 0, w: 0, h: 0, opacity: 0, resetFunc: () => g_helpPreviewColumn(-1),
+		}, g_cssObj.button_Mini),
+		createCss2Button(`btnHelpRight`, ``, () => true, {
+			x: 0, y: 0, w: 0, h: 0, opacity: 0, resetFunc: () => g_helpPreviewColumn(1),
+		}, g_cssObj.button_Mini),
+	);
+	createScText(btnHelpClose, `HelpClose`, { displayName: `helpOverlay`, targetLabel: `btnHelpClose`, x: -5 });
+	if (previewH > 0) {
+		makeHelpPreview(overlay, _stateKey, g_sHeight - 30 - previewH, previewH);
+	}
+	// ユーザカスタムイベント(ヘルプ表示)
+	safeExecuteCustomHooks(`g_customJsObj.helpOverlay`, g_customJsObj.helpOverlay);
+
+	setShortcutEvent(g_currentPage, () => true, { displayFlg: false });
+};
+
+/**
+ * 詳細ヘルプのオーバーレイを閉じ、元の画面のショートカットを復帰する
+ */
+const closeHelpOverlay = () => {
+	const overlay = document.getElementById(`helpOverlay`);
+	if (overlay === null) return;
+	g_helpPreviewStop();
+	g_helpSelectHook = _val => true;
+	deleteChildspriteAll(`helpOverlay`);
+	overlay.remove();
+	g_currentPage = g_helpPrevPage;
+	setShortcutEvent(g_currentPage, () => true, {
+		displayFlg: false, dfEvtFlg: g_currentPage !== `settingsDisplay`,
+	});
+};
+
+/** 詳細ヘルプを開く直前のページ名 */
+let g_helpPrevPage = ``;
+
+/** プレビューの選択が変わったときに、説明文の選択行を更新する処理 (ヘルプ表示中のみ差し替わる) */
+let g_helpSelectHook = _val => true;
+
+/**
+ * 詳細ヘルプを出すべき長文かどうかの判定
+ * @param {string} _msg
+ * @returns {boolean}
+ */
+const isLongHelp = _msg =>
+	_msg.split(/\r?\n/).length - 1 >= g_limitObj.helpLongLines || _msg.length > g_limitObj.helpLongChars;
+
+/*-----------------------------------------------------------*/
+/* 詳細ヘルプ内プレビュー */
+/*-----------------------------------------------------------*/
+
+/**
+ * 詳細ヘルプ内でプレビューを出す設定
+ * - キー名は g_stateObj のキー名 (選択肢は g_settings[`${key}s`] を使用)
+ * - splitLayer: 右半分のレーンを逆スクロール(レイヤー1)側に配置する
+ * - currentKey: サンプルキーではなく実際のキーに合わせてマッピングする
+ *               (StepArea, Swappingは実際のキーには非対応)
+ * - frzUse    : サンプルでフリーズアローを使用するかどうか
+ * - sub       : 派生する設定 (Typeなど)。選択肢の列を2列目に追加する
+ */
+const g_helpPreviewDefs = {
+	motion: {},
+	scroll: { currentKey: true },
+	appearance: { splitLayer: true },
+	playWindow: { sub: `playWindowType` },
+	stepArea: {},
+	shaking: { splitLayer: true },
+	frzReturn: { sub: `frzReturnType` },
+	effect: { frzUse: true, splitLayer: true },
+	swapping: { frzUse: true },
+};
+
+/**
+ * StepAreaプレビュー用のレーン配置 (4レーン分のレイヤー番号。偶数: 通常スクロール、奇数: 逆スクロール)
+ * - キー非依存のため、サンプル用に定義
+ */
+const g_helpStepAreaLayouts = {
+	Default: [0, 0, 0, 0],
+	Halfway: [0, 0, 1, 1],
+	'2Step': [0, 0, 2, 2],
+	Mismatched: [0, 0, 1, 1],
+	'R-Mismatched': [0, 0, 1, 1],
+	'X-Flower': [0, 0, 2, 2],
+	'Alt-Crossing': [0, 2, 0, 2],
+};
+
+/**
+ * Swappingプレビュー用のレーン配置
+ */
+const g_helpSwappingLayouts = {
+	OFF: [0, 1, 2, 3],
+	InnerSwap: [0, 2, 1, 3],
+	OuterSwap: [3, 1, 2, 0],
+	Mirror: [3, 2, 1, 0],
+	'Mirror+': [3, 2, 1, 0],
+};
+
+/** プレビューの停止処理 (プレビュー表示中のみ差し替わる) */
+let g_helpPreviewStop = () => true;
+
+/** プレビューの選択肢を前後へ動かす処理 (プレビュー表示中のみ差し替わる) */
+let g_helpPreviewMove = _dir => true;
+
+/** プレビューの操作対象の列を切り替える処理 (-1: 本体、1: Type。プレビュー表示中のみ差し替わる) */
+let g_helpPreviewColumn = _dir => true;
+
+/**
+ * 詳細ヘルプ内プレビューの作成
+ * @param {HTMLDivElement} _parent オーバーレイ
+ * @param {string} _key g_helpPreviewDefs のキー
+ * @param {number} _top 配置Y座標
+ * @param {number} _height 領域の高さ
+ */
+const makeHelpPreview = (_parent, _key, _top, _height) => {
+	const def = g_helpPreviewDefs[_key];
+	const optList = g_settings[`${_key}s`];
+	if (def === undefined || optList === undefined || document.getElementById(`mainSprite`) !== null) {
+		return;
+	}
+	const playH = g_headerObj.playingHeight || g_sHeight;
+	const subList = def.sub !== undefined ? g_settings[`${def.sub}s`] : undefined;
+	const subUse = subList !== undefined;
+	const colW = subUse ? 90 : 120;
+	const chipW = subUse ? colW * 2 + 6 : colW;   // 選択肢ボタン列の全体幅 (Typeがある場合は2列) 	
+	const areaW = g_sWidth - 60;
+
+	// レーン定義: Scrollのみ現在選択中のキー・パターンの定義を使用 (他は4レーン固定)
+	const tkObj = def.currentKey === true ? getKeyInfo() : null;
+	const useKey = tkObj !== null && tkObj.keyNum > 0;
+	const keyCtrlPtn = useKey ? tkObj.keyCtrlPtn : ``;
+	const laneNum = useKey ? tkObj.keyNum : 4;
+	const laneW = (useKey ? g_keyObj[`blank${keyCtrlPtn}`] : null) ?? g_keyObj.blank_def;
+	const keyPos = useKey ? g_keyObj[`pos${keyCtrlPtn}`] : null;
+
+	// 表示するレーン (キースイッチがあるキーは、選択中のキーグループのレーンのみ)
+	const configKeyGroupList = useKey
+		? (g_headerObj.keyGroupOrder?.[g_stateObj.scoreId] ?? g_keyObj[`keyGroupOrder${keyCtrlPtn}`] ?? tkObj.keyGroupList)
+		: [];
+	const activeGroup = configKeyGroupList[g_keycons.keySwitchNum] ?? configKeyGroupList[0];
+	const laneVisible = [...Array(laneNum).keys()].map(j =>
+		!useKey || configKeyGroupList.length <= 1 || (tkObj.keyGroupMaps[j]?.includes(activeGroup) ?? true));
+	const visibleLanes = [...Array(laneNum).keys()].filter(j => laneVisible[j]);
+	if (visibleLanes.length === 0) {
+		visibleLanes.push(...Array(laneNum).keys());   // 該当レーンが無い場合は全て表示
+		laneVisible.fill(true);
+	}
+
+	// 段 (下段: pos が divideCnt を超えるレーン) と、中央からのX座標差分
+	// prepareScoreData の stdPos と同じ式。下段は既定で逆スクロールになる
+	const laneLower = [...Array(laneNum).keys()].map(j => useKey && keyPos[j] > tkObj.divideCnt);
+	const laneOffsets = [...Array(laneNum).keys()].map(j => useKey
+		? laneW * (keyPos[j] - ((laneLower[j] ? tkObj.posMax : 0) + tkObj.divideCnt) / 2)
+		: (j - (laneNum - 1) / 2) * laneW);
+
+	// レイヤー数 (layerGroup 指定のあるキーは4を超える)
+	const baseLayers = useKey ? (g_keyObj[`layerGroup${keyCtrlPtn}`] ?? []) : [];
+	const layerCnt = Math.max(4, (Math.max(0, ...baseLayers) + 1) * 2);
+
+	// キーが多い場合はフレームを広げ、縮小率で収める
+	const halfSpan = Math.max(...laneOffsets.map(Math.abs)) + C_ARW_WIDTH / 2;
+	const playW = Math.max(g_headerObj.playingWidth || g_sWidth, Math.ceil(halfSpan * 2) + 60);
+	const rate = Math.min(g_limitObj.helpPreviewMaxRate, _height / playH, (areaW - chipW - 15) / playW);
+	const viewW = Math.round(playW * rate);
+	const baseX = Math.max(Math.round((areaW - viewW - chipW - 15) / 2), 0);
+
+	// 領域内のクリックでオーバーレイが閉じないようにする
+	const area = createEmptySprite(_parent, `helpPreview`, {
+		x: 30, y: _top, w: areaW, h: _height, pointerEvents: C_DIS_AUTO,
+	});
+	g_handler.addListener(area, `click`, evt => evt.stopPropagation());
+
+	// ---------------------------------------------------
+	// ミニプレイ画面 (縮小表示)
+	const scaler = createEmptySprite(area, `pvScale`, {
+		x: baseX, y: 0, w: playW, h: playH, transform: `scale(${rate})`, transformOrigin: `top left`,
+	});
+	const pvFrame = createEmptySprite(scaler, `pvFrame`, {
+		w: playW, h: playH, background: g_headerObj.baseBrightFlg ? `#eeeeee` : `#111111`,
+		border: `1px solid #444444`, boxSizing: `border-box`, overflow: `hidden`,
+		perspective: `1400px`, perspectiveOrigin: `center 60%`,
+	});
+
+	// g_shakingFunc などが決め打ちで参照する id (設定画面には存在しないためここで作る)
+	const spriteIds = [`mainSprite`, `infoSprite`, `judgeSprite`];
+	const mainSprite = createEmptySprite(pvFrame, `mainSprite`, { w: playW, h: playH });
+
+	// レイヤー (StepAreaで最大4レイヤー)。ゲーム側と同じ id でステップ・矢印・フリーズヒット用スプライトを持つ
+	const stepSprites = [], arrowSprites = [], frzHitSprites = [];
+	for (let j = 0; j < layerCnt; j++) {
+		const layer = createEmptySprite(mainSprite, `mainSprite${j}`, { w: playW, h: playH });
+		stepSprites.push(createEmptySprite(layer, `stepSprite${j}`, { w: playW, h: playH }));
+		arrowSprites.push(createEmptySprite(layer, `arrowSprite${j}`, { w: playW, h: playH }));
+		frzHitSprites.push(createEmptySprite(layer, `frzHitSprite${j}`, { w: playW, h: playH }));
+		spriteIds.push(`mainSprite${j}`, `stepSprite${j}`, `arrowSprite${j}`, `frzHitSprite${j}`);
+	}
+	const infoSprite = createEmptySprite(pvFrame, `infoSprite`, { w: playW, h: playH });
+	const judgeSprite = createEmptySprite(pvFrame, `judgeSprite`, { w: playW, h: playH });
+	if (_key === `frzReturn`) {
+		mainSprite.style.transformOrigin = `center 55%`;
+		mainSprite.style.transformStyle = `preserve-3d`;
+	}
+
+	// レーン、ステップゾーン (4レーン。splitLayer時は右2レーンを逆スクロール側へ)
+	const stepY = C_STEP_Y;
+	const revStepY = playH - C_STEP_Y - C_ARW_WIDTH;
+	const baseRtns = useKey
+		? (g_keyObj[`stepRtn${keyCtrlPtn}`] ?? Array(laneNum).fill(0))
+		: [0, -90, 90, 180];
+	let rtnOffset = 0;   // SideScroll時はゲーム側と同様に矢印を90度回転する
+	// 矢印名 (onigiri等の文字列) は加算しない
+	const getRtn = j => rtnOffset === 0 ? baseRtns[j] : baseRtns[j] + rtnOffset;
+	const colors = useKey
+		? (g_keyObj[`color${keyCtrlPtn}`] ?? []).map(c => g_headerObj.setColor?.[c] ?? g_dfColorObj.setColorType1[c] ?? `#ffffff`)
+		: [0, 1, 3, 4].map(j => g_dfColorObj.setColorType1[j]);
+	const laneX = j => Math.round(laneOffsets[j] + (playW - C_ARW_WIDTH) / 2);
+	const getLaneInfo = laneIdxs => laneIdxs.map(j => ({ x: laneX(j), layer: 0, dir: 1, stepTop: stepY }));
+
+	// レーンの配置 (layer / dir / stepTop は assignLanes で設定)
+	let laneInfo = getLaneInfo([...Array(laneNum).keys()]);
+	let stepElms = laneInfo.map((lane, j) =>
+		createColorObject2(`pvStep${j}`, { x: lane.x, y: stepY, rotate: getRtn(j) }, g_cssObj.main_stepDefault));
+
+	// ヒットモーション用の要素 (ゲーム側の stepHit と同じ位置・大きさ)
+	const hitPos = g_lblPosObj.stepHit;
+	const hitCnts = Array(laneNum).fill(0);
+	const makeHitElms = () => laneInfo.map((lane, j) => createColorObject2(`pvStepHit${j}`, {
+		...hitPos, x: lane.x + hitPos.x, y: stepY + hitPos.y, rotate: getRtn(j), styleName: `StepHit`, opacity: 0,
+	}, g_cssObj.main_stepDefault));
+	let hitElms = makeHitElms();
+
+	// フリーズアローのヒット表示 (ゲーム側の frzHit と同じ構成。先頭の矢印位置のみ光らせる)
+	const frzHitFrames = 20;
+	const frzHitColor = g_dfColorObj.frzColorType1[0][2];
+	const frzHitCnts = Array(laneNum).fill(0);
+	const makeFrzHitElms = () => laneInfo.map((lane, j) => {
+		const root = createEmptySprite(frzHitSprites[0], `pvFrzHit${j}`, {
+			x: lane.x, y: stepY, w: C_ARW_WIDTH, h: C_ARW_WIDTH, opacity: 0,
+		});
+		if (isNaN(parseFloat(baseRtns[j]))) {
+			multiAppend(root,
+				createColorObject2(`pvFrzHitShadow${j}`, { rotate: getRtn(j), styleName: `Shadow` }, g_cssObj.main_objShadow),
+				createColorObject2(`pvFrzHitTop${j}`, { background: frzHitColor, rotate: getRtn(j) }),
+			);
+		} else {
+			root.appendChild(createColorObject2(`pvFrzHitTop${j}`, {
+				...g_lblPosObj.frzHitTop, rotate: getRtn(j), styleName: `Shadow`,
+			}, g_cssObj.main_frzHitTop));
+		}
+		return root;
+	});
+	let frzHitElms = makeFrzHitElms();
+
+	const assignSwapping = _option => {
+		laneInfo = getLaneInfo(g_helpSwappingLayouts[_option] ?? [...Array(laneNum).keys()]);
+		laneInfo.forEach((lane, j) => {
+			document.getElementById(`pvStep${j}`)?.remove();
+			document.getElementById(`pvStepHit${j}`)?.remove();
+			document.getElementById(`pvFrzHit${j}`)?.remove();
+		});
+		stepElms = laneInfo.map((lane, j) =>
+			createColorObject2(`pvStep${j}`, { x: lane.x, y: stepY, rotate: getRtn(j) }, g_cssObj.main_stepDefault));
+		hitElms = makeHitElms();
+		frzHitElms = makeFrzHitElms();
+	};
+	const assignLanes = layout => laneInfo.forEach((lane, j) => {
+		lane.layer = layout[j];
+		lane.dir = lane.layer % 2 === 0 ? 1 : -1;
+		lane.stepTop = lane.dir === 1 ? stepY : revStepY;
+		stepElms[j].style.top = wUnit(lane.stepTop);
+		stepElms[j].style.display = laneVisible[j] ? `` : C_DIS_NONE;
+		stepSprites[lane.layer].appendChild(stepElms[j]);
+		hitElms[j].style.top = wUnit(lane.stepTop + hitPos.y);
+		stepSprites[lane.layer].appendChild(hitElms[j]);
+		frzHitElms[j].style.top = wUnit(lane.stepTop);
+		frzHitSprites[lane.layer].appendChild(frzHitElms[j]);
+	});
+
+	// ライフゲージ、判定キャラクタ (画面全体を揺らす設定の確認用)
+	multiAppend(infoSprite,
+		createDivCss2Label(`pvLifeBack`, ``, g_lblPosObj.previewLifeBack, g_cssObj.life_Background),
+		createDivCss2Label(`pvLifeBar`, ``, g_lblPosObj.previewLifeBar, g_cssObj.life_Cleared),
+	);
+	const jdgPos = { y: Math.round(playH / 2 - 60), w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight, siz: g_limitObj.jdgCharaSiz };
+	multiAppend(judgeSprite,
+		createDivCss2Label(`pvChara`, g_lblNameObj.j_ii, { ...jdgPos, x: Math.round(playW / 2 - 220) }, g_cssObj.common_ii),
+		createDivCss2Label(`pvCombo`, `5 Combo!!`, { ...jdgPos, x: Math.round(playW / 2 - 50) }, g_cssObj.common_comboJ),
+	);
+
+	// ---------------------------------------------------
+	// プレビュー状態
+	const noteInterval = Math.max(8, Math.round(24 * 4 / visibleLanes.length));
+	const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+	let stride = Math.max(Math.round(visibleLanes.length * 0.6), 1);
+	while (gcd(stride, visibleLanes.length) !== 1) stride++;
+	let selected = ``;
+	let subSelected = subUse ? (subList.includes(g_stateObj[def.sub]) ? g_stateObj[def.sub] : subList[0]) : ``;
+	let activeCol = 0;   // 上下キーの対象列 (0: 本体、1: Type)
+	let frameCnt = 0;
+	let noteCnt = 0;
+	let autoCnt = 0;   // 自動切替までの経過フレーム数
+	let timerId = null;
+	let notes = [];
+	let dist = [];
+	let bStart = 0;
+	let effectCls = { arrow: ``, frz: ``, frzArrow: `` };
+	let filterElms = [];   // Appearanceのフィルターバー・ラベル
+	const frzLen = 90;   // Effectプレビュー用フリーズアローの長さ(px)
+	const work = { drunkXFlg: true, drunkYFlg: true, drunkAxisFlg: false, drunkRotateFlg: false };
+	const frz = { seq: null, seqNo: 0, axes: [], start: 0, next: 0 };
+
+	/** 付与したtransformの初期化 */
+	const resetTransforms = () => spriteIds.forEach(id => {
+		delete g_transforms[id];
+		const elm = document.getElementById(id);
+		if (elm !== null) {
+			elm.style.transform = ``;
+			elm.style.opacity = ``;
+		}
+	});
+
+	const clearNotes = () => {
+		notes.forEach(note => note.el.remove());
+		notes = [];
+		hitCnts.fill(0);
+		frzHitCnts.fill(0);
+		hitElms.forEach(elm => elm.style.opacity = 0);
+		frzHitElms.forEach(elm => elm.style.opacity = 0);
+	};
+
+	/** ヒットモーション (矢印のみ。自動判定時と同様、イイ判定の見た目で表示) */
+	const hitArrow = j => {
+		const hit = hitElms[j];
+		hit.style.opacity = 0.75;
+		hit.classList.value = ``;
+		hit.classList.add(g_cssObj.main_stepIi);
+		hitCnts[j] = C_FRM_HITMOTION;
+	};
+
+	/** フリーズアローのヒット表示 (先頭の矢印位置のみ。長さは待たず、一定フレームで消す) */
+	const hitFrz = j => {
+		frzHitElms[j].style.opacity = 0.9;
+		frzHitCnts[j] = frzHitFrames;
+	};
+
+	/**
+	 * Effectのクラス名取得
+	 * - g_effectFunc は g_workObj.*CssMotions へ書き込むため、呼び出し中だけ空配列へ差し替え、
+	 *   ユーザ個別指定のモーションを排除したうえで元に戻す
+	 */
+	const getEffectClasses = opt => {
+		const keys = [`arrowCssMotions`, `frzCssMotions`, `frzArrowCssMotions`];
+		const org = {};
+		const result = { arrow: ``, frz: ``, frzArrow: `` };
+		keys.forEach(key => {
+			org[key] = g_workObj[key];
+			g_workObj[key] = [];
+		});
+		try {
+			g_effectFunc.get(opt)();
+			result.arrow = g_workObj.arrowCssMotions[0] ?? ``;
+			result.frz = g_workObj.frzCssMotions[0] ?? ``;
+			result.frzArrow = g_workObj.frzArrowCssMotions[0] ?? ``;
+		} catch (e) {
+			console.warn(`Effect preview error: ${e}`);
+		} finally {
+			keys.forEach(key => g_workObj[key] = org[key]);
+		}
+		return result;
+	};
+
+	/** StepArea: ゲーム側の関数を、プレビュー用の状態に一時的に差し替えて実行 */
+	const runStepArea = opt => {
+		const orgState = {
+			layerNum: g_stateObj.layerNum, layerNumDf: g_stateObj.layerNumDf, appearance: g_stateObj.appearance,
+		};
+		const orgFlatFlg = g_workObj.orgFlatFlg;
+		Object.assign(g_stateObj, {
+			layerNumDf: 2, layerNum: g_settings.stepAreaLayers.includes(opt) ? 4 : 2, appearance: `Visible`,
+		});
+		g_workObj.orgFlatFlg = false;
+		try {
+			g_stepAreaFunc.get(opt)();
+		} finally {
+			Object.assign(g_stateObj, orgState);
+			g_workObj.orgFlatFlg = orgFlatFlg;
+		}
+	};
+
+	/**
+	 * Appearance: フィルター範囲の切り抜きとフィルターバーの表示
+	 * - changeAppearanceFilter は g_hidSudObj.filterPos の書き換えやカスタムフックの実行を伴うため使わず、
+	 *   切り抜き範囲の考え方 (g_hidSudObj の上下対応) のみ同じにして自前で設定する
+	 */
+	const applyAppearance = opt => {
+		arrowSprites.forEach(sprite => sprite.style.clipPath = ``);
+		filterElms.forEach(elm => elm.remove());
+		filterElms = [];
+		const defaultFilterPos = 30;
+
+		const hidSudFlg = opt === `Hid&Sud+`;
+		let num = g_appearanceRanges.includes(opt) ? defaultFilterPos : (g_hidSudObj.filterPosDefault[opt] ?? 0);
+		if (hidSudFlg) {
+			num = Math.min(num, 50);
+		}
+		if (num <= 0) return;
+
+		const numPlus = hidSudFlg ? num : 0;
+		const topNum = g_hidSudObj[opt];
+		const edges = new Set();
+		[0, 1].forEach(s => {
+			const [cutTop, cutBottom] = s === topNum ? [num, numPlus] : [numPlus, num];
+			arrowSprites[s].style.clipPath = `inset(${cutTop}% 0% ${cutBottom}% 0%)`;
+			if (cutTop > 0) edges.add(cutTop);
+			if (cutBottom > 0) edges.add(100 - cutBottom);
+		});
+
+		const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
+		[...edges].forEach((pct, i) => {
+			const bar = createColorObject2(`pvFilterBar${i}`, {
+				x: 0, y: Math.round(playH * pct / 100), w: playW - 50, h: 4, styleName: `lifeBar`, opacity: 1,
+			}, filterCss);
+			mainSprite.appendChild(bar);
+			filterElms.push(bar);
+		});
+
+		// 割合の表示 (最も上のバーの下、右端)
+		const viewText = `${num}%` + (g_appearanceRanges.includes(opt) ? `↑↓` : ``);
+		const view = createDivCss2Label(`pvFilterView`, viewText, {
+			x: playW - 120, y: Math.round(playH * Math.min(...edges) / 100) + 6, w: 100, h: 26, siz: 24, align: C_ALIGN_RIGHT,
+		});
+		mainSprite.appendChild(view);
+		filterElms.push(view);
+	};
+
+	/** Scroll: 選択中のキー・パターンのスクロール方向 (1: 通常、-1: 逆) をレイヤー番号 (0, 1) へ変換 */
+	const getScrollLayout = opt => {
+		const dirs = g_keyObj[`scrollDir${keyCtrlPtn}`]?.[opt] ?? Array(laneNum).fill(1);
+		return [...Array(laneNum).keys()].map(j => (baseLayers[j] || 0) * 2 +
+			((laneLower[j] ? 1 : 0) + (dirs[j] === 1 ? 0 : 1) + (g_stateObj.reverse === C_FLG_OFF ? 0 : 1)) % 2);
+	};
+
+	/** Flat系のスクロール: ステップゾーンを帯状 (横線2本) に切り替える */
+	let flatElms = [];
+	const applyFlat = opt => {
+		flatElms.forEach(elm => elm.remove());
+		flatElms = [];
+		const flatFlg = _key === `scroll` && opt.endsWith(`Flat`);
+		stepElms.forEach((elm, j) => elm.style.display = (flatFlg || !laneVisible[j]) ? C_DIS_NONE : ``);
+		if (!flatFlg) return;
+
+		[...new Set(laneInfo.map(lane => lane.layer))].forEach(layer => {
+			const top = layer % 2 === 0 ? stepY : revStepY;
+			const h = g_stateObj.flatStepHeight;
+			[(C_ARW_WIDTH - h) / 2, (C_ARW_WIDTH + h) / 2].forEach((y, k) => {
+				const bar = createColorObject2(`pvFlatBar${layer}_${k}`, {
+					x: 25, y: top + y, w: playW - 50, h: 1, styleName: `lifeBar`, background: `#999999`
+				}, g_cssObj.life_Failed);
+				stepSprites[layer].appendChild(bar);
+				flatElms.push(bar);
+			});
+		});
+	};
+
+	/** Typeの選択値を、ゲーム側の関数が参照する g_stateObj へ一時的に差し替えて実行 (g_playWindowDir など) */
+	const withSub = func => {
+		if (!subUse) return func();
+		const org = g_stateObj[def.sub];
+		g_stateObj[def.sub] = subSelected;
+		try {
+			return func();
+		} finally {
+			g_stateObj[def.sub] = org;
+		}
+	};
+
+	/**
+	 * 選択肢の適用
+	 * - Motion: 「配列の15がステップゾーン上」として、ステップゾーンからの距離を逆算する
+	 *   distance(b) = Σ(speed + motion[i]), i = 16..b (b: 到達までの残りフレーム数)
+	 */
+	const applyOption = opt => {
+		selected = opt;
+		resetTransforms();
+		clearNotes();
+		effectCls = _key === `effect` ? getEffectClasses(opt) : { arrow: ``, frz: ``, frzArrow: `` };
+
+		assignSwapping(_key === `swapping` ? opt : null);
+		// レーンのレイヤー配置 (StepAreaは選択肢ごと、Shakingは右半分を逆スクロール側へ)
+		assignLanes((g_helpPreviewDefs[_key]?.currentKey ? getScrollLayout(opt) : null)
+			?? (_key === `stepArea` ? g_helpStepAreaLayouts[opt] : null)
+			?? (def.splitLayer ? [0, 0, 1, 1] : [0, 0, 0, 0])
+				.map(val => g_stateObj.reverse === C_FLG_OFF ? val : val ^ 1));
+		applyFlat(opt);
+		if (_key === `stepArea`) {
+			runStepArea(opt);
+		}
+		if (_key === `appearance`) {
+			applyAppearance(opt);
+		}
+
+		// SideScrollのみ矢印を90度回転 (ゲーム側の changeStepRtn と同じ符号)
+		rtnOffset = (_key === `playWindow` && opt === `SideScroll` && g_stateObj.rotateEnabled)
+			? 90 * (subSelected === C_FLG_REVERSE2 ? -1 : 1) : 0;
+		if (g_stateObj.rotateEnabled) {
+			laneInfo.forEach((lane, j) => {
+				if (typeof getRtn(j) === `number`) {
+					document.getElementById(`pvStep${j}`).style.transform = `rotate(${getRtn(j)}deg)`;
+					hitElms[j].style.transform = `rotate(${getRtn(j)}deg)`;
+					const frzHitTop = document.getElementById(`pvFrzHitTop${j}`);
+					if (frzHitTop !== null) {
+						frzHitTop.style.transform = `rotate(${getRtn(j)}deg)`;
+					}
+				}
+			});
+		}
+
+		// Motion用の加算フレーム数計算
+		const trace = g_motionFunc.get(_key === `motion` ? opt : C_FLG_OFF)(fillArray(101));
+		const distRate = _key === `motion` ? (g_settings.motionDistRates[g_settings.motions.indexOf(opt)] ?? 1) : 1;
+		const stretchRate = g_headerObj.stretchYRate?.[g_stateObj.scoreId] ?? 1;
+		const distY = Math.max(stretchRate, distRate) * (g_posObj.distY || (playH - C_STEP_Y));
+		const frameSpd = g_stateObj.speed * g_headerObj.baseSpeed * 2;
+		bStart = C_MOTION_STD_POS + Math.ceil(distY / frameSpd);
+		dist = [];
+		dist[C_MOTION_STD_POS] = 0;
+		for (let b = C_MOTION_STD_POS + 1; b <= bStart; b++) {
+			dist[b] = dist[b - 1] + frameSpd + (trace[b] || 0);
+		}
+		if (_key === `playWindow`) {
+			addTransform(`mainSprite`, `playWindow`, withSub(() => g_playWindowFunc.get(opt)()), g_transPriority.playWindow);
+		}
+		if (_key === `shaking`) {
+			Object.assign(work, { drunkXFlg: true, drunkYFlg: true, drunkAxisFlg: false, drunkRotateFlg: false });
+		}
+		if (_key === `frzReturn`) {
+			frz.seq = null;
+			frz.seqNo = 0;
+			frz.next = frameCnt + 30;
+		}
+	};
+
+	const spawnNote = () => {
+		const j = visibleLanes[(noteCnt * stride) % visibleLanes.length];
+		const lane = laneInfo[j];
+		const frzFlg = g_helpPreviewDefs[_key]?.frzUse && noteCnt % 4 === 2;
+		const len = frzFlg ? frzLen : 0;
+		noteCnt++;
+
+		const el = createEmptySprite(arrowSprites[lane.layer], `pvNote${noteCnt}`, {
+			x: lane.x, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH + len,
+		});
+		const sub = createEmptySprite(el, `pvSub${noteCnt}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH + len });
+
+		// setCssMotions と同様に、クラス付与と到達フレーム数に合わせたアニメーション時間を設定
+		const duration = `${(bStart - C_MOTION_STD_POS) / g_fps}s`;
+		const addEffect = (target, cls) => {
+			if (cls !== ``) {
+				target.classList.add(cls);
+				target.style.animationDuration = duration;
+			}
+		};
+
+		if (!frzFlg) {
+			sub.appendChild(createColorObject2(`pvNoteTop${noteCnt}`, { background: colors[j], rotate: getRtn(j) }));
+			addEffect(sub, effectCls.arrow);
+		} else {
+			const [normalColor, barColor] = g_dfColorObj.frzColorType1[0];
+			const makeArrowRoot = (_name, _y) => {
+				const root = createEmptySprite(sub, `pv${_name}Root${noteCnt}`, { x: 0, y: _y, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+				root.appendChild(createColorObject2(`pv${_name}${noteCnt}`, { background: normalColor, rotate: getRtn(j) }));
+				addEffect(root, effectCls.frzArrow);
+				return root;
+			};
+			sub.appendChild(createColorObject2(`pvBar${noteCnt}`, {
+				x: 5, y: C_ARW_WIDTH / 2 + (lane.dir === 1 ? 0 : -len), w: C_ARW_WIDTH - 10,
+				h: len, background: barColor, styleName: `frzBar`, opacity: 0.75,
+			}));
+			makeArrowRoot(`Top`, 0);
+			makeArrowRoot(`Btm`, lane.dir === 1 ? len : -len);
+			addEffect(sub, effectCls.frz);
+		}
+		const note = { el, lane, j, frzFlg, b: bStart };
+		placeNote(note);
+		notes.push(note);
+	};
+
+	const placeNote = note => {
+		const d = dist[note.b];
+		note.el.style.top = wUnit(note.lane.dir === 1 ? stepY + d : revStepY - d);
+	};
+
+	/** Shaking: ゲーム側の関数を、プレビュー用の状態に一時的に差し替えて実行 */
+	const runShaking = () => {
+		const orgWork = {};
+		Object.keys(work).forEach(key => orgWork[key] = g_workObj[key]);
+		const orgState = { layerNum: g_stateObj.layerNum, layerNumDf: g_stateObj.layerNumDf };
+		const orgFrame = g_scoreObj.baseFrame;
+
+		Object.assign(g_workObj, work);
+		Object.assign(g_stateObj, { layerNum: 2, layerNumDf: 2 });
+		g_scoreObj.baseFrame = frameCnt;
+		try {
+			g_shakingFunc.get(selected)();
+		} finally {
+			Object.keys(work).forEach(key => work[key] = g_workObj[key]);
+			Object.assign(g_workObj, orgWork);
+			Object.assign(g_stateObj, orgState);
+			g_scoreObj.baseFrame = orgFrame;
+		}
+	};
+
+	/** FrzReturn: 回転配列・回転軸はゲーム側の定義を使用し、一定間隔で自動実行 */
+	const runFrzReturn = () => {
+		if (selected === C_FLG_OFF) return;
+		if (frz.seq === null) {
+			if (frameCnt < frz.next) return;
+			const seqs = (g_frzReturnSeqFunc.get(subSelected) ?? g_frzReturnSeqFunc.get(`360deg`))();
+			frz.seq = seqs[frz.seqNo++ % seqs.length];
+			frz.axes = [...g_frzReturnFunc.get(selected)()].filter(Boolean);
+			frz.start = frameCnt;
+		}
+		const idx = Math.floor((frameCnt - frz.start) * 1000 / g_fps / 20);
+		if (idx >= frz.seq.length) {
+			frz.seq = null;
+			frz.next = frameCnt + 60;
+			delTransform(`mainSprite`, `frzReturn`);
+			mainSprite.style.opacity = 1;
+			return;
+		}
+		const deg = frz.seq[idx];
+		const rad360 = ((deg % 360) + 360) % 360;
+		const isBack = frz.axes.some(axis => (axis === `X` || axis === `Y`) && rad360 > 90 && rad360 < 270);
+		mainSprite.style.opacity = isBack ? 0.7 : 1;
+		addTransform(`mainSprite`, `frzReturn`,
+			frz.axes.map(axis => `rotate${axis}(${deg}deg)`).join(` `), g_transPriority.frzReturn);
+	};
+
+	const tick = () => {
+		if (document.getElementById(`pvFrame`) === null) {
+			stop();
+			return;
+		}
+		frameCnt++;
+		if (++autoCnt >= g_limitObj.helpPreviewAutoFrames && g_limitObj.helpPreviewAutoFrames > 0) {
+			autoCnt = 0;
+			moveOption(1);
+		}
+		if (frameCnt % noteInterval === 0) {
+			spawnNote();
+		}
+		notes = notes.filter(note => {
+			note.b--;
+			if (note.b <= C_MOTION_STD_POS) {
+				if (note.frzFlg) {
+					hitFrz(note.j);
+				} else {
+					hitArrow(note.j);
+				}
+				note.el.remove();
+				return false;
+			}
+			placeNote(note);
+			return true;
+		});
+
+		// ヒットモーションの消去 (一定フレームで非表示)
+		hitCnts.forEach((cnt, j) => {
+			if (cnt > 0 && --hitCnts[j] === 0) {
+				hitElms[j].style.opacity = 0;
+			}
+		});
+		frzHitCnts.forEach((cnt, j) => {
+			if (cnt > 0 && --frzHitCnts[j] === 0) {
+				frzHitElms[j].style.opacity = 0;
+			}
+		});
+		if (_key === `shaking` && frameCnt % 2 === 0) {
+			runShaking();
+		} else if (_key === `frzReturn`) {
+			runFrzReturn();
+		}
+		timerId = g_timerHandler.setTimeout(tick, 1000 / g_fps);
+	};
+
+	const stop = () => {
+		if (timerId !== null) {
+			g_timerHandler.clearTimeout(timerId);
+		}
+		timerId = null;
+		spriteIds.forEach(id => delete g_transforms[id]);
+		g_helpPreviewStop = () => true;
+		g_helpPreviewMove = _dir => true;
+		g_helpPreviewColumn = _dir => true;
+	};
+	g_helpPreviewStop = stop;
+
+	// ---------------------------------------------------
+	// 選択肢ボタン (本体の列と、Typeがある設定のみTypeの列)
+	const chipX = baseX + viewW + 15;
+	const colMain = createEmptySprite(area, `pvColMain`, { x: chipX, y: 0, w: colW, h: _height });
+	const colSub = subUse ? createEmptySprite(area, `pvColSub`, { x: chipX + colW + 6, y: 0, w: colW, h: _height }) : null;
+
+	const makeChips = (_list, _prefix, _onSelect, _title = ``) => {
+		const chipH = Math.min(20, Math.floor(_height / _list.length));
+		return _list.map((opt, i) =>
+			createCss2Button(`${_prefix}${i}`, getStgDetailName(opt), () => _onSelect(opt), {
+				x: 0, y: i * chipH, w: colW, h: chipH - 2, siz: 12, title: _title,
+			}, g_cssObj.button_Default));
+	};
+	const chips = makeChips(optList, `pvChip`, opt => selectMain(opt));
+	const subChips = subUse ? makeChips(subList, `pvSubChip`, opt => selectSub(opt), g_msgObj[def.sub] ?? ``) : [];
+	multiAppend(colMain, ...chips);
+	if (subUse) {
+		multiAppend(colSub, ...subChips);
+	}
+
+	const markChips = () => {
+		const mark = (_list, _chips, _current) => _chips.forEach((chip, i) => {
+			chip.classList.remove(g_cssObj.button_Default, g_cssObj.button_Setting);
+			chip.classList.add(_list[i] === _current ? g_cssObj.button_Setting : g_cssObj.button_Default);
+		});
+		mark(optList, chips, selected);
+		if (subUse) {
+			mark(subList, subChips, subSelected);
+			colSub.style.opacity = activeCol === 1 ? 1 : 0.5;   // 操作対象でない列は薄く表示
+		}
+		colMain.style.opacity = subUse && activeCol !== 0 ? 0.5 : 1;
+		g_helpSelectHook(subUse ? [selected, subSelected] : [selected], activeCol);
+		safeExecuteCustomHooks(`g_customJsObj.helpPreview`, g_customJsObj.helpPreview, _key, selected,
+			{ pvFrame, mainSprite, stepSprites, arrowSprites, playW, playH, sub: subSelected });
+	};
+
+	// 本体の選択（選択時は自動移動時間を2倍にする）
+	const selectMain = opt => {
+		autoCnt = -g_limitObj.helpPreviewAutoFrames;
+		activeCol = 0;
+		applyOption(opt);
+		markChips();
+	};
+
+	// Typeの選択 (本体がOFF/Defaultのときは、効果が見える基準の選択肢へ切り替える)
+	const selectSub = opt => {
+		autoCnt = -g_limitObj.helpPreviewAutoFrames;
+		activeCol = 1;
+		subSelected = opt;
+		const base = optList[1];
+		applyOption(selected === optList[0] && optList.includes(base) ? base : selected);
+		markChips();
+	};
+
+	// 上下キー: 操作対象の列の選択肢を前後に動かす (端では反対側へ循環)
+	const moveOption = _dir => {
+		applyOption(optList[nextPos(optList.indexOf(selected), _dir, optList.length)]);
+		markChips();
+	};
+	g_helpPreviewMove = _dir => {
+		if (subUse && activeCol === 1) {
+			selectSub(subList[nextPos(subList.indexOf(subSelected), _dir, subList.length)]);
+		} else {
+			autoCnt = -g_limitObj.helpPreviewAutoFrames;
+			moveOption(_dir);
+		}
+	};
+
+	// 左右キー: 操作対象の列を切り替える (←: 本体、→: Type)
+	g_helpPreviewColumn = _dir => {
+		if (!subUse) return;
+		activeCol = _dir > 0 ? 1 : 0;
+		markChips();
+	};
+
+	// 初期表示: 現在値 (OFF/Default の場合は最初の非OFFの選択肢)
+	const current = g_stateObj[_key];
+	applyOption(optList.includes(current) && current !== optList[0] ? current : (optList[1] ?? optList[0]));
+	markChips();
+	timerId = g_timerHandler.setTimeout(tick, 1000 / g_fps);
+};
+
 /**
  * 設定名の置き換え処理（未指定時は原則g_lblNameObjの値を使用、明示的な指定がある場合のみ元の名前を返却）
  * @param {string} _name 
@@ -3307,7 +4238,10 @@ const createGeneralSettingEx = (_spriteList, _name, { defaultList = [C_FLG_OFF],
 					funcEx();
 					createExpandedScView(_name);
 				},
-				title: g_msgObj[`${_name}Type`] ?? ``,
+				// 拡張ボタンの説明文表示は「拡張元」設定のヘルプが長い場合、詳細ヘルプ表示側で表示するため省略する
+				title: isLongHelp(g_msgObj[`${_name}`] ?? ``) || g_helpPreviewDefs[_name] !== undefined
+					? ``
+					: (g_msgObj[`${_name}Type`] ?? ``),
 			}, g_cssObj.button_Default, g_cssObj.button_RevON);
 
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "51.4.3",
+  "version": "52.1.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",