/* ==========================================================================
   大濠公園ガーデニングクラブ - 共通スタイル
   ========================================================================== */

:root {
  --green-deep: #2f6b4f;
  --green-main: #3f8a5f;
  --green-light: #e8f3ea;
  --flower-pink: #e8628a;
  --flower-orange: #f0964a;
  --flower-yellow: #f4c430;
  --cream: #fdfaf3;
  --text-main: #2f3a33;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: var(--text-main);
  background-color: var(--cream);
}

.font-heading {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

/* ---------- ヘッダー / ナビゲーション ---------- */
.site-header {
  backdrop-filter: blur(6px);
}

.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 3px;
  background: var(--flower-pink);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--green-deep);
  font-weight: 700;
}

#mobile-menu {
  transition: max-height 0.3s ease;
}

/* ---------- ヒーローセクション ---------- */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 50, 35, 0.35) 0%,
    rgba(20, 50, 35, 0.55) 100%
  );
}

.hero-flower-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  z-index: 0;
}

/* ---------- カード共通 ---------- */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px -12px rgba(47, 107, 79, 0.35);
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.badge-report {
  background: #dff1e3;
  color: var(--green-deep);
}
.badge-event {
  background: #fde3ea;
  color: var(--flower-pink);
}
.badge-info {
  background: #fef3d9;
  color: #b5820a;
}
.badge-recruit {
  background: #ffe6d2;
  color: var(--flower-orange);
}

/* ---------- セクションタイトル ---------- */
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--flower-pink), var(--flower-orange));
  border-radius: 4px;
}

/* ---------- ボタン ---------- */
.btn-primary {
  background: var(--green-main);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--flower-pink);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-accent:hover {
  background: #d1436c;
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--green-main);
  color: var(--green-deep);
  background: transparent;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background: var(--green-main);
  color: #fff;
}

/* ---------- フッター ---------- */
.footer-wave {
  display: block;
  line-height: 0;
}

/* ---------- フォーム ---------- */
.form-input {
  border: 1px solid #d7ddd6;
  border-radius: 0.6rem;
  padding: 0.65rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--green-main);
  box-shadow: 0 0 0 3px rgba(63, 138, 95, 0.15);
}

/* ---------- ローディング ---------- */
.loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-main);
  display: inline-block;
  animation: bounce 1.2s infinite ease-in-out both;
}
.loader-dot:nth-child(2) { animation-delay: 0.15s; }
.loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---------- Instagramリンク ---------- */
.icon-instagram {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  color: #fff;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.icon-instagram:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(238, 42, 123, 0.4);
}

.icon-instagram-footer {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.icon-instagram-footer:hover {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  transform: translateY(-2px);
}

/* ---------- Instagram CTAバナー ---------- */
.instagram-banner {
  background: linear-gradient(120deg, #405de6 0%, #833ab4 25%, #c13584 50%, #e1306c 75%, #fd1d1d 100%);
}

/* ---------- 花壇テーマカラー ---------- */
:root {
  --bed-a: #5fae7c;      /* 風のガーデン：常緑ベースグリーン */
  --bed-a-soft: #eaf7ef;
  --bed-b: #4a3f57;      /* モダン花壇：シック＆上品な濃紫グレー */
  --bed-b-soft: #eeeaf2;
  --bed-c: #2f7d6b;      /* オアシス花壇：和の落ち着いたグリーン */
  --bed-c-soft: #e6f4f0;
  --bed-d: #d6336c;      /* ビビット花壇：華やかなビビッドピンク */
  --bed-d-soft: #fce8ef;
  --bed-e: #ef9fc0;      /* ナチュラル花壇：やさしいピンク */
  --bed-e-soft: #fdf1f6;
  --bed-g: #6fa83c;      /* 分離帯：プリペットのベースグリーン */
  --bed-g-soft: #f1f8e9;
}

.bed-badge {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: #fff; flex-shrink: 0;
}
.bed-detail-card { border-top: 6px solid transparent; }
.bed-detail-a { border-top-color: var(--bed-a); }
.bed-detail-b { border-top-color: var(--bed-b); }
.bed-detail-c { border-top-color: var(--bed-c); }
.bed-detail-d { border-top-color: var(--bed-d); }
.bed-detail-e { border-top-color: var(--bed-e); }
.bed-detail-g { border-top-color: var(--bed-g); }

.coming-soon-box {
  border: 2px dashed #c9c4b8;
  border-radius: 0.75rem;
  background: repeating-linear-gradient(135deg, #faf8f2, #faf8f2 10px, #f3efe4 10px, #f3efe4 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #9b9587;
}

/* ---------- ユーティリティ ---------- */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}