@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
/* ===================================================== */
/* common */
/* ===================================================== */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 2em;
/*	font-family: -apple-system, blinkMacSystemFont,
               'Helvetica Neue',
               'Segoe UI',
               'Hiragino Kaku Gothic ProN',
               Meiryo,
               sans-serif;
*/

	font-family: 'Noto Sans JP', sans-serif;
	color:#545454;
	word-break:break-all;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
footer{
	border-top: 1px solid #ccc; 
}
/* ===================================================== */
/* common */
/* ===================================================== */
button:focus {
	outline:none;
}
/* フォント */
body {
	/*overflow: hidden;*/
	padding-top:55px;
	background-color: #f8f9fa;
}

@media (max-width:767px) {
	body {
		padding-top:75px;
	}
}

body p,
body a,
body table th,
body table td,
body span,
body button.btn,
.form-check-label {
	line-height:1.8em;
	font-size:16px;
}
.page-link span {
	line-height: 1.25em;
}

@media screen and (max-width:767px) { 
	body p,
	body a,
	body table th,
	body table td,
	body span,
	.form-check-label,
	body button.btn {
		font-size:14px;
	}
}
body a {
	color:#545454;	
}
body a:hover {
	color:#545454;
	text-decoration: none;
	opacity: .5;
	transition: .5s;
}
.underline {
	text-decoration: underline;
}
.underline:hover {
	text-decoration: underline;
}
.flex-grow-1 {
	flex-grow: 1;
}

/* スクロールバー設定 */
::-webkit-scrollbar{
  width: 5px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance:textfield;
}

.content-wrap {
	position: relative;
}

/* サイドメニュー */
.sidebar {
	position: absolute;
	top:0;
	left: 0;
	width: 180px;
	height: 100%;
	border-right: 1px solid #ccc;
	background-color: #37474f;
	z-index: 99;
}
@media screen and (max-width:767px) { 
	.sidebar {
		width: 50%;
	}
}

.sidebar .sidebar-toggle {
	position: absolute;
	width: 40px;
	height: 40px;
	top:5px;
	right:0;
	border: 1px solid #e0e0e0;
	border-radius: 0 5px 5px 0;
	transform: translateX(100%);
	line-height: 1em;
}
.sidebar .sidebar-toggle::after {
	font-family: FontAwesome;
	content:"\f053";
}
.sidebar .sidebar-toggle:hover {
	cursor: pointer;
}
.sidebar ul li a ,
.sidebar ul li p {
	color: white;
	font-size: 18px;
}
.sidebar ul li > .sub-list li a {
	font-size:14px;
	padding: 10px 0;
	display: block;
}
.sidebar ul li > .sub-list li.active a {
	color: #7ecedb;
}


.sidebar-close .sidebar {
	left: -180px;
	transition: .5s;
}
@media screen and (max-width:767px) { 
	.sidebar-close .sidebar {
		left: -50%;
	}
}
.sidebar-close .sidebar .sidebar-toggle::after {
	font-family: FontAwesome;
	content:"\f054";
}


/* メインコンテンツ */
.content {
/*	overflow-y: auto;	*/
	padding-left: 180px;
}
@media(max-width:767px) {
	.content {
		padding-left: 0;
	}	
}
.sidebar-close .content {
	padding-left: 0;
}

/* ヘッダー */
header {
	position:fixed;
	width: 100%;
	height:55px;
	top:0;
	z-index: 100;
}
@media (max-width:767px) {
	header {
		height:75px;
	}	
}
header img {
	width: 100px;
	vertical-align: text-bottom;
}
header p,
header i {
	color: white;
}
header a {
	font-size:18px;
}
header .title {
	font-size:12px;
}
header .infomation-modal-open {
	position: relative;
}
header .infomation-modal-open span {
	position: absolute;
	top:-4px;
	right: -10px;
	width:15px;
	height: 15px;
	background-color: red;
	color:white;
	font-size:10px;
	line-height: 15px;
	border-radius: 50%;
	text-align: center;
}
header .infomation-modal-open,
header .infomation-modal-open span:hover {
	cursor: pointer;
}
.modal-header .close {
	padding-top: 0px;
}
.modal-header .close span {
	font-size:20px;
}
/* 各ページの見出し */
h2 {
	background-color: #37474f;
	padding: 10px 10px 10px 15px;
	border-radius: 5px;
	color:white;
	border-left: 7px solid #AE0101;
	font-size:24px;
}
.fs-18 {
	font-size:18px;
}
/* Bootstrap 上書き */
.form-control {
	width: auto;
	max-width: 100%;
}
@media(max-width:767px) {
	.form-control {
		width: 100%;
	}
}
.form-control:disabled,
.form-control[readonly] {
	background-color: white;
}

