﻿:root {
	--shadow-card: 0 0 12px 0 rgba(168, 168, 168, 0.25);
	--size-xsmall: 12px;
	--size-small: 14px;
	--size-normal: 16px;
	--lh-normal: 1.7;
	--radius-xxsmall: 2px;
	--radius-xsmall: 4px;
	--radius-small: 6px;
	--media-pc: 769px;
	--media-sp: 768px;
	--color-contents-bg: #f8fafc;
	--color-gray-100: #f1f5f9;
	--color-gray-400: #94a3b8;
	--color-gray-500: #64758b;
	--color-gray-600: #475569;
	--color-gray-700: #334155;
	--color-gray-800: #1e293b;
	--color-red-50: #ffe6e7;
	--color-red-600: #ad0008;
	--color-brand-500: #004aa6;
	--fw-bold: 700;
	--fw-normal: 400;
}
figure {
	margin: 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
input[type="radio"],
input[type="checkbox"] {
	&:focus {
		outline: 2px solid var(--color-brand-500);
	}
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	padding: inherit;
	font-size: inherit;
	border-color: var(--color-gray-400);
	border-radius: var(--radius-small);
	padding: 10px 12px;
	font-size: var(--size-small);
	&::placeholder {
		line-height: 1;
		color: var(--color-gray-400);
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"] {
		max-height: 40px;
	}
	&:focus {
		outline-offset: 1px;
	}
}
input[type="radio"],
input[type="checkbox"] {
	min-width: 20px;
	height: 20px;
	appearance: none;
	background-color: #fff;
	border: 2px solid var(--color-gray-400);
	cursor: pointer;
	position: relative;
	&:checked::after {
		content: "";
		position: absolute;
	}
	&:focus {
		outline-offset: 0;
	}
}
input[type="radio"] {
	border-radius: 50%;
	&:checked::after {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 13px;
		height: 13px;
		background-color: var(--color-brand-500);
		border-radius: 50%;
	}
}
input[type="checkbox"] {
	border-radius: var(--radius-xxsmall);
	&:checked {
		background-color: var(--color-brand-500);
		border-color: var(--color-brand-500);
	}
	&:checked::after {
		content: "";
		position: absolute;
		left: 4px;
		top: 1px;
		width: 7px;
		height: 11px;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: rotate(35deg);
	}
}
.thanks .section{
	padding: 160px 0 200px;
}
.contact,
.download,
.thanks,
.contact + .footer,
.download + .footer,
.thanks + .footer{
	background-color: var(--color-contents-bg);
}

.contact p,
.download p {
	font-size: var(--size-normal);
	line-height: var(--lh-normal);
	font-weight: var(--fw-normal);
}
.contact li,
.download li {
	font-size: var(--size-normal);
	line-height: var(--lh-normal);
}
.page-title-group {
	display: grid;
	gap: 24px;
	.page-title {
		font-size: 24px;
		line-height: 1;
	}
	p {
		line-height: 1.7;
		color: var(--color-gray-700);
		text-align: left;
	}
}
.link-text {
	color: #1A202C;
	font-size: var(--size-normal);
	a {
		color: var(--color-brand-500);
		&:hover {
			text-decoration: underline;
		}
	}
}
#redirect {
	width: 100%;
}
.contact-panel {
	display: grid;
	.card-item {
		text-align: left;
	}
	&.contact-panel-left {
		gap: 48px;
	}
}
.contact-image {
	display: inline-flex;
	justify-content: center;
}
.contact-grid {
	display: grid;
	align-items: flex-start;
	justify-content: center;
	gap: 100px;
}
.contact-form {
	display: grid;
	gap: 40px;
	.contact-form-radio,
	.contact-form-input,
	.contact-form-column,
	.contact-form-check {
		display: grid;
	}
	.contact-form-flex {
		display: flex;
		gap: 8px;
		align-items: center;
	}
	.contact-form-radio {
		gap: 8px;
		margin-top: 12px;
		li {
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}
	.contact-form-input {
		gap: 8px;
		word-break: break-all;
	}
	.contact-form-column {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.contact-form-check {
		gap: 12px;
	}
	.form-label {
		font-size: var(--size-xsmall);
		display: flex;
		align-items: center;
		gap: 4px;
		font-weight: var(--fw-bold);
		color: var(--color-gray-500);
	}
	.form-icon {
		display: inline-flex;
		border-radius: var(--radius-xsmall);
		width: 40px;
		height: 20px;
		align-items: center;
		justify-content: center;
		font-size: var(--size-xsmall);
		font-weight: var(--fw-normal);
		&.icon-required {
			background-color: var(--color-red-50);
			color: var(--color-red-600);
		}
		&.icon-any {
			background-color: var(--color-gray-100);
			color: var(--color-gray-600);
		}
	}
	textarea {
		height: 109px;
		resize: none;
	}
	input,
	select,
	textarea {
		&:focus {
			outline: none;
		}
	}
	.button.button--primary {
		width: 100%;
		max-width: 436px;
		height: 56px;
		font-size: var(--size-normal);
	}
	&.-confirm {
		display: none;
		.contact-form-input {
			p {
				margin: 0;
			}
		}
	}
	.confirm_button {
		&[disabled] {
			color: #8c96a0;
			border: none;
			background: rgba(140, 150, 160, 0.1);
			&:hover {
				cursor: not-allowed;
				opacity: 1;
			}
		}
	}
	.button {
		transition: background-color 0.3s ease, color 0.3s ease;
		&:hover:not([disabled]) {
			background-color: var(--color-primary-dark);
			color: #ffffff;
		}
	}
	.wpcf7-list-item {
		margin: 0;
		label {
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}
	.wpcf7-radio {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 8px;
	}
	.wpcf7-acceptance {
		label {
			align-items: center;
		}
	}
	.button-group {
		display: flex;
		gap: 16px;
		width: 100%;
		> .button--back,
		> .button-wrap {
			width: 50%;
		}
		&:has(> :only-child) {
			> * {
				width: 100%;
			}
		}
		.button-wrap {
			display: inline-block;
			position: relative;
			.wpcf7-spinner {
				position: absolute;
				bottom: -25px;
				left: -20px;
				margin: 0;
			}
		}
	}
	.button--back {
		width: 100%;
		height: 56px;
		color: #64758b;
		font-size: var(--size-normal);
		border: 1px solid #94a3b8;
	}
}
#redirect .wpcf7-validation-errors {
	border: 2px solid #f00;
}
.complete-box {
	color: #334155;
	text-align: center;
	.wp-block-heading {
		font-size: 32px;
		margin-bottom: 40px;
	}
	p {
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 24px;
		a {
			color: #004aa6;
			font-weight: normal;
			text-decoration: none;
			border-bottom: 1px solid #004aa6;
			transition: border-color .3s ease, color .3s ease;
			&:hover {
				border-bottom-color: transparent;
			}
		}
	}
	.link-top {
		display: flex;
		justify-content: center;
		margin: 32px 0 0;
		a {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			color: #1e293b;
			font-size: 16px;
			line-height: 1;
			text-decoration: none;
			border-bottom: 1px solid transparent;
			transition: border-color .3s ease, color .3s ease;
			&:hover {
				color: #004aa6;
				i{
					border: 1px solid #004aa6;
					&::before {
						background: #004aa6;
					}
					&::after {
						border-top: 2px solid #004aa6;
						border-right: 2px solid #004aa6;
					}
				}
			}
			i {
				display: inline-block;
				width: 24px;
				height: 24px;
				border: 1px solid #64758b;
				border-radius: 50%;
				position: relative;
				box-sizing: border-box;
				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 6px;
					width: 10px;
					height: 2px;
					background: #64758b;
					transform: translateY(-50%);
					transition: background .3s ease;
				}
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					right: 6px;
					width: 8px;
					height: 8px;
					border-top: 2px solid #64758b;
					border-right: 2px solid #64758b;
					transform: translateY(-50%) rotate(45deg);
					box-sizing: border-box;
					transition: border-color .3s ease;
				}
			}
			&hover {
				text-decoration: underline;
			}
		}
	}
}
#inquiry{
		padding-top: 64px;
	}
