@import url('../../common/css/app.css');
.webToAppArea {
  position: relative;
  display: flex;
}
.webToAppArea .webToBox {
  position: absolute;
  font-size: 20px;
  line-height: 23px;
  width: 210px;
  bottom: 44px;
  color: #fff;
  text-align: center;
}
.webToAppArea .webToBox p {
  font-family: OpenSans-Bold,Arial,Helvetica,sans-serif;
  font-weight: 600;
  margin: 0;
}
.webToAppArea .webToBox p:last-child {
  margin-top: 4px;
}
@media screen and (min-width: 768px){
  .webToAppStroies .story1 {
    background-image: url(../img/app_story1.webp);
  }
  .webToAppStroies .story2 {
    background-image: url(../img/app_story2.webp);
  }
}
@media screen and (max-width: 768px) {
  .listBtn {
    margin-top: 0.2rem;
  }
  .webToAppArea .webToBox {
    font-size: 2.7vw;
    line-height: 3.3vw;
    width: 31vw;
    bottom: 3.1rem;
  }
  .webToAppArea .webToBox p:last-child {
    margin-top: 0.2rem;
  }
  .webToAppStroies .story1 {
    background-image: url(../img/app_mobile_story1.webp);
  }
  .webToAppStroies .story2 {
    background-image: url(../img/app_mobile_story2.webp);
  }
}
/* ========== PC Font Styles (min-width: 768px) ========== */
@media screen and (min-width: 768px) {
    .webToAppArea .webToBox p {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    }
}

/* ========== Mobile Font Styles (max-width: 768px) ========== */
@media screen and (max-width: 768px) {
    .webToAppArea .webToBox p {
        font-family: STIXTwoText-Bold, Arial, Helvetica, sans-serif;
    }
}