@charset "utf-8";

/* 

このファイルには、全ページに共通して使用するCSSを書き込みます

*/

/*-- 共通部分 --*/
#header{
	display:block;
	background: linear-gradient(to bottom,  #ffffff 1%,#f6f6f6 100%);
}
#head_navi li{display:inline-block;}
#head_navi li a{
	display:inline-block;
	line-height:100%;
}
#head_line{display:none;}
#mainNavi{
	display:block;
	border-top:#2986B9 solid 1px;
	border-bottom:#175378 solid 1px;
	background: linear-gradient(to bottom,  #23719b 0%,#206790 100%);
}
#page_title{
	display:block;
	border-top:#FFF solid 1px;
	border-bottom:#B4B4B4 solid 1px;
	background: linear-gradient(to bottom,  #f5f5f5 0%,#f0f0f0 100%);
}
#navi_shadow{
	display:block;
	height:9px;
	border-top:#FFF solid 1px;
	margin-bottom:15px;
	background: linear-gradient(to bottom,  #f5f5f5 0%,#ffffff 100%);
}
#footer{
	display:block;
	text-align:center;
	padding:13px 0 18px 0;
	color:#777;
	font-size:12px;
	border-top:#CCC solid 1px;
	background:url(../images/white_border.gif) repeat-x #F3F3F3 left top;
	margin-top:50px;
}
#footer #footNav{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	font-size: 12px;
	margin-bottom: 5px;
	color: #777;
}
#footer #footNav a{
	color: inherit;
	text-decoration: underline;
	padding-left: 12px;
	background: url(../images/icon_arrow03.gif) no-repeat left center;
}
#footer .appBadge{
  display: inline-block;
  margin-left: auto;margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
#footer .appBadge::after{
  content: "";
  display: block;
  clear: both;
}
#footer .appBadge li{
  display: block;
  float: left;
}
#footer .appBadge li img{
  max-width: 100%;
}
#footer .appBadge li:nth-child(1){
  width: 110px;
  margin-right: 10px;
}
#footer .appBadge li:nth-child(2){
  width: 128px;
}



/*-- 以下PC --*/
@media screen and (min-width: 769px){
  #header{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
		align-items: center;
		padding: 10px 20px;
	}
  #header #logo{
    display:inline-block;
		margin-right: auto;
		order: 1;
  }
  #head_navi{
		order: 3;
		margin-left: 1em;
  }
  #head_navi ul{
    display:flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-content: center;
    font-size:12px;
  }
  #head_navi li a:hover{
		text-decoration:underline;
	}
  #head_navi li.help{
		display: block;
		line-height: 1;
		margin-right: .8em;
  }
  #head_navi li.help a{
		margin-top: 4px;
    padding:6px 10px 5px 17px;
    background:url(../images/pc_head_navi.gif) no-repeat -13px -4px;
  }
  #head_navi li.home,
  #head_navi li.pay{
		display:none;
	}
  #head_navi li.user{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 1em;
    padding: 5px 20px;
		line-height: 1;
    background:#F4F4F4;
    border-radius:3px;
  }
  #head_navi li.user a{
		display: block;
		line-height: 1;
		vertical-align: middle;
		padding-top: 5px;
		padding-right: 0;
		padding-bottom: 5px;
	}
  #head_navi li.user a.name{
    background:url(../images/pc_head_navi.gif) no-repeat -14px -125px;
    max-width: 15em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
		padding-left: 17px;
	}
  #head_navi li.user a.logout{
    background:url(../images/pc_head_navi.gif) no-repeat -12px -159px;
		padding-left: 20px;
	}
  #mainNavi{
		padding-left:20px;
	}
  #mainNavi ul li{
    display:inline-block;
    float:left;
    border-right:#2986B9 solid 1px;
  }
  #mainNavi ul li.schedule{
		border-left:#2986B9 solid 1px;
	}
  #mainNavi ul li span{
		display:none;
	}
  #page_title{
		padding:0 0 0 20px;
	}
  #page_title h1{
    display:inline-block;
    float:left;
    font-size:18px;
    padding:10px 0 10px 25px;
  }
  #footer .appBadge li a:hover{
    opacity: 0.65;
  }
	#footer #footNav a:hover{
		text-decoration: none;
	}
}


/*-- 以下タブレット --*/
@media screen and (max-width: 768px){
  #header #logo{
    display:block;
    padding:5px 0;
    text-align:center;
    border-bottom:#CDCDCD solid 1px;
  }
  #logo a{
    display:block;
    width:59px;
    height:18px;
    background:url(../images/sp_logo.png) no-repeat left center / 58px 18px;
    margin:0 auto;
    text-align:center;
    padding:9px 0 7px 0;
  }
  #logo a img{
		display:none;
	}
  #head_navi{
    display:block;
    border-top:#FFF solid 1px;
    font-size:12px;
  }
  #head_navi li a{
    padding:13px 0;
    width:43px;
    height:21px;
  }
  #head_navi li a span{
		display:none;
	}
  #head_navi li.home{
    display:inline-block;
    float:left;
  }
  #head_navi li.home a{
    background:url(../images/sp_head_navi01.png) no-repeat center 14px / 18px 18px;
  }
  #head_navi li.help{
    display:inline-block;
    float:left;
  }
  #head_navi li.help a{
    background:url(../images/sp_head_navi02.png) no-repeat center 13px / 14px 20px;
  }
  #head_navi li.pay{
		display:none;
	}
  #head_navi li.user{
    display:inline-block;
    float:right;
  }
  #head_navi li.user a.name{
    width:auto;
    float:left;
    padding-top:18px;
    height:16px;
    padding-right:0px;	
    color:#666;
    max-width:15em;
    /* 末尾を「…」に省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
  }
  #head_navi li.user a.name span{
		display:inline-block;
	}
  #head_navi li.user a.logout{
    float:left;
    background:url(../images/sp_head_navi04.png) no-repeat center 12px / 20px 25px;
  }
  #mainNavi ul li{
    display:inline-block;
    width:50%;
    float:left;
    border-top:none;
  }
  #mainNavi ul li a{
    display:block;
    padding:10px 0 10px 38px;
    text-shadow:1px 1px 0 #175378;
    font-size:16px;
    color:#FFF;
  }
  #mainNavi ul li:nth-child(even){
		background:url(../images/sp_gray_line.gif) repeat-y left top;
	}
  #mainNavi ul li.schedule,
  #mainNavi ul li.bbs,
  #mainNavi ul li.expenses,
  #mainNavi ul li.timecard{
    border-bottom:#2986B9 solid 1px;
  }
  #mainNavi ul li a{
    background:url(../images/sp_mainnavi01.png) no-repeat 10px center / 22px 20px;
  }
  #mainNavi ul li.schedule a{
    background-image:url(../images/sp_mainnavi01.png);
  }
  #mainNavi ul li.schedule a.now{
    background-image:url(../images/sp_mainnavi01_on.png);
  }
  #mainNavi ul li.bbs a{
    background-image:url(../images/sp_mainnavi02.png);
  }
  #mainNavi ul li.bbs a.now{
    background-image:url(../images/sp_mainnavi02_on.png);
  }
  #mainNavi ul li.timecard a{
    background-image:url(../images/sp_mainnavi03.png);
  }
  #mainNavi ul li.timecard a.now{
    background-image:url(../images/sp_mainnavi03_on.png);
  }
  #mainNavi ul li.setting a{
    background-image:url(../images/sp_mainnavi04.png);
  }
  #mainNavi ul li.setting a.now{
    background-image:url(../images/sp_mainnavi04_on.png);
  }
  #mainNavi ul li.expenses a{
    background-image:url(../images/sp_mainnavi05.png);
  }
  #mainNavi ul li.expenses a.now{
    background-image:url(../images/sp_mainnavi05_on.png);
  }
  #mainNavi ul li.filebox a{
    background-image:url(../images/sp_mainnavi06.png);
  }
  #mainNavi ul li.filebox a.now{
    background-image:url(../images/sp_mainnavi06_on.png);
  }
  #mainNavi ul li img{
		display:none;
	}
  #page_title{
		padding:0;
	}
  #page_title h1{
    display:inline-block;
    font-size:18px;
    padding:10px 0 10px 30px;
  }

}

/*-- 以下スマートフォン --*/
@media screen and (min-width: 0px) and (max-width: 640px){
}