@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Cormorant+Garamond:wght@600&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans JP', sans-serif; background: #FFFFFF; color: #1A1A1A; font-size: 14px; }
.kpi-value { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; }
.sub-text { color: #888888; font-size: 0.75rem; }
.border-light { border-color: #E5E5E5; }
.rank-tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; font-weight: 700; color: white; }
.rank-SSS { background: #1a237e; }
.rank-SS  { background: #283593; }
.rank-S   { background: #1565c0; }
.rank-A   { background: #2e7d32; }
.rank-B   { background: #f57f17; }
.rank-C   { background: #e65100; }
.rank-D   { background: #bdbdbd; color: #1A1A1A; }
.rank-E   { background: #9e9e9e; }
.rank-Z   { background: #b71c1c; }
.alert-red    { color: #b71c1c; }
.alert-yellow { color: #f57f17; }
.alert-green  { color: #2e7d32; }
table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
th { background: #f9f9f9; border-bottom: 1px solid #E5E5E5; padding: 8px 10px; text-align: left; font-weight: 500; color: #888; }
td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
tr:hover td { background: #fafafa; }
.wow-pos { color: #2e7d32; font-size: 0.75rem; }
.wow-neg { color: #b71c1c; font-size: 0.75rem; }
.progress-bar { background: #E5E5E5; border-radius: 4px; height: 8px; overflow: hidden; }
.progress-fill { background: #1565c0; height: 100%; border-radius: 4px; transition: width 0.3s; }