@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap');

.mailconfirm > .flex {
	flex-flow: column;
	width: 40%;
	& input {
		width: 100%;
	}
}

.content-wrapper {
	background: var(--white);
}

.inner80 {
	padding:40px;
}

select,
input,
textarea {
	height: 36px;
	background: #F6F7FA;
	border: 1px solid var(--gray2);
}

label {
	width: 20%;
	height: 36px;
	display: flex;
	align-items: center;
}

.required-mark {
	position: relative;
}

.required-mark::before {
	position: absolute;
	content: "*";
	left: -10px;
	color: #E3596C;
}

select,
input, 
textarea {
	padding-left: 8px;
}

select, 
input[type="date"],
input[type="tel"] {
	width: 160px;
}

input[type="text"],
input[type="email"] {
	width: 40%;
}

textarea {
	display: block;
}

.syokureki input {
	display: block;
}

.content-wrapper {
	padding: 42px 68px;
	box-shadow: var(--drop2);
	border-radius: 4px;
}

.content-wrapper:not(:last-child) {
	margin-bottom: 80px;
}

h2 {
	margin-bottom: 24px;
}

h2:not(:first-child) {
	margin-top: 100px;
}

.wrapper-sanka label ,
.wrapper-toiawase label {
	pointer-events: none;
}

@media screen and (max-width: 1100px) {
	section.inner80 {
		width: 95%;
		padding: 0;
	}
	.content-wrapper {
		padding: 24px 32px;
	}
	.content-wrapper:not(:last-child) {
		margin-bottom: 20px;
	}
	.content-wrapper > h2 {
		margin-bottom: 16px;
	}
	label {
		width: 100%;
	}
	.mailconfirm .flex {
		width: 100%;
	}
}

/* ========================================== */
/* .contact-points */
/* ========================================== */

.contact-points {
	padding-top: 0;
	padding-bottom: 0;
	& p a {
		margin-right: 16px;
		color: var(--blue1);
		font-weight: 500;
		position: relative;
	}
	& p a::after {
		position: absolute;
		font-family: 'Material Icons';
		font-size: 16px;
		content: "\e89e";
		top: 48%;
		transform: translateY(-45%);
		color: var(--blue1);
	}
	& p a:hover {
		text-decoration: underline;
	} 
	& span.bold {
		font-weight: 700;
	}
	& .wrapper {
		margin-bottom: 12px;
	}
}


/* ========================================== */
/* ご用件 */
/* ========================================== */

.wrapper-youken {
	& div {
		display: flex;
		align-items: center;
	}
	& input {
		display: flex;
		height: 18px;
		width: 18px;
		margin-right: 16px;
		justify-content: center;
		align-items: center;
	}
	& label {
		width: 100%;
	}
	& div:not(:last-child) {
		margin-bottom: 8px;
	}
}

.wrapper-youken .container > div {
	margin-bottom: 24px;
}

@media screen and (max-width: 1100px) {
	div.ichikibo.flex,
	div.nikibo.flex,
	div.sankibo.flex {
		flex-flow: column;
	}
	.wrapper-sanka .area.flex {
		flex-flow: column;
	}
	div.ichikibo > .flex,
	div.nikibo > .flex,
	div.sankibo > .flex {
		flex-flow: row;
	}
	.wrapper-youken div:not(:last-child) {
		margin-bottom: 0;
	}
}


/* ========================================== */
/* 個別相談会に参加する */
/* ========================================== */

.wrapper-sanka .flex {
	justify-content: start;
	margin-bottom: 40px;
}

.wrapper-sanka {
	& select,
	& input[type=date]  {
		cursor: pointer;
	}
}

.wrapper-sanka .ichikibo,
.wrapper-sanka .nikibo,
.wrapper-sanka .sankibo {
	& input[type="date"] {
		margin-right: 12px;
	}
	& select {
		width: 60px;
		margin: 0 6px;
		text-align: center;
		padding-left: 0;;
	}
	& p {
		display: flex;
		height: 36px;
		justify-content: center;
		align-items: center;
	}
}

.syokureki-text {
	width: 80%;
	& input[type="text"] {
		width: 100%;
		margin-bottom: 12px;
	}
}

.birth .flex {
	flex-flow: column;
	align-items: start;
	gap: 12px;
	margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
	div.area,
	div.ichikibo,
	div.nikibo,
	div.sankibo,
	div.call,
	div.birth {
		align-items: start;
	}
	.wrapper-sanka > .flex {
		flex-flow: column;
	}
	.wrapper-sanka .flex {
		flex-flow: column;
		margin-bottom: 12px;
	}
	.syokureki-text {
		width: 100%;
	}
	input,
	input[type="text"],
	input[type="email"] {
		width: 100%;
	}
	.wrapper-sanka .mailconfirm span {
		display: inline-block;
	}
	.wrapper-sanka .message label {
		margin-bottom: 12px;
	}
}


/* ========================================== */
/* 個別相談会について聞きたいことがある */
/* ========================================== */

.wrapper-toiawase {
	& .flex {
		justify-content: start;
		margin-bottom: 20px;
	}
}

.wrapper-sanka .message label {
	width: 100%;
}

.wrapper-toiawase .message textarea {
	width: 80%;
}

