/* ==========================================================
   community.css — コミュニティページ専用
   ========================================================== */
.community-hero { padding-bottom: 62px; }
.community-hero__mark {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin: 5px auto 10px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1;
  transform: rotate(-12deg);
}

.community-statement {
  margin: 27px 0 28px;
  padding: 21px 20px 20px;
  background: linear-gradient(145deg, #f3fbff, #fff);
  border-left: 4px solid var(--teal);
  box-shadow: var(--shadow);
}
.community-statement p {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}
.community-statement p + p { margin-top: 4px; }

.community-activities { padding-bottom: 64px; }
.community-card {
  display: flex;
  gap: 15px;
  padding: 21px 17px;
  background: var(--card);
  border: 1px solid rgba(196, 214, 232, 0.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.community-card + .community-card { margin-top: 14px; }
.community-card--closed { border-color: rgba(47, 182, 196, 0.5); }
.community-card__symbol {
  flex: none;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  border-radius: 50%;
  background: #dcf3f4;
  color: #157f8b;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.community-card__body { min-width: 0; }
.community-card__type {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.community-card h3,
.community-magic h3 {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
}
.community-card__body > p:not(.community-card__type),
.community-magic__card > p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.community-card__note {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--sky);
  font-size: 11px !important;
}
.community-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.community-card__link span { font-family: var(--font-en); font-size: 15px; }
.community-card__link:hover { color: var(--teal); }

.community-magic { padding-bottom: 62px; }
.community-magic__card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #20274f, #314f7c);
  color: #fff;
  box-shadow: var(--shadow);
}
.community-magic__card::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -46px;
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.community-magic__spark {
  color: #f6d676;
  font-size: 24px;
  line-height: 1;
}
.community-magic h3 { margin-top: 10px; }
.community-magic__card > p { color: rgba(255, 255, 255, 0.83); }
.community-magic .community-card__link { color: #fff0a9; position: relative; z-index: 1; }
.community-magic .community-card__link:hover { color: #fff; }

.community-learning { padding-bottom: 64px; }
.community-learning__card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.community-learning figure { margin: 0; }
.community-learning img {
  width: 108px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.community-learning figcaption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}
.community-learning__card > div > p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 350px) {
  .community-card { gap: 11px; padding: 18px 14px; }
  .community-card__symbol { width: 34px; height: 34px; font-size: 14px; }
  .community-learning__card { grid-template-columns: 88px minmax(0, 1fr); gap: 13px; }
  .community-learning img { width: 88px; }
}