/* クチコミ投稿を基準にした、サイト内フォーム共通の表示部品。
 * 各ページのCSSより後に読み、用途ごとのレイアウト・選択状態は維持する。 */
.site-main :is(.reportform, .intakeform) .q,
.site-main .intakeform .intake__field > label,
.site-main .intakeform #usagi-intake-open > label,
.site-main .sx .sx-field__label {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.8;
	color: var(--ink);
}
.site-main .intakeform .q > label { display: inline; margin: 0; font: inherit; }
.site-main :is(.reportform, .intakeform) :is(.req, .opt) {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	font-size: var(--fs-min);
	line-height: 1.5;
	vertical-align: middle;
}
.site-main :is(.reportform, .intakeform) .req { background: var(--coral); color: #fff; font-weight: 700; }
.site-main :is(.reportform, .intakeform) .opt { background: #eee; color: #5f5f5f; font-weight: 400; }

/* 設問同士32px、ラベルと説明6px、説明と入力14px。説明なしの内側は10px。 */
.site-main :is(.reportform, .intakeform) :is(.reportform__field, .intake__field),
.site-main .intakeform .step > .card,
.site-main .intakeform .subq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
.site-main .intakeform .intake__field > :is(label, .note) { margin: 0; }
.site-main :is(.reportform, .intakeform) :is(.reportform__field, .intake__field, .step > .card, .subq) > :is(.q, label:not(.sr-only)) + .note { margin-top: -4px; }
.site-main :is(.reportform, .intakeform) :is(.reportform__field, .intake__field, .step > .card, .subq) > .note + :is(input, textarea, select, .seg, .ymd, .form-textarea) { margin-top: 4px; }
.site-main :is(.reportform, .intakeform) form.card {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.site-main .intakeform .intake__listing-form,
.site-main .intakeform form:has(> .step),
.site-main .intakeform .step {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.site-main .intakeform .intake__listing-form > .card { gap: 32px; }
.site-main .intakeform .intake__actions { margin: 0; }
.site-main .intakeform form > label { margin: 0; font-size: var(--fs-label); font-weight: 400; line-height: 1.6; }

/* テキスト入力は生成り・枠なし・丸角。選択肢を隠すradio/checkboxは対象外。 */
.site-main :is(.reportform, .intakeform, .searchfilters, .searchbox, .listctl__sort, .sx)
:is(select, textarea, input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="search"], [type="number"], [type="date"])) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--r-pill);
	background-color: var(--bg);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 400;
}
.site-main :is(.reportform, .intakeform, .searchfilters, .searchbox, .listctl__sort, .sx) select:not([hidden]) {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%232b211c'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 8px 5px;
}
.site-main :is(.reportform, .intakeform, .sx) textarea:not([hidden]) {
	min-height: 110px;
	padding: 12px 14px;
	border-radius: 16px;
	line-height: 1.7;
	resize: vertical;
}
.site-main :is(.reportform, .intakeform, .searchfilters, .searchbox) :is(input, textarea)::placeholder { color: #a1948e; }
.site-main :is(.reportform, .intakeform, .searchfilters, .searchbox, .listctl__sort, .sx)
:is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }
.site-main :is(.reportform, .intakeform, .searchfilters, .searchbox, .listctl__sort, .sx)
:is(input, select, textarea):disabled { opacity: .65; cursor: not-allowed; }
.site-main :is(.reportform, .intakeform) :is(input, textarea)[readonly] { color: var(--text-2); }

/* 検索の虫眼鏡と並替の横並び、症状メモのコピー操作の場所を保持する。 */
.site-main .forclinics .searchbox input[type="search"] {
	background-color: var(--surface);
	border: 1px solid var(--line);
}
.site-main .searchfilters__select::after { display: none; }
.site-main .searchfilters input[type="search"],
.site-main .searchbox__field input[type="search"] { padding-left: 48px; }
.site-main .listctl__sort select:not([hidden]) {
	width: auto;
	padding-left: 48px;
	background-color: var(--surface);
}
.site-main .suggestform .ymd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-main .sx .sx-memo__text { padding-bottom: 52px; resize: none; }
.site-main .sx .sx-memo__text:focus { background-color: var(--bg); }

/* 添付欄も同じ文字・背景にし、ネイティブのファイル選択を保持する。 */
.site-main .intakeform input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 0;
	border-radius: 16px;
	background: var(--bg);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--fs-label);
}
.site-main .intakeform input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 6px 12px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	cursor: pointer;
}
.site-main .intakeform label:not(:is(.seg__opt, .chipbox, .capopt, .checkrow, .suggestform__agreement)) > input:is([type="checkbox"], [type="radio"]) {
	width: 22px;
	height: 22px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	accent-color: var(--rose);
}
/* 既存の選択部品がintakeのlabel規則を継承して太字にならないようにする。 */
.site-main .intakeform :is(.seg__opt, .chipbox, .capopt) { margin: 0; font-weight: 400; }
.site-main .intakeform .seg__opt > span { box-sizing: border-box; }

/* 文字数表示は入力内の右下。本文・リサイズ操作に重ならない余白を確保する。 */
.site-main .form-textarea { position: relative; }
.site-main :is(.reportform, .intakeform) .form-textarea > textarea:not([hidden]) { display: block; padding-bottom: 40px; }
.site-main .form-counter {
	position: absolute; right: 24px; bottom: 10px; margin: 0;
	text-align: right; pointer-events: none; background: var(--bg);
}
.site-main .form-counter[data-over-limit="true"] { color: #b42318; }

/* 同意文は共通のサイズと間隔で、折返した文章全体の中央へチェックをそろえる。 */
.site-main .intakeform :is(form, .card):has(> .checkrow--agree) { display: flex; flex-direction: column; gap: 32px; }
.site-main .form-consents { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) + :is(.checkrow--agree, .suggestform__agreement) { margin-top: -24px; }
.site-main :is(.reportform, .intakeform) .form-consents > .checkrow--agree + .checkrow--agree { margin-top: 0; }
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	width: fit-content; max-width: 100%; min-height: 0;
	margin: 0;
	font-size: var(--fs-label);
	font-weight: 400;
	line-height: 1.6;
}
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) > input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--rose);
}
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) > span { padding: 0; font: inherit; }
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) a { color: var(--rose-ink, #a95a4f); text-decoration: underline; }
.site-main :is(.reportform, .intakeform) :is(.checkrow--agree, .suggestform__agreement) a:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }

/* 申請・投稿・返信の最終送信。検索・資料取得・案件を開く操作は高さを変えない。 */
.site-main .reportform :is(button, input)[type="submit"],
.site-main .intakeform form:not(:has(input[name="intake_action"]:is([value="download"], [value="open"]))) :is(button, input)[type="submit"]:not([formnovalidate]) {
	min-height: 56px;
	font-family: inherit;
}
.site-main :is(.reportform, .intakeform) :is(button, input)[type="submit"]:not(:disabled) { cursor: pointer; }
.site-main :is(.reportform, .intakeform) :is(button, input)[type="submit"]:disabled { cursor: not-allowed; }
.site-main :is(.reportform__submit, .intake__actions) :is(button, input)[type="submit"] { width: 100%; }

/* クチコミの同意は、従来どおりチェックと文面のみをクリック対象にする。 */
.form-consents .checkrow { cursor: default; pointer-events: none; }
.form-consents .checkrow > span { pointer-events: none; }
.form-consents .checkrow > input,
.form-consents .reportform__consent-text { cursor: pointer; pointer-events: auto; }

/* フォームの同意リンクに共通の「新しいタブで開く」アイコン。 */
.external-link-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .2em;
	vertical-align: -.12em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}