*{font-family:'Roboto Condensed','NotoSansJP','FoundersGrotesk','Helvetica','Verdana','Meiryo','Arial',sans-serif}


html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;  
}

.bgCol-hdr{
	background-color: #004b8d;
}
.bgCol-body{
	background-color: #f6f6f6;
}

.w-500{/*width:500px;*/}

.boxcontent {
	width:500px;
	background-color: #fff;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1));
	padding:20px;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #909090;
color:#fff;
}

a {
    color: #00573d;
}
a, a:focus, a:hover {
    text-decoration: none;
}
/****************************************/
.savedsession{
	margin-top: 10px;
	padding: 10px;
	color:#0070BD;
	border: solid;
	border-width:thin;
}

/*https://www.nowte.net/ui/css-liquid-layout/*/
.progressbar {position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 25%;
    color: #999999;
    font-weight: bold;
    counter-increment: steps;
}
.progressbar li:before {
    display: block;
    width: 26px;
    height: 26px;
    margin: 7px auto 20px auto;
    content: '';
    line-height: 26px;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    background-color: #F5F5F5;
    content: counter(steps);
}
.progressbar li:after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #F5F5F5;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active,
.progressbar li.complete{
    color: #0070BD;
}
.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #0070BD;
    color: #FFF;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #0070BD;
}


/*https://www.nowte.net/ui/css-liquid-layout/*/
#contents {
  width: 100%; /*width*/
  display: flex;
  justify-content: center;
}
#main {
  max-width: 1000px;
  
}
#sub {
  width: 200px; /*width*/
  margin-top: 20px;
  margin-left: 20px;
}
#sub-sticky{
  position: sticky;
  top:20px;
}

@media screen and (max-width: 767px) {
  #contents {
    width: 100%;
    display: block;
  }
  #main {
    width: 100%;
  }
  #sub {
    width: 100%;
  }
}

/* for file upload 
https://codepen.io/cccabinet/pen/OvNORg */
.custom-file {
  max-width: 20rem;
  overflow: hidden;
}
.custom-file-label {
  white-space: nowrap;
}

.error {
  border: 1px solid #b9b9b9;
  background-color: #fcc;
  padding: 2px;
  width: 100%;
  margin: 0 auto;
  font-size: 15px
}