/* ============================================================
   redesign_form.css — フォームデザイン共通CSS (v3)
   全フォームページで include して使用
   ============================================================ */

/* === フォント適用 === */
.contentsBox,
.contentsBox input,
.contentsBox select,
.contentsBox textarea,
.contentsBox button {
	font-family: 'Noto Sans JP', sans-serif;
}

/* === セクション見出し帯 === */
.contentsBox h3.basic {
	font-size: 20px;
	background: linear-gradient(135deg, #1d9e3b 0%, #28a745 100%);
	color: #fff;
	padding: 12px 20px;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	margin-bottom: 0;
	letter-spacing: 0.5px;
}
.contentsBox h3.basic span {
	color: rgba(255,255,255,0.7);
}

/* === セクションボックス === */
.contentsBox .basicBox {
	padding: 0 20px 20px;
	margin-bottom: 24px;
	border: 1px solid #ddd;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

/* === フィールドラベル装飾 === */
.contentsBox .inputDataSty1 {
	font-size: 18px;
	font-weight: 700;
	padding: 14px 0 8px 12px;
	border-left: 4px solid #1d9e3b;
	background: none;
	margin: 20px 0 8px 0;
	color: #333;
	line-height: 1.5;
}

/* === 文字サイズ全体アップ === */
.contentsBox .basicBox { font-size: 18px; }
.contentsBox .basicBox p { font-size: 18px; }
.contentsBox table td,
.contentsBox table th { font-size: 17px; }
.contentsBox p.cautionText3 { font-size: 16px; color: #888; margin: 4px 0 8px 16px; }

/* === 入力エリア（デカ版） === */
.contentsBox input[type="text"],
.contentsBox input[type="number"],
.contentsBox input[type="date"],
.contentsBox input[type="email"],
.contentsBox input[type="tel"],
.contentsBox textarea,
.contentsBox select {
	font-size: 20px;
	padding: 12px 16px;
	border: 2px solid #ccc;
	border-radius: 8px;
	font-family: 'Noto Sans JP', sans-serif;
	transition: border-color 0.2s, box-shadow 0.2s;
	max-width: 100%;
	box-sizing: border-box;
}
.contentsBox input[type="text"]:focus,
.contentsBox input[type="number"]:focus,
.contentsBox input[type="date"]:focus,
.contentsBox input[type="email"]:focus,
.contentsBox input[type="tel"]:focus,
.contentsBox textarea:focus,
.contentsBox select:focus {
	border-color: #1d9e3b;
	outline: none;
	box-shadow: 0 0 0 3px rgba(29,158,59,0.15);
}
.contentsBox textarea {
	width: 100%;
	resize: vertical;
}

/* === ラジオ・チェックボックス（大きく） === */
.contentsBox input[type="radio"],
.contentsBox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: #1d9e3b;
	vertical-align: middle;
	margin-right: 6px;
}
.contentsBox .shikakuBox label,
.contentsBox .basicBox label {
	font-size: 18px;
	cursor: pointer;
	padding: 4px 0;
}

/* === 石マーク === */
.contentsBox .ishi-mark,
.ishi-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #4A90D9;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	flex-shrink: 0;
	vertical-align: middle;
	margin-left: 4px;
}

/* === 任意バッジ === */
span.any {
	font-size: 12px;
	padding: 2px 8px;
	background: #e9ecef;
	border-radius: 4px;
	color: #666;
}

/* === ブロックレイアウト（3列・2列） === */
.contentsBox .blockThree {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.contentsBox .blockThree .blockWrap2 {
	flex: 1;
	min-width: 150px;
}
.contentsBox .blockHalf {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.contentsBox .blockHalf .blockWrap {
	flex: 1;
	min-width: 200px;
}
.contentsBox .blockSix {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.contentsBox .blockSix .blockWrap2 {
	flex: 1;
	min-width: 80px;
}

/* === 送信・保存ボタン（フォーム末尾の主要アクション） === */
.contentsBox .confirmBtn {
	margin: 30px 0;
	text-align: center;
}
.contentsBox .confirmBtn .bigBtn,
.contentsBox input[type="submit"].bigBtn {
	font-size: 22px;
	padding: 16px 60px;
	border-radius: 10px;
	background: linear-gradient(135deg, #1d9e3b, #28a745);
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: 1px;
	box-shadow: 0 4px 12px rgba(29,158,59,0.3);
	transition: transform 0.15s, box-shadow 0.15s;
	display: inline-block;
	text-decoration: none;
	text-align: center;
}
.contentsBox .confirmBtn .bigBtn:hover,
.contentsBox input[type="submit"].bigBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(29,158,59,0.4);
}

/* 保存/削除ボタン（pageButtonBox2: フォーム末尾） */
.contentsBox .pageButtonBox2.form-actions,
.contentsBox > .pageButtonBox2,
form > .pageButtonBox2,
.contentsBox > .pageButtonBox {
	margin: 24px 0;
	padding: 16px 20px;
	text-align: center;
	background: #f8faf8;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}
/* セクションラベル */
.contentsBox .pageButtonBox2 .btn-section-label {
	display: block;
	font-size: 13px;
	color: #888;
	margin-bottom: 8px;
	font-weight: 500;
}
/* 保存ボタン */
.contentsBox .pageButtonBox2 > a.form_save,
.contentsBox > .pageButtonBox2 > a.form_save,
form > .pageButtonBox2 > a.form_save,
.contentsBox > .pageButtonBox > a {
	font-size: 18px;
	padding: 12px 40px;
	border-radius: 8px;
	background: linear-gradient(135deg, #1d9e3b, #28a745);
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: bold;
	box-shadow: 0 3px 8px rgba(29,158,59,0.3);
	transition: transform 0.15s, box-shadow 0.15s;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin: 0 8px;
}
.contentsBox .pageButtonBox2 > a.form_save:hover,
.contentsBox > .pageButtonBox2 > a.form_save:hover,
form > .pageButtonBox2 > a.form_save:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 16px rgba(29,158,59,0.4);
}
/* 削除ボタン（控えめに） */
.contentsBox .pageButtonBox2 > a.form_delete,
.contentsBox > .pageButtonBox2 > a.form_delete,
form > .pageButtonBox2 > a.form_delete {
	font-size: 14px;
	padding: 8px 24px;
	border-radius: 6px;
	background: #fff;
	color: #999;
	border: 1px solid #ddd;
	cursor: pointer;
	font-weight: 500;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin: 0 8px;
	transition: color 0.2s, border-color 0.2s;
}
.contentsBox .pageButtonBox2 > a.form_delete:hover,
.contentsBox > .pageButtonBox2 > a.form_delete:hover,
form > .pageButtonBox2 > a.form_delete:hover {
	color: #dc3545;
	border-color: #dc3545;
}

/* セクション内の追加ボタン（＋調査箇所追加 等） */
.basicBox .pageButtonBox2 {
	margin: 12px 0;
	text-align: center;
}
.basicBox .pageButtonBox2 a {
	font-size: 16px;
	padding: 10px 24px;
	border-radius: 8px;
	background: #fff;
	color: #1d9e3b;
	border: 2px solid #1d9e3b;
	cursor: pointer;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.basicBox .pageButtonBox2 a:hover {
	background: #1d9e3b;
	color: #fff;
}

/* === ヒント文字 === */
.form-hint {
	font-size: 13px;
	color: #999;
	margin-top: 4px;
}
span.cautionText2 {
	font-size: 13px;
	color: #999;
}

/* ============================================================
   form-row レイアウト（工事登録フォーム等、HTML構造を変更したページ用）
   ============================================================ */
.form-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #eee;
}
.form-row:last-child { border-bottom: none; }

.form-label {
	width: 220px;
	min-width: 220px;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	background: #f6f9f6;
	border-right: 3px solid #1d9e3b;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	line-height: 1.5;
}

.form-value {
	flex: 1;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 64px;
}
.form-value input[type="text"],
.form-value input[type="number"],
.form-value input[type="date"],
.form-value select { width: 100%; }

/* 住所の横並び */
.form-value .form-multi {
	display: flex;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;
}
.form-value .form-multi .form-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.form-value .form-multi .form-col > label {
	font-size: 13px;
	color: #777;
	font-weight: 500;
	margin-right: 0;
}
.form-value .form-multi .col-zip { width: 160px; flex-shrink: 0; }
.form-value .form-multi .col-pref { width: 150px; flex-shrink: 0; }
.form-value .form-multi .col-city { width: 200px; flex-shrink: 0; }
.form-value .form-multi .col-town { flex: 1; min-width: 180px; }
.form-value .form-multi input[type="text"] { width: 100%; }

/* form-multi バリエーション（依頼フォーム用） */
.form-multi.col-2 { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.form-multi.col-3 { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.form-multi.col-5 { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.form-multi.col-2 > .form-multi-item { flex: 1; min-width: 180px; }
.form-multi.col-3 > .form-multi-item { flex: 1; min-width: 140px; }
.form-multi.col-5 > .form-multi-item { flex: 1; min-width: 100px; }
.form-multi-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.form-multi-item > label { font-size: 13px; color: #777; font-weight: 500; }
.form-multi-label { font-size: 13px; color: #777; font-weight: 500; margin-bottom: 4px; }
.form-multi-item input[type="text"],
.form-multi-item input[type="date"],
.form-multi-item select { width: 100%; }

/* form-value内 form-multi バリエーション */
.form-value.form-multi { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.form-value.form-multi-half > .form-multi-item { flex: 1; min-width: 200px; }
.form-value.form-multi-third > .form-multi-item { flex: 1; min-width: 140px; }
.form-value.form-multi-sixth > .form-multi-item { flex: 1; min-width: 80px; }

/* 2列行 */
.form-row-pair {
	display: flex;
	border-bottom: 1px solid #eee;
}
.form-row-pair .form-row { flex: 1; border-bottom: none; }
.form-row-pair .form-row + .form-row { border-left: 1px solid #eee; }

/* 3列行 */
.form-row-triple {
	display: flex;
	border-bottom: 1px solid #eee;
}
.form-row-triple .form-row { flex: 1; border-bottom: none; }
.form-row-triple .form-row + .form-row { border-left: 1px solid #eee; }

/* 労働保険番号 */
.form-value .insurance-grid {
	display: flex;
	gap: 8px;
	width: 100%;
	flex-wrap: wrap;
}
.form-value .insurance-grid .ig-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 80px;
}
.form-value .insurance-grid .ig-col > label {
	font-size: 12px;
	color: #777;
	margin-right: 0;
}
.form-value .insurance-grid input[type="text"] {
	font-size: 18px;
	padding: 10px 10px;
}

/* ラジオ・チェック用ラベル */
.form-value label.radio-label,
.form-value label.check-label {
	cursor: pointer;
	font-weight: 500;
	margin-right: 24px;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.form-value .toggle-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	margin-right: 20px;
}

/* 単位テキスト */
.unit-text {
	font-size: 16px;
	color: #666;
	flex-shrink: 0;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 900px) {
	.form-row { flex-direction: column; }
	.form-label {
		width: 100%; min-width: 0;
		padding: 10px 14px;
		border-right: none;
		border-bottom: 2px solid #1d9e3b;
	}
	.form-value { padding: 10px 14px; }
	.form-row-pair, .form-row-triple { flex-direction: column; }
	.form-row-pair .form-row + .form-row,
	.form-row-triple .form-row + .form-row {
		border-left: none; border-top: 1px solid #eee;
	}
	.form-value .form-multi { flex-direction: column; }
	.form-value .form-multi .col-zip,
	.form-value .form-multi .col-pref,
	.form-value .form-multi .col-city,
	.form-value .form-multi .col-town { width: 100%; }

	.contentsBox input[type="text"],
	.contentsBox input[type="number"],
	.contentsBox input[type="date"],
	.contentsBox select,
	.contentsBox textarea {
		font-size: 18px;
		padding: 10px 12px;
	}
	.contentsBox .blockThree,
	.contentsBox .blockHalf,
	.contentsBox .blockSix {
		flex-direction: column;
	}
}