@charset "UTF-8"; /* ========================================================= anime-approach.css about-signet.html の斜め装飾ライン群(.approach_wrap / .about_wrap)を SVGで「下→斜め上」に描くための専用スタイル。 （_index の anime.css とは独立。about-signet だけで読み込む） ※ 実際の描画は js/anime-approach.js が GSAP で制御。 ========================================================= */ /* JSが有効に初期化できたときだけ元のCSSグラデ線を消してSVGに差し替える。 .js-approach-anime は anime-approach.js が gsap 検出後に へ付与。 → JS無効・失敗・reduced-motion時は元のCSSグラデがそのまま静的表示。 */ .js-approach-anime .approach_wrap, .js-approach-anime .about_wrap { background-image: none; /* 元のCSSグラデ線を消す（border-top等は残る） */ isolation: isolate; /* SVGの z-index:-1 を各wrap内に閉じ込める */ } .approach-lines, .about-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; /* コンテンツの後ろ（元グラデと同じ層） */ } /* approach は元グラデが端で切れないので visible */ .approach-lines { overflow: visible; } /* about は赤(top -25)や右緑(はみ出し)を元の border-box 同様に端で切る */ .about-lines { overflow: hidden; }