/*
 * 植木屋ポータル - 緑と茶色ベースのデザイン
 */

:root {
  --color-green-dark: #2d5a27;
  --color-green: #4a7c43;
  --color-green-light: #7eb77a;
  --color-brown-dark: #5d4037;
  --color-brown: #8d6e63;
  --color-brown-light: #bcaaa4;
  --color-cream: #f5f5dc;
  --color-white: #ffffff;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  background-color: #fafaf5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ナビゲーション */
.navbar-portal {
  background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green) 100%);
}

.navbar-portal .navbar-brand {
  font-weight: bold;
  color: var(--color-white) !important;
}

.navbar-portal .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-portal .nav-link:hover {
  color: var(--color-white) !important;
}

/* フッター */
.footer-portal {
  background-color: var(--color-brown-dark);
  color: var(--color-cream);
}

.footer-portal a {
  color: var(--color-cream);
}

/* ヒーローセクション */
.hero-section {
  background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green) 50%, var(--color-brown) 100%);
}

/* ボタン */
.btn-primary {
  background-color: var(--color-green) !important;
  border-color: var(--color-green) !important;
}

.btn-primary:hover {
  background-color: var(--color-green-dark) !important;
  border-color: var(--color-green-dark) !important;
}

.btn-outline-primary {
  color: var(--color-green) !important;
  border-color: var(--color-green) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
}

/* カード */
.shop-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e0e0e0;
}

.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header.bg-primary {
  background-color: var(--color-green) !important;
}

/* ステップ番号 */
.step-number {
  width: 40px;
  height: 40px;
  background-color: var(--color-green);
  color: var(--color-white);
  font-weight: bold;
}

/* リンク色 */
a {
  color: var(--color-green);
}

a:hover {
  color: var(--color-green-dark);
}

/* アラート */
.alert-success {
  background-color: #e8f5e9;
  border-color: var(--color-green-light);
  color: var(--color-green-dark);
}

/* フォーム */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 0.25rem rgba(74, 124, 67, 0.25);
}

/* バッジ */
.badge.bg-warning {
  background-color: #ffc107 !important;
}

.badge.bg-info {
  background-color: #17a2b8 !important;
}

.badge.bg-success {
  background-color: var(--color-green) !important;
}

/* モバイル対応 */
@media (max-width: 576px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .hero-section {
    padding: 2rem 0 !important;
  }

  .hero-section h1 {
    font-size: 1.5rem;
  }

  .hero-section .lead {
    font-size: 0.9rem;
  }
}