/* ◆色パターン
-------------------------------*/
/*
@color_001: #2C245B;
@color_002: linear-gradient(#4A4676, #6A6896);
@color_003: linear-gradient(#666, #333);
@color_004: linear-gradient(#999, #666);
@color_005: #DFDFDF;
@color_006: #DDD;
@color_007: #F6F6F6;
*/

/* ナビゲーションバー */
@color_001: #1B1C51;

/* 画面タイトル */
@color_002: #5B5C91;

/* ツールチップ */
@color_003: linear-gradient(#666, #333);

/* パネルヘッダ */
@color_004: linear-gradient(#7B7CB1, #1B1C51);

/* 項目タイトル */
@color_005: #D7D8E0;

/* screen背景 */
@color_006: #C7C8D0;

/* content_area背景 */
@color_007: #F7F8FF;

/* 小タイトル */
/*@color_008: linear-gradient(#E7E8F0, #B7B8C0);*/
@color_008: linear-gradient(185deg, #f9f9f9 0%,#323365 100%);




/* ◆width
-------------------------------*/
.w60 {
	width: 60% !important;
}
.w80 {
	width: 80% !important;
}
.w100 {
	width: 100% !important;
}


/* ◆height
-------------------------------*/
.h50 {
	height: 50% !important;
}
.h100 {
	height: 100% !important;
}


/* ◆display
-------------------------------*/
.d_table {
	display: table;
}
.d_cell {
	display: table-cell;
}


/* ◆datepicker
-------------------------------*/
.date {
	.input-group-addon {
		width: 40px !important;
		vertical-align: middle;
		padding: 0px;
		cursor: pointer;
	}
}
.date-input {
	width: 100px !important;
	ime-mode: disabled;
}
.datepicker_btn {
}
.datepicker {
	z-index: 1100;
}

.pagination {
	margin: 0;
}

/* ◆numeric-only
-------------------------------*/
.numeric-only {
	text-align: right;
}




/* ◆グレーアウト
-------------------------------*/
#gray_out {
	background: rgba(0,0,0,0.0);
	/*opacity: 0.0;*/
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 9999;

	> div {
		display: table;
		width: 100%;
		height: 100%;

		> .content {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			color: #777;
			font-size: 40px;
			z-index: 10000;

			.msg_loading {
				-webkit-animation: flashing_text 0.5s infinite alternate;
				-moz-animation: flashing_text 0.5s infinite alternate;
				animation: flashing_text 0.5s infinite alternate;
			}
			.msg_save_complete {

			}
		}
	}

}
/* ◆メッセージ
-------------------------------*/
#message {
	background: #000;
	opacity: 0.7;
	width: 100%;
	height: 60px;
	margin-bottom: -60px;
	position: fixed;
	bottom: 0;
	left: 0;
	/*display: none;*/
	z-index: 9999;

	> div {
		display: table;
		width: 100%;
		height: 100%;

		> .content {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			color: #EEE;
			font-size: 30px;
			z-index: 10000;

			.msg_loading {
				-webkit-animation: flashing_text 0.5s infinite alternate;
				-moz-animation: flashing_text 0.5s infinite alternate;
				animation: flashing_text 0.5s infinite alternate;
			}
			.msg_save_complete {

			}
		}
	}

}
/* ◆点滅表現
-------------------------------*/
@-webkit-keyframes flashing_text {
	from { opacity: 0.7; }
	to { opacity: 0.3; }
}
@-moz-keyframes flashing_text {
	from { opacity: 0.7; }
	to { opacity: 0.3; }
}
@keyframes flashing_text {
	from { opacity: 0.7; }
	to { opacity: 0.3; }
}






/* ◆金額入力
-------------------------------*/
.price-input {
	width: 120px !important;
}
/* ◆金額入力
-------------------------------*/
.price_input {
	display: inline-block;

	&:after {
		content: ' 円';
	}

	input {
		display: inline-block;
		width: 100px;
	}
}
/* ◆人数入力
-------------------------------*/
.persons_input {
	display: inline-block;

	&:after {
		content: ' 人';
	}

	input {
		display: inline-block;
		width: 80px !important;
	}
}
/* ◆％入力
-------------------------------*/
.percent_input {
	display: inline-block;

	&:after {
		content: ' ％';
	}

	input {
		display: inline-block;
		width: 60px !important;
	}
}

/* ◆金額単位
-------------------------------*/
.price_unit:after {
	content: ' 円';
}
/* ◆パーセント単位
-------------------------------*/
.percent_unit:after {
	content: ' ％';
}




/* ◆panel
-------------------------------*/
.panel {
	.panel-heading {
		cursor: pointer;

		/* panelタイトル
		----------------------------------*/
		.panel-title {
			display: inline-block;
		}
		/* panelタイトル（開閉アイコン）
		----------------------------------*/
		.open_close_icon {
			display: inline-block;
			float: right;
		}
	}
}



/* ◆html
-------------------------------*/
html {
	height: 100%;
}

/* ◆body
-------------------------------*/
body {
	overflow: hidden !important;

	height: 100%;
	padding-top: 54px !important;
	padding-bottom: 0px !important;
	font-family: 'メイリオ', 'Meiryo', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	background-color: #C7C8D0;

}



/* ◆wrapper
-------------------------------*/
#wrapper {
	height: 100%;

	/* メニュー（左領域）
	----------------------------------*/
	#menu {
		position: fixed;
		width: 200px;
		height: calc(~"100% - 54px");
		top: 54px;
		border-right: 1px solid #DDD;
	}
	/* 内容（右領域）
	----------------------------------*/
	#content {
		height: 100%;
		margin-left: 200px;

		.page-header {
			border-bottom: 1px solid #999;
		}
	}

	/* ログイン画面
	----------------------------------*/
	&.login {
		#content {
			margin-left: 0;
		}
	}
}




