@charset "utf-8";

/* 00 ----- import */
@import url(https://fonts.googleapis.com/css?family=Roboto);

/* ----- dom ----- */
html {
	color: #222;
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	word-break: break-all;}
body {
	font-family: Roboto,'Lucida Grande','Helvetica Neue','Hiragino Kaku Gothic ProN',"メイリオ",meiryo,sans-serif;
  line-height: 2.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
h1 {
 	padding: 10px;
	color: #fff;
	font-size: 160%!important;
	font-weight: bold;
 	background: #2970a2;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;}
.areamain h1 {margin: 0 0 10px 0;}
h2 {
	font-size: 140%!important;
 	padding: 10px 0;
 	border-bottom: 5px solid #2970a2;}
.infobox h2 {padding: 0 0 10px 0;margin-top:10px;}
h3 {
	font-size: 120%!important;
	font-weight: bold;
}
ul,ol {margin: 0;padding: 0 0 0 24px;}
a {color: #2970a2;}
a:hover,a:active {color: #2970a2;}

/* size */
.fullsize {width: 100%;}
.mainsize {width: 1000px;margin: 0 auto;}
.alertbox {width: 100%;margin: 0 auto;padding: 10px;color: #f00;font-size: 120%;border: 2px solid #f00; line-height: 1.4;}
.column2 {width: 49%;}
.column3 {width: 32.5%;}
.column4 {width: 24%;margin: 0;padding: 0;}
.column4.topics {padding: 0 0.5%;position: relative;}
.areahead {
	width: 100%;
	height: 120px;
	background: url("../images/parts/bg-top.jpg") 0 0 no-repeat;}
.areaside {width: 250px;font-size: 90%;float: left;}
.areaside h2 {font-size: 120%;}
.areaside h2 a {color: #fff;text-decoration: underline;}
.areamain {
	width: 740px;
	min-height: 500px;
	float: right;}
.areafoot {
	padding: 20px 0;
	color: #fff;
	background: #222;}
.areafoot h4,.areafoot p,.areafoot li,.areafoot a {
	font-size: 90%;
	line-height: 22px;}
.areafoot a {color: #fff;}
.w20 {width: 20px;}
.w50 {width: 50px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w120 {width: 120px;}
.w150 {width: 150px;}
.w180 {width: 180px;}
.w200 {width: 200px;}
.w250 {width: 250px;}
.w300 {width: 300px;}
.w350 {width: 350px;}
.w400 {width: 400px;}
.w420 {width: 420px;}
.w450 {width: 450px;}
.w480 {width: 480px;}
.w500 {width: 500px;}
.w550 {width: 550px;}
.w600 {width: 600px;}
.w650 {width: 650px;}
.w700 {width: 700px;}
.w720 {width: 720px;}
.w740 {width: 740px;}
.w3per {width: 3%;}
.w5per {width: 5%;}
.w10per {width: 10%;}
.w13per {width: 13%;}
.w15per {width: 15%;}
.w20per {width: 20%;}
.w22per {width: 22%;}
.w25per {width: 25%;}
.w30per {width: 30%;}
.w35per {width: 35%;}
.w40per {width: 40%;}
.w45per {width: 45%;}
.w50per {width: 50%;}
.w60per {width: 60%;}
.w65per {width: 65%;}
.w70per {width: 70%;}
.w80per {width: 80%;}
.w90per {width: 90%;}
.w95per {width: 95%;}
.w97per {width: 97%;}
.w100per {width: 100%;}
.selectTime {display:inline-block; width: 5em;}

/* ----- login ----- */
.box-login {
	border: 1px solid #ddd;
	background: #eee;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;}
.area-google,
.area-form {
	padding: 20px;}

/* ----- header ----- */
.headsection {
	background: #2970a2;
	color: #fff;
	text-align: center;}
.headsection a {color: #fff!important;}
.branding {
	width: 50px;
	padding: 10px;
	display: block;
	float: left;}
.branding img {width: 50px;}
.box-header {border-bottom: 3px solid #2970a2;}
.dropdown-toggle {border-right: 1px solid #2970a2;}
.dropdown-toggle:hover {background: #e1f3ff!important;;}
.dropdown .dropdown-menu a {
	width: 220px;
	padding: 16px 10px!important;}
.dropdown-menu a:hover {
	border-right: 5px solid #2970a2;
	background: #fff!important;}
.open .dropdown-toggle {
	color: #fff!important;
  background: #2970a2!important;}

.tableset {
	width: 100%;
	border: 1px solid #ddd;}
.tableset th {text-align: center; padding: 0 1%;}
.tableset th {background: #f3f3f3;border: 1px solid #ddd}
/* .tableset th:nth-child(odd) {background: #ccf2ea;} */
/* .tableset th:nth-child(even) {background: #effffc;} */
.tableset td {padding: 1%;line-height: 22px;border: 1px solid #ddd;}
.tableset ul {margin: 0 0 0 5px;}

.tableset .manager {
	background-color: #edffea;
}

.bootstrap-datetimepicker-widget th {background: none !important;}

.alertmessage {
	border: solid 2px #f00;
	border-radius: 10px;
	color: #f00;
	/* line-height: 1.8; */
	padding: 10px;
	margin-bottom: 20px;
}
.alertmessage span {
	font-weight: bold;
}
.admin-mode {
	background-color: #cd0000;
}
.timecard {
	display:block;
	overflow-x:scroll;
	border: none;
}
.timecard th {
	line-height: 1.5;
	padding: 5px;
	border: 1px solid #ddd;
}
.timecard th,.timecard td { 
	white-space: nowrap;
	text-align: center;
	min-width: 5em;
	padding:2px 10px;
}
.timecard td { 
	line-height: 1.4;
}
.timecard td.hol { 
	background-color: #fff4f4;
}
.timecard td.nightshift + td.worktime { 
	color: #4d2ff9;
	background-color: rgba(156, 139, 255, 0.05);
	font-weight: bold;
	border-top: solid 2px rgba(77, 47, 249, 0.3);
	border-bottom: solid 2px rgba(77, 47, 249, 0.3);
}
.timecard td small { 
	color: #aaa;
}
.timecard td small.sts1,
.timecard td small.sts2 { 
	color: #f00;
}
.timecard td small.sts4 { 
	color: #218300;
}
.timecard td .notentered { 
	color: #ff0000;
	font-weight: bold;
}
.timecard .paid-holiday {
	font-size: 0.8em;
}
.timecard td.plus {
	border-top: none;
	border-bottom: none;
	min-width: 2em;
}
.btn-correct {
	font-weight: bold;
	font-size: 0.9em;
}
.overtime .night_work,
.overtime .before_work
{
	display: none;
}

.cursollist {
	margin: 0;
	padding: 0;}
.cursollist li {list-style: none;}
.cursollist li a {
	width: 100%;
	padding: 8px 20px 8px 12px;
	border-bottom: 1px solid #2970a2;
	display: block;
	clear:both;
	position: relative;}
.cursollist li a:after {
	content: "";
	top:40%;
	right: 10px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	position: absolute;}
.gameslist li button {
	width: 100%;
	padding: 8px 20px 8px 12px;
	border: none;
	border-bottom: 1px solid #ddd;
	background-color: #fff; }
.gameslist li div {
	width: 100%;
	margin:0;
	padding: 0;
	border: none;
	background-color: #fff;
	display: block;
	clear:both;
	position: relative;}
.gameslist li div:after {
	content: "";
	top:40%;
	right: 10px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	position: absolute;}
ol.anpi li,
ul.anpi li {
	line-height: 1.4;
	margin-bottom: 1em;
}
.exp {
	font-size:80%;
	line-height: 1.4;
}

/* ----- infobox ----- */
.infobox {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #ddd;}
.infobox .slogan {
	padding: 10px;
	line-height: 1.4;
	font-weight: bold;
	font-size:150%;}

.infodl {}
.infodl dt {color: #2970a2;}
.infodl dd {padding: 0 0 10px 0;}

/* ----- ipa ----- */
.ipa {
	margin: 30px 0 0 30px;
}

/* ----- etc ----- */
.bb {border-bottom: 1px solid #ddd;}

/* ----- footsection ----- */
.footsection {}

/* ----- color ----- */
.tx-main {color: #2970a2;}
.bg-main {background: #2970a2;}
.bg-main-light {background: #94c6e8;}
.bg-lightgreen {background: #ccf2ea;}
.bg-level1 {background: #ffed47;}
.bg-level2 {background: #ff8947;}
.bg-level3 {background: #ff0000;color:#fff;font-weight:bold;}
.bg-level4 {background: #000;color:#fff;font-weight:bold;}
/* -----
Schattr
01=退社
02=在籍
03=外出
04=直帰
05=お休み
06=未登録
07=テレワーク
----- */
.Schattr-01 {color: #fff;background: #33475a;}
.Schattr-02 {color: #fff;background: #308e16;}
.Schattr-03 {color: #fff;background: #d15206;}
.Schattr-04 {color: #fff;background: #d11438;}
.Schattr-05 {color: #fff;background: #8d8d8d;}
.Schattr-06 {color: #222;background: #e8ddb6;}
.Schattr-07 {color: #fff;background: #1482ff;}
.Schattr-08 {color: #fff;background: #ff3314;}
.Schattr-09 {color: #fff;background: #6e14ff;}
.Schattr-01,.Schattr-02,.Schattr-03,.Schattr-04,.Schattr-05,.Schattr-06,.Schattr-07,.Schattr-08,.Schattr-09 {font-weight:bold;}

/* ----- typography ----- */
.txt-xl {font-size: 180%;}
.txt-ml {font-size: 140%;}
.txt-l {font-size: 120%;}
.txt-s {font-size: 85%;}
.txt-xs {font-size: 75%;}
.txt-xxs {font-size: 65%;}

.lhm {line-height: 24px;}

/* ----- spacing ----- */
.mblock {margin: 1.25rem 0;}
.pblock {padding: 1.25rem 0;}

.mreset {margin: 0;}
.mt5 {margin-top: 0.3125rem!important;}
.mt10 {margin-top: 0.625rem!important;}
.mt20 {margin-top: 1.25rem!important;}
.mt30 {margin-top: 1.875rem!important;}
.mb10 {margin-bottom: 0.625rem!important;}
.mb20 {margin-bottom: 1.25rem!important;}
.mb30 {margin-bottom: 1.875rem!important;}
.mr5 {margin-right: 0.3125rem!important;}

.preset {padding: 0;}
.pt10 {padding-top: 0.625rem!important;}
.pt20 {padding-top: 1.25rem!important;}
.pt30 {padding-top: 1.875rem!important;}
.pb10 {padding-bottom: 0.625rem!important;}
.pb20 {padding-bottom: 1.25rem!important;}
.pb30 {padding-bottom: 1.875rem!important;}

/* ----- position ----- */
.va-top {vertical-align: top;}
.va-mid {vertical-align: middle;}
.va-bot {vertical-align: bottom;}
.flo-l {float: left;}
.fix {margin: 0 auto;}
.flo-r {float: right;}
.p-rel {position: relative;}
.p-abs {position: absolute;}
.ta-l {text-align: left !important;}
.ta-c {text-align: center !important;}
.ta-r {text-align: right !important;}
.vis-v {visibility: visible;}
.vis-h {visibility: hidden;}

/* ----- clear ----- */
.txt-indent-clear {
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;}
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;}
.clearfix:after {
	clear: both;}
.clearfix {
	*zoom: 1;}

.createwkdate a {width: 50px;border: 0!important;}
.createwkdate table th,.createwkdate table td {border: 0!important;}

.pconly {display:block;}
.sponly {display:none;}
@media (max-width:768px) {
	img {max-width: 100%;height: auto;}
	.pconly{display: none;}
	.sponly {display:block;}
	.mainsize {width: 95%;margin:0 auto;}
	.areamain,.areaside,.column2,.column3,.column4,.headerlogo,.search,.footerlogo,.footernav {
		width: 100%;
		margin: 0 auto;}
	.infobox {margin: 10px 0;}
	.areamain {min-height: 0}
	.box-login .w70per {width: 100%;}
	.box-nav {
		width: 85%;
		margin: 0 auto;}
	.dropdown-toggle {
		margin: 0 0 5px 0;
		border-right: 0;
		background: #e1f3ff!important;}
	.dropdown-menu a {
		width: 100%;
		border-bottom: 1px solid #ddd;
		position: relative;}
	.dropdown-menu a:after {
		content: "";
		top:40%;
		right: 10px;
		width: 6px;
		height: 6px;
		border-top: 2px solid #222;
		border-right: 2px solid #222;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		position: absolute;}
	.dropdown-menu a:hover {border-right: 0;}
	.table{
		width: 92%;
		margin: 0 auto;}
	.infobox {
		padding: 0;
		border: none;}
	.infobox .slogan {
		padding: 10px;
		border: 1px solid #ddd;}
	#wb {
		margin-top: 10px;
	}
}
.wsnowrap,
.datepicker .day {
	white-space: nowrap;
}