/*------------------------------------------------
	Variable
------------------------------------------------*/

/* color */
:root {

	/* base */
	--lp-color-primary:            hsl(55 100% 50% / 1);
	--lp-color-secondary:          hsl(200 80% 50% / 1);
	--lp-color-secondary-pale:     hsl(200 80% 96% / 1);
	--lp-color-secondary-pale-alt: hsl(200 80% 94% / 1);
	--lp-color-secondary-text:     hsl(220 50% 35% / 1);
	--lp-color-tertiary:           hsl(0 0% 20% / 1);
	--lp-color-accent:             hsl(340 80% 60% / 1);
	--lp-color-accent-light:       hsl(340 80% 70% / 1);
	--lp-color-accent-pale:        hsl(340 80% 96% / 1);

	--lp-color-text:      hsl(0 0% 20% / 1);
	--lp-color-link:      hsl(210 60% 60% / 1);

	/* black and white */
	--lp-color-black: hsl(0 0% 0% / 1);
	--lp-color-white: hsl(0 0% 100% / 1);
}

/* typography */
:root {

	/* font-family */
	--lp-font-family: "Inter", "Noto Sans JP", sans-serif;

	/* font-size */
	--lp-font-size-xs:  clamp(0.625rem, 0.55rem + 0.32vw, 0.75rem);  /* 10px - 12px */
	--lp-font-size-sm:  clamp(0.75rem, 0.675rem + 0.32vw, 0.875rem); /* 12px - 14px */
	--lp-font-size-md:  clamp(0.875rem, 0.8rem + 0.32vw, 1rem);      /* 14px - 16px */
	--lp-font-size-lg:  clamp(1rem, 0.925rem + 0.32vw, 1.125rem);    /* 16px - 18px */
	--lp-font-size-xl:  clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);  /* 18px - 20px */
	--lp-font-size-2xl: clamp(1.25rem, 1.1rem + 0.64vw, 1.5rem);     /* 20px - 24px */
	--lp-font-size-3xl: clamp(1.5rem, 1.2rem + 1.28vw, 2rem);        /* 24px - 32px */
	--lp-font-size-4xl: clamp(2rem, 1.7rem + 1.28vw, 2.5rem);        /* 32px - 40px */
	--lp-font-size-5xl: clamp(2.5rem, 2.2rem + 1.28vw, 3rem);        /* 40px - 48px */

	/* font-weight */
	--lp-font-weight-normal: 400;
	--lp-font-weight-bold:   700;

	/* line-height */
	--lp-line-height-min: 1;
	--lp-line-height-sm: 1.4;
	--lp-line-height-md: 1.6;
	--lp-line-height-lg: 2;
}

/* layout */
:root {

	/* base */
	--lp-content-size: 1000px;

	/* spacing */
	--lp-spacing-xs:  0.25rem /* 4px */;
	--lp-spacing-sm:  0.5rem  /* 8px */;
	--lp-spacing-md:  1rem    /* 16px */;
	--lp-spacing-lg:  1.25rem /* 20px */;
	--lp-spacing-xl:  1.5rem  /* 24px */;
	--lp-spacing-2xl: 2rem    /* 32px */;
	--lp-spacing-3xl: 2.5rem  /* 40px */;
	--lp-spacing-4xl: 3.5rem  /* 56px */;
	--lp-spacing-5xl: 5rem    /* 80px */;
	--lp-spacing-6xl: 7.5rem  /* 120px */;
	
	--lp-spacing-gutter: var(--lp-spacing-lg);

	/* border-radius */
	--lp-border-radius-sm: 4px;
	--lp-border-radius-md: 8px;
	--lp-border-radius-lg: 16px;
	--lp-border-radius-max: calc(1px / 0);
}

/*------------------------------------------------
	LP
------------------------------------------------*/

body {
	color: var(--lp-color-text);
	font-family: var(--lp-font-family);
	font-size: var(--lp-font-size-md);
	line-height: var(--lp-line-height-md);
}

