body {background: azure;}
/* div.photo と div.name を Flexbox に設定 */
div.photo, div.shop {display: flex; flex-wrap: wrap}
div.photo label, div.shop label {
    /* 大体1行5マスになるように制御 */
     width: 16%; text-align: center;
    /* 見やすいよう薄いボーダー枠をつけて padding もゆったり 1ex 取る */
    margin: 1%; padding: 1ex; border: 1px solid #bbccbb;
}
body.memory input {display: none;} /* チェックボタン自体は非表示 */
/* チェックされたラジオボタンのすぐ後ろのlabelをピンクに */
body.memory input:checked + label {background: pink;}
p#kekka {text-align: center;}
p.ok {background: #8f8;}
p.ng {background: #f88;}