@charset "UTF-8";

/*body{
  font-style: italic;
}*/


canvas{
  border: 2px solid #000;
  display: block;
  margin: 0 auto;
  width: 95vmin;　/*本当は他と同じようにやりたいが，とりあえずこれでうまくできるようにする．*/
  /*max-width: 75vh;*/
  background-color: white;
}

button{
  font-size: 1.5rem;
}

.canvas_title{
  border-bottom: 1px solid black;
  text-align: center;
}

.canvas_body{
  display: block;
  padding: 0 auto 0;
  text-align: center;
  font-size: 1.5rem;
}

/*力の数のセレクトボックスのサイズを操作しやすいように設定する*/
#force_num{
  font-size: 1.5rem;
  vertical-align: bottom;
  width: 4rem;
}

.table{
  display: inline-block;
  padding:  0  auto 0;
  font-size: 1.5rem;
}

input{
  font-size: 1.5rem;
}

/*係数a*/
#mass{
  font-size: 1.0rem;
  width: 5rem;
}

/*係数b（初期位相）*/
#theta{
  font-size: 1.5rem;
  vertical-align: bottom;
  width: 5rem;
}


/*表示色*/
#color{
  font-size: 1.5rem;
  vertical-align: bottom;
  width: 5rem;
}


/*一般角をセレクトボックスより入力*/
#phase3{
  font-size: 1.5rem;
  vertical-align: bottom;
  width: 5rem;
}

  .center{
    text-align: center;
  }

  /*スクロールに関係なく位置を固定して表示したい場合*/
  .fixed{
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    /*inset: 0;
    margin: auto;*/
  }

 /*スマホに対応するようにする．*/
  @media (orientation: portrait) {
  .fixed{
    position: relative;
  }
  .table{
    font-size: 3.0rem;
  }
}