/* header */
.header {
	padding-inline: var(--lp-spacing-gutter);
	background-color: var(--lp-color-white);

	.header-container {
		display: block grid;
		justify-content: start;
		max-inline-size: var(--lp-content-size);
		margin-inline: auto;
		padding-block: var(--lp-spacing-xl);
	}

	@media (any-hover: hover) {
		.header-logo a {
			transition: opacity 0.3s;
	
			&:hover {
				opacity: 0.7;
			}
		}
	}
}

/* footer */
.footer {
	padding-inline: var(--lp-spacing-gutter);
	background-color: var(--lp-color-secondary);

	.footer-container {
		max-inline-size: var(--lp-content-size);
		margin-inline: auto;
		padding-block: var(--lp-spacing-xl);
	}

	.copyright {
		color: var(--lp-color-white);
		font-size: var(--lp-font-size-xs);
		line-height: var(--lp-line-height-min);
		text-align: center;
	}
}

/* block */
.block {
	padding-inline: var(--lp-spacing-gutter);
	background-color: var(--lp-color-white);

	.block-container {
		max-inline-size: var(--lp-content-size);
		margin-inline: auto;
		padding-block: var(--lp-spacing-6xl);
	}

	&:nth-child(odd) {
		background-color: var(--lp-color-secondary-pale);
	}
}

@media (width <= 768px) {
	.block {

		.block-container {
			padding-block: var(--lp-spacing-4xl);
		}
	}
}

/* visual */
.visual {
	position: relative;
	overflow: hidden;
	padding-inline: var(--lp-spacing-gutter);
	background-color: var(--lp-color-primary);
	background-image: url("/wp-content/themes/suite/assets/images/lp/background_visual_01.svg"),
					  url("/wp-content/themes/suite/assets/images/lp/background_visual_02.svg");
	background-position: calc((100vw - 1000px) / 2 - 60px), bottom;
	background-repeat: no-repeat;
	background-size: auto, cover;

	.visual-container {
		display: block grid;
		grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
		column-gap: 64px;
		row-gap: var(--lp-spacing-3xl);
		max-inline-size: var(--lp-content-size);
		margin-inline: auto;
		padding-block: var(--lp-spacing-5xl);
	}

	.visual-title-wrapper {
		display: block grid;
		row-gap: var(--lp-spacing-xl);
		
		.visual-title img {
			inline-size: 100%;
		}

		.visual-subtitle {
			grid-row: 1;
			justify-self: start;
			padding: 0.5em 1em;
			color: var(--lp-color-secondary);
			font-size: var(--lp-font-size-md);
			line-height: var(--lp-line-height-sm);
			border-radius: var(--lp-border-radius-max);
			background-color: var(--lp-color-secondary-pale);
		}
	}

	.visual-button-wrapper {
		display: block grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: end;
		column-gap: var(--lp-spacing-sm);
		margin-block-start: var(--lp-spacing-3xl);

		.visual-button {
			display: block grid;
			align-items: end;
			justify-items: center;
			row-gap: var(--lp-spacing-sm);

			img {
				display: block;
			}

			span {
				inline-size: 100%;
				padding: 1em;
				font-size: var(--lp-font-size-md);
				font-weight: var(--lp-font-weight-bold);
				line-height: var(--lp-line-height-sm);
				text-align: center;
				border: 2px solid transparent;
				border-radius: var(--lp-border-radius-md);
				transition: color 0.3s, background-color 0.3s;
			}

			&.--primary {

				img {
					z-index: 1;
					margin-block-end: -20px;
				}
	
				span {
					color: var(--lp-color-white);
					background-color: var(--lp-color-accent);
				}
			}
			
			@media (any-hover: hover) {
				&.--primary {

					&:hover span {
						background-color: var(--lp-color-accent-light);
					}
				}
			}

			&.--secondary {

				span {
					color: var(--lp-color-accent);
					border-color: var(--lp-color-accent);
					background-color: var(--lp-color-white);
				}
			}

			@media (any-hover: hover) {
				&.--secondary {

					&:hover span {
						background-color: var(--lp-color-accent-pale);
					}
				}
			}
		}
	}

	.visual-note {
		margin-block-start: var(--lp-spacing-md);
		color: hsl(0 0% 40% / 1);
		font-size: var(--lp-font-size-sm);
		line-height: var(--lp-line-height-min);
		text-align: right;
	}

	.visual-image {
		display: block grid;
		place-content: center;
		
		img {
			max-inline-size: 688px;
		}
	}
}

