/* ============================================================
 * index_wire.css
 * 汎用ワイヤーフレーム背景（wireframe.js と組）
 * ------------------------------------------------------------
 * 使い方:
 *   背景に出したい要素を <div class="js-wireframe"> で囲む。
 *   要素の幅 100% に対して canvas が展開される。
 *   背景色は載せず、ページ背景にシームレスに溶け込む。
 *
 *   例) <div class="js-wireframe">
 *           <section>...</section>
 *       </div>
 * ============================================================ */

/* ---- 汎用ラッパー ---- */
.js-wireframe {
    position: relative;
    width: 100%;
    isolation: isolate; /* 子の z-index:-1 が外へ漏れないように */
}

/* JS が動的に挿入する canvas */
.js-wireframe > .wireframe_bg_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .wireframe_bg_canvas { opacity: 0.7; }
}

/* ============================================================
 *  #about 専用ラッパー
 *  既存の #about は position:absolute / top:○○px で配置されて
 *  いるため、ラッパーがその絶対配置を引き取り、#about 自身は
 *  通常フローに戻して中央寄せにする。
 *  これにより canvas はラッパー = ビューポート横幅100% に展開。
 * ============================================================ */
.wireframe_section--about {
    position: absolute;
    top: 2200px;     /* 既存 #about の top と同値 */
    left: 0;
    width: 100%;
    z-index: 600;    /* 既存 #about の z-index と同値 */
}

.wireframe_section--about > #about {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    /* width は元の #about の指定（1300px / 100%）がそのまま効く */
}

/* レスポンシブ: 元の #about の top を、ラッパー側に移譲 */
@media screen and (max-width: 1300px) {
    .wireframe_section--about {
        top: 2450px;
    }
}
@media screen and (max-width: 960px) {
    .wireframe_section--about {
        top: 2350px;
    }
}