@charset "utf-8";

/*--------------------------------------------------
	リンクカラー
--------------------------------------------------*/
a:link { color: #183bba; text-decoration: none; }
a:visited { color: #183bba; text-decoration: none; }
a:hover { color: #183bba; text-decoration: none; }

/*--------------------------------------------------
	フォントスタイル
--------------------------------------------------*/
.bold {	font-weight: bold;}
.txtS { font-size: 85%;}

::selection {background: #fe4545;color:#fff;}
::-moz-selection {background: #fe4545;color:#fff;}

/*--------------------------------------------------
	マージン
--------------------------------------------------*/
.mgt05 { margin-top: 5px;}
.mgt10 { margin-top: 10px;}
.mgt15 { margin-top: 15px;}
.mgt20 { margin-top: 20px;}
.mgt25 { margin-top: 25px;}
.mgt30 { margin-top: 30px;}
.mgt35 { margin-top: 35px;}
.mgt40 { margin-top: 40px;}
.mgt45 { margin-top: 45px;}

/*--------------------------------------------------
	フロート
--------------------------------------------------*/
.fltR { float: right;}
.fltC { float: center;}
.fltL { float: left;}

/*--------------------------------------------------
	配置
--------------------------------------------------*/
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }

/*--------------------------------------------------
	float解除
--------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { display: inline-block; }
/*\*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/**/

.both { clear: both; }

/*--------------------------------------------------
	PC/SP非表示
--------------------------------------------------*/
.sp { display: none !important; }
@media screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: inherit !important; }
}

/*==================================================
	レイアウト
==================================================*/
html {
	font-size: 62.5%;
}
body {
	font-family: "メイリオ", "meiryo", Verdana, "Hiragino Kaku Gothic Pro W3", "MS UI Gothic";
	font-size: 1.0rem;
	line-height: 1.4;
	letter-spacing: 0px;
	word-break: break-all; 
	-webkit-text-size-adjust:none;
	color: #333;
	background: #edeef2;
}
img {
	max-width: 100%;
	height: auto;
}
#wrap {
	width: 100%;
	text-align: left;
}
#content {
	width: auto;
	max-width: 1050px;
	margin: 0 auto 60px;
}
.cont_inner {
	margin-right: 2%;
	margin-left: 2%;
}

/*==================================================
	#header
==================================================*/
#header {
	height: 60px;
	margin-bottom: 60px;
	background: #545b79;
	box-shadow: 0 3px 0 #cccccc; 
}
#header #nav ul {
	display: flex;
	justify-content: flex-end;
}
#header #nav ul li {
	width: 160px;
}
#header #nav ul li a {
	display: block;
	width: 100%;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 1.6rem;
	color: #333;
	font-weight: bold;
	background: #adb7e2;
	border-right: 1px #545b79 solid;
}
#header #nav ul li.logout a {
	color: #fff;
	background: #2c324c;
}
#header #nav ul li a:hover {
	background: #929ece;
	transition: 0.3s;
}
#header #nav ul li.logout a:hover {
	background: #000;
}
#header #nav ul li.off {
	display: none;
}

@media screen and (max-width: 480px) {
#header #nav ul li a {
	font-size: 1.4rem;
}
}

/*==================================================
	#content
==================================================*/
.mainMenu li {
	margin-bottom: 20px;
}
.mainMenu li:last-child {
	margin-bottom: 0;
}
.mainMenu li span {
	font-size: 1.4rem;
	font-weight: normal;
}
.intro {
	margin-bottom: 50px;
}
.intro h1 {
	text-align: center;
	font-size: 3.0rem;
	margin-bottom: 10px;
}
.intro .closing {
	text-align: center;
	font-size: 1.8rem;
}
.month ul {
	display: flex;
	justify-content: space-between;
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.month ul li {
	width: 100%;
	text-align: center;
}
.month ul li a {
	display: block;
	color: #333;
	margin: 0 5px;
	padding: 5px 0;
	background: #ccc;
	border: 1px #333 solid;
}
.month ul li.on a {
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
	pointer-events: none;
}
.month ul li a:hover {
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	pointer-events: none;
}
.calendar {
	width: 100%;
	margin-bottom: 40px;
	background: #fff;
}
.calendar ul.head {
	display: flex;
	text-align: center;
	font-size: 1.4rem;
	color: #fff;
	background: #333;
}
.calendar ul.head li,tr.week td {
	width: 14.28%;
	padding: 10px 0;
	border-right: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
}
.calendar ul.head li:last-child {
	border-right: none;
}
.calendar ul.head li.sun, tr.week td:first-child {
	background: #ff7878;
}
.calendar ul.head li.sat, tr.week td:last-child {
	background: #7e78ff;
}
.calendar ul.week{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	font-size: 1.4rem;
}
.calendar ul.week li, table.calendar tr td{
	width: 14.28%;
	min-height: 60px;
	padding: 5px 0 0;
	border-right: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
}
.calendar ul.week li:nth-child(7n) {
	border-right: none;
}
.calendar ul.week:last-child li a {
	border-bottom: none;
}
.calendar ul.week li.off {
	color: #ccc;
}
.calendar ul.week li .num {
	display: block;
	margin-bottom: 5px;
}
.calendar ul.week li select.shift, table.calendar tr td select.shift {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.4rem;
	padding: 10px 0 8px 10px;
	border: none;
}
.calendar ul.week li select.shift.day, table.calendar tr td select.shift.day {
	background: #fdffe8;
	border-bottom: 1px #ccc dotted;
}
.calendar ul.week li select.shift.night, table.calendar tr td select.shift.night {
	background: #e8f2ff;
}
table.calendar tr td select.shift.hol{
    background: #ff7878;
}

.btn a, button.btn {
	display: block;
	width: 70%;
	text-align: center;
	font-size: 2.0rem;
	color: #fff;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	background: #545b79;
	box-shadow: 3px 3px 0 #cccccc;
	border-radius: 5px;
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px; /* Firefox用 */ 
}
.btn a:hover {
	background: #2c324c;
	transition: 0.3s;
}

@media screen and (max-width: 480px) {
.intro h1 {
	font-size: 2.4rem;
}
.btn a {
	width: 100%;
}
}

/*==================================================
	footer
==================================================*/
footer {
}