@media (width <= 768px) {
	.visual {
		background-image: url("/wp-content/themes/suite/assets/images/lp/background_visual_02.svg");
		background-position: bottom;
		background-size: contain;

		.visual-container {
			padding-block: var(--lp-spacing-4xl);
		}

		.visual-title-wrapper {
			row-gap: var(--lp-spacing-lg);
		}

		.visual-button-wrapper {
			display: block grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: end;
			column-gap: var(--lp-spacing-sm);
			margin-block-start: var(--lp-spacing-3xl);

			.visual-button {
				row-gap: var(--lp-spacing-sm);

				span {
					font-size: var(--lp-font-size-md);
				}
			}
		}

		.visual-image img {
			inline-size: 100%;
			max-inline-size: unset;
		}
	}
}

/* logo */
.logo {
	padding-inline: var(--lp-spacing-gutter);
	background-color: var(--lp-color-white);

	.logo-container {
		display: block grid;
		row-gap: var(--lp-spacing-md);
		max-inline-size: var(--lp-content-size);
		margin-inline: auto;
		padding-block: var(--lp-spacing-2xl);
	}

	.logo-text {
		color: hsl(0 0% 40% / 1);
		font-size: var(--lp-font-size-sm);
		text-align: center;
	}
}

@media (width <= 768px) {
	.logo {

		.logo-container {
			row-gap: var(--lp-spacing-sm);
			padding-block: var(--lp-spacing-xl);
		}
	}
}

/* about */
.about {

	.block-container {
		display: block grid;
		grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
		gap: var(--lp-spacing-3xl);
	}

	.about-title {
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-font-size-3xl);
	}

	.about-text {
		margin-block-start: var(--lp-spacing-xl);
		font-size: var(--lp-font-size-lg);
		line-height: var(--lp-line-height-lg);
	}
	
	.about-logo {
		display: block grid;
		place-content: center;
		min-block-size: 160px;
		border-radius: var(--lp-border-radius-lg);
		background-color: var(--lp-color-white);
	}
	
	.about-card {
		display: block grid;
		row-gap: var(--lp-spacing-md);
		padding: var(--lp-spacing-3xl);
		border-radius: var(--lp-border-radius-lg);
		background-color: var(--lp-color-secondary-pale-alt);

		.about-card-title {
			color: var(--lp-color-secondary-text);
			font-size: var(--lp-font-size-xl);
		}

		video {
			border-radius: var(--lp-border-radius-md);
			overflow: hidden;
		}

		@media (any-hover: hover) {
			a {
				transition: opacity 0.3s;
		
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}

@media (width <= 768px) {
	.about {

		.block-container {
			gap: var(--lp-spacing-2xl);
		}
	
		.about-title {
			font-size: var(--lp-font-size-2xl);
		}
	
		.about-text {
			margin-block-start: var(--lp-spacing-lg);
			font-size: var(--lp-font-size-md);
		}
		
		.about-logo {
			border-radius: var(--lp-border-radius-md);
		}
		
		.about-card {
			row-gap: var(--lp-spacing-sm);
			padding: var(--lp-spacing-2xl);
	
			.about-card-title {
				font-size: var(--lp-font-size-lg);
			}
		}
	}
}

/* feature */
.feature {
	background-image: url("/wp-content/themes/suite/assets/images/lp/background_feature_01.svg"),
					  url("/wp-content/themes/suite/assets/images/lp/background_feature_02.svg");
	background-position: right top, left bottom;
	background-repeat: no-repeat;

	.block-container {
		display: block grid;
		row-gap: var(--lp-spacing-6xl);
	}
}

/* issue */
.issue {
	display: block grid;
	row-gap: var(--lp-spacing-3xl);

	.issue-title {
		display: block grid;
		justify-items: center;
		row-gap: var(--lp-spacing-sm);
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-font-size-4xl);
	}
}

@media (width <= 768px) {
	.issue {
		row-gap: var(--lp-spacing-2xl);

		.issue-title {
			row-gap: var(--lp-spacing-xs);
			font-size: var(--lp-font-size-3xl);

			img {
				block-size: 56px;
			}
		}

		.issue-image {
			display: block grid;
			place-content: center;
		}
	}
}

/* solution */
.solution {
	display: block grid;
	row-gap: var(--lp-spacing-5xl);

	.solution-title {
		display: block grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: var(--lp-spacing-3xl);
		color: var(--lp-color-secondary);
		font-size: var(--lp-font-size-4xl);
		text-align: center;

		&::before,
		&::after {
			content: "";
			inline-size: 100%;
			block-size: 2px;
			background-color: var(--lp-color-secondary);
			opacity: 0.2;
		}
	}

	.solution-content {
		display: block grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--lp-spacing-3xl);
	}

	.solution-content-number {
		color: var(--lp-color-secondary);
		font-size: var(--lp-spacing-3xl);
		font-weight: var(--lp-font-weight-bold);
		line-height: var(--lp-line-height-sm);
		opacity: 0.2;
	}

	.solution-content-title {
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-spacing-2xl);
		line-height: var(--lp-line-height-sm);
	}

	.solution-content-text {
		font-size: var(--lp-font-size-lg);
		line-height: var(--lp-line-height-lg);
	}
	
	.solution-content-image {
		display: block grid;
		place-content: center;
		grid-column: 2 / 3;
		grid-row: 1 / 4;
	}

	.solution-content:nth-of-type(even) .solution-content-image {
		grid-column: 1 / 2;
		grid-row: 1 / 4;
	}
}

