/* c-card-001: 特徴カード */

.c-card-001 {
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border--radius--md);
  padding: var(--wp--preset--spacing--md);
  transition: box-shadow var(--wp--custom--transition--duration--base) var(--wp--custom--transition--timing--ease);
}
.c-card-001:hover {
  box-shadow: var(--wp--custom--shadow--md);
}

.c-card-001__title {
  font-size: var(--wp--preset--font-size--lg);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.c-card-001__description {
  color: var(--wp--preset--color--gray-dark);
  line-height: var(--wp--custom--line-height--relaxed);
}

/* ══════════════════════════════════════════════════
   ボーダーカラー
   ══════════════════════════════════════════════════ */

/** @element root  @group ボーダーカラー  @label プライマリ  @order 1 */
.c-card-001--border-primary {
  border: 1px solid var(--wp--preset--color--primary-light);
}

/** @element root  @group ボーダーカラー  @label セカンダリ  @order 2 */
.c-card-001--border-secondary {
  border: 1px solid var(--wp--preset--color--secondary-light);
}

/** @element root  @group ボーダーカラー  @label グレー  @order 3 */
.c-card-001--border-gray {
  border: 1px solid var(--wp--preset--color--gray-lighter);
}

/* ══════════════════════════════════════════════════
   形状
   ══════════════════════════════════════════════════ */

/** @element root  @group 形状  @label 角丸大  @order 1 */
.c-card-001--round {
  border-radius: var(--wp--custom--border--radius--xl);
}

/** @element root  @group 形状  @label フラット  @order 2 */
.c-card-001--flat {
  border-radius: 0;
}

/* ══════════════════════════════════════════════════
   影
   ══════════════════════════════════════════════════ */

/** @element root  @group 影  @label 常時影  @order 1 */
.c-card-001--shadow-always {
  box-shadow: var(--wp--custom--shadow--sm);
}

/** @element root  @group 影  @label 影なし  @order 2 */
.c-card-001--shadow-none {
  box-shadow: none;
}
.c-card-001--shadow-none:hover {
  box-shadow: none;
}

/* ══════════════════════════════════════════════════
   パディング
   ══════════════════════════════════════════════════ */

/** @element root  @group パディング  @label コンパクト  @order 1 */
.c-card-001--compact {
  padding: var(--wp--preset--spacing--sm);
}

/** @element root  @group パディング  @label ゆったり  @order 2 */
.c-card-001--spacious {
  padding: var(--wp--preset--spacing--lg);
}

/* ══════════════════════════════════════════════════
   ホバー
   ══════════════════════════════════════════════════ */

/** @element root  @group ホバー  @label 浮き上がり  @order 1 */
.c-card-001--hover-float:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--custom--shadow--lg);
}

/** @element root  @group ホバー  @label 拡大  @order 2 */
.c-card-001--hover-scale:hover {
  transform: scale(1.03);
}