/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   配置: assets/css/al/44-contact.css
   トークン（core/tokens.css）を正本として参照。生値は置かない。
   モバイルファースト：ベース=SP、min-width で拡張。
   ========================================================= */

/* フォーム全体
***************************************************/
.lr-form {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
}

.lr-form__body {
	width: 100%;
}

/* 行
***************************************************/
.lr-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lr-space-xs);
	width: 100%;
	padding: var(--lr-space-md) 0;
	border-bottom: 1px solid var(--lr-border);
}

.lr-form-label {
	display: flex;
	align-items: center;
	font-weight: var(--lr-weight-normal);
}

.lr-form-field {
	width: 100%;
}

.lr-form-inline {
	display: flex;
	align-items: center;
	gap: var(--lr-space-xs);
}

/* 作家歴：number を狭く固定し「年」を横に
   CF7 は input を .wpcf7-form-control-wrap で包むため、
   flex アイテムになる wrap 側を縮める。
***************************************************/
.lr-form-inline .wpcf7-form-control-wrap {
	width: 80px;
	flex: 0 0 auto;
}

.lr-form-inline input[type=number] {
	width: 100%;
}

/* 住所グループ
***************************************************/
.lr-form-section {
	width: 100%;
	padding: var(--lr-space-md) 0;
	border-bottom: 1px solid var(--lr-border);
}

.lr-form-section__title {
	display: flex;
	align-items: center;
	margin-bottom: var(--lr-space-sm);
	font-weight: var(--lr-weight-normal);
}

.lr-form-section__body .lr-form-row:first-child {
	border-top: 1px solid var(--lr-border);
}
.lr-form-section__body .lr-form-row:last-child {
	border-bottom: none;
    padding-bottom: 0;
}

/* ラベル
***************************************************/
.lr-form label {
	cursor: pointer;
}

.lr-form-label label {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.lr-form ::placeholder {
	color: var(--lr-text-muted);
}

/* Radio / Checkbox（ネイティブを隠しアイコンで代替）
***************************************************/
.lr-form input[type=radio],
.lr-form input[type=checkbox] {
	appearance: none;
	display: none;
	float: none;
}

.lr-form .wpcf7-list-item {
	display: block;
	margin: 0 0 var(--lr-space-xs);
}

.lr-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	margin: 0;
}

.lr-form .wpcf7-list-item-label {
	display: flex;
	align-items: center;
}

.lr-form input[type=radio] + span:before,
.lr-form input[type=checkbox] + span:before {
	font-family: "Material Symbols Outlined";
	color: var(--lr-text-muted);
	font-size: var(--lr-font-lg);   /* 2.4rem → 20px相当に */
	margin-right: var(--lr-space-2xs);
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48;
}

.lr-form input[type=radio]:checked + span:before,
.lr-form input[type=checkbox]:checked + span:before {
	color: var(--lr-accent);
}

.lr-form input[type=radio] + span:before {
	content: 'radio_button_unchecked';
}

.lr-form input[type=radio]:checked + span:before {
	content: 'radio_button_checked';
}

.lr-form input[type=checkbox] + span:before {
	content: 'check_box_outline_blank';
}

.lr-form input[type=checkbox]:checked + span:before {
	content: 'select_check_box';
}

/* Input
***************************************************/
.lr-form input[type=text],
.lr-form input[type=number],
.lr-form input[type=email],
.lr-form input[type=url],
.lr-form input[type=tel],
.lr-form select,
.lr-form button,
.lr-form textarea {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	appearance: none;
	box-sizing: border-box;
	min-height: 48px;
	font: inherit;
}

.lr-form input[type=text],
.lr-form input[type=number],
.lr-form input[type=email],
.lr-form input[type=url],
.lr-form input[type=tel],
.lr-form textarea,
.lr-form select {
	width: 100%;
	padding: .7em 1em;
	background-color: var(--lr-bg);
	border: 1px solid var(--lr-border);
	transition:
		border-color var(--lr-ease),
		background-color var(--lr-ease);
}

.lr-form textarea {
	min-height: 180px;
	resize: vertical;
}

.lr-form input[type=text]:focus,
.lr-form input[type=number]:focus,
.lr-form input[type=email]:focus,
.lr-form input[type=url]:focus,
.lr-form input[type=tel]:focus,
.lr-form select:focus,
.lr-form textarea:focus {
	background-color: var(--lr-bg);
	border-color: var(--lr-accent);
}

/* フィールド幅（役割別）
***************************************************/
.lr-form-field[data-field="postcode"],
.lr-form-field[data-field="region"] {
	max-width: 160px;
}

.lr-form-field[data-field="radio-inline"] {
	max-width: none;
}

.lr-form-field[data-field="radio-inline"] .wpcf7-list-item {
	display: inline-block;
	margin: 0 var(--lr-space-md) 0 0;
}

/* 必須バッジ
***************************************************/
.lr-form-label .required::after,
.lr-form-section__title.required::after {
	content: "必須";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--lr-space-sm);
	padding: 2px 7px;
	border: 1px solid var(--lr-accent);
	color: var(--lr-accent);
	font-size: var(--lr-font-xs);
	font-weight: var(--lr-weight-normal);
	line-height: var(--lr-leading-tight);
}

.lr-form-required-note {
	display: flex;
	align-items: center;
	margin-bottom: var(--lr-space-lg);
	font-size: var(--lr-font-sm);
}

.lr-form-required-note .required {
	display: inline-block;
	width: 36px;
	height: 22px;
	margin-right: var(--lr-space-xs);
	border: 1px solid var(--lr-accent);
}

