/* ============================================================= EVMEL — Immersive Layer WebGLパーティクル / グラスモーフィズム / シネマティックFX evmel.css の後に読み込むこと（上書きするため） ============================================================= */ :root { --glass: rgba(255,255,255,0.045); --glass-border: rgba(201,168,76,0.16); --glow-gold: rgba(201,168,76,0.28); } /* ------------------------------------------------------------- 1. ヒーロー WebGL キャンバス ------------------------------------------------------------- */ .hero-gl { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease-luxury); } .hero-gl.on { opacity: 1; } /* ------------------------------------------------------------- 2. シネマティックFX（スキャンライン / グレイン / ビネット） ヒーローの中だけに閉じ込める。全画面に敷くと本文セクションに 灰色の膜がかかって黒が濁る（＝もやもやして見える）ため。 pointer-events:none なので操作は一切邪魔しない ------------------------------------------------------------- */ .fx-stack { position: absolute; inset: 0; z-index: 1; /* .hero-content（z-index:2）より下 */ pointer-events: none; } .fx-stack .fx { position: absolute; inset: 0; display: block; } .fx-scan { background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px ); mix-blend-mode: overlay; opacity: 0.9; } .fx-grain { opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: fxGrain 0.7s steps(3) infinite; } @keyframes fxGrain { 0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 1%); } 66% { transform: translate(1%, -2%); } 100% { transform: translate(0, 0); } } .fx-vignette { background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.55) 100%); } /* ------------------------------------------------------------- 3. グラスモーフィズム・カード（事業内容） ------------------------------------------------------------- */ .pillar-card { background: linear-gradient(150deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 55%, rgba(255,255,255,0.03) 100%), rgba(20,20,20,0.55); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--glass-border); border-top: 2px solid transparent; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.09); transform-style: preserve-3d; } .pillar-card:hover { background: linear-gradient(150deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.045) 100%), rgba(26,26,26,0.6); border-color: rgba(201,168,76,0.34); box-shadow: 0 36px 90px rgba(0,0,0,0.55), 0 0 62px var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.18); } /* 背後で滲む金色のオーラ（JSが挿入） */ .pillar-card .aura { position: absolute; inset: -45%; filter: blur(60px); opacity: 0.28; transition: opacity 0.7s var(--ease-luxury); pointer-events: none; z-index: 0; } .pillar-card:hover .aura { opacity: 0.6; } /* ホバーで走る光の帯（JSが挿入） */ .pillar-card .shine { position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(232,213,163,0.13) 47%, rgba(255,255,255,0.05) 52%, transparent 62% ); transform: translateX(-130%); transition: transform 1.1s var(--ease-luxury); pointer-events: none; z-index: 1; } .pillar-card:hover .shine { transform: translateX(130%); } /* 中身をオーラ・光の帯より前に出す */ .pillar-card > .pillar-icon, .pillar-card > .pillar-en, .pillar-card > .pillar-ja, .pillar-card > .pillar-list { position: relative; z-index: 2; } /* ------------------------------------------------------------- 4. 統計ブロックのガラス化（About） ------------------------------------------------------------- */ .about-stats .stat { position: relative; transition: transform 0.6s var(--ease-expo), text-shadow 0.6s; } .about-stats .stat:hover .stat-num { text-shadow: 0 0 28px rgba(201,168,76,0.45); } /* ------------------------------------------------------------- 5. イントロ（初回訪問時のみ・JS無しでも自動で消える） ------------------------------------------------------------- */ #evmel-intro { display: none; } .js #evmel-intro { display: flex; position: fixed; inset: 0; z-index: 20000; background: var(--black); flex-direction: column; align-items: center; justify-content: center; gap: 20px; animation: eiOut 0.9s var(--ease-luxury) 1.5s forwards; } .js.intro-seen #evmel-intro { display: none; } /* クリック／スクロール／Escで即スキップ */ .js #evmel-intro.ei-out { animation: eiOut 0.45s var(--ease-luxury) 0s forwards; } @keyframes eiOut { to { opacity: 0; visibility: hidden; pointer-events: none; } } #evmel-intro .ei-logo { font-family: var(--font-serif-en); font-size: clamp(2.4rem, 8vw, 5rem); font-weight: 200; letter-spacing: 0.5em; text-indent: 0.5em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); } #evmel-intro .ei-bar { width: 180px; height: 1px; background: rgba(255,255,255,0.09); overflow: hidden; } #evmel-intro .ei-bar i { display: block; height: 100%; width: 0; background: var(--gold-grad); animation: eiLoad 1.5s var(--ease-luxury) forwards; } @keyframes eiLoad { to { width: 100%; } } #evmel-intro .ei-sub { font-family: var(--font-label); font-size: 0.55rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gray-2); } /* ------------------------------------------------------------- 6. モバイル ------------------------------------------------------------- */ @media (max-width: 768px) { .fx-scan { display: none; } /* 小さい画面では網目が目立ちすぎる */ .fx-grain { animation: none; opacity: 0.035; } .pillar-card { border-radius: 12px; } } /* ------------------------------------------------------------- 7. アニメーションを控える設定の尊重 ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero-gl { display: none; } .fx-grain { animation: none; } .pillar-card .shine { display: none; } .pillar-card .aura { opacity: 0.2; transition: none; } .js #evmel-intro { display: none; } }