@charset "UTF-8";


.TopFrame {
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-blue);
	padding: 20px 0px;
	color: #000;

	.TopBody {
		text-align: center;

		&.Line1 {
			font-size: min(10vw, 100px);
			color: var(--color-white);
		}

		&.Line2 {
			margin: 10px 0;
			font-size: min(4vw, 40px);
		}

		&.Line3 {
			font-size: min(10vw, 100px);
			color: var(--color-white);
		}
	}
}

.FeatureGroup {
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
	color: #000;

	.FeatureListTitle {
		width: 100%;
		font-size: 30px;
		margin: 15px 0 5px 0;
		text-align: center;
		font-weight: 900;
	}

	.FeatureList {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		gap: 10px;

		@media (width > 600px) {
			grid-template-columns: 1fr 1fr 1fr;
		}

		.FeatureItem {
			width: 172px;
			display: flex;
			flex-flow: column;
			justify-content: center;
			border-radius: var(--border-radius);
			overflow: hidden;
			background-color: var(--color-blue);

			.FeatureTitle {
				width: 100%;
				height: 50px;
				text-align: center;
				font-size: 13px;
				color: var(--color-white);
				font-weight: 900;
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--color-white);
			}
			.FeatureDetail {
				width: 100%;
				height: 75px;
				text-align: center;
				font-size: 11px;
				padding: 0 5px 5px 5px;
				box-sizing: border-box;
				color: var(--color-white);
			}
		}
	}
}

.SettingList {
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;

	.SettingListItem {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 50px 0;
		padding: 0 10px;

		.SettingBody {
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin: 10px 0;

			.SettingBodyCmd {
				display: block;
				width: 100%;
				margin: 40px 0 0 0;

				.SettingBodyCmdRegist {
					width: 150px;
					margin: 0 auto;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					.XLogo {
						display: block;
						height: 16px;
						margin-right: 3px;
					}
				}
			}
		}
	}
}