/* ==============================
  活動内容
============================== */
.activity-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.activity-content {
  display: none;
  padding: 16px 0 32px;
}
.activity-content.open {
  display: block;
}
/* アクティビティ分類タイトル */
.activity-description {
  margin: 50px 0 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--main);
  scroll-margin-top: 100px;
}
.activity-description::before {
  content: "■ ";
}
.activity-description:nth-of-type(1) {
  margin-top: 0;
}

/* アクティビティカード配置 */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
/* グリッドで高さを無理に揃えない */
.activity-grid {
  align-items: start;
}

.activity-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  scroll-margin-top: 100px;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.activity-card img {
  width: 100%;
  height: auto; /* 高さ固定を解除 */
  object-fit: contain; /* 全体表示 */
  display: block;
}

.activity-card .card-title {
  font-weight: 600;
  margin: 12px;
}
.activity-card ul {
  margin: 0 12px 0;
  padding-left: 16px;
  font-size: 0.9rem;
}
.activity-card li {
  list-style: disc;
  margin-left: 0.5rem;
  line-height: 1.4;
}

.activity-pdf {
  margin: 12px 10% 20px;
  padding: 0.2rem 1rem;
  background-color: #eee;
  display: inline-block;
  width: 80%;
  text-align: center;
  border-radius: var(--radius);
  transition: background-color 0.3s ease;
}
.activity-card:hover .activity-pdf {
  background-color: var(--accent);
}

/* カード共通 */
.activity-card-nav a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: 0.3s ease;

  /* デフォルト（色なしカード用） */
  background-color: #f0f0f0;
  color: #333;
}

/* デフォルトhover */
.activity-card-nav a:hover {
  opacity: 0.85;
}

/*
  ▼ミドルサイズ（タブレット）=============================================================================
*/
@media (max-width: 1059px) {
  .activity-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .activity-description:nth-of-type(1) {
    margin-top: 0;
  }
}
/*▲ミドルサイズ ここまで    =============================================================================*/

/*
  ▼スモールサイズ（スマホ）=============================================================================
*/
@media (max-width: 700px) {
  .activity-menu {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* アクティビティ分類タイトル */
  .activity-description {
    font-size: 1.2rem;
    font-weight: 600;
  }
}

/*▲スモールサイズ ここまで ============================================================================*/

/* ======================================
  カテゴリ別カラー
====================================== */

/* PDF */
.category-pdf a {
  background-color: #2c3e50;
  color: #fff;
}
.category-pdf a:hover {
  background-color: #1a252f;
}

/* 野外活動 */
.category-outdoor a {
  background-color: #4caf50;
  color: #fff;
}
.category-outdoor a:hover {
  background-color: #388e3c;
}

/* チーム・冒険体験 */
.category-adventure a {
  background-color: #ff9800;
  color: #fff;
}
.category-adventure a:hover {
  background-color: #f57c00;
}

/* 遊び・観察・スポーツ */
.category-play a {
  background-color: #2196f3;
  color: #fff;
}
.category-play a:hover {
  background-color: #1976d2;
}

/* その他屋外活動 */
.category-other a {
  background-color: #795548;
  color: #fff;
}
.category-other a:hover {
  background-color: #5d4037;
}

/* 屋内活動 */
.category-indoor a {
  background-color: #607d8b;
  color: #fff;
}
.category-indoor a:hover {
  background-color: #455a64;
}

/* 防災活動 */
.category-disaster a {
  background-color: #e53935;
  color: #fff;
}
.category-disaster a:hover {
  background-color: #c62828;
}

/* クラフト活動 */
.category-craft a {
  background-color: #9c27b0;
  color: #fff;
}
.category-craft a:hover {
  background-color: #7b1fa2;
}

/* 調理活動 */
.category-food a {
  background-color: #ff5722;
  color: #fff;
}
.category-food a:hover {
  background-color: #e64a19;
}

/* ======================================
  開閉制御
====================================== */
.activity-toggle {
  margin: 40px 0 16px;
  padding: 12px 16px;
  font-size: 1.2rem;
  font-weight: 700;
  background: #f7f8f6;
  border-left: 6px solid var(--main);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.activity-toggle::after {
  content: "▼";
  position: absolute;
  right: 16px;
  transition: transform 0.3s ease;
}
.activity-toggle.open::after {
  transform: rotate(180deg);
}