@import url('style.css?v=1.0.4');

/* タイトル背景を白背景に統一 */
.page-title {
  padding: 120px 20px 40px;
  text-align: center;
  background: none;
}

.page-title h1 {
  font-size: 36px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #222;
}

/* カテゴリボタン */
.category-buttons {
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 15px;
  margin: 30px auto 50px;
  padding: 0 20px;
}

.category-btn {
  background: linear-gradient(135deg, #d4f1ff, #aee4f8);
  color: #035b7a;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 4px 8px rgba(174, 228, 248, 0.5);
  text-align: center;
  width: 220px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.category-btn:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, #c6ebf8, #91dff3);
  box-shadow: 0 6px 12px rgba(140, 215, 240, 0.6);
}

/* Worksリスト */
.works-list {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

/* ダークモード */
body.dark-mode .page-title {
  background: none;
  color: #f3f3f3;
}

body.dark-mode .works-list {
  color: #f3f3f3;
}

body.dark-mode .category-btn {
  background: linear-gradient(135deg, #9dd9ef, #7cc8e8);
  color: #f0f8ff;
  box-shadow: 0 4px 8px rgba(100, 200, 230, 0.4);
}

body.dark-mode .category-btn:hover {
  background: linear-gradient(135deg, #87cce2, #68b7d8);
  box-shadow: 0 6px 12px rgba(100, 200, 230, 0.6);
}

@media (max-width: 500px) {
  .category-btn {
    width: 100%;
    max-width: 300px;
  }
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  text-align: center;
  padding: 30px;
  background: #bfd2e6;
  color: white;
  /* 固定ではなく自然に最下部にくるよう調整 */
}