@charset "UTF-8";

.p-recycle .m-page-mv {
  background: url("../../../images/page/recycle/bg_fv_pc.png")no-repeat;
  background-size: cover;
  background-position: center;
}

.p-recycle .p-ttl span {
  width: 95px;
}

.p-sec {
    padding: 130px 0;
    background: url("../../../images/page/recycle/bg_ptn_pc.png")no-repeat;
    background-size: 700px;
    background-position: right top;
}

.p-heading {
    font-size: 3.6rem;
    font-weight: 600;
    margin: 0 0 30px;
}

.p-heading small {
  display: block;
  line-height: 1.5;
  font-size: 2rem;
}

.p-other {
  margin-top: 120px;
}

.p-other__box {
    position: relative;
}


.p-other__box figcaption {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 5px 0 0;
}

.p-other__arrow {
  display: block;
  position: absolute;
  width: 35px;
  color: #004E97;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 40px 0 0;
  background: url("../../../images/page/recycle/ico_arrow_pc.png")no-repeat;
  background-size: 35px;
  background-position: center top;
}

.p-other__flex {
    padding: 0 10px 45px 0;
    margin: 0 0 30px;
    background: url("../../../images/page/recycle/ico_down_pc.png")no-repeat;
    background-size: 996px;
    background-position: center bottom;
}

.p-other__lead {
    text-align: center;
    background: #F4F5F5;
    max-width: 400px;
    margin: 0 auto;
    color: #004E97;
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 27px 20px;
}

@media screen and (min-width: 768px) {

  .p-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .p-flex + .p-flex {
    flex-direction: row-reverse;
    margin-top: 240px;
  }

  .p-block {
    width: 50%;
  }

  .p-flex + .p-flex .p-block {
    padding-right: 20px;
  }

  .p-graph {
    position: relative;
    width: 50%;
  }

  .p-flex:first-child .p-graph {
    height: 540px;
  }

  .p-graph01 {
    width: 600px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .p-other__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .p-other__box {
      max-width: 280px;
      width: 29%;
  }

  .p-other__result {
      max-width: 421px;
      width: 43%;
  }

  .p-other__box figure {
      width: 175px;
  }

  .p-other__arrow {
    right: 30px;
    top: 48px;
  }

}

@media screen and (max-width: 767px){
  .p-recycle .m-page-mv {
    background: url("../../../images/page/recycle/bg_fv_sp.png")no-repeat;
    background-size: cover;
    background-position: center;
  }

  .p-recycle .p-ttl span {
    width: 60px;
  }


  .p-sec {
    padding: 25px 0 50px;
    background: url("../../../images/page/recycle/bg_ptn_sp.png")no-repeat;
    background-size: 150px;
    background-position: right top 350px;
  }

  .p-heading {
      font-size: 2.3rem;
      margin: 0 0 15px;
  }

  .p-graph {
      margin: 0 auto 30px;
  }

  .p-flex + .p-flex {
    margin-top: 70px;
  }

  .p-flex + .p-flex .p-graph {
    margin: 0 auto 50px;
  }

  .p-heading small {
    font-size: 1.5rem;
  }

  .p-other {
    margin-top: 70px;
  }

  .p-other__flex {
      margin: 30px auto 25px;
      padding: 0 0 60px;
      background: url("../../../images/page/recycle/ico_down_sp.png")no-repeat;
      background-size: 335px;
      background-position: center bottom;
  }

  .p-other__lead {
      font-size: 1.7rem;
      max-width: 275px;
      padding: 15px 0;
  }

  .p-other__result {
      max-width: 315px;
      margin: 0 auto;
  }

  .p-other__box {
      padding: 0 0 70px;
  }

  .p-other__box figcaption {
      font-size: 1.3rem;
  }

  .p-other__box figure {
      max-width: 240px;
      margin: 0 auto;
  }

  .p-other__arrow {
    display: block;
    position: absolute;
    width: 110px;
    font-size: 1.4rem;
    text-align: right;
    background: url("../../../images/page/recycle/ico_arrow_sp.png")no-repeat;
    background-size: 30px;
    background-position: center;
    bottom: 15px;
    left: 50%;
    margin-left: -55px;
    padding: 5px 0 0;
    height: 40px;
  }


}