table, td, th {
    border: none;
    text-align: center;
}

table, td>* {
    margin-left: auto;
    margin-right: auto;
}

td, th {
    padding-left: 20px;
    padding-right: 20px;
}

tr:nth-child(1) {
    border-bottom: 1px solid black;
}

/* 〇次元 */
.bingo-5-0 {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid black;
}

/* 一次元：m=5 */
.bingo-5-1 {
    box-sizing: border-box;
    width: 122px;
    height: 26px;
    border: 1px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        );
}

/* 二次元：m=5 */
.bingo-5-2 {
    box-sizing: border-box;
    width: 122px;
    height: 122px;
    border: 1px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 1px,
            #fff 1px,
            #fff 23px,
            #000 23px,
            #000 24px
        );
}

/* 三次元 */
/* 空間クラス */
.canvas {
    height: 122px;
    transform-style: preserve-3d;
    /* perspective: 3000px;
    perspective-origin: 1500px -1000px; */
    perspective: 1000px;
    perspective-origin: 500px -300px;
    margin: 40px;
}

/* 立方体クラス */
.cube {
    margin: 0 auto;
    width: 122px;
    transform-style: preserve-3d;
}

/* 立方体の面クラス */
.cube-face {
    box-sizing: border-box;
    position: absolute;
    width: 122px;
    height: 122px;
}

/* マスクラス */
.square {
    background-color: #99ff66;
    position: absolute;
}

.square5 {
    background-color: #99ff66;
    position: absolute;
    width: 22px;
    height: 22px
}

/* 特殊マスクラス */
.origin {
    background-color: #33cc00;
}

.orange {
    background-color: #ff9966;
}

/* 立方体の各面：m=3 */
.cube-face-front {
    transform: translateZ(61px);
    border: 1px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 39px,
            #000 39px,
            #000 40px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 1px,
            #fff 1px,
            #fff 39px,
            #000 39px,
            #000 40px
        );
}

.cube-face-righthand {
    transform: rotateY(90deg) translateZ(61px);
    /* border: 1px solid black; */
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 0px,
            transparent 0px,
            transparent 36px,
            #000 36px,
            #000 40px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 1px,
            #fff 1px,
            #fff 39px,
            #000 39px,
            #000 40px
        );
}

.cube-face-ceiling {
    transform: rotateX(90deg) translateZ(61px);
    /* border: 1px solid black; */
    border-left: 2px solid black;
    border-top: 2px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 39px,
            #000 39px,
            #000 40px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 0px,
            #fff 0px,
            #fff 36px,
            #000 36px,
            #000 40px
        );
}

.front-top-left {
    width: 38px;
    height: 38px;
    translate: 1px 1px;
}

.front-top-center {
    width: 38px;
    height: 38px;
    translate: 41px 1px;
}

.front-top-right {
    width: 38px;
    height: 38px;
    translate: 81px 1px;
}

.front-middle-left {
    width: 38px;
    height: 38px;
    translate: 1px 41px;
}

.front-middle-center {
    width: 38px;
    height: 38px;
    translate: 41px 41px;
}

.front-middle-right {
    width: 38px;
    height: 38px;
    translate: 81px 41px;
}

.front-bottom-left {
    width: 38px;
    height: 38px;
    translate: 1px 81px;
}

.front-bottom-center {
    width: 38px;
    height: 38px;
    translate: 41px 81px;
}

.front-bottom-right {
    width: 38px;
    height: 38px;
    translate: 81px 81px;
}

.righthand-top-left {
    width: 36px;
    height: 38px;
    translate: 0px 1px;
}

.righthand-top-center {
    width: 36px;
    height: 38px;
    translate: 40px 1px;
}

.righthand-top-right {
    width: 36px;
    height: 38px;
    translate: 80px 1px;
}

.righthand-middle-left {
    width: 36px;
    height: 38px;
    translate: 0px 41px;
}

.righthand-middle-center {
    width: 36px;
    height: 38px;
    translate: 40px 41px;
}

.righthand-middle-right {
    width: 36px;
    height: 38px;
    translate: 80px 41px;
}

.righthand-bottom-left {
    width: 36px;
    height: 38px;
    translate: 0px 81px;
}

.righthand-bottom-center {
    width: 36px;
    height: 38px;
    translate: 40px 81px;
}

.righthand-bottom-right {
    width: 36px;
    height: 38px;
    translate: 80px 81px;
}

.ceiling-top-left {
    width: 38px;
    height: 36px;
    translate: 1px 4px;
}

.ceiling-top-center {
    width: 38px;
    height: 36px;
    translate: 41px 4px;
}

.ceiling-top-right {
    width: 38px;
    height: 36px;
    translate: 81px 4px;
}

.ceiling-middle-left {
    width: 38px;
    height: 36px;
    translate: 1px 44px;
}

.ceiling-middle-center {
    width: 38px;
    height: 36px;
    translate: 41px 44px;
}

.ceiling-middle-right {
    width: 38px;
    height: 36px;
    translate: 81px 44px;
}

.ceiling-bottom-left {
    width: 38px;
    height: 36px;
    translate: 1px 84px;
}

.ceiling-bottom-center {
    width: 38px;
    height: 36px;
    translate: 41px 84px;
}

.ceiling-bottom-right {
    width: 38px;
    height: 36px;
    translate: 81px 84px;
}

/* 立方体の各面：m=5 */
.bingo-5-3-front {
    transform: translateZ(61px);
    border: 1px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        );
}

.bingo-5-3-righthand {
    transform: rotateY(90deg) translateZ(61px);
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 0px,
            transparent 0px,
            transparent 21px,
            #000 21px,
            #000 24px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        );
}

.bingo-5-3-ceiling {
    transform: rotateX(90deg) translateZ(61px);
    border-left: 2px solid black;
    border-top: 2px solid black;
    background-image:
        repeating-linear-gradient(
            90deg,
            #000,
            #000 1px,
            transparent 1px,
            transparent 23px,
            #000 23px,
            #000 24px
        ), repeating-linear-gradient(
            0deg,
            #000,
            #000 0px,
            transparent 0px,
            transparent 21px,
            #000 21px,
            #000 24px
        );
}

#numsb td {
    text-align: right;
    padding-inline: 8px;
}

#numsb tr:nth-child(1) {
    border-bottom: 1px solid black;
}

#numsb tr th:nth-child(1) {
    border-right: 1px solid black;
}

.stack {
    display: inline-block;
    vertical-align: middle;
}