@charset "UTF-8";

/** default setting **********************************************************/
*, *:before, *:after {
	margin: 0; padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	color: #000;
	font-size: 16px;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	text-align: left;
	line-height: 1.8;
	letter-spacing: -0.001em;
	background: #fff;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	word-wrap: break-word;
	overflow-x: hidden;
}
a:link, a.btn-link { color: #0099C9; text-decoration: none; }
a:hover, a:active, a.btn-link:hover, a.btn-link:active { text-decoration: underline;  }
a:visited { color: #1A0DAB; }
a:hover img, a:active img { opacity: .7; }
a:hover, a:active, input:hover, input:active, a:hover img, a:active img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; }
p { text-align: left; }
table,th,td,input,select,textarea { font-size: inherit; font-family: inherit; }
table ul, table ol { margin: 0 0 0 1em; }
img { border: none; max-width: 100%; height: auto; }
hr { border: none; border-bottom: dotted 1px #000; padding: 1em 0 0; margin-bottom: 30px; }
blockquote { padding: 10px; margin-bottom: 1.5em; background: #f8f8f8; border: solid 1px #eee; }
iframe { border: none; max-width: 100%; }
b, strong { font-weight: 700; }

.en { font-family: 'Arvo', serif; }
.container { padding-left: 15px; padding-right: 15px; }
.row { margin-left: -15px; margin-right: -15px; }
.row>* { padding-left: 15px; padding-right: 15px; }

.regular { font-weight: 400 !important; }
.mediumbold { font-weight: 500 !important; }
.bold { font-weight: 700 !important; }
.small { font-size: .75em !important; }
.medium { font-size: .875em !important; }
.large { font-size: 1.125em !important; }
.x-large { font-size: 1.25em !important; }
.xx-large { font-size: 1.375em !important; }
.xxx-large { font-size: 1.5em !important; }
.lh-12 { line-height: 1.2 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-18 { line-height: 1.8 !important; }
.lh-20 { line-height: 2.0 !important; }

.color-black { color: #000 !important; }
.color-white { color: #fff !important; }
.color-red { color: #c40003 !important; }

.bg-black { background: #000; }
.bg-red { background: #c40003 !important; }
.bg-yellow { background: #fed900 !important; }

.mag60 { margin-bottom: 60px!important; }
.mag70 { margin-bottom: 70px!important; }
.mag80 { margin-bottom: 80px!important; }

/* table */
table { width: 100%; color: #000; }
table thead th { font-size: 16px; font-weight: 700; text-align: center; background: #E9E9E9; }
table thead .table-title th { font-size: 20px; font-weight: 700; text-align: left; }
table th, table td { font-size: 16px; text-align: center; border: solid 1px #C9C9C9; vertical-align: middle; padding: .75rem; }
table th { font-weight: 700; }
table label { margin-bottom: 0; }
@media screen and (max-width: 767px){
	table:not(.scroll) , table:not(.scroll) thead, table:not(.scroll) tbody, table:not(.scroll) tr, table:not(.scroll) th, table:not(.scroll) td, table:not(.scroll) caption { display: block; border: none; width: 100%; }
	table:not(.scroll) th { border: solid 1px #C9C9C9; }
	table:not(.scroll) td { border-left: solid 1px #C9C9C9; border-right: solid 1px #C9C9C9; }
	table:not(.scroll) tr:last-child td { border-bottom: solid 1px #C9C9C9; }
}
@media screen and (max-width: 991px){
	.scroll-tbl { overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; }
	.scroll-tbl::-webkit-scrollbar{ height: 5px; }
	.scroll-tbl::-webkit-scrollbar-track{ background: #F1F1F1; }
	.scroll-tbl::-webkit-scrollbar-thumb { background: #BCBCBC; }
}

/* table timecard */
table td.stamp-clock, table td.stamp-break { font-size: 14px; font-weight: 400; }
table td.clock-in, td.clock-out, table td.break-in, table td.break-out { font-weight: 700; }
table td.remark { text-align: left; }
table .saturday th, table .saturday td { background: #E4F4FF; }
table .sunday th, table .sunday td, table .holiday th, table .holiday td { background: #FCE4E1; }
table .saturday th.date { color: #0099C9; }
table .sunday th.date, table .holiday th.date { color: #F25345; }

/* table setting */
table.setting-tbl th, table.setting-tbl td { text-align: left; }
table.setting-tbl th { width: 100%; }
table.setting-tbl td select { display: inline-block; max-width: 75px; }
table.user-tbl td select { max-width: 168px; }
table.user-tbl td input { max-width: 320px; }
table.user-tbl td input.no { max-width: 100px; }
table.colored-head th { background: #E9E9E9; }

/* btn */
.btn, input.btn, button.btn { font-size: 18px; font-weight: 700; border-radius: 5px; max-width: 168px; padding: 10px 0; }
a.btn-primary, input.btn-primary, button.btn-primary { color: #fff; background: #0099C9; border: solid 1px #0099C9; }
a.btn-secondary, input.btn-secondary, button.btn-secondary { color: #fff; background: #8B8B8B; border: solid 1px #8B8B8B; }
a.btn-success, input.btn-success, button.btn-success { color: #fff; background: #6BCB6B; border: solid 1px #6BCB6B; }
a.btn-danger, input.btn-danger, button.btn-danger { color: #fff; background: #DC5F5F; border: solid 1px #DC5F5F; }

a.btn-primary:not(:disabled):not(.disabled):hover, a.btn-primary:not(:disabled):not(.disabled):active, input.btn-primary:not(:disabled):not(.disabled):hover, input.btn-primary:not(:disabled):not(.disabled):active, button.btn-primary:not(:disabled):not(.disabled):hover, button.btn-primary:not(:disabled):not(.disabled):active,
a.btn-secondary:not(:disabled):not(.disabled):hover, a.btn-secondary:not(:disabled):not(.disabled):active, input.btn-secondary:not(:disabled):not(.disabled):hover, input.btn-secondary:not(:disabled):not(.disabled):active, button.btn-secondary:not(:disabled):not(.disabled):hover, button.btn-secondary:not(:disabled):not(.disabled):active,
a.btn-success:not(:disabled):not(.disabled):hover, a.btn-success:not(:disabled):not(.disabled):active, input.btn-success:not(:disabled):not(.disabled):hover, input.btn-success:not(:disabled):not(.disabled):active, button.btn-success:not(:disabled):not(.disabled):hover, button.btn-success:not(:disabled):not(.disabled):active,
a.btn-danger:not(:disabled):not(.disabled):hover, a.btn-danger:not(:disabled):not(.disabled):active, input.btn-danger:not(:disabled):not(.disabled):hover, input.btn-danger:not(:disabled):not(.disabled):active, button.btn-danger:not(:disabled):not(.disabled):hover, button.btn-danger:not(:disabled):not(.disabled):active,
a.btn-line:hover, a.btn-line:active, input.btn-line:hover, input.btn-line:active, button.btn-line:hover, button.btn-line:active {
	color: #fff; background-color: #000; border-color: #000;
}
.btn.btn-line { color: #8B8B8B; background: #fff; border: solid 1px #8B8B8B; border-radius: 5px; }
.btn.btn-link { font-size: 16px; font-weight: 400; }
.btn.btn-export { display: inline-block; font-size: 16px; font-weight: 500; max-width: 100%; padding: 5px 15px; }
.btn-primary.disabled, .btn-primary:disabled, .btn-secondary.disabled, .btn-secondary:disabled, .btn-success.disabled, .btn-success:disabled, .btn-danger:disabled, .btn-danger.disabled { opacity: .3; box-shadow: none; }
.btn.withshadow, a.withshadow, input.withshadow, button.withshadow { box-shadow: 0 3px 6px rgb(0 0 0 / 16%); }
.btn.smaller, a.smaller, input.smaller, button.smaller { font-size: 14px; font-weight: 500; height: 100%; vertical-align: baseline; padding: 5px 15px; }

input.btn.stamping {
	letter-spacing: 1em;
	text-indent: 1em;
}

.btns { text-align: center; }
.btns div { display: block; width: 100%; }
.btns div a, .btns div input { margin: 0 auto 15px; }
.btns div:last-child a, .btns div:last-child input { margin-bottom: 0; }


/* header */
header { width: 100%; height: 125px; background: #fff; box-shadow: 0 3px 6px rgb(0 0 0 / 16%); position: fixed; top: 0; left: 0; z-index: 100; }
.header-contents { height: 100%; position: relative; padding: 10px 15px; }
header h1 { font-size: 36px; margin-bottom: 0; }
header h1 a { display: inline-block; margin-bottom: 5px; }
header h1 img { width: 146px; }
header h1 span { display: block; font-size: 28px; }

.header-nav { position: absolute; right: 15px; bottom: 15px; }
.header-nav ul { list-style: none; margin-bottom: 0; }
.header-nav ul li a { color: #000; }
.header-nav ul li a.dropdown-toggle { padding: 0; }

.dropdown-toggle::after { display: none !important; }

/* alert */
.alert { width: 100%; border-radius: 0; padding: 15px 0; margin-top: -80px; margin-bottom: 80px; }
.alert ul { margin-bottom: 0; }

/* main */
article { position: relative; padding: 80px 0; margin-top: 120px; }
h2.headline-nostyle { font-size: 32px; text-align: center; margin-bottom: 40px; }
h3.headline-gray { font-size: 20px; background: #E9E9E9; padding: 10px 0 10px 20px; margin-bottom: 20px; }

/* login */
body.login { background: #F8F8F8; }
.login article { position: relative; }
.alert-danger ul { list-style: none; }
.login-form { max-width: 740px; margin: 0 auto; }
.login-form .card { border: none; border-radius: 5px; }
.login-form .card-body { padding: 30px 15px; }

input[type="email"], input[type="password"] { max-width: 380px; }
.form-check-input { margin-top: 0.5em; }
button[type="submit"] { display: inline-block; font-size: 16px; font-weight: 700; }

/* timecard */
.mainpanel { border: solid 1px #C9C9C9; padding: 30px 10px 50px; }
.mainpanel-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; }
.datetime { text-align: center; line-height: 1.5; width: 50%; height: 72px; }
.datetime .date_now { font-weight: 500; }
.datetime .time_now { font-size: 32px; font-weight: 500; }
.userlst { width: 47%; }
.stamp-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px; }
.btn-col { text-align: center; width: 50%; padding: 5px 10px; }
.btn-col:nth-child(1), .btn-col:nth-child(2) { padding: 5px 10px 15px; }
.btn-col:nth-child(1), .btn-col:nth-child(3) { border-right: solid 1px #E9E9E9; }
.stamp-btns .btn-col form { margin-bottom: 10px; }
.stamp-btns .btn-col label { font-size: 20px; font-weight: 500; padding: 0; }
.remark input[type="text"] { max-width: 260px; margin-right: 15px; }

/* users */
.inline-block div, .inline-block label, .inline-block select, .inline-block input, .inline-block button { display: block; }
.inline-block select, .inline-block input { max-width: 100%; margin-bottom: 20px; }
.inline-block button { vertical-align: baseline; }

.period-title {
	font-size: 25px;
	font-weight: 700;
	/* background: url(/img/icn_confirm-title.png) no-repeat 0% 3px; */
	background-size: 1em;
	padding: 0 0 5px 1.5em;
}

.retire_flag {
	padding-left: 0.5rem;
}

.retire_flag .form-check-input {
	display:none;
}

.retire_flag .form-check-input+label {
	display: none;
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 25px;
	padding-right: 10px;
}

.retire_flag .form-check-input+label::before {
	content: "";
	position: absolute;
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin-top: -17px;
	left: 0;
	border: 1px solid #ced4da;
	background-color: #FFF;
}

.retire_flag .form-check-input:checked+label::after {
	content: "";
	position: absolute;
	display: block;
	box-sizing: border-box;
	width: 14px;
	height: 9px;
	margin-top: -15px;
	left: 3px;
	transform: rotate(-45deg);
	border-bottom: 3px solid;
	border-left: 3px solid;
	border-color: #000;
}

/* SMALL SP */
@media screen and (max-width: 320px) {

/* timecard */
.datetime .date_now { font-size: 14px; }

}
/* LARGE SP */
@media screen and (min-width: 425px) {
}
@media screen and (min-width: 576px){
}
/* TABLET */
@media screen and (min-width: 768px){

	/* table */
	table.setting-tbl th { width: 25%; }

	/* btn */
	.btns div { display: inline-block; max-width: 168px; vertical-align: middle; margin-right: 30px; }
	.btns div a { margin-bottom: 0; }
	.btns div:last-child a { margin-right: 0; }

	/* header*/
	header { height: 100px; }
	header h1 a { margin-bottom: 0; }
	header h1 span { display: inline-block; vertical-align: middle; padding-left: 30px; }
	.header-nav { right: 30px; bottom: 50%; transform: translateY(50%); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); }

	/* main */
	article { margin-top: 100px; }

	/* login */
	.login-form .card-body { padding: 50px 0; }

	/* timecard */
	.datetime { height: 48px; }
	.datetime .date_now { margin-right: 10px; }
	.stamp-btns .btn-col { width: 25%; border-right: solid 1px #E9E9E9; padding: 15px; }
	.stamp-btns .btn-col:last-of-type { border-right: none; }

	/* users */
	.inline-block div, .inline-block label, .inline-block select, .inline-block input, .inline-block button { display: inline-block; }
	.inline-block label { margin-right: 10px; }
	.inline-block select, .inline-block input { max-width: 168px; margin-right: 30px; margin-bottom: 0; }

}
/* PC */
@media screen and (min-width: 992px){
	a[href^="tel:"], a[href^="tel:"]:hover { text-decoration: none; color: #000; cursor: text; }

	/* table */
	table thead th { font-size: 14px; }
	.timecard-table { display: table; }

	/* main */
	article { margin-top: 100px; }

	/* header */
	header h1 img { width: 186px; }
	.navbar-light .navbar-toggler { display: none; }
	.header-nav { justify-content: flex-end; position: static; transform: inherit; }
	.header-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; margin-bottom: 0; }
	.header-nav ul li a { line-height: 100px; height: 100px; border-bottom: solid 5px transparent; padding: 0 15px; }
	.header-nav ul li a:not(.dropdown-toggle):hover { border-color: #0099C9; }
	.header-nav ul li a.dropdown-toggle { position: relative; padding: 0 15px; }
	.header-nav ul li a.dropdown-toggle i { position: absolute; top: 54%; right: 0; transform: translateY(-50%); }
	.header-nav ul li.dropdown { margin-left: 20px; }
	.header-nav ul li .dropdown-menu { border: none; border-radius: 10px; box-shadow: 0 3px 6px rgb(0 0 0 / 16%); margin-top: 0; }
	.header-nav ul li .dropdown-menu a { line-height: 1.5; height: auto; border-bottom: none; padding: 10px 15px; }
	.header-nav ul li .dropdown-menu a:hover { background: #E9E9E9; }

	/* timecard */
	.display-switch { margin-bottom: 30px; }
	.display-switch .form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	.display-switch a.btn { padding: 5px 10px; }
	.display-switch .form-control { height: auto; padding: 7px 12px 8px; margin-left: 15px; }

	.mainpanel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; border: solid 1px #C9C9C9; padding: 0; }
	.stamp-btns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 65%; margin-bottom: 0; }
	.datetime { width: 35%; height: 100%; }
	.datetime .date_now { font-size: 20px; font-weight: 500; }
	.datetime .time_now { font-weight: 500; }
	.datetime input[type="text"] { max-width: 210px; margin-right: 15px; }

	/* users */
	.inline-block label { margin-left: 50px; }

}
/* PC LARGE-short */
@media screen and (min-width: 1200px){

	/* table */
	table thead th { font-size: 16px; }

	/* timecard */
	.datetime .date_now { font-size: 24px; }
	.datetime .time_now { font-size: 36px; }
	.datetime input[type="text"] { max-width: 252px; }

}
/* PC LARGE */
@media screen and (min-width: 1260px){
}
@media screen and (min-width: 1440px){
}
@media screen and (min-width: 1680px){
}
@media screen and (min-width: 1920px){
}
@media screen and (min-width: 2560px){
}