@charset 'utf-8';

@font-face {
 font-family: 'noto';
 src: url(NotoSansJP-Regular.otf);
}

* {
 box-sizing: border-box;
 font-family: noto;
}

main {
 display: flex;
}

table {
 border-collapse: collapse;
}

td {
 width: 1.8em;
 height: 1.8em;
 border: 1px solid #000;
 text-align: center;
 vertical-align: middle;
 font-size: 2.2em;
 padding: 0;
}

.can-put {
 background-color: #ff0;
}

.put {
 background-color: #0f0;
}

.change {
 background-color: #afa;
}

#message {
 height: 1.5em;
}

#count {
 display: flex;
}

.black,
.white {
 padding: 5px 10px;
 width: 5em;
}

.black {
 background-color: #000;
 color: #fff;
}

.white {
 background-color: #fff;
 color: #000;
}