/**
 * わむずリニューアル ページ固有スタイル: 初めての方へ (slug=hajimete)
 *
 * 共通デザインシステム (renewal.css / .wn-) を基本にし、このページだけの微調整を後勝ちで足す。
 * レイアウトは共通クラス (wn-hero / wn-zigzag / wn-card-grid / wn-cta) を流用しているため、
 * 独自レイアウトは持たない。ここでは CTA帯の電話ボタン2つの並び (横並び→モバイル縦積み) のみ調整する。
 * ※ 390px 相当でも横スクロールが出ないよう、固定幅は使わず flex-wrap + gap のみで組む。
 */

/* CTA帯: 電話ボタン2つを中央寄せで横並び。狭い画面では自動で縦積み (共通CSSが ≤800px で .wn-btn を全幅化)。 */
.wn-page .hj-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0 auto;
}

.wn-page .hj-media-slot {
	overflow: hidden;
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 10;
	border: 1px solid rgba(147, 121, 96, .22);
	border-radius: var(--wn-radius);
	box-shadow:
		0 12px 30px rgba(74, 61, 49, .06);
}

.wn-page .hj-media-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}