@charset "UTF-8";

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

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


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


main.hanasuto-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));
}


.hanasuto-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;
	}
}


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

	.content-inner {
		--column-width: 320px;
		--column-gap: 12px;
		container-type: inline-size;
		max-width: calc(var(--column-width) * 3 + var(--column-gap) * 2);
		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-list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: minmax(72px, auto);
		gap: var(--column-gap);

		@container (min-width: 420px) {
			grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
		}
	}

	.user-guide-item {}

	.user-guide-link {
		display: flex;
		align-items: center;
		column-gap: 14px;
		width: 100%;
		height: 100%;
		padding-block: 8px;
		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 {
			flex-shrink: 0;
			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" style="transform: scaleX(-1);"><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;
		}
	}
}