@charset "UTF-8";

input{
  font-size: 1.5rem;
}


#fixed_ratio{
  font-size: 1.5rem;
  vertical-align: bottom;
  width: 10rem;
}



.center{
  text-align: center;
}


/*レンジスライダーを使いやすいように*/
 #AB, #BC, #CA{
  -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 2.0rem; /* バーの高さ */
  width: 65vw; /* バーの幅 */
  background: #CCCCCC; /*#8acdff;*/ /* バーの背景色 */
  border-radius: 15px; /* バーの両端の丸み */
  border: solid 0px #dff1ff; /* バー周囲の線 */
  display:inline-block;
  vertical-align: sub;
 }

 /*レンジスライダーのつまみの設定*/ /* WebKit向けのつまみ */
 #AB::-webkit-slider-thumb, #BC::-webkit-slider-thumb, #CA::-webkit-slider-thumb{
   -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
   background: #FFFFFF;/*#53aeff;*/ /* 背景色 */
   border: 1px solid #888888;
   width: 4rem;/*24px;*/ /* 幅 */
   height: 4rem; /* 高さ */
   border-radius: 50%; /* 円形に */
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
 }


 canvas{
   width: 95vmin;
   max-width: 70vh;
 }