@charset "UTF-8";


/* --- form 共通 -----------------------------------*/

/*
 * base.css にある検索フォーム用の
 * main form / main form::before の指定を
 * 問い合わせフォームでは解除
 */
#frm_inquriy {
	position: static;
	margin-top: 0;
	aspect-ratio: auto;
}

#frm_inquriy::before {
	display: none;
	content: none;
}


/* --- エラー表示 -----------------------------------*/

#errors {
	margin: 1.5em 0 2em;
	padding: 1em 1.5em;
	background: #fff4f5;
	color: red;
}

#errors p {
	margin-top: 0;
}

#errors p:last-child,
#errors ul:last-child {
	margin-bottom: 0;
}

#error_messages {
	margin-left: 1.5em;
}


/* --- フォームテーブル -----------------------------------*/

#inquriy_form {
	width: 100%;
	margin: 1.5em 0;
	border-color: #ccc;
}

#inquriy_form th,
#inquriy_form td {
	border-color: #ccc;
}

#inquriy_form th {
	background: var(--blue3);
	font-weight: bold;
	color: var(--blue1);
}

#inquriy_form td > div {
	margin-bottom: 1.5em;
}

#inquriy_form td > div:last-child {
	margin-bottom: 0;
}


/* --- 入力項目 -----------------------------------*/

#inquriy_form input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
#inquriy_form textarea,
#inquriy_form select {
	width: 100%;
	margin-top: 0.4em;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #aaa;
	border-radius: 7px;
	background: #fff;
	font-family: inherit;
	line-height: 1.6;
}

#inquriy_form textarea {
	min-height: 12em;
	overflow: auto;
	resize: vertical;
}

#inquriy_form input:focus,
#inquriy_form textarea:focus,
#inquriy_form select:focus {
	outline: 2px solid var(--blue2);
	outline-offset: 1px;
}


/* --- ボタン -----------------------------------*/

#frm_inquriy > p:has(.submit_buttons) {
	display: flex;
	justify-content: center;
	gap: 1.25em;
	margin: 2em 0 0;
}

#frm_inquriy .submit_buttons {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.6em 2em;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity .3s;
}

/* 送信系ボタン */
#frm_inquriy input[name="btn_submit"].submit_buttons {
	order: 2;
	background: var(--blue1);
	color: #fff;
}

/* リセット・戻る */
#frm_inquriy input[name="btn_reset"].submit_buttons,
#frm_inquriy input[name="btn_return"].submit_buttons {
	order: 1;
	background: #ccc;
	color: #333;
}

#frm_inquriy .submit_buttons:hover {
	opacity: 0.8;
}


/*--------------------------------------------------------------------
 *	737px未満用（SP用）の記述
 *--------------------------------------------------------------------*/
@media screen and (max-width: 736px) {

	/* --- フォームテーブル --- */

	#inquriy_form {
		display: block;
		border: none;
	}

	#inquriy_form tbody,
	#inquriy_form tr,
	#inquriy_form th,
	#inquriy_form td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	#inquriy_form th {
		padding: 0.8em 1em;
		border: 1px solid #ccc;
		border-bottom: none;
	}

	#inquriy_form td {
		padding: 1.2em 1em;
		border: 1px solid #ccc;
	}

	#inquriy_form td > div {
		margin-bottom: 1.3em;
	}


	/* --- 入力項目 --- */

	#inquriy_form input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
	#inquriy_form textarea,
	#inquriy_form select {
		max-width: none;
		padding: 8px;
	}

	#inquriy_form textarea {
		min-height: 10em;
	}


	/* --- ボタン --- */

	#frm_inquriy > p:has(.submit_buttons) {
		flex-direction: column;
		align-items: center;
		gap: 0.8em;
	}

	/*
	 * SPでは
	 * 1. 送信・入力内容を確認
	 * 2. リセット・戻る
	 */
	#frm_inquriy input[name="btn_submit"].submit_buttons {
		order: 1;
	}

	#frm_inquriy input[name="btn_reset"].submit_buttons,
	#frm_inquriy input[name="btn_return"].submit_buttons {
		order: 2;
	}

	#frm_inquriy .submit_buttons {
		width: 100%;
		max-width: 320px;
	}


/* 737px未満用（SP用）の記述 end -------------------------------------*/
}


/*--------------------------------------------------------------------
 *	737px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 737px), print {

	/* --- フォームテーブル --- */

	#inquriy_form th {
		width: 18%;
		min-width: 150px;
		padding: 15px;
	}

	#inquriy_form td {
		padding: 20px;
	}


	/* --- 入力項目 --- */

	#inquriy_form input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
	#inquriy_form textarea,
	#inquriy_form select {
		max-width: 700px;
	}


	/* --- ボタン --- */

	#frm_inquriy .submit_buttons {
		min-width: 170px;
	}


/* 737px以上用（PC用）の記述 end -------------------------------------*/
}