window.U1REmbed = {
    init() {
        if (!document.querySelector(".u1r")) {
            const divElement = document.createElement("div");
            divElement.classList.add("u1r");
            // divElement.classList.add("open"); // dev
            divElement.innerHTML = `  <style>
    .u1r .u1r-embedded * {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      font-size: 15px;
      line-height: 20px;
    }
    .u1r .u1r-embedded .u1r-embedded-a {
      box-sizing: content-box;
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #f45d6a;
      width: 40px;
      height: 40px;
      text-align: center;
      padding: 10px;
      border-radius: 50%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .u1r .u1r-embedded .u1r-embedded-a span{
      display: block;
    }
    .u1r .u1r-embedded .u1r-embedded-iframe {
      display: flex;
      flex-direction: column;
      transition: 0.33s ease-in-out;
      position: fixed;
      right: 0;
      bottom: 0;
      max-width: 450px;
      max-height: 800px;
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      z-index: -1;
      opacity: 0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    }
    .u1r.open .u1r-embedded .u1r-embedded-iframe {
      transition: 0.33s ease-in-out 0.16s;
      z-index: 9999;
      opacity: 1;
    }
    .u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-header {
      background: #f45d6a;
      flex: 0 0;
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }
    .u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-body {
      flex: 1 1 auto;
    }
    .u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-body iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    .u1r .u1r-embedded .u1r-embedded-backdrop {
      box-sizing: content-box;
      transition: 0.33s ease-in-out 0.16s;
      position: fixed;
      background: #f45d6a;
      right: 20px;
      bottom: 20px;
      max-width: 450px;
      max-height: 800px;
      width: 40px;
      height: 40px;
      padding: 10px;
      border-radius: 50%;
      z-index: 0;
      /* opacity: 0; */
    }
    .u1r.open .u1r-embedded .u1r-embedded-backdrop {
      transition: 0.33s ease-in-out;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      z-index: 10;
      opacity: 1;
    }
  </style>
  <div id="u1r_embed_button" class="u1r-embedded">
    <a class="u1r-embedded-a" href="javascript:" onclick="U1REmbed.run()"><span>来店予約</span></a>
    <div class="u1r-embedded-iframe">
      <div class="u1r-embedded-iframe-header">
        <div class="u1r-embedded-iframe-header-title">来店予約</div>
        <a class="u1r-embedded-iframe-header-close" onclick="U1REmbed.close()">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 30 30" style="vertical-align: text-bottom;">
            <path fill="#fff" d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z"></path>
          </svg>
          閉じる
        </a>
      </div>
      <div class="u1r-embedded-iframe-body">
        <iframe data-app-src="https://u1r.dva.jp/app/dvk"></iframe>
      </div>
    </div>
    <div class="u1r-embedded-backdrop"></div>
  </div>`;
            document.body.append(divElement);
        }
    },
    iframeLoad() {
        const iframe = document.querySelector(
            ".u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-body iframe"
        );
        if (iframe && !iframe.src) iframe.src = iframe.dataset.appSrc;
    },
    run() {
        const u1r = document.querySelector(".u1r");
        if (u1r) {
            u1r.classList.add("open");
            this.iframeLoad();
        }
    },
    close() {
        if (document.querySelector(".u1r")) {
            const u1r = document.querySelector(".u1r");
            u1r.classList.remove("open");
        }
    },
};

window.addEventListener("load", window.U1REmbed.init);