@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Medium.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Bold.woff') format('woff');
  font-weight: 700;
}

html{
  font-size: 62.5%; /*62.5% = 16px;*/
}

body {
 font-family: 'Noto Sans JP', sans-serif;
 font-style: normal;
 font-weight: 400;
	animation: fadein 1.5s forwards;
 overflow: hidden; 
}



img {
width:100%;
max-width: 100%;
height: auto;
}

main {
display: flex;
justify-content: center;	
width: 100%;
height: 340px;
}

.login-area{
margin: 1em auto;
min-width : 493.6px;
}

.bg-bcs {
padding: 2em 1em 1em 1.5em;
background-image: url(../images/bg-03.png);
background-repeat: repeat-y;
margin-left: 2em;
height: 100%; 
display: flex;
align-items:flex-end; 
}

.bg-number {
display: flex;
align-items:flex-end; 
background-color: #321F20;
padding: 2em 1em 1em 1.5em;
height: 100%;
/*background-image: url(../images/bg-02.png);*/
/*background-repeat: no-repeat; 
background-position: bottom 10px right 50%;*/
}

.login-list{
margin: 1em auto 1em;
width: 90%;
}

p{
color: #825E2C;
    margin: 0.8em auto;
    text-align: center;
    font-size: 1.6rem;
}

@media only screen and (min-width: 0px) and (max-width: 799px){
  p{
    font-size: 1.1rem;
  }
}


input {
line-height: normal;
border-radius: 40px;
padding: 1em;
font-size: 1.4rem; 
}

input[type="text"],
input[type="password"]{
padding: 1em 1em;
background: #D8D8D8;
border: 0px;
width: 100%;
margin-bottom: 0.5em;
}

input[type="submit"] {
padding: 1em 1em;
    background: #A83031;
    border: 0px;
    width: 106%;
    color: #fff;
    margin: 0 auto 0;
    display: block;
}

input[type="submit"]:hover {
    background: #8D0012;
    color: #FFFF42;
}

.link-list {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.4rem;
}

.link-list a {
    text-decoration: none;
    color: rgba(0,0,0,1);
 margin: 0.5em auto;
}

.link-list a:hover {
 text-decoration: none;
 color: rgba(0,0,0,0.6);
 margin: 0.5em auto;
}

label{
 font-size: 1.4rem;
 margin: 1em auto 1em;
 text-align: center;
 display: block;
}

label input{
  margin-right: 5px;
}



.red_font{
  color : #a83031;
}


.signinDisabled{
  pointer-events: none;
  opacity: 0.5;
}


@media only screen and (min-width: 0px) and (max-width: 799px){
 
main {
display: flex;
justify-content: center;	
width: 100%;
height: 230px;
} 
 
input[type="text"], input[type="password"] {
    padding: 0.5em 0.5em;
    background: #D8D8D8;
    border: 0px;
    width: 100%;
    margin-bottom: 0.5em;
}
 
input {
line-height: normal;
border-radius: 40px;
padding: 0.8em;
font-size: 1.2rem; 
} 
 
input[type="submit"] {
    padding: 0.5em 0.5em;
    background: #A83031;
    border: 0px;
    width: 106%;
    color: #fff;
    margin: 0 auto 0;
    display: block;
} 
 
 
img[src="assets/images/ttl-01.png"] {
    /* margin-left: 10px; */
    width: 70%;
    display: block;
    text-align: center;
    margin: auto;
} 
 
label{
 font-size: 1.2rem;
 margin: 0.5em auto 0.5em;
 text-align: center;
 display: block;
} 
 
.link-list {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.2rem;
} 
 
 
}