/* テーブルの装飾 */
table {
    /* 電卓のサイズ */
    width: 300px;
    height: 400px;
    /* 電卓が浮き出るように影を付ける */
    border: solid 1px #dcdcdca4;
    border-right: solid 4px #dcdcdca4;
    border-bottom: solid 4px #dcdcdca4;
    border-radius: 10px;
    /* インライン要素を中央に配置 */
    text-align: center;
    /* 余白調整 */
    padding: 8px;
    /*margin: 20px;*/
  }
  
  input[type="button"] {
    /* ボタンのサイズ */
    width: 70px;
    height: 70px;
    /* ボタンの文字サイズ */
    font-size: x-large;
    /* 数字部分の背景色 */
    /*background-color: #dcdcdca4;*/
    /* ボタンの詳細設定 */
    border: none;
    border-radius: 20px;
    /* クリック時の黒枠を消す */
    outline: none;
  }
  
  /* ディスプレイの詳細設定 */
  .display {
    height: 70px;
    font-size: x-large;
    width: 250px;
    text-align: right; /* 文字を右詰めに */
    /* 見た目の詳細設定 */
    background: #ffffff;
    border-top: solid #dcdcdca4 5px;
    border-bottom: solid #dcdcdca4 5px;
    border-right: solid #b6b6b6 6px;
    border-left: solid #b6b6b6 6px;
    border-radius: 5px;
  }
  /* 演算子の背景色を上書きで設定 */
  .operator {
    background-color: #87cefa;
  }
  .ac {
    background-color: #85f999;
  }
  
  /* カーソルを上に乗せた時に色を濃くする */
  input:hover {
    background: #747373b9;
  }
  .display:hover {
    background: #ffffff; /* ディスプレイ部分は無効化 */
  }
  .operator:hover {
    background: #339cdd;
  }
  .ac:hover {
    background: #1fff44;
  }
  
  /* クリック時に色を濃くする */
  input:active {
    background:  #5a5a5a;
  }
  .operator:active {
    background: #2c80b4;
  }
  .background:active {
    background: #3cfb5c;
  }
  
  .dentaku {
    /*width: 55%;*/
    padding: 10px;
  }
  
  .share {
    /*width: 45%;*/
    padding: 10px;
    text-align: center;
  }
  
  /*.main{
    display: flex;
  }*/
  
  table {
    margin-left:auto;
  }
  
  /*@media screen and (min-width: 800px){
    
  }*/