@charset "UTF-8";

/* #contact (相談窓口フォーム) */
#fixed-cta { display: none; }

#contact {
	text-align: center;
	background: var(--col-white);
	padding: 60px 0 100px;
	border-bottom: 3px solid #f1f4f8;
	& .wrap {
		max-width: var(--wrap-width);
	}
	& .contact__ttl {
		font-size: 36px;
		font-weight: 700;
		color: #569ca1;
		letter-spacing: .04em;
	}
	& .contact__intro {
		margin-top: 32px;
		background: var(--col-white);
		text-align: left;
	}
	& .contact__intro-lead {
    color: var(--col-primary);
		font-size: 16px;
    font-weight: 700;
		line-height: 1.8;
    text-align: center;
	}
	& .contact__checklist {
		display: flex;
		flex-direction: column;
		margin: 20px auto 0;
    max-width: 580px;
		& li {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 6px 0;
			font-size: 15px;
			color: var(--col-text);
			&:first-child {
				border-top: none;
			}
		}
	}
	& .contact__check {
		flex: none;
		width: 16px;
		height: auto;
	}
	& .contact__intro-note {
		margin-top: 24px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--col-primary);
		font-size: 14px;
		color: var(--col-text-muted);
		line-height: 1.8;
    text-align: center;
	}
	& .contact__link {
		color: #2FC0B4;
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
	& .contact__form-lead {
		margin-top: 40px;
		font-size: 18px;
		color: var(--col-text);
	}
	& .contact__chat-note {
		margin-top: 8px;
		font-size: 13px;
		color: var(--col-text);
	}
	& .contact__required-note {
		margin: 32px auto 0;
    max-width: 700px;
		text-align: left;
		font-size: 12px;
		color: var(--col-text-muted);
	}
	& .contact__required-mark {
    display: inline-block;
		color: var(--col-accent-dk);
    margin-left: 2px;
	}
	& .contact__form {
		margin: 12px auto 0;
    max-width: 700px;
		text-align: left;
	}
	& .contact__field {
		margin-top: 28px;
		&:first-child {
			margin-top: 0;
		}
	}
	& .contact__label {
		display: block;
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 700;
		color: var(--col-text);
	}
	& .contact__optional {
		margin-left: 6px;
		font-size: 12px;
		font-weight: normal;
		color: var(--col-text-muted);
	}
	& .contact__field-row {
		display: flex;
		gap: 12px;
		& .contact__input {
			flex: 1 1 0;
		}
	}
	& .contact__input,
	& .contact__textarea {
		width: 100%;
		padding: 12px 14px;
		background: #fcfdfe;
		border: 1px solid var(--col-border);
		border-radius: var(--radius-md);
		font-size: 15px;
		color: var(--col-text);
		font-family: inherit;
		outline: none;
		transition: border-color .2s ease;
		&::placeholder {
			color: #d1d0d0;
		}
		&:focus {
			border-color: var(--col-primary);
		}
	}
	& .contact__textarea {
		height: 140px;
		resize: vertical;
	}
	& .contact__radio-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	& .contact__radio-group--inline {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
	& .contact__conditional {
		margin-top: 12px;
		padding: 14px 16px;
		border-radius: var(--radius-md);
		background: #f7fbfc;
		border: 1px solid var(--col-border);
	}
	& .contact__conditional-label {
		display: block;
		font-size: 13px;
		font-weight: 700;
		margin-bottom: 6px;
		color: var(--col-text);
	}
	& .contact__usage-other {
		margin-top: 12px;
	}
	& .contact__radio {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 14px;
		color: var(--col-text);
		cursor: pointer;
		transition: border-color .2s ease, background .2s ease;
		& input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}
		&:has(input:checked) {
			background: #edf9f3;
			border-color: var(--col-primary);
		}
	}
	& .contact__radio-mark {
		position: relative;
		flex: none;
		display: inline-block;
		width: 18px;
		height: 18px;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: 50%;
	}
	& input:checked ~ .contact__radio-mark {
		border-color: var(--col-primary);
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 10px;
			height: 10px;
			background: var(--col-primary);
			border-radius: 50%;
			transform: translate(-50%, -50%);
		}
	}
	& .contact__privacy-note {
		margin-top: 32px;
		padding-top: 24px;
		border-top: 1px solid var(--col-border);
		font-size: 12.5px;
		color: var(--col-text);
		line-height: 1.7;
	}
	& .contact__agree {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 14px;
		cursor: pointer;
	}
	& .contact__agree-input {
		flex: none;
		width: 18px;
		height: 18px;
		accent-color: var(--col-primary);
		cursor: pointer;
	}
	& .contact__agree-text {
		font-size: 13px;
		line-height: 1.6;
		color: var(--col-text-muted);
	}
	& .contact__submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 420px;
		margin: 24px auto 0;
		padding: 16px;
		background: var(--col-primary);
		&:disabled {
			background: var(--col-border);
			cursor: not-allowed;
			box-shadow: none;
		}
		border: none;
		border-radius: 50px;
		cursor: pointer;
		transition: background .2s ease;
		&:hover:not(:disabled) {
			background: var(--col-primary-dk);
		}
	}
	& .contact__submit-main {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-white);
	}
	& .contact__submit-note {
		margin-top: 16px;
		text-align: center;
		font-size: 12px;
		color: var(--col-text-muted);
		line-height: 1.8;
	}
}

@media screen and (max-width: 640px) {
	#contact {
		padding: 40px 0 60px;
		& .contact__ttl {
			font-size: 24px;
		}
		& .contact__intro,
    & .contact__form {
			padding: 0;
		}
		& .contact__intro-lead {
      text-align: left;
			font-size: 14px;
		}
		& .contact__checklist li {
			font-size: 13px;
		}
		& .contact__intro-note {
      text-align: left;
			font-size: 12px;
		}
		& .contact__form-lead {
      margin-top: 24px;
			font-size: 13px;
      text-align: left;
		}
		& .contact__chat-note {
			font-size: 13px;
      text-align: left;
		}
		& .contact__required-note {
			font-size: 12px;
		}
		& .contact__label {
			font-size: 14px;
      margin-bottom: 7px;
		}
		& .contact__optional {
			font-size: 11px;
		}
		& .contact__field-row {
			flex-direction: column;
			gap: 16px;
		}
		& .contact__input,
		& .contact__textarea {
			font-size: 14px;
		}
		& .contact__radio {
			font-size: 13px;
		}
		& .contact__radio-group--inline {
			grid-template-columns: 1fr 1fr;
		}
		& .contact__submit-main {
			font-size: 16px;
		}
		& .contact__submit-note {
			font-size: 12px;
			text-align: left;
		}
		& .contact__privacy-note {
			font-size: 12px;
		}
		& .contact__agree-text {
			font-size: 12px;
		}
	}
}