@media (width <= 768px) {
	.solution {
		row-gap: var(--lp-spacing-4xl);

		.solution-title {
			column-gap: var(--lp-spacing-2xl);
			font-size: var(--lp-font-size-3xl);
		}

		.solution-content {
			grid-template-columns: unset;
			gap: var(--lp-spacing-2xl);
		}

		.solution-content-number {
			font-size: var(--lp-spacing-2xl);
		}

		.solution-content-title {
			font-size: var(--lp-spacing-xl);
		}

		.solution-content-text {
			font-size: var(--lp-font-size-md);
		}
		
		.solution-content-image,
		.solution-content:nth-of-type(even) .solution-content-image {
			grid-column: unset;
			grid-row: unset;
		}
	}
}

@media (width <= 560px) {
	.solution {

		.solution-title {
			grid-template-columns: unset;

			&::before,
			&::after {
				display: none;
				visibility: hidden;
			}
		}
	}
}

/* scene */
.scene {
	display: block grid;
	align-items: start;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lp-spacing-3xl);
	padding: var(--lp-spacing-4xl);
	border-radius: var(--lp-border-radius-lg);
	background-color: hsl(50 80% 96% / 1);
	
	.scene-inner {
		display: block grid;
		align-items: start;
		row-gap: var(--lp-spacing-xl);
	}

	.scene-label {
		justify-self: start;
		padding: 0.5em 1em;
		color: var(--lp-color-white);
		font-size: var(--lp-font-size-md);
		font-weight: var(--lp-font-weight-bold);
		line-height: var(--lp-line-height-sm);
		border-radius: var(--lp-border-radius-max);
		background-color: hsl(30 80% 50% / 1);
	}
	
	.scene-title {
		font-size: var(--lp-font-size-3xl);
		line-height: var(--lp-line-height-sm);
	}

	.scene-text {
		font-size: var(--lp-font-size-lg);
		line-height: var(--lp-line-height-lg);
	}

	.scene-list {
		display: block grid;
		row-gap: var(--lp-spacing-sm);
		padding-inline-start: unset;
		list-style: none;
	}

	.scene-item {
		padding: var(--lp-spacing-lg);
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-font-size-lg);
		font-weight: var(--lp-font-weight-bold);
		border: 1px solid hsl(50 80% 90% / 1);
		border-radius: var(--lp-border-radius-md);
		background-color: var(--lp-color-white);

		span {
			font-size: 0.9em;
		}
	}
}

