﻿        body {
            background-color: #f8fafc;
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        }
        /* スキャンエリアのコンテナ */
        #video-container {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            background-color: #000;
        }
        /* スキャンウィンドウ（正方形） */
        .scan-window {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            aspect-ratio: 1 / 1;
            border: 2px solid #3b82f6;
            border-radius: 1rem;
            box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
            z-index: 5;
        }
        /* 角の装飾 */
        .scan-window::before, .scan-window::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            border: 4px solid #3b82f6;
        }
        .scan-window::before {
            top: -4px;
            left: -4px;
            border-right: 0;
            border-bottom: 0;
            border-top-left-radius: 12px;
        }
        .scan-window::after {
            bottom: -4px;
            right: -4px;
            border-left: 0;
            border-top: 0;
            border-bottom-right-radius: 12px;
        }
        /* スキャンアニメーション線 */
        .scanner-line {
            position: absolute;
            top: 0;
            left: 5%;
            width: 90%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            animation: scan 2s linear infinite;
        }
        @keyframes scan {
            0% { top: 0%; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        .page {
            display: none;
            animation: fadeIn 0.3s ease-out;
        }
        .page.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    