:root {
            --stroke-width: 4px;
            --circle-color: #000000;
        }

        .path-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: auto; 
            width: 100%;
            max-width: 100vw;
            background-color: #f9fafb;
            padding: 0.5rem;
        }

        .canvas-bg {
            background: white;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border-radius: 1rem;
            padding: 1rem;
            width: 100%; 
            box-sizing: border-box;
            max-width: 500px; /* スマホで見やすいサイズに制限 */
        }

        .svg-canvas {
            width: 100%;
            height: auto;
            /* overflow: visible を使うと、viewBoxの外側も描画されますが、
               「画面に収める」ことが目的なので、今回は viewBox 内に全て収めます */
            overflow: hidden; 
            display: block;
        }

        .node-circle {
            fill: white;
            stroke: var(--circle-color);
            stroke-width: var(--stroke-width);
        }

        .path-line {
            fill: none;
            stroke: var(--circle-color);
            stroke-width: var(--stroke-width);
            stroke-linecap: round;
            stroke-linejoin: round;
        }