@charset "utf-8";

body {
  background: #f5f1e5;
}

@media all and (min-width: 897px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
  
  .wrap {
    width: 100%;
  }

  
  .fvback {
    width: 100%;
    padding: 25px 0 30px;
    background: url("../images/head_bg_pc.jpg") no-repeat top center/cover;
    overflow: hidden;
    height: 100vh;
  }
  
  .fvback img {
    width: 100%;
    max-width: 1200px;
  }

  .backarea01 {
    background: url("../images/step1_bg_pc.png") no-repeat top center/cover;
    padding: 118px 0 240px;
  }
  
  .backarea01 img{
    width: 980px;
    margin-bottom: 50px;
  }

  .backarea02 {
    position: relative;
    z-index: -1;
    width: 100%;
    padding: 140px 0 100px;
    background: url("../images/step2_bg_pc.png") no-repeat top center/cover;
    margin-top: -150px;
  }
  
  .backarea02 img{
    
    width: 980px;
    padding: 118px 0 0;
  }
  
  .step3_title {
    width: 426px;
    margin: 50px auto 50px;
  }

  .backarea03 {
    position: relative;
    z-index: 1;
    margin-top: -100px;
    width: 100%;
    padding: 118px 0 300px;
    background: url("../images/step03_bg_pc.png") no-repeat top center/cover;
  }

  .backarea04 {
    position: relative;
    width: 100%;
    padding: 200px 0 130px;
    background: url("../images/step4_bg_pc.png") no-repeat top center /cover;
    background-position: 50% 75%;
    margin-top: -100px;
    
  }
  
  .backarea04 img{
    width: 980px;
    margin: 0 auto;
  }

  .backarea05 {
    width: 100%;
    padding: 150px 0;
    background: url("../images/03back.png") no-repeat top center/cover;
  }
  
  .backarea07 {
    width: 100%;
    padding: 113px 0 141px;
    background: url("../images/07back.png") no-repeat top center/cover;
  }
  
  .backarea08 {
    width: 100%;
    padding: 138px 0;
    background: #E1EBDC;
  }
}



@media all and (max-width: 896px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  
  header {
    background:#231815;
    width: 100%;
    position: absolute;
    padding-left:2.6vw;
    padding-top: 15px;
  }
  
  header img{
    width: 60%;
    margin: 0 0 1.6vw;
  }
  
  .backarea04 {
    padding: 14.13vw 0 5.9vw;;
    background: #E1EBDC;
    
  }
  
  .backarea04 .sp04_tittle {
    width: 80.53vw;
    display: block;
    margin: 0 auto 7vw;
  }
  
  .backarea04 .sp04_content {
    margin: 0 auto 4.6vw;
    width: 89.33vw;
  }
  
  .backarea06 {
    padding: 12.22vw 0 5.3vw;
    background: url("../images/sp_06_back.png") no-repeat top center/cover;
  }
  
  .backarea06 .sp06_tittle {
    margin: 0 auto 4.4vw;
    width: 31.46vw;
  }
  
  .backarea06 .sp06_content {
    width: 75.2vw;
    margin: 0 auto 5vw;
  }
  
  footer {
    background:#231815;
    width: 100%;
    position: relative;
    padding-left:2.6vw;
    padding-top: 30px;
    padding-bottom: 20px;
  }
  
  footer img{
    width: 60%;
    margin: 0 auto;
    display: block;
  }
  
}