@CHARSET "utf-8";
/*------------------------------------------------------------------------------
	共通
------------------------------------------------------------------------------*/
html	{
	background-color: white;
	/*font-size: calc(112.5% + 0.25vw);*/
	font-size: 62.5%; /* 10px */
	height: 100%;
}

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
	html {
		font-size: 68.75%; /* 11px */
	}
}

@media screen and (min-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
	html {
		font-size: 75%; /* 12px */
	}
}

body	{
	color: #000;
	width: 100%;
	height: 100%;
	font-size: 1.3em;
	-webkit-text-size-adjust: 100%;
}

ul, li	{
	list-style: none;
}

.full_screen {
	width: 100%;
	height: 100%;
}

.relative	{
	position: relative;
}

.wd_full {
	width: 100% !important;
}

.wd_25_per {
	width: 25% !important;
}

.wd_half_left {
	width:calc(50% - 5px) !important;
	margin-right: 5px !important;
}
.wd_half_right {
	width:calc(50% - 5px) !important;
	margin-left: 5px !important;
}

.inline_block	{
	display: inline-block;
}

.block	{
	display: block;
}

.error	{
	color: #fc2757;
}

.require_txt {
    color: #ce4360;
    font-size: 0.6rem;
}

input[type="button"]:focus {
	outline: 0;
}

.frame {
	padding: 10px;
}

.btn_lg {
	display: inline-block;
	padding: 8px 0;
	border: 0;
 	cursor: pointer;
	text-align: center;
	background-color: #091B29;
	color: white;
}

.btn_rg {
	display: inline-block;
	padding: 8px 3px;
	border: 0;
 	cursor: pointer;
	text-align: center;
	color: white;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.caption {
	font-size: 3rem;
    margin: 0 0 0 20px;
}

.sub_caption {
    font-size: 1.7rem;
    font-weight: bold;
    margin: 0 0 0 2px;
}

.title_image {
	width: calc(100% - 20px);
	max-width: 450px;
	margin-left: 20px;
}

button:disabled {
	background: #ccc !important;
}

#mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#notification_badge {
	color: white;
	width: 25px;
	height: 25px;
	background: red;
	border-radius: 100%;
	position: absolute;
	top: -3px;
	right: -8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 14px;
	pointer-events: none;
	font-family: "Yu Gothic",YuGothic,"Hiragino Sans","Hiragino Kaku Gothic ProN",Verdana,"メイリオ",Meiryo,sans-serif;
}
/*------------------------------------------------------------------------------
	フォントサイズ
------------------------------------------------------------------------------*/
.fs_12 {
	font-size: 1.2rem !important;
}

.fs_13 {
	font-size: 1.3rem !important;
}

.fs_14 {
	font-size: 1.4rem !important;
}

.fs_15 {
	font-size: 1.5rem !important;
}

.fs_15 {
	font-size: 1.5rem !important;
}

.fs_16 {
	font-size: 1.6rem !important;
}

.fs_17 {
	font-size: 1.7rem !important;
}

.fs_18 {
	font-size: 1.8rem !important;
}

.fs_19 {
	font-size: 1.9rem !important;
}

.fs_20 {
	font-size: 2rem !important;
}

.fs_21 {
	font-size: 2.1rem !important;
}

.fs_22 {
	font-size: 2.2rem !important;
}

.fs_23 {
	font-size: 2.3rem !important;
}

.fs_24 {
	font-size: 2.4rem !important;
}

.fs_25 {
	font-size: 2.5rem !important;
}

.fs_26 {
	font-size: 2.6rem !important;
}

.fs_27 {
	font-size: 2.7rem !important;
}

.fs_28 {
	font-size: 2.8rem !important;
}

.fs_29 {
	font-size: 2.9rem !important;
}

