@charset "UTF-8";

/* ======== BASIC ======== */
html {
  overflow-y:scroll;
}

body {
  margin:0;
  padding:0;
  font-family:Verdana, Helvetica, sans-serif;
  color:#333;
  font-size:16px;
  background:#fff; 
  position:relative;  
}

br {
  letter-spacing:normal;
}

a {
  color:#4169e1;
  text-decoration:none;
}

a:hover {
  color:#6495ed;
  text-decoration:underline;
}

h1,h2,h3,h4,h5,h6 {
  margin:0;
}

/* Media Queries 769px以上 */
@media screen and (min-width: 769px){  
  #top {
    width:960px;
    margin:0 auto;
    background:#fff;
  }

  #header {  
    position:relative;
    width:960px;
    height:70px;
    background:#fff;
  }

  #contents {
    clear:both;
    width:960px;
    margin-top:10px;
    background:#fff;  
  }

  #main {
    float:left;
    width:695px;
    padding: 5px;
    background:#fff;  
  }

  #menu{
    float:left;
    width:242px;
    margin-left:8px;
  }

  #main h1{
    font-size:32px; 
    margin-left:8px;  
  }
  
  #main h2{
    font-size:20px; 
    border-bottom:2px dotted #1e90ff;
    border-left:10px solid #1e90ff;
    padding:7px;
    margin-left:8px;  
  }  

  #main p{
    padding: 0 8px 0 22px;  
    line-height: 170%; 
    word-break: break-all;
  }

  #main #option table{
    width:365px;    
    margin: 0 8px 0 21px;  
    border: 1px solid #1e90ff;  
    border-collapse: collapse;
  }

  #main #option table th{
    padding:5px;
    font-size:14px;  
    border: 1px solid #1e90ff;
    background:#f0f8ff;
  }

  #main #option table td{
    padding:5px;
    font-size:14px;
    border:1px solid silver;
  }
  
  #main btn_record{
    
  }
  
  #main btn_stop{
    margin:0;      
  }  

  button { 
    margin: 0 8px 0 17px;  
    width:165px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    padding:8px 0 10px 0;
    color:#fff;
    background-color:#ff6347;
  }

/*
  button:hover{
    margin: 0 8px 0 17px;    
    width:165px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    padding:8px 0 10px 0;
    color:#fff;
    background-color:#ff4500;
  }
*/
  
  #progress_convert table td{
    border: 0;  
  }
    
  canvas { 
    margin-left:18px; 
    border:1px solid #ccc;  
    width:300px;
    height:200px;     
  }
    
  #footer {
    position:relative;
    clear:both;
    width:960px;
  }

  img {
    border:0;
  }  
  
  .pc{
    
  }

  .sp{
    display:none;
  }
      
}

/* Media Queries 768px以下 */
@media screen and (max-width:768px){
  
  #top {
    width:100%;
    margin:0 auto;
    background:#fff;
  }

  #header {  
    width:95%;
    padding-left:5px;
    padding-top:5px;
  }

  #contents {
    clear:both;
    width:95%;
    margin-top:10px;
    background:#fff;  
  }

  #main {
    width:95%;
    padding: 10px;
    background:#fff;  
  }

  #menu{
    display:none;
  }

  #main h1{
    font-size:32px; 
    margin-left:0;  
  }

  #main h2{
    font-size:20px; 
    border-bottom:2px dotted #1e90ff;
    border-left:10px solid #1e90ff;
    padding:7px;
    margin-left:0;  
  }

  #main p{
    padding: 0 8px 0 0;  
    line-height: 170%; 
    word-break: break-all;
  }

  #main #option table{
    margin: 0 8px 0 0;  
    border: 1px solid #1e90ff;  
    border-collapse: collapse;
  }

  #main #option table th{
    padding:5px;
    font-size:14px;  
    border: 1px solid #1e90ff;
    background:#f0f8ff;
  }

  #main #option table td{
    padding:5px;
    font-size:14px;
    border:1px solid silver;
  }
  
  #main btn_record{
    margin:0;  
  }
  
  #main btn_stop{
    margin:0;      
  }    
  
  button { 
    margin: 0 0 0 0;  
    width:130px;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    padding:8px 0 10px 0;
    color:#fff;
    background-color:#ff6347;
  }

  button:hover{
  }
    
  #progress_convert table td{
    border: 0;  
  }  
    
  canvas { 
    margin-left: 0; 
    border:1px solid #ccc;
    width:300px;
    height:200px;         
  }
    
  #footer {
    position:relative;
    clear:both;
    width:100%;
  }
  
  img {
    border:0;
    max-width: 95%;
    height:auto;
    width :auto;    
  }  
  
  .pc{
    display:none;
  }

  .sp{
    
  }
    
  body{
   /*
     For older smartphones
     word-wrap:break-word;
   */
  }
}

#SrcCanvas,#DstCanvas,#generating{ 
  margin: 0 8px 0 18px;  
}

#progress_convert,#progress_load,#progress_save {
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  width:260px;
  height:40px;
  padding:10px;
  background-color:#fff;
  border :2px solid #ccc;
  margin:300px auto;
}  

#contents:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
} 

/* ========HEADER CUSTOMIZE======== */
#header .pr {
   position:absolute;
   top:8px;
   right:0;
}

/* ======== MAIN CUSTOMIZE ========= */

#main h3{
  font-size:18px;   
  border-left:15px solid #1e90ff;
  padding:7px;
  background:#f0f8ff;
  margin-left:8px;    
}

#main .box{
  border: 1px solid #1e90ff;
  margin: 0 8px 0 18px;  
  padding:10px;
  background:#f0f8ff;
}

#main th{
  padding:5px;
  font-size:18px;  
  border: 1px solid #1e90ff;
  background:#f0f8ff;
}

#main td{
  padding:5px;
  font-size:18px;
  border:1px solid silver;
}

#social {
  margin: 0 8px 0 0;  
}

#main #social table{
  border: 0;  
}

#main #social table th{
  border: 0;  
}

#main #social table td{
  border: 0;  
}

/* ======== MENU CUSTOMIZE ========= */

#menu h4{
  padding-left:25px;
  height:25px;   
  word-break: break-all;
  background:url("../images/menu_h4.gif") no-repeat;
  border-bottom:1px solid silver;
}

/* ======== FOOTER CUSTOMIZE ======== */
.copyright {
  padding:10px 0 20px 0;
  text-align:center;
  font-style:normal;
  font-size:13px;
  color:#fff;
  border-top:2px solid #1e90ff;
  background:#1e90ff;
}

.copyright a{
  color:#fff; 
}

.copyright a:hover{
  color:#fff; 
  text-decoration:underline;
}