/* =========================================================
   Grid
   カード等を並べる枠。装飾は持たない。
   素 = 1列。769px以上で指定列数。
   ========================================================= */
.grid,
.grid-2,
.grid-4,
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 769px) {
  .grid,
  .grid-2,
  .grid-4,
  .split-grid {
    gap: 4px;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-2,
  .split-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   Card
   .card     … 縦積み（画像 → 見出し帯 → 本文）
   .blogcard … 素は縦積み、769px以上で左画像・右説明
   グリッド列数は .grid / .grid-2 / .grid-4 側
   ========================================================= */

/* ---------------------------------------------------------
   .card
   --------------------------------------------------------- */
.card {
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: var(--obj-pos, center 20%);
}

.card-header {
  padding: 14px 12px;
  background: #009688;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.05rem;
  text-align: center;
}

.card-header a {
  color: #fff;
  text-decoration: none;
}

.card-content {
  padding: 16px;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (min-width: 769px) {
  .card img {
    height: 200px;
  }
}

/* カード画像の焦点。必要なら .card に付ける */
.card10 { --obj-pos: center 10%; }
.card15 { --obj-pos: center 15%; }
.card20 { --obj-pos: center 20%; }
.card25 { --obj-pos: center 25%; }
.card30 { --obj-pos: center 30%; }
.card35 { --obj-pos: center 35%; }
.card40 { --obj-pos: center 40%; }
.card45 { --obj-pos: center 45%; }
.card50 { --obj-pos: center 50%; }
.card55 { --obj-pos: center 55%; }
.card60 { --obj-pos: center 60%; }

/* ---------------------------------------------------------
   .blogcard
   素: 上画像 / 下説明
   769px以上: 左画像 / 右説明
   画像要素は先頭に置く
   --------------------------------------------------------- */
.blogcard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  max-width: min(520px, 100%);
  margin: 1.25rem 0;
  padding: 10px;
  border: 0.5px solid #3f3;
  border-radius: 10px;
  background: #fff;
}

.blogcard-img {
  display: block;
  width: 100%;
  height: auto;
}

.blogcard > :last-child,
.blogcard .body,
.blogcard-content {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blogcard-date {
  margin: 0 0 2px;
  color: #3a3;
  font-size: 12px;
}

.blogcard-title {
  margin: 2px 0;
}

p.blogcard-description {
  margin: 2px 0 0;
  font-size: 0.85em;
  text-align: left;
}

@media (min-width: 769px) {
  .blogcard {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    width: fit-content;
  }

  .blogcard-img {
    width: 140px;
    max-width: 140px;
  }
}