/* ◆ナビゲーションバー
-------------------------------*/
.navbar {

	&.navbar-inverse {
		height: 54px;
		margin-bottom: 0;
		background-color: @color_001;
		border: none;

		.navbar-header {
			height: 100%;
			width: 100%;

			.d_table {
				height: 100%;
				width: 100%;

				.d_cell {
					height: 100%;
					vertical-align: middle;

					&:nth-child(1){ width: 200px; }
					&:nth-child(2){ width: 60px; }
					&:nth-child(3){ }
					&:nth-child(4){
						width: 120px;
						text-align: right;

						a{
							color: #9AF;
							.glyphicon{
								font-size: 120%;
							}
						}
					}
					&:nth-child(5){ min-width: 180px; padding-right: 10px; color: #CCC; }
					&:nth-child(6){ width: 120px; }

				}
			}

			.navbar-brand {
				float: none;
				height: auto;
				line-height: normal;
				margin: 0;
				padding: 0;
				color: #CCC;
			}

		}
	}

	/* ◆メニューボタン
	-------------------------------*/
	.btn[data-item="menu"] {
		margin: 0;
		padding: 9px 10px;

		.icon-bar {
			border-radius: 1px;
			display: block;
			height: 2px;
			width: 22px;
			background-color: #333;

			& + .icon-bar {
				margin-top: 4px;
			}
		}
	}


}






/* ◆container
-------------------------------*/
.container, .container-fluid {
	box-sizing: border-box;
	height: 100%;
	padding: 0;
}





/* ◆画面タイトル
----------------------------------*/
.screen_title {
	/*position: fixed;*/
	width: 100%;
	height: 47px;
	line-height: 47px;
	/*top: 54px;*/
	margin: 0;
	padding: 0px 30px;
	background: @color_002;
	color: #EEE;
	font-size: 20px;
	font-weight: bold;
	z-index: 100;

	input.form-control {
		font-weight: normal;
		margin-left: 30px;
		display: inline-block;
		vertical-align: middle;
		width: auto;
	}
	.btn-group {
		margin-left: 30px;
	}
}

/* ◆画面
----------------------------------*/
.screen {
	box-sizing: border-box;
	background-color: @color_006;
	/*min-height: 100%;*/
	height: calc(~"100% - 47px");
	/*margin-top: 26px;*/
	padding: 20px;
}

/* ◆一部
----------------------------------*/
.part {
	height: 100%;
}


/* ◆モーダル
----------------------------------------------*/
.modal {
	overflow: hidden !important;
	left: 30px;
	top: 30px;
	width: calc(~"100% - 60px");
	height: calc(~"100% - 60px");
	padding: 0 !important;

	.modal-dialog {
		margin: 0;
		width: 100%;
		height: 100%;

		.modal-content {
			height: 100%;
			max-width: 1085px;
			margin: 0 auto;
			border: none;

			.modal-header {
				background-color: @color_002;
				height: 47px;
				color: #EEE;
				padding: 0 30px;
				border-radius: 5px 5px 0px 0px;

				.modal-title {
					line-height: 47px;
					font-size: 20px;
					font-weight: bold;
				}

				.close {
					margin-top: 10px;
					color: #EEE;
					opacity: 0.5;

					&:hover {
						opacity: 0.8;
					}
				}


			}
			.modal-body {
				background: @color_006;
				height: calc(~"100% - 47px");
				border-radius: 0px 0px 5px 5px;
			}
			.modal-footer {
				background: @color_002;
				color: #EEE;
			}
		}
	}
}



/* ◆【分割なし】メイン領域
----------------------------------*/
.main_area {
	height: 100%;
	overflow: auto;
	border-radius: 4px;

	/* ◆内容領域
	----------------------------------*/
	.content_area {
		background-color: @color_007;
		border-radius: 4px;
		padding: 20px;
	}
}

/* ◆【分割】左領域
----------------------------------*/
.left_area {
	float: left;
	width: calc(~"100% - 260px");
	height: 100%;
	overflow: auto;
	border-radius: 4px;

	/* ◆内容領域
	----------------------------------*/
	.content_area {
		background-color: @color_007;
		border-radius: 4px;
		padding: 20px;
	}
}
/* ◆【分割】右領域
----------------------------------*/
.right_area {
	float: right;
	width: 240px;
	height: 100%;
	position: relative;

	/* ◆ボタン領域
	----------------------------------*/
	.btn_area {
		width: 100%;
		padding: 20px;
		background-color: @color_007;
		border-radius: 4px;

		:not(:first-child) {
			margin-top: 20px;
		}

		.required_msg {
			margin-top: 0;
			color: red;
			text-align: center;
		}
	}

	/* ◆進捗状況領域
	----------------------------------*/
	.progress_area {
		width: 100%;
		padding: 10px;
		background-color: @color_007;
		border-radius: 4px;
		line-height: 150%;

		.progress_rate {
			display: inline-block;
			float: right;
			font-size: 150%;
		}
	}

	/* ◆情報領域
	----------------------------------*/
	.info_area {
		width: 100%;

		/* ◆営業評価分析
		----------------------------------*/
		.display_analyze {
			height: 100%;

			.area_title {
				padding: 6px;
				margin-bottom: 0;
			}

			.analize {
				height: 100%;
				overflow: auto;

				.table {
					margin-bottom: 0;
				}
			}

		}

	}

	>div+div {
		margin-top: 20px;
	}
}


/* ◆タブ
----------------------------------*/
.nav.nav-tabs {
	margin-left: 4px;
	margin-right: 4px;
	padding-left: 20px;

	li.active > a {
		color: #EEE;
		background: @color_002;
	}
}

/* ◆タブ内容
----------------------------------*/
.tab-content[data-type="tab"] {
	padding: 20px;
	margin-top: -1px;

	border: 1px solid #BBB;

	border-radius: 4px;
	-webkit-border-radius:  4px;
	-moz-border-radius:  4px;
}


/* ◆タイトル（小）
----------------------------------*/
.area_title {
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.4);
	background: @color_008;
	color: #EEE;

	border-radius: 4px;
	-webkit-border-radius:  4px;
	-moz-border-radius:  4px;

	&:before {
		content: "◆";
	}
}