.fs_30 {
	font-size: 3rem !important;
}
/*------------------------------------------------------------------------------
	iOSでのデフォルトスタイルをリセット
------------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
button {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {
	outline-offset: -2px;
}
/*------------------------------------------------------------------------------
	DatePicker
------------------------------------------------------------------------------*/
/* .ui-widget {
	font-size: 0.7rem !important;
	z-index: 503 !important;
}
.ui-datepicker-calendar a.ui-state-default::after	{
	content: attr(data-item);
	display: block;
	font-size: 11px;
	line-height: 1;
	height: 11px;
	visibility: visible;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button	{
	font-size: 13px !important;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary	{
	font-weight: normal !important;
}

.ui-datepicker-year, .ui-datepicker-month {
	background: #fff;
} */
/*------------------------------------------------------------------------------
	jquery ui
------------------------------------------------------------------------------*/
/* .ui-widget-header	{
	color: #FFF !important;
	font-weight: normal !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid #000 !important;
	background: #000!important;
	font-weight: normal!important;
	color: #FFF!important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #000 !important;
	background: #FFF !important;
	font-weight: normal !important;
	color: #000 !important;
}

.ui-widget-header {
	background: #000 !important;
}


.ui-widget {
	font-family: "Roboto", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif !important;
}

.ui-dialog {
	width: 90% !important;
	height: 90% !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: auto !important;
	z-index: 1002 !important;
}

.ui-dialog-buttonpane {
	display: none;
} */
/*------------------------------------------------------------------------------
	フォーム
------------------------------------------------------------------------------*/
/* ラジオボタン */
.form_radio input[type="radio"] {
  display: none;
}
.form_radio input[type="radio"] + label{
  padding-left: 20px !important;
  position:relative;
  margin: 0 20px 7px 0;
}
.form_radio input[type="radio"] + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.form_radio input[type="radio"]:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 9px;
  height: 9px;
  background: #000;
  border-radius: 50%;
}

/* チェックボックス */
.form_checkbox input[type="checkbox"] {
	display: none;
}

.form_checkbox input[type="checkbox"] + label {
	padding-left: 20px;
	margin: 0 20px 7px 0;
}

.form_checkbox input[type="checkbox"] + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}

.form_checkbox input[type="checkbox"]:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
}

.words-area {
	width: 100%;
	height: 50px;
	position: relative;
	display: block;
    border: 1px solid rgba(170,170,170,0.48);
}

.search-field {
	color: #ccb224;
	width: calc(110% - 60px);
	height: 100%;
	padding: 0 5px;
	border: 0;
	background-color: transparent;
	font-size: 16px;
	transform: scale(0.9);
	margin: 0 0 0 -5%;
}

.btn_search {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	margin: 0;
	border: 0;
	z-index: 1;
	background: #ddd;
}
/*------------------------------------------------------------------------------
	テーブル
------------------------------------------------------------------------------*/
.tb_custom_vm {
	font-size: 0.65rem;
}

.tb_custom_vm select, .tb_custom_vm input {
	font-size: 0.6rem;
}

.tb_custom_mp th {
	color: #000;
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #000;
	font-size: 0.65rem;
}

.tb_custom_mp td {
	font-size: 0.6rem;
}

.tb_custom_mp input[type='button'] {
	color: #fff !important;
    background-color: #000 !important;
    font-size: 0.5rem;
    padding: 5px;
}
/*------------------------------------------------------------------------------
	入力枠
------------------------------------------------------------------------------*/
.formWrap input:not(.btn_or):not([type="file"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]),
.formWrap textarea,
.formWrap select {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 5px 3px;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}

.formWrap input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

.formWrap select::-ms-expand {
	display: none;
}

.formWrap input:not(.btn_or):not([type="file"]):not([type="checkbox"]):not([type="button"]),
.formWrap textarea,
.formWrap select {
	font-size: 16px;
	transform: scale(0.9);
}

.formWrap select {
	font-size: 3rem;
	padding: 0 2rem 0 1rem;
}

.formWrap .selectWrap {
	position: relative;
	display: inline-block;
}

.formWrap .selectWrap_auto {
	width: auto;
	position: relative;
	display: inline-block;
}

.formWrap .selectWrap::after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-bottom: solid 2px #333;
	border-right: solid 2px #333;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;
	pointer-events: none;
}

.formWrap textarea {
	height: 250px;
}

.formWrap input[type=checkbox] {
	display: none;
}

.formWrap input[type=checkbox] + div {
	height: 22px;
	font-size: 1.4rem;
	padding-left: 30px;
	position:relative;
}
.formWrap input[type=checkbox] + div::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #888;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
}

.formWrap input[type=checkbox]:checked + div::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 6px;
	width: 7px;
	height: 15px;
	transform: rotate(40deg);
	border-bottom: 3px solid #333;
	border-right: 3px solid #333;
}

