@charset "UTF-8";

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


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


.hanasuto-faq-title {
	padding-top: clamp(50px, 13.3vw, 100px);
	padding-inline: var(--page-gap);
	background-color: #FFFFFF;

	.hanasuto-faq-label {
		margin-block: 1em;
		font-weight: 600;
		font-size: clamp(16px, 4.26vw, 32px);
		text-align: center;
	}
}


/**
 * 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: #EEF9FF;

		.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-end: 1em;
			}

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

				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}