/* ◆入力領域
----------------------------------*/
.input_area {
	& + .input_area {
		margin-top: 30px;
	}

	/* form-group
	----------------------------------*/
	.form-group {
		display: table;
		margin-bottom: 0;
		min-height: 39px;

		&.form-group-sm {
			.form-control-static {
				min-height: 30px;
			}
		}
	}

	/* 項目名
	----------------------------------*/
	.col_label {
		display: table-cell;
		min-width: 140px;
		width: 140px;
		height: 39px;
		text-align: center;
		vertical-align: middle;
		padding: 4px 10px;
		background: @color_005;
		border-bottom: 1px solid #CCC;
	}
	/* 項目値
	----------------------------------*/
	.col_value {
		display: table-cell;
		/*height: 60px;*/
		vertical-align: middle;
		padding: 4px 10px;
		border-bottom: 1px solid #CCC;
		white-space: nowrap;
	}
}



/* ◆文字太さ
----------------------------------*/
.fw_normal {
	font-weight: normal;
}
.fw_bold {
	font-weight: bold;
}

/* ◆目立たせる
----------------------------------*/
.highlight {
	font-size: 130%;
}
/* ◆さらに目立たせる
----------------------------------*/
.more_highlight {
	font-size: 160%;
}

/* ◆Empty
----------------------------------*/
.empty {
	background-color: #FCC;
}


/* ◆単位ラベル
----------------------------------*/
.unit {
	padding-left: 5px;
	vertical-align: middle;
}


/* ◆テーブル
----------------------------------*/
table.table {
	border-bottom: 2px solid #CCC;

	> thead > tr > th {
		border-bottom: 2px solid #CCC;
		background-color: @color_005;
		font-weight: normal;
		font-size: 110%;
	}
	> tbody > tr > td {
		vertical-align: middle;
		background-color: white;
	}

	&.table-hover > tbody > tr {
		&:hover{
			td {
				background-color: #F9F9FB;
			}
		}
	}
}



/* ◆パネル
----------------------------------------------*/
.panel {
	border: 1px solid #BBB;
	box-shadow: 0px 0px 3px 1px rgba(0, 0, 80, 0.2);

	/* パネルヘッダ
	----------------------------------------------*/
	.panel-heading {
		background: @color_004;
		border: none;
		color: #EEE;

		border-radius: 4px;
		-webkit-border-radius:  4px;
		-moz-border-radius:  4px;
	}
}



/* ◆「？」ヘルプ
----------------------------------------------*/
.glyphicon[data-type="icon_question"] {
	color: #E93;
	cursor: default;
	font-size: 16px;
}

/* ◆ツールチップ
----------------------------------------------*/
.tooltip {
	.tooltip-arrow {
		border-top-color: #333 !important;
	}
	.tooltip-inner {
		background: @color_003 !important;
	}

	/* ◆エラーツールチップ
	----------------------------------------------*/
	&.error_tooltip {
		.tooltip-arrow {
			border-top-color: #C00 !important;
		}
		.tooltip-inner {
			background: #C00 !important;
		}
	}
}

