.fixed-thumbnail {
    width: 100%;
    height: 120px;
    object-fit: cover;
  }
  

body {
  background-color: #14070e;
  color: #f2d4dc;
  font-family: 'Segoe UI', sans-serif;
}

h2 {
  color: #ec516d;
  text-align: center;
  margin-bottom: 2rem;
}

.catch-copy {
  color: #e5b1c5;
}

.card {
  background-color: #2b1a24;
  border: 1px solid #3b2633;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  color: #f8dbe5;
}

.card-title {
  color: #ff9ebd;
}

.card-text {
  color: #f1c8da;
}

.fixed-thumbnail {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
}

.btn-category {
  background-color: #3a1f2b;
  color: #ffc2d1;
  border: 1px solid #5c2f42;
  border-radius: 6px;
  padding: 4px 10px;
  margin-right: 0.5rem;
  transition: background-color 0.2s, color 0.2s;
}

.btn-category:hover {
  background-color: #502d3c;
}

.btn-category.selected {
  background-color: #d6336c;
  color: white;
  border-color: #d6336c;
}

.btn-primary {
  background-color: #e91e63;
  border-color: #e91e63;
  color: white;
}

.btn-primary:hover {
  background-color: #c2185b;
  border-color: #c2185b;
  color: white;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active {
  background-color: #c2185b !important;
  border-color: #991e4f !important;
  color: white !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-secondary {
  background-color: #6d4c57;
  border: none;
  color: white;
}

.btn-secondary:hover {
  background-color: #593945;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus:active {
  background-color: #593945 !important;
  color: white !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

a.btn:focus,
a.btn:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: inherit !important;
  color: inherit !important;
}

.modal-content {
  background-color: #2a1a25;
  color: #ffe4ed;
}

.modal-header,
.modal-footer {
  border-color: #442837;
}

.footer-fixed {
  color: #e5b1c5 !important;
}

/* カテゴリ切り替えアニメーション */
.fade-in {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}