@media (width <= 768px) {
	.scene {
		grid-template-columns: unset;
		gap: var(--lp-spacing-2xl);
		padding: var(--lp-spacing-3xl);
		
		.scene-inner {
			row-gap: var(--lp-spacing-lg);
		}
		
		.scene-title {
			font-size: var(--lp-font-size-2xl);
		}

		.scene-text {
			font-size: var(--lp-font-size-md);
		}

		.scene-item {
			padding: var(--lp-spacing-md);
			font-size: var(--lp-font-size-md);
		}
	}
}

@media (width <= 425px) {
	.scene {
		padding: var(--lp-spacing-xl);
	}
}

/* usecase */
.usecase {
	
	.block-container {
		display: block grid;
		row-gap: var(--lp-spacing-3xl);
		max-inline-size: unset;
	}

	.usecase-title {
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-font-size-3xl);
		line-height: var(--lp-line-height-sm);
		text-align: center;
	}

	.usecase-list {
		position: relative;
		margin-inline: calc(var(--lp-spacing-gutter) * -1);
	}

	.usecase-card {
		display: block grid;
		align-items: start;
		grid-template-columns: 1fr 2fr;
		gap: var(--lp-spacing-3xl);
		margin-inline: var(--lp-spacing-2xl);
		padding: var(--lp-spacing-4xl);
		border-radius: var(--lp-border-radius-lg);
		background-color: var(--lp-color-white);
	}

	.usecase-card-title {
		grid-column: 1 / 3;
		padding-block-end: 1em;
		font-size: var(--lp-font-size-2xl);
		border-bottom: 1px solid hsl(0 0% 90% / 1);
	}

	.usecase-card-cutomer {
		display: block grid;
		align-items: start;
		row-gap: var(--lp-spacing-md);
		grid-column: 1 / 2;
		grid-row: 2 / 4;

		h6 {
			font-size: var(--lp-font-size-md);
			font-weight: var(--lp-font-weight-normal);
			line-height: var(--lp-line-height-sm);
		}

		picture {
			display: block grid;
			border: 1px solid hsl(0 0% 90% / 1);
			border-radius: var(--lp-border-radius-md);
			overflow: hidden;
		}
	}

	.usecase-card-issue,
	.usecase-card-benefit {
		display: block grid;
		row-gap: var(--lp-spacing-md);

		h4 {
			display: block grid;
			align-items: center;
			grid-template-columns: 24px 1fr;
			column-gap: var(--lp-spacing-md);
			font-size: var(--lp-font-size-lg);
			line-height: var(--lp-line-height-sm);

			&::before {
				content: "";
				inline-size: 24px;
				block-size: 24px;
				background-size: cover;
			}
		}

		li {
			font-size: var(--lp-font-size-md);
			line-height: var(--lp-line-height-lg);
		}
	}

	.usecase-card-issue h4 {
		color: hsl(0 0% 60% / 1);

		&::before {
			background-image: url("/wp-content/themes/suite/assets/images/lp/icon_usecase_01.svg");
		}
	}

	.usecase-card-benefit h4 {
		color: hsl(30 80% 50% / 1);

		&::before {
			background-image: url("/wp-content/themes/suite/assets/images/lp/icon_usecase_02.svg");
		}
	}

	.slick-slider {

		.slick-arrow {
			z-index: 1 !important;
			inline-size: 64px !important;
			block-size: 64px !important;

			&::before {
				content: "" !important;
				width: 100% !important;
				height: 100% !important;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.slick-prev::before, .slick-next::before {
			opacity: 1 !important;
			background-size: contain !important;
		}

		.slick-prev {
			left: calc((100% - 1000px - 256px) / 2) !important;

			&::before {
				background-image: url("/wp-content/themes/suite/assets/images/lp/button_slick_prev.svg") !important;
			}
		}
		
		.slick-next {
			right: calc((100% - 1000px - 256px) / 2) !important;
			
			&::before {
				background-image: url("/wp-content/themes/suite/assets/images/lp/button_slick_next.svg") !important;
			}
		}

		.slick-dots {
			position: static !important;
			margin-block-start: var(--lp-spacing-xl);

			li button:before {
				font-size: 12px !important;
				line-height: 24px !important;
			}
		}
	}
}

@media (width <= 1256px) {
	.usecase {
		.slick-slider {

			.slick-prev {
				left: 0 !important;

			}
			
			.slick-next {
				right: 0 !important;
			}
			
		}
	}
}

@media (width <= 768px) {
	.usecase {

		.usecase-title {
			font-size: var(--lp-font-size-2xl);
		}

		.usecase-card {
			grid-template-columns: 1fr 1fr;
			gap: var(--lp-spacing-2xl);
			padding: var(--lp-spacing-3xl);
		}

		.usecase-card-title {
			padding-block-end: 1em;
			font-size: var(--lp-font-size-xl);
		}

		.usecase-card-cutomer {
			row-gap: var(--lp-spacing-sm);

			h6 {
				font-size: var(--lp-font-size-sm);
			}
		}

		.usecase-card-issue,
		.usecase-card-benefit {
			row-gap: var(--lp-spacing-sm);

			h4 {
				grid-template-columns: 20px 1fr;
				column-gap: var(--lp-spacing-sm);
				font-size: var(--lp-font-size-md);

				&::before {
					content: "";
					inline-size: 20px;
					block-size: 20px;
				}
			}

			li {
				font-size: var(--lp-font-size-sm);
				line-height: var(--lp-line-height-md);
			}
		}

		.slick-slider {

			.slick-arrow {
				inline-size: 32px !important;
				block-size: 32px !important;
			}
		}
	}
}

@media (width <= 560px) {
	.usecase {

		.usecase-card {
			grid-template-columns: unset;
		}

		.usecase-card-title {
			grid-column: unset;
		}

		.usecase-card-cutomer {
			grid-column: unset;
			grid-row: unset;
		}
	}
}

/* faq */
.faq {
	background-image: url("/wp-content/themes/suite/assets/images/lp/background_feature_01.svg"),
					  url("/wp-content/themes/suite/assets/images/lp/background_feature_02.svg");
	background-position: right top, left bottom;
	background-repeat: no-repeat;
	
	.block-container {
		display: block grid;
		row-gap: var(--lp-spacing-3xl);
	}

	.faq-title {
		color: var(--lp-color-secondary-text);
		font-size: var(--lp-font-size-3xl);
		line-height: var(--lp-line-height-sm);
		text-align: center;
	}

	.faq-list {
		display: block grid;
		row-gap: var(--lp-spacing-xl);
		max-inline-size: 800px;
		margin-inline: auto;
	}

	.faq-term,
	.faq-description {
		display: block grid;
		grid-template-columns: 32px 1fr;
		column-gap: var(--lp-spacing-lg);
		align-items: baseline;

		&::before {
			display: block grid;
			place-content: center;
			inline-size: 32px;
			block-size: 32px;
			line-height: var(--lp-line-height-min);
			text-align: center;
			border-radius: var(--lp-border-radius-max);
		}
	}

	.faq-term {
		font-size: var(--lp-font-size-lg);
		line-height: var(--lp-line-height-sm);

		&::before {
			content: "Q";
			color: var(--lp-color-secondary-text);
			background-color: var(--lp-color-secondary-pale);
		}

		&:not(:first-of-type) {
			margin-block-start: var(--lp-spacing-md);
		}
	}

	.faq-description {
		font-size: var(--lp-font-size-lg);
		line-height: var(--lp-line-height-lg);

		&::before {
			content: "A";
			color: var(--lp-color-white);
			background-color: var(--lp-color-secondary);
		}
	}
}

/* cta */
.cta {
	
	.block-container {
		display: block grid;
		row-gap: var(--lp-spacing-4xl);
	}

	hr {
		border-color: var(--lp-color-secondary-text);
		opacity: 0.1;
	}

	.trial {
		display: block grid;
		grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
		gap: var(--lp-spacing-3xl);
		align-items: start;

		img {
			inline-size: 100%;
		}

		.trial-inner {
			display: block grid;
			row-gap: var(--lp-spacing-3xl);
			align-items: start;
		}

		.trial-title-wrapper {
			display: block grid;
			row-gap: var(--lp-spacing-sm);

			.trial-title {
				color: var(--lp-color-secondary);
				font-size: var(--lp-font-size-3xl);
				line-height: var(--lp-line-height-sm);
			}

			.trial-subtitle {
				color: var(--lp-color-secondary-text);
				font-size: var(--lp-font-size-lg);
				line-height: var(--lp-line-height-sm);
			}
		}

		.trial-note {
			display: block grid;
			row-gap: var(--lp-spacing-sm);
			padding-inline-start: unset;
			font-size: var(--lp-font-size-md);
			line-height: var(--lp-line-height-md);
			list-style: none;

			li {
				display: block grid;
				align-items: center;
				grid-template-columns: 1em 1fr;
				column-gap: 1em;

				&::before {
					content: "";
					inline-size: 1em;
					block-size: 1em;
					background-image: url("/wp-content/themes/suite/assets/images/lp/icon_trial_note.svg");
					background-size: contain;
				}
			}
		}

		.trial-flow {
			display: block grid;
			row-gap: var(--lp-spacing-md);

			.trial-flow-title {
				color: var(--lp-color-secondary-text);
				font-size: var(--lp-font-size-md);
				line-height: var(--lp-line-height-sm);
			}
		}
	}

	.download {
		display: block grid;
		grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
		column-gap: var(--lp-spacing-3xl);
		row-gap: var(--lp-spacing-md);
		align-items: center;
		padding: var(--lp-spacing-4xl);
		border-radius: var(--lp-border-radius-lg);
		background-color: var(--lp-color-secondary-pale-alt);

		.download-content {
			display: block grid;
			row-gap: var(--lp-spacing-md);
		}

		.download-title {
			color: var(--lp-color-secondary-text);
			font-size: var(--lp-font-size-xl);
			line-height: var(--lp-line-height-sm);
		}

		.download-text {
			font-size: var(--lp-font-size-md);
			line-height: var(--lp-line-height-lg);
		}

		.download-button {
			display: block grid;
			place-content: center;
			padding: 1em;
			color: var(--lp-color-secondary-text);
			font-size: var(--lp-font-size-md);
			font-weight: var(--lp-font-weight-bold);
			line-height: var(--lp-line-height-sm);
			border-radius: var(--lp-border-radius-md);
			background-color: var(--lp-color-white);
			transition: color 0.3s, background-color 0.3s;
		}

		@media (any-hover: hover) {
			.download-button {

				&:hover {
					color: var(--lp-color-white);
					background-color: var(--lp-color-secondary-text);
				}
			}
		}

		.download-image {
			display: block grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--lp-spacing-sm);

			picture {
				border-radius: var(--lp-border-radius-md);
				overflow: hidden;
	
				img {
					inline-size: 100%;
				}
			}
		}
	}
}