.modal-header {
	border-bottom: none;
}
.modal-footer {
	border-top: none;
}
.search-area table th {
	width:130px;
}
.search-area table th,
.search-area table td {
	padding:5px;
}
@media (max-width:991px) {
	.search-area table th,
	.search-area table td {
		display: block;
		width:100%;
	}	
}

/**********************
作業管理
**********************/

#work .sub-nav li a {
	text-decoration: underline;
}
#work .search-area {
	background-color: #e8e8e8;
	width: 100%;
	max-width: 500px;
}
/* カレンダー表示 */
#work .calender-list h3 {
	font-size:18px;
}
#work .calender-list h3 span {
	font-size:26px;
}
@media(max-width:767px) {
	#work .calender-list h3 {
		font-size:16px;
	}
	#work .calender-list h3 span {
		font-size:20px;
	}	
}
#work .calender-list .month-nav button.btn {
	font-size:12px;
}

#work .calender-list table {
	width:100%;
}
#work .calender-list table th,
#work .calender-list table td  {
	width: 14.285%;
	border: 1px solid #ccc;
	text-align: center;
}
#work .calender-list table th {
	background-color: #cecece;
	font-weight: bold;
}
#work .calender-list table td {
	height: 150px;
	background-color: white;
}
#work .calender-list table td.today {
	background-color: #eff6ff;
}
@media(max-width:767px) {
	#work .calender-list table td {
		height: 100px;
	}	
}
#work .calender-list table .label {
	display: block;
	color: black;
	font-size:12px;
	width: 100%;
	padding-left: 1%;
	padding-right: 1%;
	margin-bottom: 5px;
	border-radius: 0px;
	line-height: 1.5em;
	border:none;
	cursor: pointer;
	background-color: rgb(200, 200, 200);
}
#work .calender-list table .label.label-start {
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	width:98%;
	padding-left: 0;
	padding-right: 0;
	margin-left:auto;
}
#work .calender-list table .label.label-end {
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	width:98%;
	padding-left: 0;
	padding-right: 0;
	margin-right:auto;
}
#work .calender-list table .label span {
	font-size:12px;
	visibility: hidden;
}
#work .calender-list table .label-dummy {
	visibility: hidden;
}

#work .calender-list table .label.label-start span {
	visibility: visible;
}
#work .calender-list table .label-1 {
	background-color: #ff7f7f;
}
#work .calender-list table .label-2 {
	background-color: #ff8ec6;
}
#work .calender-list table .label-3 {
	background-color: #c68eff;
}
#work .calender-list table .label-4 {
	background-color: #8ec6ff;
}
#work .calender-list table .label-5 {
	background-color: #8effff;
}
#work .calender-list table .label-6 {
	background-color: #8eff8e;
}
#work .calender-list table .label-7 {
	background-color: #ffc68e;
}
#work .calender-list table .label-8 {
	background-color: #ffff8e;
}
/* 詳細を表示するモダル */
#work .work-calender-modal table {
	width:100%;
}
#work .work-calender-modal table th {
	width: 30%;
	font-weight: bold;
	padding-right:10px;
}
#work .work-calender-modal .modal-header {
	border-bottom:1px solid #ccc;
}
/* 作業リスト表示*/
#work .work-list h3 {
	font-size:18px;
}
#work .work-list h3 span {
	font-size:26px;
}
@media(max-width:767px) {
	#work .work-list h3 {
		font-size:16px;
	}
	#work .work-list h3 span {
		font-size:20px;
	}	
}
#work .work-list .month-nav button.btn {
	font-size:12px;
}
#work .work-list table {
	min-width: 900px;
}
#work .work-list table thead th {
	font-weight:bold;
	font-size:12px;
	vertical-align: top;
}
#work .work-list table th,
#work .work-list table td {
	text-align: center;
	font-size:14px;
}
#work .work-list table .table-col-1 {
	width: 75px;
}
#work .work-list table .table-col-2 {
	width: 120px;
}
#work .work-list table .table-col-3 {
	width:140px;
}
#work .work-list table .table-col-4 {
	width: 200px;
}
#work .work-list table .table-col-5 {
	width: 200px;
}
#work .work-list table .table-col-6 {
	width: 140px;
}
#work .work-list table .table-col-7 {
	width: 60px;
}

