@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* =====================================
	normalize
===================================== */
/* all */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* html */
html {
	font-size: 62.5%;
}

/* body */
body {
	overflow-wrap: break-word;
	color: #000000;
	background-color: #ffffff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	margin: 0;
}

/* form */
input,
button,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: 1.6rem;
	line-height: inherit;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
	cursor: pointer;
}

/* =====================================
	salesforce
===================================== */
/* form-field */
.form-field:not(.hidden) {
	display: grid;
	gap: 10px 40px;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid #dbdbdb;
}
@media (min-width: 769px) {
	.form-field:not(.hidden) {
		grid-template-columns: 14.5em 1fr;
	}
}

/* description */
@media (min-width: 769px) {
	.description {
		grid-column: 2 / 3;
	}
}

/* errors */
.errors {
	color: #d50505;
}

/* no-label */
.error.no-label {
	margin: -10px 0 20px 0;
	color: #d50505;
}
@media (min-width: 769px) {
	.error.no-label {
		margin-left: calc(14.5em + 40px);
	}
}

/* field-label */
.field-label {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr auto;
	align-items: center;
	font-weight: 700;
}
.required .field-label::after {
	content: "必須";
	padding: 6px 8px;
	border-radius: 4px;
	background-color: #d50505;
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}
@media (max-width: 768px) {
	.field-label {
		justify-self: start;
	}
}

/* text */
.text {
	appearance: none;
	height: 3.8rem;
	padding: 0 15px;
	border: 1px solid #949494;
	border-radius: 4px;
	width: 100%;
}
.error .text {
	color: #d50505;
	background-color: #fff0ed;
}

/* select */
.select {
	appearance: none;
	height: 3.8rem;
	padding: 0 35px 0 15px;
	border: 1px solid #949494;
	border-radius: 4px;
	background: #ffffff no-repeat url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS40MTQwNjI1IiBoZWlnaHQ9IjcuMTIxMDkzNzUiIHZpZXdCb3g9IjAgMCAxMS40MTQwNjI1IDcuMTIxMDkzNzUiPjxwb2x5Z29uIHBvaW50cz0iNS43MDcwMzEyNSA3LjEyMTA5Mzc1IDAgMS40MTQwNjI1IDEuNDE0MDYyNSAwIDUuNzA3MDMxMjUgNC4yOTI5Njg3NSAxMCAwIDExLjQxNDA2MjUgMS40MTQwNjI1IDUuNzA3MDMxMjUgNy4xMjEwOTM3NSIvPjwvc3ZnPg==") right 10px center;
	background-size: 10px;
	width: 100%;
}
.error .select {
	color: #d50505;
	background-color: #fff0ed;
}

/* standard */
.standard {
	appearance: none;
	padding: 0 15px;
	border: 1px solid #949494;
	border-radius: 4px;
	width: 100%;
}
.error .standard {
	color: #d50505;
	background-color: #fff0ed;
}

/* value */
.value {
	display: flex;
	gap: 10px 30px;
	flex-wrap: wrap;
}

/* checkbox */
[type="checkbox"] {
	appearance: none;
	width: 0;
	height: 0;
	margin: 0;
	border: none;
}
[type="checkbox"] + label {
	position: relative;
	display: inline-block;
	padding-left: 32px;
}
[type="checkbox"] + label::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 22px;
	height: 22px;
	content: "";
	border: solid 1px #949494;
	border-radius: 4px;
	background-color: #ffffff;
}
.error [type="checkbox"] + label::before {
	background-color: #fff0ed;
}
[type="checkbox"]:checked + label::after {
	position: absolute;
	top: 0;
	left: 6px;
	display: block;
	width: 10px;
	height: 16px;
	content: "";
	transform: rotate(45deg);
	border-right: solid 4px #0d4d9e;
	border-bottom: solid 4px #0d4d9e;
}
[type="checkbox"]:focus + label::before {
	outline: auto;
}

/* radio */
[type="radio"] {
	appearance: none;
	width: 0;
	height: 0;
	margin: 0;
	border: none;
}
[type="radio"] + label {
	position: relative;
	display: inline-block;
	padding-left: 32px;
}
[type="radio"] + label::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 22px;
	height: 22px;
	content: "";
	border: solid 1px #949494;
	border-radius: 50%;
	background-color: #ffffff;
}
.error [type="radio"] + label::before {
	background-color: #fff0ed;
}
[type="radio"]:checked + label::after {
	position: absolute;
	top: 5px;
	left: 5px;
	display: block;
	width: 12px;
	height: 12px;
	content: "";
	border-radius: 50%;
	background-color: #0d4d9e;

}
[type="radio"]:focus + label::before {
	outline: auto;
}

/* g-recaptcha */
.g-recaptcha {
	display: flex;
	justify-content: center;
}

/* submit */
.submit {
	margin: 40px 0 0 0;
	text-align: center;
}
[type="submit"] {
	appearance: none;
	opacity: 1 !important;
	transition: background 0.3s;
	margin: 0;
	border: 1px solid #f3c821;
	border-radius: 25px;
	background: #f3c821;
	padding: 12px 0;
	width: 235px;
	color: #231815;
	font-weight: 700;
	font-size: 1.4rem;
}
@media (hover: hover) {
	[type="submit"]:hover {
		background: #ffffff;
	}
}