* { padding: 0; margin: 0 ;
  background-color: black;}

  body{
    font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  }
  
  
  #container{
    height: 100%;
    width: 100%;
    
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  
  /* Safari */
  _:lang(x)+_:-webkit-full-screen-document, #container {
  
    position: fixed; bottom: 0;
  
    height: -webkit-fill-available;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    display: block;
    
  }
  
  #canvas {
    width: 100%; 
    height: 100%;
    background: #000000 
  }
  
  #loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }  
  #loadingComent { width: 900px; height: 350px; 
    /* background: url('opComent2.png') no-repeat center  */
  }
  #progress-bar-empty { width: 600px; height: 9px; margin: 15px auto; background: url('progress-bar-empty-dark.png')  }

  #csvTitle{
    font-size: 36px;
    padding-top: 0px;
    text-align: center;
    color: white;
  }
  #csvMainText{
    font-size: 28px;
    padding-top: 17px;
    text-align: center;
    color: white;
  }

  .info{
    display: flex;
    justify-content: left;
    padding-left: 30%;
    padding-top: 50px;
    padding-bottom: 10px;
  }

  #info1,#info2{
    font-size: 19px;
    color: white;
  }

  
  
  @media (orientation: landscape){

    
    .info{
      display: flex;
      justify-content: left;
      padding-top: 25px;
      padding-left: 20%;
      padding-bottom: 6px;
    }
  
    #info1,#info2{
      font-size: 10px;
      color: white;
    }

    #csvTitle{   
      font-size: 19px;
      padding-top: 8px;
    }

    #csvMainText{
      font-size: 14px;
      padding-top: 10px;
    }
  
    #loading-bar { 
      position: absolute;
      left: 50%; top: 50%; 
      transform: translate(-50%, -50%); 
      display: none;
    }
  
    #loadingComent { 
      width: 450px; height: 200px; 
      /* background: url('opComent2.png') no-repeat center; */
      background-size: 80%; 
      margin: 0 auto;
    }
  
    #progress-bar-empty { width: 400px; height: 9px; margin: 15px auto; background: url('progress-bar-empty-dark.png')  }
  }
  
  
  
  #progress-bar-full { width: 0%; height: 18px; margin-top: 30px; background: url('progress-bar-full-dark.png')  }
  /* .mobile{ display: none } */