@charset "UTF-8";
/* CSS Document */


html {
    font-size: 100%;
}

header,
header h1,
header h1 img,
.container,
.manual,
.step,
footer{
    width: 100%;
}
article h2{
    width: 60vw;
    height: auto;
    margin: 2rem auto 1rem;
}

article img{
    width: 100%;
}

header{
    position: relative;
}

.header-line-btn{
 display: block;
    width: 85vw;
    position: absolute;
    bottom:36vw;
    right: 0;
  left: 0;
  margin: 0 auto;
}
.header-line-btn img{
    width: 100%;
}

.line-btn{
    display: block;
    width: 85vw;
    margin: 0 auto 1rem;
}


.manual{
    background: url("../images/lp1_sp_contents_bg01.png") center center;
    background-size: cover;
    overflow: auto;
    padding: 40px 0;
}



.manual ul{
    width: 75vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}
.manual ul li{
    width: 35vw;
    margin-bottom: 1rem;
}

.manual aside{
    width: 96vw;
    margin: 5px auto ;
}

.step{
    background: url("../images/lp1_sp_contents_bg02.png") center center;
    overflow: auto;
    background-size: cover;
    padding: 40px 0;
}



.step-flow{
    width: 86vw;
    margin: 1rem auto;
}

footer{
    
    background:  url("../images/lp1_sp_footer_bg.svg") center center;
    overflow: auto;
    color: #279FAC;
    padding: 30px;
    background-size: cover;
}

footer h3{
   font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    
}

footer address{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.825rem;
    font-weight: 600;
    line-height: 1.5;
}
footer address span{
    display: block;
    
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
}

footer address span.tel{
    margin-top:0.5rem;
    padding-left: 1.1rem;
    background: url("../images/icon_phone.svg")no-repeat;
    background-size: 0.8rem;
     background-position: 0 0.2rem;
}

footer address span.mail{
    padding-left: 1.1rem;
    background: url("../images/icon_mail.svg")no-repeat;
    background-size: 0.8rem;
    background-position: 0 0.4rem;
}


footer ul{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    padding: 1.5rem 0;
    font-size:  0.825rem;
    display: flex;
    justify-content: space-around;
    
}

footer ul li{
    
}

footer ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #279FAC ;
    padding-bottom: 2px;
    border-bottom: 3px #279FAC solid;

}

@media (min-width: 768px) {
    

    
    .header-line-btn{
        width: 28vw;
        bottom: 12vw;
        right: 10vw;
        left: inherit;
        margin: 0;
}
     a.header-line-btn:hover{
        filter: brightness(1.1);
    }
    article h2 {
    width: 20vw;
    margin: 4rem auto 2rem;
}
    .manual{
    background: url("../images/lp1_pc_contents_bg01.png") center center;
         background-size: cover;
    overflow: auto;
    padding: 60px 0;
}
    .manual h2{
    width: 435px;
    height: auto;
    margin: 2rem auto;
}
    
    .manual ul {
    max-width: 923px;
        width: 90%;
        margin: 0 auto;
    }
    .manual ul li {
    width: 22%;
    margin-bottom: 1rem;
}
    .manual aside {
    max-width: 1000px;
        width: 90%;
        margin-bottom: 3.5rem;
    }
    .line-btn {
    width: 657px;
        margin: 0 auto 1.5rem;
    }
     a.line-btn:hover{
        filter: brightness(1.1);
    }
    .step{
    background: url("../images/lp1_pc_contents_bg02.png") center center;
         background-size: cover;
    overflow: auto;
    padding: 60px 0;
}
.step h2{
    width: 273px;
    height: auto;
    margin: 2rem auto;
}

    
    .step-flow {
        max-width: 767px;
        width: 90%;
        margin: 1rem auto 2rem;
    }
    footer{
   background:  url("../images/lp1_pc_footer_bg.png") center center;
         background-size: cover;
    overflow: auto;
        padding: 40px 0 40px 0;
}
    
    footer h3{
         max-width: 678px;
        width: 90%;
        font-size: 1.25rem;
        margin: 0 auto;
        font-weight:bold;
    }
    footer address{
        max-width: 678px;
        width: 90%;
        margin: 10px auto 0;
         font-size: 0.725rem;
        display: flex;
        justify-content: space-between;
        font-weight: normal;
    }
    
footer address span.tel{
     margin-top:0;
    }
    
    footer ul{
         width: 350px;
        margin: 0 auto;
        font-size: 0.725rem;
        padding: 2rem 0 0 0;
    }
    footer ul li a{
    font-weight: normal;
    border-bottom: 1px #279FAC solid;
}
       footer ul li a:hover{
        border-bottom: none;
    }
    
}