body { margin: 0; padding: 0; background: #252525; font-family: "Hiragino Sans", system-ui, sans-serif; } .quiz-container { width: 420px; margin: 20px auto; padding: 24px; border-radius: 16px; background: #116464; /*background-image: url("modern_bg.jpg"); */ background-size: cover; background-position: center; box-shadow: 0 8px 24px rgba(0,0,0,0.6); color: #fff; backdrop-filter: blur(6px); } .screen { display: none; } .screen.active { display: block; } .rogo { text-align: center; margin-top: 0; color: #eeeeee; background: #0b7a43; font-size: 26px; font-weight: bold; text-shadow: 1px 2px 3px #000000; border-radius: 12px; padding: 4px; } h1, h2 { text-align: center; margin-top: 0; } .guide { font-size: 14px; line-height: 1.6; background: rgba(0,0,0,0.35); padding: 12px; border-radius: 8px; } .guide-1 { font-size: 16px; line-height: 1.6; background: rgba(0,0,0,0.35); padding: 12px; border-radius: 8px; } button { display: block; width: 100%; padding: 10px; margin-top: 20px; border: none; border-radius: 8px; background: #4a7dfc; color: #fff; font-size: 16px; cursor: pointer; } button:hover { background: #365fcc; } #signal-box { display: flex; justify-content: center; gap: 50px; padding: 25px 10px; background: #333; border-radius: 20px; margin: 30px auto; width: 400px; box-shadow: inset 0 0 15px #000, 0 6px 15px rgba(0,0,0,0.5); } .lamp { width: 80px; height: 80px; border-radius: 50%; opacity: 0.3; transition: opacity 0.2s, filter 0.2s; } .lamp.red    { background: radial-gradient(circle, #ff8080, #cc0000); } .lamp.yellow { background: radial-gradient(circle, #fff7a0, #d4c200); } .lamp.blue   { background: radial-gradient(circle, #9fd0ff, #0060c0); } .lamp.on { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)); } #answer-buttons { margin-top: 40px; display: flex; justify-content: center; gap: 40px; } .answer-btn { padding: 15px 25px; font-size: 20px; border-radius: 10px; border: none; cursor: pointer; background: #444; color: #fff; transition: background 0.2s; } .answer-btn:hover { background: #666; } .start-btn { margin-top: 30px; padding: 12px 30px; font-size: 20px; } #timer { font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 10px; } .test3-stage { position: relative; width: 100%; height: 400px; border: 1px solid #ccc; background: #111; overflow: hidden; margin-bottom: 10px; } .test3-board { position: absolute; width: 40px; height: 6px; background: #0ff; bottom: 25%; left: 0; } .test3-bottom-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #444; } .test3-ball { position: absolute; border-radius: 50%; background: #f55; box-shadow: 0 4px 6px rgba(0,0,0,0.4); transition: box-shadow 0.2s; opacity: 0; } .test3-ui { display: flex; flex-direction: column; gap: 8px; } .test3-buttons { display: flex; flex-direction: row; gap: 10px; } #test3PracticeBtn, #test3StartBtn { width: 120px; padding: 6px 4px; font-size: 14px; } .test3-ui .button-row { display: flex; gap: 10px; } .test3-board.catch { background: rgb(240, 48, 137); transition: background 0.2s; } #test3PracticeBtn, #test3StartBtn { width: 120px; padding: 8px 6px; font-size: 14px; } #test3-remaining { font-size: 14px; color: #fff; } .test3-status-row { display: flex; flex-direction: row; gap: 20px; font-size: 14px; } #test5-stage { position: relative; width: 100%; height: 400px; background: #272727; border: 2px solid #4fc5fc; overflow: hidden; margin: 20px 0; box-sizing: border-box; } #test5-player { position: absolute; width: 30px; height: 30px; background: #007bff; border-radius: 50%; bottom: 10px; } .test5-obstacle { position: absolute; background: #ff6666; border-radius: 6px; opacity: 0.9; } #test5-screen .test-buttons { margin-top: 15px; display: flex; gap: 10px; } .test5-obstacle { height: 2px; } #test5-status-row { display: flex; gap: 20px; margin-bottom: 10px; font-size: 18px; } #test5-info { color: #ffda38; } #depth-stage { position: relative; width: 100%; height: 300px; background: #222; border: 2px solid #ccc; overflow: hidden; margin: 20px 0; box-sizing: border-box; } .depth-line { position: absolute; width: 4px; height: 200px; background: #fff; top: 50%; transform: translateY(-50%); transition: width 0.05s linear, opacity 0.05s linear, top 0.05s linear; } #depth-left-line { left: 30%; border-radius: 8px; } #depth-right-line { right: 30%; border-radius: 8px; } #depth-center-line { background: rgb(255, 255, 255); left: 50%; transform: translate(-50%, -50%); border-radius: 8px; } #test2-screen .test-buttons { margin-top: 15px; display: flex; gap: 10px; } #depth-result { margin-top: 15px; font-size: 20px; text-align: center; } .depth-back-rect { position: absolute; width: 50%; height: 40%; top: 25%; left: 25%; border: 2px solid #555; outline: 2px solid #666; } .depth-perspective { position: absolute; width: 2px; background: #666; } .depth-perspective.tl { left: 0; top: 0; height: 180px; transform-origin: top left; transform: rotate(35deg); } .depth-perspective.tr { right: 0; top: 0; height: 180px; transform-origin: top right; transform: rotate(-35deg); } .depth-perspective.bl { left: 0; bottom: 0; height: 180px; transform-origin: bottom left; transform: rotate(-35deg); } .depth-perspective.br { right: 0; bottom: 0; height: 180px; transform-origin: bottom right; transform: rotate(35deg); } .depth-lines { position: absolute; top: 0; left: 0; pointer-events: none; } #depth-center-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center; } .choice { padding: 10px; margin: 8px 0; background: rgba(0,0,0,0.4); border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); transition: 0.2s; } .choice:hover { background: rgba(255,255,255,0.15); } .choice.selected { background: rgba(255,255,255,0.25); backdrop-filter: blur(2px); } .choice:focus { outline: none !important; box-shadow: none !important; } #test6-image { font-size: 120px; text-align: center; margin: 40px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } #test6-answers button:focus { outline: none; box-shadow: none; } .emoji { font-size: 80px; line-height: 1; } #test6-screen #test6-question { font-size: 20px; line-height: 1.4; } #test6-question .emoji-big { font-size: 60px; line-height: 1; vertical-align: middle; text-shadow: 2px 2px 4px rgba(0,0,0,0.25); animation: pop 0.25s ease-out; } @keyframes pop { 0%   { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1.0); opacity: 1; } } #test4-direction-chart { text-align: center; margin: 20px 0; } #needle { transform-origin: 50% 50%; transition: transform 0.6s ease-out; } .acc-content { display: none; padding: 10px; background: #333; color: #ddd; } .acc-btn.selected { outline: 2px solid #66aaff; background: #444; } .score-matrix { width: 90%; margin: 0 auto 20px auto; display: flex; flex-direction: column; gap: 12px; } .score-row { display: flex; gap: 12px; } .score-cell { flex: 1; background: #222; color: #e0d6f7; padding: 12px 16px; border-radius: 12px; display: flex; justify-content: space-between; font-size: 15px; box-shadow: 0 0 8px rgba(0,0,0,0.3); border: 1px solid #444; } .total-score-box { width: 90%; margin: 0 auto; padding: 12px; background: #333; color: #fff; border-radius: 10px; text-align: center; font-size: 18px; font-weight: bold; box-shadow: 0 0 8px rgba(0,0,0,0.3); } .score-table tr:last-child td { border-bottom: none; } #evaluation-screen { max-width: 800px; margin: 0 auto; } #retryBtn { background-color: #d9534f; color: white; padding: 10px 20px; border-radius: 6px; border: none; } .totalc { background-color: #0c6d09; color: rgb(216, 216, 216); border-radius: 6px; text-align: center; font-size: 18px; font-weight: bold; box-shadow: 0 0 8px rgba(0,0,0,0.3); } #final-score { color: rgb(255, 233, 39); } #printBtn{ background: #2443ee; } /* =========================== 印刷専用レイアウト（A4縦） =========================== */ @media print { @page { size: A4 portrait; margin-top: 0 !important; margin-left: 10mm; margin-right: 10mm; margin-bottom: 10mm; } body { margin: 0 !important; padding: 0 !important; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; color: #222; line-height: 1.2; } .evaluation-report { display: block !important; font-size: 10px; margin: 0 !important; padding-top: 0 !important; } .chart-page { display: block !important; page-break-before: always; } #printBtn, #retryBtn, .accordion, .acc-btn, #score-summary, .totalc { display: none !important; } .report-title { font-size: 18px; font-weight: bold; text-align: center; border-bottom: 1px solid #444; padding-bottom: 4px; margin-bottom: 8px; } .report-section { margin-bottom: 10px; padding-bottom: 2px; border-bottom: 1px solid #ccc; page-break-inside: avoid; } .report-section h2 { font-size: 12px; margin-bottom: 2px; } .report-section p { margin: 1px 0; } .report-summary { padding: 8px; background: #f7f7f7; margin-top: 6px; page-break-inside: avoid; } .report-summary h2 { font-size: 13px; margin-bottom: 4px; } .quiz-container { background: #ffffff !important; background-image: none !important; color: #000 !important; } .quiz-container, .evaluation-report, .report-section, .report-summary { border-radius: 0 !important; } } @media print { .quiz-container { margin: 0 auto !important; background: #ffffff !important; background-image: none !important; color: #000 !important; border-radius: 0 !important; } } @media print { .chart-page .report-title { margin-top: 4mm !important; } .chart-page h2 { margin-top: 0 !important; } } .evaluation-report { display: none; } .caution-note { font-size: 10px; color: #b4116b; font-weight: bold; margin-top: 8px; line-height: 1.4; } #print-test1, #print-test2, #print-test3, #print-test4, #print-test5, #print-test6 { color: #b92a2a; } @media print { .print-footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 10pt; color: #444; padding: 6px 0; } }