/*
 * HubSpot のフォーム・予約カレンダー（inc/hubspot.php）。
 * ボタンは絞り込みボタンの部品（c-filter__button）をそのまま使い、
 * ここでは並べ方と余白、埋め込み部分の大きさだけを決める。
 */

.p-hubspot {
	max-width: 880px;
	margin: 0 auto;
}

.p-hubspot__intro {
	margin-bottom: 32px;
	text-align: center;
}

.p-hubspot__intro-text {
	margin: 0 0 12px;
	color: var(--color-text-body);
	font-size: 15px;
	line-height: 1.8;
}

.p-hubspot__intro-text a,
.p-hubspot__note a {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: underline;
}

.p-hubspot__step {
	margin: 32px 0 16px;
	color: var(--color-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.p-hubspot__choices {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-hubspot__panel {
	margin-top: 24px;
}

.p-hubspot__panel[hidden] {
	display: none;
}

.p-hubspot__note {
	margin: 16px 0 0;
	color: var(--color-text-body);
	font-size: 14px;
	line-height: 1.8;
}

.p-hubspot__note--center {
	text-align: center;
}

.p-hubspot__meeting {
	display: block;
	width: 100%;
	height: 760px;
	border: 0;
	background: #fff;
}

.p-hubspot__form {
	max-width: 720px;
	margin: 24px auto 0;
	padding: 32px;
	border-radius: 12px;
	background: #fff;
}

/*
 * HubSpot フォームの中身。
 * HubSpot 側の設定が「HTML のみ（renderRawHtml）」で、HubSpot の CSS が付かない。
 * そのままだと入力欄が高さ 20px ほどの素の見た目になるため、
 * HubSpot が埋め込む CSS（fieldset.form-columns-1 .hs-input { width: 95% } など）より優先されるよう、
 * 先頭に .p-hubspot を付けて指定を強めている。
 * 自前フォーム（page-consult.css の .p-consult__label / .p-consult__control / .p-consult__submit）と同じ見た目に揃える。
 */
.p-hubspot .p-hubspot__form {
	--hs-line: #dcdcdc;         /* 入力欄の枠線（.p-consult と同じ） */
	--hs-rule: #cfcfcf;         /* 項目名の下の細い線 */
	--hs-placeholder: #9a9a9a;
}

.p-hubspot .p-hubspot__form fieldset {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.p-hubspot .p-hubspot__form .hs-form-field {
	float: none;
	/* HubSpot の「2 列の項目は幅 50%」を打ち消す（並べ方は下の grid で決める） */
	width: auto !important;
	margin: 0 0 28px;
}

.p-hubspot .p-hubspot__form .hs-form-field > label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--hs-rule);
	font-family: var(--font-mincho);
	/* 明朝体は太字にしない */
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text);
}

/* 必須の「*」を、自前フォームの「必須」ラベルと同じ見た目にする */
.p-hubspot .p-hubspot__form .hs-form-required {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 3px;
	background-color: var(--color-primary);
	font-family: var(--font-base);
	font-size: 0;
	line-height: 1.3;
	color: #fff;
}

.p-hubspot .p-hubspot__form .hs-form-required::before {
	content: "必須";
	font-size: 11px;
	font-weight: 700;
}

.p-hubspot .p-hubspot__form .hs-field-desc {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-hubspot .p-hubspot__form .hs-form-field > .input {
	margin: 16px 0 0;
}

.p-hubspot .p-hubspot__form input.hs-input:not([type="radio"]):not([type="checkbox"]),
.p-hubspot .p-hubspot__form select.hs-input,
.p-hubspot .p-hubspot__form textarea.hs-input {
	display: block;
	/* HubSpot がスマホ幅で 95% を強い指定で付けるため、ここだけ !important で幅をそろえる */
	width: 100% !important;
	min-height: 54px;
	padding: 14px 16px;
	border: 1px solid var(--hs-line);
	border-radius: 4px;
	background-color: #fff;
	font-family: inherit;
	/* iOS で入力時に画面が拡大されないよう 16px */
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
}

.p-hubspot .p-hubspot__form textarea.hs-input {
	min-height: 156px;
	resize: vertical;
}

.p-hubspot .p-hubspot__form .hs-input::placeholder {
	color: var(--hs-placeholder);
}

.p-hubspot .p-hubspot__form select.hs-input.is-placeholder {
	color: var(--hs-placeholder);
}

/* プルダウンの▼（自前フォームと同じ形を CSS で描く） */
.p-hubspot .p-hubspot__form .hs-fieldtype-select .input {
	position: relative;
}

.p-hubspot .p-hubspot__form .hs-fieldtype-select .input::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	margin-top: -3px;
	border-left: 6.5px solid transparent;
	border-right: 6.5px solid transparent;
	border-top: 11px solid #6b625f;
	pointer-events: none;
}

.p-hubspot .p-hubspot__form select.hs-input {
	padding-right: 40px;
}

.p-hubspot .p-hubspot__form .hs-input:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.p-hubspot .p-hubspot__form .hs-input.invalid.error {
	border-color: var(--color-primary);
}

/* ラジオボタン・チェックボックス（押しやすい大きさに） */
.p-hubspot .p-hubspot__form .inputs-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-hubspot .p-hubspot__form .hs-form-radio-display,
.p-hubspot .p-hubspot__form .hs-form-checkbox-display {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 15px;
	line-height: 1.6;
	cursor: pointer;
}

.p-hubspot .p-hubspot__form .hs-form-radio-display input,
.p-hubspot .p-hubspot__form .hs-form-checkbox-display input {
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px;
	margin: 0;
	accent-color: var(--color-primary);
}

/* 入力エラーの文言 */
.p-hubspot .p-hubspot__form .hs-error-msgs {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.p-hubspot .p-hubspot__form .hs-error-msg,
.p-hubspot .p-hubspot__form .hs-main-font-element.hs-error-msg {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-primary);
}

/* 個人情報の取り扱いの案内文（HubSpot 側で文字色・大きさが直接指定されているため上書きする） */
.p-hubspot .p-hubspot__form .hs-richtext {
	margin: 4px 0 0;
	padding: 20px 16px;
	border-radius: 4px;
	background-color: #fdf5f1;
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-text);
}

