@charset "utf-8";
/* CSS Document */
html, body { height: 100%; margin: 0; }
    body { margin: 0; font-family: "Noto Sans JP", sans-serif; }
    canvas { width: 100%!important; height: 50svh!important; touch-action: none; position: fixed; top:0; left: 0; }
    #wrap { background-color: #FFF; width: 100%!important; height: calc(50svh - 50px - 60px )!important; padding: 15px; box-sizing: border-box; border-bottom: 1px solid #ddd; overflow: auto; position: fixed; bottom: 60px; left: 0; font-size: 16px; }
      
      div.update { height: 60px; width: 100%; line-height: 60px; text-align: center; cursor: pointer; background-color: #FF3200; color: #FFF; font-weight: bold; position: fixed; bottom: 0; left: 0;font-family: "Ubuntu", sans-serif;}
div.update:before { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("../img/refresh.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: .5em;}
      
      .ql-toolbar.ql-snow,.ql-container.ql-snow { border: none!important; border-bottom: 1px solid #ccc!important;}
      .ql-toolbar.ql-snow { position: fixed; bottom: calc(50svh - 50px - 60px + 60px ); width: 100%;border-top: 1px solid #ccc!important; z-index: 9;}

#overlay { background-color: rgba(0,0,0,.7); width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: -1; opacity: 0; background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 50px; }
.load #overlay { z-index: 10; opacity: 1;}

    
    @media (orientation: landscape) {
      canvas { width: 50%!important; height: calc(100svh - 50px)!important; position: fixed; top: 0px; left: 50%; border-left: 1px solid #ddd; }
      #wrap { width: 50%!important; height: calc(100svh - 50px)!important; border-bottom: 0px solid #ddd; position: fixed; top: 50px; left: 0%; }
        .ql-toolbar.ql-snow { width: 50%; position: fixed; top:0; left: 0;z-index: 1; bottom: auto; border-top: none!important;}
    }