/*
 * B面FVのSP配置。A面のCSS（ai_driven_webcreator.css）は触らず、.hero-b で上書きする。
 * SPは写真を背景に敷くと顔にリードが重なるので、文章 → 写真 → ボタンの順に縦に並べる。
 * 写真（1066x1476）は幅いっぱいに置き、上の空の部分だけリードの下にもぐらせる。
 *   顔はおよそ写真の高さの34〜55%、ボタンは胸元（62%〜）に重ねる。
 */
.awc .hero-figure {
	display: none;
}
@media (max-width: 767px) {
	.awc .hero.hero-b {
		display: block;
		min-height: 0;
		padding: 48px 0 0;
	}
	.awc .hero-b .hero-photo,
	.awc .hero-b .hero-scrim {
		display: none;
	}
	.awc .hero-b .hero-figure {
		display: block;
		position: relative;
		z-index: -1;
		margin: -44vw -22px 0;
		aspect-ratio: 1066 / 1476;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
	}
	.awc .hero-b .hero-figure-img {
		object-fit: cover;
	}
	.awc .hero-b .cta-row {
		position: relative;
		margin-top: -53vw;
		margin-bottom: calc(53vw - 138px);
	}
}