@charset "UTF-8";

#header {
	height: 390px;
	border-top: 2px solid #80442B;
	width: 100%;
	background-image: url(../contact/img/top.jpg);
	background-position: center top;
}

.title {
	background-image: url(../about/img/01.gif);
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
}

.title02 {
	background-image: url(../about/img/02.gif);
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.title03 {
	background-image: url(../about/img/03.gif);
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.title04 {
	background-image: url(../about/img/04.gif);
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.title05 {
	background-image: url(../about/img/05.gif);
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	margin-top: 20px;
}

#dept {
	float: left;
	padding-right: 4px;
	border: 1px solid #CCCCCC;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	margin-right: 20px;
}

#dept02 {
	float: left;
	padding-right: 4px;
	border: 1px solid #CCCCCC;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	margin-right: 15px;
}

#dept03 {
	float: right;
	padding-right: 4px;
	border: 1px solid #CCCCCC;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
}

.meister {
	width: 100%;
}

#title {
	background-color: #D7D17C;
}

/* 20251210追加 */
.contact-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.tableC {
	width: 30%;
	/* PCでのラベル幅 */
	background-color: #f2f2f2;
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #ccc;
	vertical-align: top;
}

.tableD {
	width: 70%;
	padding: 15px;
	border-bottom: 1px solid #ccc;
}

/* 入力欄の基本スタイル */
.input {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-width: 100%;
	/* 親要素からはみ出さない */
}

/* 幅広にしたい入力欄用クラス */
.full-width {
	width: 100%;
}

/* ラジオボタン周りの調整 */
label {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 5px;
	cursor: pointer;
}

.red {
	color: red;
	margin-left: 3px;
}

/* ボタンのスタイル（任意） */
/* === ボタンのスタイル修正版 === */
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border: none;
	background-color: #80442B;
	color: #ffffff;
	/* 文字色を白に */
	padding: 15px 50px;
	border-radius: 5px;
	margin: 10px;
	cursor: pointer;
	-webkit-appearance: none;
	/* iOS(iPhone)等のデフォルトの立体的な枠線を解除 */
}

/* リセットボタンだけ色を変えたい場合（グレーにする等） */
input[type="reset"],input[type="button"] {
	background-color: #888888;
}

/* ボタンをタップ・ホバーした時の動き（任意） */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	opacity: 0.8;
	/* 少し透明にして押した感や選択感を出す */
}


/* === スマートフォン対応（768px以下） === */
@media screen and (max-width: 768px) {

	#header {
		height: 70vw;
	}

	/* テーブルをブロック要素に変更して縦積みにする */
	.contact-table,
	.contact-table tbody,
	.contact-table tr,
	.contact-table th,
	.contact-table td {
		display: block;
		width: 100%;
	}

	/* 行のスタイル */
	.contact-table tr {
		margin-bottom: 0;
	}

	/* 見出し（項目名） */
	.tableC {
		background-color: #80442B;
		/* スマホではヘッダー色に合わせて強調（好みで変更可） */
		color: #fff;
		padding: 10px;
		border: none;
	}

	/* 内容エリア */
	.tableD {
		padding: 15px 10px 25px 10px;
		/* 下に余白をもたせる */
		border-bottom: none;
	}

	/* PCのみ改行などの制御用 */
	.pc-only {
		display: none;
	}

	/* 入力欄をスマホ幅いっぱいに */
	.input {
		font-size: 16px;
		/* 16px未満だとiPhoneでズームしてしまうため */
	}

	/* 特定の入力欄以外のテキストボックス等は幅100%に */
	input[type="text"]:not(#guardian-count),
	input[type="email"],
	textarea,
	select {
		width: 100%;
	}

	/* ラジオボタンの間隔を広めに */
	label {
		margin-bottom: 10px;
		padding: 5px 0;
	}

	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		width: 100%;
		margin: 10px 0;
	}
}

/* === 確認画面用の追加CSS === */

/* 確認画面のテキストがセルからはみ出さないようにする */
.tableD {
  word-break: break-all; /* 長いURLやメアドを強制的に折り返す */
  line-height: 1.6;      /* 行間を少し広げて読みやすく */
}

#con,#formWrap{width: 100%;}
h4{margin-bottom: 20px;}
.error_messe{color: red;}