table {
    font-size: 4vw;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: calc((100vh - 6*4vw - 8vw)/2);
}

td {
    text-align: center;
    border: 1px solid #AAA;
    height: 5vw;
}

th {
    height: 8vw;
    font-size: 3vw;
    font-weight: normal;
}

th span {
    font-weight: bold;
}

tr:last-child td {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

tr td:first-child {
    border-bottom: none;
    border-left: none;
    border-top: none;
}

td div {
    margin-top: calc(-4.8vw);
    text-shadow: 0 0 10px white, 0 0 30px white, 0 0 20px white;
}

tr:not(:last-child) td:nth-child(4), tr:not(:last-child) td:nth-child(6), tr:not(:last-child) td:nth-child(8), tr:not(:last-child) td:nth-child(10) {
    background-image: radial-gradient(1.5vw, #FFF, #DDD, white, white);
}

td div span {
    display: inline-block;
    width: 1em;
}

td div span.shadow {
    color: #CCC;
    font-size: 80%;
    padding-top: 8%;
}

td div span.common {
    font-weight: bold;
}

td div span.note1 {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10%;
}

td div span.note5 {
    border: 1px solid currentColor;
    border-radius: 50%;
}