@charset "utf-8";
/* お問い合わせフォーム（旧 mailformpro.css と style.css「お問い合わせ」の置き換え）
   サイト共通の table.relayout（PCは左右、スマホは縦積み）を土台にし、入力欄・ボタン・エラー表示だけをここで整える
   サイト共通CSS（#contents #inquiry form input[type=text] など）より優先させるため、セレクタは #contents #inquiry から書き、入力欄は .cf-form も付ける */

:root {
	--cf-main: #3700c2;       /* サイトのメインカラー（見出し・ボタン） */
	--cf-main-dark: #1e006b;
	--cf-main-light: #e3deff; /* スマホの項目名の背景と同じ */
	--cf-error: #ea4b4b;      /* サイト共通 .red と同じ */
	--cf-error-bg: #fff3f3;
	--cf-border: #b5b5b5;
}

/* フォーム位置へ移動したとき、PCで固定表示されるグローバルナビに隠れないように */
#cf-top {
	scroll-margin-top: 70px;
}
/* サイト共通CSSの #container（.clearfix）は overflow:hidden で、中身が22pxはみ出している。
   そのため #cf-top へ移動すると #container の中身まで22pxスクロールし、ヘッダーとグローバルナビがずれる。
   clip は見た目は hidden と同じで、スクロールはしない（非対応のブラウザは今までどおり hidden になる） */
#container {
	overflow: clip;
}

#contents #inquiry .cf-table {
	margin-top: 15px;
	line-height: 1.6;
}
#contents #inquiry .cf-table th {
	vertical-align: top;
}
#contents #inquiry .cf-table td {
	text-align: left;
	line-height: 1.6;
	word-break: break-word;
	overflow-wrap: anywhere;
}
#contents #inquiry .cf-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: normal;
	color: #555;
}

/* 入力欄 */
#contents #inquiry .cf-form .cf-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	height: auto;
	margin: 0;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 16px; /* スマホで入力時に拡大されないよう16px以上 */
	line-height: 1.5;
	color: #333;
	background: #fff;
	border: 1px solid var(--cf-border);
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
}
#contents #inquiry .cf-form .cf-input:focus {
	border-color: var(--cf-main);
	outline: 2px solid var(--cf-main-light);
	outline-offset: 0;
}
#contents #inquiry .cf-textarea {
	min-height: 14em;
	resize: vertical;
}
#contents #inquiry .cf-tel {
	display: flex;
	align-items: center;
	gap: 6px;
}
#contents #inquiry .cf-form .cf-input.cf-input-tel {
	width: 5.5em;
	text-align: center;
}

/* エラー（必須項目などの入力欄を赤くし、欄の下に赤字でメッセージ） */
#contents #inquiry .cf-form .cf-input.is-error {
	border-color: var(--cf-error);
	background: var(--cf-error-bg);
}
#contents #inquiry .cf-error {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cf-error);
}
#contents #inquiry .cf-form-error {
	margin: 15px 0 0;
	padding: 10px 15px;
	line-height: 1.6;
	color: var(--cf-error);
	background: var(--cf-error-bg);
	border: 1px solid var(--cf-error);
}

/* チェックボックス */
#contents #inquiry .cf-check {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
}
#contents #inquiry .cf-check input[type=checkbox] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--cf-main);
	cursor: pointer;
}

/* お問い合わせ項目 */
#contents #inquiry .cf-cat-heading {
	margin: 0 0 6px;
	font-weight: bold;
	color: var(--cf-main);
}
#contents #inquiry .cf-cat-heading ~ .cf-cat-heading {
	margin-top: 16px;
}
#contents #inquiry .cf-cat-list,
#contents #inquiry .cf-cat-children {
	margin: 0;
	padding: 0;
	list-style: none;
}
#contents #inquiry .cf-cat-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
#contents #inquiry .cf-cat-list li::before {
	content: none;
}
#contents #inquiry .cf-cat-list > li {
	margin: 0 0 6px 1em;
}
#contents #inquiry .cf-cat-children {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin: 2px 0 4px 1.8em;
}
/* 列を揃えつつ、長い項目名は折り返さずに幅を取る */
#contents #inquiry .cf-cat-children > li {
	min-width: 10.5em;
}
#contents #inquiry .cf-cat-children .cf-check {
	font-size: 95%;
}

/* 個人情報の取扱い */
#contents #inquiry iframe.cf-privacy {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 200px;
	margin: 0 0 10px;
	border: 1px solid #ccc;
	background: #fff;
}
#contents #inquiry .cf-agree {
	font-weight: bold;
}

/* 確認画面 */
#contents #inquiry .cf-confirm-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
#contents #inquiry .cf-confirm-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

/* ボタン（旧フォームの input[type=submit] のグラデーションは使わない） */
#contents #inquiry .cf-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 30px 0 10px;
}
#contents #inquiry .cf-btn {
	box-sizing: border-box;
	min-width: 180px;
	min-height: 48px;
	margin: 0;
	padding: 10px 24px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	border: 1px solid var(--cf-main);
	border-radius: 4px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s, color .15s;
}
#contents #inquiry .cf-btn-primary {
	color: #fff;
	background: var(--cf-main);
}
#contents #inquiry .cf-btn-primary:hover {
	background: var(--cf-main-dark);
}
#contents #inquiry .cf-btn-secondary {
	color: var(--cf-main);
	background: #fff;
}
#contents #inquiry .cf-btn-secondary:hover {
	background: var(--cf-main-light);
}
#contents #inquiry .cf-btn:focus-visible {
	outline: 3px solid var(--cf-main-light);
	outline-offset: 2px;
}
#contents #inquiry .cf-btn[disabled] {
	opacity: .6;
	cursor: default;
}

/* ボットよけの項目（人には見せない） */
#contents #inquiry .cf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* スマホ（サイト共通CSSと同じ 667px で切り替え） */
@media screen and (max-width: 667px) {
	#cf-top {
		scroll-margin-top: 0;
	}
	/* サイト共通CSSは th・td だけを block にしていて、表全体が中身の幅に引っ張られて画面からはみ出すため、表・行も block にする */
	#contents #inquiry .cf-table,
	#contents #inquiry .cf-table tbody,
	#contents #inquiry .cf-table tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	#contents #inquiry .cf-table {
		border: none;
		border-spacing: 0;
	}
	#contents #inquiry .cf-table th,
	#contents #inquiry .cf-table td {
		box-sizing: border-box;
		width: 100%;
	}
	#contents #inquiry .cf-table td {
		line-height: 1.6;
	}
	#contents #inquiry .cf-form .cf-input {
		max-width: none;
	}
	#contents #inquiry .cf-form .cf-input.cf-input-tel {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}
	#contents #inquiry .cf-cat-list > li {
		margin-left: 0;
	}
	#contents #inquiry .cf-cat-children {
		flex-direction: column;
		margin-left: 1.6em;
	}
	#contents #inquiry .cf-form-error {
		margin: 10px 4% 0;
	}
	#contents #inquiry .cf-buttons {
		gap: 12px;
		margin: 20px 4% 10px;
	}
	#contents #inquiry .cf-btn {
		flex: 1 1 0;
		min-width: 0;
	}
}