@charset "UTF-8";

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1500px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1440px;
  }
}


/*ユーザーページカラー*/
.user_side_bg {
	background-color:#054FBE !important;
}

/*フォーム・テーブル汎用*/

form select.form-control {
  font-size:16px;
  height: calc(1em + 1.75rem + 2px);
  padding: 0.2rem 0.2rem;
}

form input.form-control {
  font-size:16px;
}

form textarea.form-control {
  font-size:16px;
}

form input.fileup {
  height: calc(1em + 1.75rem);
}

.tr_hidden {
  background:#CCC;
}

#footer-menu-bar {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#footer-menu-bar a {
	text-decoration:none;
}

#footer-menu-bar.js_hide {
    transform: translateY(100%);
}

/******************************
QR読み込み
******************************/
*[data-view-id="catch-container"] { display: none; }

*[data-view-id="catch-result"] { display: none; }

*[data-item-id="point"] {
  display:block;
  width:100%;
  text-align:center;
  font-size:120%;
}
 
*[data-item-id="point"]:empty {
  padding: 0;
  margin: 0;
}

.display-none { display: none; }

/******************************
 画面デザイン
******************************/
.catch-container { 
	position: fixed;
	margin:0;
	padding:0;
	top: 0; 
	left: 0; 
	background-color: #f9f9f9; 
	width: 100%; 
	height: 100vh; 
	z-index: 9999;

}

#carea {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#video_area {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  z-index: -1;
}

.title-section {
  width: 100%;
  background: rgba(0,0,0,0.5);
  min-height:60px;
  padding:5px;
  display:block;
  position:relative;
}

.title-section h2 {
  display:block;
  font-size:16px;
  color:#FFF;
  margin:0 0 2px;
  padding:0;
  font-weight:bold;
  letter-spacing:1px;
  text-align:center;
}

.title-section p {
  font-size:14px;
  color:#FFF;
  margin:0;
  padding:0;
  text-align:center;
}

.catch-container-close { 
  position: absolute;
  right:8px;
  top:8px;
}


#rarea_outer {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rarea {
  width: 100%;
  max-width:1000px;
  padding:10px;
  margin-top:-80px;
}

.catch-result {
  background-color:rgba(255,255,255,0.9);
  border-radius: 10px;
  width: 100%;
  padding:20px;
}

.res_box { margin-top:20px; }

#ruser_det {
  display: flex;
  align-items: center;
}

#ruser_det svg {
  margin-right:10px;
}

#ruser_det p {
  margin:0;
}

.code-section {
  position: fixed;  
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: space-between;
}

.code-section .csec_parts {
  width: 50%;
}


#time {
  width: 100%;
  color:#FFF;
  font-weight:bold;
  text-align:center;
  padding:8px;
}

.code-section input,
.code-section input:focus {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  text-align:center;
  color:#FFF;
}

.code-section input {
  margin: 8px;
  width:100%;
}

/******************************
キャプチャ結果
******************************/

#capture_image {
	position: fixed; top: 0; left: 0;
	width:200px;
}

@media (max-width: 800px) {
#capture_image {
	width:auto;
	max-height:80px;
}
}


/*time_form*/

.time_form{
	width:100%;
	padding:10px;
	border-bottom:1px solid #ddd;
	display:flex;
	justify-content: space-between;
	align-items: center;
}

.time_form:hover {
  background-color: #FFC;
}

.time_form_time{
	font-size:24px;
	font-weight:bold;
	padding-left:10px;
}

.time_form_num{
	width:20%;
}

.time_form_num input{
	text-align:center;
}



/*calendar*/

.cal{background:#fff;}

@media (max-width: 768px) {
  .cal{
	  margin-left:-10px;
	  margin-right:-10px;
  }
}

.cal_header{
	width:100%;
	padding:15px 13px;
	border-bottom:1px solid #ddd;
	display:flex;
	justify-content: space-between;
	align-items: center;
	border-bottom:none;
}

.cal_header div{
	width:10%;
}

.cal_header div a{
	display:block;
	padding:0 7px;
	border: solid 1px #CCC;
	background-color:#F3F3F3;
}

.cal_header strong{display:block;text-align:center;font-size:1.1rem;line-height:19px;}

.cal_prev{float:left;cursor:pointer;}
.cal_next{float:right;cursor:pointer;}

.cal_body{
	padding:0;
	text-align:center;
	border-top:solid 1px #CCC; 
	border-left:solid 1px #CCC;
}

.week{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-between;
}

.week div{
	width: 14.28%;
	text-align:center;
	padding:10px;
	border-right:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
}

.week button{
	width: 14.28%;
	border:none;
	background:#FFF;
	border-right:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
}

.week button.available{
	background:#FFFFD7;
	color:#666;
	font-weight:bold;
}

.week button.unavailable{
	background:#FFF;
	color:#666;
}

.week button.pass{
	background:#F0F0F0;
	color:#666;
}

.week button.available:hover{
	background:#FF9;
}

.week button:focus, .week button:active {
  outline: none !important;
  box-shadow: none !important;
}

.sat{color: #397bbe;}
.sun{color: #ff7171;}

.week button.today{ background:#FFF0FF }

.cal_day{
	display:block;
	padding:8px 3px;
	white-space: nowrap;
	text-align:center;
}

@media (max-width: 768px) {
	.cal_day{
		padding:5px 0;
	}
}

.cal_day span{
	display:block;
	margin-top:0;
}

.cal_day .date_num{
	
}

.cal_day .date_state {
    background: #FFF;
    border: solid #F3F3F3 1px;
	font-size:12px;
}

.cal_day .date_holi{
	font-size:10px;
	margin-left:3px;
	color:#F00;
}

.cal_day .date_close{
	margin-left:5px;
	font-size:10px;
	color:#06C;
}



/*ローダー*/

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255,255,255,0.8);
  z-index: 2000;
  display:none;

}

#loader {
  height:auto;
  text-align: center;
  color: #af9b65;
  margin-top:-50px;
  font-size: 18px;
  font-weight: 700;
}