/* ◆オートコンプリート選択時
----------------------------------------------*/
.autocomplete_selected {
	background-color: #CDF !important;
}


/* ◆ボタン
----------------------------------------------*/
.btn.btn-primary {
	background: linear-gradient(#539AD7, #236AA7);
	&:hover {
		background: linear-gradient(#438AC7, #135A97);
	}
	&:active {
		background: linear-gradient(#135A97, #337AB7);
		box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
	}
}
.btn.btn-warning {
	background: linear-gradient(#F0B15A, #CA8C35);
	&:hover {
		background: linear-gradient(#E0A14A, #BA7C25);
	}
	&:active {
		background: linear-gradient(#B0610A, #DA9C45);
		box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
	}
}
.btn.btn-danger {
	background: linear-gradient(#F9837F, #C9433F);
	&:hover {
		background: linear-gradient(#E9736F, #B9332F);
	}
	&:active {
		background: linear-gradient(#B9332F, #D9635F);
		box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
	}
}
.btn.btn-default {
	background: linear-gradient(#FFFFFF, #DDDDDD);
	&:hover {
		background: linear-gradient(#EFEFEF, #CDCDCD);
	}
	&:active {
		background: linear-gradient(#CDCDCD, #CFCFCF);
		box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
	}
	&.active {
		background: linear-gradient(#CDCDCD, #CFCFCF);
		box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
	}
}


/* ◆チェックボックス
----------------------------------------------*/
.checkbox {
	label {
		padding-left: 0px;
	}
}
.checkbox-inline {
	margin-right: 10px;
}




/* ◆パンくずリスト
----------------------------------*/
div[data-type="breadcrumb"] {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag;
	margin-bottom: 20px;

	>span {
		text-decoration: none;
		outline: none;
		display: block;
		float: left;
		font-size: 12px;
		line-height: 36px;
		color: #333;
		/*need more margin on the left of links to accomodate the numbers*/
		padding: 0 10px 0 60px;
		background: linear-gradient(#CCC, #999);
		position: relative;

		/* 最初・中間・最後のスタイル
		----------------------------------*/
		&:first-child {
			padding-left: 46px;
			border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
		}
		&:first-child:before {
			left: 14px;
		}
		&:last-child {
			border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
			padding-right: 20px;
		}

		/* 「＞」スタイル
		----------------------------------*/
		&:after {
			content: '';
			position: absolute;
			top: 0;
			right: -18px; /*half of square's length*/
			/*same dimension as the line-height of .breadcrumb a */
			width: 36px;
			height: 36px;
			/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
			length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
			if diagonal required = 1; length = 1/1.414 = 0.707*/
			transform: scale(0.707) rotate(45deg);
			/*we need to prevent the arrows from getting buried under the next link*/
			z-index: 1;
			/*background same as links but the gradient will be rotated to compensate with the transform applied*/
			background: linear-gradient(135deg, #CCC, #999);
			/*stylish arrow design using box shadow*/
			box-shadow:
				2px -2px 0 2px rgba(0, 0, 0, 0.2),
				3px -3px 0 2px rgba(255, 255, 255, 0.1);
			/*
				5px - for rounded arrows and
				50px - to prevent hover glitches on the border created using shadows*/
			border-radius: 0 5px 0 50px;
		}

		/* 最後の項目「＞」スタイルを削除
		----------------------------------*/
		&:last-child:after {
			content: none;
		}

		/* 項目番号
		----------------------------------*/
		&:before {
			content: counter(flag);
			counter-increment: flag;
			/*some styles now*/
			border-radius: 100%;
			width: 20px;
			height: 20px;
			line-height: 20px;
			margin: 8px 0;
			position: absolute;
			top: 0;
			left: 30px;
			background: linear-gradient(#555, #888);
			color: #EEE;
			text-align: center;
		}

		/* アクティブ時背景色
		----------------------------------*/
		&.active {
			color: #EEE;
			background: linear-gradient(#666, #333);
		}
		&.active:after {
			background: linear-gradient(135deg, #666, #333);
		}
		&.active:before {
		}
	}
}


/* ◆画面切替領域
----------------------------------*/
.transition_animate {
	.transition_area {
		.slide_area {
			.row {
				margin-bottom: 30px;
			}
		}
	}

	/* ボタン領域
	----------------------------------*/
	.row[data-type="btn"] {
		>div {
			.btn[data-to="next"] {
				width: 200px;
			}
		}
	}
}













/* ◆ログイン
----------------------------------*/
#login {

	/* エラー領域
	----------------------------------*/
	[data-area="error"] {
		margin: 15px 0 20px 0;
	}

	.checkbox {
		margin-top: 0;

		input[type="checkbox"] {
			margin-left: 0;
			position: static;
		}
	}

	/* ログインボタン
	----------------------------------*/
	button[type="submit"] {
		padding: 15px 50px;
	}
}








/* ◆メニュー
----------------------------------*/
#menu_screen {
	height: 100%;
	overflow: auto;


	/* panel
	----------------------------------*/
	.panel {
		margin-bottom: 0px;
		border-radius: 0;

		&.panel-default {
			border: none;
		}

		/* panelヘッダ
		----------------------------------*/
		.panel-heading {
			margin-bottom: 0px;
			background: @color_002;
			color: #EEE;
			border: none;
			border-radius: 0;

			/* panelタイトル
			----------------------------------*/
			.panel-title {
				&:before {
					content: "◆";
				}
			}
		}

		/* panel内容
		----------------------------------*/
		.panel-collapse {
			margin-bottom: 0px;
		}
	}


	/* 項目
	----------------------------------*/
	.list-group-item {
		padding-left: 30px;
		margin-bottom: 0;
		border-radius: 0;
		border: none;
		border-bottom: 1px solid #DDD;
		background: linear-gradient(#FFF, #DDD);

		/* 選択時
		----------------------------------*/
		&.selected, &.selected:hover {
			background: linear-gradient(#999, #BBB);
			color: white;
			box-shadow: inset 0px 2px 2px 1px rgba(000,000,000,0.4);
		}
		/* ホバー時
		----------------------------------*/
		&:hover {
			background: linear-gradient(#EFEFEF, #CDCDCD);
		}
	}

}









/* ◆メイン
----------------------------------*/
#main_screen {

	/* ドラッグ時のグレイアウト
	----------------------------------*/
	>.drag_gray_out {
		display: none;
		background-color: rgba(0,0,0,0.7);
		position: absolute;

		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		z-index: 1000;
	}


	/* リスト画面
	----------------------------------*/
	>.list_main {
		height: 100%;
	}

	/* カレンダー画面
	----------------------------------*/
	>.calendar_main {
		height: 100%;
	}

	/* パネル画面
	----------------------------------*/
	>.panel_main {
		height: 100%;

		/* 情報領域（行）
		----------------------------------*/
		>.row[data-row="01"] {
			padding-bottom: 10px;
			border-bottom: 2px solid #DDE;
			>div {
				height: 100%;
			}
		}
		>.row[data-row="02"] {
			padding-top: 10px;
			>div {
				height: 100%;
			}
		}

		/* 各情報区画
		----------------------------------*/
		.info_cell {

			/* ドロップ領域
			----------------------------------*/
			&.drop_area {
				position: relative;
				z-index: 1010;
			}
			/* マウスオーバー
			----------------------------------*/
			&.mouse_over {
				/*background-color: #F82 !important;*/
				box-shadow: 0px 0px 20px 10px #FFF;
			}

			&[data-num="1"] {
				background-color: #BEC;
			}
			&[data-num="2"] {
				background-color: #CEC;
			}
			&[data-num="3"] {
				background-color: #FDC;
			}
			&[data-num="4"] {
				background-color: #CA9;
			}
			&[data-num="5"] {
				background-color: #CDF;
			}
			&[data-num="6"] {
				background-color: #9AC;
			}
		}


		/* 情報
		----------------------------------*/
		.info_area {
			box-sizing: border-box;
			height: 100%;

			/* 情報セル
			----------------------------------*/
			.info_cell {
				box-sizing: border-box;
				/*background-color: #DDD;*/
				padding: 5px;
				height: 100%;

				border-radius: 5px;				/* CSS3草案 */
				-webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
				-moz-border-radius: 5px;		/* Firefox用 */

				/* 情報タイトル
				----------------------------------*/
				.info_title {
					box-sizing: border-box;
					height: 35px;
					padding: 5px;
					font-size: 120%;
					font-weight: bold;
				}

				/* 入力領域
				----------------------------------*/
				.form-group {
					height: 40px;
					padding: 0 4px;
					margin-bottom: 0;
				}

				/* 受注領域
				----------------------------------*/
				.order_area {
					box-sizing: border-box;
					height: -webkit-calc(~"100% - 35px");
					height: calc(~"100% - 35px");
					overflow: auto;

					/* 受注行
					----------------------------------*/
					.order_row {
						box-sizing: border-box;
						background-color: white;
						padding: 5px;
						margin: 5px;

						border-radius: 5px;				/* CSS3草案 */
						-webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
						-moz-border-radius: 5px;		/* Firefox用 */

						/* ドラッグ中領域
						----------------------------------*/
						&.ui-draggable-dragging {
							z-index: 1020 !important;
							width: calc(~"100% - 50px") !important;
							background-color: #DDE !important;
							box-shadow: 0px 0px 10px 5px #ABF;
						}

						.subject {
							border-bottom: 1px solid #DDD;
							margin-bottom: 5px;
						}

						.small {
							font-size: 85%;
						}
						.large {
							font-size: 115%;
						}

					}
					/* 受注行(hover)
					----------------------------------*/
					.order_row:hover {
						background-color: #DDE;
						cursor: pointer;

						.subject {
							border-bottom: 1px solid #999;
						}
					}
				}
			}
		}
	}
}


/* ◆メイン一覧
----------------------------------*/
#list_main_screen {
}



.list_screen,
.output_screen, {

	background-color: #DDD;

	/* メイン領域
	----------------------------------*/
	.main_area {

		/* 検索入力（キーワード）領域
		----------------------------------*/
		div[data-area="search_keyword"] {
			margin-bottom: 10px;
		}

		/* 検索入力（詳細）領域
		----------------------------------*/
		div[data-area="search_detail"] {
			border: 1px solid #DDD;
			border-radius: 4px;
			margin-top: 10px;
			margin-bottom: 10px;

			.row {
				padding: 20px;
			}

			/* 年度月 or 日付範囲
			-----------------------*/
			.radio_cell {
				padding-right: 20px;
				vertical-align: middle;
			}
			.input_cell {
				vertical-align: middle;
				.form-group {
					margin: 0;
				}
			}
		}

	}

	/* タブ内容
	----------------------------------*/
	.tab-content {

		/* テキスト入力
		----------------------------------*/
		.text-input {
			width: 100%;
		}
	}

}

/* ▼一覧
****************************************************************************************************/


/* ◆見積前一覧
----------------------------------*/
#list_before_estimate_screen {
}

/* ◆見積一覧
----------------------------------*/
#list_estimate_screen {
}

/* ◆受注一覧
----------------------------------*/
#list_order_screen {
	/* [受注日] ラジオボタン領域 */
	.order_date_radio_cell {
		padding-right: 20px;
		vertical-align: middle;
	}
	/* [受注日] 入力領域 */
	.order_date_input_cell {
		vertical-align: middle;
		.form-group {
			margin: 0;
		}
	}

	.table {
		margin-top: 10px;
	}
}

/* ◆失注一覧
----------------------------------*/
#list_lost_order_screen {
}

/* ◆完工一覧
----------------------------------*/
#list_complete_screen {
}

/* ◆未完工一覧
----------------------------------*/
#list_uncompleted_screen {
}

/* ◆売上一覧
----------------------------------*/
#list_sales_screen {
}


/* ▼出力
****************************************************************************************************/
#output_order_screen {
	.content_area {
		width: 700px;
		margin: auto;

		div[data-area="search_detail"] {
			padding: 20px;
			margin: 0;

			.field_label {
				width: 120px;
				vertical-align: middle;
				text-align: center;
				background-color: #d7d8e0;
				border-bottom: 1px solid #CCC;
			}
			.field_value {
				padding: 10px;
				vertical-align: middle;
				border-bottom: 1px solid #CCC;
			}
			.field_btn {
				vertical-align: middle;
				text-align: center;
				border-bottom: 1px solid #CCC;
			}

			.btn_download {
				margin-top: 30px;
				width: 300px;
			}
		}
	}
}






/* ▼登録
****************************************************************************************************/

/* ◆受注前登録
----------------------------------*/
#edit_before_order_screen {
}

/* ◆受注登録
----------------------------------*/
#edit_order_screen {
}

/* ◆受注CSV登録
----------------------------------*/
#import_order_csv_screen {

	/* 画面切替領域
	----------------------------------*/
	.transition_animate {
		.transition_area {
			width: 625px;

			.slide_area {
				.row {
					margin-bottom: 30px;
				}
			}
		}
	}


	/* ボタン
	----------------------------------*/
	.btn_area {
		margin-top: 40px;
		margin-bottom: 20px;
		text-align: center;

		.btn[data-to="prev"] {
			margin: 0 10px;
		}
		.btn[data-to="next"] {
			margin: 0 10px;
			width: 200px;
		}
	}

}






/* ▼マスタ
****************************************************************************************************/


/* ◆担当者一覧
----------------------------------*/
#mst_list_user_screen {

}

/* ◆システム設定
----------------------------------*/
#mst_edit_system_screen {

}





/* ▼モーダル
****************************************************************************************************/

/* ◆確認
----------------------------------*/
#modal_confirm {
	z-index: 1250;

	.modal-dialog {
		height: auto;

		.modal-content {
			height: auto;
			max-width: 400px;
			margin: 100px auto 0 auto;

			.modal-header {
				background: @color_004;

				.modal-title {
				}
				.close {
					&:hover {
					}
				}
			}
			.modal-body {
				.message {
					margin-top: 15px;
					font-size: 20px;
				}
				.btn {
					margin: 20px 10px;
					width: 150px;
				}
			}
			.modal-footer {
			}
		}
	}
}

/* ◆削除確認
----------------------------------*/
#modal_delete_confirm {
	z-index: 1250;

	.modal-dialog {
		height: auto;

		.modal-content {
			height: auto;
			max-width: 400px;
			margin: 100px auto 0 auto;

			.modal-header {
				background: linear-gradient(#D66, #A33);

				.modal-title {
				}
				.close {
					&:hover {
					}
				}
			}
			.modal-body {
				.message {
					margin-top: 15px;
					font-size: 20px;
				}
				.btn {
					margin: 20px 10px;
					width: 150px;
				}
			}
			.modal-footer {
			}
		}
	}
}

/* ◆担当者編集
----------------------------------*/
#modal_edit_user_screen {
}

/* ◆受注前編集
----------------------------------*/
#modal_edit_before_order_screen {
}

/* ◆受注編集
----------------------------------*/
#modal_edit_order_screen {
}

/* ◆支払原価詳細編集
----------------------------------*/
#modal_edit_cost_screen {
}




/* ▼【Part】画面の一部分
****************************************************************************************************/

/* ◆メイン一覧
----------------------------------*/
.part_list_main {

	/* ドラッグ時のグレイアウト
	----------------------------------*/
	.drag_gray_out {
		display: none;
		background-color: rgba(0,0,0,0.7);
		position: absolute;

		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		z-index: 1000;
	}



	.table {
		position: relative;
		z-index: 1020;

		/* ドラッグ時テーブル
		----------------------------------*/
		&.on_drag {
			border-color: transparent;

			th { border-color: transparent; opacity: 0.2; }
			td { border-color: transparent; }

			/* ドラッグ元領域
			----------------------------------*/
			.draggable_row.drag_original {
				opacity: 1;
			}
			/* ドラッグ元以外の領域
			----------------------------------*/
			.draggable_row:not(.drag_original) {
				opacity: 0.2;
			}
		}

		/* ドラッグ領域
		----------------------------------*/
		.draggable_row {
			cursor: pointer;
		}
	}


	/* ドラッグ中領域
	----------------------------------*/
	.dragging {
		position: absolute;
		width: 10px !important;
		height: 10px !important;
		border-radius: 5px;
		background-color: #DDE !important;
		box-shadow: 0px 0px 10px 7px #ABF;
		cursor: pointer;
		z-index: 1030;
	}


	/* ドロップ領域
	----------------------------------*/
	.drop_area_group {
		position: absolute;
		z-index: 1010;
		display: none;
		left: 0;
		top: 100px;
		padding: 10px;
		margin: 10px;
		background-color: #5B5C91;
		border-radius: 5px;

		.msg {
			padding-top: 5px;
			padding-bottom: 5px;
			color: #EEE;
			text-align: center;
		}

		.drop_area {
			display: none;
			width: 160px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 120%;
			border-radius: 5px;
			margin-top: 10px;

			/* 【変更できません】領域
			----------------------------------*/
			&.disable {
				opacity: 0.5;
			}

			/* 表示
			----------------------------------*/
			&.show {
				display: block;
				background-color: #D7D8E0;

				/* マウスオーバー
				----------------------------------*/
				&.mouse_over {
					/*background-color: #F82 !important;*/
					box-shadow: 0px 0px 10px 5px #FFF;
				}
			}

		}
	}


}


/* ◆受注前情報
----------------------------------*/
.part_edit_before_order {
}

/* ◆受注情報
----------------------------------*/
.part_edit_order {
}

/* ◆支払原価詳細
----------------------------------*/
.part_edit_cost {
}



/* ▼【Input】画面の一部分
****************************************************************************************************/

/* ◆【受注前】基本情報
----------------------------------*/
.input_before_order_base {
	/* 予算
	----------------------------------*/
	.budget {
		max-width: 142px;
	}
	/* 予算自動
	----------------------------------*/
	.budget_auto_flag {
		margin-left: 20px;
	}

	/* 余白
	----------------------------------*/
	>div:nth-child(n + 2) {
		margin-top: 20px;
	}
}

/* ◆【受注】基本情報
----------------------------------*/
.input_order_base {
	/* 予算
	----------------------------------*/
	.budget {
		max-width: 142px;
	}
	/* 予算自動
	----------------------------------*/
	.budget_auto_flag {
		margin-left: 20px;
	}

	/* 余白
	----------------------------------*/
	>div:nth-child(n + 2) {
		margin-top: 20px;
	}
}

/* ◆経費情報
----------------------------------*/
.input_expenses {

	/* 「労務費」パネル
	----------------------------------*/
	.panel[data-type="labor_cost"] {
		.panel-body {
			.table {
				td:nth-child(1){ width: 100px; }
				td:nth-child(2){  }
				td:nth-child(3){ width: 30px; }
				td:nth-child(4){  }
				td:nth-child(5){ width: 30px; }
				td:nth-child(6){  }
			}
		}
	}

	/* 「仕入・外注費」パネル
	----------------------------------*/
	.panel[data-type="purchase_cost"] {
		.panel-body {
			position: relative;

			.table {
				td:nth-child(1){ min-width: 150px; }
				td:nth-child(2){ min-width: 90px; }
				td:nth-child(3){ min-width: 150px; }
				td:nth-child(4){ min-width: 140px; }
				td:nth-child(5){ width: 100px; }
			}

			/* 新規使用不可用
			/*-----------------------------------*/
			.gray_out {
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: black;
				filter:alpha(opacity=50);
				-moz-opacity: 0.5;
				opacity: 0.5;

				z-index: 9000;

				.d_table {
					width: 100%;
					height: 100%;

					.d_cell {
						font-size: 30px;
						color: #EEE;
						text-align: center;
						vertical-align: middle;
					}
				}
			}

			/* 追加行
			----------------------------------*/
			.add_row {
				td {
					background-color: #DEF;
				}
			}
		}
	}
}


/* ◆完工情報
----------------------------------*/
.input_complete {

	/* テーブル
	------------------------------------*/
	.table {
		.add_row {
			.btn {
				display: none;
			}
			> td {
				background-color: #DEF;
			}
		}
	}
}



/* ◆【支払原価詳細】基本情報
----------------------------------*/
.input_cost_base {

	/* 見積領域
	----------------------------------*/
	.estimate {
		display: table;
		width: 100%;
		margin-top: 20px;

		> div {
			display: table-cell;
			vertical-align: middle;
			text-align: right;

			&:first-child {
				width: 60%;
			}

			.form-control {
				display: inline-block;
			}
		}
	}

}

/* ◆【支払原価詳細】明細情報
----------------------------------*/
.input_cost_detail {

	/* 明細テーブル
	------------------------------------*/
	.detail_table {

		td:nth-child(1){ min-width: 150px; }
		td:nth-child(2){ min-width: 140px; }
		td:nth-child(3){ min-width: 80px; }
		td:nth-child(4){ min-width: 120px;}
		td:nth-child(5){ }

		.add_row {
			.btn {
				display: none;
			}
			> td {
				background-color: #DEF;
			}
		}
	}

	/* 計
	------------------------------------*/
	.total_area {
		border-bottom: 1px solid #CCC;
	}

	/* 値引き
	------------------------------------*/
	.discount_area {
		margin-top: 30px;
		border-bottom: 1px solid #CCC;

		.checkbox-inline {
			margin: 0 10px;
		}
	}
}





