/*========= Common Variables ===============*/
:root {
	--ftc-color: #9E1226;
	--ftc-hover-color: #780024;
	--ftc-middle-color: #d9b0be;
	--ftc-light-color: #f3e4e7;
	--button-disable-color: #9d9d9d;
}

/* プルダウン共通 */
select {
	padding: 4px;
}

/*========= Common Styles ===============*/
/* タイトル以降要素 画面共通 ※横幅の1remはdatatableのmarginと相殺するために必要。 */
body {
	/* 画面最下部のボタンをタブレットで押しやすくなるように対応 */
	margin-bottom: 5rem;
	/* bootstrap5のデフォルトフォントが日本語に対応していないため独自設定 */
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", Meiryo, sans-serif;
}

/*========= Common Styles ===============*/
/* タイトル以降要素 画面共通 ※横幅の1remはdatatableのmarginと相殺するために必要。 */
div.main-div {
	margin: 0.5rem 1rem;
}

/* ラベル共通 */
label {
	margin-bottom: 0 !important;
}

/* 読み取り専用入力欄 */
input:read-only {
	background-color: #DDD;
}

/* 読み取り専用(date-picker) */
input.date-picker:read-only {
	background-color: revert;
}

/* カレンダー用テキストボックス */
input.date-picker {
	background: no-repeat url(../image/icon/calendar.svg);
	background-position: 5px 50%;
	padding-left: 30px;
	width: 9rem;
}

/* 日付入力欄 */
input[type="date"] {
	width: 8em;
}

/* 数値入力欄 */
input[type="number"] {
	text-align: right;
}

/* テキスト入力欄 サイズ大 */
input[type="text"].input-long {
	width: 400px;
	height: 400px;
}

/* 高さ自動調節テキストエリア */
textarea.flex-area {
	resize: none;
}

/*========= Buttons ===============*/
/* ※CSS付ける前に初期化(iOS対応) */
button[type="button"], button[type="submit"] {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	color: black;
}

/* ボタン */
button[type="button"].btn-ftc-red, button[type="submit"].btn-ftc-red {
	background-color: var(--ftc-color);
	border: 1px solid transparent;
	border-radius: 2px;
	color: white;
	padding: 6px 12px;
}

/* ボタン(ホバー時) */
button[type="button"].btn-ftc-red:hover, button[type="submit"].btn-ftc-red:hover
	{
	background-color: var(--ftc-hover-color);
}

/* ボタン(非活性) */
button:disabled, button:disabled:hover {
	background-color: var(--button-disable-color) !important;
}

/* 送信無しボタン */
button[type="button"].non-submit {
	background-color: white;
	border: 1px solid var(--ftc-color);
	color: var(--ftc-color);
	padding: 0.375rem 0.75rem;
}

/* 送信無しボタン */
button[type="button"].non-submit:hover {
	background-color: var(--ftc-light-color) !important;
	border-color: var(--ftc-color);
}

/* 送信無しボタン */
button[type="button"].not-submit {
	padding: 0px 3px;
	border: solid 1px rgb(133, 133, 133);
	border-radius: 2px;
	color: white;
	background-color: steelblue;
}

/* 送信無しボタン(ホバー時) */
button[type="button"].not-submit:hover {
	background-color: #36668d;
}

td.td-input {
	display: flex;
	align-items: center;
}

td.td-input>* {
	margin-right: 5px;
}

/* 余白列 */
td.td-margin {
	padding: 0 5px;
}

/* 検索条件 外枠 */
.search-area {
	border: 1px solid gray;
	border-radius: 0.5em;
	margin-bottom: 1rem;
}

/* 検索条件 外枠 ※モーダル内の時は下余白無し */
.modal-body .search-area {
	margin-bottom: 0;
}

/* 検索条件 ヘッダー */
.search-header {
	color: white;
	background: gray;
	border-bottom: 1px solid gray;
	border-radius: 5px 5px 0px 0px;
	padding: 3px 10px;
}

/* 検索条件 コンテンツ */
.search-contents {
	padding: 3px 10px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}

.search-contents table {
	margin-right: 1rem;
}

/* 検索条件 行間 */
.search-contents table tr td {
	vertical-align: text-top;
}

/* 必須マーク */
.required::before {
	content: "必須";
	color: #ffffff;
	background: #cc0000;
	font-size: 0.6em;
	padding: 0.4em;
	margin-right: 0.3em;
}

/* 破線 */
div.horizontal-dashed-line {
	width: 100%;
	border-top: 1px dashed lightgray;
	margin: 0.25rem 0;
}

/* ファイル選択ボタンに重ねるラベル(見た目をボタンに寄せる) */
label.select-file {
	margin: 0;
	background-color: #EFEFEF;
	padding: 1px 10px;
	border: solid 1px rgb(133, 133, 133);
	border-radius: 2px;
}

/* ファイル選択ラベル(ホバー時) */
label.select-file:hover {
	background-color: #e6eae6;
	cursor: pointer;
}

/* ファイル選択ラベル(アクティブ時) */
label.select-file:active {
	background-color: #EFEFEF;
}

/* 画面上部メッセージ */
div.disp-msg {
	color: red;
	white-space: pre-line;
}

/* 入力欄エラーメッセージ */
div.err-msg {
	color: red;
	font-size: 80%;
	white-space: pre;
}
.error-style {
	background-color: var(--ftc-light-color) !important;
}

/* 改行無し・折り返しあり・連続スペース集約 */
div.no-breaks {
	white-space: normal;
}

/* カメラアイコン */
#cameraIcon {
	width: 30px;
	height: 30px;
}

/* カメラアイコン(ホバー、アクティブ時) */
#cameraIcon:hover, #cameraIcon.active {
	fill: gray;
	cursor: pointer;
}

/* DataTable以外で作成したボタンのスタイル */
.customize-buttons>button {
	font-size: 0.88em;
	margin-right: 0.333em;
	margin-bottom: 0.333em;
	padding: 0.5em 1em;
	line-height: 1.6em;
}

/* 写真枚数ラベル */
.image-count {
	color: #999;;
	vertical-align: middle;
	margin-left: 0.5rem;
}
.image-exist {
	font-weight: bold;
	color: #666;
}

@media screen and (max-width: 640px) {
	/* DataTableライクなボタン配置(スマホ表示時) */
	.move-to-datatable {
		text-align: center;
	}
}

@media screen and (min-width:641px) {
	/* DataTableライクなボタン配置(PC表示時) */
	.move-to-datatable {
		margin-bottom: -40px;
		position: absolute;
		z-index: 1;
	}
	.dataTables_filter {
		min-height: 2.5rem;
	}
}

.input-items>.search-contents>table>tbody>tr {
	display: block;
}

.input-items>.search-contents>table>tbody>tr>td.td-margin {
	padding: 0;
}

.search-contents table {
	width: 100%;
	margin-right: 0;
}

input[type="text"].input-long, textarea.input-long {
	width: 100%;
}