<urandcel>
  <!-- 合計金額 -->
  <div class="row ctl-step-price">
    <p>
      ただいまの合計金額<big><strong class="total-price" data-total="price">{Number(custom_state.order_price).toLocaleString()}</strong></big>円<small>（税込）</small>
      <big><span class="glyphicon " aria-hidden="true"></span></big>　総重量
      <big><strong class="total-weight" data-total="weight">{Math.round(custom_state.order_weight).toLocaleString()}</strong></big>g<small>（目安）</small>
    </p>
  </div>

  <!-- ステップリスト -->
  <div class="ctl-step-progress">
    <div class="step-bg-line">
      <div class="ctl-step-current" data="{i=0}">
        <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>

        <div each="{step, key in master.disp_order}" class="current-slide">
          <!-- keyが5の場合に「6①」、keyが6の場合に「6②」、それ以外は通常のステップ -->
          <label for="radio-step-progress-{key + 1}">
            <input type="radio" name="step_current" value="{key + 1}" id="radio-step-progress-{key + 1}" class="radio-check" checked="{(key + 1) == 1}">
            <label for="radio-step-progress-{key + 1}" class="radio-check-label">
              <!-- key == 5のときに「6-①」、key == 6のときに「6-②」、それ以外は通常のステップ -->
              {key == 5 ? 'ステップ6-①' : key == 6 ? 'ステップ6-②' :key >= 7 ? 'ステップ' + (key) : 'ステップ' + (key + 1)}<br>
              {master.scene[step].name}
            </label>
          </label>
        </div>
        <!-- 完成ステップ -->
        <div class="current-slide">
          <label>
            <label class="radio-check-label" onclick="{customSample}" data-sample="urandcel">
              完成！<br>完成イメージへ
            </label>
          </label>
        </div>

        <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
      </div>
    </div>
  </div>

  <!-- 上側 -->
  <div id="ctl-current">

    <!-- ランドセルカスタム画像 -->
    <div class="text-center canvas-wrap">
      <canvas id="canvas" width="560" height="560"></canvas>
      <div class="spinner-canvas"></div>
      <h2 class="not-apply"><span class="label label-not-apply">シミュレーションに反映していません</span></h2>
    </div>

    <!-- アングルリスト -->
    <div id="ctl-angle" class="ctl-angle-current">
      <div class="btn-group" data-toggle="buttons">
        <virtual each="{angle, i in custom_angle}">
          <virtual if="{i != 3 && i != 5}">
            <label class="btn-angle {active: i == master.current.angle}" data-angle="{i}" onclick="{setAngle}">
              <input type="radio" name="angle" value="{i}" ref="{angle}" autocomplete="off" checked="{i == master.current.angle}">
              <img src="/assets/img/simulation/angle/btn_angle_urandcel_{i+1}.png" alt="{angle}">
              <p>{angle}</p>
            </label>
          </virtual>
        </virtual>
      </div>
    </div>

  </div>

  <!-- 下側 -->
  <div id="ctl-specification">

    <article id="ctl-step" class="row ctl-specification-step">

      <!-- 現在のステップ名 -->
      <nav class="ctl-step-navigation">
        <div class="text-center">
          <h3>
            <small>ステップ</small>
            <small if="{master.current.step <= 5}">{master.current.step}</small>
            <small if="{master.current.step == 6}">6-①</small>
            <small if="{master.current.step == 7}">6-②</small>
            <small if="{master.current.step >= 8}">{master.current.step - 1}</small>
            <i if="{master.scene[master.current.step]}">{master.scene[master.current.step].name}</i>
            <small if="{master.scene[master.current.step]}">{master.scene[master.current.step].suffix}</small>
          </h3>
        </div>
      </nav>

      <div class="ctl-step-detail swiper-container">
        <div class="swiper-wrapper">

          <!-- メインカラー -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.color].lead}" class="text-center">
                  {master.scene[master.arr_index.color].lead}
                </p>
              </div>

              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="row">
                  <div class="tab-content">
                    <!-- メインカラー -->
                    <div role="tabpanel" class="tab-pane fade in active" id="tab-2-1" data-init="{num = 0}">
                      <div class="item-list item-list-color swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.color].parts).length}">
                        <span class="prev-btn">
                          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        </span>
                        <virtual each="{value, i in master.scene[master.arr_index.color].parts}">
                          <div class="base-item" data-nth="{num += 1}">
                            <label for="radio-step-{master.arr_index.color}-{value.code}" class="base-guide">
                              <input type="radio" name="{master.scene[master.arr_index.color].id_name}" data-name="{master.scene[master.arr_index.color].code_name}" data-code="{value.code}" 
                                data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                                id="radio-step-{master.arr_index.color}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.color].id_name]}" onclick="{setColorId}" disabled="{value.stock == 1}">
                              <div class="tmb"><img src="{value.image}" class="pos_b img-responsive" alt="{value.name}" if="{value.image}"></div>
                              <label for="radio-step-{master.arr_index.color}-{value.code}" class="radio-check-label">
                                {value.name}
                                <virtual if="{value.caption}">
                                  <br>{value.caption}
                                </virtual>
                                <virtual if="{value.price != 0}">
                                  <br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円
                                </virtual>
                              </label>
                            </label>
                          </div>
                        </virtual>
                        <span class="next-btn">
                          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 実際の商品と色合いや仕様が異なる場合の注意書き -->
              <div class="col-xs-12">
                <p>実際の商品と色合いや仕様が異なる場合がございます。<br>色合いの確認は、実際の生地見本や商品ラインナップにてご確認ください。</p>
                <ul>
                  <li>商品の仕様は<a href="https://fuwarii.com/pages/order_urand" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                  <li>商品ラインナップページは<a href="https://fuwarii.com/collections/all" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                  <li>生地見本画像は<a href="https://fuwarii.com/cdn/shop/files/2025_school_bag_sample.pdf?v=9688617480650486700" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                </ul>
                <p> ※オーダーメイドランドセルはクーポン適応外です。</p>
                <p>&nbsp;</p>
              </div>
            </div>

            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.color].note}" class="text-left">{master.scene[master.arr_index.color].note}</p>
            </div>
          </div>

          <!-- コンビカラー -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.edge].lead}" class="text-center">
                  {master.scene[master.arr_index.edge].lead}
                </p>
              </div>

              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="row">
                  <div class="tab-content">
                    <!-- コンビカラー -->
                    <div role="tabpanel" class="tab-pane fade in active" id="tab-2-2" data-init="{num = 0}">
                      <div class="item-list item-list-color swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.edge].parts).length}">
                        <span class="prev-btn">
                          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        </span>
                        <virtual each="{value, i in master.scene[master.arr_index.edge].parts}">
                          <div class="base-item" data-nth="{num += 1}">
                            <label for="radio-step-{master.arr_index.edge}-{value.code}" class="base-guide">
                              <input type="radio" name="{master.scene[master.arr_index.edge].id_name}" data-name="{master.scene[master.arr_index.edge].code_name}" data-code="{value.code}" 
                                data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                                id="radio-step-{master.arr_index.edge}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.edge].id_name]}" onclick="{setEdgeId}" disabled="{value.stock == 1}">
                              <div class="tmb"><img src="{value.image}" class="pos_b img-responsive" alt="{value.name}" if="{value.image}"></div>
                              <label for="radio-step-{master.arr_index.edge}-{value.code}" class="radio-check-label">
                                {value.name}
                                <virtual if="{value.caption}">
                                  <br>{value.caption}
                                </virtual>
                                <virtual if="{value.price != 0}">
                                  <br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円
                                </virtual>
                              </label>
                            </label>
                          </div>
                        </virtual>
                        <span class="next-btn">
                          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 実際の商品と色合いや仕様が異なる場合の注意書き -->
              <div class="col-xs-12">
                <p>実際の商品と色合いや仕様が異なる場合がございます。<br>色合いの確認は、実際の生地見本や商品ラインナップにてご確認ください。</p>
                <ul>
                  <li>商品の仕様は<a href="https://fuwarii.com/pages/order_urand" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                  <li>商品ラインナップページは<a href="https://fuwarii.com/collections/all" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                  <li>生地見本画像は<a href="https://fuwarii.com/cdn/shop/files/2025_school_bag_sample.pdf?v=9688617480650486700" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                </ul>
                <p> ※オーダーメイドランドセルはクーポン適応外です。</p>
                <p>&nbsp;</p>
              </div>
            </div>

            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.edge].note}" class="text-left">
                {master.scene[master.arr_index.edge].note}
              </p>
            </div>
          </div>

          <!-- ステッチカラー -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.stitch].lead}" class="text-center">{master.scene[master.arr_index.stitch].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-color swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.stitch].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.stitch].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.stitch}-{value.code}" class="base-guide" data-inner-color="{getBright(value.color, mod) > 0.7 ? 'black' : 'white'}">
                        <input type="radio" name="{master.scene[master.arr_index.stitch].id_name}" data-name="{master.scene[master.arr_index.stitch].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.stitch}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.stitch].id_name]}" onclick="{setStitchId}" disabled="{value.stock == 1}">
                        <div class="tmb" style="background: radial-gradient({value.color} 40px, white);"></div>
                        <label for="radio-step-{master.arr_index.stitch}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.stitch].note}" class="text-left">{master.scene[master.arr_index.stitch].note}</p>
            </div>
          </div>

          <!-- カブセ裏・内装 -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.interior].lead}" class="text-center">{master.scene[master.arr_index.interior].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.interior].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.interior].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.interior}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.interior].id_name}" data-name="{master.scene[master.arr_index.interior].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.interior}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.interior].id_name]}" onclick="{setInteriorId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.interior}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
              <div class="col-xs-12">
              <!-- かぶせ内装の画像コメントアウト <p class="text-center"><img src="/assets/img/simulation/step/naisho.jpg" class="desc-img img-responsive img-rounded center-block"></p>-->
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.interior].note}" class="text-left">{master.scene[master.arr_index.interior].note}</p>
            </div>
          </div>

          <!-- 背中カラー -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.back_color].lead}" class="text-center">{master.scene[master.arr_index.back_color].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.back_color].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.back_color].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.back_color}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.back_color].id_name}" data-name="{master.scene[master.arr_index.back_color].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.back_color}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.back_color].id_name]}" onclick="{setBackColorId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_vc img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.back_color}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.back_color].note}" class="text-left">{master.scene[master.arr_index.back_color].note}</p>
            </div>
          </div>

          <!-- サイドデザイン -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.machi_design].lead}" class="text-center">{master.scene[master.arr_index.machi_design].lead}<br>両側面にナスカンがつきます</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.machi_design].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.machi_design].parts}" if="{value.color == master.current.color}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.machi_design}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.machi_design].id_name}" data-name="{master.scene[master.arr_index.machi_design].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.machi_design}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.machi_design].id_name]}" onclick="{setMachiDesignId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_b img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.machi_design}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                          <virtual if="{value.caption}"><br><p>{value.caption}</p></virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.machi_design].note}" class="text-left">{master.scene[master.arr_index.machi_design].note}</p>
            </div>
          </div>

          <!-- カブセデザイン -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.embossed].lead}" class="text-center">{master.scene[master.arr_index.embossed].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.embossed].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.embossed].parts}" if="{value.color == master.current.color}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.embossed}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.embossed].id_name}" data-name="{master.scene[master.arr_index.embossed].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.embossed}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.embossed].id_name]}" onclick="{setKabuseDesignId}">
                        <div class="tmb"><img src="{value.image}" class="pos_b img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.embossed}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.embossed].note}" class="text-left">{master.scene[master.arr_index.embossed].note}</p>
            </div>
          </div>

          <!-- カブセ飾り鋲 -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.decoration_rivets].lead}" class="text-center">{master.scene[master.arr_index.decoration_rivets].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.decoration_rivets].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.decoration_rivets].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.decoration_rivets}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.decoration_rivets].id_name}" data-name="{master.scene[master.arr_index.decoration_rivets].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.decoration_rivets}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.decoration_rivets].id_name]}" onclick="{setDecorationRivetsId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_vc img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.decoration_rivets}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.decoration_rivets].note}" class="text-left">{master.scene[master.arr_index.decoration_rivets].note}</p>
            </div>
          </div>

          <!-- 開閉 -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.key].lead}" class="text-center">{master.scene[master.arr_index.key].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.key].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.key].parts}" if="{value.color == master.current.color}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.key}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.key].id_name}" data-name="{master.scene[master.arr_index.key].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.key}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.key].id_name]}" onclick="{setKeyId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_c h_fit img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.key}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.key].note}" class="text-left">{master.scene[master.arr_index.key].note}</p>
            </div>
          </div>

          <!-- 肩ひも -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.shoulder_strap].lead}" class="text-center">{master.scene[master.arr_index.shoulder_strap].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.shoulder_strap].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.shoulder_strap].parts}" if="{value.color == master.current.color}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.shoulder_strap}-{value.id}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.shoulder_strap].id_name}" data-name="{master.scene[master.arr_index.shoulder_strap].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" data-caption="{value.caption}" data-note"{value.note}" value="{value.id}" 
                          id="radio-step-{master.arr_index.shoulder_strap}-{value.id}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.shoulder_strap].id_name]}" onclick="{setShoulderStrapId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_c h_fit img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.shoulder_strap}-{value.id}" class="radio-check-label">
                          {value.note}
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.shoulder_strap].note}" class="text-left">{master.scene[master.arr_index.shoulder_strap].note}</p>
            </div>
          </div>

          <!-- 防犯ブザー用フック -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.security_buzzer_right_left].lead}" class="text-center">{master.scene[master.arr_index.security_buzzer_right_left].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.security_buzzer_parts].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.security_buzzer_parts].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.security_buzzer_parts}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.security_buzzer_parts].id_name}" data-name="{master.scene[master.arr_index.security_buzzer_parts].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.security_buzzer_parts}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.security_buzzer_parts].id_name]}" onclick="{setSecurityBuzzerCase}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.security_buzzer_parts}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
              <!-- 防犯ブザー用フック左右選択 -->
              <div class="sub-parts swiper-no-swiping">
                <!-- 選択項目 -->
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.security_buzzer].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.security_buzzer].parts}" if="{value.color == master.current.color && value.code == this.buzzer_design}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.security_buzzer}-{value.id}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.security_buzzer].id_name}" data-name="{master.scene[master.arr_index.security_buzzer].code_name}" data-code="{value.id}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" data-note="{value.note}"
                          id="radio-step-{master.arr_index.security_buzzer}-{value.id}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.security_buzzer].id_name]}" onclick="{setSecurityBuzzerId}" disabled="{value.stock == 1}">
                        <div class="buzzer_parts_test">{value.caption}</div>
                        <label for="radio-step-{master.arr_index.security_buzzer}-{value.id}" class="radio-check-label">
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.security_buzzer_parts].note}" class="text-left">{master.scene[master.arr_index.security_buzzer_parts].note}</p>
            </div>
          </div>

          <!-- ファスナーグリップ -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.fastener_puller].lead}" class="text-center">{master.scene[master.arr_index.fastener_puller].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.fastener_puller].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.fastener_puller].parts}" if="{value.price != 0 || value.color == master.current.color}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.fastener_puller}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.fastener_puller].id_name}" data-name="{master.scene[master.arr_index.fastener_puller].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.fastener_puller}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.fastener_puller].id_name]}" onclick="{setFastenerPullerId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_vc img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.fastener_puller}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.fastener_puller].note}" class="text-left">{master.scene[master.arr_index.fastener_puller].note}</p>
            </div>
          </div>

          <!-- チェストベルト -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.shoulder_slip_belt].lead}" class="text-center">{master.scene[master.arr_index.shoulder_slip_belt].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.shoulder_slip_belt].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.shoulder_slip_belt].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.shoulder_slip_belt}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.shoulder_slip_belt].id_name}" data-name="{master.scene[master.arr_index.shoulder_slip_belt].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.shoulder_slip_belt}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.shoulder_slip_belt].id_name]}" onclick="{setShoulderSlipBeltId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.shoulder_slip_belt}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
              <div class="col-xs-12">
                <p class="text-center"><img src="/assets/img/simulation/step/full_step-13_belt.jpg" class="desc-img img-responsive img-rounded center-block"></p>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.shoulder_slip_belt].note}" class="text-left">{master.scene[master.arr_index.shoulder_slip_belt].note}</p>
            </div>
          </div>

          <!-- 車椅子フック用ループ -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.wheelchair_hook].lead}" class="text-center">{master.scene[master.arr_index.wheelchair_hook].lead}</p>
                <!-- 備考 -->
                <p show="{master.scene[master.arr_index.wheelchair_hook].note}" class="text-center">{master.scene[master.arr_index.wheelchair_hook].note}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.wheelchair_hook].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.wheelchair_hook].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.wheelchair_hook}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.wheelchair_hook].id_name}" data-name="{master.scene[master.arr_index.wheelchair_hook].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.wheelchair_hook}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.wheelchair_hook].id_name]}" onclick="{setWheelchairHookId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.wheelchair_hook}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 車椅子固定用ベルト -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.wheelchair_fixing_belt].lead}" class="text-center">{master.scene[master.arr_index.wheelchair_fixing_belt].lead}</p>
                <!-- 備考 -->
                <p show="{master.scene[master.arr_index.wheelchair_fixing_belt].note}" class="text-center">{master.scene[master.arr_index.wheelchair_fixing_belt].note}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.wheelchair_fixing_belt].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.wheelchair_fixing_belt].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.wheelchair_fixing_belt}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.wheelchair_fixing_belt].id_name}" data-name="{master.scene[master.arr_index.wheelchair_fixing_belt].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.wheelchair_fixing_belt}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.wheelchair_fixing_belt].id_name]}" onclick="{setWheelchairFixingBeltId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.wheelchair_fixing_belt}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 720度全方向反射 -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.reflection].lead}" class="text-center">{master.scene[master.arr_index.reflection].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.reflection].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.reflection].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.reflection}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.reflection].id_name}" data-name="{master.scene[master.arr_index.reflection].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}" 
                          id="radio-step-{master.arr_index.reflection}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.reflection].id_name]}" onclick="{setReflectionId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.reflection}-{value.code}" class="radio-check-label">
                          {value.name}
                          <virtual if="{value.caption}"><br>{value.caption}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
              </div>
              <div class="col-xs-12">
                <p class="text-center"><img src="/assets/img/simulation/step/{master.scene[master.arr_index.shoulder_strap].parent}_hansha.jpg" class="desc-img img-responsive img-rounded center-block"></p>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.reflection].note}" class="text-left">{master.scene[master.arr_index.reflection].note}</p>
            </div>
          </div>

          <!-- ネームプレート -->
          <div class="detail-slide">
            <div class="row">
              <!-- 説明 -->
              <div class="col-xs-12">
                <p show="{master.scene[master.arr_index.embroidery].lead}" class="text-center">{master.scene[master.arr_index.embroidery].lead}</p>
              </div>
              <!-- 選択項目 -->
              <div class="col-xs-12">
                <div class="item-list item-list-parts swiper-no-swiping" data-init="{num = 0}" data-length="{Object.keys(master.scene[master.arr_index.embroidery].parts).length}">
                  <span class="prev-btn"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span>
                  <virtual each="{value, i in master.scene[master.arr_index.embroidery].parts}">
                    <div class="base-item" data-nth="{num += 1}">
                      <label for="radio-step-{master.arr_index.embroidery}-{value.code}" class="base-guide">
                        <input type="radio" name="{master.scene[master.arr_index.embroidery].id_name}" data-name="{master.scene[master.arr_index.embroidery].code_name}" data-code="{value.code}" 
                          data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" data-color="{value.color}" value="{value.id}"  data-note="{value.note}"
                          id="radio-step-{master.arr_index.embroidery}-{value.code}" class="radio-check" checked="{value.id == custom_state[master.scene[master.arr_index.embroidery].id_name]}" onclick="{setEmbroideryId}" disabled="{value.stock == 1}">
                        <div class="tmb"><img src="{value.image}" class="pos_c h_fit img-responsive" alt="{value.name}" if="{value.image}"></div>
                        <label for="radio-step-{master.arr_index.embroidery}-{value.code}" class="radio-check-label">
                          <virtual if="{value.caption}">{value.caption}</virtual>
                          <virtual if="{value.note}"><br>{value.note}</virtual>
                          <virtual if="{value.price != 0}"><br><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</virtual>
                        </label>
                      </label>
                    </div>
                  </virtual>
                  <span class="next-btn"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
                </div>
                <div class="sub-parts swiper-no-swiping">

                  <form id="form-embroidery-content" name="form_embroidery_content" role="form" data-toggle="validator" data-focus="false" onsubmit="{submitEmbroideryContentForm}">
                    <div class="embroidery-content">
                      <div class="embroidery-content-box">
                        <div class="form-group">
                          <h4>模様</h4>
                          <virtual each="{input, n in embroidery_inputs.type}">
                            <label for="input-type-type-{input.value}" class="btn-radio">
                              <input type="radio" name="{input.name}" data-code="{input.code}" data-title="{input.label}" id="input-type-type-{input.value}" class="radio-check" value="{input.value}" onclick="{setMetalType}" checked="{input.value == custom_state.metalplate_type || (custom_state.metalplate_type == null && input.value == '10')}">
                              <label for="input-type-type-{input.value}" class="btn-radio-label">{input.label}</label>
                            </label>
                          </virtual>
                        </div>
                        <h4>記入名</h4>
                        <div class="form-group">
                          <virtual each="{input, n in embroidery_inputs.char}">
                            <label for="input-char-type-{input.value}" class="btn-radio">
                              <input type="radio" name="{input.name}" data-code="{input.value == 0 ? 'en' : 'em'}" data-title="{input.label}" id="input-char-type-{input.value}" class="radio-check" value="{input.value}" onclick="{setMetalPattern}" checked="{input.value == custom_state.metalplate_char}">
                              <label for="input-char-type-{input.value}" class="btn-radio-label">{input.label}</label>
                            </label>
                          </virtual>
                        </div>
                        <div class="form-group">
                          <virtual each="{input, n in embroidery_inputs.text}">
                            <input type="{input.type}" name="{input.name}" data-name="{input.name}" id="{input.name}_input" class="form-control" placeholder="{input.placeholder}" 
                              value="{custom_state.embroidery_content}" title="名入れ内容" onclick="{setEmbroideryContent}" onInput="{inputEmbroideryContent}" 
                              maxlength="{input.validations[input.validator].maxlength}" pattern="{input.validations[input.validator].pattern}" disabled="{current_embroidery_color == ''}" required="{current_embroidery_color != ''}">
                            <div class="col-xs-12">
                              <div class="help-block with-errors"></div>
                            </div>
                          </virtual>
                        </div>
                      </div>
                      <div class="embroidery-content-box">
                        <div class="embroidery-metalplate-wrap">
                          <div class="input-metal-text-virtual-active text-center input-metal-text-{custom_state.metalplate_char} input-metal-text-pos-{custom_state.metalplate_type == null ? '10' : custom_state.metalplate_type}"></div>
                          <img src="/assets/img/simulation/parts/metal-plate-{custom_state.metalplate_type == null ? '10' : custom_state.metalplate_type}-{current_embroidery_color}.png" class="desc-img" if="{current_embroidery_color}">
                        </div>
                        <div class="col-xs-12">
                          <ul class="list-unstyled">
                            <li><small>※英語と日本語の組み合わせはできません。</small></li>
                            <li><small>※漢字、ひらがな、カタカナは全角10文字まで。</small></li>
                            <li><small>※アルファベットは大文字のみ半角15文字まで。</small></li>
                            <li><small>※スペース（空白）、中点（･）、ピリオド（.）を入れられます。</small></li>
                            <li><small>
                              ※マークは①♪　②&#x1f5a4;　③★　④✿　が入れられます。<br>
                              ※マークを入れる場合は指定の番号を入力して下さい。<br>
                              入力例）「①ふわりぃ②」の場合 → 「♪ふわりぃ&#x1f5a4;」<br>
                            </small></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- 備考 -->
            <div class="row ctl-step-note">
              <p show="{master.scene[master.arr_index.embroidery].note}" class="text-left">{master.scene[master.arr_index.embroidery].note}</p>
            </div>

            <!-- 遷移ボタン -->
            <div class="ctl-step-checkout">
              <div class="text-center">
                <a href="javascript:void(0);" class="btn btn-link" onclick="{customSample}"><img src="/assets/img/common/btn_try_sample.png" alt="完成イメージ"></a>
              </div>
            </div>
          </div>

        </div>
      </div>

    </article>

  </div>

  <script>
  // This
  var self = this;
  // Canvas
  var canvas, context_c, pallet, context_p, fitting, context_f, blending, context_b;
  // Swiper
  var swiperDetail;
  /*
   * Setup Custom Data
   *
   */
  this.mixin('CustomMixin');
  this.redrawing = this.finished = true;
  // localStorageに保存されているデータURL設定
  this.custom_image = localStorage.getItem("custom_image") || null;
  // アングルのリスト設定
  this.custom_angle = opts.custom_angle || null;
  // パーツの選択情報などのリスト設定
  this.custom_state = opts.custom_state || null;
  // 選択したネームプレートのcolor(入力欄のサンプルイメージのファイル名に使用)
  this.current_embroidery_color = '';

  // Master Data (Simulation)
  this.master = {};

  // ステップの配列用のキー
  this.master.arr_index = {
    color:                      1, // メインカラー
    edge:                       2, // コンビカラー
    stitch:                     3, // ステッチカラー
    interior:                   4, // カブセ裏・内装
    back_color:                 5, // 背中カラー
    machi_design:               6, // サイドデザイン
    embossed:                   7, // カブセデザイン
    decoration_rivets:          8, // カブセ飾り鋲
    key:                        9, // 開閉
    shoulder_strap:             10, // 肩ひも
    security_buzzer:            11, // 防犯ブザー用フック
    fastener_puller:            12, // ファスナーグリップ
    shoulder_slip_belt:         13, // チェストベルト
    wheelchair_hook:            14, // 車椅子フック用ループ
    wheelchair_fixing_belt:     15, // 車椅子固定用ベルト
    reflection:                 16, // 760度反射
    embroidery:                 17, // ネームプレート
    base:                       18, // 本体素材(表示しない)
    security_buzzer_parts:      20, // 防犯ブザー用フックデザイン（表示しない）
    security_buzzer_right_left: 21, // 防犯ブザー用フック左右（表示しない）
    key_stitch:                 22, // 開閉ロックステッチ（表示しない）
    shoulder_stitch:            23  // 肩ひもステッチ（表示しない）
  };
  // ステップの表示順(ステップメニューのループに使用)
  // 実際に表示されるステップのキーを設定(コンビカラーのようにメインカラーに含まれるものなどは入れない)
  // 設定した順＝表示順
  this.master.disp_order = [
    this.master.arr_index.color,
    this.master.arr_index.edge,
    this.master.arr_index.stitch,
    this.master.arr_index.interior,
    this.master.arr_index.back_color,
    this.master.arr_index.machi_design,
    this.master.arr_index.embossed,
    this.master.arr_index.decoration_rivets,
    this.master.arr_index.key,
    this.master.arr_index.shoulder_strap,
    this.master.arr_index.security_buzzer,
    this.master.arr_index.fastener_puller,
    this.master.arr_index.shoulder_slip_belt,
    this.master.arr_index.wheelchair_hook,
    this.master.arr_index.wheelchair_fixing_belt,
    this.master.arr_index.reflection,
    this.master.arr_index.embroidery
  ];

  // ステップの配列用のキーを使いそのキーのステップ番号(表示順)を取得する
  this.getDisporderKey = function(idx){
    return (self.master.disp_order.indexOf(idx) + 1);
  }

  // ステップ毎のデータ
  // APIから取得されたデータの内、不要なものを除いたデータを設定
  // DBのステップ・サブステップの値が変わった場合は「opts.parts_data.step_」以降の数字も変更する必要がある
  this.master.scene = [];
  this.master.scene[this.master.arr_index.color]                          = opts.parts_data.step_2_1;
  this.master.scene[this.master.arr_index.edge]                           = opts.parts_data.step_2_2;
  this.master.scene[this.master.arr_index.stitch]                         = opts.parts_data.step_3;
  this.master.scene[this.master.arr_index.interior]                       = opts.parts_data.step_7;
  this.master.scene[this.master.arr_index.back_color]                     = opts.parts_data.step_6;
  this.master.scene[this.master.arr_index.machi_design]                   = opts.parts_data.step_17_1;
  this.master.scene[this.master.arr_index.embossed]                       = opts.parts_data.step_16;
  this.master.scene[this.master.arr_index.decoration_rivets]              = opts.parts_data.step_15;
  this.master.scene[this.master.arr_index.key]                            = opts.parts_data.step_5_1;
  this.master.scene[this.master.arr_index.shoulder_strap]                 = opts.parts_data.step_4_1;
  this.master.scene[this.master.arr_index.security_buzzer]                = opts.parts_data.step_9_2;
  this.master.scene[this.master.arr_index.fastener_puller]                = opts.parts_data.step_10;
  this.master.scene[this.master.arr_index.shoulder_slip_belt]             = opts.parts_data.step_11;
  this.master.scene[this.master.arr_index.wheelchair_hook]                = opts.parts_data.step_12;
  this.master.scene[this.master.arr_index.wheelchair_fixing_belt]         = opts.parts_data.step_13;
  this.master.scene[this.master.arr_index.embroidery]                     = opts.parts_data.step_14;
  this.master.scene[this.master.arr_index.base]                           = opts.parts_data.step_1;
  this.master.scene[this.master.arr_index.reflection]                     = opts.parts_data.step_18;
  this.master.scene[this.master.arr_index.machi_design_stitch]            = opts.parts_data.step_17_2;
  this.master.scene[this.master.arr_index.security_buzzer_parts]          = opts.parts_data.step_9_3;
  this.master.scene[this.master.arr_index.security_buzzer_right_left]     = opts.parts_data.step_9_1;
  this.master.scene[this.master.arr_index.key_stitch]                     = opts.parts_data.step_5_2;
  this.master.scene[this.master.arr_index.shoulder_stitch]                = opts.parts_data.step_4_2;
  this.master.scene[this.master.arr_index.security_buzzer].name = this.master.scene[this.master.arr_index.security_buzzer_right_left].name;

  // htmlのnameなどに使用する名前を設定
  $.each(this.master.arr_index, function(key, value){
    self.master.scene[value].item_name = key;
    self.master.scene[value].id_name = key + '_id';
    self.master.scene[value].code_name = key + '_code';
    // ステップ移動時の初期アングルを設定(正面)
    self.master.scene[value].default_angle = 0;
  });

  // ステップ移動時の初期アングルを設定(正面以外)0:正面,1:背面,2:両サイド,4:内装
  this.master.scene[this.master.arr_index.machi_design].default_angle    = 2;
  this.master.scene[this.master.arr_index.shoulder_strap].default_angle    = 1;
  this.master.scene[this.master.arr_index.back_color].default_angle      = 1;
  this.master.scene[this.master.arr_index.security_buzzer].default_angle = 1;
  this.master.scene[this.master.arr_index.interior].default_angle        = 4;
  this.master.scene[this.master.arr_index.embroidery].default_angle      = 4;

  // ネームプレートの入力項目tns
  this.embroidery_inputs = {
    type: [
      {
        type: 'radio',
        name: 'type',
        value: 10,
        label: 'プレーン'
      },{
        type: 'radio',
        name: 'type',
        value: 11,
        label: 'ハート'
      },{
        type: 'radio',
        name: 'type',
        value: 12,
        label: 'クラウン'
      },{
        type: 'radio',
        name: 'type',
        value: 13,
        label: 'フラワー'
      }
    ],
    char: [
      {
        type: 'radio',
        name: 'char',
        value: 0,
        label: '半角'
      },{
        type: 'radio',
        name: 'char',
        value: 1,
        label: '全角'
      }
    ],
    text: [
      {
        type: 'text',
        name: 'embroidery_content',
        value: '',
        placeholder: '文字を入力してください',
        validator: self.custom_state.metalplate_char,
        validations:[
          {
            maxlength: 15,
            pattern: '^([0-9A-Z]|[①②③④♪♥★✿]|[\s ]|[.]|[･]|[・])+$'
          },{
            maxlength: 10,
            pattern: '^([ぁ-んァ-ン一-龥々Ａ-Ｚ]|[①②③④♪♥★✿]|[\s　]|ー|―|[.]|[･]|[．]|[・])+$'
          }
        ]
      }
    ]
  };


  // 現在の選択値の初期値設定
  this.master.current = {step: (q.step)? Number(q.step) : 0, angle: (q.angle)? Number(q.angle) : 0, prices: [], weights: [], color: null};

  // 値段と重量のデフォルト値設定
  this.custom_state.order_price = this.master.scene[this.master.arr_index.base].parts[0].price;
  this.custom_state.order_weight = this.master.scene[this.master.arr_index.base].parts[0].weight;

  // 選択されているメインカラーIDからcolor(カラーコード)を取得し現在color(カブセデザイン等のcolorから表示するパーツの判別に使用)に設定
  this.setCurrentColor = function(){
    $.each(self.master.scene[self.master.arr_index.color].parts, function(key, value){
      if(value.id == self.custom_state.color_id) self.master.current.color = value.color;
    });
  }
  self.setCurrentColor();
  // 選択されている防犯ブザーデザイン
  this.setBuzzerDesign = function(){
    $.each(self.master.scene[self.master.arr_index.security_buzzer_parts].parts, function(key, value){
      if(value.id == self.custom_state.security_buzzer_parts_id) self.buzzer_design = value.code;
    });
  }
  self.setBuzzerDesign();

  this.setBuzzerRightLeft = function(){
    // 防犯ブザーの左右値入れ・初期値決め
    $.each(self.master.scene[self.master.arr_index.security_buzzer_right_left].parts, function(key, value){
      if(value.code == self.custom_state.security_buzzer_note){
        self.custom_state.security_buzzer_right_left_id = value.id;
        self.custom_state.security_buzzer_right_left_code = value.code;
        self.custom_state.security_buzzer_right_left = value.name;
      }else if(self.custom_state.security_buzzer_id == null || self.custom_state.security_buzzer_right_left_id === undefined){
        if(value.code == '03' || self.custom_state.security_buzzer_id == null){
          self.custom_state.security_buzzer_right_left_id = value.id;
          self.custom_state.security_buzzer_right_left_code = value.code;
          self.custom_state.security_buzzer_right_left = value.name;
          self.custom_state.security_buzzer_note = '03';
        }
      }
    });
  }
  self.setBuzzerRightLeft();

  // 開閉ロックステッチ値入れ・初期値決め
  this.setKeyStitch = function(){
    $.each(self.master.scene[self.master.arr_index.key].parts, function(key, value){
      if(value.id == self.custom_state.key_id) self.custom_state.key_code = value.code;
    });
    $.each(self.master.scene[self.master.arr_index.key_stitch].parts, function(key, value){
      if (value.code == self.custom_state.key_code) {
        self.custom_state.key_stitch_code = self.custom_state.key_code;
      } else if (self.custom_state.key_code != '03' && self.custom_state.key_code != '04') {
        self.custom_state.key_stitch_code = null;
      }
    });
  }
  self.setKeyStitch();

  // 肩ひもステッチ値入れ・初期値決め
  this.setSholderStitch = function(){
    $.each(self.master.scene[self.master.arr_index.shoulder_strap].parts, function(key, value){
      if(value.id == self.custom_state.shoulder_strap_id) self.custom_state.shoulder_strap_code = value.code;
      if(value.id == self.custom_state.shoulder_strap_id) self.custom_state.shoulder_strap_caption = value.caption;
      if(value.id == self.custom_state.shoulder_strap_id) self.custom_state.shoulder_strap_note = value.note;
    });
    $.each(self.master.scene[self.master.arr_index.shoulder_stitch].parts, function(key, value){
      if (value.code == self.custom_state.shoulder_strap_caption) {
        self.custom_state.shoulder_stitch_code = self.custom_state.shoulder_strap_caption;
      }
    });
  }
  self.setSholderStitch();

  // ネームプレートの入力値が存在しなかったら空文字を設定
  if(!this.custom_state.embroidery_content || this.custom_state.embroidery_content == 'undefined'){
    this.custom_state.embroidery_content = '';
  }else{
    // 選択されているネームプレートIDからcolorを取得
    $.each(self.master.scene[self.master.arr_index.embroidery].parts, function(key, value){
      if(value.id == self.custom_state.embroidery_id) self.current_embroidery_color = value.color;
    });
  }


  // bind on click disabled
  this.bindOnClickDisabled = function(e){
    e.preventUpdate = true;
  }

  // 描画の向き
  this.setAngle = function(e){
    e.preventUpdate = (this.master.current.angle == $('input', e.currentTarget).val())? true : false;
    if(!e.preventUpdate){
      this.master.current.angle = e.currentTarget.getAttribute('data-angle');

      // 肩ひも・背カンステップの場合
      if(self.master.current.step == self.getDisporderKey(self.master.arr_index.shoulder_strap)){
      }
    }
  };
  // 素材ID
  this.setBaseId = function(e){
    e.preventUpdate = (this.custom_state.base_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.base_id = e.target.value;
      this.custom_state.base_code = $(e.target).data('code');
      parent.q = {};
      route('?base_id=' + e.target.value);
      self.unmount(true);
      obs.trigger("initCustomType", this.custom_state);
    }
  }.bind(this);
  // メインカラーID
  this.setColorId = function(e){
    e.stopPropagation(); // bootstrap
    e.preventUpdate = (this.custom_state.color_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.color_id = e.target.value;
      this.custom_state.color_code = $(e.target).data('code');
      // コンビカラーの選択値変更
      this.custom_state.edge_id = $('#tab-2-2 [data-code="' + e.currentTarget.getAttribute('data-code') + '"]').val();
    }
    self.setCurrentColor();
    //肩ひも・背カン
    $.each(self.master.scene[this.master.arr_index.shoulder_strap].parts, function(key, value){
      if(value.code == self.custom_state.shoulder_strap_code && value.color == self.master.current.color ) {
        if (self.custom_state.shoulder_strap_caption == null || self.custom_state.shoulder_strap_code == '07') {
            // `shoulder_strap_caption` が null の場合の処理
            self.custom_state.shoulder_strap_id = value.id;
        } else {
            // `shoulder_strap_caption` が null でない場合、caption と一致するかを確認
            if (value.caption == self.custom_state.shoulder_strap_caption) {
                self.custom_state.shoulder_strap_id = value.id;
            }
        }
      }
    });

    //開閉錠（ロック）タイプ
    $.each(self.master.scene[this.master.arr_index.key].parts, function(key, value){
      if(value.code == self.custom_state.key_code && value.color == self.master.current.color) self.custom_state.key_id = value.id;
    });

    //防犯ブザー用フック
    $.each(self.master.scene[this.master.arr_index.security_buzzer].parts, function(key, value){
      if(value.code == self.custom_state.security_buzzer_code && value.color == self.master.current.color){
        if(value.note == self.custom_state.security_buzzer_note){
          self.custom_state.security_buzzer_id = value.id;
        }
      }
    });
    self.setBuzzerDesign();
    // カブセデザインのパーツ選択項目をメインカラーに合ったものに変更
    $.each(self.master.scene[this.master.arr_index.embossed].parts, function(key, value){
      // 現在選択中のcodeが同じ、かつcolorがメインカラーと同じパーツのIDを選択中のIDとして設定
      if(value.code == self.custom_state.embossed_code && value.color == self.master.current.color) self.custom_state.embossed_id = value.id;
    });
    // サイドデザインのパーツ選択項目をメインカラーに合ったものに変更
    $.each(self.master.scene[this.master.arr_index.machi_design].parts, function(key, value){
      // 現在選択中のcodeが同じ、かつcolorがメインカラーと同じパーツのIDを選択中のIDとして設定
      if(value.code == self.custom_state.machi_design_code && value.color == self.master.current.color) self.custom_state.machi_design_id = value.id;
    });

    //ファスナーグリップ
    $.each(self.master.scene[this.master.arr_index.fastener_puller].parts, function(key, value){
      if(value.price != 0 || value.color == self.master.current.color){
        if(value.code == self.custom_state.fastener_puller_code && value.color == self.master.current.color) self.custom_state.fastener_puller_id = value.id;
      }
    });
  }.bind(this);
  // コンビカラーID
  this.setEdgeId = function(e){
    e.preventUpdate = (this.custom_state.edge_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.edge_id = e.target.value;
      this.custom_state.edge_code = $(e.target).data('code');
    }
  }.bind(this);
  // ステッチカラーID
  this.setStitchId = function(e){
    e.preventUpdate = (this.custom_state.stitch_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.stitch_id = e.target.value;
    }
  }.bind(this);
  // カブセデザインID
  this.setKabuseDesignId = function(e){
    e.preventUpdate = (this.custom_state.embossed_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.embossed_id = e.target.value;
    }
  }.bind(this);
  // カブセ飾り鋲ID
  this.setDecorationRivetsId = function(e){
    e.preventUpdate = (this.custom_state.decoration_rivets_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.decoration_rivets_id = e.target.value;
      this.custom_state.decoration_rivets_code = $(e.target).data('code');
    }
  }.bind(this);
  // 背中カラーID
  this.setBackColorId = function(e){
    e.preventUpdate = (this.custom_state.back_color_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.back_color_id = e.target.value;
    }
  }.bind(this);
  // サイドデザインID
  this.setMachiDesignId = function(e){
    e.preventUpdate = (this.custom_state.machi_design_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.machi_design_id = e.target.value;
    }
  }.bind(this);
  // 開閉錠（ロック）ID
  this.setKeyId = function(e){
    e.preventUpdate = (this.custom_state.key_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.key_id = e.target.value;
      this.custom_state.key_code = $(e.target).data('code');
    }
    self.setKeyStitch();
  }.bind(this);
  // ファスナーグリップID
  this.setFastenerPullerId = function(e){
    e.preventUpdate = (this.custom_state.fastener_puller_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.fastener_puller_id = e.target.value;
    }
  }.bind(this);
  // 防犯ブザー用フック形
  this.setSecurityBuzzerCase = function(e) {
    e.preventUpdate = (this.custom_state.security_buzzer_parts_code == $(e.target).data('code')) ? true : false;
    if (!e.preventUpdate) {
      this.custom_state.security_buzzer_parts_id = e.target.value;
      this.custom_state.security_buzzer_parts_code = $(e.target).data('code');
      // self.custom_state.security_buzzer_note が 03 の場合、'01' をセット
      if (self.custom_state.security_buzzer_note == 03) {
        self.custom_state.security_buzzer_note = '01';
      }
      //防犯ブザー用フックつけない場合
      if ($(e.target).data('code') == 04) {
        this.setBuzzerId($(e.target).data('code'));
        setTimeout(self.setBuzzerRightLeft, 0);
      } else {
        //防犯ブザー用フックつける場合
        self.setBuzzerDesign();
        // ラジオボタンを確認する処理
        const checkRadioButton = () => {
          const relatedRadioButton = document.querySelector(`input[type="radio"][data-note="${self.custom_state.security_buzzer_note}"]`);
          if (relatedRadioButton) {
            relatedRadioButton.checked = true;  // ラジオボタンを選択
            relatedRadioButton.dispatchEvent(new Event('click'));  // クリックイベントを発火
          }
        };
        // setTimeoutで少し遅延させて処理を実行
        setTimeout(checkRadioButton, 0);
      }
    }
  }.bind(this);

  // 防犯ブザー用フックID
  this.setSecurityBuzzerId = function(e){
    e.preventUpdate = (self.custom_state.security_buzzer_id == e.target.value) ? true : false;
    if(!e.preventUpdate){
      this.setBuzzerId(e.target.value); 
        self.custom_state.security_buzzer_note = $(e.target).data('note');
        self.setBuzzerRightLeft();
    }
  }.bind(this);

  // 防犯ブザー用フックID初期値
  this.setBuzzerId = function(value){
    if(this.custom_state.security_buzzer_parts_code == 04){
      self.custom_state.security_buzzer_id = null;
      self.custom_state.security_buzzer = "つけない";
      self.custom_state.security_buzzer_note  = '03';
    }else{
      self.custom_state.security_buzzer_id = value;
    }
  }.bind(this);

  // 肩ひもID
  this.setShoulderStrapId = function(e){
    e.preventUpdate = (this.custom_state.shoulder_strap_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.shoulder_strap_id = e.target.value;
      this.custom_state.shoulder_strap_caption =$(e.target).data('caption');
      this.custom_state.shoulder_strap_note = $(e.target).data('note');
    }
  self.setSholderStitch();
  }.bind(this);

  // カブセ裏・内装ID
  this.setInteriorId = function(e){
    e.preventUpdate = (this.custom_state.interior_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.interior_id = e.target.value;
    }
  }.bind(this);

  // チェストベルトID
  this.setShoulderSlipBeltId = function(e){
    e.preventUpdate = (this.custom_state.shoulder_slip_belt_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.shoulder_slip_belt_id = e.target.value;
    }
  }.bind(this);
  // 車いすフック用ループID
  this.setWheelchairHookId = function(e){
    e.preventUpdate = (this.custom_state.wheelchair_hook_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.wheelchair_hook_id = e.target.value;
      this.custom_state.wheelchair_hook_code = $(e.target).data('code');
    }
  }.bind(this);
  // 車椅子固定用ベルトID
  this.setWheelchairFixingBeltId = function(e){
    e.preventUpdate = (this.custom_state.wheelchair_fixing_belt_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.wheelchair_fixing_belt_id = e.target.value;
      this.custom_state.wheelchair_fixing_belt_code = $(e.target).data('code');
    }
  }.bind(this);
  // ネームプレートID
  this.setEmbroideryId = function(e){
    e.preventUpdate = (this.custom_state.embroidery_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      // 選択値設定
      this.custom_state.embroidery_id = e.target.value;
      this.custom_state.embroidery_code = $(e.target).data('code');
      this.custom_state.embroidery_content = (this.custom_state.embroidery_code == '01')? '' : self.custom_state.embroidery_content;
      this.current_embroidery_color = $(e.target).data('color') ? $(e.target).data('color') : '';
      // swiper更新(高さを変更するため)
      swiperDetail.update(true);
    }
    // アングル変更
    switch(this.custom_state.embroidery_code){
      case '02': // メタルプレート名入れ
      case '04':
        this.master.current.angle = 4; // 内装
        break;
      default:
        this.master.current.angle = 0; // 正面
        break;
    }
  }.bind(this);
  // ネームプレート内容フォームの送信
  this.submitEmbroideryContentForm = function(e){
    // enterキーなどでsubmitされないようにする
    e.preventDefault();
    return false;
  };
  // ネームプレート入力規則
  this.setMetalPattern = function(e){
    this.custom_state.metalplate_char = e.target.value;
    this.embroidery_inputs.text[0].validator = e.target.value;
  }
  // ネームプレート模様
  this.setMetalType = function(e){
    this.custom_state.metalplate_type = e.target.value;
  }
  // ネームプレート内容:onclick
  this.setEmbroideryContent = function(e){
    $('#form-embroidery-content').validator('update').validator('validate');
  };
  // ネームプレート内容:onInput
  this.inputEmbroideryContent = function(e){
    this.custom_state.embroidery_content = e.target.value;
    this.custom_state.embroidery_content_html = (this.custom_state.embroidery_code != '01') ? self.simulationText(true) : '';
  };
  // 360°全方向反射ID
  this.setReflectionId = function(e){
    e.preventUpdate = (this.custom_state.reflection_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.reflection_id = e.target.value;
    }
  }.bind(this);

  // 金額
  this.updatePrice = function() {
    var lastPrice = self.custom_state.order_price;
    self.custom_state.order_price = 0;

    // 現在の価格リストを合計
    self.master.current.prices.forEach(function(value) {
      self.custom_state.order_price += Number(value);
    });

    // 金額が変更された場合のみ UI を更新
    if (lastPrice !== self.custom_state.order_price) {
      this.redrawing = false;
      this.update(); // 更新をトリガー
    }
  };
  // 重量合計計算(現在未使用)
  this.updateWeight = function(){
    var lastWeight = self.custom_state.order_weight;
    self.custom_state.order_weight = 0;
    self.master.current.weights.forEach(function(value, key){
      self.custom_state.order_weight += Number(value);
    });
    if(lastWeight != self.custom_state.order_weight){
      this.redrawing = false;
      this.update();
    }
  };

  // 読み込み処理(expectedCntに指定した数callbackを実行)
  this.Loader = function(expectedCnt, callback){
    var cnt = 0;
    return function(){
      if(++cnt == expectedCnt){
        callback();
      }
    }
  };

  // Canvas 画像の描画
  this.drawCustomize = function(text){
    // ロード中画像を表示
    $('.spinner-canvas').fadeIn('fast', function(){
      // 完了フラグにfalse設定
      self.finished = false;
    });
    // 選択中パーツの金額リストの初期化
    self.master.current.prices = [];
    // 選択中パーツの重量リストの初期化
    self.master.current.weights = [];
    // canvasの2dコンテキスト
    if(context_c){
      context_c.globalAlpha = 1.0;
      context_c.clearRect( 0 , 0 , 560 , 560 );
      context_c.setTransform(1, 0, 0, 1, 0, 0);
    }
    // palletの2dコンテキスト
    if(context_p){
      context_p.globalAlpha = 1.0;
      context_p.clearRect( 0 , 0 , 560 , 560 );
      context_p.setTransform(1, 0, 0, 1, 0, 0);
    }
    // fittingの2dコンテキスト
    if(context_f){
      context_f.globalAlpha = 1.0;
      context_f.clearRect( 0 , 0 , 560 , 560 );
      context_f.setTransform(1, 0, 0, 1, 0, 0);
    }
     if(context_b){
      context_b.globalAlpha = 1.0;
      context_b.clearRect( 0 , 0 , 560 , 560 );
      context_b.setTransform(1, 0, 0, 1, 0, 0);
    }
    var key, image_src = [], images = [], stitch_src = [], stitches = [], attach_src = [], attachments = [], trans_src = [], transparent = [], stitch_color = null;

    // 画像URLの共通部分
    var attach_path = '/assets/img/simulation/canvas/urandcel/';
    // パーツから画像URL取得し設定
    var imageSources = function(){
      // ステップのループ(表に表示されないものも含む)
      $.each(self.master.scene, function(key, step){
        // $.eachは配列の場合、最初は0から始まる(キーが0のものが配列に含まれてなくても)ためデータの有無を判定する必要がある
        if(!step){return true;}

        // ネームプレートの入力内容
        var metalplate_type = self.custom_state.metalplate_type;
        var embroidery_code = self.custom_state.embroidery_code;
        // 現在未使用だけど一応残しておく
        var base_code = self.custom_state.base_code;

        // 選択されているパーツのID
        var select_parts_id = self.custom_state[step.id_name];
        // 選択されているパーツデータ取得
        var select_parts = null;
        $.each(step.parts, function(p_key, p_val){
          if(p_val.id == select_parts_id){
            select_parts = p_val;
            return false;
          }
        });
        // パーツデータが有る場合
        if(select_parts){
          // 選択されているパーツのcodeを設定
          self.custom_state[step.code_name] = select_parts.code;

          // 選択されているパーツに価格が有ったら処理
          if (select_parts.price) {
            if (step.id_name === 'edge_id') {
              // 本体カラーとコンビカラーの一致判定
              if (self.custom_state.color_code === self.custom_state.edge_code) {
                self.master.current.prices.push(Number(0));
              }else{
                // 通常のパーツの処理
                self.master.current.prices.push(Number(select_parts.price));
              }
            }else{
              // 通常のパーツの処理
              self.master.current.prices.push(Number(select_parts.price));
            }
          }

          // 選択されているパーツに重量が有ったら重量追加
          if(select_parts.weight) self.master.current.weights.push(select_parts.weight);
          // 選択されているパーツに画像が有ったら
          if(select_parts.canvas){
            // 現在のアングルの画像が有ったら
            if(select_parts.canvas[self.master.current.angle]){
              // パーツの種類ごとに分岐処理
              switch(step.id_name){
                // コンビカラー
                case 'edge_id':
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  break;
                // ステッチカラー
                case 'stitch_id':
                  if(select_parts.color) stitch_color = select_parts.color;
                  stitch_src.push(select_parts.canvas[self.master.current.angle]);

                  //開閉ワンタッチロックのステッチ
                  if(self.custom_state.product_id != 7){
                    $.each(self.master.scene[self.master.arr_index.key_stitch].parts, function(i, part){
                      if(self.custom_state.key_stitch_code == part.code && self.custom_state.key_stitch_code != null){
                        stitch_src.push(part.canvas[self.master.current.angle]);
                      }
                    });
                  }
                  //肩ひものステッチ
                  $.each(self.master.scene[self.master.arr_index.shoulder_stitch].parts, function(i, shoulder_part){
                    if(self.custom_state.shoulder_stitch_code == shoulder_part.code && shoulder_part.canvas[self.master.current.angle] != null){
                      stitch_src.push(shoulder_part.canvas[self.master.current.angle ]);
                    }
                  });
                  break;

                // カブセデザイン
                case 'kabuse_design_id':
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  // カブセデザインステッチの画像設定
                  $.each(self.master.scene[self.master.arr_index.kabuse_design_stitch].parts, function(sub_key, sub_value){
                    if(select_parts.code == sub_value.code && sub_value.canvas[self.master.current.angle] != null){
                      stitch_src.push(sub_value.canvas[self.master.current.angle]);
                    }
                  });
                  break;
                // サイドデザイン
                case 'machi_design_id':
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  // 大マチデザインステッチの画像設定
                  $.each(self.master.scene[self.master.arr_index.machi_design_stitch].parts, function(sub_key, sub_value){
                    if(select_parts.code == sub_value.code && sub_value.canvas[self.master.current.angle] != null){
                      stitch_src.push(sub_value.canvas[self.master.current.angle]);
                    }
                  });
                  break;
                case 'shoulder_strap_id':
                    image_src.push(select_parts.canvas[self.master.current.angle]);
                    break;
                //開閉ロック 内装時に表示するための仕様
                case 'key_id':
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  if(self.master.current.angle == 4){
                    $.each(self.master.scene[Object.keys(self.master.scene)[self.master.current_arr_index+1]].parts, function(i, part){
                      if(select_parts.code == part.code && part.canvas[self.master.current.angle] != null){
                        stitch_src.push(part.canvas[self.master.current.angle]);
                      }
                    });
                  }
                  break;
                //背中カラー肩ひも変更時の画像挿入
                case 'back_color_id':
                  if(self.custom_state.shoulder_strap_code == '07'){
                      image_src.splice(3, 0, select_parts.canvas[self.master.current.angle]);
                  }else{
                    if(Number(self.master.current.angle) == 1){
                      image_src.splice(3, 0, attach_path + 'attach/u_type-' + self.custom_state.product_id + '_step-6_code-' + self.custom_state.shoulder_strap_caption + '-' + self.custom_state.back_color_code + '_angle-2.png');
                    }else if(Number(self.master.current.angle) == 2){
                      image_src.splice(3, 0, attach_path + 'attach/u_type-' + self.custom_state.product_id + '_step-6_code-' + self.custom_state.back_color_code + '_angle-3.png');
                    }
                  }
                  break;
                //防犯ブザー用フック
                case 'security_buzzer_id':
                  if (self.custom_state.shoulder_strap_code == '07') {
                    attach_src.push(select_parts.canvas[self.master.current.angle]);
                  } else {
                    if (Number(self.master.current.angle) == 1) {
                      $.each(self.master.scene[self.master.arr_index.shoulder_strap].parts, function(keys, value) {
                        if (value.id == self.custom_state.shoulder_strap_id) {
                              let imagePath = attach_path + 'attach/u_type-' + self.custom_state.product_id + '_step-9_code-' + self.custom_state.security_buzzer_code + '-' + self.custom_state.security_buzzer_note + '_shoulder-' + self.custom_state.shoulder_strap_code + '-' + value.caption + '_angle-2.png';
                            attach_src.push(imagePath);
                        }
                      });
                    }
                  }
                  break;

                // ファスナーグリップ
                case 'fastener_puller_id':
                  attach_src.push(select_parts.canvas[self.master.current.angle]);
                  break;
                // カブセ飾り鋲
                case 'decoration_rivets_id':
                  // カブセ飾り鋲タイプA以外の時管理者画像選択
                  if(self.custom_state.product_id == 8){
                    image_src.push(attach_path + 'attach/' + self.custom_state.key_code + '/u_type-' + self.custom_state.product_id + '-' + self.custom_state.decoration_rivets_code + '.png'); // 管理画面対象外画像指定
                  }else{
                    image_src.push(select_parts.canvas[self.master.current.angle]);
                  }
                  break;
                // 720度全方向反射
                case 'reflection_id':
                　
                  // 肩紐が07の場合
                  if (self.custom_state.shoulder_strap_code == '07') {
                    attach_src.push(select_parts.canvas[self.master.current.angle]);
                    attach_src.push(attach_path + 'attach/' + 'u_type-' + self.custom_state.product_id + '_hansya-07-angle-' + (Number(self.master.current.angle) + 1) + '.png'); // 管理画面対象外画像指定
                  }
                  // 肩紐が07以外 
                  else if(self.master.current.angle == 4){
                    attach_src.push(attach_path + 'attach/' + 'u_type-' + self.custom_state.product_id + '_hansya-' + self.custom_state.shoulder_strap_caption + '-angle-5.png'); // 管理画面対象外画像指定
                    attach_src.push(select_parts.canvas[self.master.current.angle]);
                  }else{
                    attach_src.push(select_parts.canvas[self.master.current.angle]);
                  }
                  break;
                // ネームプレート
                case 'embroidery_id':
                  // ネームプレートが付けない以外の場合
                  if(embroidery_code != '01'){
                    // タイプごとの画像のURLに変更
                    select_parts.canvas[4] = attach_path + 'attach/u_type-' + self.custom_state.product_id + '_metal-plate-' + metalplate_type + '-' + select_parts.color + '.png'; // 管理画面対象外画像指定
                  }
                  // 上記で変更した画像URLを設定
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  break;
                default:
                  image_src.push(select_parts.canvas[self.master.current.angle]);
                  break;
              }
            }
          }
        }
      });
      // Attachments
      //Bタイプの開閉錠（ロック）タイプ
      if(self.custom_state.product_id ==　8 && self.custom_state.key_code == 5 && self.master.current.angle == 0){
        attach_src.push(attach_path + 'attach/' + 'u_type-08_hansya-mag-angle-1.png');
      }else if(self.custom_state.product_id ==　8 && self.custom_state.key_code != 8 && self.master.current.angle == 0){
        attach_src.push(attach_path + 'attach/' + 'u_type-08_hansya-nosmag-angle-1.png');
      }
      //車いす用フックギボシ上 ※null画ないか不安
      if(self.custom_state.wheelchair_hook_id != 8287 && self.custom_state.wheelchair_hook_id != 9312 && self.custom_state.wheelchair_hook_id != 976){
        attach_src.push(attach_path + 'attach/type-' + self.custom_state.product_id + '_' + 12 + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
      }
      //車いす用ベルトギボシ上 ※null画ないか不安
      if(self.custom_state.wheelchair_fixing_belt_id != 8293 && self.custom_state.wheelchair_fixing_belt_id != 9318 && self.custom_state.wheelchair_fixing_belt_id != 978){
        attach_src.push(attach_path + 'attach/type-' + self.custom_state.product_id + '_13_angle-' + (Number(self.master.current.angle) + 1) + '.png');
      }
    };
    imageSources();

    var loadTransparent = self.Loader(trans_src.length, function(){
      transparent.crossOrigin = "Anonymous";
      if(context_b) context_b.clearRect( 0 , 0 , 560 , 560 );
      transparent.forEach(function(value, key){
        if(!value.error_flag){
          context_b.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      attachForEach();
    });

    var loadAttachments = self.Loader(attach_src.length, function(){
      attachments.crossOrigin = "Anonymous";
      if(context_f) context_f.clearRect( 0 , 0 , 560 , 560 );
      attachments.forEach(function(value, key){
        if(!value.error_flag){
          context_f.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      stitchForEach();
    });


    // palletの2dコンテキストに画像描画
    var loadStitches = self.Loader(stitch_src.length, function(){
      stitches.crossOrigin = "Anonymous";
      if(context_p) context_p.clearRect( 0 , 0 , 560 , 560 );
      // 画像URL分をpalletの2dコンテキストに描画
      stitches.forEach(function(value, key){
        if(!value.error_flag){
          context_p.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      // ステッチカラーが有る場合
      if(stitch_color){
        // palletのイメージデータ
        var imgd = context_p.getImageData(0, 0, 560, 560);
        // palletのイメージデータに含まれるピクセルデータ
        var pix = imgd.data;
        // ステッチカラーのカラーコードをrgbに変換
        var uniqueColor = hex2rgb(stitch_color);
        // palletのイメージデータのピクセルの配列にステッチカラーを設定(rgbaで4カウントアップ)
        for(var i = 0, n = pix.length; i < n; i += 4){
          pix[i] = uniqueColor[0];   // Red component
          pix[i+1] = uniqueColor[1]; // Blue component
          pix[i+2] = uniqueColor[2]; // Green component
        }
        // palletのイメージデータにステッチカラーを設定したイメージデータを設定
        context_p.putImageData(imgd, 0, 0);
      }
      imageForEach();
    });

    // canvasの2dコンテキストに画像描画
    var loadImages = self.Loader(image_src.length, function(){
      images.crossOrigin = "Anonymous";
      if(context_c) context_c.clearRect( 0 , 0 , 560 , 560 );
      // 画像URL分をcanvasの2dコンテキストに描画
      images.forEach(function(value, key){
        if(!value.error_flag){
          context_c.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      if(trans_src.length) {
        context_c.drawImage(blending, 0, 0, 560, 560);
      }

      // ネームプレート入力有り
      if(self.custom_state.embroidery_content){
        // ネームプレートがゴールド・シルバーかつアングルが内装の場合
        if((self.custom_state.embroidery_code == '02' || self.custom_state.embroidery_code == '04') && self.master.current.angle == 4){
          // フォント
          context_c.font = "15px 'ＭＳ ゴシック'";
          // 文字色
          context_c.fillStyle = "black";
          // 0.5倍に拡縮
          context_c.scale(0.5, 0.5);
          if(self.custom_state.product_id != 9){
            // 10°回転する
            context_c.rotate(10 * Math.PI / 180);
            if(self.custom_state.metalplate_type == null || self.custom_state.metalplate_type == 10){
              // プレーンの場合はx:395,y:390,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 435, 360, 100);
            }else if(self.custom_state.metalplate_type == 12){
              // クラウンの場合はx:395,y:395,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 435, 365, 100);
            }else{
              // x:395,y:385,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 435, 355, 100);
            }
          }else{
            // 2°回転する
            context_c.rotate(12 * Math.PI / 180);
            if(self.custom_state.metalplate_type == null || self.custom_state.metalplate_type == 10){
              // プレーンの場合はx:395,y:390,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 468, 395, 100);
            }else if(self.custom_state.metalplate_type == 12){
              // クラウンの場合はx:395,y:395,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 468, 400, 100);
            }else{
              // x:395,y:385,maxWidth:100で文字を描画
              context_c.fillText(self.simulationText(false), 468, 390, 100);
            }
          }
        }else{
          // 文字の描画はしない
          context_c.fillText('', 20, 75, 200);
        }
        context_c.setTransform(1, 0, 0, 1, 0, 0);
      };
      // palletの2dコンテキストをcanvasの2dコンテキストに描画
      if(stitch_src.length) context_c.drawImage(pallet, 0, 0, 560, 560);
      // fittingの2dコンテキストcanvasの2dコンテキストに描画
      if(attach_src.length) context_c.drawImage(fitting, 0, 0, 560, 560);
      // canvasのロード中画像表示
      $('.spinner-canvas').fadeOut('fast', function(){
        // 価格更新
        self.updatePrice();
        // 重量更新
        self.updateWeight();
        // 完了フラグtrue
        self.finished = true;
      });
    });

    var transForEach = function(){
      if(trans_src.length){
        trans_src.forEach(function(value, key){
          transparent[key] = new Image();
          transparent[key].crossOrigin = "Anonymous";
          transparent[key].onload = function(){
            loadTransparent();
          };
          transparent[key].onerror = function(){
            this.error_flag = true;
            loadTransparent();
          };
          transparent[key].src = value;
        });
      }else{
        attachForEach();
      }
    };

    var attachForEach = function(){
      if(attach_src.length){
        attach_src.forEach(function(value, key){
          attachments[key] = new Image();
          attachments[key].crossOrigin = "Anonymous";
          attachments[key].onload = function(){
            loadAttachments();
          };
          attachments[key].onerror = function(){
            this.error_flag = true;
            loadAttachments();
          };
          attachments[key].src = value;
        });
      }else{
        stitchForEach();
      }
    };
    var stitchForEach = function(){
      if(stitch_src.length){
        stitch_src.forEach(function(value, key){
          stitches[key] = new Image();
          stitches[key].crossOrigin = "Anonymous";
          stitches[key].onload = function(){
            loadStitches();
          };
          stitches[key].onerror = function(){
            this.error_flag = true;
            loadStitches();
          };
          stitches[key].src = value;
        });
      }else{
        imageForEach();
      }
    };

    var imageForEach = function(){
      if(image_src.length){
        image_src.forEach(function(value, key){
          images[key] = new Image();
          images[key].crossOrigin = "Anonymous";
          images[key].onload = function(){
            loadImages();
          };
          images[key].onerror = function(){
            this.error_flag = true;
            loadImages();
          };
          images[key].src = value;
        });
      }else{
        $('.spinner-canvas').fadeOut();
      }
    };
    attachForEach();
  };

  // ネームプレートの入力文字の変換とhtmlへの反映
  this.simulationText = function(html){
    var str = self.custom_state.embroidery_content;
    str = str.replace(/①/g, '♪');
    str = str.replace(/②/g, '\ud83d\udda4');
    str = str.replace(/③/g, '★');
    str = str.replace(/④/g, '✿');
    if(html){
      str = str.replace(/ /g, '&nbsp;');
    }
    $('.input-metal-text-virtual-active').html(str);
    return str;
  };

  // 完成ボタンクリック時実行
  this.customSample = function(e){
    var target = e ? e.target : window.event.srcElement;
    // アングル保持
    var angle = self.master.current.angle;
    // 確認画面に表示するためにアングルを正面に変更
    self.master.current.angle = 0;
    // bootstrapのバリデーションエラーの数
    var errors = $('.has-error').size();
    // 読み込みアニメーション表示
    $('.spinner').fadeIn('fast', function(){
      // バリデーションエラーが1つでもある場合
      if(errors != 0){
        // 読み込みアニメーション非表示
        $('.spinner').fadeOut('fast', function(){
          // ネームプレートステップに移動しメッセージを表示
          self.master.current.step = self.getDisporderKey(self.master.arr_index.embroidery);
          swiperDetail.slideTo(self.master.current.step - 1);
          alert('ネームプレートに記入する文字を入力してください');
        });
      }else{
        // 完了フラグがtrueの場合
        if(self.finished){
          // canvasの画像をBase64のデータURL(文字列)として取得
          var dataUrl = canvas.toDataURL("image/png");
          // canvasの画像が有る場合
          if(dataUrl && dataUrl.size() >= 100000){
            // localStorageにデータURL保存
            localStorage.setItem("custom_image", dataUrl);
            // custom_stateにデータURL設定
            self.custom_state.custom_image = localStorage.getItem('custom_image');
            // custom_stateにアングル設定
            self.custom_state.angle = angle;
            // custom_stateに選択パーツ表示に使用する項目設定
            self.custom_state.arr_index = self.master.arr_index;
            self.custom_state.disp_order = self.master.disp_order;
            self.custom_state.item_names = {};
            self.custom_state.item_disp_names = {};
            $.each(self.master.arr_index, function(key, value){
              // 「color」などの項目名
              self.custom_state.item_names[value] = self.master.scene[value].item_name;
              // 「メインカラー」などの表示名
              self.custom_state.item_disp_names[value] = self.master.scene[value].name;
            });
            // localStorageにcustom_state保存
            localStorage.setItem('custom_order', JSON.stringify(self.custom_state));
            setTimeout(function(){
              // 試着画面に遷移
              window.location.href = './sample/?step=' + self.master.current.step;
            }, 500);
          }else{
            // 一定時間後に試着ボタンのクリックイベント発火
            setTimeout(function(){
              $(target).trigger('click');
              return false;
            }, 1000);
          }
        }else{
          // 一定時間後に試着ボタンのクリックイベント発火
          setTimeout(function(){
            $(target).trigger('click');
            return false;
          }, 1000);
        }
      }
    });
  };

  // ステップメニューの幅均等化
  this.stepMenuResize = function(){
    // ウィンドウ幅変更前のスクロール位置保持
    let sl = $('.ctl-step-current').get(0).scrollLeft;
    // 均等化前のデフォルトの幅に初期化
    $('.current-slide > label').css('width','');
    // 一番幅の大きい要素の幅取得
    let step_maxsize = 0;
    $('.current-slide').each(function(index, elm){
      if(step_maxsize < $(elm).width()){
        step_maxsize = $(elm).width();
      }
    });
    // ステップメニューの各項目の幅を一番幅の大きい要素に合わせる
    $('.current-slide > label').css('width',(step_maxsize + 2) + 'px');

    // スクロール設定前のデフォルトの値に初期化
    $('.step-bg-line').css({'width': ''});
    $('.ctl-step-current').css({'width': '','justify-content': ''});
    // ステップメニューの横幅がコンテンツの幅以上の場合にスクロールできるようにする
    if($('#simulation').width() < $('.ctl-step-current').width()){
      $('.step-bg-line').css({'width': '100%'});
      $('.ctl-step-current').css({'width': '100%','justify-content': 'normal'});
    }

    // ステップメニューがスクロールする場合
    if($('.ctl-step-current').get(0).clientWidth < $('.ctl-step-current').get(0).scrollWidth){
      // 強制的にステップメニューのスクロールイベントを発火させるためにanimateでスクロールさせる
      $('.ctl-step-current').animate({scrollLeft: sl + 1}, 0);
      $('.ctl-step-current').animate({scrollLeft: sl - 1}, 0);
    }else{
      // ボタン非表示
      $('.ctl-step-current .prev-btn').hide();
      $('.ctl-step-current .next-btn').hide();
    }
  }

  // パーツ選択欄のリサイズ時に実行
  this.itemListResize = function(){
    $('.item-list').each(function(index, elm){
      // ウィンドウ幅変更前のスクロール位置保持
      let sl = $(elm).get(0).scrollLeft;

      let pb = $(elm).children('.prev-btn');
      let nb = $(elm).children('.next-btn');
      // パーツ選択欄がスクロールする場合
      if($(elm).get(0).clientWidth < $(elm).get(0).scrollWidth){
        $(elm).css('justify-content', '');
        // 強制的にステップメニューのスクロールイベントを発火させるためにanimateでスクロールさせる
        $(elm).animate({scrollLeft: sl + 1}, 0);
        $(elm).animate({scrollLeft: sl - 1}, 0);
      }else{
        // スクロールがない場合は中央寄せ、左右ボタン非表示
        $(elm).css('justify-content', 'center');
        pb.hide();
        nb.hide();
      }
    });
  }

  // before the tag is mounted
  this.on('before-mount', function() {
  });

  // タグのマウント後に実行
  this.on('mount', function(){
    // ネームプレートの入力文字の変換とhtmlへの反映
    this.simulationText(true);

    // 対象(self)のdocumentReadyイベントを発火
    obs.trigger("documentReady", self);

    // All resources finished loading
    $(window).load(function(e){
      // 対象(e)のwindowLoadイベントを発火
      obs.trigger("windowLoad", e);
      // 初回ページローディング完了でローダーを非表示
      var loder = ($('.spinner').size()) ? $('.spinner') : null;
      if(loder && loder.data('mount') == 0){
        $('.spinner').fadeOut();
      }
    });

    // All resources finished loading & resize
    $(window).on("resize", function(e){
      // 対象(e.currentTarget)のwindowResizeイベントを発火
      obs.trigger("windowResize", e.currentTarget);
      // ステップメニューの幅均等化
      self.stepMenuResize();
      // パーツ選択欄の設定
      self.itemListResize();
    });

    // Canvas
    canvas = document.getElementById('canvas');
    if( !canvas || !canvas.getContext ) return false;
    context_c = canvas.getContext('2d');
    context_c.fillStyle = "gray";
    context_c.textAlign = "center";
    context_c.textBaseline = "middle";

    // pallet
    pallet = document.createElement('canvas');
    pallet.width = pallet.height = 560;
    if( !pallet || !pallet.getContext ) return false;
    context_p = pallet.getContext('2d');

    // fitting
    fitting = document.createElement('canvas');
    fitting.width = fitting.height = 560;
    if( !fitting || !fitting.getContext ) return false;
    context_f = fitting.getContext('2d');

    // blending
    blending = document.createElement('canvas');
    blending.width = blending.height = 560;
    if( !blending || !blending.getContext ) return false;
    context_b = blending.getContext('2d');

    // 現在のステップ数に初期値設定
    self.master.current.step = (q.step)? Number(q.step) : 1;

    // パーツ選択欄のswiper設定
    swiperDetail = new Swiper('.ctl-step-detail', {
      initialSlide: self.master.current.step - 1,
      slideClass: 'detail-slide',
      slidesPerView: 1,
      nextButton: '.btn-step-next',
      prevButton: '.btn-step-prev',
      spaceBetween: 0,
      //simulateTouch: false,
      //shortSwipes: false,
      longSwipes: false,
      followFinger: false,
      //allowTouchMove: false,
      autoHeight: true,
      threshold: 1920,
      onInit: function(swiper){
        self.update();
      },
      onSlideChangeStart: function(swiper){
        $(".not-apply").fadeOut();
      },
      onSlideChangeEnd: function(swiper){
        // 現在のステップ更新
        self.master.current.step = swiper.activeIndex + 1;
        // swiper更新
        swiper.update();
        // ステップメニュー切替tns
        $('input[name="step_current"]').prop('checked', false);
        $('input[name="step_current"][value="'+(self.master.current.step)+'"]').prop('checked', true);
        // アングル変更
        self.autoAngle();
        // パーツ選択欄の設定
        self.itemListResize();
      }
    });

    // ステップメニューの幅均等化
    self.stepMenuResize();
    // パーツ選択欄の設定
    self.itemListResize();

    // ステップメニュー変更時
    $('input[name="step_current"]').on('change',function(e){
      if(swiperDetail){
        // ステップメニューが変わったらパーツ選択欄のswiperも変更する
        self.master.current.step = e.target.value;
        swiperDetail.slideTo(self.master.current.step - 1);
      }
    });

    // ステップメニューがスクロールしたら実行
    let step_pb = $('.ctl-step-current .prev-btn');
    let step_nb = $('.ctl-step-current .next-btn');
    $('.ctl-step-current').on('scroll', function(e){
      // スクロール左端
      if(e.target.scrollLeft == 0){
        // 左ボタン非表示
        step_pb.hide();
      }else{
        // 左ボタン表示
        step_pb.show();
      }
      // スクロール右端
      if(e.target.clientWidth + e.target.scrollLeft >= e.target.scrollWidth){
        // 右ボタン非表示
        step_nb.hide();
      }else{
        // 右ボタン表示
        step_nb.show();
      }
    });
    // 左ボタンクリック
    step_pb.on('click', function(e){
      let ci_w = $('.current-slide').eq(0).width();
      $('.ctl-step-current').stop(true, true); // animateを停止
      $('.ctl-step-current').animate({
        scrollLeft: $('.ctl-step-current').scrollLeft() - ci_w
      }, 300, 'easeOutExpo');
    });
    // 右ボタンクリック
    step_nb.on('click', function(e){
      let ci_w = $('.current-slide').eq(0).width();
      $('.ctl-step-current').stop(true, true); // animateを停止
      $('.ctl-step-current').animate({
        scrollLeft: $('.ctl-step-current').scrollLeft() + ci_w
      }, 300, 'easeOutExpo');
    });

    // パーツ選択欄毎にイベントなど設定
    // base-itemの幅は全て同じなので先に取得しておく
    let biw = $('.base-item').eq(0).width();
    $('.item-list').each(function(index, elm){
      let pb = $(elm).children('.prev-btn');
      let nb = $(elm).children('.next-btn');

      // スクロールしたら実行
      $(elm).on('scroll', function(e){
        // スクロール左端
        if(e.target.scrollLeft == 0){
          // 左ボタン非表示
          pb.hide();
        }else{
          // 左ボタン表示
          pb.show();
        }
        // スクロール右端
        if(e.target.clientWidth + e.target.scrollLeft >= e.target.scrollWidth){
          // 右ボタン非表示
          nb.hide();
        }else{
          // 右ボタン表示
          nb.show();
        }
      });

      // 左ボタンクリック
      pb.on('click', function(e){
        $(elm).stop(true, true); // animateを停止
        $(elm).animate({
          scrollLeft: $(elm).scrollLeft() - biw
        }, 300, 'easeOutExpo');
      });
      // 右ボタンクリック
      nb.on('click', function(e){
        $(elm).stop(true, true); // animateを停止
        $(elm).animate({
          scrollLeft: $(elm).scrollLeft() + biw
        }, 300, 'easeOutExpo');
      });
    });

    // ネームプレートの入力欄
    $('input[name="embroidery_id"]').on('change',function(e){
      let elm = $(e.target).parents('.detail-slide').find('.sub-parts');
      if($(e.target).data('code') != '01'){
        // ネームプレートを付けない場合は非表示
        elm.show();
      }else{
        // ネームプレートを付ける場合は表示
        elm.hide();
      }
      if(swiperDetail){
        // swiperの高さ更新(時間は適当に0ms)
        swiperDetail.updateAutoHeight(0);
      }
      // ネームプレートのステップを表示している場合のみページ下部へスクロール
      if(self.master.current.step == self.getDisporderKey(self.master.arr_index.embroidery)){
        $('html, body').animate({ scrollTop: $('body').get(0).scrollHeight });
      }
    });
    $('input[name="embroidery_id"]:checked').change();

    // 防犯ブザーtns
    $('input[name="security_buzzer_parts_id"]').on('change',function(e){
      let elm = $(e.target).parents('.detail-slide').find('.sub-parts');
      if($(e.target).data('code') != '04'){
        // 防犯ブザーを付けない場合は非表示
        elm.show();
      }else{
        // 防犯ブザーを付ける場合は表示
        elm.hide();
      }
      if(swiperDetail){
        // swiperの高さ更新(時間は適当に0ms)
        swiperDetail.updateAutoHeight(0);
      }

    });
    $('input[name="security_buzzer_parts_id"]:checked').change();
  });

  // ステップ切り替え時のアングル変更
  this.autoAngle = function(){
    let scene_key = self.master.disp_order[self.master.current.step - 1];
    self.master.current.angle = self.master.scene[scene_key].default_angle;
    switch(scene_key){
      // チェストベルト
      case self.master.arr_index.shoulder_slip_belt:
        $(".not-apply").fadeIn(); // 「シミュレーションに反映していません」
      // 車椅子用フック
      case self.master.arr_index.wheelchair_hook:
        $(".not-apply").fadeIn(); // 「シミュレーションに反映していません」
      // 車椅子用ベルト
      case self.master.arr_index.wheelchair_fixing_belt:
        $(".not-apply").fadeIn(); // 「シミュレーションに反映していません」
      // 肩ひも
      case self.master.arr_index.shoulder_strap:
        break;
      // ネームプレート
      case self.master.arr_index.embroidery:
        // ネームプレートなしの場合は正面
        if(self.custom_state.embroidery_code == '01'){
          self.master.current.angle = 0;
        }
        break;
    }
    // riot.jsによる画面更新
    self.update();
  }

  // riot.jsによる画面の更新前処理を1度だけ実行(以降はupdateは実行されない)
  this.one('update', function(){
    this.master.current.step = (q.step)? Number(q.step) : 1;
    this.master.current.angle = (q.angle)? Number(q.angle) : 0;
  });

  // riot.jsによる画面の更新後処理を実行
  this.on('updated', function(){
    // パーツ選択欄の入力項目ループ
    $('.ctl-step-detail input').each(function(index, el){
      // 選択されている場合
      if($(this).prop('checked')){
        // 選択項目のcodeをcustom_stateに設定
        self.custom_state[$(this).data('name')] = $(this).data('code');
        // 選択項目のnameをcustom_stateに設定
        self.custom_state[$(this).attr('name').replace(/_id/g, "")] = $(this).data('title');
      }
    });
    // bootstrapを使用したネームプレート入力欄のバリデーション
    $('#form-embroidery-content').validator('update').validator('validate');
    // validation
    var errors = $('.has-error').size();
    // パーツ選択欄のswiperが存在する場合(現状はほぼ意味のないものだがswiperのステップ遷移ボタンを追加する場合に使用)
    if(swiperDetail){
      // 最終ステップ&ネームプレートあり&ネームプレート入力欄バリデーションエラーあり
      if(self.master.current.step == self.master.disp_order.length && self.custom_state.embroidery_code != '01' && errors){
        // swiperの次ステップボタン非表示
        $('.btn-step-next').addClass('btn-step-next-disabled');
        // 次ステップへの移動無効
        swiperDetail.lockSwipeToNext();
      }else{
        // swiperの次ステップボタン表示
        $('.btn-step-next').removeClass('btn-step-next-disabled');
        // 次ステップへの移動有効
        swiperDetail.unlockSwipeToNext();
      }
    }
    // メインカラー・コンビカラーのタブ切り替え時
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // パーツ選択欄のswiper更新
      swiperDetail.update();
    });
    // draw customize
    if(self.redrawing) this.drawCustomize();
    self.redrawing = true;
  });

  // タグのアンマウント直前に実行
  this.on('before-unmount', function() {
    swiperDetail.destroy(true, true);
    $('.spinner').fadeIn();
  });

  </script>
</urandcel>
<raw>
  <span></span>
  this.root.innerHTML = opts.content.replace(/\r?\n/g, '<br>').replace(/&lt;br&gt;/g, '<br>').replace(/\\n/g, '<br>');
  this.on('update', function() {
    this.root.innerHTML = opts.content.replace(/\r?\n/g, '<br>').replace(/&lt;br&gt;/g, '<br>').replace(/\\n/g, '<br>');
  });
</raw>