@charset "UTF-8";

.cp_contents {
  background-image: url(../images/pc_bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  padding: 50px 138px 360px;
}

.cp_contents img {
  width: 100%;
}

.cp_contents p {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

.cp_contents a:hover {
  opacity: 0.7;
  transition: 0.3s;
}


/*-------------- kv --------------*/
.kv {
  position: relative;
}

.kv1 {
  width: 100%;
}

.kv2 {
  position: absolute;
  left: 110px;
  top: 20px;
  width: 55%;
}

/*-------------- summary --------------*/
.cp_summary {
  margin: 0 0 20px 0;
}

.cp_summary img {
  margin: 20px 0 0 0;
}

.cp_summary p {
  color: #F15A24;
  font-size: 1.2rem;
  margin: 20px 0 50px;
}

/*-------------- conditions --------------*/
.cp_conditions {
  margin: 0 0 10px 0;
}

/*--------------cp_NA --------------*/
/*-------------- cp_shop --------------*/
.cp_shop_text a {
  color: #F7931E;
  border-bottom: solid 1px #F7931E;
  padding: 0 3px;
}

.cp_shop_text img {
  width: auto;
  height: 15px;
}

/*-------------- cp_app --------------*/
.cp_app {
  position: relative;
  padding: 240px 0 0 0;
}

.cp_app img {
  width: 73%;
  margin: 0 auto;
}

.cp_app a .app_btn {
  width: 50%;
  margin: 20px 0 0 0;
}

.cp_app .coin1 {
  position: absolute;
  right: 70px;
  top: 720px;
  width: 18%;
}

.cp_app .coin2 {
  position: absolute;
  left: 70px;
  top: 330px;
  width: 12%;
}


@media screen and (max-width:767px) {
  .cp_contents p {
    font-size: 0.75rem;
    font-weight: bold;
  }

  .cp_detail {
    padding: 0 0 8%;
    background-color: #fff;
    border-radius: 20px;
  }

  .cp_detail img {
    padding: 0 4%;
  }

  /*-------------- kv --------------*/
  .kv2 {
    left: 20%;
    top: -1px;
    width: 60%;
  }

  /*-------------- summary 概要 --------------*/
  .cp_summary {
    margin: 0 0 10px 0;
  }

  .cp_summary img {
    margin: 20px 0 0 0;
  }

  .cp_summary p {
    font-size: 0.875rem;
    margin: 10px 0 20px;
  }

  /*-------------- conditions 対象条件 --------------*/
  .cp_conditions {
    margin: 0 0 10px 0;
  }

  .cp_conditions img {
    margin: 0 0 15px 0;
  }

  /*--------------cp_NA 対象外条件 --------------*/

  /*-------------- cp_shop 対象店舗 --------------*/
  .cp_shop_text img {
    width: auto;
    height: 5px;
  }

  /*-------------- cp_app たまる使える--------------*/
  .app-detail {
    background-color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    margin: 8% 0 0 0;
    padding: 8%;
  }

  .cp_app {
    background-color: #FFF5D7;
    border-radius: 16px;
    padding: 8%;
  }

  .cp_app img {
    width: 100%;
  }

  .cp_app a .app_btn {
    width: 85%;
    margin: 5% 0 0 0;
  }

  .cp_app .coin1 {
    right: 1%;
    top: auto;
    bottom: 5%;
    width: 15%;
  }

  .cp_app .coin2 {
    position: absolute;
    left: 3%;
    top: 25%;
    width: 15%;
  }

  .cp_contents {
    background:
      url(../images/sp_bg03.png) bottom center / 100% auto no-repeat,
      url(../images/sp_bg02.png) center center / 100% auto repeat-y,
      url(../images/sp_bg01.png) top center / 100% auto no-repeat;
    background-color: #FFF5D7;
    padding-top: 8%;
    padding-bottom: 30%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }

}

/*-------------- アニメーション --------------*/
.scrollanime {
  transition: all ease 1s;
  opacity: 0;
}

.toUp {
  transform: translateY(50px);
}

.fadeIn.scrollanime {
  opacity: 1;
}

.fadeIn.toUp {
  transform: translateY(0);
}