/**
 * LPテンプレート共通スタイル（page-lp1〜lp6で使用）
 * - LP用CTAボタン（インナーシャドウ: x0 y-4 ぼかし0 #000000 10% ・アニメーション）
 */

/* LP CTAボタン：目立つアニメーション（インナーシャドウ込み）※transformでセンタリング維持 */
@keyframes lp-cta-pulse {
	0%, 100% {
		transform: translateX(-50%) scale(1);
		-webkit-transform: translateX(-50%) scale(1);
		-ms-transform: translateX(-50%) scale(1);
		box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1), 0 4px 20px rgba(229, 57, 53, 0.5);
	}
	50% {
		transform: translateX(-50%) scale(1.05);
		-webkit-transform: translateX(-50%) scale(1.05);
		-ms-transform: translateX(-50%) scale(1.05);
		box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1), 0 8px 32px rgba(229, 57, 53, 0.7);
	}
}

@keyframes lp-cta-glow {
	0%, 100% {
		filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
	}
	50% {
		filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.9));
	}
}

.lp-cta-btn {
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	border-radius: 50%;
	animation: lp-cta-pulse 2s ease-in-out infinite, lp-cta-glow 2s ease-in-out infinite;
}

.lp-cta-btn:hover {
	animation: lp-cta-pulse 0.8s ease-in-out infinite, lp-cta-glow 0.8s ease-in-out infinite;
}

/* FVボタン：横幅に連動する bottom（425px のとき 1.75rem） */
.lp-fv-section .lp-cta-btn {
	bottom: 6.588vw;
}

/* 下のCTAエリア */
.lp-cta-section {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
}
.lp-cta-section._noradius {
	border-radius: 0;
}
.lp-cta-section .lp-cta-btn {
	bottom: 9.224vw;
}

/* CTAエリア内ボタンは位置取得用として残し、常に見えない・押せない */
.lp-cta-section .lp-cta-btn.is-measure-only,
.lp-cta-section .lp-cta-btn-measure {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* 固定CTAボタン */
.lp-cta-btn-fixed {
	position: fixed;
	left: 50%;
	bottom: 16px;
	width: 77.41%;
	z-index: 9999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateX(-50%) translateY(20px);
	-webkit-transform: translateX(-50%) translateY(20px);
	-ms-transform: translateX(-50%) translateY(20px);

	will-change: opacity, transform;

	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		visibility 0s linear 0.35s;
}

.lp-cta-btn-fixed.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateX(-50%) translateY(0);
	-webkit-transform: translateX(-50%) translateY(0);
	-ms-transform: translateX(-50%) translateY(0);

	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		visibility 0s linear 0s;
}

/* CTAでビタ止め中：位置変更はアニメーションさせない */
.lp-cta-btn-fixed.is-pinned.is-visible {
	transition:
		opacity 0.35s ease,
		visibility 0s linear 0s;
}

/* CTA通過・非表示時：フェードアウトで一瞬見えるのを防ぐ */
.lp-cta-btn-fixed.is-no-transition {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: none !important;
}

/* LP画像共通 */
.lp-cta-btn img,
.lp-fv-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ========== 全LP共通：ひとつ目のセクション（お悩み） ========== */
.lp-section-1 {
	background: #FFFEDE;
	padding-block: 5.647%;
}
.lp-section-1-inner {
	max-width: 425px;
	margin: 0 auto;
}
.lp-section-1 img {
	width: 86.11%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ========== 全LP共通：2つ目のセクション（選ばれる理由） ========== */
.lp-section-2 {
	background: #fff;
}
.lp-section-2-ttl {
	width: 100%;
	height: auto;
	display: block;
}
.lp-section-2-content {
	padding-block-start: 7px;
	padding-block-end: 24px;
}
.lp-section-2-content img {
	width: 88.23%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ========== 全LP共通：3つ目のセクション（お客様の声） ========== */
.lp-section-3 {
	background: #ECFDFF;
	padding-block: 24px;
}
.lp-section-3._yellow {
	background: #FFFEDE;
}
.lp-section-3._light {
	background: #F4FEFF;
}
.lp-section-3-ttl {
	width: 76.47%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.lp-section-3-content {
	padding-block-start: 7px;
}
.lp-section-3-content img {
	width: 88.23%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.lp-section-ba{
	padding-block: 32px;
	background: #FFFFFF;

}
.lp-section-ba img {
	width: 84.23%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.lp-section-appeal{
	background: #FFFEDE;
	padding-block: 24px 40px;
}
.lp-section-appeal .lp-section-appeal-ttl{
	width: 91.05%;
	margin: 0 auto;
}
.lp-section-appeal .lp-section-appeal-ttl img{
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.lp-section-appeal .lp-section-appeal-content{
	margin-block-start: 40px;
}
.lp-section-appeal .lp-section-appeal-content-ttl{
	width: 61.17%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.lp-section-appeal .lp-section-appeal-content-img{
	margin-block-start: 16px;
	width: 71.52%;
	height: auto;
	display: block;
	margin-inline: auto;
}
.lp-section-appeal .lp-section-appeal-content-txt{
	margin-block-start: 40px;
	width: 83.29%;
	height: auto;
	display: block;
	margin-inline: auto;
}
.lp-section-worries{
	position: relative;
	background-image: url('../img/lp/worries_back.png');
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
}
.lp-section-worries::before{
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 50%;
	aspect-ratio: 211/126;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	background: #FFFEDE;
}
.lp-section-worries::after{
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 50%;
	aspect-ratio: 211/126;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	background: #FFFEDE;
}
.lp-section-worries img{
	position: relative;
	z-index: 2;
	display: block;
	width: 90.82%;
	height: auto;
	margin-inline: auto;
}
.lp-section-achievement img{
	display: block;
	width: 100%;
	height: auto;
}
/* ========== 全LP共通：アクセスセクション ========== */
.lp-access-section {
	background: #fff;
}
.lp-access-img {
	width: 100%;
	height: auto;
	display: block;
}
/* ========== 全LP共通：フッター ========== */
.lp-footer {
	background: #21656F;
	padding-block: 20px 18px;
	text-align: center;
}
.lp-footer img {
	width: 90%;
	height: auto;
	display: block;
	margin: 0 auto;
}