@charset "UTF-8";

body {
    background-image: url(../images/navTile.png);
    background-repeat: repeat;
    background-size: 16px 16px;
    font-family: "M PLUS 1", 'Noto Sans JP', sans-serif;
    font-size: 14px;
    width: 580px;
    margin: 0 auto;
}
.title {
    max-width:100%;
    height:50px;
    background-color:#fff;
    border:1px solid #000;
    text-align: center;
    font-size:40px;
    font-weight:bold;
    padding-bottom:8px;
}
.version1 {
    display: flex;
}
.calculator {
    justify-content: center;
}
.flexBox {
    display: flex;
}
.calculate {
    width:400px;
    height:250px;
    display:grid;
    grid-template-rows:20% 16% 16% 16% 16% 16%;
    grid-template-columns:25% 25% 25% 25%;
    margin-right:10px;
}
.display {
    background-color:#fff;
    border:1px solid #000;
    text-align:end;
    grid-row:1/2;
    grid-column:1/5;
    font-size:40px;
}
.cButton {
    border:1px double #000;
    text-align: center;
    background-color:rgb(223, 223, 223);
}
.ope {
    font-size:20px;
    font-weight:bold;
}
.num {
    font-size:25px;
    font-weight: bold;
}
.allClear {
    grid-row:6/7;
    grid-column:1/2;
}
.oneClear {
    grid-row:6/7;
    grid-column:2/3;
}
.Ecall {
    border:1px double #000;
    text-align: center;
    background-color:rgb(223, 223, 223);
    grid-row:6/7;
    grid-column:3/5;
}
.flow {
    background-color: #fff;
    border: 1px solid #000;
}
.calcFlow {
    width:170px;
    height:250px;
    text-align:center;
    display:grid;
    grid-template-rows:10% 15% 10% 15% 10% 15% 10% 15%;
    grid-template-columns:100%;
}

.calcFlow p.flow {
    margin: 0;
}

.calcFlow input.flow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
}
ol {
    border:1px solid #000;
    background-color: #fff;
    margin: 0 auto;
}

.messageWindow {
    border:2px double #181820;
    height:300px;
    max-width:100%;
    margin-top:20px;
    white-space: pre-wrap;
    overflow : hidden scroll;
    background-color:  #fff;
    font-size: 16px;
}
/* ゲームウインドウらしく点滅させる。 */

.messageWindow::after {
    content: " _";
    animation: blinking 1s steps(1, end) infinite;
}