:root {
            --primary: #1a2e44;
            --accent: #d4a373;
            --bg-light: #f9f7f2;
            --text-main: #333333;
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            color: var(--text-main);
            background-color: var(--bg-light);
            line-height: 1.8;
            word-break: break-all;
        }

        .serif {
            font-family: 'Noto Serif JP', serif;
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero */
        .hero-video-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #0e1e2e;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(14,30,46,0.35) 0%, rgba(14,30,46,0.6) 100%);
            z-index: 1;
        }

        /* 図面SVGキャンバス */
        .hero-drawing {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* stroke-dasharray/dashoffset アニメーション共通 */
        .draw-line {
            fill: none;
            stroke: rgba(212,163,115,1);
            stroke-width: 2.5;
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
        }
        .draw-line-thin {
            fill: none;
            stroke: rgba(139,175,200,0.85);
            stroke-width: 1.2;
            stroke-dasharray: 2000;
            stroke-dashoffset: 2000;
        }
        .draw-building {
            fill: none;
            stroke: rgba(212,163,115,1);
            stroke-width: 3;
            stroke-dasharray: 4000;
            stroke-dashoffset: 4000;
        }
        .draw-dim {
            fill: none;
            stroke: rgba(139,175,200,0.9);
            stroke-width: 1.2;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }
        .draw-text {
            opacity: 0;
            fill: rgba(255,255,255,0.95);
            font-family: monospace;
            font-size: 13px;
            font-weight: bold;
        }
        .draw-text-sub {
            opacity: 0;
            fill: rgba(212,163,115,1);
            font-family: monospace;
            font-size: 11px;
        }
        .draw-marker {
            fill: rgba(212,163,115,1);
        }
        .draw-glow {
            filter: drop-shadow(0 0 6px rgba(212,163,115,0.9));
        }

        /* グロー付きライン */
        .draw-line-glow {
            fill: none;
            stroke: rgba(212,163,115,1);
            stroke-width: 2.5;
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            filter: drop-shadow(0 0 5px rgba(212,163,115,0.8));
        }
        .draw-building-glow {
            fill: none;
            stroke: rgba(212,163,115,1);
            stroke-width: 3;
            stroke-dasharray: 4000;
            stroke-dashoffset: 4000;
            filter: drop-shadow(0 0 8px rgba(212,163,115,0.9));
        }

        /* アニメーション定義 */
        @keyframes drawStroke {
            to { stroke-dashoffset: 0; }
        }
        @keyframes fadeInText {
            0%   { opacity: 0; transform: translateY(4px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse-marker {
            0%,100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.6; transform: scale(1.3); }
        }

        .draw-line       { animation: drawStroke 1.8s ease forwards; }
        .draw-line-glow  { animation: drawStroke 1.8s ease forwards; }
        .draw-line-thin  { animation: drawStroke 2.2s ease forwards; }
        .draw-building   { animation: drawStroke 2.5s ease forwards; }
        .draw-building-glow { animation: drawStroke 2.5s ease forwards; }
        .draw-dim        { animation: drawStroke 1s ease forwards; }
        .draw-text       { animation: fadeInText 0.6s ease forwards; }
        .draw-text-sub   { animation: fadeInText 0.6s ease forwards; }

        /* ディレイ */
        .d-0  { animation-delay: 0.1s; }
        .d-1  { animation-delay: 0.5s; }
        .d-2  { animation-delay: 0.9s; }
        .d-3  { animation-delay: 1.3s; }
        .d-4  { animation-delay: 1.7s; }
        .d-5  { animation-delay: 2.1s; }
        .d-6  { animation-delay: 2.5s; }
        .d-7  { animation-delay: 2.9s; }
        .d-8  { animation-delay: 3.3s; }
        .d-9  { animation-delay: 3.7s; }
        .d-10 { animation-delay: 4.1s; }
        .d-11 { animation-delay: 4.5s; }
        .d-12 { animation-delay: 4.9s; }

        /* Service Cards */
        .service-card {
            transition: all 0.4s ease;
            border-bottom: 1px solid transparent;
        }

        .service-card:hover {
            background-color: white;
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            border-bottom-color: var(--accent);
        }

        /* Modal Custom Styles */
        .modal-open {
            overflow: hidden;
        }

        .modal-overlay {
            background-color: rgba(26, 46, 68, 0.9);
            backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-content {
            transform: scale(0.95) translateY(20px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
        }

        /* FAQ Accordion */
        .faq-item {
            border-bottom: 1px solid #e5e7eb;
            transition: background-color 0.3s ease;
        }

        .faq-item:hover {
            background-color: #fcfcfc;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        }

        .faq-item.active .faq-answer {
            max-height: 1000px;
            transition: max-height 1s ease-in;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        .category-tag {
            font-size: 10px;
            letter-spacing: 0.1em;
            padding: 2px 8px;
            border: 1px solid #d4a373;
            color: #d4a373;
            margin-bottom: 8px;
            display: inline-block;
        }

        /* ============================================================
           ヒーロー以外セクション用：固定測量地図背景キャンバス
           z-index: 5 でセクション(auto)より上・nav(50)より下に配置。
           セクション自体は stacking context を作らない（z-index: auto）ため
           キャンバスがセクションコンテンツより下に見える。
           ============================================================ */
        #map-bg-canvas {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        #map-bg-canvas.visible {
            opacity: 1;
        }

        /* ヒーローは確実にキャンバスより上へ */
        .hero-video-container { position: relative; z-index: 10; }
        nav { position: relative; z-index: 50; }
        /* モーダルはキャンバスより上 */
        #service-modal { z-index: 100; }

        /* カスタムターゲットカーソル（PCポインティングデバイス環境のみ、JS側で表示） */
        .custom-cursor {
            position: fixed;
            pointer-events: none;
            z-index: 999;
            transform: translate(-50%, -50%);
            transition: opacity 0.2s ease;
            opacity: 0;
        }

        /* キャンバス(z-index:5)より上にセクションコンテンツを出す */
        #about > *, #service > *, #faq > *, #overview > *, #contact > *, footer > * {
            position: relative;
            z-index: 6;
        }
    </style>

</head>

<body>

    <!-- ========================================================
         測量地図背景キャンバス（ヒーロー以外のセクションで表示）
         マウス連動パンあり / pointer-events:none
         ======================================================== -->
    <canvas id="map-bg-canvas"></canvas>

    <!-- カスタムカーソル（測量ターゲット風） -->
    <div id="survey-cursor" class="custom-cursor">
        <div style="position:relative;width:48px;height:48px;border:1px solid rgba(212,163,115,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:spin 12s linear infinite;">
            <div style="width:100%;height:1px;background:rgba(212,163,115,0.4);position:absolute;"></div>
            <div style="height:100%;width:1px;background:rgba(212,163,115,0.4);position:absolute;"></div>
            <div style="width:6px;height:6px;border:1px solid #d4a373;border-radius:50%;background:#d4a373;"></div>
        </div>
        <div style="position:absolute;left:56px;top:8px;font-size:9px;font-family:monospace;color:#d4a373;background:rgba(249,247,242,0.95);border:1px solid rgba(212,163,115,0.4);padding:4px 8px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
            LAT: <span id="cursor-lat">33.56570</span><br>
            LNG: <span id="cursor-lng">130.41300</span>
        </div>
    </div>
@keyframes spin { to { transform: rotate(360deg); } }