cerke_board.css

body {
    display: flex;
    margin-bottom: 0px;
}

input[type="submit"] {
    width: 80px;
    height: 30px;
    margin: 5px;
}

/* 配置 */
#playarea {
    width: 584px;
}

#environment {
    display: block;
    margin-top: 55px;
    margin-left: 40px;
}

#piece_list {
    border: 1px solid #000000;
    margin: 20px auto;
}

#console {
    margin: 20px auto;
}

#choice {
    height: 24px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 20px;
}

#rest {
    width: 330px;
    display: none;
}

/* 駒*/
.piece {
    width: 51px;
    height: 51px;
    padding: 3px;
}

.reverse {
    transform: scale(-1);
}

/* 駒リスト */
.piece_img {
    height: 50px;
    width: 50px;
    border-top: 1px solid #000000;
    padding: 3px;
}

.piece_num {
    text-align: center;
    height: 30px;
    border-bottom: 1px solid black;
    margin: 3px 0px;
}

.hidden_cell {
    visibility: hidden;
}

/* 盤と手駒 */
table {
    border-collapse: collapse;
}

#board {
    margin: 2px 0px 15px 0px;
}

.handspace {
    height: 65px;
    width: 550px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    display: inline-block;
}

.cell {
    width: 58px;
    height: 60px;
    border: 1px solid #000000;
}

.tarfe {
    background-color: #ff9955;
}

.tanna {
    background-color: #87cde0;
}

.tanzo {
    background-color: #536b53;
}

.coordinate {
    padding: 1px 5px;
    text-align: center;
}

.blinking {
    margin: -5px;
    border: 5px solid #9ae2ff;
    animation-name: blinking;
    animation-duration: 1s;
    animation-iteration-count: 100;
}

@keyframes blinking {
    50% {
        border-color: #ffcd5f;
    }
}