@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:13vw;
    right: 0;
  left: 0;
  margin: 0 auto;
}
.header-line-btn img{
    width: 100%;
}

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

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

.point ul{
    width: 90vw;
    margin: 0 auto;
   
}
.point ul li{
    width: 100%;
    margin-bottom: 4px;
    position: relative;
}

.point1_illust,
.point3_illust{
    position: absolute;
   
}
.point1_illust{
    bottom:3.6vw;
    right: -2vw;
     width: 44vw;
}

.point3_illust{
    bottom:-3.6vw;
    right: -2vw;
     width: 30vw;
}

.step{
    background: url("../images/lp2_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/lp2_sp_footer_bg.svg") center center;
    overflow: auto;
    color: #fff;
    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: #fff ;
    padding-bottom: 2px;
    border-bottom: 3px #fff solid;

}

@media (min-width: 768px) {
    

    
    .header-line-btn{
        width: 28vw;
        bottom: 0.6vw;
        left: 13vw;
        right: inherit;
        margin: 0;
}
     a.header-line-btn:hover{
        filter: brightness(1.1);
    }
    article h2 {
    width: 20vw;
    margin: 4rem auto 2rem;
}
    article h2.pointh2{
         max-width: 1023px;
        width: 90%;
        margin-bottom: 1rem;
    } 
    .point{
    background: url("../images/lp2_pc_contents_bg01.svg") center center;
         background-size: cover;
    overflow: auto;
         padding: 60px 0;
}
    .point ul {
    max-width: 807px;
        width: 90%;
        margin-bottom: 1rem;
    }
    .point ul li {
    width: 100%;
    margin-bottom: 0px;
}
  .point1_illust,
.point3_illust{
    display: none;
   
}
    .line-btn {
    width: 530px;
        margin: 0 auto 1.5rem;
    }
     a.line-btn:hover{
        filter: brightness(1.1);
    }
    
    .step{
    background: url("../images/lp2_pc_contents_bg02.png") center center;
         background-size: cover;
    overflow: auto;
     padding: 40px 0;
}
    .step h2{
        width: 273px;
        
    }
    
    .step-flow {
        max-width: 767px;
        width: 90%;
        margin: 1rem auto 2rem;
    }
    footer{
   background:  url("../images/lp2_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 #fff solid;
}
       footer ul li a:hover{
        border-bottom: none;
    }
    
}