/*
 * お問い合わせフォーム（MW WP Form）
 *
 * 項目名を上、入力欄を下に置いた2行構成です。
 * 見た目は Bootstrap のフォームに寄せつつ、
 * 本文カラム（400px）に収まるようサイズを詰めています。
 *
 * 入力欄は size="60" や cols="50" が付いた状態で出力されるため、
 * 幅はすべてCSS側で上書きしています。
 */

.rimep-form {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	color: #212529;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

/*
 * MW WP Form はフォーム本文にも自動整形（wpautop）をかけるため、
 * 項目名と入力欄の間に <br> や <p> が入り込むことがあります。
 * そのままだと余白がばらつくので、ここで打ち消して
 * 間隔はすべて下の margin で決まるようにしています。
 */
.rimep-form__row p {
	margin: 0;
	padding: 0;
}

.rimep-form__row br {
	display: none;
}

.rimep-form p:empty {
	display: none;
}

/* 項目名と入力欄は近づけ、次の項目との間は広く取る */
.rimep-form__row {
	margin-bottom: 28px;
}

.rimep-form__label {
	display: block;
	margin-bottom: 4px;
	color: #212529;
	font-weight: 600;
}

.rimep-form__required,
.rimep-form__optional {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 4px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: normal;
	vertical-align: 2px;
}

.rimep-form__required {
	background-color: #DC3545;
}

.rimep-form__optional {
	background-color: #6C757D;
}

/* 入力欄 */
.rimep-form input[type="text"],
.rimep-form input[type="email"],
.rimep-form input[type="tel"],
.rimep-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #CED4DA;
	border-radius: 6px;
	background-color: #FFFFFF;
	color: #212529;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.rimep-form input[type="text"]:focus,
.rimep-form input[type="email"]:focus,
.rimep-form input[type="tel"]:focus,
.rimep-form textarea:focus {
	border-color: #86B7FE;
	box-shadow: 0 0 0 3px rgba(13, 110, 253, .25);
	outline: 0;
}

.rimep-form textarea {
	min-height: 120px;
	resize: vertical;
}

.rimep-form ::placeholder {
	color: #ADB5BD;
}

/* 入力エラー（MW WP Form が入力欄のうしろに自動で出します） */
.rimep-form .error {
	display: block;
	margin-top: 4px;
	color: #DC3545;
	font-size: 12px;
}

/*
 * ボタン
 *
 * MW WP Form は確認画面で「修正する」→「送信する」の順に出力し、
 * その間に <br> を入れます。
 * 送信ボタンを上に見せたいので、flex の column-reverse で
 * 表示順だけ入れ替えています（HTMLの並びはプラグイン任せのまま）。
 * <br> は消して、間隔は gap で取ります。
 */
.rimep-form__actions {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
}

.rimep-form__actions br {
	display: none;
}

.rimep-form .rimep-btn {
	/* iOSのSafariが submit に独自の装飾を付けるので打ち消します */
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 9px 20px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

/* 送信ボタン */
.rimep-form .rimep-btn--primary {
	border-color: #0D6EFD;
	background-color: #0D6EFD;
	color: #FFFFFF;
}

.rimep-form .rimep-btn--primary:hover {
	border-color: #0A58CA;
	background-color: #0B5ED7;
}

/*
 * 「修正する」は目立たせたくないので、ボタンの装飾をやめて
 * 文字リンクの見た目にします。
 * （HTMLの実体は送信ボタンのままなので、リンクには置き換えられません）
 */
.rimep-form .rimep-btn--back {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #6C757D;
	font-size: 13px;
	text-decoration: underline;
}

.rimep-form .rimep-btn--back:hover {
	color: #212529;
}

/*
 * 確認画面では入力欄が文字に置き換わります。
 * 罫線で区切って読みやすくします。
 */
.mw_wp_form_confirm .rimep-form__row {
	padding-bottom: 12px;
	border-bottom: 1px solid #DEE2E6;
}

.mw_wp_form_confirm .rimep-form__required,
.mw_wp_form_confirm .rimep-form__optional {
	display: none;
}

/* 送信完了メッセージ */
.mw_wp_form_complete .rimep-form,
.mw_wp_form_complete p {
	text-align: center;
}