/* ========================================================================= LiTAER — 下層ページ（事業詳細など）専用スタイル style.css の後に読み込まれる。すべて body.litaer-sub にスコープする。 設計上の前提が 2 つある: 1. トップの .service-grid / .service-card は html.rich-mode 側で 「横一列 flex + transition 消去」に上書きされる（style.css の rich(PC) 節）。 下層には motion.js が無いので、それらを再利用すると画面外へはみ出したまま到達不能になる。 → 下層のカードは .svc-card として別に定義する。 2. .section-label / .section-title / .section-desc は opacity:0 で .visible 待ち。 下層では subpage.js がそれを付ける。JS が落ちても読めるよう、既定は「見える」にしておき、 subpage.js が付ける html.has-reveal のときだけ隠してから出す。 ========================================================================= */ /* --- リビール: JS 非依存の既定（見える） --- */ body.litaer-sub .section-line{width:100px} body.litaer-sub .section-label, body.litaer-sub .section-title, body.litaer-sub .section-desc{opacity:1;transform:none} /* --- リビール: JS が生きているときだけ隠してから出す --- */ html.has-reveal body.litaer-sub .section-line{width:0} html.has-reveal body.litaer-sub .section-label, html.has-reveal body.litaer-sub .section-desc{opacity:0;transform:translateY(20px)} html.has-reveal body.litaer-sub .section-title{opacity:0;transform:translateY(30px)} html.has-reveal body.litaer-sub .visible .section-line{width:100px} html.has-reveal body.litaer-sub .visible .section-label, html.has-reveal body.litaer-sub .visible .section-desc, html.has-reveal body.litaer-sub .visible .section-title{opacity:1;transform:translateY(0)} /* --- ナビ: 下層ヒーローは濃色なので、未スクロール時だけ明色に反転する。 .scrolled（白背景）とモバイルの展開メニュー（白背景）は既存の配色のままにする。 --- */ body.litaer-sub #navbar:not(.scrolled) .nav-links:not(.open) a{color:rgba(255,255,255,.78)} body.litaer-sub #navbar:not(.scrolled) .nav-links:not(.open) a:hover{color:var(--accent)} body.litaer-sub #navbar:not(.scrolled) .nav-toggle span{background:#fff} /* --- 下層ヒーロー --- */ .sub-hero{background:var(--charcoal);color:#fff;padding:150px 48px 90px;position:relative;overflow:hidden} .sub-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,201,159,.5),transparent)} .sub-hero .section-bg-text{top:70px;right:-80px;color:rgba(255,255,255,.02)} .sub-hero-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:var(--accent);filter:blur(120px);opacity:.1;top:-260px;right:-160px;pointer-events:none} .sub-hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto} .sub-hero .section-label{color:var(--accent)} .sub-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:900;line-height:1.3;letter-spacing:-.02em;color:#fff;margin:0 0 24px} .sub-hero-lead{font-size:1.02rem;line-height:2.05;color:rgba(255,255,255,.62);max-width:720px;margin-bottom:40px} .sub-hero .service-tags{margin-bottom:40px} .sub-hero .service-tag{background:rgba(0,201,159,.12);color:var(--accent-light);border-color:rgba(0,201,159,.28)} /* --- パンくず --- style.css の `nav{position:fixed;height:72px;opacity:0;…}` は要素セレクタなので、