<div id="menu_save_wrapper">
    <!-- 閉じるボタン -->
    <div class="menu_item" style="float: right; margin: 20px 10px 0 0">
        <img class="menu_close" src="./tyrano/images/system/menu_button_close.png" />
    </div>

    <!-- スクロールボタン -->
    <div style="clear: both"></div>
    <img class="button_smart button_arrow_up" src="./tyrano/images/system/arrow_up.png" style="left: 670px; top: 20px" />
    <img class="button_smart button_arrow_down" src="./tyrano/images/system/arrow_down.png" style="left: 800px; top: 15px" />

    <!-- セーブデータリスト -->
    <!-- JsRender記法を使用 https://qiita.com/kurukuruz/items/f53a17d7e78dca8677b8 -->
    <div class="area_save_list">
        <ul class="save_list">
            {{for array_save}}
            <li class="save_display_area save_list_item" data-num="{{>num}}">
                <span class="save_list_item_thumb">
                    {{if img_data != ""}}
                    <img src="{{>img_data}}" />
                    {{/if}}
                </span>
                <span class="save_list_item_area">
                    <span class="save_list_item_date">{{:save_date}}</span>
                    <span class="save_list_item_text">{{:title}}</span>
                </span>
            </li>
            {{/for}}
        </ul>
    </div>

    <!-- 背景とタイトル画像 -->
    <img class="img_label img_label_save" src="./tyrano/images/system/label_save.png" />
    <img class="img_bg_base" src="./tyrano/images/system/bg_base.png" />

    <!-- ボタンホバー時に画像を変更する -->
    <script>
        $("#menu_save_wrapper .menu_item img").each((i, elm) => {
            const j_elm = $(elm);
            const original_src = j_elm.attr("src");
            const hover_src = original_src.replace(".png", "2.png");
            j_elm.hover(
                () => {
                    j_elm.attr("src", hover_src);
                },
                () => {
                    j_elm.attr("src", original_src);
                },
            );
        });
    </script>
</div>