.p-hubspot .p-hubspot__form .hs-richtext p {
	margin: 0;
}

.p-hubspot .p-hubspot__form .hs-richtext span {
	font-size: inherit !important;
	color: inherit !important;
}

.p-hubspot .p-hubspot__form .hs-richtext a,
.p-hubspot .p-hubspot__form .hs-richtext a span {
	font-weight: 700;
	color: var(--color-primary) !important;
}

.p-hubspot .p-hubspot__form .hs_recaptcha {
	display: flex;
	justify-content: center;
	margin: 24px 0 0;
}

/* 送信ボタン（自前フォームの送信ボタンと同じ見た目） */
.p-hubspot .p-hubspot__form .hs-submit {
	margin-top: 32px;
	text-align: center;
}

.p-hubspot .p-hubspot__form .hs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 500px);
	min-height: 60px;
	padding: 10px 32px;
	border: 0;
	border-radius: 4px;
	background-color: var(--color-primary);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s linear;
}

.p-hubspot .p-hubspot__form .hs-button:hover {
	background-color: var(--color-primary-dark);
}

.p-hubspot .p-hubspot__form .hs-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.p-hubspot .p-hubspot__form .submitted-message {
	font-size: 15px;
	line-height: 1.9;
	text-align: center;
}

@media (min-width: 768px) {
	/* 姓・名などの 2 列の項目は横に並べる */
	.p-hubspot .p-hubspot__form fieldset.form-columns-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 20px;
	}

	.p-hubspot .p-hubspot__form .hs-form-field {
		margin-bottom: 40px;
	}

	.p-hubspot .p-hubspot__form .hs-form-field > label {
		font-size: 22px;
	}

	.p-hubspot .p-hubspot__form .hs-richtext {
		padding: 24px 25px;
		font-size: 14px;
	}

	.p-hubspot .p-hubspot__form .hs-submit {
		margin-top: 48px;
	}

	.p-hubspot .p-hubspot__form .hs-button {
		min-height: 64px;
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.p-hubspot__step {
		font-size: 16px;
	}

	.p-hubspot__meeting {
		height: 900px;
	}

	.p-hubspot__form {
		padding: 20px 16px;
	}
}