#col_left {width: 20%; float: left ;}
#col_right {width: 80%; float: right; background-color: #87f1ffa9; }

.right{text-align: center; height: 20rem; }

h1 {
    color: #0000ff
}
body {
    font-family:  "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
li {
    line-height: 1.8; 
    font-size: 20px;  
    font-weight: bold;  
}


.menu{
    color: #000dff;
    font-size: 30px;  
    font-weight: bold; 
}
.gallery{
    color: #0742b0c9;
    font-size: 24px;  
    font-weight: bold;
    text-align: center; 
}

#calc input{
    width: 270px;
    height:50px;
    padding: 10px;
    margin: 5px;
    text-align: right;

}
#calc button {
    width: 50px;
    padding: 10px;
    margin: 4px;
        font-size: x-large;
            /* 数字部分の背景色 */
        background-color: #ffffff;
            /* ボタンの詳細設定 */
        border: none;
        border-radius: 20px;
            /* クリック時の黒枠を消す */
        outline: #000000;
}
.btn-red {
    background-color:grey;
}
.btn-orange {
    background-color:blue;
}
#calc button:hover {
    background: #747373b9;
}
input {
        /* ボタンのサイズ */
    width: 500px;
    height:50px;
        /* ボタンの文字サイズ */
    font-size: x-large;
        /* 数字部分の背景色 */
    background-color: #ffffff;
        /* ボタンの詳細設定 */
    border: none;
    border-radius: 20px;
        /* クリック時の黒枠を消す */
    outline: none;
}
      /* カーソルを上に乗せた時に色を濃くする */
input:hover {
    background: #747373b9;
}