body {background: azure;}

/* div.photo と div.name を Flexbox に設定 */
div.photo, div.shop {
	display: flex; 
　　　　flex-wrap: wrap;
}

img{
	width: 100%;
}

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;}
