/*================================================
*  common
================================================*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
    /* font-size: 14px;
    line-height: 1; */
    /* font-family: 'Noto Sans Japanese',   sans-serif; */
}

a {
    /* color: #09F; */
}



.red {
    color: #ff0000;
}

a:hover img {
    transition: 0.5s;
    opacity: 0.7;
}

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

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    /* box縺ｮpadding border繧貞�蛹�☆繧� */
}

section {
    line-height: 1.5;
}


@-moz-document url-prefix() {
    section {
        font-family: "Noto Sans Japanese";
    }
}

main#hardware {
    font-size: 18px;
    color: #202020;
    font-family: 'Noto Sans Japanese', sans-serif;
    line-height: 1.5;
}

@media screen and (max-width:728px) {
    main#hardware {
        font-size: 16px;
    }
}


.padding {
    border: 0.01rem solid #ffffff;
    background: #edf5f4;
}

.arrow::after {
    padding-left: 10px;
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}

/*button color*/
:root {
    --color1: black;
    --color2: white;
}

/*hero*/
.hero
{background-image: url(/keigencheck_login/images/hero.png) ;
height:200px; 
    text-align: center;
    position: relative;
    color: #fff;
}
  

.hero h1{  font-size:3rem;
vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 10rem;

}
.hero span{font-size:2rem;
}
/*hero*/

/*content1*/
.content1{margin: 20px 0;}
.content1 h2{color:#ba5454;}
/*content1*/


/*login*/
.login{border-top:1px solid #d9d9d9;
padding: 30px 10px;
color: #344655;
}

/*login*/
.loginbutton{
padding: 20px 10px  30px;
background: #f0f0f0;}

.loginbutton .btn{
    margin-top: 20px;
    font-size:1.7rem;
    background-color: #5E9CD5;
    color: #fff !important;
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, #31adb7 50%);	
    background-image: linear-gradient(to right, transparent 50%, #31adb7 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;

}

.loginbutton .btn:hover{
    background-color: #31adb7;
    background-position: -100% 100%;
}

.register{text-align: right;

}

.register a{color:#4881c3;
font-size:1.5rem;}

.register a:hover{color:#31adb7;}

/*************************************************************************************/
/*Sp Layout*/
/*************************************************************************************/


@media screen and (max-width:728px) {}