:root{
  --bg:#0f1720;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#00b4ff;
  --accent-dark:#0086c2;
  --success:#27ae60;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg,#071021 0%, #0b1b2a 60%);
  color:#e6eef8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ヘッダー */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-left { display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:42px; height:42px; border-radius:8px;
  background: linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#001223; font-size:18px;
  box-shadow: 0 6px 18px rgba(0,180,255,0.12);
}
.logo-text{ font-size:18px; font-weight:700; color:#e6eef8; letter-spacing:0.6px; }

.header-right { display:flex; align-items:center; gap:12px; }
.user-badge{
  padding:8px 12px; border-radius:999px; background: rgba(255,255,255,0.04);
  color:#fff; font-weight:600; font-size:14px;
}
.btn { border:0; padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-logout { background:#00b4ff; color:#fff; }

/* メイン */
main{ padding:40px 20px; }
.indexmain {flex:1; display:flex; align-items:center; justify-content:center; }

/* ヒーロー */
.hero {
  width:100%; max-width:980px; display:flex; gap:40px; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:48px; border-radius:16px; box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}
.hero-left { text-align:left; flex:1; color:#e6eef8; }
.hero-title { font-size:36px; margin:0 0 12px 0; line-height:1.05; font-weight:800; }
.hero-sub { color:#cfe9ff; font-size:16px; margin:0 0 22px 0; opacity:0.85; }
.cta-row { display:flex; gap:14px; align-items:center; }
/* 元の cta-primary をフラット化 */
/* ---- 大きなCTA（微発光＋ホバー効果） ---- */
.cta-primary {
  background: var(--accent);
  color: #fff;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,180,255,0.2); /* 微発光 */
  transition: all 0.2s ease;
}

.cta-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(0,180,255,0.35); /* 少し強めにグロー */
}


.cta-ghost {
  background: transparent; border:1px solid rgba(255,255,255,0.06); color:#dff4ff; padding:12px 20px; border-radius:12px; text-decoration:none;
}
.hero-art { width:320px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* ログイン後カード */
.cards { width:100%; max-width:980px; display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:22px; border-radius:12px; text-align:left; color:#e6eef8;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.02);
}
.card h3 { margin:0 0 10px 0; font-size:18px; }
.card p { margin:0 0 14px 0; color:#cfe9ff; opacity:0.9; font-size:14px; }
.card .link { color:#001223; background:var(--accent); padding:10px 12px; border-radius:8px; font-weight:700; text-decoration:none; display:inline-block; }
.link-invite { background: var(--success); color:#fff; }

/* レスポンシブ */
@media (max-width:720px){
  header { flex-wrap:wrap;justify-content:center;flex-direction:column;gap:10px; }
#login-btn {margin:0 auto;}
.btn-logout {display:none;}
  .hero { flex-direction:column; padding:28px; }
  .hero-art { width:100%; margin-top:14px; }
  .hero-title{ font-size:28px; text-align:center; }
  .hero-left { text-align:center; }
}