.outer{
  position: relative;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.icon {
  width: 78px;
}
small {
  display: block;
  line-height: 1.2;
}
.product, .bg-orange, .bg-green, .bg-blue {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.product {
  position: relative !important;
}
/* .product::before {
  margin-left: -5rem;
  margin-top: -3rem;
  display: block;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  background-image: url("../img/exercise02-6.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 -25rem;
  background-attachment: fixed;
  opacity: 0.5;  /* 透過度を適宜指定してください */
  z-index: -1;
} */
.product h1 {
  font-size: 3rem;
  font-weight: 900;
  padding-top: 50px;
}
.app {
  max-height: 500px;
}
.top_txt {
  padding-left: 5rem;
  padding-right: 5rem;
}
.play_dl {
  width: 220px;
}
.bg-orange {
  background-color: #dd7737;
  color: #ffffff;
}
.bg-green {
  background-color: #28a745;
  color: #ffffff;
}
.bg-blue {
  background-color: #17a2b8;
  color: #ffffff;
}

@media (max-width: 767px) {
  .product, .bg-orange, .bg-green, .bg-blue {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .product h1 {
    padding-top: 0;
    font-size: 2rem;
  }
  .top_txt {
    padding-left: 0;
    padding-right: 0;
  }
  .product::before {
    margin-left: -1rem;
    margin-top: -3rem;
    display: block;
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    background-image: url("../img/exercise02-6.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
    background-attachment: fixed;
    opacity: 0.5;  /* 透過度を適宜指定してください */
    z-index: -1;
  }
}