/* style.css */
/* ベーススタイル */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5; /* オフホワイト背景 */
color: #333; /* 濃い文字色 */
}
h1 {
position: relative;
padding: 1.5rem 1.5rem calc(1.5rem + 10px);
border: 2px solid #000;
}
h1:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
content: '';
border-top: 2px solid #000;
background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#flash-container {
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 600px;
text-align: center;
}
#focus-text {
font-size: 2rem;
font-weight: bold;
color: white; /* 白文字 */
background-color: #ff6347; /* トマト色で目立たせる */
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
#number-display {
font-size: 5rem;
margin: 20px;
color: #333; /* 通常は濃い文字色 */
text-align: center;
}
.white-text {
color: white !important; /* ゲーム中は白文字に */
}
label {
font-size: 1rem;
color: #666;
margin-top: 10px;
}
select {
background-color: #4CAF50;
font-size: 1rem;
padding: 8px 12px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
width: 100%;
box-sizing: border-box;
text-align: center;
background-color: #ddd;
}
#answer, button {
font-size: 1rem;
padding: 8px 12px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
width: 100%;
box-sizing: border-box;
text-align: center;
}
button {
background-color: #4CAF50; /* グリーンボタン */
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049; /* ボタンのホバー時の色 */
}
#result {
font-size: 3rem;
margin-top: 20px;
color: #333;
font-weight: bold;
text-align: center;
}