@charset "utf-8";

/*==================================================================
    IPすまいる2026 ／ contact.css
    お申し込み・ご相談（page-contact.php） 専用スタイル

    フォーム部品（dl/dt/dd構造・required自動バッジ等）は
    _component.css 由来。他ページでフォームが必要になった場合は
    style.css の Object層へ再度引き上げる
==================================================================*/

/*------------------------------------------------------------------
    #inquiry ／ 電話・フォーム
------------------------------------------------------------------*/
#inquiry {
	padding-block: var(--m6) var(--m4);
	background: #fff;
}
#inquiry .row {
	align-items: flex-start;
	gap: var(--m4);
}

/* 左カラム：電話（#cta .telbox と同じ見た目を白背景ページ用に調整） */
#inquiry .telbox {
	flex: 0 0 calc(360 * var(--px));
	padding: var(--m3) var(--m2);
	background: var(--pale-gray);
	border-radius: 12px;
	text-align: center;
}
#inquiry .telbox .title {
	font-size: var(--regular-size);
	font-weight: 700;
}
#inquiry .telbox .tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4ic;
	margin-block-start: var(--m2);
	padding-block: var(--m);
	border-radius: 8px;
	background: var(--accent);
	color: var(--white, white);
	font-size: var(--large-size);
	font-weight: 700;
}
#inquiry .telbox .tel .icon {
	height: 0.7lh;
}
#inquiry .telbox .note {
	margin-block-start: var(--m);
	text-indent: 0;
	padding-left: 0;
	font-size: var(--small-size);
}

/* 右カラム：フォーム */
#inquiry .form-block { flex: 1; }
#inquiry .form-block form { margin-block-start: var(--m2); }

/* エラーメッセージ（?status=error の表示先） */
#inquiry .form-error {
	display: none;
	margin-block-start: var(--m);
	padding-block: var(--m);
	padding-inline: var(--m2);
	border-radius: 8px;
	background: #fdeeee;
	border: 1px solid var(--red);
	color: var(--red);
	font-size: var(--small-size);
}
#inquiry .form-error.is-show { display: block; }

/* 送信停止中の注記（reCAPTCHAキー未設定時） */
#inquiry .form-disabled {
	margin-block-start: var(--m);
	padding-block: var(--m);
	padding-inline: var(--m2);
	border-radius: 8px;
	background: var(--pale-gray);
	text-indent: 0;
	padding-left: var(--m2);
}

/* 複数チェックボックスの並び */
#inquiry .form-block dd:has(input[type="checkbox"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3lh var(--m2);
}

/* 送信ボタン：プライバシーポリシーに同意するまで押せない状態にする */
#inquiry .form-block button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* 送信ボタン */
#inquiry .form-block button.button {
	width: fit-content;
	min-width: calc(320 * var(--px));
}
#inquiry .form-block button.outline {
	margin-block-start: var(--m);
}

@media screen and (max-width: 767px) {
	#inquiry {
		padding-block: var(--m3) var(--m2);
	}
	#inquiry .row {
		flex-direction: column;
	}
	#inquiry .telbox {
		flex: 1 1 auto;
		width: 100%;
	}
}


/*------------------------------------------------------------------
    フォーム部品（_component.css より移植。dl/dt/ddを前提とした構造）
------------------------------------------------------------------*/
form dl + dl {
	margin-top: 1lh;
}
form dt {
	margin-bottom: 0.3lh;
	font-weight: 700;
	position: relative;
}
form dd + dd {
	margin-top: 0.5lh;
}
/* 必須/任意バッジを自動表示。required を付けるだけで「必須」に切り替わる */
form dl dt::after {
	content: var(--item-text, "任意");
	display: inline-block;
	padding-inline: 0.5ic;
	background: var(--item-bg, #bcafa6);/* 「任意」の地色。必須時は --item-bg が上書きする */
	margin-left: 1ic;
	color: var(--item-color, var(--white, white));
	font-weight: 500;
	font-size: 75%;
}
form dl.required,
form dl:has([aria-required], [required]) {
	--item-text: "必須";
	--item-bg: var(--alert);
	--item-color: var(--white, white);
}
form label {
	width: fit-content;
	max-width: 100%;
	padding-block: 0.25lh;
}
/* dt内のラベル（入力欄との紐付け用）は見出し扱いなので、
   選択肢ラベル向けの余白・幅指定を打ち消して従来の見た目を保つ */
form dt label {
	width: auto;
	padding-block: 0;
}
form label:has(input:is([type="checkbox"], [type="radio"])) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	column-gap: 0.5ic;
	color: inherit;
}
form dd .note {
	flex: 0 0 100%;
	color: var(--gray);
}
form dd:has(input:user-invalid) .note {
	color: var(--alert);
}
form :is(input, textarea)::placeholder,
form option[disabled] {
	color: rgb(from var(--black) r g b / 0.4);
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form :is(select, textarea) {
	width: 100%;
	padding-inline: 0.5ic;
	padding-block: 0.25lh;
	box-sizing: border-box;
	background: var(--white, white);
	border-radius: 3px;
	outline: 1px solid var(--border);
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible {
	outline: var(--action) auto 1px;
	border-color: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):user-invalid,
form textarea:user-invalid,
form select:user-invalid {
	outline: var(--alert) auto 1px;
}
form input:is([type="checkbox"], [type="radio"]) {
	appearance: auto;
	inline-size: 1ic;
	block-size: 1ic;
	accent-color: var(--action);
}
form label:has(select) {
	--arrow-space: 2ic;
	display: block;
	padding-block: 0;
	position: relative;
}
form label:has(select)::after {
	content: "";
	display: block;
	width: 0.5lh;
	height: 0.5lh;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;

	position: absolute;
	top: 50%;
	right: calc((var(--arrow-space) - 0.5lh) / 2);
	translate: 0 -75%;

	transition: var(--transition);
	pointer-events: none;
}
form select {
	appearance: none;
	width: auto;
	padding-right: var(--arrow-space);
	cursor: pointer;
}
form textarea {
	min-height: 8lh;
	field-sizing: content;
}
form [type="submit"]:is(button, input),
form button.button {
	margin-block: 1lh 0.5lh;
	margin-inline: auto;
	border: none;
	cursor: pointer;
}
@media screen and (max-width: 767px) {
	form dl:has([aria-required], [required]) dt::after {
		font-size: 75%;
	}
}