@media (width <= 768px) {
	.cta {
		
		.block-container {
			row-gap: var(--lp-spacing-3xl);
		}

		.trial {
			gap: var(--lp-spacing-2xl);

			.trial-inner {
				row-gap: var(--lp-spacing-2xl);
			}

			.trial-image {
				display: none;
			}
		}

		.download {
			grid-template-columns: unset;
			padding: var(--lp-spacing-2xl);
		}
	}
}

/*------------------------------------------------
	lw-form
------------------------------------------------*/

:root {
	/* Color Product */
	--color-product: hsla(0, 0%, 0%, 1);

	/* Color Black and White */
	--color-text: hsla(0, 0%, 20%, 1);
	--color-black: hsla(0, 0%, 0%, 1);
	--color-white: hsla(0, 0%, 100%, 1);

	/* Color Gray */
	--color-gray-lighter: hsla(0, 0%, 98%, 1);
	--color-gray-light: hsla(0, 0%, 94%, 1);
	--color-gray: hsla(0, 0%, 80%, 1);
	--color-gray-dark: hsla(0, 0%, 60%, 1);
	--color-gray-darker: hsla(0, 0%, 40%, 1);
}

/*------------------------------------------------
	Form
------------------------------------------------*/

/* .form-wrapper {
	padding: clamp(1rem, 0.318rem + 2.91vw, 2.5rem);
	background-color: var(--color-white);
} */

