@charset "UTF-8";

/* ========================================
   CTA
======================================== */
.cta {
	overflow: hidden;
	background-color: #eaf6ff;
	background-image: url("../images/cta-bg.jpg");
	background-position: center;
	background-size: cover;
}

.cta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;

	max-width: 960px;
	min-height: 300px;
	padding-block: 30px;
}

.cta__title {
	margin-bottom: 14px;
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.5vw, 30px);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.cta__text {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.9;
}

.cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;

	min-height: 44px;
	padding: 10px 24px;
	border-radius: 30px;

	color: var(--color-white);
	background: #007acb;
	font-size: 13px;

	transition: background-color 0.2s ease;
}

.cta__button:hover {
	background: #005f9f;
}

.cta__image {
	width: 100%;
	max-width: 400px;
	justify-self: center;
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 767px) {
	.cta__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-block: 40px 0;
	}

	.cta__content {
		text-align: center;
	}

	.cta__title {
		font-size: 24px;
		letter-spacing: 0.02em;
	}

	.cta__image {
		max-width: 280px;
	}
}


/* ========================================
   CTA：風の装飾
======================================== */
.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cta__inner {
	position: relative;
	z-index: 1;
}

.cta__wind {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.cta__wind>svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* JSが有効な場合、画面内に入るまで隠す */
.cta.is-wind-ready .cta__wind>svg {
	clip-path: inset(0 100% 0 0);
}

/* 画面内に入ったら左から右へ表示 */
.cta.is-wind-visible .cta__wind>svg {
	animation: cta-wind-reveal 1.2s ease-in-out both;
}

@keyframes cta-wind-reveal {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* スマホでは横幅を広げ、カーブを緩やかに */
@media (max-width: 767px) {
	.cta__wind {
		left: -30%;
		right: -30%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cta.is-wind-ready .cta__wind>svg,
	.cta.is-wind-visible .cta__wind>svg {
		animation: none;
		clip-path: none;
	}
}



/* ========================================
   CTA：葉っぱ
======================================== */
.cta__leaf {
	--leaf-angle: -15deg;
	--leaf-delay: .3s;
	--leaf-duration: 6s;

	position: absolute;
	display: block;
	width: 25px;
	height: 14px;
	border-radius: 100% 0 100% 0;

	background: linear-gradient(145deg,
			#d3e997 0%,
			#94c743 45%,
			#4c982f 100%);
	opacity: .7;
	transform: rotate(var(--leaf-angle));
}

.cta__leaf::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 8%;
	width: 84%;
	height: 1px;
	background: rgb(255 255 255 / 45%);
	transform: rotate(-25deg);
}

/* 文字や人物の中央を避けて配置 */
.cta__leaf--1 {
	top: 40%;
	left: 8%;
}

.cta__leaf--2 {
	--leaf-angle: 10deg;
	--leaf-delay: .5s;
	--leaf-duration: 7s;
	top: 80%;
	left: 12%;
	width: 30px;
	height: 17px;
}

.cta__leaf--3 {
	--leaf-angle: -25deg;
	--leaf-delay: .7s;
	--leaf-duration: 8s;
	top: 15%;
	left: 61%;
	width: 22px;
	height: 12px;
}

.cta__leaf--4 {
	--leaf-angle: 15deg;
	--leaf-delay: .9s;
	--leaf-duration: 6.5s;
	top: 83%;
	left: 84%;
}

/* CTAが開始位置に来るまで隠す */
.cta.is-wind-ready .cta__leaf {
	opacity: 0;
}

/* 既存JSの開始クラスに連動 */
.cta.is-wind-visible .cta__leaf {
	animation:
		cta-leaf-appear 1s ease-out var(--leaf-delay) both,
		cta-leaf-float var(--leaf-duration) ease-in-out calc(var(--leaf-delay) + 1s) infinite;
}

@keyframes cta-leaf-appear {
	from {
		opacity: 0;
		transform:
			translateY(16px) rotate(calc(var(--leaf-angle) - 10deg)) scale(.85);
	}

	to {
		opacity: .7;
		transform:
			translateY(0) rotate(var(--leaf-angle)) scale(1);
	}
}

@keyframes cta-leaf-float {

	0%,
	100% {
		transform:
			translate(0, 0) rotate(var(--leaf-angle));
	}

	30% {
		transform:
			translate(5px, -8px) rotate(calc(var(--leaf-angle) + 7deg));
	}

	65% {
		transform:
			translate(-3px, 4px) rotate(calc(var(--leaf-angle) - 5deg));
	}
}

/* スマホ：風を横に広げた分、葉っぱの位置を補正 */
@media (max-width: 767px) {
	.cta__leaf {
		width: 20px;
		height: 11px;
	}

	.cta__leaf--1 {
		left: 23%;
	}

	.cta__leaf--2 {
		left: 28%;
	}

	.cta__leaf--3 {
		left: 70%;
	}

	.cta__leaf--4 {
		left: 77%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cta.is-wind-ready .cta__leaf,
	.cta.is-wind-visible .cta__leaf {
		animation: none;
		opacity: .7;
		transform: rotate(var(--leaf-angle));
	}
}



/* ========================================
   スマホ：CTAの風を横長にする
======================================== */
@media (max-width: 767px) {

	/* 葉っぱの配置範囲はCTA全体に維持 */
	.cta__wind {
		inset: 0;
	}

	/* 風だけを下側の横長の範囲に配置 */
	.cta__wind>svg {
		position: absolute;
		top: auto;
		bottom: 70px;
		left: -45%;

		width: 190%;
		height: 180px;
	}

	/* 前の横幅補正を戻して葉っぱを配置 */
	.cta__leaf--1 {
		top: 35%;
		left: 7%;
	}

	.cta__leaf--2 {
		top: 82%;
		left: 13%;
	}

	.cta__leaf--3 {
		top: 14%;
		left: 84%;
	}

	.cta__leaf--4 {
		top: 86%;
		left: 92%;
	}
}