/* ============================================
   c-card-15 — 特徴カード（ピンク背景+タイトル+説明）
   3col subgrid: Row 1 = タイトル, Row 2 = 説明
   ============================================ */

/* --- WP block margin reset --- */
:is(.c-card-15 *) {
  margin: 0;
}

/* --- Card container (subgrid) --- */
.c-card-15.wp-block-group,
.c-card-15 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  background-color: var(--color-primary-lightest); /* 薄いピンク: 濃ピンクの見出しとのコントラスト確保 */
  border-radius: var(--radius-md); /* サイト共通の角丸(md=8px)に統一 */
  padding: var(--space-3-xl) var(--space-2-xl);
  text-align: left;
}

@container (min-width: 600px) {
  .c-card-15 {
    padding: var(--space-4-xl) var(--space-3-xl);
  }
}

/* --- 角丸写真つきカード（__image を内包する場合）---
   subgrid（2行）を解除し、写真→タイトルを縦積みにする。
   写真なしカード（アイコン or タイトル単体）は従来どおり subgrid のまま。 */
.s-card-10__grid:has(.c-card-15__image) {
  grid-template-rows: auto;
}

.c-card-15:has(.c-card-15__image) {
  grid-row: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-xl);
  justify-content: flex-start;
}

/* カード上部の角丸写真（4:3 cover） */
.c-card-15__image {
  margin: 0;
}

.c-card-15__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* --- Row 1: Head（アイコン＋タイトル）。アイコンは任意（無くてもタイトル単体で成立） --- */
.c-card-15__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* 独自アイコン（白背景ピンク線画・透過PNG）をタイトル上に中央配置 */
.c-card-15__icon {
  flex-shrink: 0;
}

.c-card-15__icon img {
  display: block;
  width: var(--space-8-xl); /* 約64px */
  height: auto;
}

@container (min-width: 600px) {
  .c-card-15__icon img {
    width: var(--space-9-xl); /* 約80px */
  }
}

/* --- Row 1: Title --- */
.c-card-15__title {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

/* 見出しと本文の間に中央寄せの短い横棒（約12px=--space-md） */
.c-card-15__title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, var(--space-md));
  width: var(--space-md);
  height: 1px;
  background-color: var(--color-primary);
}

@container (min-width: 600px) {
  .c-card-15__title {
    font-size: var(--font-size-2-xl);
  }
}

/* --- Row 2: Description --- */
.c-card-15__desc {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--line-height-loose);
  padding-top: var(--space-md);
  text-align: left;
}

@container (min-width: 600px) {
  .c-card-15__desc {
    font-size: var(--font-size-md);
  }
}