/* 株式会社Shinonome トップページ基本スタイル Claude Design の書き出し(トップページ v2)より。デザインが正。 ※ 各要素の細かなレイアウトは index.html 内のインライン style で定義されています。 */ html, body { margin: 0; padding: 0; background: #0E0E10; } body { font-family: 'Noto Sans JP', sans-serif; color: #1A1A1C; -webkit-font-smoothing: antialiased; } a { color: #35648F; text-decoration: none; } a:hover { color: #2A5175; } ::selection { background: rgba(130, 130, 140, 0.22); } ::-moz-selection { background: rgba(130, 130, 140, 0.22); } /* 液体テキスト演出(assets/js/liquid-text.js)の下準備。 JSが動くのを待っていると、その前に白い文字が一瞬見えてしまう(リフレッシュ時のちらつき)。最初の描画の時点で文字を透明にしておくことで、これを防ぐ。 - html.liquid-ready は、各ページのの小さなスクリプトが「WebGLが使える」ときだけ付ける → WebGLが使えない環境ではクラスが付かず、通常の文字色のまま表示される - data-liquid-off は、演出をやめたとき(スマホで折り返す等)にJSが付ける → 通常の文字色に戻る */ html.liquid-ready [data-liquid-text]:not([data-liquid-off]) { color: transparent; } @keyframes bg-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(90px, -60px) scale(1.15); } 66% { transform: translate(-50px, 40px) scale(0.95); } } @keyframes bg-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-110px, 50px) scale(1.1); } 75% { transform: translate(60px, -40px) scale(1.05); } } @keyframes bg-drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 70px) scale(1.2); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } /* ヘッダーは画面右上のMENUボタン方式(assets/js/nav-menu.js が生成)。旧・固定ヘッダー(#site-header)は使わなくなったため、HTML・CSS・JSごと削除した(2026-08-05)。 MENUボタンとロゴの白/黒の切り替えは nav-menu.js が行う (背景の明るさを見て判定。固定したい場所には data-header-tone="light|dark" を付ける)。 */ /* 最終CTA(Start with a conversation.)を画面いっぱいで見せるための止まり方(2026-07-23)。スクロールが近づいたときだけ、そっと画面いっぱいの位置へ吸い寄せる。 - proximity(近づいたときだけ) にしてあるので、途中で止まりたいときは止まれる - 目印(scroll-snap-align)を付けているのはこのセクションだけ。他は今までどおり ※以前ページ全体に mandatory(必ず吸い寄せる) を入れて「スクロールが進まない」不具合が出たため、ここでは弱い方の指定にしている。合わなければこの2行を消せば元に戻る - 止める位置は「画面の中央にセクションの中央を合わせる」(center)。上端合わせ(start)だと、画面の高さによっては上に寄って見えるため(MacBookで発生) */ html { scroll-snap-type: y proximity; } #final-cta { scroll-snap-align: center; } /* トップページ最終CTA「枠を走る光」(assets/js/cta-line.js)。 canvasはボタンより一回り大きく、線がふちからはみ出しても切れないようにしてある。ホバー時はボタンが手前に浮き出し、まわりにValueの3色の霧のような光が出る。 */ /* 背景色・影・動きの指定は、HTML側(インライン)ではなくここに書くこと。インラインの指定はCSSより強く、下の .is-hover で上書きできなくなるため (最初インラインに書いてしまい、ホバーの光が出ずに判明) */ [data-cta-line] { isolation: isolate; overflow: visible; will-change: transform; background: #131317; box-shadow: 0 6px 18px rgba(0,0,0,0.45); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, background 0.32s ease; } [data-cta-line] > canvas { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; } [data-cta-line] > [data-cta-line-label], [data-cta-line] > [data-cta-line-arrow] { position: relative; z-index: 2; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } /* まわりの光は、紫の背景に埋もれないよう明るめにしてある(2026-07-23) */ [data-cta-line].is-hover { transform: translateY(-5px) scale(1.02); background: #17171C; box-shadow: 0 12px 24px rgba(0,0,0,0.5), 0 0 18px rgba(184,171,245,0.55), 0 4px 38px rgba(120,171,235,0.42), 0 0 70px rgba(214,168,219,0.30); } [data-cta-line].is-hover > [data-cta-line-arrow] { transform: translateX(4px); } /* トップページ最終CTAのオーロラ演出(assets/js/cta-aurora.js)。 ※2026-07-22に一旦見送り。別案(上の「枠を走る光」)と入れ替えられるよう残してある。 canvasはボタンより一回り大きく、紙吹雪がボタンの外へ舞い出せるようにしてある。ホバー時は文字が明るく浮き出る(光の玉はcanvas側で描いている)。 */ [data-cta-aurora] { isolation: isolate; overflow: visible; } [data-cta-aurora] > canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; } [data-cta-aurora] > [data-cta-aurora-label] { position: relative; z-index: 2; transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } [data-cta-aurora].is-hover { box-shadow: 0 14px 34px rgba(20,16,40,0.5), 0 0 34px rgba(183,172,245,0.30), 0 12px 44px rgba(120,170,235,0.22); } [data-cta-aurora].is-hover > [data-cta-aurora-label] { text-shadow: 0 0 16px rgba(255,255,255,0.8), 0 0 38px rgba(183,172,245,0.55); transform: translateY(-1px); } /* /contact ページ専用のスタイルは contact/index.html 内の