/**
 * オンライン説明会ページの特徴カードを管理する。
 *
 * 特徴セクションの背景、カード2列レイアウト、アイコン、見出し、本文と、そのレスポンシブ切替をこのファイルで完結させる。
 * 860px以下の2列維持と620px以下の1列化を同じ責務内に置き、後段CSSからカード構造を上書きしない。
 */

/**
 * 特徴カード一覧
 *
 * PCでは情報量と視線移動のバランスを取るため2列で配置し、カード内の番号・アイコン・本文の視覚階層を統一する。
 */

.consultation-features {
	padding: 100px 0 110px;
	background: linear-gradient(rgba(255, 249, 251, 0.94), rgba(255, 249, 251, 0.94)), radial-gradient(circle at 50% 0, rgba(239, 120, 188, 0.13), transparent 45%);
	border-block: 1px solid rgba(239, 120, 188, 0.65);
}

.consultation-feature-grid {
	max-width: 860px;
	margin: 48px auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.consultation-feature-card {
	position: relative;
	min-height: 275px;
	padding: 39px 30px 32px;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(239, 120, 188, 0.95);
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(158, 83, 105, 0.07);
}

.consultation-feature-card__number {
	position: absolute;
	top: 15px;
	left: 18px;
	color: rgba(158, 83, 105, 0.36);
	font-family: Georgia, serif;
	font-size: 13px;
}

.consultation-feature-card__icon {
	width: 74px;
	height: 74px;
	margin: 0 auto 20px;
	display: grid;
	place-items: center;
	color: var(--rose);
	background: var(--rose-pale);
	border-radius: 50%;
}

.consultation-feature-card__icon svg {
	width: 46px;
	height: 46px;
	stroke-width: 1.45;
}

.consultation-feature-card h3 {
	margin: 0;
	color: var(--wine);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.55;
}

.consultation-feature-card p {
	margin: 15px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.9;
}

/**
 * PCでは前後セクションとの境界を明確にするため、特徴セクションの上下に十分な余白を確保する。
 * 760px以下の余白は既存のレスポンシブ設計を維持し、この指定を適用しない。
 */
@media (min-width: 761px) {
	.consultation-features {
		padding-block: 132px 148px;
	}
}

/**
 * 特徴カードのレスポンシブ設計
 *
 * 860px以下では既存の2列構成を維持しつつ列幅計算を単純化する。
 * 620px以下ではカードを1列へ切り替え、セクション余白も縮小して縦方向の過剰な空白を防ぐ。
 */
@media (max-width: 860px) {
	.consultation-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.consultation-features {
		padding-block: 76px;
	}

	.consultation-feature-grid {
		grid-template-columns: 1fr;
	}
}