@charset "UTF-8";

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


.hanasuto-faq {
	padding-inline: var(--page-gap);
}




/**
 * FAQ
 */
.section-faq {
	max-width: 936px;
	margin-block: 120px;
	margin-inline: auto;

	.section-faq-title {
		margin-bottom: 16px;
		padding-block: 0.25em;
		padding-inline: 0.75em;
		border-bottom: 1px solid var(--color-text);
		font-weight: 600;
		font-size: clamp(18px, 4.8vw, 24px);
	}

	.section-faq-content {
		display: grid;
		gap: 30px;
		--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);
			}

			p {
				margin-block: 1em;
			}

			a {
				color: #1E92FF;
				text-decoration: underline;

				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
	.carecone-topbutton {
		position: relative;
		align-items: center;
		margin-block: 40px;
		margin-inline: auto;
	}

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

	.careconne_e-contract_lplogo{
				height: 100%;
				width: 100%;
				margin-block: 30px;

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

}