/* ===== ベース ===== */
body {
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  background:#fff;
  color:#333;
  overflow-x:hidden;
  transition: background 0.3s, color 0.3s;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background:#222;
    color:#eee;
  }
  .section-card { background:#333; border-color:#ff90b3; }
  .card { background:#444; }
}

/* ===== 背景アイコン ===== */
.bg-bubbles span {
  position: absolute;
  bottom: -100px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  animation: floatUp 25s linear infinite;
  opacity: 0.8;
}
.bg-bubbles span::before { content: "●"; }
.bg-bubbles span:nth-child(3n)::before { content: "⭐"; }
.bg-bubbles span:nth-child(4n)::before { content: "💖"; }
.bg-bubbles span:nth-child(5n)::before { content: "🎵"; }
.bg-bubbles span:nth-child(odd) { color: #ff7eb9; }
.bg-bubbles span:nth-child(even) { color: #7afcff; }
.bg-bubbles span:nth-child(3n) { color: #feff9c; }
.bg-bubbles span:nth-child(4n) { color: #fff740; }
.bg-bubbles span:nth-child(5n) { color: #b983ff; }

@keyframes floatUp {
  0% { transform: translateY(100vh) scale(0.5) rotate(0deg); opacity:0; }
  20% { opacity:1; }
  100% { transform: translateY(-120vh) scale(1) rotate(360deg); opacity:0; }
}

/* ===== Hero ===== */
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:4rem 1rem;
  gap:2rem;
}
.hero h1 { font-size:2.2rem; }
.gradient {
  background:linear-gradient(90deg,#ff5f6d,#ffc371);
  -webkit-background-clip:text;
  color:transparent;
}
.avatar {
  width:240px;
  height:240px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 15px rgba(0,0,0,0.1);
}
.floating { animation: updown 3s ease-in-out infinite; }
@keyframes updown {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

/* ===== Section Cards ===== */
.section-card {
  background: #fff;
  color: #333;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  border: 3px dashed #ffb6c1;
  margin: 2rem auto;
  max-width: 900px;
}


/* セクションタイトル */
.section-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #ff4081;
  position: relative;
}
.section-title::after {
  content: "★";
  position: absolute;
  right: -1.5rem;
  top: -0.5rem;
  color: #ffd600;
  font-size: 1.2rem;
  transform: rotate(15deg);
}

/* ===== Buttons ===== */
.btn {
  background:#ff90b3;
  color:#fff;
  padding:.6rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  transition:.2s;
}
.btn:hover { transform:scale(1.1) rotate(-3deg); }
.btn.secondary { background:#ddd; color:#333; }
.github { background:black; }
.twitter { background:#1DA1F2; }

/* ===== Skills ===== */
.skills { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.tag { background:#ffecb3; padding:.3rem .6rem; border-radius:12px; }
.rainbow { background:linear-gradient(90deg,red,orange,yellow,green,blue,purple); color:white; }

/* ===== Projects ===== */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}
.card {
  background:#fff6f6;
  border-radius:16px;
  padding:1rem;
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
  transition:.2s;
}
.card:hover { transform:translateY(-5px) rotate(1deg); }

/* ===== Devices ===== */
.device-grid {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}
.device-card {
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  flex:1 1 200px;
  min-width:200px;
}
.device-card h3 { margin-bottom:10px; }
.device-card ul { list-style: inside circle; padding-left:0; }
.device-card ul li { margin-bottom:6px; }

/* ===== Nav ===== */
.nav { display:flex; justify-content:space-between; align-items:center; padding:1rem; }
#nav { display:flex; gap:1rem; }
#nav a { text-decoration:none; font-weight:bold; color:inherit; }
.menu-btn { display:none; background:none; border:none; font-size:2rem; }
@media (max-width:700px){
  #nav { display:none; flex-direction:column; background:#fff; padding:1rem; }
  #nav.open { display:flex; }
  .menu-btn { display:block; }
}

/* ===== Footer ===== */
footer { text-align:center; padding:2rem; font-size:.9rem; opacity:.7; }