.lr-form-required-note .required::after {
	content: "必須";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--lr-accent);
	font-size: var(--lr-font-xs);
	line-height: 1;
}

/* CF7 エラー
***************************************************/
.lr-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.lr-form .wpcf7-not-valid {
	border-color: var(--lr-accent);
}

.lr-form .wpcf7-not-valid-tip {
	margin-top: var(--lr-space-2xs);
	color: var(--lr-accent);
	font-size: var(--lr-font-sm);
}

.lr-form .wpcf7-response-output {
	margin: var(--lr-space-lg) 0 0;
}

/* 同意
***************************************************/
.lr-form-consent {
	box-sizing: border-box;
	width: 100%;
	margin: var(--lr-space-lg) 0 0;
	padding: var(--lr-space-md);
	border: 1px solid var(--lr-border);
	background-color: var(--lr-bg);
}

.lr-form-consent p {
	margin: 0 0 var(--lr-space-sm);
}

.lr-form-consent p:last-child {
	margin-bottom: 0;
}

.lr-form-consent .wpcf7-acceptance {
	display: block;
	margin: var(--lr-space-sm) 0;
}

.lr-form-consent .wpcf7-list-item {
	margin: 0;
}

/* 同意ラベル：アイコンとテキストを1行目基準で揃える
***************************************************/
.lr-form-consent .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: var(--lr-space-2xs);
	margin: 0;
	cursor: pointer;
    font-weight: var(--lr-weight-bold);
}

.lr-form-consent input[type=checkbox] + span:before {
	font-family: "Material Symbols Outlined";
	color: var(--lr-text-muted);
	font-size: var(--lr-font-lg);
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48;
	content: 'check_box_outline_blank';
	margin-right: 0;
	line-height: 1;
	position: relative;
	top: 4px;
}

.lr-form-consent input[type=checkbox]:checked + span:before {
	color: var(--lr-accent);
	content: 'select_check_box';
}

/* ホバー：同意テキストをキーカラーに */
.lr-form-consent .wpcf7-list-item label:hover {
	color: var(--lr-accent);
}

/* Submit
***************************************************/
.lr-form-btn-container {
	display: flex;
	justify-content: center;
	margin-top: var(--lr-space-lg);
}

.lr-form-submit {
	display: inline-block;
	min-width: 160px;
	min-height: 44px;
	margin: 0;
	padding: .6em 2em;
	border: 1px solid var(--lr-black);
	background-color: var(--lr-black);
	color: var(--lr-white);
	font-size: var(--lr-font-base);
	line-height: var(--lr-leading-tight);
	letter-spacing: .1em;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--lr-ease),
		border-color var(--lr-ease),
		color var(--lr-ease);
	appearance: none;
	box-sizing: border-box;
	font-family: inherit;
}

.lr-form-submit:hover {
	border-color: var(--lr-accent);
	background-color: var(--lr-accent);
}

/* 戻るボタン
***************************************************/
.lr-form-back {
	display: block;
	margin: var(--lr-space-lg) auto;
	padding: 1em 2em;
	border: 1px solid var(--lr-text);
	background-color: var(--lr-bg);
	color: var(--lr-text);
	font-size: var(--lr-font-base);
	line-height: var(--lr-leading-tight);
	cursor: pointer;
	transition: var(--lr-ease);
}

.lr-form-back:hover {
	background-color: var(--lr-text);
	color: var(--lr-white);
}

/* readonly
***************************************************/
.lr-form-readonly {
	width: 100%;
	padding: 0;
	border: none;
	background-color: transparent;
}

/* タブレット以上
***************************************************/
@media (min-width: 768px) {

	.lr-form-row {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--lr-space-lg);
		align-items: start;
		padding: var(--lr-space-md) 0;
	}

	.lr-form-label {
		min-height: 48px;
	}

	.lr-form-field[data-width="half"] {
		max-width: 50%;
	}

	.lr-form-field[data-width="quarter"] {
		max-width: 25%;
	}

	.lr-form-field[data-field="postcode"],
	.lr-form-field[data-field="region"] {
		max-width: 160px;
	}

	.lr-form-field[data-field="radio-inline"] {
		max-width: none;
	}

	.lr-form-section {
		padding: var(--lr-space-md) 0;
	}

	.lr-form-section__body .lr-form-row {
		padding-left: var(--lr-space-md);
	}

	.lr-form .wpcf7-list-item {
		display: inline-block;
		margin: 0 var(--lr-space-md) 0 0;
	}

	.lr-form-consent {
		margin-top: var(--lr-space-lg);
		padding: var(--lr-space-md);
	}

	.lr-form-btn-container {
		margin-top: var(--lr-space-lg);
	}
}

/* =========================================================
 * 展示会日程（相談フォーム）：readonly の日付欄をテキスト表示化
 * 開始日 — 終了日 を1行で。この日程欄のみに限定。
 * ======================================================= */
.lr-form-schedule {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--lr-space-xs);
}

.lr-form .lr-form-schedule input[readonly].wpcf7-form-control {
    display: inline-block;
    width: 5.5em;          /* size=40 属性を打ち消す。日付10文字分＋余裕 */
    min-width: 0;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    color: var(--lr-text);
    font-size: var(--lr-font-md);
    font-weight: var(--lr-weight-bold);
    pointer-events: none;
}

.lr-form-schedule__dash {
    flex: 0 0 auto;
    color: var(--lr-text-muted);
}
.lr-form-schedule .wpcf7-form-control-wrap {
    display: inline-flex;
    width: auto;
}