:root { --accent: #ff00ff; --bg: #000; }
body { margin: 0; background: var(--bg); font-family: "Hiragino Sans", sans-serif; color: #fff; overflow-x: hidden; }

/* 背景ホログラムキャンバス */
#bg-canvas {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; background: #000;
}

/* 各セクションの透過・ブラー処理 */
.lp-container {
    height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center;
    background: transparent !important; /* 背景はキャンバスに任せる */
    position: relative; text-align: center;
}

.card { 
    width: 350px; min-height: 100vh; margin: 0 auto; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px);
}

.hero-content { z-index: 10; max-width: 500px; padding: 20px; animation: fadeIn 1s ease; }
.badge { font-size: 0.7rem; color: var(--accent); border: 1px solid var(--accent); display: inline-block; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; }
.hero-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 20px; line-height: 1.2; }
.hero-desc { color: #aaa; line-height: 1.6; margin-bottom: 30px; font-size: 0.95rem; }

.feature-list { display: flex; gap: 15px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.feature-list span { font-size: 0.75rem; color: #888; padding: 4px 0; }

.step-content { width: 100%; animation: slideUp 0.6s ease; }
.title { margin-bottom: 10px; font-weight: 900; }
.sub-text { color: #888; margin-bottom: 30px; font-size: 0.9rem; }

/* バー設定 */
.bar-bg { width: 80%; height: 6px; background: #222; border-radius: 3px; margin: 15px auto; overflow: hidden; }
#bar, #bar-geo { height: 100%; width: 0%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width 0.1s; }
.an-text { font-size: 0.8rem; letter-spacing: 1px; color: var(--accent); font-weight: bold; }
.prog-num { font-size: 0.8rem; color: #666; }

/* ビュー */
.view { width: 280px; height: 360px; background: #111; margin: 0 auto 20px auto; border-radius: 15px; position: relative; overflow: hidden; border: 2px solid var(--accent); }
video { width: 100%; height: 100%; object-fit: cover; }
#ld { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display:none; flex-direction:column; align-items:center; justify-content:center; }

/* 結果表示 (IMG_1961風) */
.title-small { font-size: 1.2rem; margin-bottom: 20px; font-weight: 900; }
.user-photo-container { width: 150px; height: 150px; margin: 0 auto 35px auto; border-radius: 50%; border: 3px solid #333; overflow: hidden; background: #111; }
#res-photo { width: 100%; height: 100%; object-fit: cover; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 15px; width: 100%; padding: 0 20px; box-sizing: border-box; }
.res-item { text-align: left; display: flex; flex-direction: column; }
.res-label { font-size: 0.85rem; color: #fff; font-weight: bold; margin-bottom: 2px; }
.res-score { font-size: 2.5rem; font-weight: 900; line-height: 1; margin-bottom: 8px; }

/* カラー設定 */
.color-high { color: #00ff88; }
.color-mid { color: #ffbb00; }
.color-low { color: #ff4d4d; }
.gauge-bg-res { width: 100%; height: 10px; background: #222; border-radius: 5px; overflow: hidden; }
.gauge-fill { height: 100%; width: 0%; border-radius: 5px; transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1); }
.bg-high { background: #00ff88; }
.bg-mid { background: #ffbb00; }
.bg-low { background: #ff4d4d; }

.main-btn { width: 100%; padding: 18px; border-radius: 12px; border: none; background: #fff; color: #000; font-weight: 900; cursor: pointer; transition: 0.3s; }
.region-box { background: rgba(17,17,17,0.8); padding: 20px; border-radius: 10px; border: 1px solid #333; margin-bottom: 30px; font-weight: bold; }
.sub-btn { background: none; border: 1px solid #444; color: #888; padding: 12px 30px; border-radius: 8px; cursor: pointer; margin-top: 40px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }