@charset "UTF-8";

body{
	font-family: 游ゴシック, "Yo Gothic";
	width: 100%;
}

/******** ヘッダー ********/
header{
	padding: 10px 20px;
}
header .logo_area img{
	width: 100%;
}
.company_logo{
	/*max-height: 62.5px;*/
}
header .logo_area h1,
header .logo_area h2{
	width: 150px;
	margin-bottom: 0;
	font-size: 1rem;
}
header .logo_area h1{
	margin-right: 0;
	margin-left: auto;
}
header .logo_area{
	text-align: right;
}
header .login_name{
	margin-top: 5px;
	position: relative;
	cursor: pointer;
}
header .login_name .login_menu_version{
	cursor: default;
}
header .login_name .login_menu{
	position: absolute;
	top: 100%;
	right: 0px;
	border-radius: 8px;
	border: 1px solid #fdfdfd;
	overflow: hidden;
	z-index: 995;
	font-size: 0.85rem;
	width: 100%;
	text-align: left;
	max-width: 180px;
}
header .login_name .login_menu li,
header .login_name .login_menu li a{
	height: 100%;
	color: #f8f8f8;
	font-weight: bold;
}
header .login_name .login_menu li span,
header .login_name .login_menu li a{
	padding: 10px 5px;
	display: block;
}
header .login_name .login_menu li{
	border-bottom: 1px solid #fdfdfd;
}
header .login_name .login_menu li:last-child{
	border-bottom: none;
}
nav{
	width: 98%;
	margin: 0 auto;
	border-radius: 8px;
	position: relative;
	z-index: 990;
}
ul {
	padding-left: 0;
}
nav ul li{
	border-left: 1px solid #fdfdfd;
	font-size: 0.85rem;
	position: relative;
}
nav ul.main_menu{
	display: flex;
	justify-content: center;
}
nav ul.main_menu > li{
	width: 130px;
}
nav ul.main_menu > li > a{
	align-items: center;
	justify-content: center;
	flex-direction: column;
	display: flex;
}
nav ul.main_menu > li:last-child{
	border-right: 1px solid #f8f8f8;
}
nav ul li a{
	height: 100%;
	color: #f8f8f8;
	padding: 10px 5px;
    font-weight: bold;
}
header .login_name .login_menu li a:hover,
nav a:hover{
	color: #fdfdfd;
	text-decoration: none;
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
	background-color: #f9d339;
}

nav ul li a i{
	margin-bottom: 5px;
	font-size: 0.9rem;
}
nav .sub_menu {
	position: absolute;
	top: 100%;
	border-radius: 8px;
	border: 1px solid #fdfdfd;
	overflow: hidden;
	width: calc(100% * 1.5);
}
nav .main_menu li:last-child ul{
	right: 0px;
}
nav .sub_menu li{
	border: none;
	border-bottom: 1px solid #fdfdfd;
}
nav .sub_menu a{
	display: block;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}
nav .sub_menu li:last-child{
	border-bottom: none;
}
.logo_area .sp_menu_open{
	display: none;
	align-items: center;
}
.sp_menu_open .menu-trigger,
.sp_menu_open .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.sp_menu_open .menu-trigger {
	position: relative;
	width: 50px;
	height: 44px;
}
.sp_menu_open .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
}
.sp_menu_open .menu-trigger span:nth-of-type(1) {
	top: 0;
}
.sp_menu_open .menu-trigger span:nth-of-type(2) {
	top: 20px;
}
.sp_menu_open .menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.sp_menu_open .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
.sp_menu_open .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.sp_menu_open .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
}

@media screen and (max-width: 768px){
	header{
		padding: 10px;
	}
	header .logo_area h1, header .logo_area h2 {
		min-width: 85px;
		margin-right: 5px;
	}
	.logo_area .sp_menu_open{
		display: flex;
	}
	header .logo_area_right{
		margin-left: 0;
		margin-right: auto;
	}
	nav ul.main_menu{
		display: none;
		position: absolute;
		width: 98vw;
		height: auto;
		max-height: 80vh;
		overflow-y: auto;
	}
	nav ul li{
		font-size: 1.0rem;
	}
	nav ul.main_menu > li{
		width: 100%;
		border: none;
		border-bottom: 1px solid #fdfdfd;
	}
	nav ul.main_menu > li a{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav ul.main_menu > li span{
		display: block;
		width: 100%;
	    height: 100%;
		color: #f8f8f8;
		padding: 10px 5px;
		padding-left: 15px;
		font-weight: bold;
	}
	nav ul.main_menu > li a i{
		width: 50px;
    	text-align: center;
	}
	nav .sub_menu{
		position: relative;
		border-radius: 0;
		width: 100%;
	}
	nav .sub_menu li a{
		display: block;
		padding-left: 25px;
	}
	nav ul.main_menu .sp_open_sub{
		position: relative;
	}
	nav ul.main_menu .sp_open_sub::before{
		content: '';
		position: absolute;
		border-top: 10px solid #fdfdfd;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		right: 10px;
		top: calc(50% - 5px);
	}
	nav ul.main_menu .sp_open_sub.active::before{
		border-bottom: 10px solid #fdfdfd;
		border-top: 10px solid transparent;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		top: 0;
		bottom: calc(50% - 5px);
	}
}

/******** ヘッダーここまで ********/

/******** コンテンツ ********/
#wrapper{
	width: 98%;
	margin: 0 auto;
	margin-bottom: 20px;
	background-color: #fdfdfd;
	border-radius: 5px;
	padding: 30px 10px;
	box-shadow: 0px 0px 4px #ddd;
}
#wrapper .contents_header .page_title{
	font-weight: bold;
	padding-left: 15px;
	border-left: 5px solid;
	margin-bottom: 20px;
	font-size: 1.5rem;
}
#wrapper .contents_header{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 1px dashed #aaa;
}

#wrapper .contents{
	width: 95%;
	margin: 0 auto;
}

#wrapper #time_area,
#wrapper .form_contents{
	width: 70%;
	margin: 0 auto;
}
#wrapper #time_area #datetime{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
#wrapper #time_area #datetime #home_ymd{
	font-size: 1.5rem;
	letter-spacing: 2px;
	line-height: 1;
}
#wrapper #time_area #datetime #home_time{
	font-size: 3.5rem;
	letter-spacing: 2px;
	line-height: 1;
	margin-top: 5px;
	margin-bottom: 10px;
}

#wrapper .form_contents .form-control[readonly]{
	background-color: #fff;
}
#wrapper .form_contents .form-control[readonly]:disabled{
	background-color: #e9ecef;
}
.datepicker{
	/*z-index: 60 !important;*/
	z-index: 99999999999999 !important;
}
.date_picker_clear{
	display: inline-block;
	position: relative;
	top: 6px;
	left: 10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.date_picker_clear::before,
.date_picker_clear::after{
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	width: 20px;
	height: 3px;
	background-color: #aaa;
}
.date_picker_clear::before{
	-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.date_picker_clear::after{
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#wrapper .form_contents .page_sub_title{
	font-size: 1.2rem;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
#wrapper .form_contents .button_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 40px;
}
#wrapper .form_contents .button_area a,
#wrapper .form_contents .button_area button,
#wrapper .form_contents .button_area input{
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

#wrapper .month_change span{
	margin: 0 10px;
}

#wrapper .form_contents .form-check-input,
#wrapper .form_contents .form-check-label{
	cursor: pointer;
}

@media screen and (max-width: 768px){
	#wrapper #time_area,
	#wrapper .form_contents{
		width: 95%;
	}
}

/* ホーム画面 */
#wrapper .info_area{
	width: 90%;
	margin: 0 auto;
}
#wrapper .info_area .info_title{
    margin-bottom: 10px;
	display: flex;
	align-items: baseline;
	font-size: 1.1rem;
}
#wrapper .info_area .info_title h3{
	margin-bottom: 0;
	font-weight: bold;
    font-size: 1.3rem;
    margin-right: 10px;
}
#wrapper .info_area .info_contents{
	border: 1px solid #ccc;
	margin-bottom: 10px;
}
#wrapper .info_area .info_head{
	background-color: #eee;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 8px 10px;
}
#wrapper .info_area .info_text{
	padding: 8px 10px;
}

#wrapper #attendance_area{
	width: 100%;
	margin: 0 auto;
}
#wrapper #attendance_area .attendance_btn_area{
	width: 60%;
	margin: 0 auto;
	max-width: 550px;
}
#wrapper #attendance_area .attendance_btn{
	font-size: 1.8rem;
	padding: 15px 25px;
	color: #fff;
	margin-bottom: 20px;
	letter-spacing: 10px;
	width: 180px;
	line-height: 1;
}
#wrapper #attendance_area .attendance_btn.attendance_in{
	background-color: #5bc0de;
}
#wrapper #attendance_area .attendance_btn.attendance_in i{
	letter-spacing: 10px;
}
#wrapper #attendance_area .attendance_btn.attendance_out{
	background-color: #337ab7;
}
#wrapper #attendance_area .attendance_btn.attendance_out i{
	letter-spacing: 0px;
}
#wrapper #attendance_area .attendance_btn:hover{
	opacity: 0.8;
}
#wrapper #attendance_area .attendance_btn:hover:disabled{
	opacity: 0.65;
}
#wrapper #attendance_area .attendance_info_area{
	width: 60%;
	max-width: 800px;
	margin: 0 auto;
}
#wrapper #attendance_area .attendance_info_area table{
	margin-left: 5px;
	margin-right: 5px;
	width: 40%;
	min-width: 250px;
}
#wrapper #attendance_area .attendance_info_area table th{
	width: 50%;
	border-bottom: none;
}
#wrapper #attendance_area .attendance_info_area table th,
#wrapper #attendance_area .attendance_info_area table td{
	border-color: #ccc;
}
#wrapper #attendance_area .overtime_info_area{
	font-size: 0.95rem;
}
#wrapper #attendance_area .overtime_info_area .overtime_bar{
	width: 100%;
	height: 20px;
	background-color: #ddd;
	position: relative;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
#wrapper #attendance_area .overtime_info_area .overtime_bar::after{
	position: absolute;
	content: '';
	border-left: 1px solid #ccc;
	left: calc(50% - 1px);
	height: 20px;
	top: 0px;
}
#wrapper #attendance_area .overtime_info_area .overtime_par{
	position: absolute;
	left: 0px;
	top: 0px;
	font-weight: bold;
	height: 20px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	width: 0px;
}
#wrapper #attendance_area .overtime_info_area span{
	line-height: 1;
	z-index: 10;
	padding-left: 5px;
	position: absolute;
	top: 4px;
	font-weight: bold;
}
/*グラフ点滅*/
.overtime_par.blinking{
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
	-moz-animation:blink 0.5s ease-in-out infinite alternate;
	animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
	0% {opacity:1;}
	100% {opacity:0.4;}
}
@-moz-keyframes blink{
	0% {opacity:1;}
	100% {opacity:0.4;}
}
@keyframes blink{
	0% {opacity:1;}
	100% {opacity:0.4;}
}
@media screen and (max-width: 768px){
	#wrapper #attendance_area .attendance_btn_area{
		width: 90%;
		margin: 0 auto;
	}
	#wrapper #attendance_area .attendance_btn{
		font-size: 1.5rem;
		padding: 10px 15px;
		margin-bottom: 30px;
		letter-spacing: 5px;
		width: 120px;
	}
	#wrapper #attendance_area .attendance_btn.attendance_in i{
		letter-spacing: 5px;
	}
	#wrapper #attendance_area .attendance_info_area{
		width: 90%;
	}
	#wrapper #attendance_area .attendance_info_area table{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 10px;
	}
}


/* 一覧系 */
#wrapper .contents .list_table_area{
	width: 100%;
	height: auto;
	max-height: 400px;
	border-color: #bbb;
	overflow-y: auto;
}

#wrapper .contents .list_table{
	width: 100%;
	border-color: #bbb;
}

