section {
	width: 100%;
}

input[type="text"] {
	cursor: text;
}

input[type="checkbox"] {
	cursor: pointer;
}

.section-wrapper {
	padding: 40px 0;
}

#sec1 .section-wrapper {
	padding: 20px 0;
}

#sec1 .midashi {
	& p {
		font-size: 20px;
		font-weight: 700;
		font-family: var(--zen);
		margin-top: -3px;
	}
	& h2 {
		font-family: var(--sta);
		font-size: 40px;
		font-weight: 400;
	}
	& .tel-wrapper {
		text-align: center;
		margin: 0 auto;
		margin-top: 28px;
	}
	& .tel-wrapper .wrapper {
		gap: 0 10px;
		justify-content: center;
		margin-bottom: 10px;
	}
	& .tel-wrapper span {
		font-weight: 700;
		font-size: 40px;
		font-variation-settings:
			'FILL' 0,
			'wght' 700,
			'GRAD' 0,
			'opsz' 40;
	}
	& .tel-wrapper a {
		pointer-events: auto;
	}
	& .tel-wrapper p {
		font-family: var(--zen);
		font-size: 16px;
		color: var(--moji);
		font-weight: 500;
	}
}

@media screen and (min-width: 801px) {
#sec1 .section-wrapper {
	padding: 40px 0;
	border-bottom: 1px solid var(--line);
}
#sec1 .midashi {
	flex-flow: row;
	& > .wrapper.flex {
		width: 30%;
	}
	& .tel-wrapper {
		width: 70%;
		margin: 0;
		margin-top: -8px;
	}
	& .tel-wrapper .wrapper {
		justify-content: left;
	}
	& .tel-wrapper a {
		pointer-events: none;
	}
	& .tel-wrapper p {
		text-align: left;
	}
}
}

#sec2 {
	padding: 40px 0;
}

#sec2 .section-wrapper {
	flex-flow: column;
	align-items: start;
}

#sec2 .midashi .wrapper {
	align-items: left;
	& p {
		font-size: 20px;
		font-weight: 700;
		font-family: var(--zen);
		margin-top: -2px;
	}
}

#sec2 form {
	width: 100%;
	& table {
		width: 100%;
		display: flex;
	}
	& tbody {
		width: 100%;
	}
	& th {
		display: flex;
		margin-bottom: 16px;
		gap: 12px;
	}
	& th span {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--white);
		border-radius: 3px;
		width: 36px;
		height: 16px;
		font-size: 10px;
		font-weight: 500;
	}
	& th span.nin {
		background: #718188;
	}
	& th span.his {
		background: var(--main);
	}
	& tr {
		display: flex;
		flex-flow: column;
		padding: 24px 0;
	}
	& tr:not(:last-child) {
		border-bottom: 1px solid var(--line);
	}
	& td input {
		width: 100%;
		height: 52px;
		border-radius: 5px;
		background: var(--white);
		padding: 0 12px;
	}
	& td textarea {
		width: 100%;
		height: 120px;
		background: var(--white);
		padding: 12px;
	}
	& td input::placeholder,
	& td textarea::placeholder {
		color: #9e9e9e;
	}
}

#sec2 table tr:last-child {
	margin: 40px 0;
	& input {
		width: inherit;
		height: inherit;
		transform: scale(2);
		border-radius: 3px;
		border: 1.5px solid #949191;
	}
	& td:nth-child(2) {
		font-weight: 400;
		margin-top: 16px;
		margin-bottom: 32px;
		line-height: 1.5;
	}
	& td:nth-child(2) a {
		color: var(--main);
		text-decoration: underline;
	}
	& td:last-child {
		background: #EAEEF1;
		line-height: 1.5;
		padding: 24px 30px;
		gap: 20px;
		border: 1px solid #F5F2DE;
	}
	& td:last-child p {
		margin-left: 10px;
	}
}

#sec2 .submit-wrapper {
	height: 64px;
	width: 300px;
	border-radius: 32px;
	color: var(--white);
	background: var(--main);
	margin: 0 auto;
	position: relative;
	& input {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	& span {
		position: absolute;
		right: 24px;
		font-size: 16px;
	}
}

@media screen and (min-width: 801px) {
#sec2 .section-wrapper {
	flex-flow: row;
}
#sec2 .midashi {
	width: 30%;
}
#sec2 form {
	width: 70%;
	& tr {
		flex-flow: row;
	}
	& tr:first-child {
		padding-top: 0;
		margin-top: -16px;
	}
	& th {
		width: 30%;
		align-items: center;
		margin-bottom: 0;
		padding-right: 16px;
		justify-content: space-between;
	}
	& th span {
		height: 18px;
	}
	& td {
		width: 70%;
	}
	& tr:last-child {
		flex-flow: column;
		& th, td {
			width: 100%;
		}
		& input {
			width: auto;
		}
	}
}
}

#formWrap {
	margin-top: 60px;
	width: 95%;
	& h4 {
		margin-bottom: 20px;
	}
	& p.text {
		margin: 20px 0;
	}
	& p.error_messe {
		line-height: 1.5;
	}
	& .input-wrapper {
		display: flex;
		flex-flow: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		margin: 40px 0;
		margin-bottom: 60px;
	}
	& .submit-wrapper {
		display: flex;
		width: 300px;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		position: relative;
	}
	& .submit-wrapper span {
		position: absolute;
		right: 24px;
		font-size: 16px;
		color: var(--white);
		top: 50%;
		transform: translateY(-50%);
	}
	& input {
		text-align: center;
	}
	& input[type="button"],
	& input[type="submit"] {
		display: flex;
		width: 300px;
		height: 64px;
		border-radius: 32px;
		justify-content: center;
		align-items: center;
	}
	& input[type="button"] {
		background: var(--white);
		color: var(--moji);
		border: 1px solid var(--line);
	}
	& input[type="submit"] {
		background: var(--main);
		color: var(--white);
	}
	& table.formTable{
		& tr {
			display: flex;
			height: 52px;
			width: 100%;
			border-bottom: 1px solid var(--line);
		}
		& th, td {
			display: flex;
			padding: 0;
			padding: 8px;
			height: 100%;
			align-items: center;
		}
		& th {
			width: 30%;
			background: var(--moji);
			color: var(--white);
			justify-content: center;
		}
		& td {
			width: 70%;
		}
	} 
}

@media screen and (min-width: 801px) {
#formWrap {
	width: 70%;
	margin-top: 60px;
	& table.formTable th {
		margin-top: 0;
	}
	& .submit-wrapper {
		margin: 0;
	}
}
}

.section-wrapper.thank {
	& p.text {
		line-height: 1.5;
	}
	& a {
		display: flex;
		width: 300px;
		height: 64px;
		border-radius: 32px;
		background: var(--main);
		color: var(--white);
		justify-content: center;
		align-items: center;
		margin: 40px 0;
	}
}