@media (min-width: 769px) {
	#inquiry{
		padding-top: 54px;
	}
	.page-title-group {
		gap: 46px;
	}
	.contact p {
		font-size: var(--size-normal);
	}
	.contact-grid {
		grid-template-columns: minmax(0, 485px) minmax(0, 500px);
		gap: 95px;
	}
	.contact-panel.contact-panel-left {
		.contact-image {
			justify-content: flex-start;
			padding-left: 9px;
		}
	}
}
@media (max-width: 768px) {
		.contact .contact-image {
			margin: 0 -1rem;
		}
	.contact-form {
		.contact-form-flex {
			align-items: flex-start;
		}
		.wpcf7-not-valid-tip {
			font-size: 14px;
		}
		.wpcf7-acceptance {
			label {
				align-items: flex-start;
				input {
					margin-top: 4px;
				}
			}
		}
	}
	.contact-grid {
		.card-item {
			padding: 0 8px;
			background-color: transparent;
			box-shadow: none;
		}
	}
	.complete-box {
		.wp-block-heading {
			font-size: 28px;
			margin-bottom: 32px;
		}
		p {
			font-size: 16px;
			margin-bottom: 16px;
		}
		.link-top {
			margin: 24px 0 0;
			a {
				gap: 8px;
				font-size: 14px;
				i {
					width: 20px;
					height: 20px;
					&::before {
						left: 5px;
						width: 7px;
					}
					&::after {
						right: 5px;
					}
				}
			}
		}
	}
}
