.card {
  width: 100%;
  max-width: var(--content-max-width, 1050px);
  margin: 0 auto 20px auto;
  padding: var(--content-padding, 20px);
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
  box-sizing: border-box;
  color: var(--fg);
}

.card--hoverable:hover {
  box-shadow: none;
  border-color: var(--glass-border-hover);
  transform: none;
}

@media (max-width: 768px) {
  .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  /* カードが連続する箇所では前カードの下端と二重線になるため、後続カードの上端は引かない */
  .card + .card {
    border-top: none;
  }
}