@charset "UTF-8";

/**
 * 共通設定
 */
:where(.hanasuto-front-page) {
	--page-gap: 28px;

	h2 {
		font-weight: 600;
		margin-block: clamp(20px, 5vw, 55px);
		text-align: center;
	}

	.color-accent {
		color: var(--color-accent);
	}
}


.hanasuto-front-page {
	section {
		max-width: calc(1280px + 28px * 2);
		margin-inline: auto;
		padding-inline: 28px;
	}

	.background-wave {
		--wave-h: clamp(1px, calc(100vw - 375px), calc(142 / 1280 * 100vw));
		background-color: var(--color-sub);
		background-clip: content-box;
		padding-block: var(--wave-h);
		position: relative;

		&::before,
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: var(--wave-h);
			/* aspect-ratio: 1280 / 142; */
			background-color: var(--color-sub);
			clip-path: url(#clippath-wave);
			position: absolute;
			z-index: -1;
		}

		&::before {
			top: 5px;
		}

		&::after {
			transform: scale(1, -1);
			bottom: 5px;
		}
	}

	:has(> .decobox-border) {
		position: relative;
		z-index: 0;
	}

	.decobox-border {
		--decobox-color: var(--color-accent);
		--decobox-background: var(--color-base);
		--decobox-round: 10px;
		--decobox-boder-w: 4px;
		--decobox-boder-w2: calc(var(--decobox-boder-w) * 2);
		border: 2px solid var(--decobox-color);
		border-radius: var(--decobox-round);
		background-color: var(--decobox-background);
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 7px;
			left: 8px;
			z-index: -1;
			display: block;
			width: 100%;
			height: 100%;
			border-radius: var(--decobox-round);
			background-image: repeating-linear-gradient(-45deg,
					transparent, transparent var(--decobox-boder-w),
					var(--decobox-color) var(--decobox-boder-w), var(--decobox-color) var(--decobox-boder-w2));
		}
	}

	.button-slidechange {
		--background: var(--color-accent);
		width: min(100%, 230px);
		aspect-ratio: 230 / 48;
	}
}




/**
 * First Content
 */
.first-content {
	width: 100%;
	padding: var(--page-gap);
	background-image: url("../img/background-image.svg");
	background-color: var(--color-sub);
	background-position: center;
	background-size: 1842px 1300px;

	display: flex;
	flex-direction: column;
	place-content: center;
	place-items: center;
	gap: clamp(60px, 16vw, 72px);

	@media (min-width: 1024px) {
		height: calc(100vh - var(--header--height));
		max-height: 920px;
		flex-direction: row;
	}

	.first-content-left {
		display: grid;
		place-items: center;

		@media (min-width: 768px) {
			place-items: start;
		}

		.first-content-title {
			max-height: 480px;
			font-weight: bold;
			font-size: 24px;
			text-align: center;
			gap: 48px;

			@media (min-width: 768px) {
				min-width: 448px;
				font-size: 32px;
				text-align: left;
				word-break: keep-all;
			}

			span {
				display: block;
				text-align: center;
			}

			img {
				max-width: 230px;
				display: block;
				margin: auto;
			}

			.logo-carecone {
				height: 100%;
				width: 100%;
				margin-block: 30px;

				@media (min-width: 768px) {
					margin-block: clamp(30px, 8vw, 60px);
					margin-bottom: 48px;
				}
			}
		}

		.first-content-link {
			margin: 40px auto auto;
		}
	}

	.first-content-right {
		--max-width: 480px;
		max-width: var(--max-width);

		@media (min-width: 768px) {
				min-width: 420px;
			}
		@media (min-width: 1024px) {
			width: 480px;
		}
		img {
			max-width: 420px;
			margin: auto ;
			display: block;
			width: 100%;
			@media (min-width: 1024px) {
				margin: auto 0 auto auto;
				}
		}
	}
}




/**
 * Section Introduction (前書き・序文)
 */
.section-introduction {
	margin-block: 80px;

	.introduction-title {
		display: grid;
		row-gap: 20px;
		font-size: 24px;
		text-align: left;

		@media (min-width: 600px) {
			font-size: 32px;
			text-align: center;
		}
	}

	.introduction-text {
		margin-block: 30px;
		font-size: 16px;
		text-align: left;

		@media (min-width: 600px) {
			margin-block: 40px;
			font-size: 20px;
			text-align: center;
		}
	}

	:is(.youtube-player, .vimeo-player) {
		display: block;
		width: min(100%, 800px);
		height: auto;
		aspect-ratio: 16 / 9;
		margin-inline: auto;
	}
}




/**
 * Main Content (主要な機能紹介)
 */