#wrapper .contents .list_table tr:hover{
	background-color: #fff5ce;
}

#wrapper .contents .list_table .list_table_head th,
#wrapper .contents .list_table .list_table_item td{
	vertical-align: middle;
	border-color: #ccc;
	padding: 5px 8px;
}
#wrapper .contents .list_table .list_table_head th{
	text-align: center;
	border-width: 1px;
}

/* タブ切り替え */
#wrapper .tab_area{
	display: flex;
}
#wrapper .tab_area .change_tab{
	width: 50%;
	border: 1px solid #aaa;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 8px 10px;
	font-weight: bold;
	cursor: pointer;
	background-color: #dfdfdf;
}
#wrapper .tab_area .change_tab.active{
	border-bottom: none;
	background-color: #fff;
}
#wrapper .tab_change_area{
	display: none;
	border: 1px solid #aaa;
	border-top: none;
	padding: 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #fff;
}
#wrapper .tab_change_area.active{
	display: block;
}

/******** コンテンツここまで ********/


/******** モーダル ********/
.show_modal {
	position: fixed;
	overflow: hidden;
}

body .is_modal{
	display: none;
}

body #modal_overlay{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #666;
	opacity: 0.5;
	z-index: 1000;
}
body #modal_body{
	border: 1px solid #aaa;
	border-radius: 5px;
	padding: 20px 20px;
	z-index: 1000;
	background-color: #fff;
	position: fixed;
	top: 10%;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	max-width: 800px;
}
body #modal_body #modal_close{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	width: 26px;
	height: 26px;
}
body #modal_body #modal_close::before,
body #modal_body #modal_close::after{
	content: '';
	position: absolute;
	top: calc(50% - 12px);
	right: 12px;
	width: 2px;
	height: 24px;
	background-color: #555;
}
body #modal_body #modal_close::before{
	transform:rotate(45deg)
}
body #modal_body #modal_close::after{
	transform:rotate(-45deg)
}
#modal_body .modal_wrapper{
	display: flex;
	flex-flow: column;
	height: auto;
	min-height: 250px;
    max-height: calc(90% - 10px);
}
#modal_body .modal_wrapper .modal_title{
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 10px;
}
#modal_body .modal_wrapper .modal_contents{
	margin-bottom: 20px;
}
#modal_body .modal_wrapper .modal_button{
	margin-top: auto;
	margin-bottom: 0;
	display: flex;
	justify-content: center;
}
#modal_body .modal_wrapper .modal_button button{
	margin-left: 20px;
	margin-right: 20px;
}


/******** モーダルここまで ********/

/******** ポップメッセージ ********/

#pop_message{
	display: none;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
    border-radius: .25rem;
	width: 90%;
	max-width: 800px;
	position: fixed;
	left: 0;
	right: 0;
	top: -10%;
	margin: auto;
	z-index: 75;
}


/******** ポップメッセージここまで ********/


/******** ユーティリティクラス ********/

.w100{
	width: 100% !important;
}
.w90{
	width: 90% !important;
}
.w80{
	width: 80% !important;
}
.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.ml0{margin-left: 0;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.mr0{margin-right: 0;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}

.font-09{
	font-size: 0.9rem;
}
.font-085{
	font-size: 0.85rem;
}
.font-08{
	font-size: 0.8rem;
}

ul.list-style-none{
	list-style: none;
}

.is-none{
	display: none;
}

.pc-none{
	display: none;
}

.bg-gray {
	/* disabledと同じ色 */
	background-color: #e9ecef !important;
}

.bg-darkgray {
	/* disabledより濃いグレー */
	background-color: #b0b0b0 !important;
}

.sp-flex{
	display: inline-flex;
}

@media screen and (max-width: 768px){
	.sp-none{
		display: none;
	}
	.pc-none{
		display: block;
	}
	.sp-w100{
		width: 100%;
	}
	.sp-w-initial{
		width: initial;
	}
	.sp-flex{
		display: flex;
		justify-content: flex-end;
	}
}


/******** ユーティリティクラスここまで ********/