#lw-form {
	block-size: 100%;
	padding: 40px;
	background-color: var(--color-white);
}

.form-content {
	display: grid;
	row-gap: 20px;
}

#lw-form .wpcf7 .sent .form-content {
	display: none;
	visibility: hidden;
}

.form-group {
	display: grid;
	row-gap: 8px;
}

.form-label > label {
	font-weight: 700;
}

.form-label.--optional::after,
.form-label.--required::after {
	font-size: 14px;
	margin-inline-start: 0.5em;
}

.form-label.--required::after {
	color: hsla(0, 60%, 60%, 1);
	content: "※必須";
}

.form-label.--optional::after {
	color: var(--color-gray-dark);
	content: "※任意";
}

.form-annotation {
	display: block;
	margin-block-start: 4px;
	color: var(--color-gray-dark);
	font-size: 12px;
}

.form-privacy p {
	color: var(--color-gray-darker);
	font-size: 13px
}

.form-privacy p a {
	color: hsla(200, 80%, 60%, 1);
	text-decoration: underline;
}

.form-field fieldset {
	padding: 16px;
}

.form-field fieldset + fieldset {
	margin-block-start: 16px;
}

.form-field fieldset legend {
	padding-inline: 8px;
}

#lw-form .wpcf7-free-text,
#lw-form .wpcf7-select,
#lw-form .wpcf7-text,
#lw-form .wpcf7-textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--color-gray);
	border-radius: 4px;
}

