@charset "UTF-8";

/**
 * admin-bar 対策
 */
html {
	height: calc(100% - var(--global--admin-bar--height));

	body {
		height: 100%;
		min-height: initial;
	}
}


/**
 * 共通設定
 */
:where(.single-user-guide) {
	--page-gap: 28px;
}


main.single-user-guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	height: 100%;
	min-height: calc(100% - var(--global--admin-bar--height));
}


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

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


.single-user-guide-content {
	height: 100%;
	padding-inline: var(--page-gap);
	background-color: #F7F7F7;

	.content-inner {
		max-width: 936px;
		margin-inline: auto;
	}

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

	.user-guide-content {
		h2 {
			padding-left: 0.5em;
			padding-bottom: 0.2em;
			border-left: 0.25em solid var(--color-accent);
			font-weight: 600;
			font-size: clamp(17px, 4.53vw, 19px);

			&:not(:first-child) {
				margin-top: 3em;
			}

			&.order {
				counter-increment: h2-order 1;
				padding-left: 2em;
				position: relative;

				&::before {
					content: counter(h2-order) '.';
					position: absolute;
					left: 0.625em;
				}
			}
		}

		h3 {
			padding-bottom: 0.2em;
			font-weight: 600;
			font-size: clamp(16px, 4.27vw, 18px);
			margin: 1em 0 0;
		}

		ul {
			padding-inline-start: 1.75em;
			font-size: clamp(16px, 4.26vw, 18px);
			list-style-type: disc;
		}

		ol {
			padding-inline-start: 1.5em;
			font-size: clamp(16px, 4.26vw, 18px);
			list-style-type: decimal;

			li {
				padding-inline-start: 0.25em;
			}
		}

		p {
			margin-block: 1em;
			font-size: clamp(16px, 4.26vw, 18px);
		}

		b {
			font-weight: 600;
		}

		img {
			display: block;
			height: auto;
			margin-inline: auto;
		}
	}

	.user-guide-link:is(.previous-page) {
		display: flex;
		align-items: center;
		column-gap: 14px;
		width: min(100%, 200px);
		height: 50px;
		margin-block: 64px;
		margin-inline: auto;
		padding-inline: 16px;
		border-radius: 8px;
		background-color: #FFFFFF;
		font-size: 15px;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10);

		&::before {
			content: "";
			width: 16px;
			height: 16px;
			border-radius: 16px;
			background-color: #57C2FF;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 8"><path stroke="%23FFF" stroke-linecap="round" stroke-width="1.5" d="M4.34.787.713 3.832M4.34 6.91.713 3.865"/></svg>');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 38.25%;
		}

		&:hover {
			opacity: 0.6;
		}
	}
}