/*基本レイアウト*/ body { margin: 0; padding: 0; background: #000000; font-family: "Hiragino Sans", system-ui, sans-serif; color: #eeeeee; text-align: center; } /*Ishihara プレート*/ #ishihara12 { border-radius: 50%; overflow: hidden; display: block; margin: 40px auto 25px; box-shadow: 0 0 22px rgba(255,255,255,0.25); transition: opacity 0.3s ease; } h2 { text-align: center; color: #e9e9e9; border-radius: 6px; background: #2042da; } h3 { color: #d7e42c; } /* 出題時のフェードイン */ .fade-in { opacity: 0; animation: fadeIn 0.4s forwards; } @keyframes fadeIn { to { opacity: 1; } } /*数字選択（ラジオ)*/ #digit-select { margin-top: 10px; } #digit-select p { font-size: 20px; margin-bottom: 10px; } #digit-select label { display: inline-block; margin: 6px 12px; font-size: 22px; cursor: pointer; } #digit-select input[type="radio"] { transform: scale(1.4); margin-right: 6px; cursor: pointer; } /*操作ボタン（アイコン対応）*/ .control-buttons { margin-top: 20px; } .control-buttons button { background: #2c2c2c; color: #eeeeee; border: 1px solid #555; padding: 6px 10px; margin: 8px; border-radius: 6px; cursor: pointer; font-size: 15px; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; /* アイコンと文字の間 */ } .control-buttons button:hover { background: #444; border-color: #888; } /* アイコン */ .control-buttons button .icon { font-size: 18px; } /* 選択中の難易度ボタン */ button.active-diff { background: #5566aa; border-color: #8899ff; } button:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(80%); } /*結果表示*/ #result-text { margin-top: 18px; font-size: 24px; min-height: 30px; font-weight: bold; } /*スコア表示*/ #score-text { margin-top: 30px; font-size: 20px; color: #cccccc; } /*スマホ最適化（レスポンシブ）*/ @media (max-width: 600px) { /* 枠をスマホ幅にフィット */ #app-frame { width: 95vw; padding: 12px; } /* 終了ボタンをスマホ向けに縮小 */ #end-button { padding: 4px 10px; font-size: 14px; top: 6px; right: 6px; } #ishihara12 { width: 90vw; height: 90vw; margin: 20px auto; } #digit-select label { font-size: 18px; margin: 4px 8px; } #digit-select input[type="radio"] { transform: scale(1.2); } .control-buttons { display: flex; flex-direction: column; align-items: center; gap: 8px; } .control-buttons button { width: 80%; padding: 12px; font-size: 16px; justify-content: center; } .control-buttons button .icon { font-size: 20px; } #result-text { font-size: 20px; margin-top: 12px; } #score-text { font-size: 18px; margin-top: 20px; } /* 枠内の余白を詰める */ #app-frame p { margin: 4px 0; } } @media (max-width: 400px) { #digit-select label { font-size: 16px; margin: 3px 6px; } .control-buttons button { width: 90%; font-size: 15px; } #result-text { font-size: 18px; } #score-text { font-size: 16px; } } /* ★ 案内ボタン */ #guide-button { margin-top: 10px; padding: 10px 12px; font-size: 16px; border: 2px solid #083634; background: rgba(9, 21, 104, 0.45); } #guide-button:hover { background: #050f6d; } /* オーバーレイ全体 */ #guide-overlay, #test-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); display: flex;/* ← 中央配置の要 */ justify-content: center;/* ← 横中央 */ align-items: center;/* ← 縦中央 */ z-index: 9999; } /* ボックス本体 */ #guide-overlay, #test-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); display: flex;/* ← 中央配置の決定版 */ justify-content: center;/* 横中央 */ align-items: center;/* 縦中央 */ z-index: 9999; } /* 非表示 */ .hidden { display: none !important; } /* ★ 案内ボックス本体 */ #guide-box { background: #292929; width: 340px; padding: 20px; border-radius: 12px; font-size: 14px; border: 2px solid #7246d8; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.25); animation: fadeIn 0.2s ease-out; text-align: left; } /* ★ 閉じるボタン */ #guide-close { position: absolute; top: 8px; right: 8px; border: none; background: #e74c3c; color: #ffffff; font-size: 18px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; } #guide-close:hover { background: #c0392b; } #test-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: center; z-index: 999; } #test-overlay.hidden { display: none; } #test-box { background: #252525; width: 400px; padding: 20px; border-radius: 12px; position: relative; box-shadow: 0 4px 16px rgba(201, 201, 201, 0.856); border: 2px solid #7246d8; text-align: left; animation: fadeIn 0.2s ease-out; } #test-close { position: absolute; top: 8px; right: 8px; border: none; background: #e74c3c; color: #ffffff; font-size: 18px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; } #test-close:hover { background: #c0392b; } .ok { color: #00cc44; } .ng { color: #ff4444; } /* アニメーション */ @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to   { opacity: 1; transform: scale(1); } } .retry-btn { margin-top: 12px; width: 100%; padding: 10px; background: #3498db; color: #fff; border: none; border-radius: 8px; cursor: pointer; } .retry-btn:hover { background: #2980b9; } .notice { margin-top: 14px; font-size: 12px; color: #dfdbdb; line-height: 1.5; } #app-frame { position: relative; width: 480px; margin: 20px auto; background: #2e2e2e; border: 3px solid #1a4697; border-radius: 16px; box-shadow: 0 4px 20px rgba(153, 153, 153, 0.2); } /* 終了ボタン（右上固定） */ #end-button { position: absolute; top: 10px; right: 10px; background: #ff6666; color: white; border: none; padding: 6px 14px; border-radius: 8px; font-size: 16px; cursor: pointer; } #end-button:hover { background: #ff4444; } #app-frame p { margin: 6px 0; } #score-text, #result-text { margin-top: 4px; margin-bottom: 4px; } #progress-text, #detail-result { margin: 4px 0; }