@charset "utf-8";
section {
	padding: 12px;
}
main button {
	border: 0.5px solid var(--black)
}
h3 {
	margin-bottom: 16px;
	color: var(--blue);
	font-family: var(--zen);
	font-size: 18px;
	font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
	main button::before {
		background: var(--black);
	}
	main button:hover {
		color: #fff;
	}
}

/* LINE WORKS */
section.line {
	padding-bottom: 42px;
	border-bottom: 1px solid #dfdfdf;
}
section.line .section-wrapper {
	background: #fff;
	padding: 12px;
	& img {
		width: 240px;
		margin-top: 32px;
		margin-bottom: 32px;
	}
	& p.text {
		margin-bottom: 32px;
	}
	& button {
		margin-bottom: 32px;
	}
}

/* お問い合わせ */
/* ボタン共通 */
.submit-wrapper {
	gap: 6px;
	& .submit {
		position: relative;
	}
	& .submit::after {
		position: absolute;
		content: '\e5e1';
		top: 50%;
		right: 6px;
		transform: translateY(-50%);
		color: #fff;
		font-family: 'Material Symbols Outlined';
		font-size: 10px;
	}
	& input[type="submit"],
	& input[type="reset"],
	& input.back {
		height: 36px;
		font-family: var(--zen);
		font-weight: 500;
		text-align: center;
		border-radius: 2px;
	}
	& input[type="submit"] {
		width: 196px;
		background: var(--blue);
		color: #fff;
	}
	& input[type="reset"],
	& input.back {
		width: 100px;
		border: 0.5px solid #dfdfdf;
		font-weight: 400;
	}
}
table {
	margin-bottom: 32px;
}
section#formWrap {
	margin-top: 30px;
	margin-bottom: 60px;
	& .section-wrapper {
		background: #fff;
	}
}
section#formWrap .section-wrapper {
	padding: 12px;
	padding-top: 32px;
}
section#formWrap form {
	& table {
		width: 100%;
		font-family: var(--zen);
	}
	& tr {
		display: flex;
		flex-flow: column;
		gap: 4px;
		margin-bottom: 16px;
	}
	& th {
		font-weight: 500;
	}
	& th span {
		font-size: 12px;
		margin-left: 1em;
		padding: 0 4px;
		color: #E93B3B;
		border: 0.5px solid #E93B3B;
		border-radius: 2px;
	}
	& td input,
	& td textarea {
		width: 100%;
		height: 32px;
		border: 0.5px solid #dfdfdf;
		background: #F4F7FC;
		border-radius: 2px;
		padding: 4px;
	}
	& td textarea {
		height: 200px;
	}
}

@media screen and (min-width: 768px) {
main {
	width: 80%;
}
section {
	width: 90%;
}
section.line .section-wrapper {
	padding: 28px;
}
section#formWrap .section-wrapper {
	padding: 28px;
	& h3 {
		margin-bottom: 40px;
	}
}
section#formWrap form {
	& tr {
		flex-flow: row;
		gap: 16px;
	}
	& th {
		width: 30%;
	}
	& th span {
		margin-left: 6px;
	}
	& td {
		width: 70%;
	}
	& td input {
		width: 50%;
	}
}
}

/* 送信確認画面（共通） */
div.confirm {
	padding: 12px;
	& p.text {
		margin-bottom: 20px;
	}
}

/* 送信確認画面（エラーあり） */
div.confirm div.confirm-error {
	padding: 12px;
	background: #fff;
	& h4 {
		margin-bottom: 20px;
	}
	& p.error_messe {
		margin-bottom: 4px;
		padding-left: 1em;
		color: #E93B3B;
		font-family: var(--zen);
		font-weight: 500;
		position: relative;
	}
	& p.error_messe::before {
		position: absolute;
		content: '';
		top: 50%;
		right: calc(100% - 1em);
		transform: translateY(-50%);
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #E93B3B;
	}
	& input {
		height: 32px;
		margin-bottom: 60px;
		padding: 4px;
		font-family: var(--zen);
		border: 0.5px solid #dfdfdf;
		border-radius: 2px;
	}
}

/* 送信確認画面（エラーなし） */
div.confirm div.confirm-ok {
	padding: 12px;
	background: #fff;
}
div.confirm div.confirm-ok form {
	margin-bottom: 60px;
	& table {
		width: 100%;
	}
	& tr {
		display: flex;
		flex-flow: column;
		gap: 4px;
		padding: 8px 0;
		font-family: var(--zen);
		border-bottom: 1px solid #dfdfdf;
	}
}
@media screen and (min-width: 768px) {
.submit-wrapper {
	gap: 12px;
}
div.confirm {
	width: 80%;
	margin: 0 auto;
	& h3 {
		font-size: 21px;
	}
}
div.confirm div.confirm-ok {
	margin-bottom: 60px;
	& h3,
	& p.text {
		width: 80%;
		margin: 0 auto;
		margin-top: 32px;
	}
}
div.confirm div.confirm-ok form {
	& table {
		width: 80%;
		margin: 32px auto;
	}
	& tr {
		flex-flow: row;
		gap: 0;
		padding: 16px 0;
	}
	& th {
		width: 20%;
	}
}
}

/* 送信完了画面 */
div.thanks-ok {
	width: 100%;
	margin: 60px 0;
	text-align: center;
	& p.thankyou {
		margin-bottom: 32px;
		font-size: 28px;
		text-align: center;
		font-family: var(--zen);
		font-weight: 500;
		color: var(--blue);
	}
	& p.text {
		width: 95%;
		margin: 32px auto;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	& .img-wrapper {
		width: 120px;
		margin: 0 auto;
	}
	& .img-wrapper img {
		animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
}
@keyframes slideIn {
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,100% {
		opacity: 1;
	}
}
@media screen and (min-width: 768px) {
	div.thanks-ok {
		margin: 120px 0;
	}
}