@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

:root {
    --bg-color: #0a0a0a;
    --text-main: #e0e0e0;
    --accent-blue: #00d2ff;
    --accent-pink: #ff007f;
    --card-bg: #1a1a1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); 
    color: var(--text-main); 
    font-family: 'Noto Sans JP', sans-serif; 
    line-height: 1.6; 
    background-image: linear-gradient(rgba( 0,0,0,0.2), rgba(0,0,0,0.2)), url(真面目背景.png);
    background-size: cover;
    background-position: center;
}
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }

h1 { font-size: 2.5rem; background: linear-gradient(90deg, var(--accent-blue), var(--accent-pink)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h2 { border-left: 4px solid var(--accent-blue); padding-left: 1rem; margin-bottom: 1.5rem; font-size: 1.8rem; }
.warning-banner { background: rgba(255, 0, 127, 0.1); border: 1px solid var(--accent-pink); color: var(--accent-pink); padding: 0.5rem 1rem; border-radius: 4px; font-weight: bold; display: inline-block; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.card { background: var(--card-bg); border: 1px solid #333; border-radius: 8px; padding: 1.5rem; transition: transform 0.3s ease; }
.card:hover { transform: translateY(-5px); }

.badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: bold; background: #333; margin-bottom: 1rem; }
.badge.neon { background: rgba(0, 210, 255, 0.1); color: var(--accent-blue); border: 1px solid var(--accent-blue); box-shadow: 0 0 10px rgba(0, 210, 255, 0.2); }

ul { list-style-position: inside; margin-bottom: 1rem; }
li { margin-bottom: 0.5rem; color: #ccc; }
strong { color: #fff; }

.risk-block { background: var(--card-bg); padding: 1.5rem; border-left: 4px solid var(--accent-pink); margin-bottom: 2rem; }
.strategy-box { background: linear-gradient(135deg, rgba(0,210,255,0.05), rgba(255,0,127,0.05)); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; margin: 1.5rem 0; border-radius: 8px; }
.final-words { font-size: 1.2rem; font-weight: bold; text-align: center; color: var(--accent-blue); margin-top: 2rem; }

/* スクロールアニメーション */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }