@charset "utf-8";
/* ==================== UTILITY ==================== */

 /* ======================================== sp ======================================== */
.spMessage {
	display: none;
}

@media screen and (max-width: 768px) {
	.spMessage {
		display: inline-block;
	}
}

 /* ======================================== margin ======================================== */
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }

.ml5 { margin-left: 5px !important; }

 /* ======================================== font size ======================================== */

.fz12 { font-size: 12px; }
.fz14 { font-size: 14px; }
.fz16 { font-size: 16px; }
.fz18 { font-size: 18px; }
.fz24 { font-size: 24px; }
.fz30 { font-size: 30px; }

 /* ======================================== width ======================================= */

.width30 { width: 30px !important; }
.width40 { width: 40px !important; }
.width50 { width: 50px !important; }
.width60 { width: 60px !important; }
.width70 { width: 70px !important; }
.width80 { width: 80px !important; }
.width90 { width: 90px !important; }
.width100 { width: 100px !important; }
.width110 { width: 110px !important; }
.width120 { width: 120px !important; }
.width130 { width: 130px !important; }
.width140 { width: 140px !important; }
.width150 { width: 150px !important; }
.width160 { width: 160px !important; }

@media screen and (max-width: 480px) {
	.width30,.width40,.width50,.width60,.width70,
	.width80,.width90,.width100,.width110,.width120,
	.width130,.width140,.width150,.width160 {
		width: 100% !important;
	}
}


 /* ======================================== text ======================================== */

 .attention { color: #777; font-size: 12px; }
 .err { color: #F00; }

 .blue { color: #2195cb; }
 .green { color: #3cad6f; }
 .lightgreen { color: #8bc66e; }
 .bright { color: #f5c631; }
 .red { color: #e40101;}
 .purple { color: #674789; }
 .navy { color: #5a76a8; }
 .orange { color: #ff6800; }

.text-center { text-align: center;}
.text-left { text-align: left;}
.text-right { text-align: right;}


 /* ======================================== background ======================================== */
 .whiteRedBg { background: #fff0f0;}



 /* ======================================== Button ======================================== */


.btn {
	position: relative;
	display: block;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	padding: 6px 12px;
	font-size: 14px;
	color: #FFF;
	border-radius: 4px;
	text-decoration: none;
}

.btn.btnBack {
	background: #999;
}

.btn-primary {
	box-shadow: inset 0px 0px 0px #f79d3c, 0px 5px 0px 0px #f79d3c, 0px 5px 5px #999999;
}

.btn-primary:active {
	top: 5px;
	box-shadow: none;
}

.btn.btn-sm {
	/*margin-top: -5px;*/
	padding: 6px 12px;
	color: #000;
	font-size: 12px;
	border: 0;
	display: inline-block;
	border-radius: 4px;
	background: #FFF;
	border: 1px solid #CCC;
	box-sizing: border-box;
	box-shadow: inset 0px 0px 0px #999, 0px 3px 0px 0px #999, 0px 2px 2px #999;
}

.btn-sm:before ,
.btn-sm:after {
	font: normal normal normal 14px/1 FontAwesome;
}

.btn-sm.caret-r:before { content: "\f0da"; margin-right: 3px; }
.btn-sm.prev:before { content: "\f100"; margin-right: 3px; }
.btn-sm.next:after { content: "\f101"; margin-left: 3px; }
.btn-sm.add:before { content: "\f055"; margin-right: 3px; color: #E8450B; }
.btn-sm.print:before { content: "\f02f"; margin-right: 3px; }
.btn-sm.edit:before { content: "\f044"; margin-right: 3px; }
.btn-sm.delete:before { content: "\f00d"; margin-right: 3px; color: #E8450B; }
.btn-sm.cancel:before { content: "\f05e"; margin-right: 3px; color: #F5C631; }
.btn-sm.save:before { content: "\f0c7"; margin-right: 3px; color: #5a76a8; }
.btn-sm.draft:before { content: "\f040"; margin-right: 3px; color: #674789; }
.btn-sm.reserve:before { content: "\f274"; margin-right: 3px; color: #E8450B; }
.btn-sm.reserve:before { content: "\f274"; margin-right: 3px; color: #E8450B; }
.btn-sm.check:before { content: "\f00c"; margin-right: 3px; color: #3cad6f; }
.btn-sm.return:before { content: '\f104'; margin-right: 5px; }

.btn-sm:active {
	top: 5px;
	box-shadow: none;
}






.btn-xs {
	display: inline-block;
	padding: 5px;
	line-height: 1;
	color: #000;
	font-size: 12px;
	text-decoration: none;
	background: #CCC;
	border-radius: 5px;
	vertical-align: middle;
}

.btn-xs:after {
	display: inline-block;
	margin-left: 3px;
	font-family: FontAwesome;
	content: "\f0da";
	color: #E8450B;
}

.btn-lg.next:active {
    top: 4px;
    box-shadow: none;
}

.btn-lg.next:after {
    margin-left: 5px;
    font-family: 'FontAwesome';
    content: '\f105';
}


.select {
	float: right;
	margin-left: 10px;
}

.btn-sm.contactBookBtn {
	border-color: #3cad6f;
	background: #3cad6f;
	box-shadow: inset 0px 0px 0px #32674a, 0px 3px 0px 0px #32674a, 0px 2px 2px #32674a;
	color: #fff;
}

.btn-sm.contactBookBtn.checked {
	top: 3px;
	border-color: #b1e2c7;
	background: #e8fff2;
	box-shadow: none;
	color: #3cad6f;
	font-weight: bold;
}

.btn-sm.contactBookBtn.btn-sm.checked:active {
	top: 5px;
}

.btn-sm.contactBookBtn.check:before { color: #fff; }
.btn-sm.contactBookBtn.check.checked:before { color: #3cad6f; }


 /* ======================================== link ======================================== */
.linkBtn {
	display: inline-block;
	margin: 10px 0;
	padding: 5px 10px;
	background: #ef680a;
	border-radius: 3px;
	color: #fff;
}

.linkBtn:before {
	margin-right: 5px;
	font-family: 'FontAwesome';
	content: '\f105';
}

a.linkBtn {
	color: #fff;
	text-decoration: none;
}

@media screen and (min-width: 1025px) {
	.linkBtn:hover {
		opacity: 0.8;
	}
}

 /* ======================================== label ======================================== */

.label {
	background-color: #999;
	color: #FFF;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	text-shadow: none;
	border-radius: 3px;
}

.label.open { background: #ef8237;}
.label.draft { background: #674789;}
.label.uncreated { background: #FFF;
	               color: #ef8237;
	               border-style: solid;
	               border-width:thin;}


 .label.blue { background: #2195cb; }
 .label.green { background: #3cad6f; }
 .label.lightgreen { background: #8bc66e; }
 .label.bright { background: #f5c631; }
 .label.red { background: #e8450b; }
 .label.purple { background: #674789; }
 .label.navy { background: #5a76a8; }


.label.read {
	display: inline-block;
	/*float: right;*/
	padding: 3px 8px;
	border: 1px solid #b1e2c7;
	background: #e8fff2;
	color: #3cad6f;
	font-weight: bold;
}

.label.unread {
	display: inline-block;
	/*float: right;*/
	background: #e01414;
	color: #fff;
	font-weight: bold;
}

.hissu {
	margin: 0 0 0 3px;
	padding: 3px 5px;
	color: #FFF;
	text-align: center;
	font-size: 11px;
	line-height: 1;
	display: inline-block;
	border-radius: 2px;
	background: #F00;
}


 /* ======================================== 色 見本 ======================================== */

.sortable-color,
.reserve-color,
.cansel-color {
	position: relative;
	display: inline-block;
	margin-right: 10px;
}

.sortable-color:before {
	display: inline-block;
	position: relative;
	content: '';
	top: 3px;
	width: 1em;
	height: 1em;
	margin-right: 5px;
	background: #ffddc6;
}

.reserve-color:before {
	display: inline-block;
	position: relative;
	content: '';
	top: 3px;
	width: 1em;
	height: 1em;
	margin-right: 5px;
	background: #ffe695;
}

.cansel-color:before {
	display: inline-block;
	position: relative;
	content: '';
	top: 3px;
	width: 1em;
	height: 1em;
	margin-right: 5px;
	background: #d9dff1;
}


 /* ======================================== list ======================================== */

.inlineList li {
    display: inline-block;
}

.inlineList li {
    color: #ccc;
}

.inlineList li.check {
    color: #000;
}

@media screen and (max-width: 480px) {
	.inlineList {
		border-top: none;
	}
}

 /* ======================================== iBox ======================================== */

.ibox {
	clear: both;
	margin-bottom: 25px;
	padding: 0;
}

.ibox-title {
	margin-bottom: 10px;
	padding: 10px 8px 10px 15px;
	width: auto;
	/*min-height: 48px;*/
	line-height: 1.5;
	background: #3CAD6F;
	box-sizing: border-box;
	border-radius: 5px;
}

.ibox-title:after {
	content: "";
	clear: both;
	display: block;
}

.ibox-title.sm {
	/*margin: 0;*/
	padding: 0;
	background: transparent;
}

.ibox-title .btn {
	margin-bottom: 0;
}

.ibox h3 {
	line-height: 1.5;
	display: inline-block;
	float: left;
	color: #FFF;
	font-size: 19px;
}

.ibox-title h5 {
	display: inline-block;
	font-size: 16px;
	margin: 0;
	padding: 0;
	float: left;
}

.ibox-tools {
	display: inline-block;
	float: right;
	margin-top: 0;
	position: relative;
	padding: 0;
}


 /* ======================================== table ======================================== */

.tableTitle {
    position: relative;
    background: #e5e5e5;
}


 /* ======================================== group ======================================== */

.group {
	margin-bottom: 10px;
	width: auto;
	clear: both;
}

.group:after {
	content: "";
	clear: both;
	display: block;
}
 /* ======================================== width ======================================= */

.minW100 {
	min-width: 100px;
}

.minW120 {
	min-width: 120px;
}



 /* ======================================== Form ======================================== */

.formGroup {
	margin-bottom: 10px;
	padding: 0 10px;
	width: auto;
	clear: both;
}

.formGroup:after {
	content: "";
	clear: both;
	display: block;
}

.form-control {
	margin-bottom: 5px;
	background-color: #FFF;
	background-image: none;
	border: 1px solid #CCC;
	color: inherit;
	display: inline-block;
	padding: 3px 6px;
	width: 100%;
	box-sizing: border-box;
}

textarea.form-control {
	height: 100%;
}

.form-inline {
	padding: 3px 6px;
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
}

.form-auto {
	width: auto;
}

.formGroup label.col {
	padding: 3px 6px;
	line-height: 1.5;
	display: inline-block;
	max-width: 100%;
	font-weight: bold;
	font-size: 14px;
}

.formGroup label.col:before {
	margin-right: 3px;
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f111";
	color: #EF8237;
}

.col {
	float: left;
	position: relative;
	width: auto;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	box-sizing: border-box;
}

.formGroup .btn {
	margin-bottom: 5px;
}
.col-1 { width: 9%; }
.col-2 { width: 19%; }
.col-3 { width: 29%; }
.col-4 { width: 39%; }
.col-5 { width: 49%; }
.col-6 { width: 59%; }
.col-7 { width: 69%; }
.col-8 { width: 79%; }
.col-9 { width: 89%; }
.col-10 { width: 100%; }

.col-l { float: left; }
.col-r { float: right; }
/*
.formGroupR .col-1,
.formGroupR .col-2,
.formGroupR .col-3,
.formGroupR .col-4,
.formGroupR .col-5,
.formGroupR .col-6,
.formGroupR .col-7,
.formGroupR .col-8,
.formGroupR .col-9,
.formGroupR .col-10 { float:right; text-align: right; }

*/

.pull-right {
	float: right;
}

.col-fx {
	overflow: hidden;
}
.col-fx .form-control {
	margin-bottom: 0;
}



input::-webkit-input-placeholder {
  padding-top: 3px;
  line-height: 1.5;
  font-size: 13px;
}
input:-moz-placeholder {
  padding-top: 3px;
  line-height: 1.5;
  font-size: 13px;
}
input:-ms-input-placeholder {
  padding-top: 3px;
  line-height: 1.5;
  font-size: 13px;
}


input[name="birth3"] ,
input[name="birth2"] {
	width:2em;
}

input[name="postal1"] {
	width:3em;
}

input[name="birth1"] ,
input[name="postal2"] ,
input[name="tel1"] ,
input[name="tel2"] ,
input[name="tel3"] ,
input[name="fax1"] ,
input[name="fax2"] ,
input[name="fax3"] {
	width:4em;
}

input[name="company"] ,
input[name="post"] ,
input[name="realname"] ,
input[name="furigana"] ,
input[name="email"] ,
input[name="email2"]{
	width: 78%;
	box-sizing: border-box;
}

textarea[name="note"] {
	width: 100%;
}
/*
@media screen and (min-width: 769px) {
input[name="company"] ,
input[name="belong"] ,
input[name="post"] ,
input[name="realname"] ,
input[name="furigana"] ,
input[name="email"] ,
input[name="email2"]{
	width: 300px;
}
}
*/




@media screen and (max-width: 480px) {
.col-1 ,
.col-2 ,
.col-3 ,
.col-4 ,
.col-5 ,
.col-6 ,
.col-7 ,
.col-8 ,
.col-9,
.col-10 {
	width: 100%;
	margin-bottom: 10px;
}

.col-l ,
.col-r {
	float: none;
}
}






/* ============ calendar ========== */





/* ============ date select ========== */

.hasDatepicker {
	width: 8rem;
	background: #FFF url(images/calendar.gif) no-repeat 97% 50%;
}

.date .btn-sm {
	margin-top: 3px;
	margin-bottom: 3px;
}








/* ============ mini info ========== */

.mini-info {
	margin-bottom: 10px;
	float: left;
}

.mini-info dl {
	display: inline-block;
}

.mini-info dt ,
.mini-info dd {
	display: inline-block;
	margin-bottom: 5px;
	vertical-align: middle;
}

.mini-info dt {
	position: relative;
	display: inline-block;
	width: auto;
	padding: 2px 5px;
	font-size: 14px;
	color: #FFF;
	background: #4AA9D3;
	border-radius: 5px;
}

.mini-info dd {
	margin-right: 10px;
	font-weight: bold;
}

.absence {
	height: 3em;
	line-height: 3em;
}

.absence + dd {
	line-height: 1.3;
}
.absence + dd span {
	font-weight: normal;
	font-size: 14px;
}






 /* ======================================== tab ======================================== */

.nav-tabs {
	position: relative;
	top: 1px;
	width: auto;
	border-color: #C5D0DC;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}


.nav-tabs:after {
	content: "";
	clear: both;
	display: block;
}

.nav-tabs > li {
	position: relative;
	display: block;
	float: left;
	font-size: 13px;
	margin-bottom: -1px;
}

.nav-tabs > li > a {
	padding: 7px 12px 8px;
	text-decoration: none;
	border: 1px solid transparent;
	display: block;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus {
	border-radius: 0!important;
	border-color: #c5d0dc;
	background-color: #F9F9F9;
	color: #999;
	margin-right: -1px;
	position: relative;
}

.nav-tabs > li.active > a ,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: #576373;
	border-color: #c5d0dc;
	border-top: 2px solid #4c8fbd;
	border-bottom-color: transparent;
	background-color: #FFF;
	z-index: 1;
	margin-top: -1px;
	box-shadow: 0 -2px 3px 0 rgba(0,0,0,.15);
}

.tab-panel {
	clear: both;
	border: 1px solid #c5d0dc;
	padding: 16px 12px;
	position: relative;
	box-sizing: border-box;
}




 /* ======================================== eBox ======================================== */

.ebox {
	position: relative;
	clear: both;
	margin-bottom: 25px;
	padding: 15px;

	border: 1px solid #CCC;
	box-sizing: border-box;
}

.ebox.col-l ,
.ebox.col-r {
	clear: none;

}

.ebox:after {
	content: "";
	clear: both;
	display: block;
}

.ebox h3 {
	margin: -15px -15px 15px;
	padding: 10px;
	line-height: 1.5;
	background: #DDD;
}

.ebox-content {
	margin-bottom: 20px;
}

.ebox-content table {
	width: 100%;
}

.h-table th ,
.h-table td {
	text-align: center;
}

.ebox-content th ,
.ebox-content td {
	padding: 10px;
	border: 1px solid #CCC;
	line-height: 1.5;
}

.ebox-content th {
	background: #EEE;
	width: 20%;
	max-width: 100px;
}


.file-image {
	padding: 10px 0 0;
	text-align: center;
}

.file-image img {
	width: 100%;
	max-width: 200px;
}


@media screen and (min-width: 481px) {
.ebox-td-2.ebox-td-2 {
	border-right: none;
	width: 1%;
	white-space: nowrap;
}

.ebox-td-3.ebox-td-3 {
	border-left: none;
}
}

@media screen and (max-width: 480px) {

.ebox-content th ,
.ebox-content td {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border-bottom: 0;
}

.ebox-content table {
	border-bottom: 1px solid #CCC;
}

.ebox-td-2.ebox-td-2 {
	border-bottom: none;
	padding-bottom: 0;
}

.ebox-td-3.ebox-td-3 {
	border-top: none;
}

}


 /* ======================================== comment ======================================== */

.comment-outer {
	float: left;
	width: 56%;
	margin-right: 2%;
	box-sizing: border-box;
}

.comment-box {
	margin-bottom: 10px;
	padding: 10px;
	border: 3px solid #cacaca;
}

.comment-title {
	margin-bottom: 7px;
	padding-bottom: 5px;
	border-bottom: 1px dashed #ccc;
	font-size: 1.175em;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.comment-outer {
		float: none;
		width: 100%;
	}
}


 /* ======================================== desc ======================================== */

.desc-outer {
	overflow: hidden;
}

.desc-box {
	margin-bottom: 10px;
}

.desc-box:last-child {
	margin-bottom: 0;
}

.desc-box dl {
	font-size: 0.875em;
}

.desc-box dl:after {
	display: block;
	clear: both;
	content: '';
}

.desc-box dt {
	width: 9em;
	font-weight: bold;
	float: left;
}

.desc-box dd {
	overflow: hidden;
}

.desc-title {
	font-size: 1em;
	font-weight: bold;
}

.desc-subtitle {
	font-size: 0.875em;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.desc-outer {
		padding: 0 10px;
	}
	.desc-box br {
		display: none;
	}
}


 /* ======================================== error ======================================== */
.error-box {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #e40101;
	background: #ffdede;
	color: #e40101;
	font-size: 0.875em;
	clear: both;
}

.error-box a {
	color: #e40101;
}

.error-title {
	color: #e40101;
	font-size: 1.175em;
	font-weight: bold;
}


 /* ======================================== warning ======================================== */
.warning-box {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #ef8237;
	border-radius: 5px;
	background: #FFF5EE;
	color: #ef8237;
	font-size: 0.875em;
	clear: both;
}

.warning-box a {
	color: #ef8237;
}

.warning-title {
	/*color: #ff6800;*/
	font-size: 1.175em;
	font-weight: bold;
	text-align: center;
}

 /* ======================================== success ======================================== */
.success-box {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #3CAD6F;
	border-radius: 5px;
	background: #f3fdf8;
	color: #3CAD6F;
	font-size: 0.875em;
	clear: both;
}

.success-box a {
	color: #3CAD6F;
}

.success-title {
	color: #3CAD6F;
	font-size: 1.175em;
	font-weight: bold;
	text-align: center;
}