.scan_area {
    position:relative;
    
  }
  #photo-area.viewport video,
  #photo-area.viewport canvas {
    width:100%;
    /* height:90vh; */
    max-width: 800px;
    /* max-height:600px; */
  }
  /* videoとcanvasを重ねて表示 */
  #photo-area.viewport canvas,
  #photo-area.viewport div#layer {
    position: absolute;
    top:0;left:0;
  }
  .scan_area div#scanLayer {
      position: absolute;
        top:0;left:0;
      width:100%;
      height:100%;
  }
  
  .scan_area div#scanLayer div{
      position: absolute;
      top:0;left:0;
      background:#000000;
      opacity: 0.4;
  }
  .scan_area div#scanLayer div.a1,
  .scan_area div#scanLayer div.a2 {
      width:100%;
      height:calc(35% - 4px);
  }
  .scan_area div#scanLayer div.a3,
  .scan_area div#scanLayer div.a4 {
      width:20%;
      height: 30%;
      top:calc(35% - 4px);
  }
  .scan_area div#scanLayer div.a2{
      /* margin-top:45%; */
      height:35%;
      top:calc(65% - 4px);
  }
  .scan_area div#scanLayer div.a4{
      left:80%;
  }