/* ◆【会社編集】代金貰い受け
----------------------------------*/
.input_company {

	/* ドラッグ時のグレイアウト
	----------------------------------*/
	.drag_gray_out {
		display: none;
		background-color: rgba(0,0,0,0.7);
		position: absolute;

		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		z-index: 1000;
	}


	/* 入力領域
	----------------------------------*/
	.form-group {
		margin-bottom: 0;
	}
	.input_area {
		.col_value {
			width: 100%;
		}
	}

	/* 代金貰い受け（全体）
	-----------------------------------*/
	.area_price_receive {
		margin-top: 30px;

		/* 代金貰い受け（１つ）
		-----------------------------------*/
		.single_price_receive {
			background-color: #DEE;
			border-radius: 4px;
			padding: 15px;


			/* ドロップ対象領域
			----------------------------------*/
			&.ui-droppable:not(.ui-droppable-disabled) {
				position: relative;
				z-index: 1010;
			}


			/* マウスオーバー
			----------------------------------*/
			&.mouse_over {
				box-shadow: 0px 0px 20px 10px #FFF;
			}

			.head{
				border-bottom: 1px solid #BBB;
				height: 40px;

				.title {
					padding-left: 5px;
					font-size: 120%;
					line-height: 40px;
					float: left;
				}
				.btn_delete {
					float: right;
				}
			}

			.content {
				margin-top: 10px;

				/* 営業区分選択（全体）
				--------------------*/
				.zone_business {
					background-color: #BBB;
					border-radius: 4px;
					min-height: 156px;
					padding: 10px;

					/* 営業区分選択（１つ）
					-----------------------------*/
					.single_business {
						display: inline-block;
						background-color: #FFF;
						border-radius: 4px;
						padding: 5px;
						margin: 5px;
						cursor: pointer;
					}
					.single_business + .single_business{
						margin-top: 5px;
					}
				}

				/* 代金貰い受け編集
				-----------------------------------*/
				.zone_price_receive {
					margin-top: 20px;

					.area_rate {
						display: table;
						height: 20px;
						width: 100%;
						margin-top: 10px;
						margin-bottom: 10px;

						.rate_label {
							display: table-cell;
							width: 40px;
							vertical-align: middle;
						}
						.rate_monitor {
							display: table-cell;
							vertical-align: middle;

							.rate_slider {
								background: #527FFF;
								.ui-slider-range {
									background: #EF2929;
								}
							}
						}
					}

				}

			}
		}

		/* 代金貰い受け追加ボタン
		-----------------------------------*/
		.add_single_price_receive {
			.btn_add{
				background-color: #BCF;
				border-radius: 4px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;

				&:hover{
					background-color: #ABF;
				}
			}
		}




		.single_price_receive + .single_price_receive,
		.single_price_receive + .add_single_price_receive {
			margin-top: 20px;
		}

		/* デフォルト代金貰い受け
		----------------------------*/
		.single_price_receive:first-child {
			.btn_delete {
				display: none;
			}
		}
	}
}



/* カレンダー画面
----------------------------*/
#calendar_order_screen {

	.main_area {
		overflow: hidden;
	}

	/* 日曜日 */
	.fc-sun {
		color: red;
	}
	/* 土曜日 */
	.fc-sat {
		color: blue;
	}

	.fc-day-grid-event {
		.fc-content {
			cursor: pointer;
		}
	}

}