.message label {
	margin-top: 40px;
	margin-bottom: 24px;
	pointer-events: none;
}

.message textarea {
	width: 80%;
	height: 200px;
	padding: 8px;
	width: 100%;
}

@media screen and (max-width: 1100px) {
	.wrapper-toiawase > .flex {
		flex-flow: column;
		margin-bottom: 12px;
	}
	.wrapper-toiawase .message {
		flex-flow: column;
		& label {
			margin-bottom: 12px;
		}
		& textarea {
			width: 100%;
		}
	}
}

/* ==================================== */
/* プライバシー */
/* ==================================== */

.wrapper-privacy {
	justify-content: start;
}

.wrapper-privacy .flex {
	align-items: center;
	margin-left: 12px;
}

.wrapper-privacy label {
	width: 100%;
	display: inline-block;
	height: fit-content;
}

.wrapper-privacy a {
	color: var(--blue1);
	text-decoration: underline;
	font-family: var(--zenkaku);
	font-weight: 700;
}

@media screen and (max-width: 1100px) {
	.wrapper-privacy input {
		width: inherit;
	}
}


/* ==================================== */
/* 送信内容確認 */
/* confirm.php */
/* ==================================== */

/* エラー表示 */
.error-section {
	& ul {
		margin-bottom: 28px;
		background: var(--white);
	}
	& li {
		padding: 12px 16px;
	}
	& li:not(:last-child) {
		border-bottom: 1px solid var(--gray4);
	}
	& li span {
		font-weight: 600;
		color: #E3596C;
	}
}

.confirm .midshi {
	margin-bottom: 40px;
	& h1 {
		font-family: var(--zenkaku);
		font-weight: 700;
		font-size: 32px;
		margin-bottom: 24px;
	}
}

.confirm table {
	word-break: break-all;
}

.content-wrapper table {
	width: 100%;
	border: 2px solid var(--gray2);
	& th,
	& td {
		padding: 16px;
	}
	& tr:not(:last-child) {
		border-bottom: 1px solid var(--gray2);
	}
	& th {
		vertical-align: middle;
		border-right: 2px solid var(--gray2);
		text-align: center;
		width: 25%;
	}
	& td {
		padding-left: 40px;
	}
}

.sanka-message {
	display: inline-block;
	width: 100%;
	min-height: 172px;
	border: 2px solid var(--gray2);
	padding: 16px;
}

.confirm-sanka {
	& .syokureki td {
		display: block;
	}
	& .syokureki td:not(:last-child) {
		border-bottom: 1px solid var(--gray2);
	}
}

.submit-btn {
	gap: 12px;
	justify-content: center;
	font-family: var(--zenkaku);
	font-weight: 700;
	font-size: 24px;
	width: fit-content;
	margin: 0 auto;
	& input {
		border-radius: 2px;
		width: 260px;
		height: 72px;
		box-shadow: var(--drop2);
		border: none;
		text-align: center;
		background: inherit;
	}
	& input[type="button"] {
		background: var(--gray4);
	}
	& input[type="submit"] {
		color: var(--white);
	}
}

@media screen and (max-width: 1100px) {
	.confirm h2 {
		margin: 36px;
		margin-left: 16px;
	}
	.confirm h2.message {
		margin: 0;
		padding: 16px;
		padding-bottom: 0;
		font-weight: 700;
		font-size: 14px;
	}
	.confirm table {
		border: none;
		& tr {
			display: flex;
			flex-flow: column;
		}
		& tr:first-child {
			border-top: 1px solid var(--gray2);
		}
		& tr:last-child {
			border-bottom: 1px solid var(--gray2);
		}
		& th {
			width: 100%;
			text-align: left;
			border: none;
			padding-bottom: 0;
		}
		& td {
			padding-left: 16px;
		}
		& tr.syokureki td {
			padding: 16px 0;
			margin: 0 16px;
		}
		& tr.syokureki td:not(:last-child) {
			border-bottom: 0.5px dotted var(--gray2);
		}
	}
	& .sanka-message {
		border: none;
		min-height: inherit;
		border-bottom: 1px solid var(--gray2);
	}
	& .submit-btn input {
		width: 160px;
		height: 40px;
		font-size: 16px;
		padding-left: 0;
	}
}

/* =============================== */
/* 送信完了 */
/* thanks.php */
/* =============================== */

.thanks-error {
	& div {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-items: center;
		margin-top: 60px;
	}
	& p, a {
		color: var(--text);
	}
	& a {
		color: var(--blue1);
		text-decoration: underline;
	}
}

.thanks {
	height: calc(100vh - 106px);
	& .thanks-wrapper {
		position: absolute;
		width: 540px;
		height: 540px;
		border-radius: 50%;
		background: var(--white);
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
		& h1 {
			font-family: "Jacques Francois", serif;
			font-size: 48px;
			margin-top: 92px;
		}
		& img {
			margin: 36px 0;
		}
		
		& p:last-child {
			margin-top: 12px;
		}
		& button {
			margin-bottom: 92px;
			height: 52px;
			width: 168px;
			margin-top: 40px;
		}
		& a {
			display: flex;
			height: 100%;
			width: 100%;
			justify-content: center;
			align-items: center;
			color: var(--white);
			font-family: var(--zenkaku);
			font-size: 24px;
			font-weight: 700;
		}
	}
}