@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'PixelJP';
  src: url('https://unpkg.com/pxfont@1.0.0/fonts/px-mplus-12-regular.woff2') format('woff2');
  font-display: swap;
}

body {
  background: #111;
  color: #fff;
  font-family: 'DotGothic16', 'Press Start 2P', sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 🔴 追加・修正：リンクの色設定 */
a {
  color: #00cccc; /* 明るいシアン系で視認性向上 */
  text-decoration: none;
}

a:visited {
  color: #66cccc; /* 遷移済みリンクも落ち着いた色に */
}

a:hover {
  color: #ffffff; /* ホバー時は白で明確に */
  text-decoration: underline;
}

header {
  background: #30d5c8;
  padding: 20px;
  border-bottom: 4px solid #000;
  animation: titleIntro 0.6s ease-out;
}

h1 {
  margin: 0;
  font-size: 24px;
}

p {
  font-size: 12px;
  margin-top: 8px;
}

h2 {
  text-align: center;
  border-bottom: 2px solid #0ff;
  padding-bottom: 0.5rem;
}

section {
  padding: 2rem 1rem;
}

/* 🎨 作品ギャラリー */
.gallery {
  display: grid;
  gap: 10px;
  margin-top: 1rem;
  justify-content: center;
}

.gallery-item {
  width: 100px;
}

.gallery img {
  width: 80px;
  height: auto;
  border: 4px solid #555;
  background: #222;
  cursor: pointer;
  transition: transform 0.2s;
}

.gallery img:hover {
  animation: vibrate 0.2s linear;
}

.gallery img:active {
  animation: pulse 0.3s ease;
}

/* レスポンシブ対応 */
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 767px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 🟦 ハンバーガーメニュー */
nav {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  z-index: 999;
}

.menu-toggle {
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
}

.menu-content {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 40px;
  right: 10px;
  background: #222;
  border: 2px solid #0ff;
  padding: 10px;
  width: 150px;
}

.menu-content a {
  color: #0ff;
  text-decoration: none;
  margin: 5px 0;
  font-size: 12px;
}

.menu-content a:hover {
  text-decoration: underline;
}

/* ボタン共通スタイル */
button {
  font-family: inherit;
  font-size: 10px;
  padding: 8px 12px;
  background-color: #0ff;
  border: 2px solid #000;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background-color: #fff;
  color: #000;
  animation: vibrate 0.2s linear;
}

button:active {
  animation: buttonBlink 0.2s ease;
}

footer {
  text-align: center;
  font-size: 0.8rem;
  background-color: #111;
  padding: 1rem;
  border-top: 1px solid #0ff;
}

/* アニメーション定義 */
@keyframes vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes buttonBlink {
  0%, 100% { background-color: #0ff; transform: scale(1); }
  50% { background-color: #fff; transform: scale(1.1); }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes titleIntro {
  0% { opacity: 0; transform: translateY(-20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}