/* styles.css */ body { font-family: Arial, sans-serif; text-align: center; background-image: url("s-brick008.gif"); margin: 0; } h2 { color: #146604; } #board { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); width: 624px; /* 12x12用にサイズ調整 */ height: 624px; margin: 10px auto; background-color: #0c8a1d; padding: 20px; } .cell { position: relative; width: 50px; height: 50px; display: inline-block; border: 1px solid rgb(36, 35, 35); } .cell img { display: block; width: 100%; height: 100%; margin: auto; position: absolute; top: 0; left: 0; } #score{ color: rgb(48, 2, 255); font-weight: bold; text-shadow: 1px 1px 1px #000; } .black, .white { border-radius: 50%; width: 80%; height: 80%; } button { width: 120px; text-align: center; padding: 4px 20px; font-size: 16px; color: #ffffff; background-color: #7d38d6; box-shadow: 4px 4px 2px #66696e; transition: .2s; border-radius: 10px; } button:hover { box-shadow: unset; transform: translate(4px,4px); color: rgb(220, 255, 163); } #gameResult { color: rgb(216, 0, 0); font-weight: bold; } #playerMessage { color: rgb(219, 88, 0); text-shadow: 1px 1px 1px #000; } #blackScoreText { text-shadow: 1px 1px 1px #000; font-size: 22px; } #whiteScoreText{ text-shadow: 1px 1px 1px #000; font-size: 22px; } #momoplan{ width: 160px; font-size: 12px; background-color: #1d27aa; } #gameBoard { position: relative; /* ボードを基準に画像を配置 */ } .hint { border: 1px dashed #dfff2b; } #toggleHintButton { font-size: 16px; } #toggleHintButton:hover { box-shadow: unset; transform: translate(4px,4px); color: rgb(251, 255, 12); }