#lw-form .wpcf7-textarea {
	height: 160px;
	min-height: 160px;
}

#lw-form .wpcf7-checkbox,
#lw-form .wpcf7-radio {
	display: grid;
	gap: 8px 16px;
}

#lw-form .wpcf7-checkbox.--2col,
#lw-form .wpcf7-radio.--2col {
	grid-template-columns: repeat(2, 1fr);
}

@media (width < 768px) {
	#lw-form .wpcf7-checkbox.--2col,
	#lw-form .wpcf7-radio.--2col {
		grid-template-columns: unset;
	}
}

#lw-form .wpcf7-list-item {
	margin: unset !important;
}

#lw-form .wpcf7-submit {
	display: grid;
	place-content: center;
	width: 100%;
	padding: 0.8em;
	color: var(--color-white);
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	border: 0;
	border-radius: 4px;
	outline: none;
	background-color: var(--color-product);
	cursor: pointer;
	transition: opacity 0.3s;
}

@media (hover: hover) {
	#lw-form .wpcf7-submit:hover {
		opacity: 0.8;
	}
}

#lw-form .wpcf7-not-valid {
	border-color: hsla(0, 80%, 40%, 1);
}

#lw-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 4px;
	color: hsla(0, 80%, 40%, 1);
	font-size: 14px;
	font-weight: 400;
	border-color: transparent;
	background-color: transparent;
}

#lw-form .wpcf7-response-output {
	margin: unset;
	padding: 0.5em 1em;
	font-size: 14px;
	border-radius: 4px;
	background-color: var(--color-white);
}

#lw-form .wpcf7-spinner {
	display: contents;
	margin: unset;
	margin-block-start: 10px;
}

.form-thanks {
	display: none;
	visibility: hidden;
}

#lw-form .wpcf7 .sent .form-thanks {
	display: block;
	visibility: visible;
}

.form-thanks-inner {
	display: grid;
	row-gap: 16px;
}

.form-thanks-inner h2 {
	margin-block-end: 16px;
	padding: 16px 24px;
	color: hsla(160, 60%, 50%, 1);
	font-size: 20px;
	text-align: center;
	border: 1px solid hsla(160, 80%, 90%, 1);
	border-radius: 4px;
	background-color: hsla(160, 80%, 96%, 1);
}

.form-thanks-inner p {
	line-height: 1.8;
}

.form-thanks-inner p a {
	color: hsla(200, 80%, 60%, 1);
	text-decoration: underline;
}