.main-content {
	display: grid;
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
	row-gap: 50px;
	margin-inline: var(--page-gap);
	margin-block: 50px;

	@media (min-width: 768px) {
		grid-template-columns: minmax(0, 1000px);
		row-gap: 48px;
	}

	.main-content-item {
		&:nth-child(odd) {
			--flex-direction: row;
			--tagline-position: 0 auto;
			--tagline-arrow: 100% 100%;
			--title-align: left;
			--image-position: 0 0 0 auto;
			--image-size: 420px;
		}

		&:nth-child(even) {
			--flex-direction: row-reverse;
			--tagline-position: auto 0;
			--tagline-arrow: 0% 100%;
			--title-align: right;
			--image-position: 0 auto 0 0;
			--image-size: 270px;
		}

		@media (min-width: 768px) {
			display: flex;
			flex-direction: var(--flex-direction);
			place-content: center;
			align-items: center;
			gap: clamp(16px, 4.5vw, 62px);
		}
	}

	.content-block {
		@media (min-width: 768px) {
			flex: 1;
		}

		&.text {}

		&.image {}

		.content-tagline {
			--size-h: 35px;
			--background-color: var(--color-accent);
			display: grid;
			place-content: center;
			width: fit-content;
			min-width: 100px;
			min-height: var(--size-h);
			margin-inline: var(--tagline-position);
			padding-block: 5px;
			padding-inline: 1em;
			border-radius: var(--size-h);
			background-color: var(--background-color);
			font-size: 16px;
			color: var(--color-base);
			position: relative;

			&::before {
				position: absolute;
				top: calc(100% - 2px);
				right: calc(50% - 4px);
				content: "";
				display: block;
				width: 9px;
				aspect-ratio: 3 / 4;
				background-color: var(--background-color);
				clip-path: polygon(0% 0%, 100% 0%, var(--tagline-arrow));
			}
		}

		.content-title {
			margin-block: clamp(10px, 2.5vw, 20px);
			font-size: var(--fs-title);
			font-weight: 600;
			text-align: var(--title-align);
		}

		.content-text {
			display: grid;
			row-gap: 0.5em;
			margin-bottom: 30px;

			@media (min-width: 768px) {
				margin-bottom: initial;
			}
		}

		.content-image {
			display: block;
			width: 100%;
			max-width: var(--image-size);
			margin: auto;
			@media (min-width: 768px) {
				margin: var(--image-position);
				}
		}
	}
}




/**
 * Promotional Banner
 */
.promotional-banner {
	padding-inline: var(--page-gap);

	.promotional-banner-link {
		display: block;
		max-width: var(--max-width-sp);
		margin-block: 90px;
		margin-inline: auto;

		@media (min-width: 600px) {
			max-width: var(--max-width-pc);
		}
	}
}




/**
 * Benefits
 */
.section-benefits {
	margin-block: 120px;

	.section-benefits-title {
		font-size: clamp(24px, 6.4vw, 32px);
		margin-block-end: 0;
	}

	.section-benefits-caption {
		text-align: center;
		margin-block: 1em;
	}

	.section-benefits-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px;
		margin-block: 40px;
	}

	.section-benefits-item {
		display: flex;
		flex-direction: column;
		gap: clamp(20px, 5.3vw, 30px);
		width: 100%;
		padding: 30px;
		max-width: 480px;

		@media (min-width: 860px) {
			width: calc(50% - 28px / 2);
		}

		.item-title {
			margin-inline: -20px;
			font-weight: 600;
			font-size: clamp(20px, 4vw, 24px);
			color: var(--color-accent);
			text-align: center;

			@media (min-width: 480px) {
				display: flex;
				justify-content: center;
				place-items: center;
				column-gap: 0.5em;

				&::before {
					content: "…";
					transform: rotate(45deg);
				}

				&::after {
					content: "…";
					transform: rotate(-45deg);
				}
			}
		}

		.item-subtitle {
			font-weight: 600;
			font-size: clamp(14px, 3.7vw, 18px);
		}

		.item-text {
			font-size: clamp(14px, 3.7vw, 16px);
			color: #9C9C9C;
		}
	}
}




/**
 * Voices
 */
.section-voices {
	margin-block: 120px;

	.section-voices-title {
		font-size: clamp(24px, 6.4vw, 32px);
	}

	.section-voices-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px;
	}

	.section-voices-item {
		container-type: inline-size;
		width: 100%;
		max-width: 480px;

		@media (min-width: 860px) {
			width: calc(50% - 15px);
		}

		.container-inner {
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 16px;
			column-gap: 24px;
			padding: clamp(20px, 6.25cqw, 30px);
			--user-data-align: center;

			@container (min-width: 420px) {
				flex-direction: row;
				--user-data-align: left;
			}
		}

		.item-user-icon {
			width: 104px;
			height: 104px;
			margin-inline: auto;
		}

		.item-user-data {
			.user-data {
				font-weight: 600;
				text-align: var(--user-data-align);
				margin-bottom: 1em;
			}

			.user-voice {
				font-size: clamp(14px, 3.7vw, 16px);
			}
		}
	}
}




/**
 * FAQ
 */
.section-faq {
	margin-block: 120px;

	.section-faq-title {
		font-size: clamp(24px, 6.4vw, 32px);
	}

	.section-faq-content {
		display: grid;
		gap: 30px;
		max-width: 936px;
		margin-inline: auto;
		--background-color: #EBF1F7;

		.faq-list {
			font-weight: 600;
		}

		.faq-title {
			padding-block: 1em;
			padding-left: clamp(3em, 8.2vw, 4em);
			padding-right: 1.25em;
			line-height: 1.25;
			background-color: var(--background-color);
			position: relative;

			&::before {
				content: "Q";
				position: absolute;
				left: clamp(1em, 3.6vw, 1.75em);
			}
		}

		.faq-detail {
			padding-block: 1em;
			padding-left: clamp(3em, 8.2vw, 4em);
			padding-right: 1.25em;
			border: 3px solid var(--background-color);
			position: relative;

			&::before {
				content: "A";
				position: absolute;
				left: clamp(1em, 3.6vw, 1.75em);
			}
		}
	}

	.section-faq-link {
		--color: var(--color-main);
		--background: var(--color-base);
		border-color: var(--color-main);

		margin-block: 40px;
		margin-inline: auto;
	}

	.carecone-button {
		position: relative;
		align-items: center;
		margin-block: 40px;
		margin-inline: auto;
	}
}