/* ########### ナビゲーションボタン ########### */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.nav-buttons button {
  background-color: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nav-buttons button:hover {
  transform: translateY(-2px);
  background-color: #38bdf8;
  border-color: #38bdf8;
  color: #0f172a;
}

.nav-buttons button:active {
  transform: scale(0.95);
}



/* ########### スマホ用レスポンシブ ########### */
@media (max-width: 768px) {
  body {
    padding: 1rem;
    /* 余白を少し減らす */
  }

  header h1 {
    font-size: 1.8rem;
    /* タイトルを小さめに */
  }

  header p {
    font-size: 1rem;
    /* サブタイトルも縮小 */
  }

  .container {
    grid-template-columns: 1fr;
    /* カードを縦積みに */
    gap: 1rem;
    margin: 1rem 0;
  }

  .card {
    padding: 1rem;
  }

  .card h2 {
    font-size: 1.4rem;
  }

  .card p {
    font-size: 1rem;
  }

  .step-number {
    font-size: 2rem;
  }

  footer {
    flex-direction: column;
    /* フッターを縦積みに */
    gap: 1rem;
    width: 100%;
    min-width: auto;
    /* 最小幅制限を解除 */
  }

  .flex-columns {
    flex-direction: column;
    /* カラムを縦方向に */
    gap: 0.75rem;
  }

  .flex-columns .column {
    width: 100%;
    /* 横幅いっぱいに */
  }

  footer span {
    margin-top: 1rem;
    /* ブランド名を下に配置 */
  }
}