.formWrap input[type=checkbox]:disabled + label::before {
	display: none;
}

.formWrap input[type=checkbox]:disabled + label {
	color:gray;
}

.formWrap input[type="radio"] {
  display: none;
}

.formWrap input[type="radio"] + span {
	padding-left: 15px;
	position:relative;
	/*margin-right: 20px;*/
}

.formWrap input[type="radio"] + span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
}

.formWrap input[type="radio"]:checked + span {
  color: #000;
}

.formWrap input[type="radio"]:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
}

.formWrap.formWrap_inline input:not(.btn_or):not([type="file"]):not([type="checkbox"]):not([type="button"]),
.formWrap.formWrap_inline textarea,
.formWrap.formWrap_inline select {
	display: inline-block;
}

.formWrap.formWrap_inline input:not(.btn_or):not([type="file"]):not([type="checkbox"]):not([type="button"]),
.formWrap.formWrap_inline  textarea,
.formWrap.formWrap_inline  select {
	width: auto;
}

.formWrap.formWrap_inline input.wd_180 {
	width: 180px !important;
}

.formWrap.formWrap_inline input.wd_380 {
	width: 380px !important;
}

.formWrap.formWrap_inline input.wd_440 {
	width: 440px !important;
}

.formWrap.formWrap_inline input.wd_590 {
	width: 590px !important;
}

.formWrap.formWrap_inline input.wd_640 {
	width: 640px !important;
}

.form_tb	{
	table-layout: fixed;
}

.form_tb th	{
	height: 55px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
}

.form_tb td	{
	height: 55px;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
}
/*------------------------------------------------------------------------------
	ヘッダー
------------------------------------------------------------------------------*/
#header {
	width: 100%;
	height: 50px;
	background: #fff;
	position: relative;
	z-index: 1;
/* 	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5)); スマホでスクロールするとチラつく*/ 
	box-shadow: 0px 0px 5px black;
}

#header h1 {
	font-size: 2.5rem;
    font-weight: normal;
}
/*------------------------------------------------------------------------------
	フッター
------------------------------------------------------------------------------*/
#footer {
	color: #fff;
	width: 100%;
	background: #34332f;
}

#footer .address {
	font-size: 1.1rem;
	margin: 5px 0 0;
}

#footer .other {
	font-size: 1.1rem;
	margin: 20px 0 0;
}

#footer .other .middle_point {
	font-size: 1.4rem;
    margin: 0 2px 0 0;
}
/*------------------------------------------------------------------------------
	コンテンツ
------------------------------------------------------------------------------*/
#wrapper {
	padding-top: 0.1px;
}

.top_bg {
	background-image: url("../image/sp/top_bg.png");
	background-size: contain;
    background-repeat-y: repeat;
    background-position: center;
}
/*------------------------------------------------------------------------------
	メニュー
------------------------------------------------------------------------------*/
#overlay {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100001;
	background: rgba(0, 0, 0, 0.3);
}

#side_menu {
	width: 70%;
	height: 100%;
	max-width: 400px;
	font-size: 0.8rem;
	background-color: #fff;
	overflow-y: auto;
	display: none;
	position: absolute;
	top: 0;
	z-index: 100002;
	left: -70%;
}

#side_menu li {
	padding: 10px;
    font-size: 2rem;
    border-bottom: 1px solid #666;
}
/*------------------------------------------------------------------------------
	ログイン
------------------------------------------------------------------------------*/
.login_form {
	width: 90%;
	max-width: 450px;
    margin: 0 auto;
    background: #e6e6fa;
    padding: 20px 0;
    color: #000;
    border-radius: 5px;
}
/*------------------------------------------------------------------------------
	トップ画面
------------------------------------------------------------------------------*/
.btn_month_feed {
	font-size: 4.5rem;
	padding: 0 10px;
	background: transparent;
}

.btn_month_feed:disabled {
	background: transparent !important;
    color: #ccc !important;
}

.btn_timecard {
	width: 95%;
	font-size: 3.5rem;
	display: inline-block;
	padding: 10px 0;
 	cursor: pointer;
	text-align: center;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #000;
}

.select_row {
	background-color: #e6e6fa !important;
}

.select_row td {
	background-color: unset !important;
}

