:root {
	/* color variables */
	--light-base-gray-00: #fff;
	--text-color-black-pale: #343a40;
	--light-blue-50: #3d96d3;
	--light-blue-10: #d8eaf6;
	--light-blue-05: #f5fafd;
	--light-base-gray-20: #ccc;
	--light-blue-20: #b1d5ed;
	--light-red-10: #ffd2d2;
	--light-blue-40: #64abdc;

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

* {
	--min-screen-size: 430;
	--max-screen-size: 1440;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.noto-sans-jp-h3-bold {
	color: var(--light-base-gray-00);
	font-size: 36px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0px;
}

.noto-sans-jp-body-1-regular {
	color: var(--text-color-black-pale);
	font-size: 18px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-h4-bold {
	color: var(--light-base-gray-00);
	--min-font-size: 17; --max-font-size: 24; font-size: var(--interpolate);
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-subtitle-regular {
	color: var(--text-color-black-pale);
	font-size: 14px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-body-2-regular {
	color: var(--text-color-black-pale);
	font-size: 16px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-h5-bold2 {
	color: var(--light-blue-50);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-body-1-bold {
	color: var(--text-color-black-pale);
	font-size: 18px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-h5-bold1 {
	font-size: 20px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-h2-bold {
	color: var(--light-blue-50);
	--min-font-size: 25; --max-font-size: 45; font-size: var(--interpolate);
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	line-height: 1.56;
	letter-spacing: 0px;
}

.noto-sans-jp-h4-medium {
	color: var(--text-color-black-pale);
	font-size: 24px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-h5-medium {
	color: var(--light-base-gray-00);
	font-size: 20px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.noto-sans-jp-body-2-bold {
	color: var(--light-blue-50);
	font-family: 'Noto Sans JP';
	font-weight: 700;
}

.noto-sans-jp-body-2-bold {
	color: #e96470;
	font-family: 'Noto Sans JP';
	font-weight: 700;
}

.noto-sans-jp-body-2-regular {
	color: var(--text-color-black-pale);
	font-family: 'Noto Sans JP';
	font-weight: 400;
}



/* section utility classes */

.section2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px;
}

.section3 {
	background-position: top left;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 30px 24px;
}

.section1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 0 24px;
}



/* ui objects utility classes */

.input {
	border-radius: 20px;
}

.btn-light3 {
	box-shadow: inset 10px -4px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light7 {
	box-shadow: inset 10px -2px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 44px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light9 {
	box-shadow: inset 10px 4px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 32px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light1 {
	box-shadow: inset -10px -4px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 44px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light4 {
	box-shadow: inset -10px -2px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 44px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light8 {
	box-shadow: inset 10px 0px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 32px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light10 {
	box-shadow: inset -2px 6px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn {
	width: 40px; height: 40px;
	display: flex;
	background-color: var(--light-blue-50);
	padding: 2px 11px;
	border-radius: 50%;
}

.btn-light6 {
	box-shadow: inset -10px 4px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 32px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light5 {
	box-shadow: inset -10px 0px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 44px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light11 {
	box-shadow: inset 2px 6px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 32px 20px;
	border-radius: 1000px;
	overflow: hidden;
}

.btn-light2 {
	box-shadow: inset 0px -6px 6px 0px rgba(61, 150, 211, 0.25);
	width: 250px;
	display: flex;
	background-color: var(--light-blue-05);
	padding: 44px 10px;
	border-radius: 1000px;
	overflow: hidden;
}



/* button hover utility classes */

.hover-dark:hover {
	filter: brightness(0.85);
}

.hover-bright:hover {
	filter: brightness(1.2);
}