/*
お問合せフォームの見た目（2026-10 に追加。wp_tokushima-kenryo と同じデザインを、このサイトの紺色で）
お問合せのページだけ、common.css のあとに読み込む（functions.php）。stylus・common.css は変えていない
- フォームを白いカードに入れ、項目名を入力欄の上に。入力が必須の項目は「*」の代わりに「必須」のラベル
- 入力欄は角丸、選んだときにサイトの紺（#004663）の枠
- 送信ボタンは丸い形（ホバーで少し濃く・浮く）。入力エラー・送信結果の表示も整える
*/

div#contact div.wpcf7 {
	max-width: 760px;
	margin: 5rem auto 6rem;
	padding: 5rem 6rem 5.5rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(0, 40, 60, 0.08);
	border-top: 4px solid #004663;
}

/* 項目：項目名を上、入力欄を下に */
div#contact div.wpcf7 p,
div#contact div.wpcf7 p.textarea {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 2.8rem;
}
div#contact div.wpcf7 p br {
	display: none;
}
div#contact div.wpcf7 p label {
	width: auto;
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: .9rem;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: .05em;
	color: #333;
}
div#contact div.wpcf7 p span.wpcf7-form-control-wrap {
	width: 100%;
}

/* 必須のラベル（「*」の代わり） */
div#contact div.wpcf7 p label i {
	font-size: 0;
	font-style: normal;
	line-height: 1;
}
div#contact div.wpcf7 p label i::after {
	content: '必須';
	display: inline-block;
	padding: .35rem .8rem .3rem;
	border-radius: 4px;
	background: #004663;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: .1em;
}

/* 入力欄 */
div#contact div.wpcf7 p span input,
div#contact div.wpcf7 p span textarea,
div#contact div.wpcf7 p.textarea textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 1.4rem 1.6rem;
	border: 1px solid #d9e1e5;
	border-radius: 8px;
	background: #f7f9fa;
	font-size: 1.7rem;
	line-height: 1.6;
	color: #333;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
	-webkit-appearance: none;
	appearance: none;
}
div#contact div.wpcf7 p.textarea textarea {
	min-height: 260px;
	resize: vertical;
}
div#contact div.wpcf7 p span input:hover,
div#contact div.wpcf7 p span textarea:hover {
	border-color: #b9c7cf;
}
div#contact div.wpcf7 p span input:focus,
div#contact div.wpcf7 p span textarea:focus,
div#contact div.wpcf7 p.textarea textarea:focus {
	outline: none;
	border-color: #004663;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(0, 70, 99, .15);
}

/* Turnstile */
div#contact div.wpcf7 .wpcf7-turnstile {
	margin-top: 1rem;
}

/* 送信ボタン */
div#contact div.wpcf7 div.submit {
	margin-top: 3.5rem;
}
div#contact div.wpcf7 div.submit p {
	align-items: center;
	margin-bottom: 0;
}
div#contact div.wpcf7 div.submit input[type="submit"] {
	min-width: 280px;
	padding: 1.6rem 4rem;
	border: 0;
	border-radius: 999px;
	background: #004663;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: .3em;
	text-indent: .3em;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 70, 99, .25);
	transition: background-color .2s, transform .2s, box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}
div#contact div.wpcf7 div.submit input[type="submit"]:hover {
	background: #00324a;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 70, 99, .3);
}
div#contact div.wpcf7 div.submit input[type="submit"]:focus-visible {
	outline: 3px solid rgba(0, 70, 99, .4);
	outline-offset: 3px;
}
div#contact div.wpcf7 div.submit input[type="submit"]:disabled {
	opacity: .6;
	cursor: wait;
	transform: none;
}

/* 入力エラー */
div#contact div.wpcf7 .wpcf7-not-valid {
	border-color: #c0392b !important;
	background: #fdf6f5 !important;
}
div#contact div.wpcf7 .wpcf7-not-valid-tip {
	margin-top: .6rem;
	font-size: 1.4rem;
	color: #c0392b;
}

/* 送信結果 */
div#contact div.wpcf7 form .wpcf7-response-output {
	margin: 3rem 0 0;
	padding: 1.4rem 1.8rem;
	border: 0;
	border-left: 4px solid #004663;
	border-radius: 8px;
	background: #ecf3f6;
	font-size: 1.5rem;
	line-height: 1.7;
	color: #333;
}
div#contact div.wpcf7 form.invalid .wpcf7-response-output,
div#contact div.wpcf7 form.unaccepted .wpcf7-response-output,
div#contact div.wpcf7 form.failed .wpcf7-response-output,
div#contact div.wpcf7 form.aborted .wpcf7-response-output,
div#contact div.wpcf7 form.spam .wpcf7-response-output {
	border-left-color: #c0392b;
	background: #fdf1ef;
}

/* スマホ */
@media screen and (max-width: 768px) {
	div#contact div.wpcf7 {
		margin: 3rem auto 4rem;
		padding: 3rem 2rem 3.5rem;
		border-radius: 12px;
	}
	div#contact div.wpcf7 p,
	div#contact div.wpcf7 p.textarea {
		margin-bottom: 2.2rem;
	}
	div#contact div.wpcf7 p span input,
	div#contact div.wpcf7 p span textarea,
	div#contact div.wpcf7 p.textarea textarea {
		font-size: 1.6rem;
	}
	div#contact div.wpcf7 p.textarea textarea {
		min-height: 200px;
	}
	div#contact div.wpcf7 div.submit input[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* お電話・FAX（2026-10 に追加。カード 2つ。TEL は押すと電話をかけられる） */
div#contact div.tel-fax-box {
	max-width: 760px;
	margin: 0 auto 8rem;
	text-align: center;
}
div#contact p.tel-fax-title {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin-bottom: 2.4rem;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: .1em;
	color: #004663;
}
div#contact p.tel-fax-title::before,
div#contact p.tel-fax-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #c6d3da;
}
div#contact div.tel-fax-box ul.tel-fax {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: 1.4;
	letter-spacing: normal;
	list-style: none;
}
div#contact div.tel-fax-box ul.tel-fax li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 2.8rem 2rem 3rem;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 40, 60, 0.07);
}
div#contact div.tel-fax-box ul.tel-fax li .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.2rem;
	height: 5.2rem;
	margin-bottom: .6rem;
	border-radius: 50%;
	background: #e6eef2;
	color: #004663;
}
div#contact div.tel-fax-box ul.tel-fax li .label {
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: .25em;
	color: #888;
}
div#contact div.tel-fax-box ul.tel-fax li .number {
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: .06em;
	color: #004663;
	text-decoration: none;
}
div#contact div.tel-fax-box ul.tel-fax li a.number {
	transition: opacity .2s;
}
div#contact div.tel-fax-box ul.tel-fax li a.number:hover {
	opacity: .75;
}
@media screen and (max-width: 768px) {
	div#contact div.tel-fax-box {
		margin-bottom: 5rem;
	}
	div#contact div.tel-fax-box ul.tel-fax {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}
	div#contact div.tel-fax-box ul.tel-fax li {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.2rem;
		padding: 2rem;
	}
	div#contact div.tel-fax-box ul.tel-fax li .icon {
		width: 4.4rem;
		height: 4.4rem;
		margin-bottom: 0;
	}
	div#contact div.tel-fax-box ul.tel-fax li .number {
		font-size: 2.4rem;
	}
}