#report_dialog {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#report_wrap {
	width: 90%;
	height: 95%;
	background: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#report_header {
	width: 100%;
	height: 60px;
}

#report_content {
	width: 100%;
	height: 100%;
}

#report_footer {
	width: 100%;
	height: 70px;
}

.btn_report {
	color: #fff;
	width: 70%;
    height: 50px;
    font-size: 2.5rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_report {
	width: 70%;
    height: 50px;
    font-size: 2.5rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_report_close {
	background: transparent;
}

.btn_report_close i {
	font-size: 3.5rem;
}

#paid_dialog {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#paid_wrap {
	width: 90%;
	height: 95%;
	background: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#paid_header {
	width: 100%;
	height: 60px;
}

#paid_content {
	width: 100%;
	height: 100%;
}

#paid_footer {
	width: 100%;
	height: 70px;
}

.btn_paid {
	color: #fff;
	width: 70%;
    height: 50px;
    font-size: 2.2rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_or2 {
	color: #fff;
	width: 100%;
	padding: 5px 0;
    font-size: 2rem;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border-radius: 3px !important;
}

.btn_paid_close {
	background: transparent;
}

.btn_paid_close i {
	font-size: 3.5rem;
}

#health_dialog {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#health_wrap {
	width: 90%;
	height: 95%;
	background: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#health_header {
	width: 100%;
	height: 60px;
}

#health_content {
	width: 100%;
	height: 100%;
}

#health_footer {
	width: 100%;
	height: 70px;
}

.btn_health {
	color: #fff;
	width: 70%;
    height: 50px;
    font-size: 2.5rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_health_close {
	background: transparent;
}

.btn_health_close i {
	font-size: 3.5rem;
}

#staff_dialog {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#staff_wrap {
	width: 90%;
	height: 95%;
	background: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#staff_header {
	width: 100%;
	height: 60px;
}

#staff_content {
	width: 100%;
	height: 100%;
}

#staff_footer {
	width: 100%;
	height: 70px;
}

.btn_staff {
	color: #fff;
	width: 70%;
    height: 50px;
    font-size: 2.5rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_staff {
	width: 70%;
    height: 50px;
    font-size: 2.5rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn_staff_close {
	background: transparent;
}

.btn_staff_close i {
	font-size: 3.5rem;
}

#sign_dialog {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}

#sign_wrap {
	width: 90%;
	height: 95%;
	background: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}


/* #content_header {
	width: calc(100% - 20px);
	padding: 10px;
	background: #5fc9af;
}

#time_card_header {
	color: #444;
	width: 100%;
	height: 30px;
	background: #ddd;
	font-size: 1.4rem;
}

.time_card_contetn {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.embossing_button_wrap {
	width: 95%;
	text-align: center;
}

.btn_embossing {
	color: white;
	font-size: 2rem;
	width: 100%;
	max-width: 230px;
	padding: 15px 0;
	border: 0;
 	cursor: pointer;
	text-align: center;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.text_memo {
	height: 35px;
	max-width: 630px;
	transform: none !important;
	border-radius: 4px 0 0 4px !important;
	-moz-border-radius: 4px 0 0 4px !important;
    -webkit-border-radius: 4px 0 0 4px !important;
}

.btn_memo {
    height: 35px;
    border-radius: 0 4px 4px 0 !important;
    -moz-border-radius: 0 4px 4px 0 !important;
    -webkit-border-radius: 0 4px 4px 0 !important;
} */
/*------------------------------------------------------------------------------
	カレンダー画面
------------------------------------------------------------------------------*/
#calendar_header {
	width: calc(100% - 20px);
	padding: 10px;
	background: #5fc9af;
}
/*------------------------------------------------------------------------------
	カレンダーテキストボックス
------------------------------------------------------------------------------*/
.calendar_text {
	width: 100%;
	font-size: 2.3rem !important;
}
/*------------------------------------------------------------------------------
	配置承諾画面
------------------------------------------------------------------------------*/
.btn_placement_bulk {
	color: #000;
	font-size: 1.5rem;
	font-weight: bold;
	border: 1px solid #000;
}
/*------------------------------------------------------------------------------
	警備日報
------------------------------------------------------------------------------*/
.sign_area {
	color: #2db3eb;
	font-weight: bold;
	border: 2px dashed #2db3eb;
	border-radius: 3px;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
  	padding: 2px;
}