になるが同じ class を使う）。 */
.page-deco {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: block;
width: auto;
aspect-ratio: 2008 / 3880;
z-index: -1;
pointer-events: none;
opacity: 0.92;
}
.page-deco-sp {
position: absolute;
top: 0;
display: none;
width: auto;
aspect-ratio: 402 / 4838;
z-index: -1;
pointer-events: none;
opacity: 0.92;
}
/* 置き場所（top）と高さは index.html の fitPageDeco() / fitPageDecoSp() が JS で入れる。
入る前の曲線は元の SVG の寸法のままページの先頭に置かれるので、読み込み直後の
最初の 1 枚（外部 JS が届く前）にヒーローの裏で曲線が一瞬だけ見える。
そこで JS が動く環境（html.js が付いているとき）だけ、置き場所が決まるまで隠しておく。
visibility ではなく opacity なのは他の演出（.rise / .fade-in）と同じ考え方。
・置き終わったら index.html が html に .deco-placed を付けて元の濃さに戻す
・JS 無効なら .js が付かないので今までどおり見える
・JS が途中で落ちて置き場所が決まらなかったときは、 の 4 秒の保険が .js を外す */
.js .page-deco,
.js .page-deco-sp { opacity: 0; }
.js.deco-placed .page-deco,
.js.deco-placed .page-deco-sp { opacity: 0.92; }
/* .about-page-deco 以下はインライン SVG（js/deco.js が帯入りの
に組み替える）。
![]()
のときは元画像の縦横比で幅が決まっていたので、同じ比を aspect-ratio で明示する
（
になると width: auto が「親いっぱい」の意味になり、比が保てないため）。
※ aspect-ratio は各 HTML の