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

    <!-- セーブデータリスト -->
    <!-- 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_bg_base" src="./data/image/salo/baseS.jpg" />

    <!-- ボタンホバー時に画像を変更する -->
    <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", "h.png");
            j_elm.hover(
                () => {
                    j_elm.attr("src", hover_src);
                },
                () => {
                    j_elm.attr("src", original_src);
                },
            );
        });
    </script>
</div>