/* 作業登録・作業詳細のテーブル */
body.form table.table-bordered th,
body.detail table.table-bordered th {
	background-color: rgba(0,0,0,.05);
	width: 35%;
	font-size:14px;
}
body.detail table.table-bordered.car-table th {
	width: 220px;
}

#client.detail table.table-bordered th.car-head {
	background-color: #6c757d;
	color:white;
}
#client.detail table.table-bordered th.car-head p {
	font-size:18px;
}

@media screen and (max-width:991px) {
	body.form table.table-bordered th,
	body.detail table.table-bordered th,
	body.detail table.table-bordered.car-table th,
	body.form table.table-bordered td,
	body.detail table.table-bordered td {
		display: block;
		width: 100%;
		
	}
}
#work .selected_color {
	width: 30px;
	height: 15px;
	border:1px solid gray;
	display: inline-block;
	margin-left: 15px;
	vertical-align: middle;
}
#work select[name="color"] option {
	color: white;
}
#work select[name="color"] option[value="0"],
#work .selected_color.color_0 {
	color: black;
	background-color: transparent;
}
#work select[name="color"] option[value="1"],
#work .selected_color.color_1 {
	background-color: #c62828
}
#work select[name="color"] option[value="2"],
#work .selected_color.color_2 {
	background-color: #ad1457
}

#work select[name="color"] option[value="3"],
#work .selected_color.color_3 {
	background-color: #6a1b9a
}

#work select[name="color"] option[value="4"],
#work .selected_color.color_4 {
	background-color: #283593
}

#work select[name="color"] option[value="5"],
#work .selected_color.color_5 {
	background-color: #0277bd
}

#work select[name="color"] option[value="6"],
#work .selected_color.color_6 {
	background-color: #2e7d32
}

#work select[name="color"] option[value="7"],
#work .selected_color.color_7 {
	background-color: #ef6c00
}

#work select[name="color"] option[value="8"],
#work .selected_color.color_8 {
	background-color: #4e342e
}

/* 作業済のチェックボックス */
#work .form-check input#done {
	margin-top:.7rem;
}


/* 顧客管理 */
#client .search-area {
	background-color: #e8e8e8;
	width: 100%;
	max-width: 800px;
}
#client .client-list table {
	min-width: 900px;
}
#client .client-list table th,
#client .client-list table td {
	text-align: center;
	font-size:14px;
}
#client .client-list table thead th {
	font-weight:bold;
	font-size:12px;
}
#client.detail .table-striped{
	min-width: 900px;
}
#client.detail .table-striped th,
#client.detail .table-striped td,
#client.detail .table-striped td .text-danger,
#client.detail .table-striped td .btn {
	font-size:14px;
}

#client .copy-btn {
	border:1px solid gray;
	border-radius: 5px;
	font-size:12px;
}
#client .copy-btn:hover {
	cursor: pointer;
	opacity: 0.5;
	transition: 0.5s;
}
#client .car-table td {
	min-width: 280px;
}

/* アップロード画像のプレビュー */
.prev-wrap {
	position: relative;
/*	display: inline-block;	*/

	width: fit-content;
	width:-ms-fit-content;
	width:-moz-fit-content;
	width:-webkit-fit-content;
	width:-o-fit-content;
}
.prev-wrap .file-del {
	width: 25px;
	height: 25px;
	font-size:20px;
	font-weight: bold;
	line-height: 1.2em;
	background-color: gray;
	vertical-align: middle;
	color: white;
	position: absolute;
	text-align: center;
	top:0;
	right:-35px;
	border-radius: 50%;
	z-index: 10;
}
.prev-wrap .file-del:hover {
	cursor: pointer;
}
.prev-img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	object-position: center;
}