@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.right{
	text-align: right;
	margin-right: 1px;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
	margin-left: 1px;
}
.red{color:red!important}
/* ----- width ----- */
.w5 {width:5% !important;}
.w8 {width:8% !important;}
.w10 {width:10% !important;}
.w11 {width:11% !important;}
.w12 {width:12% !important;}
.w15 {width:15% !important;}
.w18 {width:18% !important;}
.w19 {width:19% !important;}
.w20 {width:20% !important;}
.w25 {width:25% !important;}
.w30 {width:30% !important;}
.w35 {width:35% !important;}
.w40 {width:40% !important;}
.w45 {width:45% !important;}
.w48 {width:48% !important;}
.w49 {width:49% !important;}
.w50 {width:50% !important;}
.w55 {width:55% !important;}
.w58 {width:58% !important;}
.w60 {width:60% !important;}
.w65 {width:65% !important;}
.w68 {width:68% !important;}
.w70 {width:70% !important;}
.w80 {width:80% !important;}
.w85 {width:85% !important;}
.w90 {width:90% !important;}
.w98 {width:98% !important;}
.w100 {width:100%;}

.mw100{min-width:100px !important;}
.mw120{min-width:100px !important;}
.mw200{min-width:200px !important;}
.mw300{min-width:300px !important;}
.mw400{min-width:400px !important;}
.mw500{min-width:500px !important;}
html{
  font-family: 'monospace','Arial';
  color:rgba(112,112,112,1);
}

body.with-footer{
	padding-bottom:80px;
	position: relative;
}

body,
#wrapper {
  display: flex;
  flex-direction: column;
  font-size: 12px;
/*  min-width:1100px;*/
}

body.with-footer #wrapper {
	padding-bottom:80px;
	min-width:1100px;
	margin-left: calc(50vw - (50% - 20px));
	margin-right: calc(50vw - (50% - 20px));
}

@media only screen and (max-width: 1101px) {
	body.with-footer #wrapper {
		margin-left: 0px;
		margin-right: 0px;
	}
}
@media only screen and (min-width:1101px) and (max-width: 1201px) {
	body.with-footer #wrapper {
		margin-left:  calc(50vw - 550px);
		margin-right: calc(50vw - 550px);
	}
}
/*
*/
/*
@media only screen and (min-width: 1201px) {
	body.with-footer #wrapper {
		margin-left: calc((100vw - (100% - 100px)) / 2);
	   margin-right: calc((100vw - (100% - 100px)) / 2);
	}
}
*/
html, body {
  height: 100%;
}

form{
  margin-top: 10px;
  margin-right: 7px;
  margin-bottom: 0px;
  margin-left: 7px;
}
form.line{
	margin-left: auto;
   	margin-right: auto;
	width:500px;
	padding: 30px 30px;
	border-top: 2px solid rgba(127,196,253,1);
    border-left: 2px solid rgba(127,196,253,1);
    border-right: 2px solid rgba(127,196,253,1);
    border-bottom: 2px solid rgba(127,196,253,1);
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 70px;
}

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
  color: rgba(38,153,251,1);
  font-weight:bold;
}

a {
  color: currentColor;
  transition: .2s ease-in-out;
}

h1, h2, h3, h4 {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  vertical-align: middle;
  height: auto;
  width: 100%;
}

div.header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  background: rgba(38,153,251,1) !important;
  color: #fff;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  outline: none;
  z-index: 10;
  font-size: 20px;
}

div.header label.screen-name{
  text-align: left;
  margin-left: 100px;
  font-size: 20px;
  margin-bottom:0px
}

div.header span.screen-title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

div.header .select-brand{
  font-size: 18px;
  position: absolute;
  right: 150px;
}
div.header form{
	margin-top:0px;
	margin-bottom:0px;
}

div.login-button ol, div.login-button ul, div.login-button dl{
	margin:0px;
}


.select-brand select{
  background: rgba(38,153,251,1) !important;
  color: #fff;
  border-top:none;
  border-bottom: 2px solid rgba(188,224,253,1);
  border-left:none;
  border-right:none;
  border-radius: 0px;
}

footer {
  display: inline-table;
  margin-top: auto;
  position: fixed;
  bottom:0;
  background: rgba(38,153,251,1);
  width: 100%;
  height: 70px;
  left: 0px;
  z-index: 9;
}


footer div{
  float: right;
}

footer span#copyright{
	position: absolute;
    bottom: 0;
}

footer span#copyright:after{
  content: "©︎ 2023 Ampus, Inc.";
  margin-left: 10px;
  color: #fff;
  font-size: 14px;
}

.foot-btn{
/*	background-color: Transparent !important;*/
	background: #495057!important;
    background-repeat:no-repeat;
	min-width: 110px;
	margin-top: 10px;
    margin-right: 10px;
}

.foot-btn.rtn-btn{
	background: rgba(191, 188, 188, 1) !important;
	min-width: 80px;
}

footer div.foot-btn-l{
	float: left;
	margin-left: 10px;
}

h1 {
  padding: 0.3em;/*文字周りの余白*/
  background: rgba(241, 249, 255, 1);/*背景色*/
  font-size: 1.4em;
  margin-bottom: 0px;
  color:rgba(38, 153, 251, 1)
}